/* ================= GLOBAL ================= */
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: #f4f6f8;
  color: #1e293b;

}

a {
  text-decoration: none;
  color: inherit;
   font-size:25px;
}

ul {
   
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ================= HEADER ================= */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 55px;
  z-index: 999;
  background: linear-gradient(270deg, #FFD539, #FF6B6B, #FFD539);
  background-size: 600% 600%;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: 0.4s;
  padding: 18px 0;
  animation: gradientBG 12s ease infinite;
}

@keyframes gradientBG {
  0% {background-position:0% 50%;}
  50% {background-position:100% 50%;}
  100% {background-position:0% 50%;}
}

.header.scrolled {
  padding: 10px 0;
  background: #fff;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
}

.container-xl {
  width: 90%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 800;
  font-size: 24px;
  color: #0f172a;
  transition: 0.3s;
}

.logo img {
  width: 70px;
  border-radius: 50%;
  transition: transform 0.4s;
  object-fit: cover;
}

.logo img:hover {
  transform: scale(1.08);
}




/* ================= MENU ================= */
.navmenu-dropdown {
  position: relative; /* inline by default on laptop */
  display: flex;
  gap: 20px;
  z-index: 1000;
}

.navmenu-dropdown a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 600;
  color: #3b82f6;
  transition: all 0.3s ease;
}

.navmenu-dropdown a:hover,
.navmenu-dropdown a.active {
  background: #3b82f6;
  color: #fff;
}

/* ================= HAMBURGER (3 dots) ================= */
.hamburger {
  display: none; /* hidden on laptop */
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 16px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 1001;
}

.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #3b82f6;
  border-radius: 2px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
  .hamburger {
    display: flex; /* show hamburger on mobile */
  }

  .navmenu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  }

  .navmenu-dropdown.open {
    max-height: 500px;
  }

  .navmenu-dropdown a {
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 20px;
  }

  .navmenu-dropdown a:last-child {
    border-bottom: none;
  }
}

/* ================= HERO ================= */
.hero {
  width: 100%;
  height: 140vh; /* tall on desktop/laptop */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  overflow: hidden;
  padding: 0 20px;
  margin-top: 0; /* adjust if header is fixed */
}

/* ================= MOBILE / SMALL SCREENS ================= */
@media (max-width: 767px) {
  .hero {
    height: 100vh; /* smaller height on phones */
    padding: 0 15px;
  }

  .hero-content h2 {
    font-size: 2.5rem; /* scale down heading */
  }

  .hero-content p {
    font-size: 1.5rem;
  }

  .hero-content span {
    font-size: 1.2rem;
  }

  .main-btn {
    padding: 12px 30px;
    font-size: 16px;
  }
}


.hero-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease, transform 15s linear;
  z-index: 0;
  filter: brightness(0.75);
}

.hero-slider img.active {
  opacity: 1;
  animation: zoomIn 15s linear infinite;
}

@keyframes zoomIn {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
}

.hero-content p {
  font-size: 2rem;
  letter-spacing: 2px;
  font-weight: 500;
  margin: 0 0 12px 0;
  color: #fcd34d;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

.hero-content h2 {
  font-size: 4rem;
  font-weight: 900;
  margin: 10px 0;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 6px 25px rgba(0, 0, 0, 0.6);
}

.hero-content span {
  font-size: 1.5rem;
  font-weight: 600;
  color: #a5b4fc;
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
}

.main-btn {
  display: inline-block;
  margin-top: 25px;
  padding: 14px 50px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 50px;
  color: white;
  background: #3b82f6;
  box-shadow: 0 4px 18px rgba(59, 130, 246, 0.6);
  transition: all 0.3s ease;
}

.main-btn:hover {
  transform: scale(1.07);
  box-shadow: 0 0 36px rgba(59, 130, 246, 0.8);
}
/* Dropdown container */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Fees button */
.dropbtn {
  cursor: pointer;
  font-weight: 600;
  color: #000;
  text-decoration: none;
  padding: 8px 12px;
  display: inline-block;
}

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 180px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
  z-index: 1000;
  top: 100%;
}

.dropdown-content a {
  color: #000;
  padding: 12px 20px;
  display: block;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.3s ease;
}

.dropdown-content a:hover {
  background-color: #f0f4f8;
}

