:root{
--gold:#D4AF37;
--gold-light:#F7D777;
--gold-dark:#9C7A2D;
--black:#050505;
--card:#101010;
--text:#ffffff;
--muted:#bfbfbf;
}

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

body{
background:#050505;
color:white;
font-family:Montserrat,sans-serif;
overflow-x:hidden;
}

.hero{
position:relative;
min-height:100vh;

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

text-align:center;

background:
radial-gradient(circle at top,
rgba(212,175,55,.15),
transparent 45%),
#050505;
}

.hero-content{
width:90%;
max-width:1000px;
z-index:2;
}

.logo{

width:300px;
max-width:80%;

margin-bottom:40px;

animation:
logoGlow 4s ease-in-out infinite;

filter:
drop-shadow(0 0 15px rgba(212,175,55,.25))
drop-shadow(0 0 35px rgba(212,175,55,.15));

}

.tagline{

background:linear-gradient(
90deg,
#8f6b1d 0%,
#d4af37 20%,
#fff7c8 40%,
#ffffff 50%,
#fff7c8 60%,
#d4af37 80%,
#8f6b1d 100%
);

background-size:300% 100%;

animation:goldTextFlow 8s linear infinite;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;

text-shadow:
0 0 15px rgba(212,175,55,.25);

}

.hero h1{
font-family:'Cormorant Garamond',serif;

font-size:60px;
font-weight:700;

line-height:1.1;

margin-bottom:25px;

background:linear-gradient(
90deg,
#fff0b2,
#d4af37,
#fff0b2);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{
font-size:22px;
line-height:1.7;

color:#cfcfcf;

max-width:700px;
margin:auto auto 50px;
}

.buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.btn-gold{
padding:18px 40px;

border-radius:50px;

text-decoration:none;

font-weight:600;

color:black;

background:
linear-gradient(
135deg,
#f5d57a,
#d4af37);

box-shadow:
0 0 30px rgba(212,175,55,.35);

transition:.3s;
}

.btn-gold:hover{
transform:translateY(-4px);
}

.btn-outline{
padding:18px 40px;

border-radius:50px;

border:1px solid var(--gold);

text-decoration:none;

color:var(--gold);

transition:.3s;
}

.btn-outline:hover{
background:var(--gold);
color:black;
}

.section{

padding:30px 8%;
}

#courses,
#mentors,
#models,
#news,
#contacts{
    scroll-margin-top:0px;
}

.title-wrap{
display:flex;
align-items:center;
justify-content:center;
gap:25px;
margin-bottom:70px;
}

.line{
width:120px;
height:1px;

background:var(--gold);
}

.section h2{
font-family:'Cormorant Garamond',serif;
font-size:35px;
letter-spacing:3px;
}

.courses{

display:grid;

grid-template-columns:
repeat(3,minmax(0,1fr));

gap:15px;

}

.courses2{
display:grid;
grid-template-columns:
repeat(4, 1fr);

gap:15px;
}

.card{
background:#101010;

padding:35px;

border-radius:25px;

border:1px solid rgba(212,175,55,.15);

transition:.3s;
}

.card:hover{
border-color:var(--gold);

transform:translateY(-8px);

box-shadow:
0 0 25px rgba(212,175,55,.15);
}

.card h3{
font-size:24px;
margin-bottom:15px;

color:var(--gold);
}

.card p{
color:#c8c8c8;
line-height:1.7;
}

.about{
padding:100px 8%;

background:
linear-gradient(
180deg,
#080808,
#101010);
}

.about-inner{
max-width:900px;
margin:auto;
text-align:center;
}

.about h2{
font-family:'Cormorant Garamond',serif;
font-size:54px;
color:var(--gold);

margin-bottom:30px;
}

.about p{
font-size:18px;
line-height:1.7;
color:#d5d5d5;

margin-bottom:30px;
}

.about ul{
list-style:none;
}

.about li{
margin:15px 0;
font-size:18px;
}

.cta{
padding:120px 20px;

text-align:center;

background:
radial-gradient(circle,
rgba(212,175,55,.15),
transparent 70%);
}

.cta h2{
font-family:'Cormorant Garamond',serif;
font-size:56px;

margin-bottom:25px;

color:var(--gold);
}

.cta p{
font-size:20px;
margin-bottom:40px;

color:#d0d0d0;
}

footer{
font-size:11px;
padding:30px 20px;

text-align:center;

border-top:
1px solid rgba(212,175,55,.15);
}

.footer-logo{
width:90px;

margin-bottom:10px;

opacity:.9;
}

.admin-link{
color: inherit;
text-decoration: none;
}

.admin-link:hover{
opacity: 0.8;
}


.modal-content{
width:600px;
max-width:90%;
background:white;
color:#000;
margin:50px auto;
padding:25px;
border-radius:10px;
}

.close{
float:right;
cursor:pointer;
font-size:32px;
color:#333;
font-weight:bold;
line-height:1;
}

.close:hover{
color:#d9534f;
}

.form-group{
margin-bottom:15px;
}

.form-group input,
.form-group textarea,
.form-group select{

width:100%;
padding:10px;
box-sizing:border-box;

color:#000;
background:#fff;

font-size:16px;
}

/* =========================
BEAUTY ADMIN PANEL
========================= */

.admin-body{
margin:0;
font-family:Montserrat,sans-serif;
background:#f4f4f4;
}

.admin-header{
background:#1f2937;
color:white;
padding:20px;
text-align:center;
}

.tabs{
display:flex;
background:white;
border-bottom:1px solid #ddd;
}

.tab{
padding:15px 25px;
cursor:pointer;
font-weight:bold;
color:#000;
}

.tab.active{
border-bottom:3px solid #d4af37;
color:#d4af37;
}

.content{
display:none;
padding:20px;
}

.content.active{
display:block;
}

.admin-table{
width:100%;
border-collapse:collapse;
background:white;
}

.admin-table th,
.admin-table td{
padding:12px;
border:1px solid #ddd;
text-align:left;
}

.admin-table td{
color:#000;
}

.admin-table th{
color:#000;
}

.course-thumb{
width:80px;
height:80px;
object-fit:cover;
border-radius:8px;
border:1px solid #ddd;
}

.btn{
border:none;
padding:8px 12px;
cursor:pointer;
border-radius:4px;
}

.edit{
background:#f0ad4e;
color:white;
}

.delete{
background:#d9534f;
color:white;
}

.add{
margin-bottom:15px;
background:#28a745;
color:white;
}

.home-btn{
display:inline-block;
margin-top:15px;
padding:10px 20px;
background:#d4af37;
color:white;
text-decoration:none;
border-radius:6px;
font-weight:bold;
transition:.3s;
}

.home-btn:hover{
background:#c49d24;
}

.course-dynamic{
cursor:pointer;
position:relative;

min-height:330px;
max-height:330px;
height:330px;
background-size:cover;
background-position:center;

border-radius:18px;

overflow:hidden;

}

.card-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
to bottom,
rgba(0,0,0,.85),
rgba(0, 0, 0, 0.45)
);

display:flex;
flex-direction:column;
justify-content:space-between;

padding:25px;

}

