:root {
     --max-width: 1100px;
     --accent: #0b66ff;
     --accent-dark: #0047c2;
     --muted: #6b7280;
     --bg: #f7f8fb;
     --card: #ffffff;
     --radius: 14px;
     --gap: 1.5rem;
     --shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
     --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.1);
     font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
 }

 /* Smooth animations globally */
 * {
     box-sizing: border-box;
     transition: all 0.25s ease;
 }


 /* Body */
 body {
     margin: 0;
     background: var(--bg);
     color: #111827;
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 /* Headings */
 h1,
 h2,
 h3,
 h4 {
     font-weight: 600;
 }

 h1 {
     font-size: 2.4rem;
 }

 h2 {
     font-size: 20px;
     color: #363636;
 }

 h3 {
     font-size: 1.4rem;
 }

 h4 {
     font-size: 1.15rem;
 }

 /* Hero */
 .hero {
     padding: 4rem 0;
     background: #ffffff;
 }

 .lead {
     font-family: "Sora", Sans-serif;
     font-size: 44px;
     font-weight: 700;
     line-height: 1.2em;
     color: #202867;
 }

 .highlightcucss {
     color: #1B33B4;
     box-sizing: border-box;
     display: contents;
 }

 .hero h1 {
     font-size: 20px;
     background-color: #1B33B4;
     color: #fff;
     border-radius: 25px;
     text-align: center;
     width: fit-content;
     padding: 8px 12px;
     margin: 0 auto;
 }

 .hero h4 {
     font-family: "Sora", Sans-serif;
     font-size: 20px;
     font-weight: 400;
     color: #363636;
     margin-bottom: 20px;
 }

 .hero-content {
     text-align: center;
 }

 .hero-grid {
     display: flex;
     gap: 2rem;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
 }

 /* video */
 .video-wrapper {
     position: relative;
     display: inline-block;
     width: 100%;
     max-width: 700px;
     cursor: pointer;
 }

 .video-wrapper img {
     width: 100%;
     border-radius: 12px;
     display: block;
 }

 .play-button {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 2.5rem;
     color: white;
     background: rgba(0, 0, 0, 0.6);
     padding: 8px 15px 7px 16px;
     border-radius: 50%;
 }

 .posterdetails {
     width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
 }

 .details-grid {
     display: flex;
     gap: 16px;
     margin: 30px 0;
     flex-wrap: wrap;
     justify-content: center;
 }

 .detail-card {
     display: flex;
     align-items: center;
     border: 2px solid #2563eb;
     border-radius: 8px;
     padding: 15px;
     background: #fff;
     transition: transform 0.2s ease;
     width: 40%;
     justify-content: flex-start;
 }

 .detail-card:hover {
     transform: translateY(-3px);
 }

 .icon {
     background: #1B33B4;
     padding: 10px;
     border-radius: 8px;
     width: 40px;
     height: 40px;
     margin-right: 12px;
     flex-shrink: 0;
 }

 .icon svg {
     width: 100%;
     height: 100%;
     display: block;
     fill: #fff;
 }

 .text {
     text-align: left;
 }

 .text .label {
     font-size: 16px;
     line-height: 16px;
     color: #222;
     margin: 0;
     padding: 0;
 }

 .text .value {
     font-weight: bold;
     font-size: 18px;
     margin: 2px 0 0;
     color: #1b33b4;
 }

 .apply-btn {
     position: relative;
     display: inline-block;
     background-image: linear-gradient(90deg, #11AF5D 0%, #00E76F 100%);
     border-radius: 16px;
     padding: 20px 40px;
     /* more space for sweep */
     color: #fff;
     font-family: "Sora", Sans-serif;
     font-size: 20px;
     font-weight: 700;
     overflow: hidden;
     text-align: center;
     cursor: pointer;
 }

 .apply-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -50%;
     /* start outside */
     width: 50px;
     /* slightly wider for better effect */
     height: 100%;
     background: rgba(255, 255, 255, 0.3);
     /* slightly more visible */
     transform: skew(-20deg);
     filter: blur(8px);
     pointer-events: none;
     z-index: 0;
     animation: move 2s linear infinite;
 }

 @keyframes move {
     0% {
         left: -50%;
     }

     100% {
         left: 150%;
     }

     /* move completely across */
 }

 .program-details {
     text-align: center;
     font-family: Arial, sans-serif;
     margin: 40px auto;
     /* max-width: 800px; */
 }

 .section-title {
     font-family: "Sora", Sans-serif;
     font-size: 22px;
     font-weight: 600;
     color: #1B33B4;
 }

 .section-title::after {
     content: "";
     display: block;
     width: 60px;
     height: 3px;
     background: #fcd34d;
     /* yellow underline */
     margin: 6px auto 0;
     border-radius: 2px;
 }

 .sublead {
     font-family: "Sora", Sans-serif;
     font-size: 32px;
     font-weight: 700;
     line-height: 1.2em;
     text-align: center;
     color: #202867;
 }

 .sublead_highlite {
     color: #1B33B4;
     box-sizing: border-box;
 }

 .subtext {
     font-family: "Sora", Sans-serif;
     font-size: 20px;
     font-weight: 400;
     color: #363636;
     width: 80%;
     margin: 10px auto 20px;
 }

 /* Buttons */
 .btn-primary {
     display: inline-block;
     background: var(--accent);
     color: #fff;
     padding: .7rem 1.2rem;
     border-radius: 12px;
     text-decoration: none;
     font-weight: 600;
     box-shadow: var(--shadow);
 }

 .btn-primary:hover {
     background: var(--accent-dark);
     transform: translateY(-2px);
     box-shadow: var(--shadow-hover);
 }

 .btn-secondary {
     background: transparent;
     border: 1px solid rgba(16, 24, 40, 0.12);
     padding: .6rem 1rem;
     border-radius: 12px;
     font-weight: 500;
 }

 .btn-secondary:hover {
     background: rgba(11, 102, 255, 0.05);
     border-color: var(--accent);
     color: var(--accent);
 }

 /* Cards (Features, Flow, Mentor, etc.) */

 .feature {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
     gap: 20px;
     display: flex;
     padding: 20px;
     border: 1px solid #C3CBF2;
     border-width: 1px 1px 3px 1px;
     border-radius: 16px;
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
 }

 .detaillist {
     text-align: left;
 }

 .detaillist h4 {
     font-family: "Sora", Sans-serif;
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 8px;
     color: #1B33B4;
 }

 .detaillist p {
     font-family: "Sora", Sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 1.4em;
     color: #363636;
 }

 .feature,
 .flow-card_class {
     background: var(--card);
     padding: 1.2rem;
     border-radius: var(--radius);
     /* box-shadow: var(--shadow); */
     position: relative;
     overflow: hidden;
     margin-bottom: 15px;
     border: 1px solid #C3CBF2;
     border-width: 1px 1px 3px 1px;
     border-radius: 16px;
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
 }

 .feature:hover,
 .flow-card_class:hover {
     /* box-shadow: var(--shadow-hover); */
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
     /* transform: translateY(-2px); */
 }

 /* Images inside features */
 .feature img {
     height: 60px;
     width: 60px;
     object-fit: contain;
     border-radius: 10px;
     margin-bottom: .75rem;
 }

 .flexside {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;

 }

 .rightside {
     width: 49%;

 }

 .leftside {
     width: 49%;
     overflow: hidden;
     position: relative;
 }

 .clglib {
     width: 500px;
     height: 300px;
     object-fit: contain;
     position: sticky;
     top: 110px;
 }

 .flow-card {
     width: 45%;
     height: 730px;
 }


 /* CTA Section */
 .cta-section {
     background: linear-gradient(90deg, rgba(11, 102, 255, 0.08), transparent);
     padding: 3rem 2rem;
     border-radius: var(--radius);
     text-align: center;
 }

 .cta-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 2rem;
     justify-content: center;
     align-items: center;
 }



 /* ===== Section Headings ===== */
 section {
     position: relative;
 }

 section h2,
 section h3 {
     margin-bottom: 1rem;
     font-weight: 600;
     color: #222;
 }

 section p {
     margin-bottom: 1rem;
 }

 /* ===== Our Promise Section ===== */
 .ourSection {
     padding: 3rem 1rem;
     position: relative;
     text-align: center;
 }

 .ourPrice {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 20px;
     width: 72%;
     margin: 0 auto;
 }

 .ourPrice p {
     background: #fff;
     padding: 0.8rem 1rem;
     margin-bottom: 0.8rem;
     width: 45%;
     text-align: left;
     border: 1px solid #C3CBF2;
     border-width: 1px 1px 3px 1px;
     border-radius: 16px;
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
 }

 /* ===== Retreat Card Section ===== */
 .retreatCard {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
     flex-direction: column;
     align-items: center;
     gap: 2rem;
     padding: 2rem 1rem;
     max-width: 1100px;
     /* margin: 0 auto; */
 }

 .retreatCard img {
     max-width: 100%;
 }

 .reCard {
     display: flex;
     align-items: flex-start;
     gap: 2rem;
     justify-content: center;
 }


 .cardArea {
     flex: 1;
     min-width: 280px;
     height: 540px;
 }

 .villageImg {
     position: sticky;
     top: 120px;
     width: 100%;
     object-fit: contain;
 }

 .labelRetreat {
     display: flex;
     align-items: center;
     gap: 20px;
     margin-bottom: 1.5rem;
     padding: 0.8rem 1rem;
     border: 1px solid #C3CBF2;
     border-width: 1px 1px 3px 1px;
     border-radius: 16px;
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
 }

 .labelRetreat img {
     width: 50px;
     height: 50px;
     object-fit: contain;
 }

 .mindArea h3 {
     color: #1B33B4;
     font-size: 18px;
     letter-spacing: 0.5px;
 }

 .mindArea p {
     font-size: 16px;
     letter-spacing: 0.5px;
     color: #555;
 }

 /* ===== Retreat Section (Who Should Join) ===== */
 .retreatSection {
     background: #f9fbfc;
     padding: 3rem 1rem;
     text-align: center;
 }

 .retreatSection {
     flex-direction: column;
     align-items: center;
     margin-bottom: 2rem;
 }

 .retreatSection img {
     width: 70px;
     margin-bottom: 1rem;
 }

 .retreatpara {
     max-width: 600px;
     min-height: 80px;
 }

 .retreatNot {
     margin-top: 2rem;
     padding: 20px;
     text-align: center;
 }

 /* ===== Mentor Section ===== */
 .mentor-grid {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
     gap: 15px;
     padding: 10px;
     max-width: 1200px;
     margin: auto;
     justify-content: space-between;
 }

 .mentor-photo {
     width: 42%;
     margin: 0 auto;
     display: flex;
     justify-content: center;
     align-items: flex-start;

 }

 .mentor-photo img {
     width: 320px;
     border-radius: 12px;
     /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); */
 }

 .mentor-bio {
     width: 50%;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 1px 2px 11px #ccc;
     background: #fff;
 }

 .mentor-bio h4 {
     font-size: 21px;
     margin-bottom: 1rem;
     color: #444;
     margin-bottom: 20px;
 }

 .mentor-bio p {
     margin-bottom: 0.8rem;
     color: #222;
     font-size: 18px;
 }

 /* ===== Testimonial Section (Video) ===== */
 .textmonal {
     background: #fff;
     padding: 3rem 1rem;
     text-align: center;
 }

 .videoSection {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2rem;
     max-width: 1000px;
     margin: auto;
 }

 .yt-lite {
     position: relative;
     background: #000;
     border-radius: 12px;
     overflow: hidden;
     cursor: pointer;
 }


 .yt-lite img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .yt-lite .play-btn {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: rgba(0, 0, 0, 0.6);
     color: white;
     display: grid;
     place-items: center;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
 }

 .yt-lite .play-btn::after {
     content: "";
     display: block;
     margin-left: 6px;
     border-style: solid;
     border-width: 14px 0 14px 22px;
     border-color: transparent transparent transparent white;
 }

 .yt-lite .meta {
     position: absolute;
     left: 0;
     bottom: 0;
     right: 0;
     padding: 0.6rem;
     color: #fff;
     font-size: 0.95rem;
     background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
 }

 /* update Styles */
 .flow-grid {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 20px;
     padding: 10px;
     width: 85%;
     margin: 0 auto;
 }

 .card_class {
     display: flex;
     justify-content: flex-start;
     gap: 15px;
     padding: 10px 15px;
     margin: 10px 6px;
     border: 1px solid #C3CBF2;
     border-width: 1px 1px 3px 1px;
     border-radius: 16px;
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
 }

 .card_class img {
     width: 60px;
     height: 45px;
     object-fit: contain;
 }

 .details p {
     font-size: 16px;
 }

 .details h3 {
     color: #1B33B4;
     font-size: 19px;
     letter-spacing: 0.5px;
     margin: 5px auto;
 }

 .flow-card_class {
     height: 610px;
     width: 49%;
 }

 .flow-card_class h4 {
     color: #1B33B4;
     font-size: 19px;
     letter-spacing: 0.6px;
     padding: 10px 0;
     text-align: center;
 }

 .features-grid_gmi {
     display: flex;
     gap: 20px;
     justify-content: flex-start;
     align-items: flex-start;
     width: 80%;
     margin: 0 auto;
     height: 750px;
 }

 .flow-card p {
     background: var(--card);
     padding: 1.2rem;
     position: relative;
     overflow: hidden;
     margin-bottom: 15px;
     border: 1px solid #C3CBF2;
     border-width: 1px 1px 3px 1px;
     border-radius: 16px;
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
 }

 .retreatCard {
     margin-bottom: 15px;
     border: 1px solid #C3CBF2;
     border-width: 1px 1px 3px 1px;
     border-radius: 16px;
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
     width: 300px;
 }

 #mentor {
     background-color: #F1F3FF;
 }

 .retreatSec {
     position: relative;
     background-color: #F8F6F7;
 }

 .retreatArea {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
     gap: 2rem;
     padding: 2rem 1rem;
     max-width: 1100px;
     margin: 2rem auto;
 }

 .rankTopper {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 15px;
     width: 80%;
     margin: 10px auto;
 }

 .studentRank {
     width: 420px;
     height: 430px;
     object-fit: contain;
 }

 .RankList {
     border-radius: 12px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }

 .sectionalt {
     position: relative;
     padding: 20px 0;
     background-color: #F8F6F7;
 }

 .retreatRoom {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 20px;
     width: 90%;
     margin: 20px auto 0;
 }

 .reroom {
     width: 49%;
     height: 540px;
     position: relative;
 }

 .roomFee {
     width: 550px;
     position: sticky;
     top: 80px;
     border-radius: 16px;
 }

 .outcomes-list {
     list-style: none;
     /* remove default bullets */
     padding: 0;
     margin: 0;
 }

 .outcomes-list li {
     position: relative;
     padding-left: 35px;
     margin-bottom: 20px;
     font-size: 18px;
     line-height: 1.5;
     color: #333;
 }

 /* Add image before each li */
 .outcomes-list li::before {
     content: "" !important;
     position: absolute;
     left: 0;
     top: 4px;
     width: 22px;
     height: 22px;
     background: url('./asset/check.svg') no-repeat center center;
     background-size: contain;
 }

 .fullList {
     width: 50%;
     margin: 0 auto;
 }

 .notlist {
     list-style: none;
     /* remove default bullets */
     padding: 0;
     width: 100%;
     margin: 0;
     text-align: left;
 }

 .notlist li {
     position: relative;
     padding-left: 35px;
     margin-bottom: 20px;
     font-size: 18px;
     line-height: 1.5;
     color: #333;
 }

 /* Add image before each li */
 .notlist li::before {
     content: "" !important;
     position: absolute;
     left: 0;
     top: 4px;
     width: 22px;
     height: 22px;
     background: url('./asset/wrong.svg') no-repeat center center;
     background-size: contain;
 }

 /* ourPrice */
 .ourPrice p {
     position: relative;
     padding-left: 45px;
     height: 95px;
 }

 /* Add image before each li */
 .ourPrice p::before {
     content: "" !important;
     position: absolute;
     left: 10px;
     top: 22px;
     width: 22px;
     height: 22px;
     background: url('./asset/tick.svg') no-repeat center center;
     background-size: contain;
 }

 .headtext {
     font-family: "Sora", Sans-serif;
     font-size: 32px;
     font-weight: 700;
     line-height: 1.2em;
     text-align: center;
     color: #1B33B4;
 }

 .paralite {
     font-size: 18px;
     letter-spacing: 0.5px;
     line-height: 24px;
     padding: 10px 0;
 }

 /* .faqSection {} */
 .faqSection {
     font-family: "Inter", sans-serif;
     max-width: 900px;
     margin: 0 auto;
     padding: 40px 20px;
 }


 .faq details {
     border-radius: 12px;
     margin-bottom: 12px;
     overflow: hidden;
     background: #f8f8f8;
     transition: all 0.3s ease;
 }

 .faq details[open] {
     background: #eef2ff;
     border: 1px solid #1e40af;
 }

 .faq summary {
     cursor: pointer;
     padding: 18px 20px;
     font-weight: 600;
     font-size: 17px;
     color: #111;
     position: relative;
     list-style: none;
 }

 .faq summary::marker {
     display: none;
 }

 .faq summary::after {
     content: "+" !important;
     position: absolute;
     right: 20px;
     top: 16px;
     font-size: 22px;
     color: #111;
     transition: transform 0.3s ease;
 }

 .faq details[open] summary::after {
     content: "−" !important;
     color: #fff;
 }

 .faq details[open] summary {
     background-color: #1e40af;
     color: #fff;
 }

 .faq p {
     padding: 16px 20px;
     font-size: 16px;
     line-height: 1.6;
     color: #333;
     background-color: #f5f7ff;
     margin: 0;
 }

 /* arrow.svg */
 .texticon p {
     position: relative;
     padding-left: 45px;
     height: 95px;
 }

 /* Add image before each li */
 .texticon p::before {
     content: "" !important;
     position: absolute;
     left: 10px;
     top: 22px;
     width: 22px;
     height: 22px;
     background: url('./asset/arrow.svg') no-repeat center center;
     background-size: contain;
 }

 #program-flow {
     background: #F1F3FF;
     position: relative;
     padding: 20px 0;
 }

 /* Responsive */
 @media (max-width:980px) {
     .hero-grid {
         grid-template-columns: 1fr;
         text-align: center;
     }

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

     .mentor-grid {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .cta-grid {
         flex-direction: column;
         gap: 1.5rem;
     }
 }