/* Show dropdown on hover (desktop) */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Mobile support: show dropdown on click */
@media (max-width: 991px) {
  .dropdown-content {
    position: relative;
    top: 0;
    display: none; /* initially hidden */
  }

  .dropdown.active .dropdown-content {
    display: block;
  }
}/* ================= GLOBAL SECTIONS ================= */
section {
  padding: 60px 40px; /* reduced top/bottom padding */
  margin-bottom: 0;
  box-sizing: border-box;
  position: relative;
}

/* ================= FIRST SECTION ================= */
section:first-of-type {
  background-color: #f0f4f8; /* distinct light background */
  padding: 80px 40px; /* a bit more padding for hero feel */
  color: #000; /* text black */
}

/* subtle shadow/fade at bottom of first section */
section:first-of-type::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /* height of the fade */
  background: linear-gradient(to bottom, rgba(240,244,248,0) 0%, rgba(240,244,248,1) 100%);
  pointer-events: none;
}


section {
  padding: 60px 40px;
  margin-bottom: 40px;
  position: relative;
  box-sizing: border-box;
  background-color: yelelow;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  font-size: 18px; /* base font size for section text */
  line-height: 1.8; /* improved readability */
  
}



/* ================= SECTION TITLES ================= */
.section-title {
  text-align: center;
  margin-bottom: 40px;
}

.section-title h1 {
  font-size: 44px; /* larger font for headings */
  font-weight: 700;
  color: #000; /* black text */
  line-height: 1.2;
}

/* ================= SERVICE / ITEM BOXES ================= */
.service-item {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border: 1.8px solid #e6e6e6;
  border-radius: 16px;
  padding: 30px;
  height: 100%;
  transition: all 0.4s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  gap: 20px;
  margin: 15px 0; /* reduced vertical spacing */
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.service-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.12);
}

/* ================= ICONS ================= */
.service-item i.icon {
  font-size: 38px;
  color: #f4c430;
  flex-shrink: 0;
  transition: transform 0.3s ease, color 0.3s ease;
}

.service-item:hover i.icon {
  transform: scale(1.2);
  color: #3b82f6;
}

/* ================= TITLE ================= */
.service-item h4.title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #000;
  line-height: 1.3;
}

.service-item h4.title a {
  color: #000;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

.service-item h4.title a:hover {
  color: #3b82f6;
  transform: translateX(3px);
}

/* ================= DESCRIPTION ================= */
.service-item p.description {
  font-size: 17px;
  line-height: 1.75;
  color: #000;
  margin: 0;
}

/* ================= ROW LAYOUT ================= */
.row.gy-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 30px; 
  justify-content: space-between;
}

.row.gy-4 .col-md-6 {
  flex: 0 0 48%;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
  section {
    padding: 50px 20px;
  }

  .row.gy-4 {
    flex-direction: column;
    gap: 25px;
  }

  .row.gy-4 .col-md-6 {
    flex: 0 0 100%;
  }

  .service-item {
    flex-direction: row;
    align-items: flex-start;
    margin: 10px 0;
  }

  .service-item i.icon {
    font-size: 32px;
    margin-right: 15px;
  }
}

/* ================= SECTION HEADINGS ================= */
section h1, section h2 {
  color: #000;
  font-weight: 700;
}

/* ================= LINKS ================= */
section a {
  color: #3b82f6;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

section a:hover {
  color: #1e40af;
}

/* ================= EXTRA BOX EFFECTS ================= */
.service-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #3b82f6, #06b6d4);
  border-radius: 16px 0 0 16px;
}














section {
  background-color: #E6A800; /* warm yellow-gold for all sections */
  padding: 80px 40px;
}

/* SECTION TITLE */
section .section-title h1,
section .main-heading {
  color: #ffffff;
  font-size: 46px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 20px;
}

section .section-title p {
  color: #ffffff;
  font-size: 20px;
  line-height: 1.7;
}

/* SERVICE / ITEM BOX */
section .service-item {
  background-color: rgba(0, 0, 0, 0.25); /* dark overlay for contrast */
  border: none;
  border-radius: 18px;
  padding: 35px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* HOVER EFFECT */
section .service-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.3);
}

/* ICONS */
section .service-item .icon {
  font-size: 40px;
  color: #ffffff;
  margin-right: 20px;
}