.course-dynamic h3{

color:#d4af37;

margin-bottom:12px;

font-size:28px;

}

.course-dynamic p{

color:white;

line-height:1.5;

}

.course-top{

flex:1;

display:flex;

flex-direction:column;

justify-content:flex-start;

}

.course-bottom{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:20px;

}

.course-duration{

color:white;

font-size:14px;

font-weight:500;

}

.course-price{

color:#d4af37;

font-size:20px;

font-weight:700;

}

.mentors-grid{

display:grid;

grid-template-columns:
repeat(3, minmax(0, 1fr));

gap:15px;

align-items:start;

}

.mentor-card{

    display:flex;

    flex-direction:column;

    padding:25px;

    border-radius:20px;

    background:#101010;

    border:1px solid rgba(212,175,55,.15);

    height:330px;
    min-height:330px;
    max-height:330px;

    transition:.3s;

    cursor:pointer;

}

.mentor-card:hover{

    border-color:#d4af37;

    transform:translateY(-8px);

    box-shadow:
        0 0 25px rgba(212,175,55,.15);

}

.mentor-header{

display:flex;

gap:20px;

align-items:flex-start;

width:100%;

}

.mentor-photo{

position:relative;

width:150px;

aspect-ratio:1 / 1;

flex-shrink:0;

}

