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

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

body{
font-family:Arial, sans-serif;
background:#f7f7f7;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}

.phone-popup::before{

content:"";

position:absolute;

top:-8px;
right:18px;

width:16px;
height:16px;

background:white;

transform:rotate(45deg);

box-shadow:-3px -3px 8px rgba(0,0,0,0.04);

}

/* ========================= */
/* КОНТЕЙНЕР */
/* ========================= */

.container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:15px;
}


/* ========================= */
/* HEADER */
/* ========================= */

/* ========================= */
/* HEADER FIXED (GLOBAL) */
/* ========================= */

.header{
position:fixed;
top:0;
left:0;
width:100%;

z-index:1000;

background:rgba(255,255,255,0.9);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);

box-shadow:0 2px 20px rgba(0,0,0,0.06);

transition:.3s ease;
}

/* внутренний контейнер */
.header-inner{
max-width:1200px;
margin:auto;

display:flex;
align-items:center;
justify-content:space-between;

padding:8px 20px;
min-height:70px;
}


/* ========================= */
/* ЛОГО */
/* ========================= */

.logo{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
}

.logo img{
height:42px;
}

.logo-text{
display:flex;
flex-direction:column;
line-height:1.1;
}

.logo-text span{
font-size:13px;
color:#666;
}

.logo-text strong{
font-size:15px;
color:#222;
}



/* ========================= */
/* МЕНЮ */
/* ========================= */


.menu a{
text-decoration:none;
color:#333;
font-weight:500;
}

.menu a:hover{
color:#00b3b3;
}



.menu a{
font-size:14px;
font-weight:500;
color:#333;
text-decoration:none;
}

/* ========================= */
/* ПРАВАЯ ЧАСТЬ HEADER */
/* ========================= */

.header-right{
display:flex;
align-items:center;
gap:20px;
}



/* ========================= */
/* КНОПКА */
/* ========================= */

.btn{
background:#00b3b3;
color:white;
padding:10px 18px;
border-radius:6px;
text-decoration:none;
font-weight:500;
}

.btn:hover{
background:#009999;
}



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

.phone-dropdown{
position:relative;
}

.phone-btn{
display:flex;
align-items:center;
gap:6px;
border:none;
background:none;
cursor:pointer;
font-size:15px;
font-weight:600;
}

.arrow{
font-size:10px;
opacity:0.6;
}



/* ========================= */
/* POPUP */
/* ========================= */

.phone-popup{

position:absolute;
right:0;
top:40px;

width:260px;

background:white;
border-radius:8px;

box-shadow:0 10px 25px rgba(0,0,0,0.15);

padding:15px;

opacity:0;
transform:translateY(10px);
pointer-events:none;

transition:0.25s;
background:rgba(255,255,255,0.95);

backdrop-filter:blur(10px);

}

.phone-popup.active{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}



.contact-item{
font-size:14px;
margin-bottom:10px;
color:#333;
}

.contact-license{
font-size:12px;
color:#777;
border-top:1px solid #eee;
padding-top:10px;
margin-top:10px;
}



/* ========================= */
/* BURGER */
/* ========================= */

.burger{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
}

.burger span{
width:25px;
height:3px;
background:#222;
}




/* ========================= */
/* GLOBAL FONT OVERRIDE */
/* ========================= */

html,
body,
div,
span,
p,
a,
li,
ul,
td,
th,
input,
button,
textarea{
font-family:'Manrope', sans-serif !important;
}


/* ========================= */
/* HEADINGS */
/* ========================= */

h1,
h2,
h3,
h4,
h5,
h6{
font-family:'Montserrat', sans-serif !important;
font-weight:600;
}
/* ========================= */
/* HEADER RIGHT */
/* ========================= */

.header-right{
display:flex;
align-items:center;
gap:20px;
}


/* ========================= */
/* PHONE BUTTON */
/* ========================= */

.phone-dropdown{
position:relative;
}

