:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-25163d3 */.video-play{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:68px;
    height:68px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.92);

    display:flex;

    justify-content:center;
    align-items:center;

    cursor:pointer;

    box-shadow:0 15px 40px rgba(0,0,0,.28);

    transition:.35s ease;

    z-index:10;

}

.play-icon{

    width:0;
    height:0;

    border-top:10px solid transparent;
    border-bottom:10px solid transparent;

    border-left:16px solid #5461E3;

    margin-left:4px;

    transition:.35s ease;

}

.video-play:hover{

    background:#5461E3;

    transform:translate(-50%,-50%) scale(1.08);

}

.video-play:hover .play-icon{

    border-left-color:#ffffff;

}

.video-card{

    position:relative;

    overflow:hidden;

    border-radius:10px;

}

/*=========================
ABOUT HERO
==========================*/

.about-hero{

    padding:90px 0;

    background:#ffffff;

}

.about-container{

    max-width:1440px;

    margin:auto;

    padding:0 150px;

    display:grid;

    grid-template-columns:42% 58%;

    align-items:center;

    gap:80px;

}

/*=========================
LEFT
==========================*/

.about-label{

    display:inline-block;

    margin-bottom:18px;

    font-family:"Montserrat",sans-serif;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    color:#5461E3;

}

.about-title{

    margin-bottom:24px;

    font-family:"Montserrat",sans-serif;

    font-size:48px;

    font-weight:700;

    line-height:1.15;

    color:#111;

}

.about-text{

    max-width:520px;

    font-family:"Poppins",sans-serif;

    font-size:16px;

    line-height:1.9;

    color:#555;

}

/*=========================
RIGHT
==========================*/

.about-gallery{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}

.img{

    overflow:hidden;

    border-radius:10px;

}

.img img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:.6s ease;

}

.img:hover img{

    transform:scale(1.05);

}

/* Layout */

.img-1{

    height:280px;

}

.img-2{

    margin-top:50px;

    height:280px;

}

.img-3{

    margin-top:-40px;

    height:280px;

}

.img-4{

    margin-top:10px;

    height:280px;

}

/*=========================
TABLET
==========================*/

@media(max-width:1024px){

.about-container{

    grid-template-columns:1fr;

    padding:0 64px;

    gap:70px;

}

.about-title{

    font-size:42px;

}

.about-text{

    max-width:100%;

}

}

/*=========================
MOBILE
==========================*/

