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

body{
font-family:Arial, sans-serif;
background:#f4f7fb;
color:#333;
}

/* HERO */

.hero{
background:linear-gradient(120deg,#0066ff,#00c6ff);
padding:100px 20px;
text-align:center;
color:#fff;
}

.hero h1{
font-size:42px;
margin-bottom:10px;
}

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

/* SEARCH BAR */

.search-bar{
background:#fff;
display:flex;
flex-wrap:wrap;
gap:10px;
padding:12px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
max-width:700px;
margin:auto;
}

.search-bar input{
flex:1;
min-width:120px;
padding:12px;
border:1px solid #ddd;
border-radius:6px;
}

.search-bar button{
background:#0066ff;
color:#fff;
border:none;
padding:12px 20px;
border-radius:6px;
cursor:pointer;
font-weight:600;
}

/* SECTION */

.section{
max-width:1200px;
margin:60px auto;
padding:15px;
}

.section h2{
text-align:center;
margin-bottom:30px;
font-size:28px;
}

/* SUBJECT */

.subject-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.subject-card{
background:#fff;
padding:25px;
border-radius:12px;
text-align:center;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
transition:0.3s;
cursor:pointer;
}

.subject-card:hover{
transform:translateY(-5px);
}

/* ===================== */
/* TUTOR SLIDER */
/* ===================== */

.tutor-slider{
position:relative;
overflow:hidden;
}

/* FIX: proper smooth horizontal scroll */
.tutor-track{
display:flex;
gap:20px;
overflow-x:auto;
scroll-behavior:smooth;
padding:10px;
}

/* Hide scrollbar */
.tutor-track::-webkit-scrollbar{
display:none;
}
.tutor-track{
scrollbar-width:none;
}

/* SHOW EXACT 2 CARDS */
.tutor-card{
flex:0 0 calc(50% - 10px); /* FIXED */
background:#fff;
border-radius:15px;
padding:20px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:0.3s;
}

.tutor-card:hover{
transform:translateY(-5px);
}

/* IMAGE */

.tutor-card img{
width:80px;
height:80px;
border-radius:50%;
object-fit:cover;
margin-bottom:10px;
border:2px solid #0066ff;
}

/* NAV BUTTONS */

.nav{
position:absolute;
top:50%;
transform:translateY(-50%);
background:#0066ff;
color:#fff;
border:none;
padding:10px 12px;
cursor:pointer;
border-radius:50%;
z-index:10;
}

.prev{
left:5px;
}

.next{
right:5px;
}

/* TESTIMONIAL */

.testimonials{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
gap:20px;
}

.review{
background:#fff;
padding:20px;
border-radius:12px;
}

/* CTA */

.cta{
background:linear-gradient(120deg,#007bff,#00c6ff);
color:#fff;
padding:60px 20px;
text-align:center;
}

.cta a{
background:#fff;
color:#007bff;
padding:12px 20px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */

/* Tablet */
@media(max-width:900px){

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

}

/* Mobile */
@media(max-width:600px){

.hero{
padding:70px 15px;
}

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

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

.search-bar{
flex-direction:column;
}

.search-bar input,
.search-bar button{
width:100%;
}

/* 1 CARD ON MOBILE */
.tutor-card{
flex:0 0 90%;
}

.nav{
display:none;
}

.section{
margin:40px auto;
}

}
/* TESTIMONIAL SECTION */

.testimonials{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
gap:25px;
}

/* CARD */

.review{
background:#fff;
padding:25px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:0.3s;
position:relative;
}

.review:hover{
transform:translateY(-8px);
}

/* TOP USER INFO */

.review-top{
display:flex;
align-items:center;
gap:12px;
margin-bottom:15px;
}

.review-top img{
width:50px;
height:50px;
border-radius:50%;
object-fit:cover;
border:2px solid #0066ff;
}

.review-top h4{
margin:0;
font-size:16px;
}

.review-top span{
font-size:12px;
color:#777;
}

/* REVIEW TEXT */

.review p{
font-size:14px;
color:#555;
line-height:1.6;
margin-bottom:10px;
}

/* STARS */

.stars{
color:#ffb400;
font-size:16px;
}

/* OPTIONAL QUOTE ICON */

.review::before{
content:"“";
font-size:50px;
color:#0066ff;
position:absolute;
top:10px;
right:15px;
opacity:0.1;
}

/* MOBILE */

@media(max-width:600px){

.review{
padding:18px;
}

.review p{
font-size:13px;
}

}