.phone-btn{
display:flex;
align-items:center;
gap:8px;

background:none;
border:none;

font-size:15px;
font-weight:600;

cursor:pointer;
}

.phone-number{
color:#222;
}

.phone-arrow{
font-size:12px;
opacity:.6;
transition:.25s;
}


/* ========================= */
/* POPUP */
/* ========================= */

.phone-popup{

position:absolute;
right:0;
top:45px;

width:260px;

background:#fff;

border-radius:10px;

box-shadow:0 20px 40px rgba(0,0,0,.15);

padding:18px;

opacity:0;
pointer-events:none;
transform:translateY(10px);

transition:.25s;

}

.phone-popup.active{
opacity:1;
pointer-events:auto;
transform:translateY(0);
}


/* ========================= */
/* CONTACT ITEMS */
/* ========================= */

.contact-item{
display:flex;
align-items:flex-start;
gap:10px;

font-size:14px;

margin-bottom:12px;
}

.contact-item i{
color:#19b6b0;
width:16px;
}

.contact-item a{
color:#222;
text-decoration:none;
}

.contact-item a:hover{
color:#19b6b0;
}


/* ========================= */
/* LICENSE */
/* ========================= */

.contact-license{
font-size:12px;
color:#777;

border-top:1px solid #eee;

padding-top:10px;
margin-top:10px;
}
/* ========================= */
/* HEADER */
/* ========================= */

.header{
position:fixed;
top:0;
left:0;
width:100%;

z-index:1000;

background:#fff;

box-shadow:0 2px 10px rgba(0,0,0,0.05);
}
body{
padding-top:70px; /* высота header */
}

.header-inner{
max-width:1200px;
margin:auto;

display:flex;
align-items:center;
justify-content:space-between;

padding:5px 20px;
min-height:70px;
}


/* ========================= */
/* LOGO */
/* ========================= */

.logo{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
}

.logo img{
height:40px;
}

.logo-text{
display:flex;
flex-direction:column;
line-height:1.1;
}

.logo-text span{
font-size:13px;
color:#666;
}

.logo-text strong{
font-size:15px;
color:#222;
}


/* ========================= */
/* MENU */
/* ========================= */

.menu-list{
display:flex;
gap:28px;
list-style:none;
margin-bottom: -15px;
}

.menu a{
text-decoration:none;
color:#333;
font-weight:500;
font-size:15px;
}

.menu a:hover{
color:#19b6b0;
}


/* ========================= */
/* RIGHT */
/* ========================= */

.header-right{
display:flex;
align-items:center;
gap:18px;
}


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

.btn-sign{

background:#19b6b0;
color:white;

padding:10px 18px;

border-radius:6px;

text-decoration:none;
font-weight:600;

transition:.2s;

}

.btn-sign:hover{
background:#139a94;
}


/* ========================= */
/* PHONE */
/* ========================= */

.phone-dropdown{
position:relative;
}

.phone-btn{
display:flex;
align-items:center;
gap:6px;

background:none;
border:none;

cursor:pointer;
font-size:15px;
font-weight:600;

padding:6px 8px;
border-radius:8px;

transition:0.2s;
}

.phone-arrow{
font-size:12px;
opacity:.6;
}


/* ========================= */
/* POPUP */
/* ========================= */

.phone-popup{

position:absolute;
right:0;
top:40px;

width:260px;

background:#fff;

border-radius:10px;

box-shadow:
0 20px 50px rgba(0,0,0,0.18),
0 5px 15px rgba(0,0,0,0.08);

padding:18px;

opacity:0;
pointer-events:none;

transform:translateY(10px);

transition:.25s;

}

.phone-popup.active{
opacity:1;
pointer-events:auto;
transform:translateY(0);
}


/* ========================= */
/* CONTACTS */
/* ========================= */

.contact-item{
display:flex;
gap:10px;
font-size:14px;
margin-bottom:12px;

padding:6px 4px;
border-radius:6px;
transition:0.2s;
}
.contact-item:hover{
background:#f5f7f8;
}

