/*==================================================
                HEADER
==================================================*/

.main-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    padding:18px 0;

    transition:.4s ease;

    background:rgba(255,255,255,.90);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(15,23,42,.05);

}

.main-header.scrolled{

    padding:12px 0;

    background:#ffffff;

    box-shadow:
    0 10px 35px rgba(15,23,42,.08);

}

/*==================================================
                NAVBAR
==================================================*/

.navbar{

    padding:0;

}

.navbar-brand{

    padding:0;

    margin-right:60px;

}

.navbar-brand img{

    height:58px;

    width:auto;

    transition:.35s;

}

.main-header.scrolled .navbar-brand img{

    height:50px;

}

/*==================================================
                MENU
==================================================*/

.navbar-nav{

    align-items:center;

    gap:0;

}

.navbar-nav .nav-item{

    position:relative;

}

.navbar-nav .nav-link{

    position:relative;

    color:#0F172A;

    font-size:15px;

    font-weight:600;

    padding:14px 18px !important;

    border-radius:12px;

    transition:.35s;

    display:flex;

    align-items:center;

    gap:0px;

}

.navbar-nav .nav-link:hover{

    color:#2563EB;

    background:rgba(37,99,235,.06);

}

/* Animated Underline */

.navbar-nav .nav-link::after{

    content: "";
    position: relative;
    top: 0px;
    left: 5px;
    width: 0;
    height: 2px;

    background:

    linear-gradient(
        90deg,
        #2563EB,
        #06B6D4
    );

    border-radius:30px;

    transition:.35s;

}

.navbar-nav .nav-link:hover::after{

    width:calc(100% - 36px);

}

/* Active */

.navbar-nav .nav-link.active{

    color:#2563EB;

}

.navbar-nav .nav-link.active::after{

    width:calc(100% - 36px);

}

/*====================================
        NAV ARROW
====================================*/

.nav-link{

    display:flex;

    align-items:center;

    gap:8px;

}

.nav-link span{

    flex:1;

}

.nav-arrow{

    font-size:12px;

    color:#64748B;

    transition:.35s;
    margin-left: 5px;

}

.nav-item:hover>.nav-link .nav-arrow{

    transform:rotate(180deg);

    color:#2563EB;

}

.nav-item.show>.nav-link .nav-arrow{

    transform:rotate(180deg);

    color:#2563EB;

}

/*==================================================
             HEADER ACTIONS
==================================================*/

.header-actions{

    display:flex;

    align-items:center;

    gap:14px;

    margin-left:40px;

}

/*==================================================
              CALL BUTTON
==================================================*/

.header-call-btn{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    color:#0F172A;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.08);

    transition:.35s;

}

.header-call-btn i{

    width:38px;

    height:38px;

    border-radius:50%;

    background:#EFF6FF;

    color:#2563EB;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.header-call-btn:hover{

    color:#2563EB;

    transform:translateY(-3px);

    box-shadow:

    0 15px 35px rgba(37,99,235,.12);

}

.header-call-btn:hover i{

    background:#2563EB;

    color:#ffffff;

}

/*==================================================
            GET PROPOSAL BUTTON
==================================================*/

.header-quote-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 30px;

    border-radius:50px;

    background:

    linear-gradient(
        135deg,
        #2563EB,
        #1D4ED8
    );

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    transition:.35s;

    box-shadow:

    0 15px 35px rgba(37,99,235,.18);

}

.header-quote-btn:hover{

    color:#ffffff;

    transform:translateY(-3px);

    box-shadow:

    0 18px 45px rgba(37,99,235,.28);

}

/*==================================================
            MOBILE TOGGLE
==================================================*/

.navbar-toggler{

    width:52px;

    height:52px;

    border:none;

    border-radius:14px;

    background:#F8FAFC;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.navbar-toggler:focus{

    box-shadow:none;

}

.navbar-toggler:hover{

    background:#2563EB;

    color:#ffffff;

}

.navbar-toggler i{

    font-size:22px;

}

/*==================================================
           DESKTOP SPACING
==================================================*/

@media(min-width:1200px){

    .navbar-expand-xl .navbar-collapse{

        display:flex !important;

        justify-content:space-between;

        align-items:center;

    }

}
/*==================================================
                MEGA MENU
==================================================*/

.mega-dropdown{

    position:static;

}

.mega-menu{

    width:max-content;

    max-width:95vw;

    left:0% !important;

    transform:translateX(-15%);

    top:100%;

    padding:40px;

    border:none;

    border-radius:28px;

    background:#ffffff;

    box-shadow:
    0 35px 90px rgba(15,23,42,.12);

    opacity:0;

    visibility:hidden;

    display:block;

    transition:.35s;

    margin-top:20px;

}

/* Hover */

@media(min-width:1200px){

.mega-dropdown:hover>.mega-menu{

    opacity:1;

    visibility:visible;

    margin-top:0;

}

}

/*==================================================
            COLUMNS
==================================================*/

.mega-menu .row{

    row-gap:30px;

}

.mega-menu .col-lg-3{

    padding:0 20px;

    border-right:1px solid #EEF2F7;

}

.mega-menu .col-lg-3:last-child{

    border:none;

}

/*==================================================
            CATEGORY TITLE
==================================================*/

