* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Manrope", sans-serif;
  scroll-behavior: smooth;
}

#timeline,
#partners {
  scroll-margin-top: 70px;
  /* adjust 20–50px as needed */
}

.orangeText {
  color: #F39322;
}

.blueText {
  color: #2523E7;
}

.greenText {
  color: #128807;
}

/* ------header starts --------- */

.schoolSignupBtn {
  /* margin: 1rem 1rem 1rem 0rem; */
  font-weight: bold;
  background: radial-gradient(circle, #128807 0%, #0d6b05 100%);
  /* bright blue */
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0.3rem;
  z-index: 1;
  margin-right: 0.5rem;
}

/* this is the start of the header */

header {
  position: fixed;
  z-index: 9999;
  top: 20px;
  background: #fff;
  border-radius: 24px;
  padding: 4px 24px 4px 16px;

  width: 900px;
  box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 10%);
  border: 1px solid #e3e3e3;
}

.headerInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.headerLinks ul li a {
  color: #43454A;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.headerLinks ul li a:hover {
  text-decoration: underline;

}

.headerLinks ul li {
  display: flex;
  align-items: center;
  gap: 20px;
}

.anotherMTit h2 {
  font-size: 32px;
  font-weight: 800;
  /* text-transform: uppercase; */
  line-height: 36px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 1000;
}


.menu {
  position: fixed;
  top: -390px;
  width: 100%;
  height: auto;
  background: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
  transition: top 0.3s ease;
  z-index: 1001;
  /* padding: 20px; */
}

.menu.open {
  top: 0;
}

.menu h2 {
  margin-top: 0;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin-top: 5rem;
}

.menu ul li {
  margin-bottom: 15px;
}

.menu ul li a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
}

.menu ul li a:hover {
  color: #007BFF;
}

button#hamburgerBtn {
  display: none;
}

.logoCont {
  width: 109px;
  height: 56px;
}


.headerTopTit {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}

.closeBtn svg {
  height: 25px;
  width: 25px;
  margin: 0.5rem;
  cursor: pointer;
}

/* ------header ends----------- */

/* hero section */

.hero-heading h1 {
  font-size: 50px;
  font-weight: 700;
}

.hero-heading h2 {
  font-weight: 100;
  font-size: 16px;
}

.hero-content {
  margin-bottom: 1rem;
  /* mb-4 */
  display: flex;
  /* flex */
  gap: 0.5rem;
  /* gap-2 */
  align-items: center;
  /* items-center */
  width: 100%;
  /* w-full */

  transform: translateY(-2.5rem);
  /* -translate-y-10 */
  margin-top: 5rem;
}

/* Left empty column */
.hero-left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  padding: 2rem 1rem 0rem 8rem;
  /* w-1/2 */
}

.left-hero-image{
  width: 70%;
  height: auto;
}

/* Right column */
.hero-right {
  width: 50%;
  /* w-1/2 */
  padding-right: 8rem;
  /* pr-32 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Row containing logos */
.hero-logos {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  /* space-x-6 */
  align-items: stretch;
}

/* Logo images */
.logo-img {
  height: 4rem;
  /* h-16 */
  width: auto;
  object-fit: contain;
}

/* Divider (vertical line) */
.divider {
  align-self: stretch;
  /* self-stretch */
  border: 1px solid white;
  /* border-1 border-white */
}

/* Thicker divider (second row) */
.divider.thick {
  border-width: 2px;
  /* border-2 */
}

/* Second row with heading */
.hero-heading-row {
  margin-top: 2.5rem;
  /* mt-10 */
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  /* space-x-6 */
  align-items: stretch;
}

/* Heading block */
.hero-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  color: white;
}

