* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}


body {
  /* background: url("public/images/background.png") no-repeat center center/cover;
  background-attachment: fixed; */
  /* background: linear-gradient(90deg, #0A1030, #111C44); */
  background: transparent !important;
  background-attachment: fixed;
  font-family: 'Poppins', sans-serif;
  color: #333;
  line-height: 1.6;
  padding-top: 1.5rem;
}
#sparkleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;          /* Behind all content */
    pointer-events: none; /* Allow clicks through */
    background-color: #05051A;
}


@media(max-width:768px){
  body{
    text-align: justify; 
    text-justify: inter-word;
  }
}

.site-header {
  font-family: "Poppins", sans-serif;
  color: #333;
  position: relative;
  z-index: 1000;
  margin-bottom: 6rem;
}

/* === Top Bar === */
.site-header .top-bar {
  background-color: #0c2d57;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 50px;
  font-size: 14px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
  transition: top 0.4s ease;
}

.site-header .top-bar.hidden {
  top: -50px;
}

.site-header .top-left,
.site-header .top-right {
  display: flex;
  align-items: center;
}

.site-header .top-left span {
  margin-right: 8px;
  font-weight: 500;
}

.site-header .top-left a img {
  width: 18px;
  height: 18px;
  margin-left: 8px;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease;
}

.site-header .top-left a img:hover {
  transform: scale(1.1);
}

.site-header .top-right span {
  margin-left: 15px;
  font-weight: 400;
}

/* === Navbar === */
.site-header .navbar {
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 3%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0.15rem 0.625rem rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
  position: fixed;
  width: 100%;
  height: 13%;
  top: 45px;
  z-index: 1000;
  transition: top 0.4s ease;
  font-family: 'Roboto', 'Roboto Fallback';
}

.site-header .navbar.fixed {
  top: 0;
}
.site-header .navbar img {
  width: 2rem;
  height: auto;
  margin: 1rem;
}

.site-header .logo-heading-container {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.site-header .headingnames {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  margin-left: -3rem;
}

.site-header #gyantrix {
  background: linear-gradient(90deg, #ffb84d, #ffd700, #ff8c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.site-header #academy {
  color: rgb(19, 167, 220);
  margin-top: -1.5rem;
}

/* === Navbar Links === */
.site-header .navbar nav a {
  margin: 0 1rem;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s, transform 0.3s;
}

.site-header .navbar nav a:hover,
.site-header .dropdown button:hover {
  color: #e64520;
  transform: translateY(-2px);
}

/* === Dropdown === */
.site-header .dropdown {
  position: relative;
  display: inline-block;
}

.site-header .drop-btn {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.site-header .dropdown-content {
  display: none;
  position: absolute;
  background: #fff;
  flex-direction: column;
  z-index: 1000;
  top: 100%;
  left: 0;
  padding: 0.5rem 0;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.site-header .dropdown-content a {
  display: block;
  padding: 0.6rem 1rem;
  font-weight: 400;
  text-decoration: none;
  color: #333;
  transition: background 0.3s ease;
}

.site-header .dropdown-content a:hover {
  background-color: #f0f0f0;
}

.site-header .dropdown.open .dropdown-content {
  display: flex;
}

.site-header .dropdown .arrow {
  margin-left: 0.3rem;
  transition: transform 0.3s ease;
}

.site-header .dropdown.open .arrow {
  transform: rotate(180deg);
}

/* === Mobile Navbar === */
@media (max-width: 768px) {
  .site-header .top-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 12px;
    gap: 8px;
  }

  .site-header .top-left,
  .site-header .top-right {
    justify-content: center;
    flex-wrap: wrap;
  }

  .site-header .navbar {
    top: 72px;
  }

  .site-header .hamburger {
    display: block !important;
    border: none;
    color: #0c2d57;
    font-size: 2rem;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
  }

  .site-header .navbar nav {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #fff;
    padding: 0.5rem 0;
    border-top: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  .site-header .navbar nav.active {
    display: flex;
    animation: slideDown 0.4s ease forwards;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .site-header .navbar nav a,
  .site-header .dropdown {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #eee;
    text-align: center;
  }

  .site-header .dropdown-content {
    display: none;
    flex-direction: column;
    width: 80%;
    margin: 0.3rem auto;
    background: #f9f8fa;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  .site-header .dropdown.open .dropdown-content {
    display: flex;
    animation: slideDown 0.3s ease forwards;
  }

  .site-header .dropdown-content a {
    padding: 0.6rem 1rem;
    background-color: #f7f3fe;
    margin: 0.1rem 0;
    border-radius: 4px;
  }

  .site-header .dropdown-content a:hover {
    background: #0c2d57;
    color: #fff;
  }
}

/* === Desktop Navbar === */
@media (min-width: 769px) {
  .site-header .hamburger {
    display: none !important;
  }

  .site-header .navbar nav {
    display: flex !important;
    flex-direction: row;
    position: static;
    box-shadow: none;
  }
}


.hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 4rem 6rem;
  position: relative;
  margin-top: 2rem;
}

.hero-content {
  max-width: 600px;
}

.hero-content h1 {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
  /* color: goldenrod; */
  color: #66D6FF;
}

.hero-content h3 {
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
  color: #fff;
}

.highlight {
  color: #7B2CFF;
  font-weight: 600;
}


.hero-content p {
  font-size: 1rem;
  color: #fff;
  text-align: justify;
}
#com_name{
  font-weight: 1.3rem;
  font-weight: 550;
  margin-bottom: 0.8rem;
}
.company-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;              
  align-items: center;
  justify-content: center;
  margin: 1.2rem 0;         
}

.company-logos img {
  width: 90px;
  height: 35px;
  object-fit: contain;
  background-color: #fff;
  padding: 4px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.3s;
}



.course-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  justify-content: center;
  align-items: center;
  max-width: 500px;
  margin: 1.5rem 0;
}

.btn {
  width: 100%;                      
  font-size: 1.1rem;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  color: white;
  font-weight: 550;
  transition: 0.3s ease;
  text-decoration: none;
  text-align: center;
}

