.header{padding: 0 30px 0 40px;background: #fff;}
/* -------------------------- Navbar -------------------------- */
.header .navbar{gap: 15px;padding: 0;}
.header .navbar .navbar-nav{margin: auto;}
.header .navbar .navbar-nav .nav-item .nav-link{padding-inline: 14px;height: 103px;display: flex;align-items: center;font-size: 17px;font-weight: 600;color: #444;position: relative;z-index: 0;transition: 0.5s;}
.header .navbar .navbar-nav .nav-item .nav-link::before{content: '';position: absolute;bottom: 0;right: 0;width: 0;height: 4px;background: var(--theme-color);z-index: -1;transition: 0.5s;}
.header .navbar .navbar-nav .nav-item .nav-link:hover::before,
.header .navbar .navbar-nav .nav-item .nav-link.show::before{left: 0;right: auto;width: 100%;}
.header .navbar .navbar-nav .nav-item .nav-link:focus-visible{box-shadow: unset;}
/* -------------------------- Navbar Dropdown -------------------------- */
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-toggle::after{display: none;}
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-toggle span{margin-left: 10px;width: 10px;height: 10px;position: relative;}
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-toggle span::before,
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-toggle span::after{content: '';position: absolute;top: 50%;left: 50%;width: 100%;height: 1px;background: #444;transform: translate(-50%, -50%);}
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-toggle span::after{transform: translate(-50%, -50%) rotate(90deg);transition: 0.5s;}
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-toggle.show span::after{transform: translate(-50%, -50%) rotate(0deg);}
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu{display: block;margin: 0 -15px 0 -15px;padding: 0 15px 15px 15px;width: 400px;background: transparent;border: 0;border-radius: 0;clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);transition: 0.5s;}
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu::before{content: '';position: absolute;top: 0;left: 15px;width: calc(100% - 30px);height: calc(100% - 15px);background: #fff;box-shadow: 0 5px 15px 0 rgb(0 0 0 / 20%);border-radius: 0 0 10px 10px;z-index: -1;}
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu.show{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu li{position: relative;}
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu li::before{content: '';position: absolute;bottom: 0;left: 10px;width: calc(100% - 20px);height: 1px;background: linear-gradient(45deg, #0e4975 70%, transparent);opacity: 20%;}
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu li:last-child:before{display: none;}
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item{padding: 15px 10px 15px 20px;font-size: 15px;line-height: 1;transition: 0.5s;}
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:focus, 
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover,
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item.active, 
.header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:active{background: transparent;padding-inline: 25px 5px;color: var(--theme-color);}
/* -------------------------- Contact Area -------------------------- */
.header .contact-area{display: flex;align-items: center;gap: 15px;}
.header .contact-card{display: flex;align-items: center;gap: 10px;}
.header .contact-card .icon{display: block;width: 21px;}
.header .contact-card .icon img{filter: invert(18%) sepia(58%) saturate(1871%) hue-rotate(182deg) brightness(98%) contrast(90%);}
.header .contact-card p{font-size: 18px;font-weight: 600;color: #444;line-height: 1;transition: 0.5s;}
.header .contact-card.contact-call:hover .icon{animation: ringing 2s ease-in-out infinite;}
.header .contact-card.contact-call:hover p{color: var(--theme-color);}
.header .contact-card.contact-contact .theme-btn{padding: 13px 20px;background: var(--theme-color);box-shadow: inset 0 0 0 2px var(--theme-color);font-size: 17px;color: #fff;line-height: 1;}
.header .contact-card.contact-contact .theme-btn:hover{background: transparent;color: var(--theme-color);}
/* -------------------------- Navbar Toggler -------------------------- */
.header .navbar-toggler{padding: 10px;width: 58px;height: 40px;border: 1px solid var(--theme-color);border-radius: 8px;position: relative;}
.header .navbar-toggler span{height: 2px;width: 25px;background: var(--theme-color);border-radius: 50px;display: block;position: absolute;top: 19px;right: 10px;-webkit-animation: toggleshow 1s infinite ease-in-out alternate forwards 200ms;animation: toggleshow 1s infinite ease-in-out alternate forwards 200ms;}
.header .navbar-toggler span:first-child{width: 18px;top: 12px;-webkit-animation: toggleshow 1s infinite ease-in-out alternate;animation: toggleshow 1s infinite ease-in-out alternate;}
.header .navbar-toggler span:last-child{width: 35px;top: 25px;-webkit-animation: toggleshow 1s infinite ease-in-out alternate forwards 400ms;animation: toggleshow 1s infinite ease-in-out alternate forwards 400ms;}
@-webkit-keyframes toggleshow{0%{width: 35px;}50%{width: 15px;}100%{width: 35px;}}
@keyframes toggleshow{0%{width: 35px;}50%{width: 15px;}100%{width: 35px;}}
.header .navbar-toggler:focus:not(:focus-visible){box-shadow: unset;}
/* -------------------------- Mobile Menu Close -------------------------- */
.mobile-menu-close{width: 30px;height: 30px;border: 1px solid #fff;background: transparent;border-radius: 8px;position: absolute;top: 17px;right: 20px;}
.mobile-menu-close::before, .mobile-menu-close::after{content: '';position: absolute;top: 50%;left: 50%;width: 20px;height: 2px;background: #fff;border-radius: 50px;}
.mobile-menu-close::before{transform: translate(-50%, -50%) rotate(45deg);}
.mobile-menu-close::after{transform: translate(-50%, -50%) rotate(-45deg);}


@media only screen and (min-width: 576px) {
    .header .contact-card.contact-contact .theme-btn img{display: none;}
}
@media only screen and (min-width: 992px) {
    .mobile-menu-close{display: none;}
}
@media only screen and (max-width: 1399px) {
    .header{padding: 0 20px 0 25px;}
    .header .navbar .header-logo img{max-width: 230px;}
    .header .navbar .navbar-nav .nav-item .nav-link{padding-inline: 10px;height: 90px;font-size: 16px;}
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu{width: 370px;}
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item{padding: 12px 5px 12px 15px;font-size: 14px;}
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:focus, 
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover, 
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item.active, 
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:active{padding-inline: 20px 0px;}
    .header .contact-area{gap: 10px;}
    .header .contact-card{gap: 6px;}
    .header .contact-card .icon{width: 19px;}
    .header .contact-card p{font-size: 16px;}
    .header .contact-card.contact-contact .theme-btn{padding: 10px 15px;font-size: 15px;}
}
@media only screen and (max-width: 1199px) {
    .header .navbar .header-logo img{max-width: 200px;}
    .header .navbar .navbar-nav .nav-item .nav-link{padding-inline: 8px;height: 70px;font-size: 15px;}
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu{width: 330px;}
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item{padding-block: 10px;font-size: 13px;}
    .header .contact-card.contact-call{height: 35px;aspect-ratio: 1/1;box-shadow: inset 0 0 0 1px var(--theme-color);border-radius: 50%;justify-content: center;}
    .header .contact-card p{display: none;}
}
@media only screen and (max-width: 991px) {
    .header{padding-block: 15px;box-shadow: 0 0 20px 0 rgb(0 0 0 / 15%);position: sticky;top: 0;z-index: 2;}
    .header .navbar{position: unset;}
    .header .navbar .header-logo{z-index: 1;}
    .header .navbar .navbar-collapse{position: absolute;top: 0;right: 0;width: 320px;height: 100vh !important;background: var(--theme-color);z-index: 2;visibility: visible;clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);overflow-y: auto;transition: 0.5s;}
    .header .navbar .navbar-collapse.show{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
    .header .navbar .navbar-nav{padding: 50px 10px 10px;background: var(--theme-color);overflow-x: hidden;}
    .header .navbar .navbar-nav .nav-item{border-bottom: 1px solid rgb(255 255 255 / 10%);}
    .header .navbar .navbar-nav .nav-item:last-child{border-bottom-width: 0;}
    .header .navbar .navbar-nav .nav-item .nav-link{height: unset;font-size: 17px;color: #fff;justify-content: space-between;}
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-toggle span::before, 
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-toggle span::after{background: #fff;}
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu{margin-inline: 0;padding: 0;width: unset;max-height: 0;background: transparent; border: unset;overflow-y: auto;}
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu::before{display: none;}
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu.show{padding: 0 0 0 10px;max-height: 450px;}
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu li::before{left: 0px;width: 100%;background: linear-gradient(45deg, #ffffff 70%, transparent);}
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item{padding: 10px 5px;font-size: 15px;color: rgb(255 255 255 / 80%);}
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:focus, 
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover, 
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item.active, 
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:active{padding-inline: 10px 0;color: #fff;}
    .header .navi-backdrop{content: '';position: absolute;top: 0;right: 0;width: 0vw;height: 100vh;background: rgb(255 255 255 / 80%);backdrop-filter: blur(2px);transition: 0.5s;}
    .header.active-menu .navi-backdrop{width: 100vw;}
}
@media only screen and (max-width: 575px) {
    .header{padding-inline: 10px 8px;}
    .header .navbar .header-logo{max-width: 200px;overflow: hidden;transition: 0.5s;}
    .header.active-menu .navbar .header-logo{max-width: 47px;}

    .header .navbar .navbar-nav .nav-item .nav-link{font-size: 15px;}
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu.show{padding: 0;}
    .header .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item{padding-block: 8px;font-size: 13px;}

    .header .contact-area{gap: 8px;}
    .header .contact-card.contact-contact .theme-btn{padding: 7px 7px;font-size: 0;gap: 0;}
    .header .contact-card.contact-contact .theme-btn img{width: 22px;filter: brightness(0)invert(1);}

    .header .navbar-toggler{padding: 6px;width: 45px;height: 30px;}
    .header .navbar-toggler span{width: 30px;top: 13px;right: 6px;}
    .header .navbar-toggler span:first-child{width: 30px;top: 6px;}
    .header .navbar-toggler span:last-child{width: 30px;top: 20px;}
    @-webkit-keyframes toggleshow{0%{width: 32px;}50%{width: 15px;}100%{width: 32px;}}
            @keyframes toggleshow{0%{width: 32px;}50%{width: 15px;}100%{width: 32px;}}
}
@media only screen and (max-width: 399px) {
    .header{transition: 0.5s;}
    .header .navbar .navbar-collapse{width: 270px;}
    .header.active-menu{padding-left: 5px;}
    .header .navbar .header-logo img{max-width: 150px;}
    .header.active-menu .navbar .header-logo{max-width: 35px;}
    .header .contact-area{gap: 5px;}
    .header .contact-card.contact-call{height: 30px;}
    .header .contact-card .icon{width: 17px;}
    .header .contact-card.contact-contact .theme-btn{padding: 7px 7px;}
    .header .contact-card.contact-contact .theme-btn img{width: 18px;}
    .header .navbar-toggler{width: 35px;}
    @-webkit-keyframes toggleshow{0%{width: 22px;}50%{width: 10px;}100%{width: 22px;}}
            @keyframes toggleshow{0%{width: 22px;}50%{width: 10px;}100%{width: 22px;}}
}