/* Gradient title */
.hero-title {
  font-size: 2.5rem;
  /* adjust as needed */
  font-weight: bold;

  background: linear-gradient(to right, #ffedd5, white, #86efac);
  /* from-orange-100 → via-white → to-green-300 */
  -webkit-background-clip: text;
  color: transparent;
}

/* Subtitle */
.hero-subtitle {
  margin-top: 0.5rem;
  /* mt-2 */
}

/* ----------------Cards section------------- */
.cardCont {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.cardWrapper {
  position: relative;
  height: 120px;
  /* max height space */
  width: 300px;
  /* keep your width */
  display: flex;
  justify-content: center;
  margin: 0rem 0.5rem;
}

.card {
  position: absolute;
  bottom: 0;
  /* anchor to bottom */
  width: 100%;
  min-height: 80px;
  background: red;
  border-radius: 19px;
  transition: min-height 0.3s ease;
  overflow: hidden;
}

.card:hover {
  min-height: 120px;
  /* noticeable increase for test */
}

/* overlay should not block pointer events */
.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 19px;
  pointer-events: none;
  /* allow .card:hover to trigger */
}

.card-content {
  position: absolute;
  bottom: 0;
  /* ⬅ stays at the bottom always */
  left: 0;
  right: 0;
  z-index: 10;
  color: white;

  padding: 1.5rem 1.5rem 0.2rem;
  /* same padding */
  border-radius: 19px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* extra safety */

  line-height: 1.1;
  pointer-events: none;
  /* optional: hover should apply to card */
}

/* Typography */
.card-content h1 {
  font-size: 25px;
  /* text-3xl → 30px */
  font-weight: 700;
  /* font-bold */
}

.card-content p {
  font-weight: 200;
  /* font-extralight */
  font-size: 14px;
}

/* ----------book starts ---------- */
/* book */
.book {
  /* border: 2px solid red; */
  /* margin: 2rem; */
  background: #000000;
  width: 100%;
  padding: 3rem 0rem;
  overflow: visible !important
}

.bookOne,
.bookTwo,
.bookThree {
  width: 90%;
  margin: 4rem auto 0rem;
  position: relative;
  /* border: 5px solid blue; */
}

.bookOne {
  position: sticky;
  top: 60px;
  z-index: 1;
}

.bookOne>.boxTwo {
  display: flex;
  /* background: linear-gradient(180deg, #FF9933 80%, #fff 100%); */
  /* padding: 3em; */
  border-radius: 20px;
  /* min-height: 80vh; */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 1.5px 8px rgba(37, 35, 231, 0.12);
  border: 1px solid #e3e3e3;
  transition: transform 0.2s, box-shadow 0.2s;
  /* Optional: add a slight perspective for children */
  perspective: 800px;
  background: #fff;
}

.book .boxTwo>div:nth-child(1) {
  /* padding-right: 2rem; */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40%;
  /* border: 5px solid red; */
}

/* .boxTwo>div:nth-child(1) p {
  margin-top: 1rem;
  font-size: 14px;
  font-weight: 500;
} */

.book .bookImg {
  /* width: 20vw; */
  height: 50vh;
}

.bookImg img {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 1.5px 8px rgba(37, 35, 231, 0.12);
  /* border: 2px solid #fff; */
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
}

.bookImg img:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 2px 12px rgba(37, 35, 231, 0.18);
}

.book .bookText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 60%;
  /* padding: 3em; */
}

.bookText>h2 {
  font-size: 32px;
  font-weight: 800;
  align-self: flex-start;
  text-align: start;
}

.bookText p {
  font-size: 16px;
  font-weight: 500;
  margin-top: 1rem;
  width: 600px;
  /* line-height: 1.2; */
}

.bookTwo {
  position: sticky;
  top: 100px;
  z-index: 11;
  /* color: #ffffff; */
}

.bookTwo>.boxTwo {
  display: flex;
  /* background: linear-gradient(180deg, #000080 80%, #fff 100%); */
  border-radius: 20px;
  /* padding: 3em; */
  /* min-height: 80vh; */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 1.5px 8px rgba(37, 35, 231, 0.12);
  border: 1px solid #e3e3e3;
  transition: transform 0.2s, box-shadow 0.2s;
  /* Optional: add a slight perspective for children */
  perspective: 800px;
  background: #fff;
}

.bookThree {
  position: sticky;
  top: 140px;
  z-index: 111;
  /* min-height: 95vh; */
}

.bookThree>.boxTwo {
  display: flex;
  /* background: linear-gradient(180deg, #138808 80%, #fff 100%); */
  border-radius: 20px;
  /* padding: 3em; */
  /* min-height: 80vh; */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 1.5px 8px rgba(37, 35, 231, 0.12);
  border: 1px solid #e3e3e3;
  transition: transform 0.2s, box-shadow 0.2s;
  /* Optional: add a slight perspective for children */
  perspective: 800px;
  background-color: #fff;
}

.normalPad{
  padding: 3em;
}

.extraPad{
  padding: 3em 3em 11em 3em;
}

  .banImg {
    position: relative;
    min-width: 285px;
}


