/* ========================================== header ================================================ */
html:has(.mobile-menu-open),.mobile-menu-open{overflow: hidden;}
header{padding:24px 0 0;position: fixed;width:100%;z-index:999;top: 0;}
header .container .main-navigation{position: relative; padding-inline:8px;border-radius:16px;display:flex;align-items:center;justify-content:space-between; background: rgba(153, 160, 174, 0.1);border: 1px solid rgba(153, 160, 174, 0.1);border: 1px solid rgba(153, 160, 174, 0.1);}
header .container .main-navigation:after{border-radius:16px;position: absolute;content:"";top:0;left:0;height:100%;width:100%;backdrop-filter: var(--blur-56);-webkit-backdrop-filter: var(--blur-56);z-index:-1;}

/* logo */
header .logo{width:102px;height:auto;}

/* nav */
nav > ul{display: flex;align-items: center;gap:40px;}
nav > ul li{position:relative;}
nav > ul li a{padding-block: 16px; font-size:14px;line-height:24px;font-family: var(--space-grotesk);font-weight:500;color:var(--white);display:flex;align-items:center;gap:4px;transition: 0.3s ease-in-out;}
nav > ul li a:hover{color:var(--blue);}
nav > ul li a:hover img{filter: brightness(0) saturate(100%) invert(71%) sepia(46%) saturate(6170%) hue-rotate(173deg) brightness(98%) contrast(90%);}
nav > ul li a.active{color:var(--blue);}
nav > ul li a.active img{filter: brightness(0) saturate(100%) invert(71%) sepia(46%) saturate(6170%) hue-rotate(173deg) brightness(98%) contrast(90%);}
.submenu-arrow-icon{height: 18px;width: 18px;display:inline-block;position: relative;}
.submenu-arrow-icon img{height: 100%;position: absolute;left: 0;top: 0;}