.blue { background: #007bff; }
.orange { background: #ff9800; }
.red { background: #f44336; }
.sky { background: #00bcd4; }

.blue:hover {
  box-shadow: 0 6px 15px rgba(0, 123, 255, 0.6);
  transform: translateY(-3px);
}

.orange:hover {
  box-shadow: 0 6px 15px rgba(255, 152, 0, 0.6);
  transform: translateY(-3px);
}

.red:hover {
  box-shadow: 0 6px 15px rgba(244, 67, 54, 0.6);
  transform: translateY(-3px);
}

.sky:hover {
  box-shadow: 0 6px 15px rgba(0, 188, 212, 0.6);
  transform: translateY(-3px);
}

/* Active (clicked or pressed) state */
.btn:active,
.btn.active {
  transform: scale(0.96);
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: #fff;
}

/* Active shadow colors */
.blue:active, .blue.active {
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.8), inset 0 0 10px rgba(0, 123, 255, 0.5);
}

.orange:active, .orange.active {
  box-shadow: 0 0 20px rgba(255, 152, 0, 0.8), inset 0 0 10px rgba(255, 152, 0, 0.5);
}

.red:active, .red.active {
  box-shadow: 0 0 20px rgba(244, 67, 54, 0.8), inset 0 0 10px rgba(244, 67, 54, 0.5);
}

.sky:active, .sky.active {
  box-shadow: 0 0 20px rgba(0, 188, 212, 0.8), inset 0 0 10px rgba(0, 188, 212, 0.5);
}

.hero-image {
  position: absolute;
  top: 40%;
  left: 75%;
}

.center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 160px;
      height: 160px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      overflow: hidden;
      z-index: 10;
      box-shadow: 0 0 25px ;
    }
    .center img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* === Orbit Base === */
    .orbit {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      transform-origin: center center;
    }

    /* === Orbit Rings === */
    .inner-orbit {
      width: 280px;
      height: 280px;
      animation: rotateInner 18s linear infinite reverse;
    }

    .outer-orbit {
      width: 420px;
      height: 420px;
      animation: rotateOuter 22s linear infinite;
    }

    /* === Orbit Logos === */
    .orbit img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: center center;
      border-radius: 50%;
      object-fit: contain;
      /* background: rgb(52, 57, 121); */
      background-color: #fff;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }

    .inner-orbit img {
      width: 36px;
      height: 36px;
      margin: -18px;
      padding: 0.3rem;
    }

    .outer-orbit img {
      width: 44px;
      height: 44px;
      margin: -22px;
      padding: 0.3rem;
    }

    /* === Equal Circular Spacing === */
    .inner-orbit img:nth-child(1) { transform: rotate(0deg) translate(120px) rotate(0deg); }
    .inner-orbit img:nth-child(2) { transform: rotate(40deg) translate(120px) rotate(-40deg); }
    .inner-orbit img:nth-child(3) { transform: rotate(80deg) translate(120px) rotate(-80deg); }
    .inner-orbit img:nth-child(4) { transform: rotate(120deg) translate(120px) rotate(-120deg); }
    .inner-orbit img:nth-child(5) { transform: rotate(160deg) translate(120px) rotate(-160deg); }
    .inner-orbit img:nth-child(6) { transform: rotate(200deg) translate(120px) rotate(-200deg); }
    .inner-orbit img:nth-child(7) { transform: rotate(240deg) translate(120px) rotate(-240deg); }
    .inner-orbit img:nth-child(8) { transform: rotate(280deg) translate(120px) rotate(-280deg); }
    .inner-orbit img:nth-child(9) { transform: rotate(320deg) translate(120px) rotate(-320deg); }

    .outer-orbit img:nth-child(1) { transform: rotate(0deg) translate(180px) rotate(0deg); }
    .outer-orbit img:nth-child(2) { transform: rotate(40deg) translate(180px) rotate(-40deg); }
    .outer-orbit img:nth-child(3) { transform: rotate(80deg) translate(180px) rotate(-80deg); }
    .outer-orbit img:nth-child(4) { transform: rotate(120deg) translate(180px) rotate(-120deg); }
    .outer-orbit img:nth-child(5) { transform: rotate(160deg) translate(180px) rotate(-160deg); }
    .outer-orbit img:nth-child(6) { transform: rotate(200deg) translate(180px) rotate(-200deg); }
    .outer-orbit img:nth-child(7) { transform: rotate(240deg) translate(180px) rotate(-240deg); }
    .outer-orbit img:nth-child(8) { transform: rotate(280deg) translate(180px) rotate(-280deg); }
    .outer-orbit img:nth-child(9) { transform: rotate(320deg) translate(180px) rotate(-320deg); }

    /* === Animations === */
    @keyframes rotateOuter {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }
    @keyframes rotateInner {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }



.stats {
  position: absolute;
  bottom: 3rem;
  right: 7.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;                
  text-align: center;                
}

.stat-box {
  background-color: #6a5acd;
  padding: 1rem 2rem;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  min-width: 160px;
  display: flex;
  flex-direction: column;     
  align-items: center;        
  justify-content: center;    
  text-align: center;
}

.stat-box h2 {
  color: #ffef4f;
  font-size: 1.8rem;       
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  text-align: center;
}

.stat-box p {
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0.3rem;
  color: #fff;
  line-height: 1.2;
  text-align: center;
}

/* === Tablet View (601px–897px) === */
@media (max-width: 897px) and (min-width: 601px) {
  .hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem;
    gap: 1.5rem;
  }

  .hero-content {
    max-width: 90%;
  }

  .hero-image {
    position: relative;
    top: auto;
    left: auto;
    width: 300px;
    height: 300px;
    margin: 1.5rem auto 0;
  }

  .center {
    width: 120px;
    height: 120px;
  }

  .inner-orbit {
    width: 120px;  
    height: 120px;
  }

  .outer-orbit {
    width: 180px;  
    height: 180px;
  }


  .inner-orbit img {
    width: 28px;
    height: 28px;
  }

  .outer-orbit img {
    width: 32px;
    height: 32px;
  }

  .course-buttons {
    margin-bottom: 3rem;
  }

  .stats {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 3.5rem;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }

  .stat-box {
    width: 150px;
    padding: 0.9rem 1.2rem;
  }
}

/* === Mobile View (below 600px) === */
@media (max-width: 600px) {
  .hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    gap: 1.2rem;
    margin-top: 7rem;
  }

  .hero-content h1 {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .hero-content h3 {
    font-size: 1rem;
  }

  .course-buttons {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-bottom: 4rem;
  }

  .hero-image {
    position: relative;
    top: auto;
    left: auto;
    width: 220px;
    height: 220px;
    margin: 2rem auto 0;
  }

  .center {
    width: 115px;
    height: 115px;
  }

  .inner-orbit {
    width: 110px;  
    height: 110px;
  }

  .outer-orbit {
    width: 160px; 
    height: 160px;
  }

  .inner-orbit img {
    width: 28px;
    height: 28px;
  }

  .outer-orbit img {
    width: 30px;
    height: 30px;
  }

  .stats {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 5rem;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .stat-box {
    width: 85%;
  }
}





.hamburger {
  display: none;
  font-size: 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
}

/* Contact Section */
.contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 8%;
  /* background: rgb(83, 174, 234); */
  gap: 2rem;
}

.form-section {
  flex: 1 1 40%;
  background: #f7f5ff;
  padding: 2rem;
  border-radius: 0.6rem;
}

form {
  display: flex;
  flex-direction: column;
}

form label {
  margin-top: 1rem;
  font-weight: 500;
}

.labelimg{
  width: 10%;
}

form input {
  padding: 0.6rem;
  margin-top: 0.3rem;
  border: 0.1rem solid #ccc;
  border-radius: 0.4rem;
}

form button {
  margin-top: 1rem;
  padding: 0.8rem;
  border: none;
  background: #4b3efc;
  color: white;
  border-radius: 0.4rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
}
.star{
    color: red;
}

.highlightbtn { 
  color: #007A86;
  font-size: 1.3rem;
  font-weight: 520;
}

.hgbtn {
  color: #007A86;
  font-size: 1.1rem;
}

.infosection {
  flex: 1 1 45%;
  margin-left: 5%;
  margin-top: 4rem;
  color: #fff;
}

.infosection h3 {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-top: 3rem;
  text-transform: uppercase;
  overflow: hidden;
}

/* VISIBLE WINDOW */
.course-slider {
  height: 3.2rem;      /* space for one line */
  overflow: hidden;
  position: relative;
}

/* FULL LIST */
.course-list {
  display: flex;
  flex-direction: column;
  animation: slideCourses 39s infinite;
}

/* Text style */
.course-list p {
  margin: 0;
  height: 3.2rem;
  line-height: 3.2rem;

  background-color: #66D6FF;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 13 items × 3 seconds = 39 seconds */
@keyframes slideCourses {
  0% { transform: translateY(0); }
  7.7% { transform: translateY(-3.2rem); }
  15.4% { transform: translateY(-6.4rem); }
  23.1% { transform: translateY(-9.6rem); }
  30.8% { transform: translateY(-12.8rem); }
  38.5% { transform: translateY(-16rem); }
  46.2% { transform: translateY(-19.2rem); }
  53.9% { transform: translateY(-22.4rem); }
  61.6% { transform: translateY(-25.6rem); }
  69.3% { transform: translateY(-28.8rem); }
  77% { transform: translateY(-32rem); }
  84.7% { transform: translateY(-35.2rem); }
  92.4% { transform: translateY(-38.4rem); }
  100% { transform: translateY(0); }
}

/* Mobile responsive */
@media (max-width: 480px) {
  .infosection h3 { font-size: 1.4rem; }
  .course-slider {
    height: 2.4rem;
  }
  .course-list p {
    height: 2.4rem;
    line-height: 2.4rem;
  }
}


.acrdt{
    background-color: white;
    padding: 1.5rem;
    margin-top: 1rem;

}
.acrdt p{
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
}

  .logo-slider {
      overflow: hidden;
      white-space: nowrap;
      width: 100%;
      background: #fff;
      padding: 20px 0;
      box-sizing: border-box;
    }

    /* Inner track that moves */
    .logo-track {
      display: flex;
      align-items: center;
      animation: scroll 25s linear infinite;
      width: max-content;
    }

    /* Each logo box */
    .logos {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 40px;
    }

    /* Logo images */
    .logos img {
      height: 60px;
      width: auto;
      object-fit: contain;
      vertical-align: middle;
      transition: transform 0.3s ease;
    }

    /* Optional hover zoom effect */
    .logos img:hover {
      transform: scale(1.1);
    }

    /* Scroll animation */
    @keyframes scroll {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-50%);
      }
    }

    @media (max-width: 992px) {
  .acrdt p {
    font-size: 1.1rem;
  }

  .logos {
    margin: 0 8px; /* ⬅️ smaller spacing */
  }

  .logos img {
    height: 50px;
  }

  .logo-track {
    animation-duration: 30s;
  }
}

