.yt-player {
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}

.player-img {
  width: 100%;
 /* height: 480px;*/
  object-fit: contain;     /* ✅ poori image dikhayega */
  background: #000;        /* black bars like YouTube */
}


/* Bottom overlay bar */
.yt-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transition: .3s;
}

.yt-player:hover .yt-controls {
  opacity: 1;
}

.yt-controls button {
  background: rgba(0,0,0,.6);
  border: none;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 16px;
}

.yt-count {
  color: #fff;
  font-size: 14px;
}



/* Neeche wala section */
.ll-solutionArc {
  background-color: #127775;
  position: relative;
  z-index: 1;
}

.ll-solutionCards {
  position: relative;
  z-index: 2;
}

.overlap-image {
  position: relative;
  z-index: 3;            /* image sab se upar */
  transform: translateY(-65px);  /* 👈 ANDAR TAK */
  width:100%;
}
.section1-bg {
/* background: linear-gradient(
  180deg,
  #F4FAF9 0%,
  #D6EEE9 35%,
  #9FD6CC 65%,
  #1AA6A0 100%
);
*/
 background-image: url('img/compression/section-1-bg.png');
  background-repeat: no-repeat;     /* repeat band */
  background-size: cover;           /* full width + height cover */
  background-position: center top;  /* top se align */
  width: 100%;
}

.section2-bg {
  /*background: linear-gradient(
    180deg,
   
  #ffffff 0%,
    #EAF6F4 30%,
    #77BCB7 65%,
    #127775 100%
  );*/
 background-image: url('img/compression/section1-top-bg.png');
  background-repeat: no-repeat;     /* repeat band */
  background-size: cover;           /* full width + height cover */
  background-position: center top;  /* top se align */
  width: 100%;
  
}
.section-ninth {
  background: url('img/compression/section-9.png') center/cover no-repeat;
  width: 100%;
 /* margin-bottom:140px;*/
  background-repeat: no-repeat;     /* repeat band */
  background-size: cover;           /* full width + height cover */
  background-position: center top;  /* top se align */
  min-height:1220px;
}
@media (max-width: 768px) {
  .section-ninth {
    min-height: auto;               /* fixed height hatao */
    aspect-ratio: 16 / 9;           /* 🔥 width ke hisaab se height */
    background-size: contain;       /* poori image dikhe */
    background-position: top center;
    background-repeat: no-repeat;
  }
}


.text-color-green-heading{
  color:#006d6a;
  font-weight:500;

}
.text-color-green-heading-semibold{
   color:#006d6a;
  font-weight:600;
}
.text-color-green-heading-bold{
   color:#006d6a;
  font-weight:900;
  text-align:center;
}
.text-color-section-6-heading-bold{
   color:#00413F;
  font-weight:700;
  font-size:0.9rm;
  text-align:center;
}


.btn-rounded {
  border-radius: 50px !important;
  padding: 10px 20px !important; /* Vertical padding thoda kam ki */
  font-weight: 500;
  min-width: 250px;              /* Button ki minimum width set ki landscape jaisa */
  width: 100%;                  /* Agar container me fit karna ho to */
  max-width: 300px;             /* Max width limit bhi de sakte ho */
}

.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:focus-visible {
  background-color: #029B87 !important;
  border-color: #029B87 !important;
  box-shadow: none !important;
}


/* challenges section */

/* ===== SECTION BACKGROUND ===== */
.challenge-section {
  padding: 90px 0 120px;
  /*background: linear-gradient(
    180deg,
    #3FA9D6 0%,
    #6EC1E4 55%,
    #A9DBEF 100%
  );*/
position: relative;
  padding: 90px 0 120px;
  background-image: 
    linear-gradient(
      180deg,
      rgba(89, 169, 214, 2.9) 0%,    /* top color */
      rgba(110, 193, 228, 0.5) 40%,  /* middle color, thoda transparent */
      rgba(255, 255, 255, 0) 80%      /* bottom tak transparent white */
    ),
    url('img/compression/section-4-bg.png'); /* original image */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  width: 100%;
  
}

/* ===== TOP PILL ===== */
.challenge-pill {
  display: inline-block;
  background: rgba(0,0,0,0.35);
  color: #fff;
  padding: 6px 22px;
  border-radius: 30px;
  font-size: 23px;
  font-weight: 500;
}

/* ===== TITLE ===== */
.challenge-title,
.card-text {
  color: #555555;
    font-size: 45px;
    font-weight:900;  
}


/* ===== STAT CARDS (MOST IMPORTANT PART) ===== */
/*.stat-card {
  background: #ffffff;
  border-radius: 26px;
  padding: 42px 30px;
  border: 6px solid #1296D4;
  box-shadow:
    0 0 0 6px #ffffff inset,
    0 14px 28px rgba(0,0,0,0.18);
  height: 100%;
}*/
.stat-card {
  position: relative;
  background: #ffffff;
  border-radius: 26px;
  padding: 42px 30px;
  height: 100%;
  z-index: 1;
}

/* Gradient border */
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 6px; /* border thickness */
  border-radius: 26px;
  background: linear-gradient(
    to bottom,
    #1296D4 0%,
    #1296D4 40%,
    #ffffff 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
}

/* Optional shadow */
.stat-card {
  box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}



/* Text styles */
.small-title {
  font-size: 35px;
  font-weight:900;
  color: #555;
  margin-bottom: 5px;
}

.big-percent {
  font-size: 60px;
  font-weight: 800;
  color: #36d27c;
  margin-bottom: 10px;
}

.card-text {
    font-size: 25px;
  font-weight:900;
  color: #555;
  font-weight: 600;
  line-height: 1.4;
}

/* Green highlights */
.highlight,
.big-percent {
  color: #34D17A;
  font-weight: 800;
      
}


/* ===== RESULT BAR ===== */
/*.result-bar {
  background: rgba(255,255,255,0.95);
  border-radius: 70px;
  padding: 32px 45px;
  display: flex;
  align-items: center;
  gap: 22px;
}*/
.result-bar {
  background: linear-gradient(
    to right,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.85) 45%,
    rgba(255,255,255,0.6) 70%,
    rgba(255,255,255,0.35) 100%
  );
  border-radius: 70px;
  padding: 32px 45px;
  display: flex;
  align-items: center;
  gap: 22px;
}



/* Result icon */
.result-icon {
  width: 150px;
  height: 100px;
  background: radial-gradient(circle at top, #5AF19C, #1FBF6B);
  border-radius: 50%;
  color: #fff;
  font-size: 65px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;

  margin-right: 30px; /* 👈 THIS */
}



/* Result text */
.result-bar p {
  margin: 0;
  font-size: 24px;
  font-weight: 700;

  color: #4a4a4a;
}
@media (max-width: 992px) {
  .result-bar {
    padding: 24px 28px;
    border-radius: 36px;
  }

  .result-icon {
    width: 130px;
    height: 90px;
    font-size: 44px;
    margin-right: 16px;
  }

  .result-bar p {
    font-size: 18px;
  }
}


/* end challenges section */
.explore-btn {
  background-color: #0aa38f;     /* teal green */
  color: #fff;

  font-size: 28px;
  font-weight: 600;

  padding: 22px 80px;           /* button size */
  border-radius: 30px;          /* pill shape */

  border: 5px solid #077f71;    /* thick solid border */
  cursor: pointer;

  transition: all 0.3s ease;
}

.explore-btn:hover {
  background-color: #077f71;
}