.main-header{width: 100%; top: 0; left: 0; position: fixed; z-index: 800; transition: all 500ms ease-in-out; background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 10%, #63B5D8 95%);}
.fixed_header{background: #63B5D8;}
.logo { display: block; z-index: 1;}
.logo a{display: block; width: 100%; height: auto;}

/*-- media css starts here --*/
@media only screen and (min-width: 1024px){
    .header{padding: 16px 0 16px; align-items: center;}
    .logo{width: 148px; transition: width 500ms ease-in-out;}
    .fixed_header .logo{width: 118px;}
    .logo a*{transition: none; -webkit-transition: none; -moz-transition: none; } 
    .normal-logo{width: 100%; height: 100%; display: block;}
    .normal-logo img{max-width: 210px;}

    .header-right{flex: 0 0 auto; padding-left: 30px; margin-left: auto;}
    .menu-icon{display: none;}
    .main-nav{padding-top: 2px; flex-direction: column-reverse;}
    ul.top-menu { margin:0; padding:0; width:100%; text-align: right; }
    ul.top-menu li:before{display: none;}
    ul.top-menu li { list-style: none; padding:0 0 0 16px; margin:0; display:inline-block; font-size: 14px; line-height: 16px; letter-spacing: 0.04em; font-weight: 800; }
    ul.top-menu li a { display: block; color:#fff; text-transform: uppercase;}
    ul.top-menu li a:hover{color: rgb(255 255 255 / 75%);;}
    ul.top-menu li a i { color:#0061A0; margin: 0 6px 0 0; }
   
    .nav-div{top: 9px;}
    ul.main-menu{padding:0 50px 0 0; align-items: center; justify-content: flex-end;}
    ul.main-menu li:before{display: none;}
    ul.main-menu > li { margin: 0 0 0 33px; padding:0; display: inline-block;}
    ul.main-menu > li > a{padding: 17px 0 17px; font-size: 18px; line-height: 26px; font-weight: 800; letter-spacing: -0.36px;  display:block; color:#fff; position: relative; text-decoration: none;}
    ul.main-menu > li.current_page_ancestor > a, ul.main-menu > li.current-menu-item > a, ul.main-menu > li.current-menu-parent > a, ul.main-menu > li.current_page_item > a, ul.main-menu > li.menu-item-has-children:hover > a, ul.main-menu > li > a:hover{color: rgb(255 255 255 / 75%);}
    ul.main-menu > li.menu-btn a{background: #fff; color: #002942; padding: 6px 18px; letter-spacing: 0; border: 2px solid transparent; border-radius: 8px; font-size: 18px; line-height: 24px; font-weight: 800; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all .5s ease; }
    ul.main-menu > li.menu-btn a:hover{background: #002942; color: #fff;}
    ul.main-menu > li.menu-btn a::after{display: none;}
    ul.main-menu > li > a::after{width: 0%; height: 8px; max-width: 72px; left: 0; right: 0; margin: 0 auto; bottom: 0; content: ""; display: block; background-color: #fff; position: absolute; transition: all 0.4s ease-in-out;}
    ul.main-menu > li.current-menu-item > a:after, ul.main-menu > li.current-menu-parent > a:after, ul.main-menu > li.current_page_item > a:after{width: 100%; opacity: 0.75;}
    ul.main-menu > li.menu-item-has-children:hover > a::after, ul.main-menu > li > a:hover::after{width: 100%;}
    ul.main-menu > li > ul{margin: 0; padding: 0; height: 0; opacity: 0; visibility: hidden; overflow: hidden; min-width: 265px; left: 50%; transform: translateX(-50%); border-radius: 4px; position: absolute; background-color:  #115E67; display: block; transition: all .5s ease;}    
    ul.main-menu > li:hover > ul{height: auto; opacity: 1; visibility: visible; padding-top: 24px;}
    ul.main-menu > li > ul > li{margin: 0; padding: 0 24px 19px;}
    ul.main-menu > li > ul > li:last-child{margin-bottom: 0; padding-bottom: 24px;}
    ul.main-menu > li > ul > li > a{color: #fff; font-size: 16px; line-height: 24px; font-weight: 700; display: block; position: relative;} 
    ul.main-menu > li > ul > li.current-menu-parent > a, ul.main-menu > li > ul > li.current_page_item > a, ul.main-menu > li > ul > li > a.active, ul.main-menu > li > ul > li > a:hover{color: rgb(255 255 255 / 40%);}
    ul.main-menu > li > ul > li.menu-item-has-children > a::after{right: 0; top: 0; position: absolute; content: "\f055"; color: #fff; font-weight: 900; font-family: "Font Awesome 6 Pro"; transition: all .5s ease; opacity: 0.4;}
    ul.main-menu > li > ul > li.menu-item-has-children > a:hover:after, ul.main-menu > li > ul > li.menu-item-has-children > a.active::after{content: "\f056"; opacity: 0.4;}

    ul.main-menu > li > ul li > ul{margin: 16px 0 0; padding: 13px 15px 17px; width: calc(100% + 48px); left: -24px; /*height: 0; opacity: 0;*/ position: relative; background-color: rgba(21, 58, 68, 0.25); display: none;}    
    /*ul.main-menu > li > ul li:hover > ul{margin-top: 16px; padding: 13px 15px 17px; height: auto; opacity: 1;}*/
    ul.main-menu > li > ul li > ul > li{margin: 0 0 19px; padding: 0 24px;}
    ul.main-menu > li > ul li > ul > li:last-child{margin-bottom: 0;}
    ul.main-menu > li > ul li > ul > li > a{color: #fff; font-size: 15px; line-height: 24px; font-weight: 700; display: block; text-decoration: none;} 
    ul.main-menu > li > ul li > ul > li.menu-item-has-children > a, ul.main-menu > li > ul li > ul > li.current_page_item > a, ul.main-menu > li > ul li > ul > li > a:hover{color: rgb(255 255 255 / 40%);}

    /*-- nav products menu item --*/
    ul.main-menu > li.nav-products > ul{min-width: 968px; width: 100%; padding: 0; flex-wrap: wrap;}
    ul.main-menu > li.nav-products:hover > ul{display: flex; }

    ul.main-menu > li.nav-products > ul > li{flex: 1; flex-basis: 25%; max-width: 22.5%; padding: 0 25px; margin: 48px 0 48px;}
    ul.main-menu > li.nav-products > ul > li:nth-child(5){padding: 0; margin: 0;}
    ul.main-menu > li.nav-products > ul > li::before{width: 1px; height: 100%; left: -12px; opacity: 0.25; background-color: #002942; content: ""; display: block;} 
    ul.main-menu > li.nav-products > ul > li:first-child::before{display: none;}
    ul.main-menu > li.nav-products > ul > li:nth-child(5):before{display: none;}
    ul.main-menu > li.nav-products > ul > li > a{margin-bottom: 20px; font-size: 20px; line-height: 24px; font-weight: 700; color: #fff; display: block; text-decoration: none;}
    ul.main-menu > li.nav-products > ul > li > a::after{display: none;}
    ul.main-menu > li.nav-products > ul > li > a:hover{color: rgb(255 255 255 / 40%);}
    ul.main-menu > li.nav-products > ul > li > ul{padding: 0; margin: 0; display: block; opacity: 1; height: auto; background: none;}
    ul.main-menu > li > ul > li.hide_desktop{display: none;}

    .products-nav-desc{min-width: 316px; width: 100%; height: 100%; position: relative;}
    .product-nav-image{width: 100%; height: 100%; margin: 0;} 
    .product-nav-image img{border-radius: 0 4px 4px 0;}
    .product-nav-pos{padding: 31px; width: 100%; height: 100%; bottom: 0; left: 0; position: absolute; align-items: flex-end; color: #fff;}
    .product-nav-text span{margin-bottom: 8px; font-size: 24px; line-height: 28px; font-weight: 700; display: block;}
    .product-nav-text p{padding-bottom: 12px;}
    .product-nav-btn .btn{font-size: 14px; line-height: 20px; height: 32px; padding: 0 8px; color: #0061A0;}
    .product-nav-btn .btn:hover{color: #fff;}
    /*-- nav products menu item --*/

    .sticky_header ul.main-menu li.menu-btn a{background: #63B5D8; color: #002942;}
    .sticky_header ul.main-menu li.menu-btn a:hover{background: #002942; color: #fff;}

    .fixed_header ul.main-menu li.menu-btn a{background: #fff; color: #002942;}
    .fixed_header ul.main-menu li.menu-btn a:hover{background: #002942; color: #fff;}

    .top-menu-flex{gap: 16px; justify-content: flex-end; align-items: center;}
    .top-menu-lang{flex: 0 0 55px}
    .top-menu-lang .lang-label{padding: 0; position: relative;}
    .top-menu-lang .lang-label .btn:nth-child(3){margin-right: 0;}

    ul.main-menu > li.nav-items > ul{min-width: 568px; width: 100%; padding: 0; flex-wrap: wrap;}
    ul.main-menu > li.nav-items:hover > ul{display: flex; }
    ul.main-menu > li.nav-items > ul > li{flex: 1; flex-basis: 50%; max-width: 50%; padding: 0 25px; margin: 48px 0 48px;}
    ul.main-menu > li.nav-items > ul > li::before{width: 1px; height: 100%; left: -12px; opacity: 0.25; background-color: #002942; content: ""; display: block;} 
    ul.main-menu > li.nav-items > ul > li:first-child::before{display: none;}
    ul.main-menu > li.nav-items > ul > li > a{margin-bottom: 20px; font-size: 20px; line-height: 24px; font-weight: 700; color: #fff; display: block; text-decoration: none;}
    ul.main-menu > li.nav-items > ul > li > a::after{display: none;}
    ul.main-menu > li.nav-items > ul > li > a:hover{color: rgb(255 255 255 / 40%);}
    ul.main-menu > li.nav-items > ul > li > ul{padding: 0; margin: 0; display: block; opacity: 1; height: auto; background: none;}
   
    .lang-dropdown{width: 100%; display: block; cursor: pointer; position: relative; padding: 6px 10px 6px 9px;}
    .lang-dropdown::after{ right: 0; top: calc(50% - 1px); transform: translateY(-50%); font-size: 18px; color: #0061A0; border: none; font-family: "Font Awesome 6 Pro"; font-weight: normal; position: absolute; display: flex; align-items: center; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; content: "\f107"; }
    .lang-dropdown.open::after{content: "\f106";}
    .lang-dropdown img{width: 16px;}

    .lang-label ul{display: none; top: 100%; left: 9px; position: absolute; min-width: 45px; margin: 0;  padding: 4px; background: #f3f3f3; border-radius: 4px;}
    .lang-label ul::before { opacity: 1; width: 0; height: 0; top: -2px; left: 4px; border-radius: 0; border: 5px solid transparent; border-top: 5px solid #f3f3f3; border-left: 5px solid #f3f3f3; content: ""; display: block; transform: rotate(45deg); position: absolute; transition: all .5s ease; transition-delay: 0s; transition-delay: 0.5s; }
    .lang-label ul li::before{display: none;}
    .lang-label ul li{padding: 0; margin: 2px 0;}
    .lang-label ul li a{display: block; padding: 4px; border-radius: 2px;}
    .lang-label ul li a.current_language, .lang-label ul li a:hover{background: #0061A0;}
    .lang-label ul li a img{width: 16px; margin: 0 auto;}
}

@media only screen and (max-width: 1599px) and (min-width: 1300px){
    ul.main-menu > li.nav-products > ul{left: calc(50% - 68px);}
}
@media only screen and (max-width: 1299px) and (min-width: 1024px){
    .fixed_header .logo{width: 109px;}
    ul.main-menu{padding-right: 40px;}
    ul.main-menu > li{margin-left: 15px;}
    ul.main-menu > li > a{font-size: 15px;}
    ul.main-menu > li.menu-btn a{padding: 6px 14px; font-size: 16px;}
    ul.main-menu > li.nav-products > ul{left: calc(50% - 146px);}
}
@media only screen and (max-width: 1023px) and (min-width: 200px){
    .header{display: block; padding: 16px 0 10px; position: relative;} 
    .fixed_header .header{padding: 10px 0 10px;}
    .logo{width: 106px; transition: all .5s ease;}
    .fixed_header .logo{width: 80px;}
    .sticky_logo{display: none;}
    .sticky_header .menu-icon{background-image: radial-gradient(circle at 21% 11%, #63b5d8, #0061A0 83%);}
    .sticky_header .menu-icon span{border-color: #002942;}
    .menu-icon{width: 56px; height: 56px; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer; background-image: radial-gradient(circle at 21% 11%, rgba(21, 58, 68, 0.5), #002942 83%); border-radius: 300px; position: absolute; transition: all .5s ease; z-index: 1;}
    .menu-icon span{width: 9px; height: 9px; margin: 0 2px; border: solid 2px #fff; border-radius: 300px;}
    .menu-icon.active{background-image: radial-gradient(circle at 21% 11%, rgba(21, 58, 68, 0.5), #002942 83%);}
    .menu-icon.active span.ellipsis{display: none;}
    .menu-icon span.close{display: none;}
    .menu-icon.active span.close{color: #ffff; font-size: 34px; display: block; width: auto; height: auto; border: none;}
    .main-nav{right: -100%; top: 0; width: 100%; height: 100%; padding: 160px 32px 100px; display: block; position: fixed; background-color: #63b5d8; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: all 0.5s ease-in-out;}
    .main-nav.open{right: 0;}
    
    ul.main-menu { margin-top: 13px; padding:0;display: block;}
    ul.main-menu li:before{display: none;}
    ul.main-menu > li { margin: 0 0 32px; padding:0; display: block; }
    ul.main-menu > li.sib{display: none;}
    ul.main-menu > li > a{ display:block; color:#fff; font-size: 20px; line-height: 26px; letter-spacing: -0.4px; font-weight: 800;}
    ul.main-menu > li > a:hover{color: rgb(255 255 255 / 40%)}
    ul.main-menu > li > a.active{color: #fff; text-align: right;}
    ul.main-menu > li.menu-item-has-children > a::after{right: 0; top: 0; position: absolute; font-size: 24px; content: "\f061"; color: #fff; font-weight: 900; font-family: "Font Awesome 6 Pro"; opacity: 0.4;}
    ul.main-menu > li.menu-item-has-children > a.active:after{content: "\f060"; left: 0; right: auto;}
    ul.main-menu > li.menu-btn a{background: #fff; color: #002942; padding: 0 14px; height: 40px; border: 2px solid transparent; border-radius: 8px; font-size: 18px; line-height: 24px; font-weight: 800; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.5s ease-in-out; }
    ul.main-menu > li.menu-btn a:hover{background: #002942; color: #fff;}
    ul.main-menu > li > ul{margin: 16px 0 0; padding: 24px; width: calc(100% + 64px); left: -32px; position: relative; border-radius: 0; background-color:  #115E67; display: none;}    
    ul.main-menu > li > ul > li{margin: 0 0 19px; padding: 0;}
    ul.main-menu > li > ul > li:last-child{margin-bottom: 0;}
    ul.main-menu > li > ul > li > a{color: #fff; font-size: 16px; line-height: 24px; font-weight: 700; display: block;} 
    ul.main-menu > li > ul > li.current-menu-parent > a, ul.main-menu > li > ul > li.current_page_item > a, ul.main-menu > li > ul > li > a.active, ul.main-menu > li > ul > li > a:hover{color: rgb(255 255 255 / 40%);}
    ul.main-menu > li > ul > li.menu-item-has-children > a::after{right: 0; top: 0; position: absolute; content: "\f055"; color: #fff; font-weight: 900; font-family: "Font Awesome 6 Pro";}
    ul.main-menu > li > ul > li.menu-item-has-children > a:hover:after, ul.main-menu > li > ul > li.current-menu-parent > a:after, ul.main-menu > li > ul > li.menu-item-has-children > a.active::after{content: "\f056"; opacity: 0.4;}

    ul.main-menu > li > ul li > ul{margin: 16px 0 0; padding: 13px 24px 17px; width: calc(100% + 48px); left: -24px; display: none; position: relative; background-color: rgba(21, 58, 68, 0.25); }    
    ul.main-menu > li > ul li > ul > li{margin: 0 0 19px; padding: 0;}
    ul.main-menu > li > ul li > ul > li:last-child{margin-bottom: 0;}
    ul.main-menu > li > ul li > ul > li > a{color: #fff; font-size: 16px; line-height: 24px; font-weight: 700; display: block;} 
    ul.main-menu > li > ul li > ul > li.current_page_item > a, ul.main-menu > li > ul li > ul > li > a:hover{color: rgb(255 255 255 / 40%);}

    /*-- nav products menu item --*/
    .products-nav-desc{display: none;}
    /*-- nav products menu item --*/

    ul.top-menu{margin: 0; padding: 0; gap: 16px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center;}
    ul.top-menu li{padding: 0;}
    ul.top-menu li::before{display: none;}
    ul.top-menu li a{padding: 16px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 92px; min-height: 86px; border-radius: 8px; border: solid 2px #fff; font-size: 14px; line-height: 16px; letter-spacing: 0.56px; color: #fff; font-weight: 700; }
    ul.top-menu li a i{display: block; color: #002942; margin: 0 0 6px; transition: all .5s ease;}
    ul.top-menu li a:hover{background-color: #002942; border-color: #002942; color: #fff;}
    ul.top-menu li a:hover i{color: #fff;}

    .top-menu-flex{gap: 16px; align-items: center;}
    .top-menu-lang .lang-label{padding: 0;}
    .top-menu-lang .lang-label .btn:nth-child(3){margin-right: 0;}
    .lang-dropdown{display: none;}

    .lang-label ul{margin: 0; padding: 0; gap: 12px; display: flex !important; align-items: center; justify-content: center;}
    .lang-label ul li::before{display: none;}
    .lang-label ul li{padding: 0; margin: 0;}
    .lang-label ul li a { display: block; padding: 8px; border: solid 2px #fff; border-radius: 4px; }
    .lang-label ul li a:hover{background-color: #fff;}
    .lang-label ul li a img{width: 16px; margin: auto;}

}
@media only screen and (max-width: 767px) and (min-width: 200px){
    ul.top-menu{justify-content: space-between;}
    .top-menu-flex{display: block;}
    .top-menu-lang .lang-label {padding: 0; top: 0; position: static; margin-top: 16px; justify-content: center;} 
}
@media only screen and (max-width: 374px) and (min-width: 200px){
    ul.top-menu{gap: 10px;}
    ul.top-menu li a{width: 78px; font-size: 12px;}
}