/*---------- Section First ----------*/

.pragyan-hero {
  padding: 4rem 5vw;
  position: relative;
  overflow: hidden;
}

.pragyan-hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 55rem;
  height: 65.5vh;
  border-bottom: 0.1rem solid gray;
}

/* LEFT */

.pragyan-hero-title {
  font-size: 6rem;
  font-weight: 700;
  color: #3b3b3b;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.pragyan-hero-subtitle {
  max-width: 28rem;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: #6b6b6b;
  text-decoration: underline;
}

.hero-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 10rem;
  font-size: 1rem;
}

.hero-links a {
  color: #000;
}

.hero-links a:hover {
  text-decoration: none;
  color: #501a7c;
  font-size: 0.95rem;
}

/* IMAGE */

.pragyan-hero-image {
  position: absolute;
  right: 8vw;
  top: 0rem;
  width: 28rem;
  /* height: 28rem; */
  /* text-align: center; */
  border-radius: 3rem;
  right: 45rem;
  /* overflow: hidden; */
  transform: rotate(45deg);
}

.pragyan-hero-image img {
  width: 130%;
  height: 130%;
  object-fit: cover;
  transform: rotate(-45deg) translate(-10%, -10%);
}

/* RIGHT */

.hero-right {
  grid-column: 2;
  max-width: 28rem;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
  margin-top: 15rem;
  margin-left: -10rem;
}
.hero-right p {
  width: 100%;
}
.btn-wrap {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: sans-serif;
}

/* BLACK CIRCLE */

.btn-icon {
  width: 2.2rem;
  height: 2.2rem;
  background: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-right: 0.5rem;
  margin-left: 1rem;
  z-index: 2;
  transform: rotate(-45deg);
}
.btn-text {
  background: transparent;
  color: #000;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.8rem 4rem;
  border-radius: 2rem;
  border: 0.1rem solid #caa24d;
}
/* ====== RESPONSIVE ====== */


@media (min-width: 992px) and (max-width: 1200px) {
    .pragyan-hero-title {
        font-size: 5rem;
    }
    .pragyan-hero-image {
        margin-right: -27rem;
    }

        .pragyan-hero-image img {
            width: 123.6%;
        }

            .pragyan-hero-container {
                height: 77.5vh;
            }

    .hero-right {
        margin-left: -36rem;
        margin-top: 17rem;
        max-width: 24rem;
    }
        }

/* 768px */
@media (min-width: 768px) and (max-width: 991px) {
    .pragyan-hero-container {
        height: 54.5vh;
    }
    .pragyan-hero-title {
        font-size: 3rem;
    }

    .pragyan-hero-image {
        margin-right: -43rem;
    }

    .pragyan-hero-image {
        width: 27rem;
        height: 27rem;
    }
    .hero-right p {
       display: none;
    }
    .hero-right {
        margin-left: -41rem;
        margin-top: 20rem;
    }
    .btn-text {
        padding: 0.8rem 2rem;
    }
}


@media (max-width: 576px) {
  .pragyan-hero {
    padding: 0rem 6vw;
  }

    .pragyan-hero-title {
        font-size: 2.3rem;
        margin-left: 5rem;
    }

    .pragyan-hero-subtitle {
        margin-right: -8rem;
        max-width: 21rem;
    }

        .pragyan-hero-container {
            height: 70vh;
        }

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

        .hero-right p {
            display: none;
        }

        .pragyan-hero-btn {
            width: 100%;
            justify-content: center;
        }

        .btn-text {
            padding: 0.4rem 1rem;
        }
    .btn-wrap {
        margin-left: -58rem;
        margin-bottom: 12rem;
    }
    .hero-links {
        margin-top: 8rem;
    }

    }

@media (min-width: 1200px) and (max-width: 1366px) {

        .pragyan-hero-image {
            margin-right: -24rem;
        }

    .pragyan-hero-container {
        height: 75vh;
    }

        .hero-right {
            margin-left: -38rem;
            margin-top: 22rem;
        }
    }
/*---------- Section Second ----------*/

.student-features {
    padding: 1rem 6vw;
}