/* Mobile View */
@media (max-width: 600px) {
  .acrdt {
    padding: 1rem;
  }

  .acrdt p {
    font-size: 1rem;
    line-height: 1.4;
  }

  .logos {
    margin: 0 5px; /* ⬅️ tighter gap on mobile */
  }

  .logos img {
    height: 40px;
  }

  .logo-track {
    animation-duration: 35s;
  }
}

/* Very Small Devices */
@media (max-width: 400px) {
  .logos {
    margin: 0 8px;
  }

  .logos img {
    height: 32px;
  }

  .logo-track {
    animation-duration: 40s;
  }
}
/* 
.unlock{
  display: flex;
  align-items: center; 
  justify-content: space-between;
  padding: 30px 50px;
  margin-top: -1.5rem;
  /* gap: 400px;  
}
.unlock.sec1{
  flex: 1;
}
.unlock.sec1 h1{
  font-size: 2rem;
  /* margin-bottom: 3rem; 
}
.unlock.sec1 p{
  margin: 2.5rem;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 3rem;
}
.unlock.sec2{
  flex: 1;
}
.unlock img {
  width: 80vh;
  padding: 3rem;
}
.unlock img{
  border-radius: 4rem;
} */
.sec1 p{
  margin-bottom: 2rem;
}

.sec1 a{
  text-decoration: none;
  font-size: 1.2rem;
  border: 0.1rem #000 solid;
  padding: 0.5rem;
  border-radius: 1.5rem;
  color: #ff5900;
}




.featuress {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 4rem 1.2rem 2.5rem 1.2rem;
  gap: 1rem;
}

.feature-card {
  background: rgba(255, 255, 255, 0.1);
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
  border-radius: 0.625rem;
  padding: 1.25rem;
  text-align: center;
  flex: 1 1 11%;
  backdrop-filter: blur(0.625rem);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  max-width: 220px;
}

.feature-card:hover,
.feature-card.active {
  transform: translateY(-0.3125rem);
  box-shadow: 0 0.625rem 1.25rem rgba(0,0,0,0.2);
  background-color: rgb(11, 11, 197);
}

.feature-logo {
  width: 3.125rem;       
  height: 3.125rem; 
  object-fit: contain;
  margin-bottom: 0.625rem; 
}

.feature-card h4 {
  font-size: 1rem; 
  color: #fff;
}


  /* Feature Content Sections Styling (applies to all 8 sections) */
.feature-content {
  display: flex;
  flex-wrap: wrap;         
  align-items: center;      
  justify-content: center;
  gap: 2rem;                 
  padding: 3rem 1rem;
  border-radius: 10px;
  display: none;           
}

.feature-content.active {
  display: flex;
}

.feature-content .sec1 {
  flex: 1 1 400px;        
  max-width: 600px;
}

.feature-content .sec1 h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: goldenrod;
 
}

.feature-content .sec1 p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #fff;
}

.feature-content .sec1 a {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: #007BFF;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s, transform 0.2s;
}

.feature-content .sec1 a:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

.feature-content .sec2 {
  flex: 1 1 300px;      
  max-width: 500px;
  text-align: center;
}

.feature-content .sec2 img {
  width: 100%;
  max-width: 400px;
}

/* Responsive Layout */
@media (max-width: 900px) {
  .feature-content {
    flex-direction: column-reverse; 
    text-align: center;
    padding: 2rem 1rem;
  }

  .feature-content .sec1 {
    max-width: 100%;
  }

  .feature-content .sec2 img {
    max-width: 80%;
  }
}

.featuress {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 4rem 1.2rem 2.5rem 1.2rem;
  gap: 1rem;
}

.feature-card {
  background: rgba(255, 255, 255, 0.1);
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
  border-radius: 0.625rem;
  padding: 1.25rem;
  text-align: center;
  flex: 1 1 11%;
  backdrop-filter: blur(0.625rem);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  max-width: 220px;
}

.feature-card:hover,
.feature-card.active {
  transform: translateY(-0.3125rem);
  box-shadow: 0 0.625rem 1.25rem rgba(0,0,0,0.2);
  background-color: rgb(11, 11, 197);
}

.feature-logo {
  width: 3.125rem;       
  height: 3.125rem; 
  object-fit: contain;
  margin-bottom: 0.625rem; 
}

.feature-card h4 {
  font-size: 1rem; 
  color: #fff;
}


  /* Feature Content Sections Styling (applies to all 8 sections) */
.feature-content {
  display: flex;
  flex-wrap: wrap;         
  align-items: center;      
  justify-content: center;
  gap: 2rem;                 
  padding: 3rem 1rem;
  border-radius: 10px;
  display: none;           
}

.feature-content.active {
  display: flex;
}

.feature-content .sec1 {
  flex: 1 1 400px;        
  max-width: 600px;
}

.feature-content .sec1 h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: goldenrod;
 
}

.feature-content .sec1 p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #fff;
}

.feature-content .sec1 a {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: #007BFF;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s, transform 0.2s;
}