.mentor-avatar{

position:absolute;

left:50%;
top:40%;

width:85%;
height:75%;

transform:translate(-54%,-45%);

object-fit:cover;

border-radius:35%;

z-index:1;

filter:
grayscale(90%)
contrast(1.15)
brightness(0.95);

}

.mentor-frame{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:contain;

pointer-events:none;

z-index:2;

}

.mentor-info{

width:100%;

display:flex;

flex-direction:column;

align-items:flex-start;

min-height:auto;

}

.mentor-name{

font-size:22px;

font-weight:700;

color:#d4af37;

margin-bottom:8px;

text-align:left;

}

.mentor-course{

display:block;

margin-bottom:25px;

color:#cfcfcf;

font-size:15px;

}

.mentor-bio{

width:100%;

margin-top:15px;

color:white;

line-height:1.7;

font-size:13px;

font-style:italic;

text-align:left;

}

.contacts-grid{
min-height:500px;
max-height: 500px;
height:500px;
display:grid;

grid-template-columns:
25% 75%;

gap:20px;

align-items:stretch;

}

.contacts-info{

background:#101010;

border:1px solid rgba(212,175,55,.15);

border-radius:20px;

padding:35px;

}

.contacts-info h3{

color:#d4af37;

margin-bottom:25px;

font-size:28px;

}

.contacts-info p{

margin-bottom:15px;

line-height:1.7;

font-size:18px;

}

.contacts-map{

border-radius:20px;

overflow:hidden;

border:1px solid rgba(212,175,55,.15);

}

.news-courses{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:15px;
width:100%;
}

.news-courses .card{
padding:0;
}

.news-courses .course-dynamic{
min-height:670px;    
max-height:670px;
height:670px;
}


/* мобильная версия */

@media (max-width:768px){

.news-courses{
grid-template-columns:1fr;
}

}

@media (max-width:1200px){
.mentors-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media (max-width:768px){
.mentors-grid{
grid-template-columns:1fr;
}
}


@media (max-width:600px){

.courses{
grid-template-columns:
1fr;
}


}


@media (max-width:768px){
.mentors-grid{
grid-template-columns:1fr;
}
}

@keyframes goldTextFlow{

0%{
background-position:0% 50%;
}

100%{
background-position:300% 50%;
}

}

@keyframes logoGlow{

0%{
filter:
drop-shadow(0 0 10px rgba(212,175,55,.15))
drop-shadow(0 0 25px rgba(212,175,55,.08));
}

50%{
filter:
drop-shadow(0 0 25px rgba(255,235,170,.45))
drop-shadow(0 0 50px rgba(212,175,55,.35));
}

100%{
filter:
drop-shadow(0 0 10px rgba(212,175,55,.15))
drop-shadow(0 0 25px rgba(212,175,55,.08));
}

}

.news-pagination{

display:flex;

justify-content:center;

gap:12px;

margin-top:35px;

}

.news-dot{

width:12px;

height:12px;

border-radius:50%;

background:rgba(212,175,55,.25);

cursor:pointer;

transition:.3s;

}

.news-dot:hover{

background:rgba(212,175,55,.6);

}

.news-dot.active{

background:#d4af37;

box-shadow:
0 0 10px rgba(212,175,55,.6);

}

.news-courses{

opacity:1;

transform:translateX(0);

transition:
opacity .6s ease,
transform .6s ease;

}

.news-courses.news-hide{

opacity:0;

transform:translateX(-40px);

}

.page-slider{

opacity:1;

transform:translateX(0);

transition:
opacity .6s ease,
transform .6s ease;

}

.page-slider.news-hide{

opacity:0;

transform:translateX(-40px);

}

html{
scroll-behavior:smooth;
}

.news-card{

height:670px;
max-height:670px;
min-height:670px;

background:#101010;

border-radius:20px;

overflow:hidden;

border:1px solid rgba(212,175,55,.15);

display:flex;

flex-direction:column;

transition:.3s;

}

.news-card:hover{

border-color:#d4af37;

transform:translateY(-8px);

box-shadow:
0 0 25px rgba(212,175,55,.15);

}

.news-images{
cursor:pointer;
height:45%;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
padding:8px;
background:#101010;
}

.news-content{
height:55%;
padding:25px;
display:flex;
flex-direction:column;
}

.news-image{

background-size:cover;

background-position:center;

border-radius:14px;

border:1px solid rgba(212,175,55,.15);

overflow:hidden;

transition:.3s;

}

.news-image:hover{

transform:scale(1.02);

}



.news-date{

color:#d4af37;

font-size:13px;

margin-bottom:10px;

letter-spacing:1px;

}

.news-content h3{

color:#d4af37;

font-size:28px;

margin-bottom:15px;

}

.news-content p{

color:#d0d0d0;

line-height:1.6;

}

.image-modal{

position:fixed;

inset:0;

background:rgba(0,0,0,.9);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:99999;

}

.image-modal.show{

opacity:1;

visibility:visible;

}

.image-modal-content{

max-width:90vw;

max-height:90vh;

border-radius:20px;

border:2px solid rgba(212,175,55,.3);

box-shadow:
0 0 40px rgba(212,175,55,.25);

}

.contacts-map iframe{
width:100%;
height:100%;
border:0;

filter:
grayscale(100%)
brightness(.75)
contrast(1.15);
}

.contacts-map{
border:1px solid rgba(240, 186, 7, 0.25);

box-shadow:
0 0 30px rgba(212,175,55,.12);
}

.social-links{

display:flex;

flex-direction:column;

gap:12px;

margin:20px 0;

}

.social-btn{
text-decoration: none;
color:#d4af37;

font-size:20px;

width:32px;

text-align:center;

flex-shrink:0;

width:50px;

height:50px;

display:flex;

align-items:center;

justify-content:center;

border:1px solid rgba(212,175,55,.15);

border-radius:12px;

background:#101010;

flex-shrink:0;

}


.contact-row{

display:flex;

align-items:center;

gap:15px;

}

.contact-text{

color:#fff;
text-decoration: none;
font-size:15px;

line-height:1.4;

}

.modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.8);
z-index:9999;
}