.banImg img {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 110%;
    object-fit: cover;
}

.banImg .hackyKid {
    height: 115%;
    top: -15%;
    border-radius: 24px 0px 0px 24px;
}


img.hackyBg {
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 24px 0 0 24px;
}

/* ----------book ends------------ */
/* typewriter effect starts */

/* Section wrapper */
/* ----------typewriter effect starts------------ */

section.stage-typewriter {
  margin: 5rem 7rem;
}

/* Text sizes */
.headline {
  line-height: 1.1;
  /* leading-tight */
  font-size: 4.5rem;
  font-weight: 600;
  min-height: 1.1em;
}

/* Colored text */
.orange-text {
  color: #f97316;
  /* replace with your custom orange if needed */
}

/* Flex on second h2 */
.flex-line {
  display: flex;
  align-items: center;
}

/* Cursor block */
.cursor {
  display: inline-block;
  width: 6px;
  /* w-[6px] */
  background: black;
  margin-left: 0.25rem;
  /* ml-1 */
  animation: blink 0.7s infinite;
  /* animate-blink */
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  50.01%,
  100% {
    opacity: 0;
  }
}

/* -------------timeline starts------------ */

section.aboutUs {
  background: #000D14;
  padding: 80px;
  position: relative;
}

#timeline {
  position: relative;
  z-index: 1;
}

#timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  z-index: -1;
}

.anotherMTit h2 {
  font-size: 40px;
  font-weight: 800;
  /* text-transform: uppercase; */
  line-height: 50px;
}

anime-text-container {
  position: relative;
  width: 100vw;
  height: 100svh;
  padding: 2em;
  overflow: hidden;
  /* border: 10px solid red; */
}

.copy-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  border-radius: 2rem;
}

/* .copy-container { */
  /* border: 0.15rem dashed rgb(60, 60, 60); */
  /* margin: 3rem 0rem; */
  /* padding: 1rem 0rem; */
/* } */

.anime-text {
  width: 60%;
}

.anime-text p {
  color: #fff;
  /* text-align: center; */
  /* margin-bottom: 2rem; */
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.3;
}

.anime-text .word {
  display: inline-block;
  position: relative;
  margin-right: 0.2rem;
  margin-bottom: 0.2rem;
  padding: 0.1rem 0.2rem;
  border-radius: 2rem;
  /* will-change: background-color, opacity; */
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.anime-text .word.keyword-wrapper {
  margin: 0 0.4rem 0.2rem 0.2rem;
}

.anime-text .word span {
  position: relative;
  transition: opacity 0.3s ease;
}

.anime-text .word span.keyword {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  padding: 0.1rem 0;
  color: #141414;
}

.anime-text .word span.keyword::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 1rem);
  height: calc(100% + 0.4rem);
  /* background-color: #fff; */
  border-radius: 2rem;
  z-index: -1;
}

.anime-text .word,
.anime-text .word span {
  opacity: 0;
}

.anime-text .keyword-group {
  display: inline;
  border-radius: 5px;
  padding: 0rem 0.4rem;
  color: #141414;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  /* width: fit-content; */
}

/* --------------timeline ends----------- */


/* ----------Position the brand------------- */
.positionYourBrandInfo {
  position: relative;
  /* background: linear-gradient(291.68deg, #2523E7 53.73%, #50D5FD 163.73%); */
  color: #000000;
  padding: 50px 0;
}

.positionYourBrandInfo h2 {
  font-size: 40px;
  font-weight: 800;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}

/*  form starts */
.enroll {
  padding: 80px 0px;
  background: #000000;
  color: #FFFFFF;
  position: relative;
}

