/* ---------- Navbar base (light) ---------- */
#mainNavbar {
  transition: padding 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
  padding-top: 18px;
  padding-bottom: 18px;
  background-color: rgba(255,255,255,0.98);
  backdrop-filter: blur(4px);
  z-index: 1030;
}

/* Logo: bigger visible width with fixed height */
.navbar-logo {
  height: 64px;          /* big default for desktop */
  width: 240px;          /* visually wide for square logo */
  max-width: 44%;
  object-fit: contain;
  transition: height 220ms ease, width 220ms ease, filter 220ms ease;
}

/* Nav link styles (light) */
#mainNavbar .nav-link {
  color: #333 !important;
  font-weight: 500;
  padding-left: 12px;
  padding-right: 12px;
}

/* Button style (Join Now) */
#mainNavbar .btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
  box-shadow: none;
  border-radius: 6px;
}

/* Dropdown */
#mainNavbar .dropdown-menu {
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  min-width: 220px;
}

/* ---------- Shrink state ---------- */
#mainNavbar.navbar-shrink {
  padding-top: 8px;
  padding-bottom: 8px;
  box-shadow: 0 6px 18px rgba(20,20,20,0.06);
  background-color: rgba(255,255,255,0.98);
}

/* Shrunk logo */
#mainNavbar.navbar-shrink .navbar-logo {
  height: 40px;           /* reduced height */
  width: 140px;           /* reduced width */
  max-width: 160px;
}

/* Mobile adjustments */
@media (max-width: 767.98px) {
  #mainNavbar {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar-logo {
    height: 44px;
    width: 160px;
    max-width: 60%;
  }
  #mainNavbar.navbar-shrink .navbar-logo {
    height: 36px;
    width: 120px;
  }
}

/* ---------- HERO SECTION ---------- */
.hero-section {
  padding: 130px 0 90px;
  background: linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  width: 100%;
}

/* FLEX WRAPPER FIX */
.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

@media (min-width: 992px) {
  .hero-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* LEFT SIDE */
.hero-left {
  flex: 1 1 50%;
  z-index: 50; /* Guarantees left side ABOVE everything */
  position: relative;
}

/* RIGHT SIDE */
.hero-right {
  flex: 0 0 420px;
  height: 420px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  /* preventing overlap even if icons break layout */
  overflow: hidden;
  z-index: 1;
}

/* CIRCLE CENTER */
.circle-wrap {
  width: 380px;
  height: 380px;
  position: relative; /* ICONS ARE CONFINED INSIDE THIS */
}

/* Glow */
.glow-circle {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle,#dcefff,#c5dbff,transparent);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  filter: blur(5px);
}

/* ICON STYLE */
.icon {
  position: absolute;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.92);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  opacity: 0; /* will fade in with GSAP */
  font-size: 32px; /* icon size */
  color: #1e293b; /* dark blue-gray stroke */
}

