.nav-links a.active{
color:#ff4fa3;
}
/* SECTION */

.tutorial-section{

padding:120px 20px;

text-align:center;

}



/* HEADING */

.tutorial-section h1{

font-size:40px;

color:#ff4fa3;

margin-bottom:60px;

}



/* GRID */

.tutorial-grid{

max-width:1200px;

margin:0 auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:30px;

justify-items:center;

}



/* VIDEO CARD */

.video-card{

width:220px;

aspect-ratio:9/16;

background:#1c1c1c;

border-radius:14px;

overflow:hidden;

}



/* HOVER EFFECT */

.video-card:hover{

transform:translateY(-8px);

box-shadow:0 10px 30px rgba(255,79,163,0.4);

}



/* VIDEO */

.video-card video{

width:100%;

height:auto;

object-fit:cover;

display:block;

}

video:fullscreen{
width:100%;
height:100%;
object-fit:contain;
}

video:-webkit-full-screen{
width:100%;
height:100%;
object-fit:contain;
}

@media (max-width:768px){

.tutorial-section{
padding:80px 15px;
}

/* heading */

.tutorial-section h1{
font-size:28px;
margin-bottom:40px;
}

/* grid */

.tutorial-grid{

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

gap:15px;

}

/* video card */

.video-card{

width:100%;

aspect-ratio:9/16;

}

/* video */

.video-card video{

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

}

}