/* submenu */
.submenu{opacity: 0;visibility: hidden;display:flex;gap:32px; padding:20px;border-radius:20px;position: absolute;top:100%;left: 50%; transform: translateX(-40%);-webkit-transform: translateX(-40%);-moz-transform: translateX(-50%);background-color:var(--blue-opacity-60);z-index:10;box-shadow:var(--left-top-shadow);transition: 0.3s ease-in-out;backdrop-filter: var(--blur-20);-webkit-backdrop-filter: var(--blur-20);}
/* .submenu:after{position: absolute;content:"";top:0;left:0;height:100%;width:100%;border-radius:20px;z-index:-1;} */
nav ul > li:hover .submenu{opacity: 1;visibility: visible;}
.submenu li:after{position:absolute;content:"";top:0;right:-16px;width:1px;height:100%;background: linear-gradient(0deg, rgba(39,166,239,0) 0%, #27A6EF 49.78%, rgba(39,166,239,0) 100%); opacity: 0.5; }
.submenu li:last-child:after{display:none;}


/* market */
.market-submenu{min-width:866px;}
.market-submenu li{width:100%;flex:1;position:relative;}
.market-submenu-card{display:flex;flex-direction:column;align-items: flex-start; gap:12px;min-height:260px;height:100%;min-height:auto;}
.market-submenu-card .market-submenu-card-image{width: 100%;position: relative;padding-top:49%;border-radius:20px;overflow:hidden;display:none;}
.market-submenu-card img{width: 100%;height: 100%;object-fit:cover;position: absolute;top:0;left:0;object-fit:cover;object-position:center center;}
.market-submenu-card .p-small{color:rgba(255, 255, 255, 0.75);}
.market-submenu-card .heading-style-8{padding: 0;}
.market-submenu-card a.theme-btn{margin-top: auto;}

/* common submenu */
.common-submenu{flex-direction:column;min-width: 313px;}
.common-submenu li a{padding: 6px 36px 6px 0;letter-spacing: 0.8px; background: url(../images/header-submenu-Icon.svg) no-repeat right center / 32px 32px;}
.common-submenu li:after{    background: linear-gradient(80deg, rgba(39, 166, 239, 0) 0%, #27A6EF 49.78%, rgba(39, 166, 239, 0) 100%); right: 0; bottom: -16px; top: auto; width: 100%; height: 1px;}

/* toggled */
header .menu-toggle{position: relative; width: 40px; height: 40px; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: none; justify-content: center; align-items: center; flex-direction: column; background: none; border: 0;}
header .menu-toggle span { height: 2px; margin: 3px 5px; width: 28px; display: block; background: #fff; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; transform-origin: right center; }
header .menu-toggle span:nth-child(2) { width: 22px; }

.main-navigation.toggled .menu-toggle span:nth-child(1) { width: 23px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
.main-navigation.toggled .menu-toggle span:nth-child(2) { opacity: 0; }
.main-navigation.toggled .menu-toggle span:nth-child(3) { width: 23px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

/* multi language */
.header-right .language-dropdown { padding: 0; background-color:var(--f0); position: relative; display: inline-block;min-width: auto;border:none;}
.header-right .language-dropdown.dropdown-menu .language-trigger {padding: 7px 14px 7px 0;font-size: 14px;font-weight: 500; line-height: 1;gap: 8px; position: relative; display: inline-flex;align-items:center;  border: none; background-color: var(--f0);  color: var(--white);}
.header-right .language-flag { width: 24px; height: 14px; display: inline-block; object-fit: cover;}

.header-right .language-list { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin: 6px 0 0; padding: 4px 0; list-style: none; min-width: 190px;border-radius: 20px; display: none; background-color: #05111780; z-index: 9999; box-shadow: var(--left-top-shadow);-webkit-box-shadow: var(--left-top-shadow);-moz-box-shadow: var(--left-top-shadow); transition: 0.3s ease-in-out; backdrop-filter: var(--blur-20); -webkit-backdrop-filter: var(--blur-20);}
.header-right .language-dropdown.open-submenu .language-list {display: block;}

/* Items */
.header-right .language-item { display: flex; align-items: center; gap: 8px; padding: 20px 16px; font-size: 14px;font-weight: 500;line-height: 24px; color: var(--white); text-decoration: none; white-space: nowrap;position: relative;transition: 0.3s ease-in-out;}
.header-right .language-item:after { bottom: 0px; background: linear-gradient(80deg, rgba(39, 166, 239, 0) 0%, #27A6EF 49.78%, rgba(39, 166, 239, 0) 100%); right: 0; top: auto; width: 100%; position: absolute; content: "";opacity: 0.5;   height: 1px; }
.header-right .language-list li:last-child .language-item:after {display: none;}
.header-right .language-item:hover { color: var(--blue); }
.header-right .language-dropdown.dropdown-menu .language-trigger::after{position: relative; top: -1px;padding: 3.2px; display: inline-block; --tw-rotate: 45deg; transform: translate(0, 0) rotate(var(--tw-rotate)) skewX(0) skewY(0) scaleX(1) scaleY(1); border-right-width: 2px; border-bottom-width: 2px; border-top-width: 0px; border-left-width: 0px; border-style: solid; border-color: var(--white); content:"";}
.header-btn{line-height: 0;}

/* ======================================= Media query ======================================== */

@media screen and (max-width:1366px){
    /* ============================== header ================================ */
	.market-submenu { min-width: 730px; }
    .common-submenu{min-width: 250px;}
}
@media screen and (max-width:1199px){
    /* ============================== header ================================ */
    header{padding:14px 0 0;}
    header .container .main-navigation{border-radius:14px;}
    header .container .main-navigation:after{border-radius:14px;}

    /* logo */
    header .logo{width:100px;}

    /* nav */
    nav > ul{gap:36px;}
    nav > ul li a{padding-block: 14px;}
    .submenu-arrow-icon{height: 16px;width: 16px;}

    /* submenu */
    .submenu{gap:24px; padding:16px;border-radius:18px;}
    .submenu li:after{right:-12px;}

    /* market */
    .market-submenu{min-width:670px;}
    .market-submenu-card{gap:10px;}
    .market-submenu-card .market-submenu-card-image{padding-top: 55%;border-radius:18px;}

    /* common submenu */
    .common-submenu{min-width: 250px;}
    .common-submenu li a{padding: 6px 36px 6px 0;background-size: 28px 28px;}
    .common-submenu li:after{bottom: -12px;}

}
/* @media screen and (max-width:991px){
    header{padding:12px 0 0;}
    header .container .main-navigation{border-radius:13px;}
    header .container .main-navigation:after{border-radius:13px;}

    header .logo{width:98px;}

    nav > ul{gap:30px;}
    nav > ul li a{padding-block: 12px;}
    .submenu-arrow-icon{height: 15px;width: 15px;}

    .submenu{gap:20px; padding:14px;border-radius:16px;}
    .submenu li:after{right:-10px;}

    .market-submenu{min-width:550px;}
    .market-submenu-card{gap:8px;}
    .market-submenu-card .market-submenu-card-image{border-radius:16px;}

    .common-submenu{min-width: 200px;}
    .common-submenu li a{padding: 6px 28px 6px 0;background-size: 24px 24px;}
    .common-submenu li:after{bottom: -10px;}
    
    .header-right .language-dropdown.dropdown-menu .language-trigger { padding: 7px 7px 7px 0;}
}  */

@media screen and (max-width:991px){
    /* ============================== header ================================ */
    header{padding:12px 12px 0;}
    header .container .main-navigation{border-radius:12px;padding: 7px;}
    header .container .main-navigation:after{border-radius:12px;}
    /* logo */
    header .logo{width:96px;}

    /* toggle */
    header .menu-toggle { display: flex;}
    header nav { position: fixed; z-index: -1; top: 0; right: 0; height: 100dvh; width: 100%; transform: translateX(100%); background-color: var(--body-bg); overflow: hidden; transition: all 0.2s ease-in-out; display: flex ; flex-direction: column; justify-content: start; }
    header nav > ul {margin: 100px 0 15px; padding-inline: 20px; gap: 26px; flex-direction: column; height: fit-content; align-items: center; max-height: 600px; overflow-y: auto; }
    header .toggled nav { transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0); }

    /* menu */
    nav > ul li{width: 100%; border-radius: 10px;}
    nav > ul li a { padding-block: 0; font-size: 22px; line-height: 26px;position: relative;justify-content: space-between; padding: 7px 10px;}

    /* submenu */
    .submenu li{border: none;}
    .submenu li:after{display:none;}
    header .submenu { opacity: 1; visibility: visible;display: none;flex-direction: column; gap: 14px;background: transparent; box-shadow: none; backdrop-filter: unset;position: relative; top: 0;left:0;transform:none;}
    header .submenu-on .submenu{display: flex;}
    .submenu-arrow-icon { height: 22px; width: 22px;transition: 0.5s;}
    header .submenu-on .submenu-arrow-icon{transform: rotate(180deg);-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);}


    /* market */
    .market-submenu .heading-style-8,.common-submenu li a {padding: 4px;font-size: 17px; line-height: 22px;width: 100%;}
    .market-submenu,.common-submenu { min-width: auto; }
    .market-submenu-card{min-height: auto;}
    .market-submenu-card-image,.market-submenu-card .p-small,.market-submenu-card a.theme-btn{display: none;}

    /* common submenu */
    .common-submenu li a {background-image: none;}


}
@media screen and (max-width:575px){
    /* ============================== header ================================ */
    nav > ul li a { font-size: 20px; line-height: 24px;}
    .submenu-arrow-icon { height: 20px; width: 20px;}
    header .submenu{gap: 10px;}
    .market-submenu .heading-style-8, .common-submenu li a { font-size: 16px; line-height: 20px;}
    
    /* header right */
    .header-right .language-dropdown.dropdown-menu .language-trigger {font-size: 12px; padding: 7px 5px 7px 0; gap: 5px; }    
    .header-right .language-flag { width: 16px; height: 10px;}
    .header-right .language-dropdown.dropdown-menu .language-trigger::after{padding: 2.2px;}
    
    /* header button */
    .header-right .theme-btn{padding: 5px 7px; font-size: 13px;}
    
    /* header toggle */
    header .menu-toggle{width:32px;}
}