/* -------------------- Global -------------------- */
.header {
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    /*background-color: #ffffff;*/
    border-bottom: 1px solid #e5e5e5;
    background-color: #FFFFFF;
    border-bottom: 1px solid #e5e5e5;
    backdrop-filter: blur(25px);
}
.header.scrolled {
    background-color: rgb(255 255 255 / 80%);
    border-bottom: 1px solid #e5e5e5;
    backdrop-filter: blur(25px);
}

.header-container {
    max-width: 1568px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.mega-menu {
    border-bottom: 1px solid #e5e5e5;
}

#menu-resources .mega-menu-featured-resources.mega-menu-products {
    margin-top: 0px !important;
}

.resources-main-grid .mega-menu-title {
    margin-bottom: 5px !important;
}

.service-main-grid .mega-menu-title {
    margin-bottom: 12px !important;
}

.menu-expertise .mega-menu-products {
    margin-top: 17px !important;
}

.arrow-white , .mobile-logo .white-logo {
    display: none;
}

.hamburger-menu .white-hamburger{
    display: none;
}

@media (min-width: 1024px) and (max-width: 1600px) {
    .header-container {
        padding: 0 48px;
    }
}

@media (min-width: 1025px) {

    /* -------------------- Desktop Navigation -------------------- */
    .desktop-nav {
        display: flex;
        justify-content: center;
    }

    .desktop-nav .nav-list {
        display: flex;
        align-items: center;
        list-style: none;
        gap: 30px;
    }

    .desktop-nav .nav-list .nav-link {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 2px 15px;
        font-size: 15px;
        font-weight: 400;
        color: #000000;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.3s ease;
        font-family: 'Inter Display', sans-serif;
    }

    .desktop-nav .nav-list .nav-link.active {
        color: #FF4833;
    }

    .desktop-nav .nav-list .nav-link .arrow-orange,
    .desktop-nav .nav-list .nav-link .arrow-black {
        transition: 0.3s ease;
    }

    .desktop-nav .nav-list .nav-link .arrow-orange {
        display: none;
    }

    .desktop-nav .nav-list .nav-link.active .arrow-orange {
        display: block;
    }

    .desktop-nav .nav-list .nav-link.active .arrow-black {
        display: none;
    }

    .desktop-nav .nav-list .nav-arrow {
        display: flex;
        align-items: center;
        transition: transform 0.3s ease;
    }

    /* ---------- Contact Button Desktop ---------- */
    .header-action-btns {
        display: flex;
        gap: 10px;
    }

.header-btn {
    display: inline-block;
    padding: 8px 24px;
    font-size: 15px;
    font-family: 'Inter Display', sans-serif;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    border: 1px solid;
}

.red-to-white-outline {
    border-color: #F9452D;
    background: #F9452D;
    color: #fff;
}

    .red-to-white-outline:hover {
    border-color: #F9452D;
    background: transparent;
    color: #F9452D;
}

    .gray-outline-to-red {
        color: #000000;
        border-color: #E4E4E4;
    }
    .gray-outline-to-red:hover {
        color: #F9452D;
        border-color: #F9452D;
    }

    .home-custom-class .gray-outline-to-red {
        color: #fff;
    }
    .home-custom-class .gray-outline-to-red:hover {
        color: #F9452D;
    }




    /* ---------- Hide Hamburger Icons on desktop  ---------- */
    .cta-and-menu .hamburger-menu-group {
        display: none;
        height: 20px;
        width: 20px;
    }

    /* ----------- Mega Menu Overlay ----------- */
    .mega-menu-overlay {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: 0;
        opacity: 0;
        pointer-events: none;
        z-index: 998;
        transition: opacity 0.3s ease;
    }

    .mega-menu-overlay.active {
        height: calc(100vh - 70px);
        opacity: 1;
        pointer-events: auto;
    }

    /* ================= Mega Menu ================= */
    .mega-menu {
        position: fixed;
        top: 71px;
        left: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        background-color: #ffffff;
        z-index: 999;
        transition: max-height 0.6s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    .mega-menu.active {
        max-height: 480px;
        height: 480px;
        opacity: 1;
        visibility: visible;
    }

    /* ================= Split Containers ================= */
    .split-container-service,
    .split-container-expertise,
    .split-container-resources,
    .split-container-company {
        display: flex;
        height: 100%;
    }

    .split-container-service {
        gap: 106px;
    }

    .split-container-expertise {
        gap: 167px;
    }

    .split-container-resources {
        gap: 185px;
    }

    .split-container-company {
        gap: 89px;
    }

    /* ================= Main Grids ================= */
    .service-main-grid,
    .expertise-main-grid,
    .resources-main-grid {
        display: grid;
        padding: 39px 0 48px max(48px, calc((100% - 1568px) / 2));
        background: #ffffff;
    }

    .service-main-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 30px;
    }

    .expertise-main-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 30px;
        flex-grow: 1;
    }

    .resources-main-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 60px;
    }

    .service-main-grid .mega-menu-column,
    .expertise-main-grid .mega-menu-column {
        width: 228px;
    }

    .resources-main-grid .mega-menu-column {
        width: 303px;
    }

    .company-gray-area {
        padding: 39px 91px 48px max(48px, calc((100% - 1568px) / 2));
        background: #F5F5F5;
    }

    .company-gray-area .mega-menu-column {
        width: 351px;
    }

    .partners {
        display: flex;
        gap: 10px;
        margin-top: 38px;
    }

    /* ================= Featured Sections ================= */
    .mega-menu-featured-services,
    .mega-menu-featured-expertise,
    .mega-menu-featured-resources,
    .company-white-area {
        padding: 40px max(48px, calc((100% - 1568px) / 2)) 40px 40px;
        flex-grow: 1;
    }

    .mega-menu-featured-services,
    .mega-menu-featured-resources {
        background: #F5F5F5;
    }

    .company-white-area {
        background: #ffffff;
    }

    /* ================= Links ================= */
    .menu-grid {
        max-width: 666px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 60px;
    }

    /* ================= Typography ================= */
    .mega-menu-title {
        margin-bottom: 12px;
        font-size: 16px;
        font-family: 'Inter Display', sans-serif;
        font-weight: 500;
        line-height: 26px;
        color: #000000;
    }

    .mega-menu-description {
        font-size: 15px;
        font-family: 'Inter Display', sans-serif;
        line-height: 22px;
        color: #666666;
    }

    .mega-menu-column>a:not(:first-child) .mega-menu-title,
    .mega-menu-column>.mega-menu-title:not(:first-child) {
        margin-top: 28px;
    }

    /* ================= Links List ================= */
    .mega-menu-links,
    .sub-menu-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .sub-menu-list {
        border-left: 1px solid #E4E4E4;
    }

    .mega-menu-links li a {
        display: block;
        font-size: 15px;
        font-family: 'Inter Display', sans-serif;
        line-height: 26px;
        font-weight: 400;
        color: #6D6D6D;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .mega-menu-links li a:hover {
        color: #FF4833;
    }

    .mega-menu-links li a.no-wrap {
        white-space: nowrap;
    }

    .mega-menu-indent a {
        padding-left: 18px;
        font-size: 13px;
        font-family: 'Inter Display', sans-serif;
        color: #666666;
    }

    /* ================= Products ================= */
    .mega-menu-products {
        display: flex;
        gap: 30px;
    }

    #menu-expertise .mega-menu-products {
        margin-top: 17px;
    }

    #expertiseMenu .title {
        margin-bottom: 17px;
    }

    .product-card {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .mega-menu-featured-resources .product-card {
        max-width: 242px;
    }

    .product-image {
        margin-bottom: 20px;
        overflow: hidden;
        border-radius: 4px;
    }

    .product-image img {
        width: 100%;
        display: block;
        height: 140px;
        object-fit: cover;
    }

    .product-title {
        margin-bottom: 6px;
        font-size: 16px;
        font-family: 'Inter Display', sans-serif;
        font-weight: 500;
        line-height: 26px;
        color: #000000;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* Number of lines to show */
        line-clamp: 1; /* Standard property */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .product-description {
        font-size: 15px;
        line-height: 20px;
        color: #6D6D6D;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Number of lines to show */
        line-clamp: 2; /* Standard property */
        -webkit-box-orient: vertical;
    }
}

@media (max-width: 1360px) {

    .split-container-service,
    .split-container-expertise,
    .split-container-resources,
    .resources-main-grid,
    .menu-grid {
        gap: 30px;
    }

    .service-main-grid .mega-menu-column,
    .expertise-main-grid .mega-menu-column,
    .resources-main-grid .mega-menu-column {
        width: auto;
    }

    .split-container-company {
        gap: 0;
    }

    #expertiseMenu .title {
        margin-bottom: 17px;
    }
}