/* FIXED SAFE POSITIONS WITHIN CIRCLE */
.icon-python   { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.icon-ai       { top: 12%; left: 30%; }
.icon-html     { top: 4%; left: 50%; }
.icon-postgres { top: 65%; left: 15%; }
.icon-css      { top: 25%; left: 75%; }
.icon-django   { top: 80%; left: 42%; }
.icon-docker   { top: 72%; left: 70%; }
.icon-js       { top: 50%; left: 68%; }
.icon-git      { top: 35%; left: 12%; }

/* Brand-colored badges */
.icon-python   { background:#fcd34d; color:#1e293b; }
.icon-ai       { background:#a855f7; color:#ffffff; }
.icon-django   { background:#0c4b33; color:#ffffff; }
.icon-postgres { background:#336791; color:#ffffff; }
.icon-docker   { background:#ffffff; color:#000000; }
.icon-html     { background:#e34f26; color:#ffffff; }
.icon-css      { background:#1572b6; color:#ffffff; }
.icon-js       { background:#f7df1e; color:#000000; }
.icon-git      { background:#f05133; color:#ffffff; }

/* Mobile */
@media (max-width: 575px) {
  .hero-right { flex: 0 0 300px; height: 300px; }
  .circle-wrap { width: 260px; height: 260px; }
  .icon { width: 48px; height: 48px; }
}

/* WHY CHOOSE SECTION */
.why-choose {
  background: #f0f8ff;
}

.section-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: #0b1720;
}

.section-title span {
  color: #0d6efd;
}

/* Cards */
.why-card {
  background: #ffffff;
  padding: 28px 24px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: all 0.28s ease;
  height: 100%;
}

/* Hover */
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
}

/* Icon Circle */
.why-icon {
  width: 64px;
  height: 64px;
  background: #f0f8ff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.why-icon i {
  font-size: 32px;
  color: #0d6efd;
}

.why-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #0b1720;
}

.why-desc {
  color: #556270;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Top Programs section stays white */
.top-programs {
  background: #ffffff;
}

/* Outer toggle container */
.mode-toggle-wrapper {
  width: 100%;
  text-align: center; /* centers child inline elements */
}

.mode-toggle {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #000;
  border-radius: 50px;
  padding: 4px;
}

/* Individual buttons */
.mode-btn {
  padding: 6px 20px;
  font-size: 0.9rem;
  border-radius: 50px;
  border: none;
  background: transparent;
  color: #000000;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Selected (active) state */
.mode-btn.active {
  background: #0d6efd;
  color: #ffffff;
  border: none !important;
}

/* Discount badge */
.discount-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #ff4757;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 50px;         /* smooth pill shape */
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
  z-index: 10;
  letter-spacing: 0.4px;
}

/* Make sure program-card has position relative */
.program-card {
  position: relative;  
}

/* Card base */
.program-card {
  background: #ffffff;
  padding: 26px 22px;
  padding-top: 60px; /* extra space to keep title away from badge */
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  border: 1px solid rgba(15, 23, 42, 0.04);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.program-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

/* Title and subtitle */
.program-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: #0b1720;
}

.program-subtitle {
  font-size: 0.95rem;
  color: #64748b;
  margin-bottom: 12px;
}

/* Price block – centered and aligned same across cards */
.program-price {
  text-align: center;
  margin-bottom: 14px;
}

.program-price .actual-price {
  font-size: 0.85rem;
  color: #64748b;
  text-decoration: line-through;
  display: block;
  margin-bottom: 2px;
}

.program-price .offer-price {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0d6efd;
  display: block;
}

/* Offer price styling */
.offer-price {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
}

/* Smaller ₹ icon */
.offer-price .price-icon {
  font-size: 0.85rem;        /* smaller icon */
  margin-right: 3px;
  color: #0d6efd;
  transform: translateY(-1px); /* aligns baseline perfectly */
}

/* Bigger price value */
.offer-price .price-value {
  font-size: 1.55rem;        /* bigger value */
  font-weight: 700;
  color: #0d6efd;
  line-height: 1;
}

/* Bullet list – flex-grow so footer stays aligned */
.program-points {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;              /* pushes footer to bottom */
}

.program-points li {
  display: flex;
  align-items: flex-start;
  font-size: 0.94rem;
  color: #475569;
  margin-bottom: 8px;
}

.program-points li i {
  font-size: 0.9rem;
  color: #16a34a;
  margin-right: 8px;
  margin-top: 3px;
}

/* Footer with View Details + Join Now aligned equally across cards */
.program-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;          /* consistent spacing above footer */
}

/* Blue border card */
.pricing-card {
  border: 2px solid #0ea5e9 !important;  /* strong blue border */
  border-radius: 16px;
}

/* Top strip element */
.card-top-strip {
  position: absolute;
  top: -2px;              /* align with border */
  left: 0;
  right: 0;
  height: 32px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

/* blue or any accent color */
.bg-blue {
  background-color: #0ea5e9;
}

/* Optional: make Join Now button slightly compact */
.program-footer .btn {
  padding-inline: 16px;
}

/* Additional Info Section Section */
.additional-info-1 {
  background: #f3f6fb; /* contrasting background */
}

/* Additional Info Section (White Background) */
.additional-info-2 {
  background: #ffffff;
}

/* Additional Info Section (Light Gray Background) */
.additional-info-3 {
  background: #f2f3f6; /* clean light gray */
}

/* Additional Info Section (Light Pastel Background) */
.additional-info-4 {
  background: #cbe0fd;
}

.learning-text {
  font-size: 1rem;
  line-height: 1.7;
  color: #475569;
}

/* Subtitle */
.add-info-subtitle {
  max-width: 720px;
  font-size: 1rem;
  color: #475569;
  line-height: 1.6;
}

/* Bullet list styling */
.extra-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}

.extra-bullets li {
  display: flex;
  align-items: flex-start;
  font-size: 1rem;
  color: #334155;
  margin-bottom: 12px;
}

.extra-bullets li i {
  font-size: 1.1rem;
  color: #0d6efd;
  margin-right: 10px;
  margin-top: 2px;
}

/* ---------- INNER PAGE HERO SECTION ---------- */
.inner-hero-section {
  padding: 130px 0 0;      /* space under navbar, no bottom padding */
  background: #ffffff;
  width: 100%;
  margin: 0;               /* no gap below section */
}

/* Main layout wrapper */
.inner-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 420px;        /* gives enough height for both sides */
  position: relative;
  z-index: 1;
}

/* Desktop: two columns, full-height stretch */
@media (min-width: 992px) {
  .inner-hero-inner {
    flex-direction: row;
    align-items: stretch;    /* both columns span from top to bottom */
    justify-content: space-between;
  }
}

/* LEFT SIDE: spans full height of inner hero section */
.inner-hero-left {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 80px;
}

/* Inner wrapper to vertically center content but still respect full height */
.inner-hero-left-inner {
  margin-top: auto;
  margin-bottom: auto;      /* center block within full-height left column */
}

/* Title */
.inner-hero-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: #0b1720;
  line-height: 1.25;
}

@media (min-width: 992px) {
  .inner-hero-title {
    font-size: 2.3rem;
  }
}

/* Subtitle */
.inner-hero-subtitle {
  font-size: 1.05rem;
  color: #475569;
  margin-top: 16px;
  max-width: 620px;
  line-height: 1.6;
}

/* RIGHT SIDE: image connects with bottom of section */
.inner-hero-right {
  flex: 0 0 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* image at bottom */
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 5;
}

/* Image anchored visually to bottom */
.inner-hero-image {
  max-width: 420px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

/* Mobile + tablet */
@media (max-width: 991.98px) {
  .inner-hero-inner {
    min-height: auto;          /* let height flow on mobile */
  }

  .inner-hero-left { padding-top: 10px;}

  .inner-hero-right {
    flex: unset !important;     
    height: auto !important;
  }

  .inner-hero-left-inner,
  .inner-hero-title,
  .inner-hero-subtitle {
    text-align: center;
  }

  .inner-hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .inner-hero-right {
    justify-content: center;   /* image centered on small screens */
    margin-top: 20px;
  }

  .inner-hero-image {
    max-width: 320px;
  }
}

/* Section background */
.vision-mission-section {
  background: #f3f6fb; /* contrasting background */
}

/* Card style */
.vm-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
  height: 100%;
}

/* Titles */
.vm-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0b1720;
  margin-bottom: 16px;
}

/* Text */
.vm-text {
  font-size: 1rem;
  color: #475569;
  line-height: 1.7;
}

/* Mission List */
.vm-list {
  margin: 0;
  padding-left: 0;
  font-size: 1rem;
  color: #475569;
  line-height: 1.6;
}

.vm-list li {
  margin-bottom: 12px;
}

/* Checkmark icon color */
.vm-list i {
  color: #0ea5e9; /* bright modern blue */
  font-size: 1.2rem;
}

/* Mobile adjustments */
@media (max-width: 767.98px) {
  .vm-card {
    padding: 24px;
  }
  .vm-title {
    text-align: center;
  }
}

.faq-section .accordion-button {
  font-weight: 600;
  font-size: 1.05rem;
}

.faq-section .accordion-item {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid #dce3f0;
}

.faq-section .accordion-button:not(.collapsed) {
  background-color: #e8f3ff;
  color: #0b1720;
}

/* Contact section */
.contact-section {
  background: #ffffff;  
}

/* Heading and lead */
.contact-title {
  font-size: 2rem;
  font-weight: 700;
  color: #0b1720;
}

.contact-lead {
  font-size: 0.98rem;
  color: #4b5563;
}

/* Each row separated by subtle line */
.contact-row {
  padding: 18px 0;
  border-top: 1px solid #e5e7eb;
}

.contact-row:first-of-type {
  border-top: 1px solid #e5e7eb; /* keep top line like the reference */
}

/* Icon box */
.contact-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e6f8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d6efd;
  font-size: 1.3rem;
}

/* Label and main text */
.contact-label {
  font-size: 0.9rem;
  color: #9ca3af;
}

.contact-main {
  font-size: 0.98rem;
  color: #111827;
}

.custom-shadow-card {
  border: none;                       /* Remove border */
  background: #ffffff;                /* Pure white background */
  border-radius: 16px;                /* Smooth rounded corners */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); /* Soft shadow */
}

.custom-shadow-card:hover {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
  transition: 0.3s ease;
}

/* Footer CTA Section (White Background) */
.footer-cta {
  background: #ffffff;
}

.footer-cta-title {
  font-size: 1.9rem;
  color: #0b1720;
}

.footer-cta-subtitle {
  font-size: 1rem;
  color: #475569;
  line-height: 1.6;
}

/* Footer Base */
.yuvaa-footer {
  background: #0b1d39; /* dark blue */
  color: #ffffff;
}

.footer-logo-img {
  max-width: 160px;
  height: auto;
}

/* Titles */
.footer-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #ffffff;
}

/* Links */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: #cdd6e3;
  text-decoration: none;
  transition: 0.25s;
}

.footer-links a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Location title styling */
.footer-location-title {
  font-weight: 600;
  font-size: 1rem;
  color: #ffe066; /* yellow */
  margin-bottom: 4px;
}

/* Location icon */
.footer-location-title i {
  margin-right: 6px;
  color: #ffe066; /* yellow */
}

/* Address text */
.footer-address {
  color: #cdd6e3;
  line-height: 1.55;
  font-size: 0.95rem;
  margin: 0;
}

.footer-address a {
  color: #ffffff;
  text-decoration: none;
}

.footer-address a:hover {
  text-decoration: underline;
}

/* Social Icons */
.footer-social a {
  font-size: 1.2rem;
  color: #ffffff;
  margin-right: 18px;   /* increased gap */
  transition: 0.3s;
}

.footer-social a:last-child {
  margin-right: 0;  /* remove extra spacing on last icon */
}

.footer-social a:hover {
  color: #0d6efd;
}

/* Divider */
.footer-divider {
  border-color: rgba(255,255,255,0.2);
  margin-bottom: 1.2rem;
}

/* Copyright */
.footer-copy {
  font-size: 0.95rem;
}

/* Policy Links */
.footer-policy-links a {
  color: #cdd6e3;
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-policy-links a:hover {
  text-decoration: underline;
}