.feature-content .sec1 a:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

.feature-content .sec2 {
  flex: 1 1 300px;      
  max-width: 500px;
  text-align: center;
}

.feature-content .sec2 img {
  width: 100%;
  max-width: 400px;
}

/* Responsive Layout */
@media (max-width: 900px) {
  .feature-content {
    flex-direction: column-reverse; 
    text-align: center;
    padding: 2rem 1rem;
  }

  .feature-content .sec1 {
    max-width: 100%;
  }

  .feature-content .sec2 img {
    max-width: 80%;
  }
}

@media (max-width: 768px) {
  .featuress {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-content {
    flex-direction: column;
    gap: 1rem;
  }

  /* Hide all sections by default on mobile */
  .feature-content {
    display: none !important;
    text-align: justify; 
    text-justify: inter-word;
  }

  /* Make each content span full width under its card */
  .feature-content.mobile-active {
    display: flex !important;
  }
}

/* Offer Section */
.offer {
  text-align: center;
  padding: 4rem 8%;
  background-color: white;
  border-radius: 0.6rem;
  box-shadow: 0 0 0.6rem rgba(0,0,0,0.1);
  backdrop-filter: blur(0.625rem);
  transition: transform 0.3s, box-shadow 0.3s;
  margin: 2rem;
}

.offer h2 {
  margin-bottom: 2rem;
  color: #333;
  font-size: 1.2rem;
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.5rem;
}

.offer-card {
  padding: 1rem;
  border-radius: 0.6rem;
  box-shadow: 0 0 0.6rem rgba(93, 206, 178, 0.1);
  backdrop-filter: blur(0.625rem);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.offer-card:hover{
  transform: translateY(-0.3125rem);
  box-shadow: 0 0.625rem 1.25rem rgba(243, 20, 225, 0.2);
  background-color: #e2dcf9;
}

/* CATEGORIES */
.categories {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  background: #ede9ff;
  padding: 20px;
}
.category {
  background: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
}

.trending-section {
  padding: 2rem 5%;
  text-align: center;
  margin-top: 2rem;
}

.trending-section h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #66D6FF;
}

.trending-section p {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 2rem;
}

.filter-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.filter-btn {
  padding: 0.6rem 1.2rem;
  border: 1px solid white;
  background: transparent;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background-color: #fff;
  color: #000;
  
}

.courses-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  
  align-items: flex-start; 
  gap: 1.5rem;               
  padding: 40px 0;
  margin: 0 auto;
  max-width: 1300px;
  box-sizing: border-box;
}

/* === INDIVIDUAL COURSE CARD === */
.course-card {
  background: #fff;
  color: #222;
  border-radius: 14px;
  overflow: hidden;
  width: 300px; 
  height: 435px; 
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #f0f0f0;
}

/* === CARD HOVER EFFECT === */
.course-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.course-card img {
  width: 100%;
  height: 180px;
  /* object-fit: cover; */
}

.course-card h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1.1rem;
  height: 3rem;
}

.course-card p {
  font-size: 0.9rem;
  color: #333;
  height: 4rem;
  text-align: justify;
  padding: 0 0.8rem
}

.course-card span {
  font-weight: bold;
  color: #000;
}

.card-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Button styling */
.card-buttons a {
  flex: 1; /* equal width */
  padding: 0.25rem 0;
  border: 1px solid black;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.3s ease, color 0.3s ease;
  text-decoration: none;
  height: 2rem;
  margin: 0 0.5rem;
  background-color: #007bff;
  color: #fff;
}

/* Know More button */
.know-more-btn a{
  background-color: #007bff;
  color: #fff;
}

.know-more-btn:hover {
  background-color: #0056b3;
}

/* Payment button */
.payment-btn a{
  background-color: #007bff;
  color: #fff;
}

.payment-btn:hover {
  background-color: #0056b3;
}