/* ================= Disable Desktop Header on Mobile ================= */
@media (max-width: 1024px) {

    .mega-menu,
    .desktop-nav,
    .btn-contact,
    .mega-menu-overlay {
        display: none !important;
    }

    .header-container {
        padding: 0 48px;
        height: 56px;
    }
    .header-action-btns {
        display: none;
    }

}

@media (max-width: 678px) {
    .header-container {
        padding: 0 20px;
    }


}




/*For Black Navigation*/

.home-custom-class:not(.menu-open) .header {
    background-color: #000000;
    border-color: rgba(50, 50, 50, .5019607843);
}
.home-custom-class:not(.menu-open) .header.scrolled {
    background-color: rgb(255 255 255 / 80%);
    backdrop-filter: blur(25px);
}

.home-custom-class:not(.menu-open) .black-logo {
    display: none
}

.home-custom-class:not(.menu-open) .white-logo {
    display: inline-block
}

.home-custom-class:not(.menu-open) .desktop-nav .nav-list .nav-link {
    color: #fff
}
.home-custom-class:not(.menu-open) .desktop-nav .nav-list .nav-link.active {
    color: #FF4833;
}

.home-custom-class:not(.menu-open) .arrow-white {
    display: inline-block
}

.home-custom-class:not(.menu-open) .desktop-nav .nav-list .nav-link.active .arrow-white {
    display: none
}

.home-custom-class:not(.menu-open) .arrow-black {
    display: none
}

.home-custom-class:not(.menu-open) .hamburger-menu .black-hamburger {
    display: none
}

.home-custom-class:not(.menu-open) .hamburger-menu .white-hamburger {
    display: inline-block
}