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

.hero-slider{
  position:relative;
  height:100vh;
  overflow:hidden;
  margin-top:138px;
}
header{
  margin-top:0 !important;
}

body{
  margin-top:0 !important;
  padding-top:0 !important;
}
.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:1.2s ease;
  transform:scale(1.05);
}

.slide.active{
  opacity:1;
  z-index:1;
  transform:scale(1);
}

.overlay{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
  180deg,
  rgba(0,0,0,0.55),
  rgba(0,0,0,0.75));
}

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

  height:100%;

  display:flex;
  flex-direction:column;

  justify-content:center;
  align-items:center;

  color:#fff;

  text-align:center;

  padding:20px;
}

.hero-content h1{

  font-size:78px;

  max-width:1000px;

  margin-bottom:25px;

  line-height:1.1;

  animation:fadeUp 1s ease;
}

.hero-content p{

  font-size:22px;

  max-width:750px;

  margin-bottom:35px;

  color:#e2e8f0;

  animation:fadeUp 1.2s ease;
}

.hero-buttons{

  display:flex;

  gap:20px;

  flex-wrap:wrap;

  animation:fadeUp 1.4s ease;
}

/* =========================
   ABOUT
========================= */

.about{
  background:#fff;
}

.about-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:80px;

  align-items:center;
}

.about-content h2{

  font-size:52px;

  margin-bottom:30px;
}

.about-content p{

  margin-bottom:22px;

  line-height:1.9;

  font-size:17px;
}

.about-image{
  position:relative;
}

