/* HEADER */
.header{
  position: fixed !important;
  width: 100%;
  height:66px;
  background: linear-gradient(180deg, #00CCFF, #2962FF, #2979FF);
  display:flex;
  text-shadow:1px 1px 0px #000;
  justify-content:space-between;
  align-items:center;
  padding:0 20px;
  color:#fff;
  position:relative;
  z-index:100;
  font-family: 'Roboto', sans-serif;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.3);
  
}

/* LOGO */
.header__logo {
  width: 74px;
  height:60px;
  padding-left: 25px;
  margin-left: 25px;
  margin-top: 3px;
  background-image: url("https://regmed.uz/images/logo_white.svg");
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transition: all  1.5s ease; -moz-transition: all  1.5s ease; -o-transition: all 1.5s ease;
}

.header__logo:hover {
  background-image: url("https://regmed.uz/images/logo.svg");
  transform: scale(1.1);
  transition-duration: 0.5s;
}

/* Логотип для мобильной версии */
.mobile-logo .header__logo {
  position: static;
  display: block;
  width: 74px;
  height: 60px;
  margin: 0 auto;
  padding: 0;

  background-image: url("https://regmed.uz/images/logo_white.svg");
  background-repeat: no-repeat;
  background-size: contain;

  transform: scale(0.8);
  transition-duration: 0.5s;
}

/* hover эффект для мобильного логотипа */
.mobile-logo .header__logo:hover {
  background-image: url("https://regmed.uz/images/logo.svg");
  transform: scale(0.85);
}

/* BURGER */
.burger{
  display:none;
  font-size:35px;
  margin-right: 50px;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
}

/* MENU */
.menu{
  display:flex;
  list-style:none;
  gap:25px;
  letter-spacing: 1px;
}

.menu a{
  color:#fff;
  text-decoration:none;
  padding:10px;
  display:block;
  transition:.2s;
}

.menu a, .submenu a{
  white-space: nowrap;
}


/* DROPDOWN */
.dropdown{
  position:relative;
}

/* стрелка */
.dropdown > a{
  position:relative;
  padding-right:18px;
  margin-bottom: -5px;
}

.dropdown > a::after{
  content:"⌵";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%) rotate(0deg);
  font-size:12px;
  font-weight: 700;
  color:white;
  transition:transform .3s ease;
}

/* submenu */
.submenu{
  position:absolute;
  top: calc(100% + 11px);
  left:0;
  padding: 0;
  margin: 0;
  list-style: none;
  background:linear-gradient(180deg, #00CCFF, #2962FF, #2979FF);
  min-width:220px;
  border-radius:8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity:0;
  transform:translateY(-10px) scale(.98);
  visibility:hidden;
  transition:all .75s ease;
  box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.submenu li{
  text-align: center;
  border-bottom:1px solid white;
}

.submenu li:last-child{
  border-bottom: none;
}

.submenu li a{
  display: block !important; /* Чтобы ссылка занимала всю ширину элемента */
  text-decoration: none;
  padding: 15px 15px;
  background-color: transparent;
  transition: color 0.9s ease, background-color 0.5s ease;

}

.submenu li a:hover {
  background-color: blue; /* Светлый фон при наведении */
  color: yellow;
}

.submenu a{
  color:white;
  padding:12px 15px;
}

.submenu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #2979FF;  /* Синий цвет */
  transition: background-color 0.3s ease;
}

/* desktop hover */
@media (min-width:951px){
	
.header__logo {order: -1;}
	
.mobile-logo {
  display: none; /* Скрываем на десктопе */
  }

.dropdown:hover .submenu{
  opacity:1;
  transform:translateY(0) scale(1);
  visibility:visible;
  }
	
.menu > li > a{
  position:relative;
}

.menu > li > a::before{
  content:"";
  position:absolute;
  left:0;
  bottom:6px;
  width:100%;
  height:1.5px;
  background-color: yellow;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .75s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu > li > a:hover::before{
  transform:scaleX(1);
}
	
.dropdown:hover > a::after{
  transform:translateY(-50%) rotate(180deg);
  font-weight: 700;
  }
	
.nav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  margin-left: 40px;
  }
	
.submenu {
  padding-left: 0; /* Убираем отступ слева */
  }

.submenu li a::after {
  height: 2px; /* Устанавливаем высоту линии */
  }

}

/* OVERLAY */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  opacity:0;
  visibility:hidden;
  transition:.3s;
  
}

@media (max-width: 1300px){.menu a{font-size: 14px;} .header__logo {transform: scale(0.9);} .header__logo:hover{transform: scale(0.95);}}

@media (max-width: 1100px){.menu a{font-size: 12px; font-weight: 700;}}

/* MOBILE */
@media (max-width:950px){
	
.header{height: 50px;}
	
.header__logo {transform: scale(0.7); }

.header__logo:hover{transform: scale(0.75);}

.burger{display:block;}
	
.mobile-logo{
  display:block;
  margin-top:auto;
  text-align:center;
  padding-top:15px;
}
	
.mobile-logo:hover ~ .menu li a {
  pointer-events: none;
  }
	
.nav, .submenu{
  box-sizing: border-box;
}

.nav{
  position:fixed;
  top:0;
  right:-320px;
  width:300px;
  height:100dvh;

  background: linear-gradient(180deg, #00CCFF, #2962FF, #2979FF);

  padding:20px;
  transition:.35s ease;
  z-index:100;

  display:flex;
  flex-direction:column;

  overflow:hidden;
  box-sizing:border-box;
}

.nav.open{
  right:0;
}

.overlay.active{
  opacity:1;
  visibility:visible;
  z-index:50;
}
	
.menu{
  display:block;

  flex:1;

  overflow-y:auto;
  overflow-x:hidden;

  margin-left:-43px;

  padding-bottom:90px;

  -webkit-overflow-scrolling:touch;
}

	
.menu li {
  position:relative;
  display:block !important;
  border-bottom:1px solid rgba(255,255,255,0.3);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.2);
  transition:background 0.25s ease;
  padding:0;
  margin:0;
  box-sizing: border-box;
}
	
.menu li:last-child {
  border-bottom:none;
  box-shadow:none;
}
	
.menu li a{
  display: flex;
  align-items:center;
  width:100%;
  height: 100%; 
  line-height: 1.5;
  padding:12px 15px;
  border-radius:6px;
  transition:background .25s ease;
  box-sizing: border-box;
}

.menu li a:hover,.menu li a:active:not(.mobile-logo){
  background-color: blue;
  outline:2px solid #2979FF;
}

  /* submenu mobile */
 .submenu{
 position:static;
 width: 100%;
 margin: 0; /* убираем смещения */
 padding-left: 0; /* если есть */
 padding-right: 0;
 background: linear-gradient(180deg, #00CCFF, #2962FF, #2979FF);
 border-radius:6px;
 margin-top:5px;
 display:block;
 max-height:0;
 overflow:hidden;
 opacity:1;
 transform:none;
 visibility:visible;
 transition:max-height .9s ease;
}

.submenu a{color:#fff;}
	
.submenu a:hover:not(.mobile-logo){
 background-color: blue;
 color:#fff;
}

  /* открытие */
.dropdown.open .submenu{
 max-height:300px;
}

  /* стрелка анимация */
.dropdown.open > a::after{
 transform:translateY(-50%) rotate(180deg);
 font-weight: 700;
    }

}