@media(max-width:768px){

.about-hero{

    padding:80px 0;

}

.about-container{

    padding:0 24px;

    gap:50px;

}

.about-title{

    font-size:34px;

}

.about-gallery{

    gap:8px;

}

.img{

    margin:0!important;

    height:180px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-41816d6 */.vision-section {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  background: #fff;
}

.vision-container {
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 150px;
  display: grid;
  grid-template-columns: 620px 1fr;
  gap: 100px;
  align-items: start;
}

.vision-image {
  position: relative;
  width: 100%;
  max-width: 620px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  height: 420px;    /* ← single correct value */
}

.vision-image > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.vision-card {
  position: absolute;
  width: 260px; bottom: 24px; right: -40px;
  background: #fff; border-radius: 12px;
  overflow: hidden; box-shadow: 0 18px 45px rgba(0,0,0,.12);
}

.vision-right {
  position: sticky;
  top: 120px;
  align-self: start;
  max-width: 520px;
}

/* ── 1200px ── */
@media (max-width: 1200px) {
  .vision-container { padding: 0 80px; gap: 70px; }
  .vision-title     { font-size: 40px; }
  .vision-card      { width: 240px; right: -20px; }
}

/* ── 1024px — single column ── */
@media (max-width: 1024px) {
  .vision-container {
    grid-template-columns: 1fr;
    padding: 0 64px;
    gap: 60px;
  }
  .vision-image  { height: 420px; max-width: 620px; margin: auto; }
  .vision-card   { right: 20px; }
  .vision-right  { position: static; max-width: 100%; }
  .vision-title  { font-size: 38px; }
}

/* ── 768px ── */
@media (max-width: 768px) {
  .vision-section   { padding: 80px 0; }
  .vision-container { padding: 0 24px; gap: 50px; }
  .vision-title     { font-size: 32px; line-height: 1.2; margin-bottom: 35px; }
  .vision-image     { height: 260px; max-width: 100%; }
  .vision-card      { width: 170px; right: 12px; bottom: 12px; }
  .vision-right h3  { font-size: 24px; }
  .vision-right p   { font-size: 15px; }
}

/* ── 480px ── */
@media (max-width: 480px) {
  .vision-container { padding: 0 20px; }
  .vision-title     { font-size: 28px; }
  .vision-card      { width: 140px; right: 8px; bottom: 8px; }
  .vision-right h3  { font-size: 22px; }
  .vision-right p   { font-size: 14px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d33258f */.vision-section {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  background: #fff;
}

.vision-container {
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 150px;
  display: grid;
  grid-template-columns: 620px 1fr;
  gap: 100px;
  align-items: start;
}

.vision-image {
  position: relative;
  width: 100%;
  max-width: 620px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  height: 420px;    /* ← single correct value */
}

.vision-image > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.vision-card {
  position: absolute;
  width: 260px; bottom: 24px; right: -40px;
  background: #fff; border-radius: 12px;
  overflow: hidden; box-shadow: 0 18px 45px rgba(0,0,0,.12);
}

.vision-right {
  position: sticky;
  top: 120px;
  align-self: start;
  max-width: 520px;
}

/* ── 1200px ── */
@media (max-width: 1200px) {
  .vision-container { padding: 0 80px; gap: 70px; }
  .vision-title     { font-size: 40px; }
  .vision-card      { width: 240px; right: -20px; }
}

/* ── 1024px — single column ── */
@media (max-width: 1024px) {
  .vision-container {
    grid-template-columns: 1fr;
    padding: 0 64px;
    gap: 60px;
  }
  .vision-image  { height: 420px; max-width: 620px; margin: auto; }
  .vision-card   { right: 20px; }
  .vision-right  { position: static; max-width: 100%; }
  .vision-title  { font-size: 38px; }
}

/* ── 768px ── */
@media (max-width: 768px) {
  .vision-section   { padding: 80px 0; }
  .vision-container { padding: 0 24px; gap: 50px; }
  .vision-title     { font-size: 32px; line-height: 1.2; margin-bottom: 35px; }
  .vision-image     { height: 260px; max-width: 100%; }
  .vision-card      { width: 170px; right: 12px; bottom: 12px; }
  .vision-right h3  { font-size: 24px; }
  .vision-right p   { font-size: 15px; }
}

/* ── 480px ── */
@media (max-width: 480px) {
  .vision-container { padding: 0 20px; }
  .vision-title     { font-size: 28px; }
  .vision-card      { width: 140px; right: 8px; bottom: 8px; }
  .vision-right h3  { font-size: 22px; }
  .vision-right p   { font-size: 14px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-49ad14d *//* =============================================
   BPP — GLORIOUS DECADE  (REBUILT)
   Single synchronized horizontal track —
   year + image + text move as ONE rigid unit
   per milestone. Cannot desync by construction.
   gd- namespace — WordPress safe
   ============================================= */

.gd-section *, .gd-section *::before, .gd-section *::after,
.gd-next    *, .gd-next    *::before, .gd-next    *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #111;
}
img { display: block; max-width: 100%; }

/* =============================================
   SECTION — scroll canvas
   Height MUST equal exactly:
     (milestoneCount × 100vh) + 100vh
   The "+100vh" is the single extra scroll-viewport
   needed so progress 0→1 maps cleanly onto the
   track's travel 0→(N-1) viewports BEFORE the
   sticky panel releases. Without it, the sticky
   panel unpins mid-transition and milestone 2026
   never reaches full view (this was the bug found
   in browser testing — confirmed fixed below).
   3 milestones → 4 × 100vh = 400vh. Correct as-is;
   the actual bug was in the JS travel calculation
   reading the wrong base width — see script.js.
   ============================================= */
.gd-section {
  --gd-total: 400vh;
  position: relative;
  height: var(--gd-total);
  background: #fff;
}

/* =============================================
   STICKY "SCREEN"
   10% GLORIOUS | 20% DECADE | 70% milestone stage
   ============================================= */
.gd-sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 10fr 20fr 70fr;
  background: #fff;
}

/* ── Title rows ── */
.gd-title-row {
  display: flex;
  align-items: center;
  padding: 0 clamp(20px, 4vw, 60px);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.gd-word {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.gd-word--glorious {
  color: #7b91e3;
  font-size: clamp(40px, 8.2vh, 96px);
}

.gd-word--decade {
  color: #5461E3;
  font-size: clamp(64px, 15.5vh, 190px);
}

/* =============================================
   STAGE — the 70% row holding the track
   ============================================= */
.gd-stage {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3.5vh, 48px) 0 clamp(24px, 4vh, 56px);
}

/* =============================================
   TRACK — flex row, one milestone per "page"
   JS translates this ENTIRE element on the X axis.
   Width = milestoneCount × 100%, so each child
   is exactly one viewport wide.
   ============================================= */
.gd-track {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 300%;              /* 3 milestones × 100% */
  will-change: transform;
  transform: translateX(var(--tx, 0%));
}

/* =============================================
   MILESTONE — one synchronized unit
   Year + image + text live together here.
   They physically cannot separate because
   they share one transform on the parent track.
   ============================================= */
.gd-milestone {
  flex: 0 0 33.3333%;      /* exactly one third of the 300% track  */
  width: 33.3333%;
  height: 100%;
  display: grid;
  grid-template-columns: 38% 62%;
  gap: clamp(20px, 3vw, 50px);
  padding: 0 clamp(20px, 4vw, 60px);
}

/* ── Image column ── */
.gd-milestone__image {
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

.gd-milestone__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Text/body column ── */
.gd-milestone__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-right: clamp(10px, 2vw, 30px);
}

.gd-milestone__year {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 7.5vh, 130px);
  color: #111;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: clamp(20px, 3vh, 36px);
}

.gd-milestone__heading {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(16px, 2.4vh, 22px);
  font-weight: 700;
  color: #111;
  margin-bottom: clamp(12px, 2vh, 18px);
  line-height: 1.3;
}

.gd-milestone__para {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(12px, 1.6vh, 15px);
  font-weight: 400;
  color: #555;
  line-height: 1.85;
  margin-bottom: clamp(10px, 1.6vh, 16px);
  max-width: 460px;
}

.gd-milestone__para:last-child {
  margin-bottom: 0;
}

/* =============================================
   DOT PROGRESS INDICATOR
   Bottom-centre, shows which milestone is active.
   JS toggles .gd-dot--active.
   ============================================= */
.gd-dots {
  position: absolute;
  bottom: clamp(8px, 1.5vh, 16px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}

.gd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8dcf5;
  transition: background 0.3s ease, transform 0.3s ease;
}

.gd-dot--active {
  background: #5461E3;
  transform: scale(1.3);
}

/* =============================================
   NEXT SECTION
   ============================================= */
.gd-next {
  background: #fff;
  padding: 100px clamp(24px, 5vw, 150px);
  text-align: center;
}

.gd-next__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #5461E3;
  margin-bottom: 14px;
}

.gd-next__heading {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  color: #111;
  line-height: 1.15;
}

/* =============================================
   RESPONSIVE — TABLET (≤900px)
   Image stacks above text within each milestone
   ============================================= */
@media (max-width: 900px) {
  .gd-section { --gd-total: 450vh; }

  .gd-milestone {
    grid-template-columns: 1fr;
    grid-template-rows: 38% 62%;
    row-gap: clamp(16px, 2.5vh, 28px);
  }

  .gd-milestone__body { padding-right: 0; }
  .gd-milestone__year { font-size: clamp(40px, 6.5vh, 90px); }
}

/* =============================================
   RESPONSIVE — MOBILE (≤600px)
   ============================================= */
@media (max-width: 600px) {
  .gd-section { --gd-total: 500vh; }

  .gd-word--glorious { font-size: clamp(32px, min(7.5vh, 11vw), 56px); }
  .gd-word--decade   { font-size: clamp(48px, min(14vh, 16vw), 100px); }

  .gd-milestone {
    grid-template-columns: 1fr;
    grid-template-rows: 32% 68%;
    row-gap: 14px;
    padding: 0 20px;
  }

  .gd-milestone__image { border-radius: 12px; }

  .gd-milestone__year {
    font-size: clamp(40px, 11vh, 72px);
    margin-bottom: 12px;
  }

  .gd-milestone__heading { font-size: 17px; margin-bottom: 10px; }
  .gd-milestone__para    { font-size: 13.5px; max-width: 100%; }

  .gd-dots { bottom: 8px; }
}

/* =============================================
   REDUCED MOTION — static stacked fallback
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .gd-section { height: auto; }

  .gd-sticky {
    position: relative;
    height: auto;
    display: block;
    overflow: visible;
  }

  .gd-title-row { padding: 40px clamp(20px, 4vw, 60px) 0; }

  .gd-stage { overflow: visible; padding: 40px 0; }

  .gd-track {
    width: 100%;
    flex-direction: column;
    transform: none !important;
    gap: 60px;
  }

  .gd-milestone {
    width: 100%;
    flex: none;
    height: auto;
    grid-template-columns: 1fr 1fr;
    padding: 0 clamp(20px, 4vw, 60px);
  }

  .gd-milestone__image { height: 320px; }

  .gd-dots { display: none; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-af97deb *//*======================================
FOUNDER SECTION
======================================*/

.founder-section{

    padding:80px 0;

    background:#ffffff;

}

.founder-container{

    max-width:1440px;

    margin:auto;

    padding:0 150px;

    position:relative;

}

/*========================
QUOTE ICON
========================*/

.quote-icon{

    position:absolute;

    left:120px;

    top:-60px;

    font-size:200px;

    line-height:1;

    color:rgba(84,97,227,.3);

    font-family:Georgia, serif;

    pointer-events:none;

}

/*========================
CARD
========================*/

.founder-card{

    display:grid;
    
    overflow:hidden;

    grid-template-columns:34% 66%;

    gap:40px;

    align-items:center;

    padding:36px;

    min-height:360px;

    border-radius:20px;

    background:linear-gradient(135deg,#F7F8FF,#EEF1FF);

    box-shadow:0 18px 50px rgba(0,0,0,.08);

}
/*========================
IMAGE
========================*/

.founder-image{

    width:100%;

    aspect-ratio:4 / 5;

    max-height:380px;

    min-height:260px;

    overflow:hidden;

    border-radius:16px;

}

.founder-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

    border-radius:16px;

}
/*========================
CONTENT
========================*/
.founder-content{

    width:100%;

    max-width:100%;

    overflow:hidden;
    
      padding-right:30px;

}

.founder-message{

    font-family:"Poppins",sans-serif;

    font-size:18px;

    line-height:1.9;

    color:#404040;

    margin-bottom:32px;

    word-break:normal;

    overflow-wrap:break-word;

}

.founder-info h4{

    font-family:"Montserrat",sans-serif;

    font-size:24px;

    font-weight:700;

    color:#111;

    margin-bottom:8px;

}

.founder-info span{

    font-family:"Poppins",sans-serif;

    font-size:15px;

    color:#666;

}

/*========================
RESPONSIVE
========================*/
@media (max-width:1024px){

    .founder-card{

        grid-template-columns:1fr;

        gap:30px;

        padding:32px;

    }

    .founder-image{

        max-width:420px;

        width:100%;

        margin:0 auto;

        aspect-ratio:4 / 5;

        max-height:none;

    }

    .founder-content{

        text-align:center;

        padding-right:0;

    }

}

@media(max-width:992px){

    .founder-card{

        grid-template-columns:1fr;

        padding:32px;

        gap:32px;

    }

    .founder-image{

        height:320px;

    }

    .founder-image img{

        height:100%;

    }

    .founder-content{

        text-align:center;

    }

}


@media (max-width:768px){

    .founder-section{

        padding:80px 0;

    }

    .founder-container{

        padding:0 24px;

    }

    .founder-card{

        display:flex;

        flex-direction:column;

        padding:24px;

        gap:24px;

    }

    .founder-image{

        width:100%;

        height:240px;

        border-radius:16px;

        overflow:hidden;

    }

    .founder-image img{

        width:100%;

        height:100%;

        object-fit:cover;

        object-position:center;

    }

    .founder-content{

        width:100%;

        text-align:left;

        padding:0;

    }

    .founder-message{

        font-size:16px;

        line-height:1.8;

        margin-bottom:24px;

    }

    .founder-info h4{

        font-size:22px;

    }
    
    .quote-icon{

        font-size:155px;

        top:px;

        left:16px;

        opacity:1;

    }

}/* End custom CSS */