.student-hero{

    background:linear-gradient(135deg,var(--primary),#214c98);

    padding: 30px 0 60px;

    color:#fff;

    text-align:center;

}

.student-hero h1{

font-size:52px;

font-weight:700;

margin-bottom:15px;

}

.student-hero p{

max-width:650px;

margin:auto;

opacity:.9;

}

.student-page{

padding:20px 0;

}

.student-filter{

display:flex;

gap:12px;

flex-wrap:wrap;

align-items:center;

margin-bottom:40px;

}

.student-pill{

border:none;

padding:10px 22px;

border-radius:50px;

background:#fff;

box-shadow:0 5px 15px rgba(0,0,0,.08);

font-weight:600;

cursor:pointer;

transition:.3s;

}

.student-pill.active{

background:var(--primary);

color:#fff;

}

#studentSearch{

margin-left:auto;

padding:10px 20px;

border-radius:50px;

border:1px solid #ddd;

min-width:260px;

}

@media(max-width:768px){

.student-hero h1{

font-size:42px;

margin-bottom:10px;

}

#studentSearch{

width:100%;

margin-left:0;

}

}

.student-grid{

    display:grid;

    grid-template-columns:repeat(4,320px);

    gap:30px;

    justify-content:center;

}

@media(max-width:1400px){

.student-grid{

grid-template-columns:repeat(3,320px);

}

}

@media(max-width:1100px){

.student-grid{

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

}

}

@media(max-width:768px){

.student-grid{

grid-template-columns:1fr;

}

}

.student-card{

position:relative;

display:block;

overflow:hidden;

border-radius:22px;

aspect-ratio:3/4;

text-decoration:none;

box-shadow:0 12px 35px rgba(0,0,0,.15);

}

.student-image{

height:100%;

}

.student-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.student-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:25px;

background:linear-gradient(

to top,

rgba(15,46,109,.92),

rgba(15,46,109,.55),

transparent

);

color:#fff;

}

.student-basic h3{

margin:0;

font-size:34px;

font-weight:700;

color:#fff;

}

.student-basic span{

display:block;

margin-top:8px;

font-size:18px;

color:#fff;

opacity:.9;

}

.student-detail{

margin-top:18px;

max-height:0;

overflow:hidden;

opacity:0;

transition:.3s;

color:#fff;

line-height:1.7;

}

.student-detail strong{

display:block;

margin-bottom:12px;

}

.student-card:hover img{

transform:scale(1.05);

}

.student-card:hover .student-detail{

max-height:220px;

opacity:1;

}

.student-link{

margin-top:18px;

font-weight:700;

}

@media(max-width:768px){

.student-basic h3{

font-size:30px;

}

.student-detail{

display:none;

}

}