.about-image::before{

  content:'';

  position:absolute;

  top:-20px;
  left:-20px;

  width:100%;
  height:100%;

  border-radius:32px;

  background:
  linear-gradient(
  135deg,
  #6C3BFF,
  #8B5CFF);

  z-index:-1;
}

.about-image img{

  border-radius:30px;

  box-shadow:
  0 30px 60px rgba(0,0,0,0.12);

  object-fit:cover;
}

/* =========================
   COURSE
========================= */

.course{
  background:#f8fafc;
}

.course h2{
  text-align:center;
  margin-bottom:70px;
}

.course-grid{

  display:grid;

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

  gap:35px;
}

.course-card{

  background:#fff;

  padding:45px 35px;

  border-radius:30px;

  text-align:center;

  transition:0.4s ease;

  position:relative;

  overflow:hidden;

  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.course-card::before{

  content:'';

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:5px;

  background:
  linear-gradient(
  90deg,
  #6C3BFF,
  #8B5CFF);
}

.course-card:hover{

  transform:
  translateY(-12px);

  box-shadow:
  0 25px 50px rgba(108,59,255,0.12);
}

.course-card i{

  width:90px;
  height:90px;

  margin:auto;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
  rgba(108,59,255,0.08);

  color:#6C3BFF;

  font-size:36px;

  margin-bottom:25px;
}

.course-card h3{
  margin-bottom:12px;
}

/* =========================
   PRINCIPAL
========================= */

.faculty{
  background:#fff;
}

.faculty h2{
  text-align:center;
  margin-bottom:70px;
}

.faculty-card{

  background:#fff;

  border-radius:35px;

  overflow:hidden;

  box-shadow:
  0 20px 50px rgba(0,0,0,0.08);

  transition:0.4s ease;

  max-width:900px;

  margin:auto;
}

.faculty-card:hover{

  transform:translateY(-10px);
}

.faculty-card img{

  width:100%;
  height:620px;

  object-fit:cover;

  object-position:top;
}

.faculty-card h3{

  margin-top:30px;

  font-size:34px;
}

.faculty-card p{

  padding:25px 35px;

  color:#475569;

  line-height:1.9;
}

/* PRINCIPAL TEXT */

.principal-text{
  transition:0.4s;
  overflow:hidden;
}

.principal-text.collapsed{
  max-height:180px;
  position:relative;
}

.principal-text.collapsed::after{

  content:'';

  position:absolute;

  left:0;
  bottom:0;

  width:100%;
  height:80px;

  background:
  linear-gradient(
  transparent,
  #fff);
}

.read-more-btn{

  margin-bottom:35px;

  border:none;

  background:
  linear-gradient(
  135deg,
  #6C3BFF,
  #8B5CFF);

  color:#fff;

  padding:14px 30px;

  border-radius:100px;

  cursor:pointer;

  font-weight:600;

  transition:0.3s;
}

.read-more-btn:hover{

  transform:translateY(-4px);
}

/* =========================
   WHY CHOOSE
========================= */

.why-us{

  background:
  linear-gradient(
  180deg,
  #f8fafc,
  #ffffff);
}

.why-us h2{

  text-align:center;

  margin-bottom:70px;
}

.why-grid{

  display:grid;

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

  gap:30px;
}

.why-card{

  background:
  linear-gradient(
  135deg,
  #6C3BFF,
  #8B5CFF);

  color:#fff;

  padding:50px 35px;

  border-radius:28px;

  text-align:center;

  transition:0.4s ease;

  position:relative;

  overflow:hidden;
}

.why-card::before{

  content:'';

  position:absolute;

  inset:0;

  background:
  radial-gradient(
  circle at top right,
  rgba(255,255,255,0.3),
  transparent 40%);
}

.why-card:hover{

  transform:
  translateY(-10px)
  scale(1.03);
}

.why-card i{

  font-size:55px;

  margin-bottom:25px;
}
.why-card p{

  color:rgba(255,255,255,0.88);

  margin-top:15px;

  font-size:16px;

  line-height:1.8;

}
.why-card h3{

  color:#fff;

  margin-bottom:12px;

}
/* =========================
   GALLERY
========================= */

.gallery-preview{
  background:#fff;
}

.gallery-preview h2{

  text-align:center;

  margin-bottom:70px;
}

.gallery-grid{

  display:grid;

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

  gap:25px;
}

.gallery-grid a{

  border-radius:24px;

  overflow:hidden;

  position:relative;
}

.gallery-grid img{

  height:300px;

  object-fit:cover;

  transition:0.5s ease;
}

.gallery-grid a:hover img{

  transform:scale(1.08);
}

.gallery-btn{
  text-align:center;
  margin-top:50px;
}

/* =========================
   FAQ
========================= */

.faq{
  background:#f8fafc;
}

.faq h2{

  text-align:center;

  margin-bottom:60px;
}

.faq-item{

  background:#fff;

  margin-bottom:24px;

  border-radius:22px;

  overflow:hidden;

  box-shadow:
  0 10px 30px rgba(0,0,0,0.05);
}

.faq-question{

  width:100%;

  padding:28px;

  background:none;

  border:none;

  text-align:left;

  font-size:18px;

  font-weight:600;

  cursor:pointer;

  color:#0f172a;
}

.faq-answer{

  max-height:0;

  overflow:hidden;

  transition:max-height 0.4s ease;

  padding:0 28px;

}

.faq-answer p{

  padding-bottom:22px;

  color:var(--text-light);

}
.faq-item.active .faq-answer{

  max-height:300px;

}
/* =========================
   CONTACT
========================= */

.contact{

  background:
  linear-gradient(
  135deg,
  #0f172a,
  #020617);

  color:#fff;
}

.contact-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:70px;

  align-items:center;
}

.contact-info h2{

  font-size:58px;

  margin-bottom:25px;
}

.contact-info p{

  color:#CBD5E1;

  font-size:17px;
}

.contact-details{

  margin-top:35px;
}

.contact-details p{

  margin-bottom:18px;

  display:flex;

  align-items:center;

  gap:12px;
}

.contact-details i{

  color:#8B5CFF;
}

.contact-form{

  background:
  rgba(255,255,255,0.95);

  backdrop-filter:blur(18px);

  padding:45px;

  border-radius:35px;

  box-shadow:
  0 25px 60px rgba(0,0,0,0.25);
}

.contact-form input,
.contact-form select,
.contact-form textarea{

  width:100%;

  padding:18px;

  margin-bottom:20px;

  border:1px solid #dbe2ea;

  border-radius:16px;

  font-family:'Poppins',sans-serif;

  transition:0.3s;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

  outline:none;

  border-color:#6C3BFF;

  box-shadow:
  0 0 0 4px rgba(108,59,255,0.12);
}

.contact-form textarea{

  height:160px;

  resize:none;
}

/* =========================
   VIDEO SECTION
========================= */

.video-section{
  background:#fff;
}

.video-section h2{

  text-align:center;

  margin-bottom:60px;
}

.video-grid{

  display:grid;

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

  gap:30px;
}
.video-grid{

  display:grid;

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

  gap:30px;

}

.video-card{

  position:relative;

  border-radius:28px;

  overflow:hidden;

  display:block;

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

  transition:0.4s ease;

}

.video-card:hover{

  transform:translateY(-8px);

}

.video-card img{

  width:100%;

  height:260px;

  object-fit:cover;

  display:block;

}

.video-overlay{

  position:absolute;

  inset:0;

  background:
  linear-gradient(
  180deg,
  rgba(0,0,0,0.15),
  rgba(0,0,0,0.55));

  display:flex;

  align-items:flex-end;

  gap:20px;

  padding:25px;

  color:#fff;

}

.video-overlay i{

  width:70px;
  height:70px;

  border-radius:18px;

  background:#ff0000;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:28px;

  flex-shrink:0;

}

.video-overlay h3{

  font-size:28px;

  margin-bottom:4px;

}

.video-overlay p{

  color:#fff;

  font-size:18px;

}
/* =========================
   ANIMATION
========================= */

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(40px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

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

@media(max-width:992px){

.hero-content h1{
  font-size:56px;
}

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

.faculty-card img{
  height:480px;
}

}

@media(max-width:768px){

.hero-slider{
  min-height:calc(100vh - 138px);
}

.hero-content h1{
  font-size:40px;
}

.hero-content p{
  font-size:18px;
}

.hero-buttons{
  flex-direction:column;
}

.about-content h2,
.course h2,
.faculty h2,
.why-us h2,
.faq h2,
.contact-info h2,
.video-section h2{
  font-size:34px;
}

.about-grid{
  gap:50px;
}

.course-grid,
.why-grid,
.gallery-grid,
.video-grid{
  grid-template-columns:1fr;
}

.course-card,
.why-card{
  padding:35px 25px;
}

.faculty-card img{
  height:340px;
}

.contact-form{
  padding:30px;
}

}
.hero-tag{

  display:inline-block;

  padding:10px 22px;

  border-radius:100px;

  background:
  rgba(255,255,255,0.12);

  border:
  1px solid rgba(255,255,255,0.2);

  backdrop-filter:blur(12px);

  color:#fff;

  font-size:14px;

  font-weight:600;

  letter-spacing:1px;

  margin-bottom:25px;
}

/* LEFT ALIGN TITLE */

.section-title.left{
  text-align:left;
  margin-bottom:30px;
}

/* ABOUT BUTTONS */

.about-buttons{
  display:flex;
  gap:20px;
  margin-top:35px;
  flex-wrap:wrap;
}

/* DARK BUTTON */

.dark{
  border:2px solid #dbe2ea;
  color:#0f172a;
}

.dark:hover{
  background:#6C3BFF;
  border-color:#6C3BFF;
  color:#fff;
}

/* FACULTY CONTENT */

.faculty-content{
  padding:10px 15px 35px;
}

/* COURSE ICON */

.course-icon{
  margin-bottom:20px;
}

/* =========================
ACCREDITATION SECTION
========================= */

.accreditation{
  background:#fff;
}

/* TITLE CENTER CLEAN LOOK */
.accreditation .section-title{
  text-align:center;
  margin-bottom:50px;
}

.accreditation .section-title span{
  color:#6c2bd9;
  font-weight:600;
  letter-spacing:1px;
}

/* GRID FIX (MAIN FIX) */
.accreditation-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:30px;
  align-items:center;
  justify-items:center;
}

/* CARD STYLE */
.accreditation-card{
  background:#fff;
  padding:20px;
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  width:100%;
  max-width:180px;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:0.3s ease;
}

/* IMAGE FIX */
.accreditation-card img{
  width:100%;
  height:80px;
  object-fit:contain;
}

/* HOVER EFFECT */
.accreditation-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(108,59,255,0.2);
}

/* MOBILE FIX */
@media(max-width:768px){

  .accreditation-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
  }

  .accreditation-card{
    max-width:100%;
  }

}
/* ACCREDITATION TEXT */

.accreditation-card p{

  margin-top:15px;

  text-align:center;

  font-size:14px;

  font-weight:600;

  color:#1e293b;

  line-height:1.5;

}