.infoText {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.infoText h2 {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.infoText p {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.infoText .enrollHead {
  margin-top: 2rem;
  font-weight: bold;
}

/* form */
.form-step input {
  color: #000000;
}

.form-step {
  display: block;
}

.form-step.hidden {
  display: none;
}

.form-step .formCont {
  display: flex;
  flex-direction: column;
}

.form-step .formRow {
  display: flex;
  width: 100%;
}

.form-step .formRow>div {
  width: 50%;
}

.form-step .formRow>div:nth-child(2) {
  margin-left: 1rem;
}

.submitFormBtn {
  background: radial-gradient(circle, #128807 0%, #0d6b05 100%);
}

.form-input,
.form-select {
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.5rem;
  margin-top: 0.25rem;
}

.otp-input {
  width: 49%;
}

.btn {
  cursor: pointer;
}

/* Error styling for form fields */
.field-error {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

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

/* Enhanced form field styling */
.form-input.border-red-500,
.form-select.border-red-500 {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.response-success {
  color: green;
  font-weight: bold;
  margin-top: 20px;
}

.response-error {
  color: rgb(203, 11, 8);
  font-weight: bold;
  margin-top: 20px;
}

p#statusMsg {
  color: #FFF;
}

#sendSchoolOtpBtn,
#VerifyOtpBtn {
  background: radial-gradient(circle, #128807 0%, #0d6b05 100%);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
}

#sponsorshipForm {
  position: relative;
}

section.enroll .topFlag {
  position: absolute;
  left: 0;
  top: 0;
}

/* form ends */

/* --------------Partner section------------- */
.partnerBox {
  border: 0.5px solid #BDC2F0;
  border-radius: 8px;
  padding: 15px;
  width: 100%;
  height: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.partnerBox img {
  width: 100%;
  max-height: 100px;
  object-fit: contain;
}

.logoIS img,
.techPartnerLogo img {
  /*width: 65%;*/
  width: 70%;
  margin: auto;
}

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

section.ourPartners {
  padding: 80px;
}

.partnerSpcl_tit h4 {
  font-size: 16px;
  font-weight: 500;
  color: #2523E7;
  position: relative;
}

.partnerSpcl_tit h4::after {
  position: absolute;
  top: 50%;
  margin-left: 15px;
  content: "";
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #2523E7 0%, rgba(37, 35, 231, 0) 100%);
}

.partnerSpcl_tit {
  margin-bottom: 20px;
  overflow: hidden;
}

.partnerTit {
  margin-bottom: 40px;
}

.partnerTit h3 {
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  color: #000D14;
}

/* -----------footer----------- */
footer {
  background: #000D14;
  color: #fff;
}

.footer_cont {
  display: grid;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 80px;
}

.footTit h4 {
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.socialIcons {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
}

.followUs_cont p {
  font-size: 16px;
  font-weight: 500;
}

.contactUs_cont a {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 15px;
  min-height: 32px;
}

.contactUs_cont {
  padding-left: 40px;
}

.footTit {
  margin-bottom: 20px;
}


@media screen and (max-width: 768px) {

  #timeline,
  #partners {
    scroll-margin-top: 80px !important;
  }

  /* header */
  .headerLinks ul li {
    justify-content: center;
  }

  button#hamburgerBtn {
    display: block;
  }

  .headerLinks.mobile {
    display: none !important;
  }

  button#hamburgerBtn {
    display: block;
  }

  header .headerLinks {
    display: none;
  }

  .schoolSignupBtn {
    display: none;
  }

  header {
    width: calc(100% - 40px);
  }

  /*  header ends */

  /* ---------------hero---------- */
  .hero-left {
    width: 10%;
    padding: 3rem 0rem 0rem 0rem;
  }

  .left-hero-image{
width: 70%;
height: auto;
  }

  .hero-right {
    padding-right: 2rem;
    width: 90%;
  }

  .hero-heading h1 {
    font-size: 32px;
  }

  .hero-heading-row {
    margin-top: 1.5rem;
  }

  .hero-content {
    transform: translateY(-5rem);
  }

  .logo-img {
    height: 3rem;
  }

  .hero-logos {
    gap: 1rem;
  }

  .divider {
    display: block;
    /* md:block */
    width: 1px;
    /* w-[1px] */
    align-self: stretch;
    /* self-stretch */
    border: 1px solid white;
    /* border-1 border-white */
  }

  .card:hover {
    min-height: 110px;
  }

  /* ----------book starts----------- */
  .bookOne>.boxTwo,
  .bookTwo>.boxTwo,
  .bookThree>.boxTwo {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: 1em; */
    /* height: 90vh; */
  }

  .book .boxTwo>div:nth-child(1) {
    /* border: 2px solid red; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-right: 0px;
    width: 100%;
  }

  .boxTwo>div:nth-child(1) p {
    margin-top: 0.5rem;
    font-size: 10px;
    text-align: center;
  }

  .bookText>h2 {
    font-size: 24px;
    align-self: center;
    text-align: center;
    margin-top: 0.5rem;
  }

  .bookText p {
    margin-top: 0.2rem;
    font-size: 12px;
    /* font-weight: 500; */
  }

  .book .bookImg {
    /* width: 40vw; */
    /* margin-right: 1rem; */
    height: 35vh;
  }

  .bookImg img {
    height: 100%;
  }

  .book .bookText {
    width: 90%;
  }

  .book-popup {
    width: 95vw;
    height: 95vh;
    padding: 20px 10px;
  }

  .book-popup input,
  .book-popup button {
    max-width: 100%;
  }

  .purchasePaperBack,
  .downloadBook {
    /* margin: 0.5rem 0.5rem 0.5rem 0rem; */
    padding: 6px 12px;
    margin-top: 0.5rem;
    font-size: 12px;
  }

   img.hackyBg {
        border-radius: 24px;
    }

    .banImg {
        position: relative;
        min-width: auto;
        min-height: 250px;
    }

    .banImg .hackyKid {
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 24px 24px 0px 0px;
        object-fit: cover;
    }

    .banImg img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
  .normalPad{
    padding: 1em;
  }

    .extraPad{
      padding: 1em 1em 11em 1em;
    }
  /* ----------book ends------------ */

  /* -----------typewriter section ----------- */
  section.stage-typewriter {
    margin: 2rem;
  }

  .headline {
    font-size: 2rem;
  }

  /*----------timeline starts----- */
  section.aboutUs {
    padding: 40px 20px;
  }

  section#timeline {
    padding: 20px;
    overflow: hidden;
  }

  .anotherMTit {
    margin-bottom: 30px !important;
  }

  .anotherMTit h2 {
    font-size: 24px;
    font-weight: 800;
    /* text-transform: uppercase; */
    line-height: 30px;
  }

  .anime-text {
    width: 100%;
  }

  .anime-text p {
    font-size: 16px;
    font-weight: 800;
  }


  /* -----timeline ends-----------*/

  .positionYourBrandInfo {
    padding: 20px;
  }

  .positionYourBrandInfo h2 {
    font-size: 20px;
  }

  /* ------form--------- */

  .infoText h2 {
    font-size: 20px;
  }

  .form-step .formCont {
    display: flex;
    flex-direction: column;
  }

  .form-step .formRow {
    display: flex;
    flex-direction: column;
    /* width: 100%; */
  }

  .form-step .formRow>div {
    width: 100%;
  }

  .form-step .formRow>div:nth-child(2) {
    margin-left: 0rem;
  }

  .otp-input {
    width: 100%;
  }

  section.enroll .topFlag {
    width: 65px;
  }

  /* ---------enroll form ends */

  /* ---------------about ------------- */
  .abCyberbudhaCont {
    padding: 20px !important;
    flex-direction: column !important;
    border-radius: 0 !important;
  }

  .mobPzero {
    padding: 0 !important;
  }

  /* --------about ends----------- */

  /* -------------partner----------- */

  .partnersGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
  }

  section.ourPartners {
    padding: 20px;
  }

  .partnerTit {
    margin-bottom: 25px;
  }

  .partnerTit h3 {
    font-size: 20px;
  }

  /* -------------footer--------- */
  .footer_cont {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 15px;
  }

  .footTit {
    margin-bottom: 10px;
  }

  .footTit h4 {
    font-size: 20px;
  }

  .socialIcons {
    gap: 16px;
  }

  .socialIcons a {
    width: 28px;
  }

  .contactUs_cont a {
    min-height: auto;
  }

  .contactUs_cont {
    padding-left: 0;
  }
}

@media screen and (max-width: 576px) {

  /* ----------hero -------------- */
  .hero-heading h1 {
    font-size: 24px;
  }

  /* -------typewriter --------- */
  .headline {
    font-size: 24px;
  }

  .logoIS,
  .techPartnerLogo {
    padding: 25px 15px;
  }

}

@media screen and (max-width: 430px) {
  /* -----------hero---------- */

  .left-hero-image{
  display: none;
}


  /* .logo-img {
    height: 2rem;
  } */

  /* -------typewriter --------- */
  section.stage-typewriter {
    margin: 1rem;
  }

  .headline {
    font-size: 20px;
  }

  .logoIS,
  .techPartnerLogo {
    padding: 30px 15px;

  }
}

@media (max-width: 1024px) and (min-width: 768px) {

  /* header */

  button#hamburgerBtn {
    display: none;
  }

  header .headerLinks {
    display: block;
  }

  header {
    width: calc(100% - 60px);
  }

  /* ---------------hero----------   */

  /* Left empty column */
.hero-left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  padding: 0rem 1rem 0rem 3rem;
  /* w-1/2 */
}

