.gv-sticky-menu {
    .elementor-container {
        padding-top: 15px;
        
        .elementor-column  {
            .elementor-widget-wrap {
                padding-top: 0px;
                padding-bottom: 0px;
            }
        }
    }
}

.header-mobile {
    background-color: transparent !important;
    position: fixed;
    transition: 0.5s;
    background-color: #1A1A1A !important;
    
    .header-mobile-content {
        .header-content-inner {
            .header-right {
                .canvas-mobile {
                    border: 1px solid #fff;
                    .canvas-menu {
                        .icon {
                            font-size: 30px;
                            color: white;
                            border: 1px solid white;
                            background-color: transparent;
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 992px) {
    
    .caret {
        display: inline-block;

        /* Mask setup */
        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
    
        -webkit-mask-position: center !important;
        mask-position: center !important;
    
        -webkit-mask-size: contain !important;
        mask-size: contain !important;
        
        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
    }
    
    ul.gva-nav-menu > li > a .caret {
        mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' %3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-11 0 1046 1024'%3E%3Cpath fill='currentColor'%0Ad='M1011 272q-14 -15 -34.5 -15.5t-34.5 13.5l-430 407l-430 -407q-14 -14 -34.5 -13.5t-34.5 15.5t-13 35t15 34l463 439q7 6 16 9.5t18 3.5t17.5 -3.5t16.5 -9.5l463 -439q14 -14 15 -34t-13 -35v0z' /%3E%3C/svg%3E%0A");
        
        
    
        /* Color of the icon */
        background-color: white;
        width: 14px;
        height: 14px;
        margin-left: 6px;
    }
    
    ul.gva-nav-menu > li:hover > a .caret {
        background-color: #F46F25;
    }
    
    ul.gva-nav-menu > li > a .menu-title:after {
        content: none;
    }
    


    ul.gva-nav-menu > li > .submenu-inner:after {
        content: unset;        
        
    }
    
    /* Outer megamenu wrapper */
    ul.gva-nav-menu > li.megamenu-main .megamenu-wrap-inner {
        
        display: flex !important;
        padding: 0 !important;
        min-height: 378px;
        width: 100vw !important;
            background: linear-gradient(270deg, #252525 0 80%, black 0 20%);
        margin: auto;
        /*left: 50% !important;*/
        padding-top: 50px !important;
        padding-bottom: 50px !important;
        padding-left: 80px !important;
        padding-right: 40px !important;
        max-width: unset !important;
        left: 0px !important;
        position: fixed !important;
        top: 72px;
        height: auto;
        max-height: calc( 100vh - 88px);
        overflow: auto;
    }
    
    ul.gva-nav-menu > li.megamenu-main:hover .megamenu-wrap-inner {
        -webkit-transform: rotateX(0) !important;
        transform: rotateX(0) !important;
        background-color: #252525 !important;
        padding: 0px !important;
    }


    ul.gva-nav-menu > li.megamenu-main .megamenu-wrap-inner ul.megamenu-sub > li > a {
        color: white !important;   
        border-bottom: 0px;
        gap: 20px;
        align-items: center;
        
        &:hover {
            color: #F36F27 !important;
            
        }
    }
    
    ul.gva-nav-menu > li .submenu-inner li a:before, ul.gva-nav-menu > li ul.submenu-inner li a:before {
        
        content: unset !important;
    }
    

    /* COLUMN 1 — Web Development, Services II, Service Details */
    
    ul.gva-nav-menu > li.megamenu-main .megamenu-wrap-inner ul.megamenu-sub > li > a .caret  {
        display: block;
    }
    
    
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 {
        display: flex !important;
        flex-direction: column !important;
        /*width: 32% !important;*/
        min-width: 180px;
        /*padding: 8px 0 !important;*/
        padding: 48px 0px 80px 50px !important;
        margin: 0 !important;
        position: relative !important;
        background-color: #000;
        height: 100%;
        min-height: 378px;
        
        width: 85% !important;
        margin: auto !important;
        background: linear-gradient(270deg, #252525 0 65%, black 0 35%);
        max-width: 1320px;

    }

    /* Level 1 items */
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li {
        width: 33% !important;
        padding: 0 !important;
        position: relative !important;
        
    }
    
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li:before {
        content: none;
    }

    /* Level 1 links */
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > a {
        display: flex !important;
        justify-content: start;
        padding: 0 20px 10px 0px !important;
        font-weight: 500;
        color: white !important;
        transition: all 0.2s ease;
        padding-right: 30px;

    }


    
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > a .menu-title {
        font-size: 21px;
    }
    
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > a .menu-description {
    }

    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > a .caret {

        mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' %3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 1034 1024'%3E%3Cpath fill='currentColor'%0Ad='M360 525l407 -430q14 -15 13.5 -35t-15.5 -34t-35 -13.5t-34 15.5l-439 463q-13 14 -13 33.5t13 33.5l439 464q7 7 16.5 11t18.5 4t18 -3.5t16 -10.5q15 -13 15.5 -33.5t-13.5 -34.5l-407 -430v0z' /%3E%3C/svg%3E%0A");
        
        width: 35px !important;
        height: 20px;
        padding-right: 74px;
        background-color: white;
        position: relative;
        top: 5px;
        transform: rotate(180deg);
    }

    /* Level 1 hover */
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li:hover > a {
        /*color: #0073aa;*/
        color: #F46F25;
    }
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li:hover > a .caret 
    {
        background-color: #F46F25;
    } 

    /* ── COLUMN 2 — hidden by default, show on level 1 hover ── */
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner {
        display: none !important;
        position: fixed !important;
        /*left: 100% !important;*/
        /*left: 33% !important;*/
        left: calc(((100vw - min(85vw, 1320px)) / 2) + (min(85vw, 1320px) * 0.36)) !important;
            
        top: 0 !important;
        /*width: 100% !important;*/
        width: 33% !important;
        min-height: 100%;
        padding: 8px 0 !important;
        flex-direction: column !important;
        box-shadow: none !important;
        z-index: 2;
        padding-top: 55px !important;
        
        /*background-color: #252525 !important;*/
        /*height: 100%;*/
        /*padding-left: 20px !important;*/
        
        margin-left: -20px;
        padding-left: 20px !important;
    }
    
    /*.gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li:hover > a {*/
        /*color: #0073aa;*/
    /*    color: #F46F25;*/
    /*}*/
    
    
    
    /* =========================================
       DEFAULT: show first submenu
    ========================================= */
    .gva-navigation-menu 
    .megamenu-sub.megamenu-columns-3 
    > li:first-child 
    > ul.submenu-inner {
        display: flex !important;
    }
    
    /* Hide all other submenus by default */
    .gva-navigation-menu 
    .megamenu-sub.megamenu-columns-3 
    > li:not(:first-child) 
    > ul.submenu-inner {
        display: none !important;
    }
    
    /* =========================================
       WHEN hovering ANY first-column item
       hide the default first submenu
    ========================================= */
    
    .gva-navigation-menu 
    .megamenu-sub.megamenu-columns-3:hover 
    > li:first-child:not(:hover) 
    > ul.submenu-inner {
        display: none !important;
    }
    
    /* =========================================
       SHOW hovered submenu
    ========================================= */
    
    .gva-navigation-menu 
    .megamenu-sub.megamenu-columns-3 
    > li:hover 
    > ul.submenu-inner {
        display: flex !important;
    }
    

    /* Show column 2 on level 1 hover */
    
    
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li:hover > ul.submenu-inner {
        display: flex !important;

    }

    /* Level 2 items */
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li {
        position: relative !important;
        width: 100%;
    }
    
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li:before {
        content: none;
    }

    /* Level 2 links */
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li > a {
        display: flex;
        justify-content: start;
        padding: 0 20px 10px 0px !important;
        transition: all 0.2s ease;
        gap: 20px;
        color: white;
        align-items: center;
    }

    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li > a .menu-title {
        font-weight: 600;
        font-size: 21px;
        color: white;
    }

    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li > a .caret {
        
        mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' %3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 1034 1024'%3E%3Cpath fill='currentColor'%0Ad='M360 525l407 -430q14 -15 13.5 -35t-15.5 -34t-35 -13.5t-34 15.5l-439 463q-13 14 -13 33.5t13 33.5l439 464q7 7 16.5 11t18.5 4t18 -3.5t16 -10.5q15 -13 15.5 -33.5t-13.5 -34.5l-407 -430v0z' /%3E%3C/svg%3E%0A");
        
        width: 35px !important;
        height: 20px;
        padding-right: 74px;
        background-color: white;
        position: relative;
        top: 10px;
        transform: rotate(180deg);
        
    }
    
    
    
    

    /* Level 2 hover */
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li:hover > a {
        /*background: #fafafa;*/
        /*color: #0073aa;*/
        /*border-right-color: #0073aa;*/
    }
    
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li:hover > a .menu-title {
        
        color: #F36F27 !important;
    }
    
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li:hover > a .menu-description {
        
        color: #F36F27 !important;
    }
    

    
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li:hover > a .caret {
        background-color: #F36F27 !important;
    }
        
        

    /* ── COLUMN 3 — hidden by default, show on level 2 hover ── */
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li > ul.submenu-inner {
        display: none !important;
        position: fixed !important;
        left: 100% !important;
        /*top: -27px !important;*/
        width: 100% !important;
        min-height: 100%;
        background: #fafafa;
        padding: 8px 0 !important;
        flex-direction: column !important;
        box-shadow: none !important;
        z-index: 3;
        padding-top: 55px !important;
        border-radius: 0px;        
        height: 100%;
        padding-left: 20px !important;
    }
    
    ul.gva-nav-menu > li.megamenu-main .megamenu-wrap-inner ul.megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner {
        
        background-color: #252525 !important;


    }
    
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li:before {
        content: none;
    }

    /* Show column 3 on level 2 hover */
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li:hover > ul.submenu-inner {
        display: flex !important;
    }

    /* Level 3 links */
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li > ul.submenu-inner > li > a {
        display: flex !important;
        align-items: center;
        padding: 10px 18px !important;
        font-size: 13px;
        color: #666666;
        border-right: 3px solid transparent;
        transition: all 0.15s ease;
        color: white;
        padding: 0 20px 10px 0px !important;
        gap: 20px;
        align-items: center;
    }

    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li > ul.submenu-inner > li > a .menu-title {
        font-weight: 600;
        font-size: 21px;
    }
    
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li > ul.submenu-inner > li > a .menu-description {
        font-size: 15px;

    }
    
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li > ul.submenu-inner > li:before {
        content: unset;
    }

    

    /* Level 3 hover */
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li > ul.submenu-inner > li > a:hover {
        /*background: #ffffff;*/
        /*color: #0073aa;*/
        /*border-right-color: #0073aa;*/
    }
    
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li > ul.submenu-inner > li > a:hover .menu-title {
        color: #F36F27 !important;
        font-size: 21px;

    }
    
    .gva-navigation-menu .megamenu-sub.megamenu-columns-3 > li > ul.submenu-inner > li > ul.submenu-inner > li > a:hover .menu-description {
        color: #F36F27 !important;
    }
    

}
/* end desktop only */