/* TITLES */
section .service-item .title,
section .service-item .title a {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
}

/* DESCRIPTION TEXT */
section .service-item .description {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.8;
}

/* REMOVE INLINE WHITE BACKGROUNDS */
section .service-item[style*="background:white"] {
  background-color: rgba(0, 0, 0, 0.25) !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  section {
    padding: 60px 20px;
  }

  section .main-heading {
    font-size: 36px;
  }

  section .service-item .title {
    font-size: 22px;
  }

  section .service-item .description {
    font-size: 17px;
  }
}


  /* ================================
   SERVICE ITEM BOXES
================================ */
.service-item {
  background: #ffffff;
  border: 1.8px solid #e6e6e6;
  border-radius: 14px;
  padding: 28px;
  transition: all 0.3s ease;
}

/* Hover effect */
.service-item:hover {
  border-color: #f4c430; /* soft school gold */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}

/* ================================
   ICON STYLING
================================ */
.service-item .icon {
  font-size: 40px;
  color: #f4c430;
  margin-right: 20px;
  line-height: 1;
}

/* ================================
   TITLE STYLING
================================ */
.service-item .title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #2c2c2c;
}

.service-item .title a {
  color: inherit;
  text-decoration: none;
}

.service-item .title a:hover {
  color: #f4c430;
}

/* ================================
   DESCRIPTION TEXT
================================ */
.service-item .description {
  font-size: 15.5px;
  line-height: 1.7;
  color: #555555;
}

/* ================================
   MAIN HEADING
================================ */
.main-heading {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 50px;
  color: #1f2937;
}

/* ================================
   RESPONSIVE ADJUSTMENTS
================================ */
@media (max-width: 768px) {
  .service-item {
    padding: 22px;
  }

  .service-item .icon {
    font-size: 34px;
    margin-right: 15px;
  }

  .service-item .title {
    font-size: 18px;
  }
}
/* GENERAL SERVICE ITEM FOR ALL SECTIONS */
section .service-item {
  background-color: rgba(0, 0, 0, 0.25) !important; /* override inline white background */
  border: none !important;
  border-radius: 18px !important;
  padding: 35px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: #fff !important;
}

/* HOVER EFFECT */
section .service-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.3) !important;
}

/* ICONS */
section .service-item .icon,
section .service-item i {
  font-size: 40px !important;
  color: #ffffff !important;
  margin-right: 20px !important;
}

/* TITLES */
section .service-item .title,
section .service-item .title a,
section .service-item h4 {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* DESCRIPTION TEXT */
section .service-item .description,
section .service-item p {
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
}

/* Make all <li> in sections white */
section li {
  color: #ffffff; /* white text */
  font-size: 16px; /* optional: adjust size */
  line-height: 1.6; /* optional: spacing between items */
}












  /* Make portfolio images same size */
.portfolio-content img {
    width: 100%;
    height: 260px;          /* Adjust height as you prefer */
    object-fit: cover;      /* Crops image neatly */
    border-radius: 8px;     /* Optional – remove if you want sharp edges */
}

/* Make the portfolio item container consistent */
.portfolio-item {
    display: flex;
    flex-direction: column;
}

.portfolio-content {
    height: 100%;
}



 
  

      
 
      /* TEAM SecTION – Consistent Image Sizes */
.team .member .pic {
    width: 100%;
    height: 330px;                 /* Set uniform height */
    overflow: hidden;
    border-radius: 15px;           /* Smooth rounded corners */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Images inside */
.team .member .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;             /* Makes all same size without distortion */
    transition: transform 0.4s ease;
}

/* Hover Zoom Animation */
.team .member:hover .pic img {
    transform: scale(1.15);        /* Zoom effect */
}

.team .member:hover .pic {
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    transform: translateY(-6px);   /* Lift card slightly */
}

/* Member info styling */
.team .member-info {
    text-align: center;
    margin-top: 15px;
}

.team .member-info h4 {
    font-size: 20px;
    font-weight: 700;
}

.team .member-info span {
    font-size: 15px;
    color: #666;
}

/* Social icons */
.team .social a {
    margin: 0 6px;
    color: #555;
    transition: color 0.3s ease, transform 0.3s ease;
}

.team .social a:hover {
    color: #007aff;                /* Blue highlight */
    transform: scale(1.25);
}