/* TOP AREA */

.student-features-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
}

.student-title-area h3 {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.3;
}

.student-title-area span {
  color: #4f0071;
}

.student-top-text {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
}

.student-divider {
  height: 0.25rem;
  background: #d3a94c;
  margin: 2rem 0 3rem;
}

/* GRID */

.student-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* ITEM */

.student-feature-item {
  position: relative;
  padding: 2rem 1.5rem;
  border-right: 0.1rem dashed #d6d6d6;
  overflow: hidden;
  background: white;
  transition: color 0.4s ease;
}

.student-feature-item {
  height: 35rem;
}

.student-feature-item:last-child {
  border-right: none;
}

/* IMAGE LAYER */

.bg-img {
  position: absolute;
  inset: 0;
  width: 95%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* DARK OVERLAY */

.student-feature-item::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
  width: 95%;
}

/* TEXT ABOVE IMAGE */

.student-feature-item *:not(.bg-img) {
  position: relative;
  z-index: 3;
}

/* NUMBER */

.number {
  font-size: 4rem;
  color: #444;
  margin-bottom: 2rem;
  font-weight: 400;
  padding-left: 1rem;
  margin-top: 15rem;
}

/* TEXT */

.student-feature-item h3 {
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
  padding-left: 1rem;
  font-weight: 500;
}

.student-feature-item p {
  color: #666;
  line-height: 1.6;
  width: 95%;
  font-weight: 400;
  font-size: 1rem;
  padding-left: 1rem;
}

.number {
  position: relative;
  display: inline-block;
}

/* DEFAULT — hidden */

.number::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1.5rem;
  width: 0.2rem;
  height: 2rem;
  background: repeating-linear-gradient(
    to bottom,
    #ffffff,
    #ffffff 0.3rem,
    transparent 0.3rem,
    transparent 0.6rem
  );

  opacity: 0;
  transition: opacity 0.3s ease;
  left: 50%;
}

/* SHOW ONLY ON HOVER */

.student-feature-item:hover .number::after {
  opacity: 1;
}

.student-feature-item:nth-child(2) .number::after {
  opacity: 1;
}

/* ===== HOVER EFFECT ===== */

.student-feature-item:hover .bg-img {
  opacity: 1;
}

.student-feature-item:hover::after {
  opacity: 1;
}

.student-feature-item:hover {
  color: white;
}

.student-feature-item:hover .number,
.student-feature-item:hover h3,
.student-feature-item:hover p {
  color: white;
  cursor: pointer;
}

/* IMAGE CARD */

.image-card {
  position: relative;
  padding: 0;
  overflow: hidden;
}

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

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


@media (min-width: 992px) and (max-width: 1200px) {
   

    .student-feature-item {
        border-right: none;
        border-bottom: 0.1rem dashed #d6d6d6;
    }

        .student-feature-item:nth-child(odd) {
            border-right: 0.1rem dashed #d6d6d6;
        }

       

        .student-feature-item p {
            width: 100%;
        }
    .number {
        margin-top: 9rem;
    }
}

/* 768 */
@media (min-width: 768px) and (max-width: 991px) {
  

    .student-title-area h3 {
        font-size: 1.8rem;
    }

    .student-features-grid {
        grid-template-columns: 1fr 1fr;
    }

    .student-feature-item {
        border-right: none;
        border-bottom: 0.1rem dashed #d6d6d6;
    }

    .number {
        margin-top: 9rem;
    }
    .student-feature-item {
        height: 32rem;
    }
}

@media (max-width: 576px) {
    .student-features {
        padding: 1rem 5vw;
    }
    .student-features-top {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

        .student-title-area h3 {
            font-size: 1.5rem;
        }
        .student-features-grid {
            display: grid;
            grid-template-columns: 1fr;
        }
    .student-feature-item {
        height: 33rem;
       
    }
        .number {
            font-size: 2.4rem;
        }

        .student-feature-item h3 {
            font-size: 1.1rem;
        }
    }

@media (min-width: 1200px) and (max-width: 1366px) {
    .number {
        margin-top: 9rem;
    }
}
/*---------- Section Third ----------*/

/* SECTION */

.Learner-Section {
  padding: 3rem 5vw;
  padding-bottom: 4rem;
}

.Learner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60vh;
}