@media (max-width: 768px) {
  .courses-container {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}


/* PARTNERS */
/* .partners {
  padding: 50px 10%;
  background: #fff;
  text-align: center;
}
.partners p{
  padding-bottom: 1rem;
}
.log {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2rem;
  animation: scrollLeft 20s linear infinite;
  
}
.log img {
  width: 10%;
}
@media (max-width: 768px) {
  .partners {
    padding: 30px 5%;
  }

  .log {
    animation-duration: 30s;
  }

  .log img {
    width: 100px;
    height: 60px;
  }
}

/* Small Mobiles (max-width: 480px)
@media (max-width: 480px) {
  .partners {
    padding: 25px 5%;
  }

  .partners p {
    font-size: 0.95rem;
  }

  .log {
    animation-duration: 20s;
    gap: 1rem;
  }

  .log img {
    width: 90px;    
    height: 55px;
  }
} */

/* PARTNERS SECTION */
.partners {
  padding: 5rem 8%;
  background: linear-gradient(135deg, #f7f8ff 0%, #eef1ff 100%);
  border-radius: 1rem;
  box-shadow: 0 0.625rem 2rem rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* CENTERED HEADING */
.partners-heading {
  text-align: center;
  margin-bottom: 3rem;
}

.partners-heading h3 {
  font-size: 2.2rem;
  color: #2b2b52;
  font-weight: 700;
  margin-bottom: 1rem;
}

.partners-heading p {
  font-size: 1rem;
  color: #555;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

/* MAIN CONTENT (LEFT + RIGHT) */
.partners-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
  flex-wrap: wrap;
}

/* LEFT SIDE */
.partners-content {
  flex: 1;
  min-width: 320px;
}

.partners-content p {
  font-size: 1rem;
  color: #444;
  line-height: 1.8;
  margin-bottom: 1rem;
  text-align: justify;
}

/* RIGHT SIDE SCROLLING LOGOS */
.partners-logos {
  flex: 1.5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 350px;
}

/* === FIXED SCROLL ANIMATION === */
.logo-row {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  will-change: transform;
  gap: 3rem;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.logo-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 3rem;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  animation-timing-function: linear;
}
.logo-row::after {
  content: attr(data-duplicate);
  display: flex;
}

/* Proper opposite animations */
@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Apply animation only to the tracks */
.left-scroll .logo-track {
  animation: scrollLeft 40s linear infinite;
}

.right-scroll .logo-track {
  animation: scrollRight 45s linear infinite;
}

/* Logo styling */
.logo-row img {
  width: 110px;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
  pointer-events: none; /* smoother GPU render */
}

.logo-row img:hover {
  transform: scale(1.1);
}

/* GPU optimization */
.logo-track {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* WHY CHOOSE */
.why-choose {
  padding: 50px 10%;
}
.why-choose h3{
  color: #09f7ff;
  font-weight: 600;
}
.why-grid {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
}
.why-card {
  margin-top: 1.5rem;
  flex: 1;
  min-width: 30%;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  min-height: 250px;
  text-align: justify;
}

.why-card:hover{
  transform: scale(1.1);
  transition: 2s;
}

.why-card img{
  width: 20%;
}

@media (max-width: 992px) {
  .why-card {
    min-width: 45%; /* 2 cards per row */
  }
}

/* Mobile */
@media (max-width: 600px) {
  .why-card {
    min-width: 90%;
    margin-bottom: 2rem;
  }
  .why-choose {
    padding: 30px 5%;
  }
  .why-card img {
    width: 40px;
  }
}

.journey-section {
  text-align: center;
  padding-top: 2rem;
  background: linear-gradient(135deg, #17173a, #131332);
  /* background: linear-gradient(135deg, #1a1a2e, #0a0a1a); */
  margin-bottom: -2rem;
  /* padding: 4rem 1rem; */
}

.journey-section h2 {
  font-size: 1.8rem;
  line-height: 1.4;
  max-width: 90%;
  margin: 0 auto 4rem auto;
  color: #a8dadc;
}

.journey-container {
  position: relative;
  width: 90%;
  margin: auto;
}

/* Dotted Path */
.journey-path {
  width: 100%;
  height: 22rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  animation: draw 8s linear infinite;
}

@keyframes draw {
  from {
    stroke-dashoffset: 200;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Walker Animation Along Path */
.walker {
  position: absolute;
  width: 3rem;
  offset-path: path("M0,300 C150,50 350,50 500,300 S850,550 1000,300");
  offset-rotate: auto;
  animation: moveAlongPath 10s linear infinite;
  z-index: 2;
}

@keyframes walk {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

@media (max-width: 768px) {
  /* Hide the curved path */
  .journey-path {
    display: none;
  }

  /* Container for all steps */
  .journey {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;       
    width: 100%;
    padding: 1rem 0;
  }

  /* Reset all step styles */
  .step, .step.top, .step.bottom {
    position: static !important;  
    transform: none !important;    
    margin: 0 auto !important;   
    width: 90%;                    
    max-width: 400px;              
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    box-sizing: border-box;
  }

  /* Center all text inside cards */
  .step h3, .step h4, .step p {
    text-align: center;
  }

  /* Labels at top/bottom */
  .labels {
    text-align: center;
    margin: 1rem 0;
  }

  .labels .line {
    display: block;
    font-size: 0.9rem;
    margin-top: 0.2rem;
  }
}


/* Journey Steps Grid */
.journey {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}

.step {
  background-color: #272744;
  color: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  width: 90%;
  margin: auto;
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.15);
  transition: transform 0.3s;
}

.step:hover {
  transform: translateY(-0.4rem);
}

.step h3 {
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.step h4 {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 1rem;
}

.step p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #fff;
}

/* Zigzag positioning */
.step.top {
  align-self: start;
  transform: translateY(-2rem);
}

.step.bottom {
  align-self: end;
  transform: translateY(2rem);
}

/* Start and End Labels*/
.labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 2rem auto 0;
  font-weight: 600;
  font-size: 1rem;
}
.line{
  color: orange;
  display: block;
  margin-bottom: 0.5rem;
}
.labels .start,.end{
  background: rgba(255, 255, 255, 0.1); /* transparency */
  backdrop-filter: blur(10px);           /* glass effect */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  color: #fff;
  padding: 6px;
  border-radius: 14px;
} 
.labels .start::after{
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(255,255,255,0.2);
}
.labels .end{
  margin-left: 87%;
  margin-bottom: 3%;
}
.labels .end::before{
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid rgba(255, 255, 255, 0.15);
}

.career-roadmap {
  text-align: center;
  padding: 3rem 1rem 6rem;
  color: #000;
  overflow-x: hidden;
}

.career-roadmap h1 {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 4rem;
}

/* main wrapper */
.roadmap-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* curved dotted line */
.curve {
  position: absolute;
  top: 140px;
  left: 0;
  width: 100%;
  height: 300px;
  z-index: 1;
}

/* steps */
.steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  z-index: 2;
  position: relative;
}

/* cards */
.card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  width: 180px;
  padding: 1.3rem 1rem;
  text-align: left;
}

.card h2 {
  font-size: 1rem;
  margin: 0 0 0.4rem 0;
  color: #000;
}

.card h3 {
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
  color: #000;
  font-weight: 600;
}

.card p {
  font-size: 0.85rem;
  color: #333;
  line-height: 1.4;
}

/* alternate heights to follow curve */
.up { margin-top: 0; }
.down { margin-top: 110px; }

/* start / end text */
.label {
  position: absolute;
  bottom: 0;
  color: #fff;
  font-size: 0.9rem;
}
.start { left: 0; }
.end { right: 0; }

.cardss{
  background: linear-gradient(135deg, #20203d, #212148); /* Dark gradient background */
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150vh;
    overflow: hidden;
}
.process-container {
    text-align: center;
    max-width: 1400px;
    width: 100%;
}

.process-container h1 {
    font-size: 2em;
    margin-bottom: 80px; 
    color: #a8dadc;
    position: relative;
    z-index: 10;
    margin-top: -13rem;
}

/* Process Flow Layout */
.process-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start; 
    position: relative;
    margin: 0 auto;
    padding: 0 20px;
}

/* The Connecting Line */
.process-flow::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 0;
    right: 0;
    height: 4px; 
    background: linear-gradient(to right, #61dafb, #8be9fd); 
    z-index: 1; 
    transform: translateY(-50%);
    width: calc(100% - 200px); 
    margin: 0 100px;
}

/* Card Styling */
.step-card {
    background-color: #272744;
    border-radius: 15px;
    padding: 35px;
    width: 150px; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0 20px; 
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7);
}

/* Up and Down Positioning */
.process-flow .step-card:nth-child(even) { 
    transform: translateY(150px);
}

.process-flow .step-card[data-step="1"] { 
    transform: translateY(-50px);
}
.process-flow .step-card[data-step="2"] { 
    transform: translateY(150px);
}
.process-flow .step-card[data-step="3"] {
    transform: translateY(-50px);
}
.process-flow .step-card[data-step="4"] { 
    transform: translateY(150px);
}
.process-flow .step-card[data-step="5"] { 
    transform: translateY(-50px);
}
.process-flow .step-card[data-step="6"] { 
    transform: translateY(150px);
}

 


/* Step Icon Styling */
.step-icon {
    font-size: 2em;
    color: #61dafb; 
    margin-bottom: 10px;
    text-align: left;
}

/* Step Number Styling */
.step-number {
    font-size: 1.5em;
    font-weight: bold;
    color: #8be9fd;
    margin-bottom: 5px;
    text-align: left;
}

.step-title {
    font-size: 1em;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10px;
    text-align: left;
}

.step-card p {
    font-size: 0.7em;
    color: #cccccc;
    line-height: 1.6;
    text-align: left;
}

/* Start/End Labels */
.label {
    position: absolute;
    bottom: -30px;
    left: 25px;
    font-weight: bold;
    color: #61dafb;
    font-size: 1.1em;
}

.end-card .label {
    left: auto;
    right: 25px;
}

/* Dots on the line */
.step-card::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #61dafb;
    border: 3px solid #1a1a2e; 
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
}

/* Medium screens (tablets, landscape phones) */
@media (max-width: 1024px) {
  .journey {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .career-services .title {
    font-size: 2rem;
  }

  .process-flow {
    flex-wrap: wrap;
  }

  .step-card {
    width: 200px;
    margin: 15px;
    transform: none !important;
  }

  .career-services img {
    height: 80vh;
  }
}

/* Small screens (phones, portrait tablets) */
@media (max-width: 768px) {
  .journey {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    text-align: justify; 
    text-justify: inter-word;
    height: fit-content;
  }

  .step {
    width: 90%;
    margin: 0 auto;
    transform: none;
  }

  .process-flow {
    flex-direction: column;
    align-items: center;
  }

  .step-card {
    width: 85%;
    margin: 12px 0;
  }

  .walker, .curve {
    display: none; 
  }

  .labels .end{
  margin-right: 10%;
  }
}

/* Extra small screens (phones ≤ 480px) */
@media (max-width: 480px) {
  .journey {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .step-card {
    width: 90%;
    padding: 1rem;
  }

  .step-card h2,
  .step-card h3 {
    font-size: 1rem;
  }

  .step-card p {
    font-size: 0.8rem;
  }

  .process-container h1 {
    font-size: 1.5em;
    margin-top: -5rem;
  }
  .labels .end{
    margin-right: 10%;
  }
}

/* Career Section */
.career-services {
  background: #fff;
  position: relative;
  /* overflow: hidden; */
  margin: 0px;
  padding: 10;
  width: 100%;
  background-color: navy;
}

.career-services img{
  width: 100vw;     
    height: 100vh;    
    object-fit: cover; 
    object-position: center;
    margin-bottom: -6rem;
}

.title {
  text-align: center;
  font-size: 25px;
  margin-bottom: -50px;
  position: relative;
  color: #00bcd4;
}

.title::after {
  content: '';
  width: 80px;
  height: 3px;
  background: #f66;
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 3px;
}

.career-services a{
  display: inline-block;
  background-color: white;
  color: #007bff;
  padding: 10px 22px;
  border: 1.5px solid #007bff;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
  margin-left: 80%;
  /* margin-top: -20%; */
  
}

.career-services a:hover {
  background: #007bff;
  color: white;
}

.career-services {
  position: relative;
  background: url(../public/images/girl.png) no-repeat;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100vh;
  padding: 0; 
}

.career-services::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 20, 60, 0.75);
  backdrop-filter: blur(1px);
  z-index: 0;
}

.career-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 85%;
  max-width: 90rem;
  gap: 2rem;
}

/* LEFT SIDE CONTENT */
.services-info {
  flex: 1;
  color: #fff;
  text-align: left;
  /* max-width: 500px; */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
}

.services-info h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: #00c3ff;
  margin-top: 0;
  margin-bottom: 1rem;
}