.modal.show{
display:flex;
justify-content:center;
align-items:center;
}

.modal-close{
cursor:pointer;
float:right;
font-size:30px;
}

.course-form{
display:flex;
flex-direction:column;
gap:12px;
}

.course-form input{

width:100%;

font-family:'Cormorant Garamond',serif;
font-size:24px;

padding:12px;
}

.course-form button{

width:100%;

font-family:'Cormorant Garamond',serif;
font-size:24px;

padding:12px;
}

#scrollTopBtn{

user-select:none;
-webkit-user-select:none;
-webkit-touch-callout:none;

position:fixed;

right:10px;
bottom:20px;

width:45px;
height:45px;

font-size:25px;

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

border-radius:50%;

background:#101010;

border:1px solid rgba(212,175,55,.3);

color:#d4af37;

cursor:pointer;

z-index:999999;

transition:.3s;

opacity:0;
visibility:hidden;
pointer-events:none;

}

#scrollTopBtn.show{

opacity:1;
visibility:visible;
pointer-events:auto;

}

#scrollTopBtn:hover{

background:#d4af37;

color:#000;

transform:translateY(-3px);

box-shadow:
0 0 20px rgba(212,175,55,.35);

}

#scrollTopBtn:hover{

background:rgba(212,175,55,.55);

}

a,
button,
.btn-outline,
.social-btn,
.course-dynamic,
#scrollTopBtn{

-webkit-tap-highlight-color: transparent;

outline:none;

}

a:focus,
button:focus,
.btn-outline:focus,
.social-btn:focus,
.course-dynamic:focus,
#scrollTopBtn:focus{

outline:none;

}

a:active,
button:active,
.btn-outline:active,
.social-btn:active,
#scrollTopBtn:active{

transform:none;

}

