.gayatri-head {
  padding: 5rem;
  background-image: url(images/gy-head.jpg);
  
  .gyat-hd-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;

    h1 {
      font-size: 41px;
      width: 80%;

      span {
        color: #ffec01;
      }
      span:hover {
        color: #fff;
      }
    }
    .gy-lin-cont {
      width: 80%;
    }
    .orange-line {
      width: 150px;
      padding-bottom: 1rem;
    }

    .dot {
      width: 4px;
      height: 4px;
      background-color: #ff6e00;
      border-radius: 50%;
      display: inline-block;
      margin-right: 5px;
    }

    .line {
      height: 4px;
      background-color: #ff6e00;
      border-radius: 10px;
    }
    h5 {
      font-size: 18px;
      width: 80%;
    }
    h6 {
      font-size: 18px;
      width: 80%;
      line-height: 30px;
    }
  }
  .form-box {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;

    .custom-input {
      border-radius: 0.5rem;
      box-shadow: none;
      border: 1px solid black;
    }
    .in-bx {
      width: 24rem;
    }

    .custom-input:focus {
      border-color: black;
      box-shadow: none;
    }
    .sub-btn {
      width: 10rem;
      background-color: #15a9e3;
      font-weight: 600;
    }
  }
}
.top-crs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2rem 0;

  .top-crs-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-direction: column;
    span {
      color: #ba0001;
      font-weight: 700;
    }
    span:hover {
      color: black;
    }

    .orange-line {
      width: 150px;
      padding-bottom: 1rem;
    }

    .dot {
      width: 4px;
      height: 4px;
      background-color: #ba0001;
      border-radius: 50%;
      display: inline-block;
      margin-right: 5px;
    }

    .line {
      height: 4px;
      background-color: #ba0001;
      border-radius: 10px;
    }
  }
  .gyatri-card-total{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .top-crs-card {
    width: 25rem;
    padding: 1rem;
    height: 35rem;

    img {
      border-radius: 8px;
    }

    .orange-line {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 150px;
    }

    .dot {
      width: 4px;
      height: 4px;
      background-color: #ba0001;
      border-radius: 50%;
      display: inline-block;
      margin-right: 5px;
    }

    .line {
      height: 4px;
      background-color: #ba0001;
      border-radius: 10px;
    }
  }

  /* .seat {
    text-decoration: none;

    i {
      color: #ba0001;
    }
  }
  .get {
    text-decoration: none;

    i {
      color: #ba0001;
    }
  } */
  .cll {
    background-color: #ba0001;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 3px;
    width: 10rem;
    justify-content: center;
    height: 3rem;
    font-weight: 700;
    color: #fff;
    gap: 5px;

    i {
      color: white;
    }
  }
  .inq {
    border: 2px solid #ba0001;
    color: #ba0001;
    font-weight: 700;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 3px;
    width: 10rem;
    justify-content: center;
    height: 3rem;
    gap: 5px;

    i {
      color: #ba0001;
    }
  }
}
.gyatri-admission {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;

  .gy-head-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .gyatri-admission-content {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .gy-head-content {
      display: flex;
    }
    .gy-adm-head {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-size: 16px;
      line-height: 24px;
      text-align: left;
      font-weight: 700;
      margin-bottom: -18px;
    }

    .gy-adm-head .gy_adm_before {
      background-color: #000000;
      width: 73px;
      height: 2px;
    }
    .gy-head-descrip {
      color: #000000;
      font-size: 40px;
      font-weight: 700;
      line-height: 60px;
    }

    .timeline-icon {
      width: 40px;
      height: 40px;
      background-color: #ba0001;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .timeline-line {
      width: 2px;
      height: 60px;
      background-color: #ba0001;
      margin-bottom: 1.5rem;
      position: relative;
    }
    .gy-adm-steps {
      display: flex;
      flex-direction: column;
      gap: 3rem;

      .adm-stp-para {
        font-weight: 600;
        font-size: 14px;
        width: 80%;
      }
    }
  }
}
.chose-gyatri {
  background-color: #f4f5fd;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .chose-gyatri-head {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    padding: 2rem 0;

    .orange-line {
      display: flex;
      float: left;
      width: 150px;
      padding-bottom: 1rem;
      /* margin-right: 8rem; */
    }

    .line {
      height: 4px;
      background-color: #ba0001;
    }
    h6 {
      width: 80%;
    }
  }

  .gb {
    .chose-card {
      div {
        width: 10px;
        height: 100px;
        background: linear-gradient(
          90deg,
          rgba(105, 238, 191, 0.8) 0%,
          rgba(92, 255, 196, 0) 100%
        );
        transition: width 0.5s;
        z-index: 1;
        margin-top: -7rem;
      }

      div:hover {
        width: 300px;
      }
    }
    .chose-card {
      .chose-hover {
        /* background-color: #BA0001;
      z-index: 1;
      width: 10px;
      height: 4rem;
      margin-bottom: -1rem;
      transition: width 2s; */

        width: 100px;
        height: 100px;
        background: red;
        transition: width 2s;
        z-index: 2;
        margin-top: -5rem;
      }
      .chose-hover:hover {
        /* width: 300px;
      transition: all 2s linear; */
        width: 500px;
      }
      h5 {
        font-weight: 700;
      }
      p {
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
}
.gayatri-contact {
  display: flex;
  justify-content: start;
  flex-direction: column;

  .gayatri-contact-head {
    .orange-line {
      display: flex;
      float: left;
      width: 100px;
      padding-bottom: 1rem;
      margin-right: 8rem;
      height: 5px;
    }

    .line {
      height: 4px;
      background-color: #ba0001;
    }
  }

  .contact-content {
    background-color: #f7f7f7;
    max-width: 500px;
    height: max-content;
    padding: 3rem 2rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .enve {
      height: 2rem;
      width: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      border: 1px solid #5e16c1;
      text-decoration: none;

      i {
        color: #5e16c1;
      }
    }
    .ph {
      height: 2rem;
      width: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      border: 1px solid #036e10;
      text-decoration: none;
      i {
        color: #036e10;
      }
    }
    .locat {
      height: 2rem;
      width: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      border: 1px solid #ff5402;
      text-decoration: none;
      i {
        color: #ff5402;
      }
    }
  }

  .cont-form {
    display: flex;
    justify-content: center;
    width: 60%;
  }
  .form-box {
    height: fit-content;
    max-width: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);

    .custom-input {
      border-radius: 0.5rem;
      box-shadow: none;
      border: 1px solid black;
    }
    .in-bx {
      width: 45rem;
    }

    .custom-input:focus {
      border-color: black;
      box-shadow: none;
    }
    .sub-btn {
      width: 10rem;
      background-color: #15a9e3;
      font-weight: 600;
    }
  }
  .follow-social {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;

    .follow-title {
      display: inline-block;
      position: relative;
      font-weight: 500;
    }

    .follow-title .line {
      content: "";
      display: inline-block;
      width: 100px;
      height: 1px;
      background-color: #ccc;
      margin-left: 10px;
      vertical-align: middle;
    }

    a:hover i {
      color: #0d6efd; /* Bootstrap primary color on hover */
    }
  }
}
.gayatri-footer {
  background-color: #f3f3f3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-direction: column;

  img {
    height: 6rem;
    width: 6rem;
  }
  .gy-foot-address{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;

    .foot-addres {
      font-size: 15px;
      i {
        color: #ba0001;
      }
    }
  }

  .gy-social {
    height: 3rem;
    width: 3rem;
    background-color: #292a47;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-radius: 8px;

    i {
      font-size: 20px;
    }
  }
}
.gyatri-typwriter{
  display: flex;
  /* gap: 2rem; */
  justify-content: center;
  background-color: #730012;

  .typewr{
    display: flex;
    width: 45%;
    color: #FFEC01;
    font-weight: 600;
  }
  
  .typewriter {
    font-size: 24px;
    border-right: 2px solid #38bdf8;
    white-space: nowrap;
    overflow: hidden;
  }
}

@keyframes blink {
  50% { border-color: transparent; }
}
.gyatri-wtp-cll-mob{
  display: none;
}

.gyatri-wtp-cll-mob{
  display: none;

  .wtp-btn{
    background-color: #167A22;
    color: #fff;
  }
  .cll-btn{
    background-color: #1D00B4;
    color: #fff;
  }
}

@media(max-width:1350px){
  .gyatri-typwriter {
    .typewr {               
        width: 52%;
      }
    }
  .top-crs {
    .top-crs-card {
        width: 20rem;
    }
}
  .gayatri-contact {
    .contact-content {
        max-width: 450px;
      }
      .cont-form {
        width: 50%;

        .in-bx {
          width: 30rem;
        }
    }

    }
}
@media(max-width:768px){
  .gyatri-typwriter{
    flex-direction: column;
    align-items: center;

    .typewr{
      width: 100%;
      justify-content: center;

      h3{
        font-size: 18px;
      }
    }
    .typewriter {
      font-size: 18px;
    }
    a{
      width: fit-content;
    }
  }
  .gayatri-head {
    .form-box {
        max-width: 360px;
    .in-bx {
          width: 18rem;
      }
    }
    .gyat-hd-cont {
      text-align: center;
      

      h1{
        font-size: 31px;
        width: 100%;
      }
      h6 {
          font-size: 13px;
          width: 90%;
          line-height: 20px;
      } 
      
      .gy-lin-cont {
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
  }
}
.top-crs{

.gyatri-card-total{
  display: flex;
  justify-content: center;
  align-items: center;

  .top-crs-card{
    width: 22rem;
}

  .top-crs-card-mob{
    display: flex;
    gap: 1rem;
    margin: 0 auto;
  }
    .row>* {
      display: flex;
      justify-content: center;
  }
}

}
.gyatri-admission{

  .gayatri-adm-img img{
    width: 20rem;
  }
  .gyatri-admission-content{
    width: 100%;
    .gy-head-descrip {
      font-size: 22px;
      line-height: 30px;
    }
  }
}
.gayatri-contact{
  .gayatri-contact-head{
    display: flex;
    align-items: center;
    flex-direction: column;

    .orange-line {
      margin-right: 0;
   }
  }
  .contact-content {
    max-width: 320px;
  }
  .form-box {
    max-width: 600px;

    .in-bx {
      width: 18rem;
  }
   }
}
.gayatri-footer{
  .gy-foot-address{
    flex-direction: column;
    gap: 0;
  }
}
.gyatri-wtp-cll-mob{
  display: block;
  display: flex;
  justify-content: center;
  gap: 1rem;
  background-color: #ba0001;
  padding: 15px;
  font-weight: 600;
  position: sticky;
  bottom: 0;
  z-index: 200;

  .wtp-btn{
    background-color: #167A22;
    color: #fff;
    padding: 5px 10px;
    width: 10rem;
    display: flex;
    justify-content: center;
    text-decoration: none;
    border-radius: 5px;
  }
  .cll-btn{
    background-color: #1D00B4;
    color: #fff;
    padding: 5px 10px;
    width: 10rem;
    display: flex;
    justify-content: center;
    text-decoration: none;
    border-radius: 5px;
  }
}
}


.chose-card {
  border: none;
  background: transparent;
}

.ova-details {
  position: relative;
  padding: 20px 30px;
  border-radius: 20px;
  background-color: transparent;
  transition: all 0.4s ease-in-out;
}

/* Gradient Left Bar */
.ova-details.ova-linear-gradient::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, #3DEEA4 0%, #6EDDE8 74%, #79D9F8 100%);
  border-radius: 8px;
}

/* Text Styling */
.ova-details .title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #000300;
  position: relative;
  z-index: 2;
}

.ova-details .desc {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  position: relative;
  z-index: 2;
}

/* Hover effect */
.ova-details:hover,
.ova-details.active {
  background: linear-gradient(90deg, #b0f5e3 0%, #ffffff 100%);
}