.services-info h2::after {
  content: "";
  display: block;
  width: 50%;
  height: 0.2rem;
  background: linear-gradient(90deg, #00c6ff, #0078ff);
  border-radius: 1rem;
  margin-top: 0.1rem;
  margin-left: 6rem;
}

.cta-btn {
  width: 12rem;
  height: 3rem;
  position: absolute;
  background-color: blue;
  color: #fff;
  border-radius: 3rem;
  text-decoration: none;
  box-shadow: 0 0.4rem 1.5rem rgba(0, 123, 255, 0.35);
  transition: all 0.3s ease;
  bottom:  20%;
  align-items: center;
  margin-right: 35%;
  z-index: 10;
}

.cta-btn:hover {
  background: linear-gradient(135deg, #0056b3, #0094ff);
  transform: translateY(-3px);
  box-shadow: 0 0.6rem 2rem rgba(0, 123, 255, 0.45);
} 

.program-gallery {
  flex: 1.3;
  width: 100%;
  max-width: 850px;
  height: 55vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  border-radius: 1.5rem;
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  margin: 0; 
  padding: 0; 
  margin-bottom: 10rem;
}

/* Scrollbar */
.program-gallery::-webkit-scrollbar {
  width: 0.5rem;
}
.program-gallery::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 0.5rem;
}

/* Individual Image Slides */
.image-slide {
  position: relative;
  height: 55vh;
  width: 100%;
  scroll-snap-align: start;
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; 
  margin: 0;
  padding: 0;
}

/* Image fills entire slide */
.image-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* Hover zoom effect */
.image-slide:hover img {
  transform: scale(1.05);
}

/* Caption area */
.caption {
  position: relative;
  z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.2));
  padding: 1.5rem 2rem;
  border-bottom-left-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
  text-align: left;
}


.caption h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #00b7ff;
  margin-bottom: 0.5rem;
}

.caption p {
  font-size: 1rem;
  color: #eee;
  line-height: 1.6;
}

.fade-text {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-text.show {
  opacity: 1;
  transform: translateY(0);
}

.scroll-headings {
    display: block; 
    overflow-y: visible;
    margin-top: 1rem;
    height: auto;
    width: 100%;
}

.heading-item {
    font-size: 1.2rem; 
    font-weight: 500;
    color: #fff; 
    text-align: left;
    letter-spacing: normal;
    padding: 10px 10px;
    margin: 5px 0;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, font-weight 0.2s;
    transform: none; 
}

.heading-item.active-heading {
    background-color: #fff; 
    color: #000; 
    font-weight: 700;
    border-radius: 0; 
    border-left: 5px solid #ffd700;
    padding: 15px 10px;
}




@media (max-width: 992px) {
  .career-wrapper {
    flex-direction: row; 
    flex-wrap: nowrap;   
    align-items: flex-start;
    gap: 2rem;
  }

  .services-info {
    flex: 1 1 40%;     
    margin-bottom: 0;
    text-align: left;
  }

  .program-gallery {
    /* margin-top: 10%; */
    flex: 1 1 55%;     
    max-height: 55vh;   
    overflow-y: scroll; 
  }

  .image-slide {
    height: 55vh;      
  }
  .cta-btn {
    width: 11rem;
    height: 3rem;
    left: -9%;
    bottom: 7%;
  }
}

/* Small mobile screens (<600px) */
@media (max-width: 600px) {
  .career-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .services-info {
    flex: 1 1 100%;
    text-align: center;
    margin-bottom: 2rem;
  }

  .program-gallery {
    flex: 1 1 100%;
    width: 100%;
    max-height: 50vh; 
    overflow-y: scroll;
  }

  .image-slide {
    height: 50vh;
  }

  .cta-btn {
    bottom: 7%;  
    left: -9%;    
    transform: translateX(-50%);
    width: 11rem;
    height: 2.8rem;
    font-size: 0.9rem;
  }
}


.about-section {
  background-color: rgb(5, 5, 103);
  color: #fff;
  padding: 2rem 10%;
  font-family: "Poppins", sans-serif;
}

.about-title {
  color: #f5f5f5;
  font-size: 1rem;
  margin-bottom: 0.3rem;
  position: relative;
}

.about-title::after {
  content: "";
  position: absolute;
  width: 4rem;
  height: 2px;
  background-color: #ff5900;
  bottom: -0.3rem;
  left: 0;
}

.about-section h2 {
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 3rem;
}

.about-section .highlight {
  color: #ff5900;
}

.about-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  flex-wrap: wrap;
}

