.nav-links a.active{
color:#ff4fa3;
}
/* HERO */
.hero{
height:100vh;
background:url('../assets/images/makeup-bg.webp') center/cover no-repeat;
display:flex;
align-items:flex-end;
justify-content:center;
position:relative;
text-align:center;
padding-bottom:120px;
}

.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
}

.hero-content{
position:relative;
z-index:2;
}

.hero p{
font-size:20px;
margin-bottom:30px;
}

.hero-btn{
background:#ff4fa3;
padding:14px 30px;
border-radius:30px;
text-decoration:none;
color:white;
font-size:18px;
display:inline-block;
margin-top:10px;
}

.hero-btn:hover{
background:#ff2c8f;
}

.hero-title{
font-size:70px;
font-weight:700;
letter-spacing:3px;
margin-bottom:0;
color:#ff4fa3;
text-shadow:0 0 15px rgba(255,79,163,0.6);
}

.hero-subtitle{
font-size:120px;
font-weight:500;
letter-spacing:1px;
margin-top:0;
margin-bottom:20px;
line-height:1.2;
}

.hero-subtitle span{
font-size:30px;
font-weight:500;
letter-spacing:1px;
}

.hero-subtitle span::after{
content:"|";
margin-left:5px;
animation:blink 1s infinite;
}

@keyframes blink{
0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}
}

/* SERVICES */
.services h2{
color:#ff4fa3;
font-size:36px;
margin-bottom:20px;
}

.services{
padding:100px 10%;
text-align:center;
}

.service-box{
margin-top:50px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.service-card{
background:#1c1c1c;
border-radius:12px;
overflow:hidden;
transition:0.4s;
text-align:center;
}

.service-card h3{
padding:18px;
font-size:18px;
}

.service-card img{
width:100%;
height:320px;
object-fit:cover;
display:block;
transition:0.5s;
}

.service-card:hover img{
transform:scale(1.1);
}

.service-card:hover{
transform:translateY(-10px);
box-shadow:0 10px 30px rgba(255,79,163,0.4);
}

/* ABOUT */

.about-section{
height:600px;
background-image:url('../assets/images/about-bg.webp');
background-size:cover;
background-position:top center;
background-repeat:no-repeat;
display:flex;
align-items:center;
position:relative;
}

.about-overlay{
width:45%;
background:rgba(255,255,255,0.9);
padding:50px;
margin-left:8%;
border-radius:10px;
}

.about-overlay h2{
color:#ff4fa3;
font-size:36px;
margin-bottom:20px;
}

.about-overlay p{
color:#333;
line-height:1.8;
font-size:17px;
text-align:justify;
}

/* VIDEOS */
.videos h2{
color:#ff4fa3;
font-size:36px;
margin-bottom:20px;
}

.videos{
padding:100px 10%;
text-align:center;
}

.video-box{
margin-top:40px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}

.video-card{
width:325px;
height:500px;
overflow:hidden;
border-radius:12px;
background:#1c1c1c;
}

/* Instagram embed ko crop karna */

.video-card .instagram-media{
margin:0 !important;
max-width:100% !important;
height:520px !important;
}

.video-card iframe{
height:520px !important;
}

@media (max-width:400px){

.service-box{
grid-template-columns:1fr;
}

}
@media (max-width:768px){

/* HERO SECTION */

.hero{
height:90vh;
padding-bottom:60px;
}

.hero-title{
font-size:36px;
letter-spacing:2px;
}

.hero-subtitle{
font-size:50px;
}

.hero-subtitle span{
font-size:20px;
}

.hero-btn{
padding:12px 24px;
font-size:16px;
}


/* SERVICES */

.services{
padding:60px 20px;
}

.service-box{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

}

.service-card{

background:#1c1c1c;

border-radius:12px;

overflow:hidden;

transition:0.3s;

}
.service-card img{

width:100%;

height:200px;

object-fit:cover;

display:block;

}

.service-card h3{

padding:14px;

font-size:16px;

text-align:center;

}


.service-card:active{
transform:scale(0.96);
box-shadow:0 8px 20px rgba(255,79,163,0.4);
}

/* ABOUT */

.about-section{
height:auto;
padding:60px 20px;
background-position:center;
}

.about-overlay{
width:100%;
margin-left:0;
padding:30px;
}

.about-overlay h2{
font-size:28px;
}

.about-overlay p{
font-size:16px;
}


/* VIDEO SECTION */

.videos{
padding:60px 20px;
}

.video-box{
grid-template-columns:1fr;
gap:20px;
}


/* FOOTER */

.footer{
padding:60px 20px;
}

.footer-container{
grid-template-columns:1fr;
gap:30px;
}

}