/* =========================
HERO
========================= */

.hero{
  position:relative;
  padding:120px 0 150px;
  background:linear-gradient(120deg,var(--bg-hero-start),var(--bg-white));
}

.hero-wrapper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
}

.hero-text{
  max-width:520px;
}

.hero-tag{
  color:var(--color-primary);
  font-weight:600;
  margin-bottom:10px;
  display:block;
}

.hero h1{
  font-size:48px;
  line-height:1.2;
  margin-bottom:20px;
}

.hero p{
  color:var(--text-muted);
  margin-bottom:30px;
}

.hero-btn{
  background:var(--color-primary);
  color:var(--color-white);
  padding:14px 30px;
  border-radius:var(--radius-round);
  font-weight:500;
  display:inline-block;
}

.hero-image{
  max-width:520px;
}

.hero-wave{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
}


/* =========================
CATEGORY SECTION
========================= */

.categories{
  padding:80px 0;
  background:var(--bg-white);
}

.section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:50px;
}

.section-tag{
  color:var(--color-primary);
  font-weight:600;
  font-size:14px;
}

.section-header h2{
  font-size:32px;
  margin-top:8px;
}

.view-btn{
  background:var(--color-primary);
  color:var(--color-white);
  padding:10px 18px;
  border-radius:25px;
  font-size:14px;
}

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

.category-card{
  background:var(--bg-body);
  padding:35px;
  border-radius:var(--radius-lg);
  text-align:center;
  transition:var(--transition);
  position:relative;
}

.category-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-medium);
}

.category-card .icon{
  font-size:36px;
  color:var(--color-primary);
  margin-bottom:15px;
}

.category-card h3{
  font-size:18px;
  margin-bottom:8px;
}

.category-card p{
  color:var(--text-muted);
  font-size:14px;
}

.card-arrow{
  margin-top:15px;
  color:var(--color-primary);
}


/* =========================
POPULAR COURSES
========================= */

.courses{
  padding:80px 0;
  background:var(--bg-body);
}

.course-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

.course-card{
  background:var(--bg-white);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:var(--transition);
}

.course-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-heavy);
}

.course-image{
  position:relative;
}

.course-image img{
  width:100%;
  height:220px;
  object-fit:cover;
}

.price{
  position:absolute;
  top:15px;
  right:15px;
  background:var(--color-primary);
  color:var(--color-white);
  padding:6px 12px;
  border-radius:var(--radius-pill);
  font-size:14px;
}

.course-content{
  padding:20px;
}

.course-content h3{
  font-size:18px;
  margin-bottom:15px;
}

.course-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
}

.course-meta span{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  white-space:nowrap;
}
.course-meta .material-symbols-outlined{
  font-size:18px;
}

/* =========================
TESTIMONIALS
========================= */

.testimonials{
  padding:110px 0;
  background:var(--bg-section-light);
}

.testimonial-header{
  text-align:center;
  margin-bottom:70px;
}

.testimonial-header h2{
  font-size:34px;
  line-height:1.3;
  max-width:700px;
  margin:auto;
}

.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
}

.testimonial-card{
  background:var(--bg-white);
  padding:40px;
  border-radius:var(--radius-xl);
  position:relative;
  box-shadow:var(--shadow-medium);
  transition:var(--transition);
}

.testimonial-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-heavy);
}

.quote-icon{
  position:absolute;
  top:25px;
  right:30px;
  color:var(--color-primary);
  opacity:0.2;
}

.stars{
  color:var(--color-accent);
  margin-bottom:15px;
  font-size:18px;
}

.testimonial-card p{
  color:var(--text-soft);
  margin-bottom:28px;
}

.testimonial-user{
  display:flex;
  align-items:center;
  gap:15px;
}

.testimonial-user img{
  width:55px;
  height:55px;
  border-radius:50%;
  object-fit:cover;
}


/* =========================
STATS
========================= */

.stats-section{
  padding:80px 0;
  background:var(--bg-section-light);
}

.stats-box{
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-grad));
  border-radius:var(--radius-xxl);
  padding:50px 40px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  text-align:center;
  color:var(--color-white);
  box-shadow:var(--shadow-xl);
}

.stat-item h3{
  font-size:36px;
  margin-bottom:6px;
}

.stat-item p{
  font-size:14px;
  opacity:0.9;
}


/* =========================
UPCOMING COURSES
========================= */

.upcoming-courses{
  padding:100px 0;
  background:var(--bg-white);
}