.about-image img {
  width: 100%;
  max-width: 650px;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

.about-image img:hover {
  transform: scale(1.05);  
}

.about-content {
  flex: 1 1 45%;
  color: #f1f1f1;
  line-height: 1.7;
}

.about-content h3 {
  color: #fff;
  font-size: 1.1rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.about-content p {
  font-size: 1rem;
  color: #e0e0e0;
  margin-bottom: 1rem;
}



/* --- FAQ Section --- */
.faq-section {
  max-width: 1200px;
  margin: 0px auto;
  padding: 60px 20px;
  text-align: center;
  font-family: "Poppins", sans-serif;
}

/* Section Heading */
.faq-section h2 {
  font-size: 2rem;
  color: #222;
  margin-bottom: 10px;
}

.faq-section p {
  color: #555;
  font-size: 1rem;
  margin-bottom: 20px;
}

/* Contact Button */
.faq-section a {
  display: inline-block;
  background-color: white;
  color: #007bff;
  padding: 10px 22px;
  border: 1.5px solid #007bff;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
  margin-bottom: 40px;
}

.faq-section a:hover {
  background: #007bff;
  color: white;
}
.faq-section h2{
  color: #00ddff;
}
.faq-section p{
  color: #ffffffab;
}
/* FAQ Content Layout */
.faq-content {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  text-align: left;
}

/* Columns */
.faq-column {
  flex: 1 1 500px;
  max-width: 550px;
}

/* FAQ Items */
.faq-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 15px;
  background-color: #0A2647;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Hover effect */
.faq-item:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Question Label */
.faq-question {
  display: block;
  padding: 15px 20px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  position: relative;
}

/* Add "+" or "-" icon automatically */
.faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  font-size: 20px;
  transition: transform 0.3s ease;
}

/* Hide the default checkbox */
.faq-toggle {
  display: none;
}

/* Answer Box */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  background-color: #fff;
  border-top: 1px solid #ddd;
  padding: 0 20px;
}

/* When checkbox is checked - show answer */
.faq-toggle:checked + .faq-question + .faq-answer {
  max-height: 300px;
  padding: 15px 20px;
}

/* Change "+" to "-" when open */
.faq-toggle:checked + .faq-question::after {
  content: "–";
  transform: rotate(180deg);
}

/* Paragraph inside answer */
.faq-answer p {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .faq-content {
    flex-direction: column; 
    align-items: stretch;   
    gap: 0;                
  }

  .faq-column {
    max-width: 100%;
    margin: 0;             
  }

  .faq-section h2 {
    font-size: 1.6rem;
  }

  .contact-button {
    padding: 8px 18px;
    font-size: 0.95rem;
  }
}


.content{
  margin-top: -3rem;
  padding: 0 1.5rem;
}
/* .content h3{
  text-align: center;
} */
.content h3 {
  font-size: 2rem;
  text-align: center;
  font-weight: 700;
  color: rgb(32, 215, 218);
  position: relative;
  margin-bottom: 2rem;
}

.content h3::after {
  content: "";
  display: block;
  width: 20rem;
  height: 0.25rem;
  background: linear-gradient(90deg, #ff6600, #0066cc);
  margin: 0.5rem auto 0;
  border-radius: 1rem;
}


.skills-section{
  padding: 5rem;
}
.intro{
  font-size: 1rem;
  padding-bottom: 2rem;
  color: #fff;
}
.features-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2%;
  flex-wrap: nowrap; 
  align-items: stretch;
  margin-bottom: 2rem;
}

/* Features */
.features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 30%;
}

/* Divider */
.divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 5%;
  margin-left: -1rem;
}

.divider .dot {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #ffa500;
}

.divider .line {
  width: 0.2rem;
  height: fit-content;
  flex-grow: 1;
  background-color: #ffa500;
  margin: -1rem;
}

/* Feature items */
.featuree {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 0 4rem;
}

.featuree img {
  width: 2.5rem;
  height: auto;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}
.featuree .text {
  display: flex;
  flex-direction: column; 
}
.featuree .text b {
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
  color: #ffffff;
}

.featuree .text p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2rem;
  color: #ffffffa7;
}


/* Form */
.form-box {
  width: 25%;
  background-color: #f7f5ff;
  padding: 1rem;
  border-radius: 0.5rem;
  box-sizing: border-box;
}

.form-box form {
  display: flex;
  flex-direction: column;
  /* gap: 1rem; */
}

.form-box input,
.form-box textarea {
  padding: 0.8rem;
  font-weight: 500;
  border-radius: 0.3rem;
  border: 1px solid #ccc;
}

.form-box button {
  padding: 0.8rem;
  font-size: 1rem;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 0.3rem;
  cursor: pointer;
}

/* Responsive: Tablet / Small screens */
@media (max-width: 768px) {
  .features-container {
    flex-direction: row;
    flex-wrap: wrap;
    /* grid-template-columns: repeat(2, 1fr);  */
    gap: 4.5rem;
    margin-left: -4.5rem;
  }

  .features-left,
  .features-right {
    width: 100%;
  }

  .featuree {
    align-items: center;
    text-align: center;
  }

  .divider,
  .form-box {
    width: 100%;  /* divider & form below features */
    margin-top: 1.5rem;
    margin-left: 4rem;
  }
}

/* Mobile Phones */
@media (max-width: 480px) {
  .features-container {
    grid-template-columns: 1fr; /* 1 column on small mobile */
  }
  .features-left,
  .features-right {
    width: 100%;
  }

  .featuree img {
    width: 2rem;
    height: 2rem;
  }

  .featuree .text b {
    font-size: 0.95rem;
  }

  .featuree .text p {
    font-size: 0.8rem;
  }

  .divider,
  .form-box {
    width: 100%;
  }

  .skills-section {
    padding: 0rem 1rem;
  }
}

/* Optional: Hover Animation */
.featuree:hover {
  transform: translateY(-3px);
  transition: 0.3s ease;
}

/* Testimonials */
.testimonials {
  background: #2b138e;
  color: white;
  text-align: center;
  padding: 60px 10%;
  overflow: hidden;
}

.testimonials h2 {
  font-size: 2rem;
  margin-bottom: 30px;
}

/* Layout */
.testimonials-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow: hidden;
}

/* Row Containers */
.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.track {
  display: flex;
  width: max-content;
  gap: 25px;
}

/* Equal-sized Cards */
.crd {
  flex: 0 0 auto;
  width: 280px;
  height: 260px;
  background: #f9f9f9;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #000;
  text-align: left;
}

.crd p {
  font-size: 14px;
  line-height: 1.4;
  height: 90px;
  overflow: hidden;
  text-align: justify;
}

.crd:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.stars {
  color: #ffd700;
  font-size: 18px;
  /* margin: 10px 0 5px 0; */
  letter-spacing: 2px;
}

/* Continuous Scroll Animations */
.row1 .track {
  animation: scroll-left 35s linear infinite;
}

.row2 .track {
  animation: scroll-right 35s linear infinite;
}

/* Opposite directions */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Responsive */
@media (max-width: 768px) {
  .crd {
    width: 240px;
    height: 240px;
  }
  .crd p {
    height: 110px;
  }
}



/* Featured Logos */
.feature-title {
  margin-top: 60px;
  font-size: 22px;
  color: #fff;
  position: relative;
  margin-bottom: 2.5rem;
}

.feature-title::after {
  content: '';
  width: 70px;
  height: 2px;
  background: #f66;
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
}


.feature-logos {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2rem;
  animation: scrollLeft 20s linear infinite;
}

