﻿.hover-link {
    position: relative;
    text-decoration: none; /* Remove underline from link */
    color: var(--item-link-color, black); /* Fallback to black if the variable is not defined */
    display: inline-flex;
    align-items: center;
    gap: var(--adgm-spacing-s4); /* Spacing variable */
    height: 100%;
    white-space: nowrap;
    transition: all 0.3s ease; /* Smooth transitions */
}

.hover-link-footer {
    text-decoration: none;
    color: inherit !important;
    font-weight: 400 !important;
}

.hover-link-footer:hover {
    text-decoration: underline;
    text-underline-position: under;
    color: inherit !important;
}

.hover-link:hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 25%; /* Adjust this value to position the line */
    height: 2px; /* Thickness of the line */
    width: 100%; /* Full width of the link */
    background-color: var(--item-link-color, black); /* Use the CSS variable */
    transition: all 0.3s ease; /* Smooth animation */
}

.mobile-link {
    display: none; /* Default: Hidden on desktop */
}

@media (max-width: 1023px) {
    .mobile-link {
        display: block; /* Show mobile links */
    }

    .hover-link {
        height: auto;
        padding: 16px 0; /* Adjust padding for mobile */
    }

        .hover-link:hover::after {
            display: none; /* Disable hover effect for mobile */
        }

    .desktop-link {
        display: none; /* Hide desktop links */
    }
}

@media (min-width: 1024px) {
    .mobile-link {
        display: none; /* Hide mobile links on desktop */
    }

    .hover-link {
        height: 100%; /* Reset height for desktop */
        padding: 0; /* Reset padding for desktop */
    }

    .hover-link:hover::after {
        content: ""; /* Re-enable hover effect for desktop */
        display: block; /* Ensure the line appears again */
    }

    .desktop-link {
        display: block; /* Show desktop links */
    }
}
.fotter-bottom-links {
    grid-column: span 2;
    max-width: 160px;
    padding: 0;
}
@media (max-width: 991px) {

    .fotter-bottom-links {
        grid-column: span 3;
        padding: 16px 0;
    }
}

.footer-text{
    font-size: 24px;
    font-weight: 400;
}
@media (max-width: 991px){
    .footer-text {
        font-size: 20px;
    }

}