.upcoming-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.upcoming-card{
  background:var(--bg-body);
  border-radius:var(--radius-xl);
  overflow:hidden;
  transition:var(--transition);
}

.upcoming-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-heavy);
}


/* =========================
BLOG
========================= */

.blog{
  padding:100px 0;
  background:var(--bg-white);
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.blog-card{
  background:var(--bg-body);
  border-radius:var(--radius-xl);
  overflow:hidden;
  transition:var(--transition);
  box-shadow:var(--shadow-card);
}

.blog-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-heavy);
}

/* =========================
HERO CAROUSEL
========================= */

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

.hero-slide{
  position:absolute;
  top:0;
  left:0;
  width:100%;

  opacity:0;
  transform:translateY(30px);

  transition:opacity 0.6s ease, transform 0.6s ease;
}

.hero-slide.active{
  opacity:1;
  transform:translateY(0);
  position:relative;
}

/* dots */

.hero-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:25px;
}

.hero-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#d0d0d0;
  cursor:pointer;
  transition:0.3s;
}

.hero-dot.active{
  background:var(--color-primary);
  transform:scale(1.2);
}

.page-banner{
  padding:80px 0;
  background:var(--bg-section-light);
  text-align:center;
}

.page-banner h1{
  font-size:36px;
  margin-bottom:10px;
}

.page-banner p{
  max-width:700px;
  margin:auto;
  color:var(--text-muted);
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}

.about-image img{
width:100%;
border-radius:12px;
}

.mission-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:40px;
}

.mission-card{
background:#fff;
padding:25px;
border-radius:10px;
text-align:center;
box-shadow:var(--shadow-soft);
}

.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin-top:40px;
}

.why-card{
background:#fff;
padding:25px;
border-radius:10px;
text-align:center;
box-shadow:var(--shadow-soft);
}

.about-cta{
text-align:center;
padding:80px 0;
background:var(--bg-section-light);
}

/* =========================
CONTACT PAGE
========================= */

.contact-section{
padding:80px 0;
}

/* GRID */

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:start;
}


/* CONTACT INFO */

.contact-info p{
margin-bottom:20px;
color:var(--text-muted);
}

.contact-item{
display:flex;
gap:15px;
margin-bottom:18px;
}

.contact-item span{
font-size:28px;
color:var(--primary-color);
}

.contact-item h4{
margin-bottom:3px;
}


/* CONTACT FORM */

.contact-form-box{
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:var(--shadow-soft);
}

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

.contact-form-box input,
.contact-form-box textarea{
width:100%;
padding:12px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
}

.contact-form-box textarea{
min-height:120px;
resize:vertical;
}


/* MAP */

.contact-map iframe{
width:100%;
display:block;
}


/* CTA */

.contact-cta{
padding:70px 0;
text-align:center;
background:var(--bg-section-light);
}

.contact-cta p{
max-width:600px;
margin:auto;
margin-bottom:20px;
}


/* =========================
TABLET
========================= */

@media(max-width:900px){

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

.contact-info{
text-align:center;
}

.contact-item{
justify-content:center;
text-align:left;
}

}


/* =========================
MOBILE
========================= */

@media(max-width:600px){

.contact-section{
padding:60px 0;
}

.contact-form-box{
padding:20px;
}

.contact-cta{
padding:50px 0;
}

}



/* =========================
BLOG DETAILS
========================= */

.blog-details{
padding:60px 0;
}

/* increase reading width */

.blog-article{
max-width:1000px;
margin:auto;
}

/* featured image fix */

.blog-featured-image{
width:100%;
height:380px;
object-fit:cover;
border-radius:12px;
margin-bottom:20px;
}

/* meta */

.blog-meta{
display:flex;
gap:20px;
margin-bottom:20px;
font-size:14px;
color:var(--text-muted);
flex-wrap:wrap;
}

.blog-meta span{
display:flex;
align-items:center;
gap:6px;
}

/* headings */

.blog-article h2{
margin-top:28px;
margin-bottom:10px;
}

/* paragraphs */

.blog-article p{
line-height:1.8;
margin-bottom:14px;
color:var(--text-muted);
font-size:16px;
}

/* list */

.blog-article ul{
margin-left:22px;
margin-bottom:20px;
line-height:1.8;
}

/* share */

.blog-share{
margin-top:40px;
display:flex;
gap:15px;
align-items:center;
flex-wrap:wrap;
}

/* =========================
MOBILE
========================= */

@media (max-width:768px){

.blog-article{
max-width:95%;
}

.blog-featured-image{
height:220px;
}

}

