
/* ================= NAVBAR ================= */

.navbar {
  background: #ffffff;
  padding: 16px 0;
  position: sticky;
  top: 0;                 /* ✅ REQUIRED */
  z-index: 1000; 
}
.navbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar__logo img {
  height: 100px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  border: none;
}

.btn--primary {
  background:  #6b2ca0;
  color:black;
}

.btn__icon {
  font-size: 14px;
}

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

.hero {
  background: radial-gradient(circle at right, #6b2ca0, #0b083f);
  padding: 80px 0;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* LEFT */
.hero__content h1 {
  font-size: 44px;
  line-height: 1.2;
  margin-bottom: 12px;
}

.hero__content h1 span {
  color: #f4c77a;
}

.hero__subtitle {
  letter-spacing: 2px;
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 28px;
}

.hero__badge {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f4c77a;
  color: #2b1a00;
  padding: 16px 20px;
  border-radius: 999px;
  font-size: 14px;
  max-width: fit-content;
}

.hero__badge strong {
  font-weight: 700;
}

.divider {
  width: 1px;
  height: 36px;
  background: rgba(0,0,0,0.3);
}

/* CENTER IMAGES */
.hero__images {
  position: relative;
  height: 640px;
  overflow: hidden;
}

/* TRACK */
.hero__images-track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  animation: heroScroll 12s linear infinite;
}
/* PAUSE ON INTERACTION (ACCESSIBILITY) */
.hero__images:hover .hero__images-track,
.hero__images:focus-within .hero__images-track {
  animation-play-state: paused;
}


.img {
  width: 100%;
  object-fit: cover;
}

.img--tall {
  height: 320px;
  border-radius: 999px;
}

.img--round {
  height: 260px;
  border-radius: 50%;
}

/* RIGHT FORM */
.hero__form {
  background: rgba(255,255,255,0.12);
  padding: 32px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.hero__form h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

.hero__form form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero__form input,
.hero__form select {
  padding: 14px;
  border-radius: 8px;
  border: none;
  outline: none;
}

.btn--submit {
  background: #5b2b90;
  color: #ffffff;
  justify-content: center;
  border: none;
  cursor: pointer;
}
@keyframes heroScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}


@media (prefers-reduced-motion: reduce) {
  .hero__images-track {
    animation: none;
  }
}


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



  /* IMAGE SECTION */
 @media (min-width: 1025px) {
  .hero__images {
    height: 490px;   /* balanced height */
  }
 }

  /*.hero__images-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    animation: heroScroll 10s linear infinite;
  }

  .img,
  .img--tall,
  .img--round {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 24px;
  }*/



@media (min-width: 1025px) {

  /* HERO GRID FIX */
  .hero__grid {
    align-items: flex-start; /* content upar rahe */
  }

  /* DISCOVER CONTENT */
  .hero__content {
    margin-top: -20px;   /* thoda upar */
    max-width: 560px;
  }

  .hero__content h1 {
    font-size: 50px;
    line-height: 1.15;
  }

  /* ENQUIRY FORM */
  .hero__form {
    margin-top: -20px;   /* thoda upar */
    max-width: 440px;
    padding: 42px;
  }

  /* IMAGE ANIMATION */
  .hero__images-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    animation: heroScroll 9s linear infinite;
  }

  .img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 24px;
  }
}




/* -------- MOBILE -------- */
@media (max-width: 768px) {
  .hero {
    padding: 48px 0;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero__content {
    text-align: center;
  }

  .hero__badge {
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
  }

  .divider {
    display: none;
  }

 .hero__images {
    height: 580px;              /* ✅ fixed height hatao */
    max-height: none;
    padding: 20px 0;
    /*overflow: hidden;
    display: flex;
    justify-content: center;*/
  }
  .hero__images-track {
    grid-template-columns: 1fr;
    gap: 20px;
     animation-duration: 12s; 
  }

  .hero__form {
    padding: 24px;
  }
   .img {
    width: 100%;
    max-width: 240px;          /* ✅ image readable size */
    margin: 0 auto;
  }

  .img--tall {
    height: 250px;
  }

  .img--round {
    height: 240px;
  }

  /* FORM button full width */
  .hero__form .btn,
  .hero__form .btn--submit {
    width: 100%;
  }

  /* NAVBAR button auto width */
  .navbar .btn {
    width: auto;
    padding: 10px 14px;   /* slightly smaller */
    font-size: 14px;
  }
}



/* -------- SMALL MOBILE -------- */
@media (max-width: 480px) {
  .hero__content h1 {
    font-size: 26px;
  }

  .hero__images {
    height: 360px;
     padding: 16px 0;
  }
   .img {
    max-width: 240px;
  }
  .img--tall {
    height: 250px;
  }

  .img--round {
    height: 220px;
  }
   .navbar .btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}