.feature-logos img {
  width: 9rem;
  height: 5rem;
  object-fit: contain;
  background: #fff;
  border-radius: 0.5rem;
  padding: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.feature-logos img:hover {
  transform: scale(1.1);
}

/* Animation: moves logos continuously left */
@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.connectplan {
  background: #ffffff;
  padding: 5rem 10%;
  text-align: center;
}

.connectplan h1 {
  font-size: 2rem;
  color: #2b138e;
  margin-bottom: 1rem;
}

.connectplan p {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 3rem;
}

/* Flex container for form + image */
.connectplan .connectform-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

/* Each form/image box */
.connectplan .connectform {
  flex: 1 1 45%;
}

/* Form styling */
.connectplan form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: #f7f5ff;
  padding: 2rem;
  border-radius: 0.8rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.connectplan label {
  font-weight: 500;
  margin-top: 1rem;
  color: #333;
}

.connectplan input {
  width: 100%;
  padding: 0.7rem;
  margin-top: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 0.4rem;
}

.connectplan button {
  margin-top: 1.5rem;
  padding: 0.8rem 1.5rem;
  background: #4b3efc;
  color: white;
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 1rem;
  transition: 0.3s ease;
}

.connectplan button:hover {
  background: #3727c4;
}

/* Image styling */
.connectplan img {
  width: 80%;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.footer {
  background-color: #0a0a0a;
  color: #eee;
  padding: 2rem 3%;
  font-family: "Poppins", sans-serif;
}

/* Layout */
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

/* Sections / Columns */
.footer-section {
  flex: 1 1 200px;
  min-width: 180px;
}

.footer-section h3 {
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 0.4rem;
}

/* List styling with arrow */
.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section li {
  position: relative;
  margin-bottom: 0.6rem;
  padding-left: 1.2rem; /* space for arrow */
}

.footer-section li::before {
  content: ">";   /* arrow symbol */
  position: absolute;
  left: 0;
  color: #00c4cc;  /* accent color */
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.3s ease, color 0.3s ease;
}

.footer-section li:hover::before {
  color: #ffd700;   /* gold on hover */
  transform: translateX(3px);
}

.footer-section a {
  text-decoration: none;
  color: #ccc;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.footer-section a:hover {
  color: #ffd700;
}

/* Logo */
.footer-logo {
  width: 140px;
  margin-bottom: 1rem;
}

/* Social Icons */
.social-icons {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #1c1c1c;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.05);
}

.social-icons a:hover {
  transform: translateY(-3px) scale(1.08);
  background: #00c4cc; /* aqua on hover */
  box-shadow: 0 0 12px rgba(0, 196, 204, 0.5);
}

.social-icons img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1); /* white base */
  transition: filter 0.3s ease;
}

.social-icons a:hover img {
  filter: brightness(1) invert(0); /* dark icon on hover */
}

/* Tagline */
.footer-sec {
  text-align: center;
  color: #ccc;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Address and Map */
.footer-sec1-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}

.footer-sec1 {
  flex: 1 1 300px;
  color: #ccc;
}

.footer-sec1 h3 {
  color: #fff;
  margin-bottom: 0.6rem;
}

.footer-sec1 iframe {
  width: 100%;
  max-width: 400px;
  height: 220px;
  border: none;
  border-radius: 8px;
}

/* Footer Bottom */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 2rem;
  padding-top: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p {
  font-size: 0.9rem;
  color: #ccc;
  margin: 0;
}

.footer-bottom a {
  color: #00c4cc;
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
  color: #ffd700;
}

.heart {
  color: #ff4d4d;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .footer-sec1-container {
    flex-direction: column;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .social-icons {
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .footer-logo {
    width: 120px;
  }
}


/* .footer {
  background-color: #0a0a0a;
  color: #eee;
  padding: 1rem 1%;
  font-family: "Poppins", sans-serif;
}

.footer-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* gap: 2rem; 
}
.logoinfo img{
  width: 40%;
}


.footer-column h4 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  color: #fff;
  border-bottom: 0.05rem solid rgba(255, 255, 255, 0.2);
}

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

.footer-column li {
  margin-bottom: 0.6rem;
}

.footer-column a {
  text-decoration: none;
  color: #ccc;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.footer-column a:hover {
  color: #00c4cc;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 0.05rem solid rgba(255, 255, 255, 0.2);
  margin-top: 2rem;
  padding-top: 1.2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p {
  font-size: 0.9rem;
  color: #ccc;
}
.followp{
  margin-left: 40%;
}

.socials img {
  width: 1.6rem;
  height: auto;
  margin: 0 0.5rem;
  transition: transform 0.3s ease;
}

.socials img:hover {
  transform: scale(1.1);
}

/* ✅ Responsive behavior 
@media (max-width: 768px) {
  .footer-columns {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
 .followp {
    margin-left: 0;      
    text-align: center;
  }

  /* Social icons 
  .socials {
    justify-content: center;  
    display: flex;
    margin-top: 0.5rem;
  }

  .socials img {
    width: 1.4rem;            
    margin: 0 0.4rem;
  }
}



/* Section 
.video-section {
  background-color: #f4f6f9;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
} */

/* Main Container */
.video-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 40px 50px;
  /* max-width: 1100px; */
  width: 100%;
  gap: 3rem;
}

/* Left Section (Image + Text) */
.video-info {
  flex: 1;
  text-align: left;
}

.video-info img {
  width: 320px;
  margin-bottom: 20px;
  display: block;
}

.video-info h2 {
  color: #0A2647;
  font-size: 2rem;
  margin-bottom: 10px;
}

.video-info p {
  color: #333;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 400px;
}

/* Right Section (Lead Form) */
.lead-form {
  flex: 1;
  background: #0A2647;
  color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.lead-form h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.lead-form p {
  font-size: 0.95rem;
  color: #d6d9e0;
  margin-bottom: 20px;
}

.lead-form label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 5px;
  color: #ffffff;
}

.lead-form input,
.lead-form select {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 0.95rem;
  outline: none;
}

.lead-form input:focus,
.lead-form select:focus {
  box-shadow: 0 0 5px #2C74B3;
}

.submit-btn {
  width: 100%;
  background: #2C74B3;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.submit-btn:hover {
  background: #144272;
}



/* Popup overlay (background blur) */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  display: none; 
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Popup box */
.popup-box {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 30px 40px;
  text-align: center;
  font-size: 1.2rem;
  color: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.3s ease-in-out;
}

/* OK Button */
.popup-box button {
  margin-top: 15px;
  background: #00bcd4;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
}

.popup-box button:hover {
  background: #0097a7;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}


/* Responsive Design */
@media (max-width: 900px) {
  .video-container {
    flex-direction: column;
    text-align: center;
    padding: 30px;
  }

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

  .video-info img {
    width: 220px;
    margin-inline: auto;
  }

  .lead-form {
    width: 100%;
  }
}


.interview-section {
  background-color: #f4f6f9;
  min-height: 100vh;
  padding: 50px 20px;
}

/* Container: two-column layout */
.container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Left Column: Questions */
.questions-column {
  flex: 1 1 60%;
}

/* Header */
.header h2 {
  color: #0A2647;
  font-size: 2rem;
  margin-bottom: 10px;
}

.header p {
  color: #555;
  font-size: 1rem;
  margin-bottom: 20px;
}


.interview-section{
  margin-top: 2rem;
}
.container {
  display: flex;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

/* Left Column: Questions */
.questions-column {
  flex: 1 1 60%;
}

/* Right Column: Image */
.q-a-img {
  flex: 1 1 35%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.q-a-img img {
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1)
}

@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }

  .q-a-img {
    order: -1;
    margin-bottom: 20px;
  }
}


.coming-soon-container {
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  text-align: center;
  margin-top: 2rem;
  color: #fff;
}

/* Headline */
.coming-soon-container h1 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

/* Paragraph */
.coming-soon-container p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}