/* ==========================================================
   GREEN AUTOMATION
   HEADER MODULE
   Version : 2.0
========================================================== */

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

.site-header{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    background:#ffffff;
    z-index:1000;
    border-bottom:1px solid #e9ecef;
    transition:all .35s ease;
}

.site-header.scrolled{
    box-shadow:0 8px 30px rgba(0,0,0,.08);
}

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

.header-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:85px;
    gap:40px;
}

/* ===========================
   LOGO
=========================== */

.logo{
    flex-shrink:0;
}

.logo a{
    display:flex;
    align-items:center;
    font-size:30px;
    font-weight:800;
    letter-spacing:.5px;
    color:#00A651;
    transition:.3s;
}

.logo a:hover{
    color:#008847;
}

/* ===========================
   NAVIGATION
=========================== */

.main-menu{
    margin-left:auto;
}

.main-menu ul{
    display:flex;
    align-items:center;
    gap:32px;
}

.main-menu li{
    position:relative;
    list-style:none;
}

.main-menu li>a{
    display:flex;
    align-items:center;
    gap:10px;
    height:85px;
    font-size:17px;
    font-weight:500;
    color:#222;
    transition:.3s;
}

.main-menu li>a:hover{
    color:#00A651;
}

/* underline animation */

.main-menu li>a::after{

    content:'';

    position:absolute;

    left:0;

    bottom:22px;

    width:0;

    height:2px;

    background:#00A651;

    transition:.3s;

}

.main-menu li:hover>a::after{

    width:100%;

}

/* ===========================
   RIGHT AREA
=========================== */

.header-right{
    display:flex;
    align-items:center;
    gap:18px;
}

/* ===========================
   MOBILE BUTTON
=========================== */

.menu-toggle{

    display:none;

    width:46px;

    height:46px;

    border:none;

    border-radius:10px;

    background:#00A651;

    color:#fff;

    font-size:24px;

    cursor:pointer;

    transition:.3s;

}

.menu-toggle:hover{

    background:#008847;

}
/* ==========================================================
   DROPDOWN MENU
========================================================== */

.has-dropdown{
    position:relative;
}

.dropdown-arrow{
    font-size:10px;
    transition:.35s ease;
}

.has-dropdown:hover .dropdown-arrow{
    transform:rotate(180deg);
}

.dropdown-menu{

   position:absolute;
    top:calc(91% + 0px);
    left:50%;
    transform:translateX(-50%) translateY(15px);
    width:235px;
    background:#ffffff;
    border-radius:12px;
    border:1px solid #c9c9c9;
    padding:10px 0;
    box-shadow:0 18px 40px rgba(0,0,0,.10);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:all .28s ease;
    display:flex;
    flex-direction:column;
    gap:0;
    z-index:999;
}

/* Show */

.has-dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateX(-50%) translateY(8px);

}

/* Items */


.dropdown-menu li{
   width:100%;
    border-bottom:1px solid #f1f1f1;

}

.dropdown-menu li:last-child{

    border-bottom:none;

}

.dropdown-menu li a{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    width:100%;

    padding:14px 40px;

    font-size:15px;

    font-weight:500;

    color:#444;

    transition:all .25s ease;
	height: 10px;

}

.dropdown-menu li a::after{

    display:none;

}

.dropdown-menu li a:hover{

   padding-left:24px;

    background:#daede9ad;

    color:#00763a;

}

/* Left Green Border */

.dropdown-menu li a:hover{

    border-left:4px solid #00A651;

}

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

.header-right .btn{

    padding:6px 26px;

    border-radius:8px;

    font-weight:600;

    transition:.3s;

}

.header-right .btn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(0,166,81,.20);

}

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

.site-header{

    animation:headerFade .5s ease;

}

@keyframes headerFade{

    from{

        opacity:0;

        transform:translateY(-15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media (max-width:992px){

    .header-wrapper{
        min-height:75px;
    }

    .menu-toggle{
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .header-right .btn{
        display:none;
    }

    .main-menu{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:#ffffff;

        padding:20px;

        border-top:1px solid #e9ecef;

        box-shadow:0 15px 30px rgba(0,0,0,.08);

        display:none;

    }

    .main-menu.active{

        display:block;

    }

    .main-menu ul{

        flex-direction:column;

        align-items:flex-start;

        gap:0;

    }

    .main-menu li{

        width:100%;

    }

    .main-menu li>a{

        width:100%;

        height:auto;

        padding:16px 0;

        justify-content:space-between;

    }

    .dropdown-menu{

        position:static;

        transform:none;

        width:100%;

        opacity:1;

        visibility:visible;

        display:none;

        box-shadow:none;

        border-radius:8px;

        margin-top:8px;

        padding:6px 0;

        background:#f8f8f8;

        pointer-events:auto;

    }

    .dropdown-menu.active{

        display:flex;

    }

    .has-dropdown:hover .dropdown-menu{

        transform:none;

    }

}

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

@media (max-width:576px){

    .logo a{

        font-size:24px;

    }

    .header-wrapper{

        min-height:70px;

    }

}