.contact-item a{
color:#222;
text-decoration:none;
}

.contact-item a:hover{
color:#19b6b0;
}

.contact-license{
font-size:12px;
color:#777;
border-top:1px solid #eee;
padding-top:10px;
}


/* ========================= */
/* BURGER */
/* ========================= */

.burger{
display:none;
font-size:22px;
cursor:pointer;
}

/* BURGER */

.burger{
font-size:22px;
cursor:pointer;
z-index:2000;
}

.burger i{
transition:0.3s;
}

.burger.active i:before{
content:"\f00d";
}

.mobile-actions{

margin-top:40px;

display:flex;
flex-direction:column;
gap:14px;

width:220px;
display:none;
}

.mobile-actions a{

display:flex;
align-items:center;
justify-content:center;
gap:8px;

padding:12px;

border-radius:8px;

text-decoration:none;
font-weight:600;
}

.mobile-call{
background:#19b6b0;
color:white;
}

.mobile-mail{
background:#f2f2f2;
color:#333;
}

.mobile-sign{
background:#222;
color:white;
}


/* ========================= */
/* MOBILE MENU BLOCKS */
/* ========================= */

.menu-block{
width:100%;
background:#fff;
border-radius:16px;
padding:6px 16px;
box-shadow:0 8px 24px rgba(0,0,0,0.06);
}

/* главный пункт блока */

.menu-main{
display:flex;
align-items:center;
gap:12px;

font-size:15px;
font-weight:600;

padding:14px 0;
}
.mobile-sub-title.menu-main {
  border-bottom: 1px solid #eee;
}
.mobile-sub-title.menu-main.noborder{
  border-bottom: none;
}
.nopddbottom {
  margin-bottom: 0px;
}

/* иконки */

.menu-main i{
width:34px;
height:34px;

display:flex;
align-items:center;
justify-content:center;

background:#f3f5f6;
border-radius:10px;

color:#19b6b0;
font-size:16px;
}

.menu-main i{
width:34px;
height:34px;

display:flex;
align-items:center;
justify-content:center;

background:#f3f5f6;
border-radius:10px;

color:#19b6b0;
font-size:16px;
}

/* обычные ссылки */

.menu-block a{

display:block;

padding:12px 0;

font-size:16px;

font-weight:500;

color:#444;

text-decoration:none;

}

/* линия */

.menu-block a:not(:last-child){

border-bottom:1px solid #eee;

}

/* подменю */

.menu-block .mobile-sub ul{

padding-left:10px;

}



/* MOBILE SUBMENU */

.mobile-menu{
display:none;
flex-direction:column;
gap:20px;
list-style:none;
padding:0;
margin:0;
}

.mobile-sub ul{

max-height:0;
overflow:hidden;

display:flex;
flex-direction:column;

gap:14px;

margin-top:0;

padding-left:0;

transition:max-height .35s ease;

}

.mobile-sub.open ul{
max-height:1000px;
margin-top:10px;
}

.mobile-sub ul a{
font-size:16px;
font-weight:500;
}


.mobile-sub-title i{
margin-left:10px;
}

/* блок лицензии в dropdown */

.menu-license{

grid-column:1 / span 2;

margin-top:10px;

display:flex;
align-items:center;
gap:12px;

padding:12px 14px;

border-radius:12px;

background:rgba(25,182,176,0.08);

font-size:13px;

color:#444;

}

/* иконка */

.menu-license i{

font-size:18px;

color:#19b6b0;

}

/* текст */

.menu-license-text span{

font-size:12px;

color:#777;

}