/* =========================
BLOG SHARE
========================= */

.blog-share{
margin-top:40px;
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

.share-btn{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#f2f2f2;
color:#333;
transition:0.25s;
}

.share-btn span{
font-size:20px;
}

/* platform colors */

.share-btn.whatsapp:hover{
background:#25D366;
color:#fff;
}

.share-btn.facebook:hover{
background:#1877F2;
color:#fff;
}

.share-btn.twitter:hover{
background:#1DA1F2;
color:#fff;
}

.share-btn.telegram:hover{
background:#0088cc;
color:#fff;
}

/* =========================
PAYMENT PAGE
========================= */

.payment-section{
padding:80px 0;
}

.payment-grid{
display:grid;
grid-template-columns:1.4fr 1fr;
gap:40px;
align-items:start;
}


/* course info */

.payment-course-card{
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:var(--shadow-soft);
}

.payment-course-image{
width:100%;
height:260px;
object-fit:cover;
border-radius:8px;
margin-bottom:15px;
}

.payment-course-features{
margin-top:15px;
list-style:none;
}

.payment-course-features li{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
font-size:15px;
}


/* payment card */

.payment-card{
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:var(--shadow-soft);
text-align:center;
}

.payment-price{
font-size:34px;
font-weight:700;
margin:15px 0;
color:#4f46e5;
}

.payment-seat{
font-size:14px;
color:var(--text-muted);
margin-bottom:20px;
}


/* form */

.payment-form input{
width:100%;
padding:12px;
margin-bottom:12px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
}


/* security text */

.payment-security{
margin-top:15px;
font-size:13px;
color:var(--text-muted);
}


/* mobile */

@media(max-width:900px){

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

}


/* =========================
PAYMENT RESULT
========================= */

.payment-result{
padding:80px 0;
text-align:center;
}

.result-box{
max-width:500px;
margin:auto;
background:#fff;
padding:40px;
border-radius:10px;
box-shadow:var(--shadow-soft);
}

.payment-result.success h1{
color:#16a34a;
}

.payment-result.failure h1{
color:#dc2626;
}

.payment-id{
margin:20px 0;
font-size:14px;
color:#777;
}

/* =========================
FACULTY DETAILS
========================= */

.faculty-hero{
padding:80px 0;
}

.faculty-hero-grid{
display:grid;
grid-template-columns:320px 1fr;
gap:40px;
align-items:center;
}

.faculty-image img{
width:100%;
border-radius:12px;
}

.faculty-role{
font-weight:600;
margin:8px 0 15px;
color:var(--text-muted);
}

.faculty-meta{
display:flex;
flex-wrap:wrap;
gap:15px;
margin:20px 0;
}

.faculty-meta div{
display:flex;
align-items:center;
gap:6px;
font-size:14px;
}


/* about */

.faculty-about{
padding:60px 0;
background:var(--bg-section-light);
}


/* achievements */

.faculty-achievements{
padding:60px 0;
}

.achievement-list{
margin-top:20px;
line-height:1.8;
}


/* faculty courses */

.faculty-courses{
padding:60px 0;
background:var(--bg-section-light);
}

.faculty-course-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;
margin-top:20px;
}

.faculty-course-card img{
width:100%;
height:180px;
object-fit:cover;
border-radius:8px;
margin-bottom:10px;
}


/* mobile */

@media(max-width:900px){

.faculty-hero-grid{
grid-template-columns:1fr;
text-align:center;
}

.faculty-meta{
justify-content:center;
}

.faculty-course-grid{
grid-template-columns:1fr;
}

}
/* =========================
FACULTY LIST PAGE
========================= */

.faculty-list{
padding:80px 0;
}

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


.faculty-card{
background:#fff;
border-radius:10px;
overflow:hidden;
text-decoration:none;
color:inherit;
box-shadow:var(--shadow-soft);
transition:0.3s;
}

.faculty-card:hover{
transform:translateY(-5px);
box-shadow:var(--shadow-medium);
}


.faculty-image img{
width:100%;
height:220px;
object-fit:cover;
}


.faculty-info{
padding:20px;
text-align:center;
}


.faculty-subject{
color:var(--text-muted);
font-size:14px;
margin:6px 0 10px;
}


.faculty-meta{
display:flex;
flex-direction:column;
gap:5px;
font-size:13px;
color:#666;
}


.faculty-meta span{
display:flex;
align-items:center;
justify-content:center;
gap:5px;
}


/* tablet */

@media(max-width:900px){

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

}


/* mobile */

@media(max-width:600px){

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

}