.left-hero-image{
  width: 80%;
  height: auto;
}

  .hero-right {
    padding-right: 4rem;
  }

  .hero-heading h1 {
    font-size: 38px;
  }

  /* -------book starts----------- */
  .bookOne {
    top: 50px;
  }

  .bookTwo {
    top: 80px;
  }

  .bookThree {
    top: 110px;
  }

  .bookOne>.boxTwo,
  .bookTwo>.boxTwo,
  .bookThree>.boxTwo {
    /* padding: 3em; */
  }

  .boxTwo>div:nth-child(1) p {
    font-size: 12px;
  }

  .bookText>h2 {
    font-size: 32px;
  }

  .bookText p {
    font-size: 14px;
  }

  .book .bookImg {
    /* width: 20vw; */
    height: 35vh;
  }

  .bookImg img {
    height: 100%;
  }

  img.hackyBg {
        border-radius: 24px 0 0 24px;
    }

    .banImg {
        position: relative;
        min-width: auto;
        min-height: 300px;
    }

    .banImg .hackyKid {
        height: 100%;
        top: 0;
        border-radius: 24px;
        object-fit: cover;
        width: 100%;
        left: 0;
    }

    .banImg img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


  /* ---------book ends---------- */

  /* ---------typewriter ----------- */
  section.stage-typewriter {
    margin: 3rem;
  }

  .headline {
    font-size: 3rem;
  }

  /* timeline */
  section.aboutUs {
    padding: 60px 30px;
  }

  section#timeline {
    padding: 30px;
    overflow: hidden;
  }

  .anotherMTit {
    margin-bottom: 40px !important;
  }

  .anotherMTit h2 {
    font-size: 28px;
    font-weight: 800;
    /* text-transform: uppercase; */
    line-height: 36px;
  }

  .anime-text {
    width: 90%;
  }

  .anime-text p {
    font-size: 1.25rem;
  }

  .anime-text .word {
    margin-right: 0.1rem;
    margin-bottom: 0.15rem;
    padding: 0.1rem 0.2rem;
  }

  .anime-text .word.keyword-wrapper {
    margin: 0 0.2rem 0.1rem 0.1rem;
  }

  /* timeline ends */

  .bluepositionYourBrandInfoInfo {
    padding: 30px;
  }

  .positionYourBrandInfo h2 {
    font-size: 24px;
  }

  /* -----about ---------- */
  .abCyberbudhaCont {
    padding: 0px 30px 30px 30px !important;
    flex-direction: column !important;
    border-radius: 0 !important;
  }

  .mobPzero {
    padding: 0 !important;
  }

  /* about ends */

  /*---------------- form starts------------------- */

  section.enroll .topFlag {
    width: 75px;
  }

  /* ------------footer ------------- */
  .footer_cont {
    grid-template-columns: 1fr 1fr 1fr;
    padding: 30px;
    gap: 20px;
  }

  .footTit {
    margin-bottom: 15px;
  }

  .footTit h4 {
    font-size: 22px;
  }

  .socialIcons {
    gap: 20px;
  }

  .socialIcons a {
    width: 30px;
  }

  .contactUs_cont a {
    min-height: auto;
  }

  .contactUs_cont {
    padding-left: 0;
  }

  /* -----------------partner------------- */
  .partnersGrid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  section.ourPartners {
    padding: 30px;
  }

  .partnerTit {
    margin-bottom: 30px;
  }

  .partnerTit h3 {
    font-size: 24px;
  }
}

