/* ===========================
   RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    overflow-x:hidden;
    font-family:Arial, Helvetica, sans-serif;
}
/* ===========================
   NAVBAR
=========================== */

.navbar{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 6%;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    position:sticky !important;
    top:0;
    z-index:9999;
}

.logo img{
    width:170px;
}

.navbar ul{
    display:flex;
    align-items:center;
    list-style:none;
    gap:25px;
}

.navbar ul li{
    position:relative;
}

.navbar ul li a{
    text-decoration:none;
    color:#222;
    font-size:15px;
    font-weight:600;
    transition:.3s;
}

.navbar ul li a:hover{
    color:#a2ebb1;
}

/* ===========================
   DROPDOWN
=========================== */

.dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    width:220px;
    background:#fff;
    list-style:none;
    display:none;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.dropdown:hover .dropdown-menu{
    display:block;
}

.dropdown-menu li{
    width:100%;
}

.dropdown-menu li a{
    display:block;
    padding:12px 18px;
    color:#333;
    transition:.3s;
}

.dropdown-menu li a:hover{
    background:#28a745;
    color:#fff;
}

/* ===========================
   CONTACT BUTTON
=========================== */

.contact-btn{
    background:#28a745;
    color:#fff;
    padding:10px 22px;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}
.contact-btn:hover{
    background:#1e7e34;
}
/* ===========================
   LOGIN ICON
=========================== */
.circle-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.circle-icon a{
    color:#fff;
    font-size:18px;
    text-decoration:none;
}
/* ===========================
   MOBILE MENU
=========================== */
/* Mobile Menu Fix */
.menu-dropdown{
    position:absolute;
    top:55px;
    right:0;
    width:270px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    display:none;
    flex-direction:column;
    overflow-y:auto;
    max-height:80vh;
    z-index:9999;
}
.menu-dropdown.show{
    display:flex;
}
.menu-dropdown a{
    display:block;
    width:100%;
    padding:14px 18px;
    color:#333;
    text-decoration:none;
    border-bottom:1px solid #eee;
}
.menu-dropdown a:hover{
    background:#d6e2d9;
    color:#fff;
}
/* IMPORTANT */
.menu-dropdown .dropdown-menu{
    display:none !important;
}
.menu-dropdown li{
    display:block;
}
.dropdown{
    position:relative;
}
.dropdown>.dropdown-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:220px;
    background:#fff;
    list-style:none;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}
.dropdown:hover>.dropdown-menu{
    display:block;
}
.menu-toggle{
    display:none;
}
/* ==========================================
   RESPONSIVE CSS
========================================== */

/* Laptop */
@media (max-width:1200px){
    .navbar{
        padding:15px 4%;
    }
    .navbar ul{
        gap:18px;
    }
    .navbar ul li a{
        font-size:14px;
    }
    .contact-btn{
        padding:9px 18px;
    }
}
/* Tablet */
@media (max-width:991px){
   .navbar{
        display:flex;
        justify-content:space-between;
        align-items:center;
        flex-direction:row;
        padding:12px 15px;
    }
     
    .logo{
        position: static !important;
        left: 0 !important;
        transform: none !important;
        margin: 0 !important;
    }


    .logo img{

       width:340px;
        height:auto;
    }
     .navbar > ul{
        display:none;
    }
    .circle-icon{
        display:none;
    }
      .menu-toggle{
        display:block;
        position:relative;
        font-size:32px;
        color:#28a745;
        cursor:pointer;
        margin-left:auto;
    }
    .menu-dropdown{
        position:absolute;
        top:60px;
        right:0;
        width:260px;
        background:#fff;
        border-radius:10px;
        box-shadow:0 10px 30px rgba(0,0,0,.15);
        display:none;
        max-height:80vh;
        overflow-y:auto;
        z-index:9999;
    }
    .menu-dropdown.show{
        display:block;
    }
    /* Hide Desktop Menu */

    .navbar ul{
        display:none;
    }
    /* Hide Login Icon */
    .circle-icon{
        display:none;
    }
    /* Show Menu Button */
    .menu-toggle{
        display:block;
    }
    .menu-dropdown{
        width:260px;
        right:0;
    }
}
/* Mobile */
@media (max-width:768px){
    .navbar{

        padding:12px 15px;
    }
    .logo img{

        width:120px;
    }
    .menu-toggle{

        font-size:28px;
    }
    .menu-dropdown{

        width:230px;

    }
    .menu-dropdown a{

        padding:13px 15px;

        font-size:14px;

    }
}
/* Small Mobile */
@media (max-width:480px){

    .navbar{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:10px 15px;
    }

    .logo{
        margin:0 !important;
        width:auto !important;
        flex:0 0 auto !important;
        text-align:left !important;
    }

    .logo img{
        width:100px;
        display:block;
    }

    .menu-toggle{
        display:block;
        margin-left:auto;
        font-size:26px;
    }

    .menu-dropdown{
        width:200px;
        top:48px;
    }

    .menu-dropdown a{
        font-size:13px;
        padding:12px;
    }
}
/* Extra Small */
@media (max-width:360px){
    .logo img{
        width:90px;
    }
    .menu-dropdown{
        width:180px;
    }
    .menu-dropdown a{
        font-size:12px;
        padding:10px;
    }
}