/* IMAGE */

.Learner-image {
  flex: 1;
}

.Learner-image img {
  width: 160%;
  max-width: 160%;
  margin-left: -5rem;
}

/* CONTENT */

.Learner-content {
  flex: 1;
}

.label {
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
  position: relative;
  text-align: end;
  margin-right: 3.5rem;
}

.label::after {
  content: "";
  width: 6rem;
  height: 0.15rem;
  background: #d22;
  display: block;
  margin-top: 0.5rem;
  margin-left: 43.5rem;
}

.Learner-content h3 {
  font-size: 1.6rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: #333;
  text-align: end;
  width: 40%;
  margin-left: 28.5rem;
}

.Learner-content h3 span {
  color: #4f0071;
  font-weight: 700;
}

/* CARD */

.Learner-card {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 2rem;
  max-width: 35rem;
  height: 22rem;
  border-radius: 0.5rem;
  position: relative;
  margin-left: 15rem;
  padding-left: 6rem;
}

.learner-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 0.5rem;
  background: transparent;
  color: #333;
  margin-top: 1.6rem;
  width: 15%;
}

.Learner-card h4 {
  font-size: 2rem;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.Learner-card p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  width: 80%;
  font-weight: 400;
}

.Learner-link {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
}

.Learner-link:hover {
  color: #deb04c;
}

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



@media (min-width: 992px) and (max-width: 1200px) {
    .Learner-content h3 {
        width: 41%;
    }
    .Learner-image img {
        max-width: 480%;
        width: 475%;
    }
    .Learner-card {
        max-width: 25rem;
        height: 18rem;
        margin-left: 25rem;
        padding-left: 2rem;
    }
    .learner-arrow {
        margin-top: 0rem;
    }
        .Learner-card h4 {
            margin-top: 1rem;
        }
        .Learner-card p {
            width: 86%;
        }
    }

/* 768px */

@media (min-width: 768px) and (max-width: 991px) {
    .Learner-content h3 {
        width: 41%;
    }

    .Learner-image img {
        max-width: 542%;
        width: 390%;
        margin-left: -22rem;
    }

    .Learner-card {
        max-width: 25rem;
        height: 18rem;
        margin-left: 6rem;
        padding-left: 2rem;
    }

    .learner-arrow {
        margin-top: 0rem;
    }

    .Learner-card h4 {
        margin-top: 1rem;
    }

    .Learner-content h3 {
        display: none;
    }
    .label {
        font-size: 1.2rem;
        margin-right: 0.5rem;
    }
        .label::after {
            
            margin-top: 0.5rem;
            margin-left: 23.5rem;
        }
    .Learner-card p {
        width: 100%;
    }
    .Learner-container {
        height: 40vh;
    }

}

@media (max-width: 576px) {
    .Learner-container {
        display: block;
    }

    .Learner-content h3 {
        width: 98%;
        margin-left: 0.5rem;
    }

        .Learner-image img {
            max-width: 110%;
            width: 110%;
            margin-left: -1rem;
        }

    .Learner-card {
        max-width: 25rem;
        height: 18rem;
        margin-left: 0rem;
        padding-left: 2rem;
    }

        .learner-arrow {
            margin-top: 0rem;
        }

    .Learner-card h4 {
        margin-top: 0rem;
    }



    .label {
        font-size: 1.2rem;
        margin-right: 2.5rem;
        margin-top: 1rem;
    }

            .label::after {
                margin-top: 0.5rem;
                margin-left: 8.5rem;
            }

    .Learner-card p {
        width: 114%;
    }

        .Learner-container {
            height: 90vh;
        }
    }

@media (min-width: 1200px) and (max-width: 1366px) {
    .Learner-content h3 {
        width: 41%;
    }

    .Learner-image img {
        max-width: 300%;
        width: 240%;
    }
    .Learner-container {
        height: 65vh;
    }
}