/* ========================= */
/* MOBILE */
/* ========================= */
@media (max-width:900px){
.menu-list{
display:none;
}

.mobile-menu{
display:flex;
flex-direction:column;
gap:16px;
width:100%;
}



.mobile-menu a{
display:block;
padding:12px 0;
margin:0;

font-size:16px;
font-weight:500;
color: #095561;
text-decoration:none;

transition:.2s;
}

.mobile-menu a:hover{
color:#19b6b0;
}


/* подменю */

.mobile-sub-title{
display:flex;
align-items:center;
gap:12px;
cursor:pointer;
font-weight:600;
color: #095561;
}

.mobile-sub-title i{
margin-left:auto;
font-size:13px;
opacity:.5;
transition:transform .25s ease;
}
.mobile-sub.open .mobile-sub-title i{
transform:rotate(90deg);
}

/* поворот стрелки */

.mobile-sub.open .mobile-sub-title i{
transform:rotate(90deg);
}
.menu-main i{
background:#f3f5f6 !important;
color: #085754 !important;
}

/* список курсов */

.mobile-sub ul{
padding-left:0;
padding-bottom:0px;
margin-left:0;
list-style:none;
}

.mobile-sub ul a{

font-size:16px;
font-weight:500;

padding:10px 0 10px 8px;


color:#555;
}

.mobile-sub ul a:hover{
color:#19b6b0;
}

.menu.active{
opacity:1;
pointer-events:auto;
}

.header-right{
display:flex;
align-items:center;
gap:6px;
margin-left:auto;
}

.phone-number{
display:none;
}

.btn{
display:none;
}

.burger{
display:flex;
z-index:200;
}
.mobile-actions{
display:flex;
flex-direction:column;
gap:12px;
margin-top:10px;
}


.menu{

position:fixed;

top:70px;
left:0;

width:100vw;
max-width:100vw;

height:calc(100vh - 70px);
background: #ffffffc4;

opacity:0;
pointer-events:none;

transition:.3s;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
backdrop-filter:blur(8px);
}

.menu.active{
opacity:1;
pointer-events:auto;
}


/* контейнер меню */

.menu-inner{

display:flex;
flex-direction:column;

padding:20px 20px;
gap:30px;
padding-top:20px;
padding-bottom: 60px;
}


/* пункты меню */

.menu-list{
flex-direction:column;
gap:24px;
}

.menu a{
font-size:15px;
font-weight:600;
}


/* кнопки */

.mobile-actions{

display:flex;
flex-direction:column;

gap:12px;

margin-top:10px;

}

.mobile-actions a{

display:flex;
align-items:center;
justify-content:center;

gap:8px;

padding:14px;

border-radius:8px;

text-decoration:none;

font-weight:600;

}

.mobile-call{
background:#19b6b0;
color:white;
}

.mobile-mail{
background:#eee;
color:#333;
}

.mobile-sign{
background:#222;
color:white;
}
.burger{
display:block;
}

.phone-number{
display:none;
}

.btn-sign{
display:none;
}

.phone-btn,
.burger{

width:40px;
height:40px;

display:flex;
align-items:center;
justify-content:center;

}

}
/* ========================= */
/* DESKTOP IOS MENU */
/* ========================= */

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

@media (min-width:901px){

/* ===== РОДИТЕЛЬ ===== */
.has-submenu{
position:relative;
padding-bottom:18px;
}
.has-submenu::after{
content:"";
position:absolute;

top:100%;
left:0;
right:0;

height:20px; 

}

/* ===== DROPDOWN (GLASS) ===== */
.submenu{
position:absolute;
top:calc(100% + 10px);
left:226%;
transform:translate(-50%,10px);

display:flex;
gap:30px;

width:840px;

background: rgba(255, 255, 255, 0.9);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,0.6);

padding:25px;
border-radius:22px;

box-shadow:
0 40px 100px rgba(0,0,0,0.12),
0 10px 30px rgba(0,0,0,0.06);

z-index:999;

opacity:0;
pointer-events:none;

transition:.3s ease;
}

/* ПОКАЗ */
.has-submenu:hover .submenu{
opacity:1;
pointer-events:auto;
transform:translate(-50%,0);
}