.mega-title{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:19px;

    font-weight:700;

    color:#0F172A;

    margin-bottom:25px;

}

.mega-title i{

    width:46px;

    height:46px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(
        135deg,
        rgba(37,99,235,.08),
        rgba(6,182,212,.08)
    );

    color:#2563EB;

    font-size:18px;

}

/*==================================================
                LINKS
==================================================*/

.mega-menu ul{

    list-style:none;

    padding:0;

    margin:0;

}

.mega-menu ul li{

    margin-bottom:0px;

}

.mega-menu ul li:last-child{

    margin-bottom:0;

}

.mega-menu ul li a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:8px 16px;

    border-radius:12px;

    color:#475569;

    font-size:15px;

    font-weight:500;

    transition:.30s;

}



.mega-menu ul li a:hover{

    color:#2563EB;

    background:#F8FAFC;

    padding-left:22px;

}


/*==================================================
                HOVER
==================================================*/

.mega-menu{

    overflow:hidden;

}
.mega-menu-main{

      height: 600px !important;
        overflow-y: scroll !important;
}

.mega-menu::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(
        90deg,
        #2563EB,
        #06B6D4,
        #FF7A1A
    );

}

.mega-menu .col-lg-3{

    transition:.35s;

}

.mega-menu .col-lg-3:hover{

    transform:translateY(-3px);

}

/*==================================================
            RESPONSIVE NAVBAR
==================================================*/

@media (max-width:1199.98px){

    .main-header{

        padding:12px 0;

        backdrop-filter:none;

        background:#ffffff;

    }

    .navbar{

        position:relative;

    }

    .navbar-brand img{

        height:52px;

    }

    .navbar-toggler{

        width:48px;

        height:48px;

    }

    .navbar-collapse{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        margin-top:18px;

        background:#ffffff;

        border-radius:22px;

        padding:25px;

        box-shadow:
        0 25px 70px rgba(15,23,42,.12);

        max-height:85vh;

        overflow-y:auto;

    }

    .navbar-nav{

        gap:0;

        width:100%;

    }

    .navbar-nav .nav-item{

        width:100%;

        border-bottom:1px solid #EEF2F7;

    }

    .navbar-nav .nav-item:last-child{

        border-bottom:none;

    }

    .navbar-nav .nav-link{

        width:100%;

        padding:16px 10px !important;

        border-radius:12px;

        justify-content:space-between;

        font-size:16px;

    }

    .navbar-nav .nav-link::after{

        display:none;

    }

    .dropdown-toggle::after{

        margin-left:auto;

    }

}/*==================================================
          MOBILE DROPDOWNS
==================================================*/

@media (max-width:1199.98px){

    .dropdown-menu{

        position:static !important;

        transform:none !important;

        width:100% !important;

        border:none;

        box-shadow:none;

        background:#F8FAFC;

        margin:0;

        padding:10px 0 15px;

        border-radius:16px;

        display:none;

    }

    .dropdown-menu.show{

        display:block;

    }

    .mega-menu{

        max-width:100%;

        padding:0;

        opacity:1;

        visibility:visible;

        margin-top:0;

     

    }

    .mega-menu .row{

        row-gap:20px;

    }

    .mega-menu .col-lg-3{

        border:none;

        padding:15px 15px 0;

    }

    .mega-title{

        font-size:17px;

        margin-bottom:15px;

    }

}/*==================================================
              MOBILE LINKS
==================================================*/

@media (max-width:1199.98px){

    .mega-menu ul li{

        margin-bottom:6px;
        padding-left: 10px;

    }
    .mega-title{
  padding-left: 20px;

    }

    .mega-menu ul li a{

        padding:12px 14px;

        border-radius:10px;

        font-size:14px;

    }

    .mega-menu ul li a:hover{

        padding-left:18px;

    }

}/*==================================================
            MOBILE CTA CARD
==================================================*/

@media (max-width:1199.98px){

    .mega-cta{

        margin-top:20px;

        padding:30px;

    }

    .mega-cta img{

        width:140px;

    }

    .mega-cta h4{

        font-size:24px;

    }

    .mega-btn{

        width:100%;

    }

}/*==================================================
            MOBILE BUTTONS
==================================================*/

@media (max-width:1199.98px){

    .header-actions{

        margin:25px 0 0;

        width:100%;

        display:flex;

        flex-direction:column;

        gap:15px;

    }

    .header-call-btn,

    .header-quote-btn{

        width:100%;

        justify-content:center;

    }

}/*==================================================
            SMALL DEVICES
==================================================*/

@media (max-width:575px){

    .navbar-brand img{

        height:46px;

    }

    .navbar-collapse{

        padding:20px;

        border-radius:18px;

    }

    .navbar-nav .nav-link{

        font-size:15px;

        padding:15px 8px !important;

    }

    .mega-title{

        font-size:16px;

    }

    .mega-title i{

        width:38px;

        height:38px;

        font-size:15px;

    }

    .mega-cta{

        padding:25px;

    }

    .mega-cta h4{

        font-size:22px;

    }

}
@media(max-width:1199.98px){

    .nav-link{

        justify-content:space-between;

    }

    .nav-arrow{

        font-size:13px;

        margin-left:auto;

    }

}