@media screen and (max-width: 1150px) {
  .bookText p {
    width: 100%;
  }
}

@media (width: 768px){
  img.hackyBg {
        border-radius: 24px;
    }
}

@media (max-width: 640px){
  .hero-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: -4rem;
}

.hero-right{
  flex-direction: column;
  align-items: center;
  padding:0;
}

.hero-heading-row{
  justify-content: center;
  align-items: center;
}

.hero-heading{
align-items: center;
text-align: center;
}

.divider{
  display: none;
}

.logo-img {
    height: 4rem;
  }
}
/*
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Manrope", sans-serif;
  scroll-behavior: smooth;
}

#about,
#timeline {
  scroll-margin-top: 70px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #FF9933 0%, #ffffff 50%, #138808 100%);
  min-height: 75vh;
}

.hero h1 {
  font-size: 50px;
  font-weight: bold;
}

.hero h3 {
  font-size: 24px;
}

.hero button {
  padding: 0.5rem 1rem;
  border-radius: 10px;
  color: #000;
  font-size: 14px;
  margin: 3rem 0rem;
  border: 1px solid #000;
}

section.aboutUs {
  background: #000D14;
  padding: 80px;
}

.aboutUsCard_cont {
  background-color: #fff;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.aboutUs_content ul {
  margin-left: 1rem;
  font-size: 14px;
  list-style: disc;
}

.aboutUs_text {
  padding: 20px;
}

.aboutUs_content p {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 15px;
}

.aboutUs_content p span.blueText {
  font-weight: 700;
}

.aboutUs_text h2 {
  font-size: 32px;
  font-weight: 800;
  color: #000D14;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.testiInfo h4 {
  font-size: 16px;
  font-weight: 700;
  color: #000D14;
}

.testiInfo span {
  color: #48616E;
  font-size: 14px;
  font-weight: 500;
  display: inline-block;
  line-height: 20px;
}

.testiImg {
  width: 300px;
  bottom: 11px;
  height: 100px;
  position: relative;
  right: 20px;
}

.testiImg img {
  position: absolute;
  width: 260px;
  height: 180px;
  object-fit: cover;
}

.aboutTesti {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.greenText {
  color: #128807;
}

.blueText {
  color: #2523E7;
}

.yellowText {
  color: #FFA500;
}

.aboutUs_img {
  border: 1px solid red;
  min-width: 500px;
}

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

section.aboutUs {
  position: relative;
}


.aboutUs_content {
  position: relative;
  margin-top: 15px;
}

img.quoteImg {
  position: absolute;
  left: 0;
  top: -11px;
}

section.aboutUs .topFlag,
section.blueInfo .topFlag {
  position: absolute;
  left: 0;
  top: 0;
}

section.aboutUs .bottomFlag,
section.blueInfo .bottomFlag {
  position: absolute;
  right: 0;
  bottom: 0;
}

.customTimelineArrow {
  left: -12px;
}

.customTimelineArrowReverse {
  right: -11px;
}

#timeline {
  position: relative;
  z-index: 1;
}

#timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  z-index: -1;
}

.anotherMTit h2 {
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 36px;

}

.sponsorHeadings {
  max-width: 900px;
  margin: 3rem auto 0rem;

}

.sponsorHeadings h2 {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin: 0.5rem 0rem;
}

.sponsorForm {
  max-width: 900px;
  margin: 1rem auto 0rem;
}

.sponsorForm h2 {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin-top: 1rem;
  text-decoration: underline;
}

hr {
  max-width: 200px;
  margin: 2rem auto;
  height: 3px;
  background-color: #cacaca;
  border: none;
}

div.customForm {
  background: radial-gradient(at left, #ff9933 -12%, transparent 45%), radial-gradient(at right, #00a650 -12%, transparent 45%), #000;
}


.form-input {
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.5rem;
  margin-top: 0.25rem;
}

.btn {
  cursor: pointer;
}

.typewriter-container {
  font-size: 42px;
  text-align: center;
  background-color: black;
  padding: 50px 0;
}

.typewriter {
  font-size: 2.5rem;
  font-weight: 600;
  color: #fff;
  min-height: 3.25rem;
  margin: 0 auto;
}

.typewriter.typing::after {
  content: '|';
  animation: blink 1s infinite;
  margin-left: 5px;
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

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

.form-input.border-red-500,
.form-select.border-red-500 {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


@media screen and (max-width: 768px) {

  section.aboutUs .topFlag,
  section.blueInfo .topFlag {
    width: 65px;
  }

  section.aboutUs .bottomFlag,
  section.blueInfo .bottomFlag {
    width: 60px;
  }

  section.aboutUs {
    padding: 40px 20px;
  }

  .aboutUs_img {
    min-width: 100%;
  }

  .aboutUs_img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  .aboutUs_text h2 {
    font-size: 24px;
  }

  img.quoteImg {
    position: absolute;
    left: 0;
    top: -6px;
    width: 32px;
  }

  .aboutUsCard_cont {
    flex-direction: column-reverse;
  }

  .typewriter {
    font-size: 1.4rem;
    min-height: 2.6rem;
  }
}

*/