/* ===== УБРАТЬ ВСЁ ЛИШНЕЕ ===== */
.submenu,
.submenu ul,
.submenu li{
list-style:none;
margin:0;
padding:0;
}

/* ===== ЛЕВАЯ КОЛОНКА ===== */
.submenu-left{
min-width:340px;
padding-right:18px;
border-right:1px solid rgba(0,0,0,0.06);
}

.submenu-left ul{
display:flex;
flex-direction:column;
gap:6px;
}

/* ===== ПУНКТЫ ===== */
.submenu-left li{
opacity:0;
transform:translateY(10px);
}

.has-submenu:hover .submenu-left li{
opacity:1;
transform:translateY(0);
}

/* stagger */
.submenu-left li:nth-child(1){ transition:.25s .05s; }
.submenu-left li:nth-child(2){ transition:.25s .1s; }
.submenu-left li:nth-child(3){ transition:.25s .15s; }
.submenu-left li:nth-child(4){ transition:.25s .2s; }
.submenu-left li:nth-child(5){ transition:.25s .25s; }
.submenu-left li:nth-child(6){ transition:.25s .3s; }
.submenu-left li:nth-child(7){ transition:.25s .35s; }
.submenu-left li:nth-child(8){ transition:.25s .4s; }
.submenu-left li:nth-child(9){ transition:.25s .45s; }
.submenu-left li:nth-child(10){ transition:.25s .5s; }
.submenu-left li:nth-child(11){ transition:.25s .55s; }
.submenu-left li:nth-child(12){ transition:.25s .6s; }

/* ссылки */
.submenu-left li a{
display:flex;
align-items:center;
gap:12px;

padding:11px 14px;

border-radius:12px;

font-size:14px;
color:#222;
text-decoration:none;

position:relative;
overflow:hidden;

transition:all .2s ease;
}

.submenu-left li a:hover{
background:#f5f7f8;
transform:translateX(4px);
}

.submenu-left li a:active{
transform:scale(0.97);
}

/* градиент hover */
.submenu-left li a::before{
content:"";
position:absolute;
inset:0;

background:linear-gradient(90deg, rgba(25,182,176,0.08), transparent);
opacity:0;

transition:.25s;
}

.submenu-left li a:hover::before{
opacity:1;
}

/* ===== ИКОНКИ ===== */
.submenu-left li i{
width:30px;
height:30px;

display:flex;
align-items:center;
justify-content:center;

border-radius:10px;

background:#f3f5f6;
color:#19b6b0;

font-size:13px;

flex-shrink:0;
}

/* ===== ПРАВАЯ ЧАСТЬ ===== */
.submenu-right{
width:100%;
display:flex;
flex-direction:column;
}

/* карточка */
.preview-card{
display:flex;
flex-direction:column;
height:100%;
padding: 20px 20px;
    padding-left: 0;
}

/* картинка */
.course-card img{
width:100%;
border-radius:14px;
transition:opacity .25s ease;
}

/* текст */
.preview-text{
font-size:14px;
color:#555;
line-height:1.4;
margin-bottom:10px;
padding-top: 20px;
}

/* ===== КНОПКИ ВНИЗУ ===== */
.preview-actions{
margin-top:auto;
display:flex;
flex-direction:column;
gap:10px;
}

/* кнопка основная */
.preview-btn{
display:block;
text-align:center;

background:#19b6b0;
color:#fff;

padding:12px;
border-radius:12px;

text-decoration:none;
font-weight:500;

transition:.2s;
}

.preview-btn:hover{
background:#139a94;
}

/* кнопка вторичная */
.preview-btn.secondary{
background:#f3f5f6;
color:#222;
}

.preview-btn.secondary:hover{
background:#e7ebed;
}



/* ===== СТРЕЛКА ===== */
.has-submenu > a::after{
content:"▼";
font-size:10px;
margin-left:6px;
opacity:0.6;
transition:.2s;
}