@media(max-width:768px){

    .buttons{

        display:grid;

        grid-template-columns:repeat(2, 140px);

        justify-content:center;

        gap:10px;

    }

    .buttons .btn-outline{

        width:140px;

        text-align:center;

        padding:12px 0;

    }

    .buttons a[href="#contacts"]{
    grid-column:1 / span 2;
    justify-self:center;
}

.footer-logo{
width:60px;
margin-bottom:5px;
}

footer{
padding-top:5px;
}

.contacts-grid{
display:flex;
flex-direction:column;
height:auto;
min-height:auto;
max-height:none;
gap:15px;
}

.social-btn{
width:40px;
height:40px;
font-size:16px;
}

.contact-text{
font-size:13px;
line-height:1.2;
}

.contact-row{
gap:10px;
margin:0;
}

.social-links{
order:1;
margin:0;
gap:6px;
}

.contacts-map{
order:2;
height:250px;
}

#contacts .title-wrap{
margin-bottom:15px;
}

#news .title-wrap{
margin-bottom:15px;
}

#courses .title-wrap{
margin-bottom:15px;
}

.line{
width:30px;
}

.hero{

align-items:flex-start;

padding-top:40px;

}

.hero-content{
padding-top:0px;
}

.btn-outline{

padding:12px 22px;

font-size:14px;

}

.hero h1{
font-size:25px;
}

.hero p{
font-size:14px;
}

.section h2{
font-size:25px;
text-align:center;

}

.logo{
width:200px !important;
}

#mentors .title-wrap{
margin-bottom:15px;
}

#models .title-wrap{
margin-bottom:15px;
}

.mentor-photo{

width:90px;

}

.mentor-avatar{

width:80%;
height:70%;

}
.mentor-name{

font-size:15px;

}

.mentor-course{

font-size:11px;

}

.mentor-bio{

font-size:11px;
margin-top:15px;
text-align:left;

padding-left:0;

}

.mentor-header{

min-height:70px;


}

.course-dynamic{

height:285px !important;
min-height:285px !important;
max-height:285px !important;

}

.mentor-card{

height:285px !important;
min-height:285px !important;
max-height:285px !important;

}

.news-card{

height:585px !important;
min-height:585px !important;
max-height:585px !important;

}

}

@media (hover:none){

.btn-outline:hover{

background:transparent;

color:var(--gold);

}

.social-btn:hover{

background:#101010;

color:#d4af37;

}

#scrollTopBtn:hover{

background:#101010;

color:#d4af37;

transform:none;

}

}

.btn-outline,
.social-btn,
#scrollTopBtn{

-webkit-tap-highlight-color: transparent;

}

/* скрыть первый столбец (ID) во всех таблицах админки */

.admin-table th:first-child,
.admin-table td:first-child{
    display:none;
}

.model-courses{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin:15px 0;
}

@media(max-width:768px){

    .model-courses{
        grid-template-columns:repeat(2,1fr);
    }

}

.model-course-item{

    display:flex;

    align-items:center;

    gap:8px;

    min-height:32px;

    cursor:pointer;

    font-size:14px;

    line-height:1.2;

    color:#333;

}

.model-course-item input[type="checkbox"]{

    width:18px;
    height:18px;

    margin:0;

    flex-shrink:0;

    cursor:pointer;

}

.model-course-item span{

    display:flex;

    align-items:center;

    min-height:18px;

}

.model-grid{
    display:grid;
    grid-template-columns:0.7fr 1.4fr 0.6fr;
    gap:10px;
    margin-bottom:0px;
}

.model-grid input{
    width:100%;
}

.model-grid #modelPhone{
    grid-column:1 / 3;
}


@media (max-width:768px){

    .model-grid{

        display:grid;

        grid-template-columns:
            0.8fr
            1.2fr;

        gap:8px;

    }

    #modelFirstName{
        grid-column:1;
    }

    #modelLastName{
        grid-column:2;
    }

    #modelAge{
        grid-column:1;
    }

    #modelPhone{
        grid-column:2 !important;
    }

    .photo-btn{
        grid-column:1 / span 2;
    }

}

.photo-btn{
    font-family:'Cormorant Garamond',serif;
    font-size:24px;
    padding:12px;
    height:auto;


    display:flex;

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

    border:1px solid #ccc;

    border-radius:4px;

    background:#fff;

    cursor:pointer;

    color:#000;

    user-select:none;

}

.photo-btn:hover{

    background:#f5f5f5;

}