.has-submenu:hover > a::after{
transform:rotate(180deg);
}
/* активный пункт */
.submenu-left li.active a{
background:#eef6f7;
transform:translateX(4px);
box-shadow:0 6px 18px rgba(25,182,176,0.15);
}

/* иконка активного */
.submenu-left li.active i{
background:#19b6b0;
color:#fff;
}
.submenu-left li a::after{
content:"";
position:absolute;

left:0;
top:50%;
transform:translateY(-50%) scaleY(0);

width:3px;
height:60%;

background:#19b6b0;
border-radius:2px;

transition:.25s ease;
}

/* показываем индикатор у активного */
.submenu-left li.active a::after{
transform:translateY(-50%) scaleY(1);
}

/* иконка активного */
.submenu-left li.active i{
background:#19b6b0;
color:#fff;
}


.menu-overlay{
position:fixed;
top:70px;
left:0;
right:0;
bottom:0;

background:rgba(0,0,0,0.50);
backdrop-filter:blur(4px);

opacity:0;
pointer-events:none;

transition:.3s;
z-index:998;
}

body.menu-open .menu-overlay{
opacity:1;
pointer-events:auto;
}

/* контейнер */
.course-card{
position:relative;
overflow:hidden;
border-radius:14px;
}

/* обе картинки */
.course-card img{
position:absolute;
inset:0;

width:100%;
height:100%;
object-fit:cover;

opacity:0;
transition:opacity .4s ease, transform .4s ease;
}

/* активная */
.course-card img.active{
opacity:1;
z-index:2;
}

/* следующая */
.course-card img.img-next{
z-index:1;
}

/* лёгкий zoom эффект */
.course-card img{
transform:scale(1.02);
}

.course-card img.active{
transform:scale(1);
}
/* контейнер */
.course-info{
display:flex;
flex-direction:column;
gap:12px;
}

/* строка */
.info-row{
display:flex;
justify-content:space-between;
align-items:flex-start;

padding:10px 12px;

border-radius:10px;
background:rgba(0,0,0,0.03);

transition:.2s;
}

/* hover эффект */
.info-row:hover{
background:rgba(25,182,176,0.08);
}

/* заголовок */
.info-label{
font-size:11px;
text-transform:uppercase;
letter-spacing:.5px;

color:#888;
}

/* значение */
.info-value{
font-size:13px;
color:#222;

text-align:right;
max-width:300px;
}
}
@media (min-width:901px){

/* ограничиваем высоту всего мегаменю */
.submenu{
max-height:80vh;
overflow:hidden;
align-items:stretch;
}

/* левая колонка (список курсов) */
.submenu-left{
max-height:calc(80vh - 40px);
overflow-y:auto;
padding-right:10px;

/* красивый скролл */
scrollbar-width:thin;
scrollbar-color:rgba(25,182,176,.4) transparent;
}

/* webkit скролл */
.submenu-left::-webkit-scrollbar{
width:6px;
}

.submenu-left::-webkit-scrollbar-thumb{
background:rgba(25,182,176,.4);
border-radius:10px;
}

.submenu-left::-webkit-scrollbar-track{
background:transparent;
}


/* правая колонка */
.submenu-right{
display:flex;
flex-direction:column;
height:auto;
min-width:0;
}

/* карточка справа */
.preview-card{
height:100%;
display:flex;
flex-direction:column;
}

/* текст справа тоже скроллится если длинный */
.preview-text{
max-height:240px;
overflow-y:auto;
padding-right:5px;

scrollbar-width:thin;
scrollbar-color:rgba(25,182,176,.3) transparent;
}

.preview-text::-webkit-scrollbar{
width:5px;
}

.preview-text::-webkit-scrollbar-thumb{
background:rgba(25,182,176,.3);
border-radius:10px;
}


/* фикс — чтобы не прыгало */
.submenu{
display:flex;
align-items:stretch;
}

/* предотвращаем сжатие */
.submenu-left{
flex-shrink:0;
}

.submenu-right{
flex:1;
}

}