/* Updated @font-face with correct relative paths */

@font-face {
    font-family: 'STC Forward';
    /* The ../ moves out of the css folder */
    src: url('../fonts/STCForward-ExtraBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'STC Forward';
    src: url('../fonts/STCForward-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'STC Forward';
    src: url('../fonts/STCForward-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'STC Forward';
    src: url('../fonts/STCForward-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'STC Forward';
    src: url('../fonts/STCForward-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
/* Example usage */




html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* Prevents vertical scrolling entirely */
}
body {
    font-family: 'STC Forward' ,roboto,arial,sans-serif !important;
}
       :root {
            --primary-color: #4f008c;
            --accent-color: #ff375e;
            --text-color: #333;
            --light-bg: #f9f9f9;
        }
        
        * {
              
            margin: 0;
            padding: 0;
            box-sizing: border-box;




        }
        
.mt-4-new{margin-top:4%;}
.cursor {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 3px solid #ff375e;
  transition: all 200ms ease-out;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  z-index:9999;
  transform: translate(calc(-50% + 15px), -50%);
}

.cursor2 {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #fff;
  opacity: .5;
  position: fixed;
   z-index:9999;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width .3s, height .3s, opacity .3s;
}
.horizontal-wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
}



        html, body {
    margin: 0;
    width: 100%;
    color: var(--text-color);
     background-color: #4f008c !important;
    height: 100%;
    overflow: hidden;   /* VERY IMPORTANT */
}
        /* Header Styles */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding:10px 5%;
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
        
        }
        
        .logo {
            height: 40px;
            transition: all 0.3s ease;
        }
        
        nav {
            position: relative;
        }
        
        nav ul {
            display: flex;
            list-style: none;
            gap: 30px;
        }
        
        nav a {
            text-decoration: none;
            color: #4f008c;
            font-weight: 500;
            position: relative;
            padding: 5px 0;
            transition: color 0.3s;
            white-space: nowrap;
        }
        
        nav a:hover {
            color: #ff375e;
        }
        
        nav a.active {
            color: #ff375e;
        }
        
        .active-indicator {
            position: absolute;
            bottom: -5px;
            height: 3px;
            background-color: var(--accent-color);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 2px;
        }
        
        .download-btn {
         color: #ff375f;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 28px;
    cursor: pointer;
    transition: background-color 0.3s;
    white-space: nowrap;
    margin-right: 10%;

        }
        

        
        /* Main Container for Horizontal Scrolling */
   /* Horizontal Scroll Container */
.horizontal-scroll-container {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100); /* FIXED */
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: auto;
    scroll-snap-type: none;
    background-color: #4f008c;
}

/* Hide scrollbar */
.horizontal-scroll-container::-webkit-scrollbar {
    display: none;
}
.horizontal-scroll-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

p{    font-size: 15px !important;
    padding: 5px 0 !important;
    line-height: 145%;
color:#fff;}

.hero-video {
    /* Position it relative to the #home section, not the text divs */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100vw; /* Force 100% of the viewport width */
    height: 100vh; /* Force 100% of the viewport height */
    
    /* This is the most important part */
    object-fit: cover; 
    
    /* Ensure it stays behind everything */
    z-index: -1; 
    pointer-events: none; /* Allows clicks to pass through to the buttons */
}

.hero-video-risk{
    /* Position it relative to the #home section, not the text divs */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100vw; /* Force 100% of the viewport width */
    height: 100vh; /* Force 100% of the viewport height */
    
    /* This is the most important part */
    object-fit: cover; 
    
    /* Ensure it stays behind everything */
    z-index: -1; 
    pointer-events: none; /* Allows clicks to pass through to the buttons */

}

.video-overlay-investment {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #4f008cd3;/* Your #4f008c46 color */
    z-index: 0; /* Sits above video (-1) but below content */
    pointer-events: none;
}




.hero-video-investment{
    /* Position it relative to the #home section, not the text divs */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100vw; /* Force 100% of the viewport width */
    height: 100vh; /* Force 100% of the viewport height */
    
    /* This is the most important part */
    object-fit: cover; 
    
    /* Ensure it stays behind everything */
    z-index: -1; 
    pointer-events: none; /* Allows clicks to pass through to the buttons */





}

.hero-video-investment1{

    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;

}





.video-overlay123 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #4f008cb2;/* Your #4f008c46 color */
    z-index: 0; /* Sits above video (-1) but below content */
    pointer-events: none;
}


.hero-video-investment:after{
    background-color:#4f008c46;
}


#home {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden; /* This hides any video "overlap" */
}

.scene, .scene1 {
    position: relative;
    z-index: 10;
}

/* Sections */
.horizontal-scroll-container > section {
  min-width: 100vw;
    height: calc(var(--vh, 1vh) * 100); /* FIXED */
    flex-shrink: 0;
    position: relative;
    overflow: hidden;

}
        
        /* Section content container */
        .section-content {
            display: flex;
            width: 100%;
            height: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
        }
        
        /* Hide scrollbar for section content */
        .section-content::-webkit-scrollbar {
            display: none;
        }
        
        .section-content {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        /* Content pages */
        .content-page {
 min-width: 100vw;
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100); /* PERFECT viewport fit */
    box-sizing: border-box;
    padding: clamp(40px, 5vh, 80px) 1% clamp(20px, 5vh, 50px); /* RESPONSIVE padding */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; /* prevent internal overflow */
    background-color: #4f008c;
        }


 .content-page-year-review {
    min-width: 130vw;
    width: 130vw;
    height: calc(var(--vh, 1vh) * 100); /* FIXED */
    padding: clamp(40px, 5vh, 80px) 0 clamp(20px, 5vh, 50px);
    flex-shrink: 0;
    background: #4f008c;
    background-size: 50%;
    box-sizing: border-box;
 }


.journey-content{
    background-color: #ffffff;
    padding: 30px 20px;
    border-left: 20px solid #ff375e;
}
.journey-content p{color:#4f008c;}


            .content-page-journey-text {
     width: 65vw;
    height: 100vh;
    scroll-snap-align: start;
    padding: 80px 50px;
      flex-shrink: 0;
    background-color:#4f008c;
        }


           .content-page-nobg {
         min-width: 100vw;
    width: 100vw;
    scroll-snap-align: start;
    padding: 0;
     flex-shrink: 0;

        }
        
        /* Progress indicator */
        .progress-indicator {
            position: fixed;
            top: 50%;
            right: 30px;
            transform: translateY(-50%);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .progress-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            border: 2px solid var(--primary-color);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .progress-dot.active {
            background: var(--accent-color);
            transform: scale(1.2);
        }
        
        .progress-dot:hover {
            background: var(--accent-color);
        }
        
        /* Content Styling */
        .page-title {
            font-size: 3rem;
            margin-bottom: 20px;
            color: var(--primary-color);
            position: relative;
            display: inline-block;
            margin-bottom:30px;
        }
        

      .page-title1 {
            font-size: 3rem;
            margin-bottom: 20px;
            color: #fff;
            position: relative;
            display: inline-block;
            font-weight:600;
            margin-bottom:30px;
        }


        .page-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 80px;
            height: 4px;
       
            border-radius: 2px;
        }
        
        .section-title {
            font-size: 1.8rem;
            margin: 25px 0 15px;
            color: var(--primary-color);
        }
        
     
        
        .stats-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin:5px 19% 0 0%
        }
        
        .stat-box {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            flex: 1;
            min-width: 200px;
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .stat-box:hover {
            transform: translateY(-5px);
        }
        
        .stat-value {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        .stat-label {
            font-size: 1rem;
            color: var(--text-color);
        }
        
        .highlight-box {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
            border-left: 5px solid var(--accent-color);
        }
        
        .quote {
            font-style: italic;
            font-size: 1.2rem;
            color: var(--primary-color);
            text-align: center;
            margin: 30px 0;
            padding: 20px;
            border-top: 2px solid var(--accent-color);
            border-bottom: 2px solid var(--accent-color);
        }
        
        .person {
            font-weight: bold;
            margin-top: 10px;
            text-align: right;
        }
        
        /* Section-specific styles */
        #company-profile{
            background-color: #4f008c;
            color: #fff;
        }
        
        #company-profile .page-title {
            color: #fff;
        }
        
      

        /* Hero section styles */
        .hero{
        
            width: 100%;
            height: 100%;
          
            padding: 60px 5%;
            display: flex;
             justify-content: left;
            color: #1d1d1d;
        }

        /* Background video */
        .hero-video{
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index:0;
         
        
        }

                .hero-video2{
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            z-index:0;
            opacity: 0.3;
        }


        /* Purple overlay */
        .video-overlay{
             position: absolute;
    inset: 0;

    z-index: 0;
        }

        /* Nodes Canvas */
        #nodes-canvas{
            position: absolute;
            inset: 0;
            z-index:1;
        }

        .hero-inner{
            display: flex;

         
            align-items: center;
            justify-content: space-between;
            gap: 40px;
        }

        /* LEFT TEXT */
        .hero-copy{
            max-width: 100%;
            margin-top:18%;
            z-index:1;
 
        }

        .eyebrow{
            color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    font-size: 14px;
    border: 1px solid #fff;
    padding: 10px;
    border-radius: 20px;
    text-align: center;
    width: 230px;
    position: absolute;
    bottom: 65px;
    right: 53px;
        }

        .hero-copy h1{
            font-size: 40px;
            line-height: 1.2;
            color: #fff;
        }

        .lead{
            font-size: 45px;
            line-height: 62px;
            color: #fff;
            font-weight: 500;
            width:450px;
        }

        .cta-row{
            display: flex;
            gap: 15px;
        }

        .btn{
            padding: 12px 26px;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            cursor: pointer;
            transition: 0.3s;
        }

        .btn-primary{
            background: #ff375e;
            color: #fff;
        }

        .btn-primary:hover{
            background: #fff;
        }

        .btn-ghost{
            background: #fff;
            border: 2px solid #ff375e;
            color: #ff375e;
        }

        /* Stats */
        .stats{
            display: flex;
            gap: 20px;
            font-weight: bold;
            color: #4f008c;
        }

        /* RIGHT CARD */
        .hero-card{
            position: relative;
            width: 520px;
            height: 380px;
            border-radius: 30px;
        }

        .curves div{
            position: absolute;
            width: 180%;
            height: 180%;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff375e, #4f008c);
            opacity: 0.28;
            filter: blur(60px);
        }

        .curve-left{
            left: -60%;
            top: -40%;
        }

        .curve-right{
            right: -60%;
            bottom: -40%;
        }

        .visual-wrap{
            position: relative;
            z-index: 5;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .visual-wrap img{
            max-width: 100%;
            border-radius: 20px;
        }

        /* Responsive */
        @media(max-width: 900px){
            .hero-inner{
                flex-direction: column;
                text-align: center;
            }
            .hero-card{
                width: 90%;
            }
        }

        .play-container {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 20px;
        }

        /* Circular text */
        .circle-text svg {
            width: 200px;
            height: 200px;
            animation: spin 10s linear infinite;
        }

        .circle-text text {
            fill: #fff;
            font-size: 18px;
            letter-spacing: 3px;
            text-transform: uppercase;
            font-weight: bold;
        }

        /* Rotation */
        @keyframes spin {
            100% {
                transform: rotate(360deg);
            }
        }

        /* Main Play Button */
        .play-btn {
            width: 100px;
            height: 100px;
            background: radial-gradient(rgba(255, 55, 94, 0.8) 60%, rgba(255, 255, 255, 1) 62%);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0px 0px 25px 3px rgba(255, 55, 94, 0.8);
            cursor: pointer;
        }

        /* Triangle Play Icon */
        .play-btn::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-35%) translateY(-50%);
            width: 0;
            height: 0;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-left: 25px solid white;
        }

        /* Pulsating glow */
        .play-btn::before {
            content: "";
            position: absolute;
            width: 150%;
            height: 150%;
            top: -25%;
            left: -25%;
            border-radius: 50%;
            border: 5px solid rgba(255, 255, 255, 0.7);
            animation: pulse 2s infinite;
        }

        /* Pulse Animation */
        @keyframes pulse {
            0% { transform: scale(0.6); opacity: 1; }
            100% { transform: scale(1.3); opacity: 0; }
        }
        
        .ml2 {
            font-weight: 900;
            font-size: 3.5em;
        }

        .ml2 .letter {
            display: inline-block;
            line-height: 1em;
        }
        
        .ml12 {
            font-weight: 600;
            font-size: 14px;
        }

        .ml12 .letter {
            display: inline-block;
            line-height: 5px;
        }
        
        .float-img {
            animation: floatUpDown 4s ease-in-out infinite;
        }

        @keyframes floatUpDown {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }

        .about-us-img{
            height: 465px;
            border-radius: 20px;
            border: 5px solid #ffffff63;
        }
        
        .two-columns {
            display: flex;
            align-items: top;
            gap: 40px;
            padding: 50px 0;
        }

        .about-us {
            flex: 1;
        }

        .text-container h1 {
            font-size: 45px;
            margin-bottom: 20px;
        }

        .text-container p {
            font-size: 18px;
            line-height: 1.9;
            color: #fff;
        }
        
        .btn-more{
            width: 140px !important;
            border-radius: 10px !important;
            border: 2px solid #ffffff9c !important;
        }

        @media (max-width:1024px) {

            .reach_bg {
    background: #4f008c url(../images/reach3.jpg) 93% fixed no-repeat !important;
    background-size: cover;
    position: relative;
    z-index: 1;
}
            /* Mobile styles */
            body {
                overflow-y: auto;
                height: auto;
            }

            header {
                flex-direction: row;
                justify-content: space-between;
                padding: 10px 20px;
            }

            nav { display: none; }
       /*      .download-btn { display: none; } */


            .horizontal-scroll-container {
                flex-direction: column;
                overflow-x: hidden;
                overflow-y: auto;
                height: auto;
                scroll-snap-type: y mandatory;
            }

      

            .section-content {
                flex-direction: column;
            }

            .content-page {
                width: 100%;
                height: auto;
                padding: 120px 20px 50px;
            }

            .two-columns {
                flex-direction: column;
                text-align: center;
            }

            .text-container h1 {
                font-size: 36px;
            }
            
            .progress-indicator {
                display: none;
            }
        }

       .counter-section {
    /* Styles for the main container */
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 40px 20px;
    background-color: #333; /* Dark background for visibility */
    color: #fff;
    /* You may need height/margin on surrounding elements to allow scrolling */
}

.counter-box {
    /* Styles for each individual statistic box */
    text-align: center;
    border: 1px solid #555;
    border-radius: 10px;
    padding: 20px;
    min-width: 150px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.counter-value {
    /* Styles for the number and symbol container */
    display: block;
    font-size: 48px;
    font-weight: bold;
    color: #ff375e; /* Highlight color */
    line-height: 1;
}

.counter-number {
    /* The part that gets animated */
    display: inline-block;
}

.counter-symbol {
    /* The unit/symbol (like %, +) */
    font-size: 70%;
    margin-left: 5px;
}

.counter-label {
    /* Styles for the description text */
    margin-top: 10px;
    font-size: 14px;
    color: #aaa;
    font-weight: normal;
}

.ml3 {
    visibility: visible !important;
}

.ml3 .letter {
    /* Remove opacity rules and use transform instead */
    display: inline-block;
}
        /* Each stat delays slightly */
        .stat:nth-child(1) .value { animation-delay: 0.1s; }
        .stat:nth-child(2) .value { animation-delay: 0.3s; }
        .stat:nth-child(3) .value { animation-delay: 0.5s; }
        .stat:nth-child(4) .value { animation-delay: 0.7s; }
        
        .our-brand {
            max-width: 500px; 
            border: 1px solid #fff; 
            border-radius: 30px;
        }
        
        /* Scroll hint */
        .scroll-hint {
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: var(--accent-color);
            font-size: 18px;
            animation: bounce 2s infinite;
            display: none;
            background: rgba(255,255,255,0.9);
            padding: 10px 15px;
            border-radius: 20px;
            font-weight: bold;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(0);
            }
            40% {
                transform: translateX(-10px);
            }
            60% {
                transform: translateX(-5px);
            }
        }

        /* Show hint when there are multiple pages */
        .section-content:has(.content-page:nth-child(2)) .scroll-hint {
            display: block;
        }

        /* Ensure sections are visible */
   

  .year-in-reivew-text{
    
    
    background:url(../images/year-in-review1.png) top right no-repeat;
    background-size:cover;
    margin-top:0;


}


  .year-in-reivew-text1{

    background-color: #ffffffcc;
    color: #4f008c;
    width: 29%;

    padding: 30px;

   

  }
        #financial-highlights,
        #statements,
        #market-review,
        #key-milestones
      {
            background: white;
            position:relative;
        }

        .section .container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.content-page h3{color:#fff;}

.section h2 {
  font-size: 1.3rem;
}

/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline {
  position: relative;
  white-space: nowrap;
  max-width: 100%;
  padding: 0 10px;
  margin: 0 auto;

}

.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 30px;
  width: 100px;
  z-index: 2;
}

.timeline::after {
  right: 0;
  background: linear-gradient(270deg, var(--timeline-gradient));
}

.timeline::before {
  left: 340px;
  background: linear-gradient(90deg, var(--timeline-gradient));
}

.timeline .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 40px;
  color:#fff;
  background: #4f008c;
  white-space: normal;
  border-radius: 10px;
}

.timeline .info img {
  margin-bottom: 20px;
}

.timeline .info p {
  margin-top: 10px;
  color: var(--crystal);
}

.timeline .info a {
  text-decoration: none;
}

.timeline ol::-webkit-scrollbar {
  height: 12px;
}

.timeline ol::-webkit-scrollbar-thumb,
.timeline ol::-webkit-scrollbar-track {
  border-radius: 92px;
}

.timeline ol::-webkit-scrollbar-thumb {
  background: #4f008c;
}

.timeline ol::-webkit-scrollbar-track {
  background: #ff375f4f;
}

.timeline ol {
  font-size: 0;
  padding: 250px 0;
  transition: all 1s;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-color: #ff375f4f; 
}

.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 160px;
  height: 5px;
  background:#ff375e;
  scroll-snap-align: start;
   transition: transform 0.5s ease; /* smooth animation */
  transform: scale(1); /* default scale */
}


.timeline ol li:hover {
  transform: scale(0.9); /* zoom out on hover */
}

.timeline ol li:last-child {
  width: 340px;
}

.timeline ol li:not(:first-child) {
  margin-left: 14px;
}

.timeline ol li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #4f008c;
  z-index: 1;
}

.timeline ol li div {
  position: absolute;
  left: calc(-4% + 7px);
  width: 280px;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: #4f008c;
  background: #fff;
  border-radius: 0 10px 10px 10px;
  box-shadow:2px 2px 10px #b1adb3;
}

.timeline ol li div::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ol li:nth-child(odd) div {
  top: -16px;
  transform: translateY(-100%);
  border-radius: 10px 10px 10px 0;
}

.timeline ol li:nth-child(odd) div::before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: #ede6f4 transparent transparent transparent;
}

.timeline ol li:nth-child(even) div {
  top: calc(100% + 16px);
}

.timeline ol li:nth-child(even) div::before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent #ede6f4;
}

.timeline time {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 8px;
  color: #ff375e;
}

/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 800px) {
  .timeline {
    display: block;
  }

  .timeline::before,
  .timeline::after {
    width: 50px;
  }

  .timeline::before {
    left: 0;
  }

  .timeline .info {
    display: none;
  }
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 5px;
  z-index: 2;
  color: var(--black);
  background: var(--columbia-blue);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

  
  

    /* Header */
    .header-box{
        background:white;
        padding:25px;
        border-radius:12px;
        text-align:center;
        margin-bottom:25px;
        box-shadow:0 5px 12px rgba(0,0,0,0.08);
    }
    .header-box h1{margin-bottom:6px; color:var(--p);}
    .header-box p{color:var(--s);}

    /* Financial Chart */
    .chart-box{
        background:white;
        padding:25px;
        border-radius:12px;
        margin-bottom:25px;
        margin-top:20px;
        box-shadow:0 5px 12px rgba(0,0,0,0.1);
    }

    /* Operational Highlights */
    .op-grid {
       display: grid;
    max-width: 70%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 20px;
    padding: 30px 0;
    margin: 0;
}

.op-chart-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease;
}

.op-chart-item:hover {
    transform: translateY(-5px);
}

.op-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.op-info span {
    font-size: 0.95rem;
    font-weight: 500;
    color: #555;
}

.op-info strong {
    font-size: 1.2rem;
    color: #4f008c;
}

.canvas-holder {
    height: 10px; /* Slim bar look */
    width: 100%;
}

/* Mobile: Switch to 1 column for readability */
@media (max-width:1024px) {
    .op-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, auto);
    }
}

    /* Shareholders */
    .share-box{
        background:var(--p);
        color:white;
        padding:25px;
        border-radius:12px;
        text-align:center;
    }
    .share-box h2{margin-bottom:10px;}
    .share-box h3{font-size:2rem;margin:10px 0;}
    .share-box p{margin:0;}

    @media(max-width:768px){
        .op-grid{grid-template-columns:1fr;}
    }

    .text-white{color:#fff;}

     .chart-container {
        position: relative;
   
    }
    .chart-center-text {
    position: absolute;
    top: 10%;
    left: 35%;
    transform: translate(-50%, -50%);
    }
    .chart-center-text h2 {
        font-size: 2.5rem;
        margin: 0;
    }
    .chart-center-text p {
        margin: 5px 0 0;
        font-size: 1rem;
    }

.hero-video1 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 0;
    opacity: 0.1;
}
    

h1.ml8 {
  font-weight: 900;
  font-size: 2.5em;
  color: #fff;
  width: 3em;
  height: 3em;
}

.ml8 .letters-container {
  position: absolute;
  left: 55%;
  right: 0;
  margin: auto;
  top: 50%;
  bottom: 0;
  height: 1em;
}

.ml8 .letters {
  position: relative;
  z-index: 2;
  display: inline-block;
  line-height: 0.7em;
  right: -0.12em;
  top: -0.2em;
}

.ml8 .bang {
  font-size: 1.4em;
  top: auto;
  left: -0.06em;
}

.ml8 .circle {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
}

.ml8 .circle-white {
 width: 13em;
  height: 13em;
  border: 5px dashed white;
  border-radius: 50%;
}

.ml8 .circle-dark {
  width: 8.2rem;
  height: 8.2em;
  background-color: #ff375e3d;
  border-radius: 50%;
  z-index: 1;
}

.ml8 .circle-dark-dashed {
  border-radius: 2.4em;
  background-color: transparent;
  border: 2px dashed #4f7b86;
  width: 2.3em;
  height: 2.3em;
}


.ml15 {
  font-weight: 800;
  font-size: 3em;
  text-transform: uppercase;
  letter-spacing: 0.5em;
}

.ml15 .word {
  display: inline-block;
  line-height: 1em;
}



.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(122deg, #4f008c14 50% 50%, #4f008c1f 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

.content {
  background-color:rgba(255,255,255,.8);
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
  padding:10vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}


@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

.chart-screen{ 
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #EDE6F4;
    border-right: 20px solid #ff375e; 
    position:relative;}

   #financialChart{max-width:550px; height:400px;}
   #shareholdersChart{max-width:450px; height:400px;}

          .tabs-wrapper {
            display: flex;
            flex-direction: column;
            position:relative;
            background-color:#fff;
            border-radius:20px;
            height:350px;
            overflow-y: scroll;
        }
        
        @media (min-width: 768px) {
            .tabs-wrapper {
                flex-direction: row;
            }
        }
        
        /* Tabs Navigation */
        .tabs-nav {
            background-color: #fafafa;
            border-right: 1px solid #eee;
            padding: 20px 0;
            width: 100%;
        }
        
        @media (min-width: 768px) {
            .tabs-nav {
                width: 35%;
                min-width: 300px;
            }
        }
        
        .tab-button {
            display: flex;
            align-items: flex-start;
            width: 100%;
            padding: 18px 25px;
            background: none;
            border: none;
            border-left: 4px solid transparent;
            text-align: left;
            font-size: 0.95rem;
            color: #4f008c;
            cursor: pointer;
            transition: all 0.2s ease;
            font-weight: 500;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .tab-button:hover {
            background-color: #4f008c7c;
            color: #4f008c;
        }
        
        .tab-button.active {
            background-color: #4f008c7c;;
            color:#4f008c;;
            border-left: 4px solid #ff375e;
            font-weight: 600;
        }
        
        .tab-icon {
            margin-right: 12px;
            font-size: 1rem;
            color: v#4f008c;
            min-width: 20px;
            margin-top: 2px;
        }
        
        /* Tab Content */
        .tabs-content {
            padding: 30px;
            width: 100%;
        }
        
        @media (min-width: 768px) {
            .tabs-content {
                width: 65%;
            }
        }
        
        .tab-pane {
            display: none;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .tab-pane.active {
            display: block;
        }
        
        .tab-title {
            color: #4f008c;
            font-size: 1.4rem;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #4f008c7c;
            font-weight: 700;
        }
        
        /* Content Styling */
        .details-list {
            list-style: none;
        }
        
        .details-list li {
            position: relative;
            padding-left: 30px;
            margin-bottom: 20px;
        }
        
        .details-list li i {
            color: var(--primary-pink);
            position: absolute;
            left: 0;
            top: 5px;
            font-size: 0.9rem;
        }
        
        .highlight {
            color: var(--primary-purple);
            font-weight: 600;
        }
        
        .nested-list {
            margin: 15px 0 15px 20px;
            padding-left: 15px;
            border-left: 2px solid var(--medium-purple);
        }
        
        .nested-list li {
            padding-left: 15px;
            margin-bottom: 8px;
            color: var(--light-text);
            position: relative;
        }
        
        .nested-list li:before {
            content: "•";
            color: var(--primary-pink);
            font-weight: bold;
            position: absolute;
            left: 0;
        }
        
        /* Footer */
        .footer {
            text-align: center;
            padding: 20px;
            border-top: 1px solid var(--border-color);
            color: var(--light-text);
            font-size: 0.9rem;
            background-color: #fcfcfc;
        }
        
        /* Mobile Optimization */
        .mobile-menu-toggle {
            display: none;
            background-color: var(--primary-purple);
            color: white;
            border: none;
            padding: 15px;
            width: 100%;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
        
        @media (max-width: 767px) {
            body {
                padding: 10px;
            }
            
            .header {
                padding: 20px;
            }
            
            .header h1 {
                font-size: 1.5rem;
            }
            
            .mobile-menu-toggle {
                display: flex;
            }
            
            .tabs-nav {
                display: none;
                position: absolute;
                background: white;
                width: 100%;
                z-index: 10;
                box-shadow: 0 5px 15px rgba(0,0,0,0.1);
                max-height: 400px;
                overflow-y: auto;
            }
            
            .tabs-nav.show {
                display: block;
            }
            
            .tabs-content {
                padding: 20px;
            }
            
            .tab-title {
                font-size: 1.3rem;
                margin-bottom: 20px;
            }
        }
        
        /* Stats Box */
/*         .stats-box {
            background-color: var(--light-purple);
            border-radius: 8px;
            padding: 20px;
            margin: 25px 0;
            border-left: 4px solid var(--primary-pink);
        }
        
        .stats-box h3 {
            color: var(--primary-purple);
            font-size: 1.1rem;
            margin-bottom: 15px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .stat-item {
            text-align: center;
            padding: 12px;
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .stat-label {
            font-size: 0.85rem;
            color: var(--light-text);
            margin-bottom: 5px;
        }
        
        .stat-value {
            font-weight: 700;
            color: var(--primary-purple);
            font-size: 1.1rem;
        }
 */
        /* leadership statement */

        /* Full viewport container 
    .viewport{
   
      width:100%;
      display:flex;
      align-items:top;

      padding:5px 0;
      gap:20px;
    }

    .grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(240px, 1fr));
      gap:20px;
      width:100%;
      max-width:1300px;
    }

    .card{
      perspective:1200px;
      height:70vh; 
      position:relative;
      margin-top:-20px;
    }

    .flip{
      width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.9,.2,1);
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
      border-radius:14px;overflow:hidden;background:var(--glass);
    }

    .card.flip-active .flip{transform:rotateY(180deg)}

    .face{position:absolute;inset:0;backface-visibility:hidden;display:flex;flex-direction:column}

    .front{align-items:center;justify-content:flex-start;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15));}
    .front .photo{width:100%;height:58%;border-radius:10px;background-size:cover;background-position:center;box-shadow:inset 0 0 40px rgba(0,0,0,0.3)}

    .meta{margin-top:14px;display:flex;align-items:top;gap:12px}
    .play-circle{
      width:64px;height:64px;border-radius:50%;background:#4f008c99;display:flex;align-items:center;justify-content:center;flex:0 0 64px;cursor:pointer;box-shadow:0 6px 18px rgba(79,0,140,0.25);border:4px solid rgba(255,255,255,0.03)
    }
    .play-triangle{width:0;height:0;border-left:16px solid #ff375e;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}

    .info{margin-top:10px;flex:1;color:#fff}
    .info h3{margin:0;font-size:1.05rem;line-height:1.2; color:#4f008c}
    .info p{margin:6px 0 0;font-size:.9rem;opacity:0.85; color:#ff375e;}

 
    .audio-row{margin-top:12px;display:flex;align-items:center;gap:12px}
    .audio-btn{width:44px;height:44px;border-radius:8px;background:#111;border:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
    .progress-wrap{flex:1;display:flex;align-items:center;gap:10px}
    .progress{height:8px;background:rgba(255,255,255,0.08);border-radius:6px;overflow:hidden;flex:1}
    .progress > i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#ff375e,#ff8aa3)}
    .time{color:#ddd;font-size:12px;min-width:48px;text-align:right}


    .back{transform:rotateY(180deg);padding:34px;background:linear-gradient(180deg,#fff,#f7f7fb);color:var(--text);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px}
    
    
    
    
    .quote{
        font-size: 1rem;
    line-height: 1.45;
    font-style: italic;
    color: #4f008c;
    padding: 8px 12px;
    border-left: 4px solid #DCCCE8;
    background: rgba(79, 0, 140, 0.03);
    border-radius: 6px;
    position: absolute;
   top: 72%;

    margin: 20px;
    }
    
    .who{margin-top:8px;font-weight:600; }
    .title{opacity:0.8;font-size:.92rem}


    @media (max-width:900px){
      .grid{grid-template-columns:1fr;}
      .card{height:62vh}
    }


    .card{transform:translateY(20px)}



    .flip-hint{position:absolute; border:0; right:12px;top:12px;background:#ff375e;border-radius:8px;padding:8px;font-size:12px;color:#fff;cursor:pointer}

*/


        .leadership-cards {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            margin-bottom: 40px;
        }

        .card {
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
            width: 100%;
            max-width: 380px;
            box-shadow: 0 5px 115px rgb(255 255 255 / 90%);

        
        }

        .card:nth-child(2) {
            animation-delay: 0.2s;
        }

        .card:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
        }

        .card-image {
            height: 230px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(to bottom, var(--primary-color), #2d0055);
        }

        .card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s ease;
        }

        .card:hover .card-image img {
            transform: scale(1.05);
        }

        .play-btn1 {
               position: absolute;
    top: 20px;
    right: 20px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 10;
    transition: all 0.3s 
ease;
        }

        .play-btn1:hover {
            background: #3a0069;
            transform: scale(1.1);
        }

        .play-btn1 i {
            color: var(--accent-color);
            font-size: 24px;
            margin-left: 5px;
        }

        .pulse-effect {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #fff;
            opacity: 0.6;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 0.6;
            }
            70% {
                transform: scale(1.3);
                opacity: 0;
            }
            100% {
                transform: scale(1.3);
                opacity: 0;
            }
        }

        .audio-section {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 100px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 15px;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.5s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .card:hover .audio-section {
            opacity: 1;
            transform: translateY(0);
        }

        .audio-label {
            font-size: 12px;
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .audio-label i {
            color: var(--accent-color);
        }

        .audio-controls {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .audio-play-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--accent-color);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .audio-play-btn:hover {
            background: #e60042;
            transform: scale(1.1);
        }

        .audio-play-btn i {
            color: white;
            font-size: 14px;
            margin-left: 2px;
        }

        .audio-progress-container {
            flex-grow: 1;
        }

        .audio-time {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: #666;
            margin-bottom: 4px;
        }

        .audio-progress-bar {
            height: 6px;
            background: #e0e0e0;
            border-radius: 3px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }

        .audio-progress {
            height: 100%;
            width: 40%;
            background: var(--primary-color);
            border-radius: 3px;
            position: relative;
            transition: width 0.1s linear;
        }

        .audio-progress::after {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 12px;
            height: 12px;
            background: var(--accent-color);
            border-radius: 50%;
        }

        .audio-waveform {
            display: flex;
            align-items: center;
            gap: 2px;
            height: 20px;
            margin-top: 8px;
        }

        .wave-bar {
            width: 3px;
            background: var(--primary-color);
            border-radius: 2px;
            transition: height 0.3s ease;
        }

        .wave-bar.active {
            background: var(--accent-color);
        }

        .card-content {
            padding: 20px;
        }

        .card-content h3 {
            color: var(--primary-color);
            font-size: 1.5rem;
            margin-bottom: 5px;
            min-height:57px;
        }

        .card-content .position {
            color: var(--accent-color);
            font-weight: 600;
            margin-bottom: 15px;
            font-size: 1rem;
        }

        .card-content .statement-preview {
            color: #555;
            font-style: italic;
            line-height: 1.5;
            margin-bottom: 20px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .view-btn {
            background: linear-gradient(to right, var(--primary-color), #6a00cc);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            transition: all 0.3s ease;
        }

        .view-btn:hover {
            background: linear-gradient(to right, #3a0069, #4f008c);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(79, 0, 140, 0.4);
        }

        .view-btn i {
            font-size: 18px;
        }

        /* Video Modal Styling */
        .video-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s ease;
        }

        .video-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .video-modal {
            background: rgba(26, 26, 46, 0.95);
            width: 90%;
            max-width: 900px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
            transform: scale(0.8);
            transition: transform 0.4s ease;
            position: relative;
            border: 2px solid var(--primary-color);
        }

        .video-modal-overlay.active .video-modal {
            transform: scale(1);
        }

        .video-modal-header {
            background: linear-gradient(to right, var(--primary-color), #3a0069);
            color: white;
            padding: 20px 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .video-modal-header h2 {
            font-size: 1.5rem;
        }

        .close-video-btn {
            background: none;
            border: none;
            color: white;
            font-size: 28px;
            cursor: pointer;
            transition: transform 0.3s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .close-video-btn:hover {
            transform: rotate(90deg);
            background: rgba(255, 255, 255, 0.1);
        }

        .video-container {
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .video-placeholder {
            width: 100%;
            height: 400px;
            background: linear-gradient(45deg, #0c0c1f, #2d0055);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }

        .video-placeholder::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent 30%, rgba(255, 55, 94, 0.1) 50%, transparent 70%);
            animation: shimmer 2s infinite;
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .video-placeholder i {
            font-size: 80px;
            color: var(--accent-color);
            margin-bottom: 20px;
            z-index: 1;
        }

        .video-placeholder p {
            font-size: 1.2rem;
            color: #ddd;
            z-index: 1;
            text-align: center;
            padding: 0 20px;
        }

        .video-info {
            color: white;
            text-align: center;
            width: 100%;
        }

        .video-info h3 {
            color: var(--accent-color);
            font-size: 1.8rem;
            margin-bottom: 10px;
        }

        .video-info .position {
            color: #b19cd9;
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

        .video-info .statement {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #ddd;
            display:none;
            font-style: italic;
            max-width: 700px;
            margin: 0 auto;
            padding: 15px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            border-left: 4px solid var(--accent-color);
        }

        /* Statement Modal Styling */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s ease;
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal {
            background: white;
            width: 90%;
            max-width: 90%;
            max-height: 85vh;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
            transform: scale(0.8);
            transition: transform 0.4s ease;
            display: flex;
            flex-direction: column;
        }

        .modal-overlay.active .modal {
            transform: scale(1);
        }

        .modal-header {
            background: linear-gradient(to right, var(--primary-color), #3a0069);
            color: white;
            padding: 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .modal-header h2 {
            font-size: 1.8rem;
        }

        .close-btn {
            background: none;
            border: none;
            color: white;
            font-size: 28px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .close-btn:hover {
            transform: rotate(90deg);
        }

        .modal-content {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            flex-grow: 1;
        }

        @media(min-width: 992px) {
            .modal-content {
                flex-direction: row;
            }
        }

        .modal-image {
            flex: 1;
            min-height: 300px;
            overflow: hidden;
        }

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

        .modal-text {
            flex: 1.5;
            padding: 30px;
            overflow-y: auto;
            max-height: 90vh;

            
        }

        /* Custom scrollbar */
        .modal-text::-webkit-scrollbar {
            width: 6px;
        }

        .modal-text::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .modal-text::-webkit-scrollbar-thumb {
            background: var(--accent-color);
            border-radius: 10px;
        }

        .modal-text h3 {
            color: var(--primary-color);
            font-size: 1.6rem;
            margin-bottom: 10px;
        }

        .modal-text .position {
            color: var(--accent-color);
            font-weight: 600;
            margin-bottom: 25px;
            font-size: 1.1rem;
        }

        .modal-text .statement {
            font-size: 1.1rem;
            line-height: 1.7;
            color: #444;
            margin-bottom: 20px;
            padding-left: 20px;
            border-left: 4px solid var(--primary-color);
        }

        .modal-text .full-bio {
            margin-top: 20px;
            color: #666;
            line-height: 1.6;
        }

        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin-top: 40px;
        }

        .dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--accent-color);
            animation: bounce 1.4s infinite ease-in-out both;
        }

        .dot:nth-child(1) {
            animation-delay: -0.32s;
        }

        .dot:nth-child(2) {
            animation-delay: -0.16s;
        }

        @keyframes bounce {
            0%, 80%, 100% {
                transform: scale(0);
            }
            40% {
                transform: scale(1);
            }
        }

        .footer {
            text-align: center;
            color: #b0b0d0;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
        }

        @media (max-width:1024px) {
            .header h1 {
                font-size: 2.2rem;
            }
            
            .leadership-cards {
                gap: 20px;
            }
            
            .card {
                max-width: 100%;
            }
            
            .video-placeholder {
                height: 250px;
            }
            
            .video-placeholder i {
                font-size: 50px;
            }
        }

.container-statements{max-width:100%;}

#chartsWrapper {
    opacity: 0;
    transform: translateY(50px);
  transition: 0.8s ease-out;
    background-color:#fff;
}

#chartsWrapper.visible {
    opacity: 1;
    transform: translateY(0);
    height:500px;
}




.card {
    opacity: 0;
    transform: translateY(40px) scale(0.9) rotate(10deg);
    transition: all 0.8s ease;
}

.card.visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
}

.card:nth-child(2).visible {
    transition-delay: 0.15s;
}

.card:nth-child(3).visible {
    transition-delay: 0.3s;
}

.card:nth-child(4).visible {
    transition-delay: 0.45s;
}

.timeline {
  position: relative;
}

/* Main line mask */
.timeline .line-mask {
position: absolute;
    top: 49%;
    left: 0;
    height: 5px;
    background: #ff375e;
    transform: translateY(-50%);
    width: 0;
    transition: width 2.5s ease;
    z-index: -1;
    border-radius: 5px;
}

/* Hide original li line background */
.timeline ol li {
  background: transparent !important;
}

/* Circles hidden initially */
.timeline ol li::after {
  opacity: 0;
  transition: opacity .5s ease;
}

/* Reveal when activated */
.timeline ol li.reveal::after {
  opacity: 1;
}

/* Tooltip/info box hidden initially */
.timeline ol li div {
  opacity: 0;
  transform: translateY(10px);
  transition: all .6s ease;
}

.timeline ol li.show div {
  opacity: 1;

}


.timeline-wrapper {
  position: relative;
  height: 400px; /* adjust to your timeline height */
  overflow: hidden;
}


.count {
    display: inline-block;
    font-weight: bold;
    opacity: 0;
    font-size:20px;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.count.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Arujun code for year review */
.year-review-container {
            width: 90%;
             height: 95vh; 
            position: relative;

            border-radius: 15px;
            display: flex;
        }
        
        /* ------------------------------------------------------------------ */
        /* LEFT SIDE: FIXED TIMELINE NAVIGATION                               */
        /* ------------------------------------------------------------------ */
        .vertical-nav {
            width: 40%;
            padding: 40px 0;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between; 
            border-right: 1px solid #e9ecef;
        }

        /* Fixed Timeline Line */
        .timeline-line {
            position: absolute;
            top: 0;
            right: 50%; 
            transform: translateX(50%);
            width: 3px;
            height: 100%;
            background-color: var(--line-color);
            z-index: 1;
        }

        /* Animated Progress Bar */
        .timeline-progress-bar {
            position: absolute;
            top: 0;
            right: 50%; 
            transform: translateX(50%);
            width: 3px;
            height: 0%; 
            background: linear-gradient(to top, var(--accent-color), #ff708d); 
            transition: height 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
            z-index: 2;
        }

        .month-point-wrapper {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative; 
            z-index: 3;
        }

        .month-details {
            width: 45%;
            padding: 5px 15px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .month-point-wrapper:nth-child(odd) .month-details {
            text-align: right;
        }
        
        .month-point-wrapper:nth-child(even) .month-details {
            margin-left: auto; 
            text-align: left;
        }

        .month-name {
            font-size: 1.1em;
            font-weight: 600;
            color: #fff;
            transition: color 0.3s ease;
        }
        
        .month-description {
            font-size: 0.85em;
            color: #adb5bd;
            display:none;
        }

        /* Marker Circle */
        .month-point-wrapper::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: #adb5bd;
            border: 4px solid white; 
            z-index: 4;
            transition: all 0.3s ease;
        }

        /* Active State (HIGHLIGHT STYLES - #ff375e) */
        .month-point-wrapper.active .month-name {
            color: var(--accent-color);
            font-weight: 700;
        }
        .month-point-wrapper.active::before {
            background-color: var(--accent-color);
            transform: translateX(-50%) scale(1.4);
            box-shadow: 0 0 0 5px rgba(255, 55, 94, 0.25); 
        }

        /* ------------------------------------------------------------------ */
        /* RIGHT SIDE: CONTENT DISPLAY AREA - CRITICAL LAYOUT FIX             */
        /* ------------------------------------------------------------------ */
        .content-display {
            flex-grow: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center; 
            position: relative; 
            height: 100%; 
            overflow: hidden; /* Crucial to clip absolute panels */
        }

        /* Content Panel Stacking and Transitions */
        .content-panel {
            position: absolute;
            top: 50%; 
            left: 40px; 
            right: 40px; 
            
            /* Initial HIDDEN state */
            transform: translateY(-50%) translateY(15px); 
            opacity: 0;
            pointer-events: none; 
            z-index: 10; /* Low Z-index when inactive */
            
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .content-panel.active {
            /* ACTIVE state */
            opacity: 1;
            transform: translateY(-50%) translateY(0); 
            pointer-events: auto; 
            z-index: 20; /* High Z-index when active */
        }
        
        /* Content Elements */
        .content-title {
            font-size: 3.5em;
            font-weight: 800;
            color: var(--accent-color); /* ACCENT COLOR */
            margin-bottom: 5px;
        }

        .content-subtitle {
            font-size: 1.4em;
            color: #fff;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #e9ecef;
        }

        .content-text {
            line-height: 1.8;
            font-size: 1.1em;
            color: #fff;
            margin-bottom: 40px;
        }

        .content-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .stat-item {
            padding: 20px;
            border-radius: 8px;
            background-color: #f1f3f5;
            border-left: 5px solid var(--accent-color); /* ACCENT COLOR */
        }

        .stat-label {
            font-size: 0.9em;
            color: var(--secondary-color);
            margin-bottom: 5px;
        }

        .stat-value {
            font-size: 2em;
            font-weight: 700;
            color: var(--text-color);
        }

        .about-bg-img{background:url(../images/about-bt.png) bottom  no-repeat; background-size:cover;}
        .about-title{color:#fff;padding:10px 0; font-size:40px; margin-top:2%; }
.text-container{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    text-align: justify;
    line-height: 50px;
    max-width:100%;
    position:relative;
}

.column-text{
background-color: #4f008c;
    padding: 20px 30px;
    border: 1px solid #ffffff47;
    max-width:90%;
    /* border-radius: 50px 0; */
    box-shadow: 20px 50px 500px #f7f7f7e0;
    border-left: 19px solid #ff375e;
    transition: transform 0.7s ease;
}
.column-text p{line-height:1.5;}


/* Variations */
.zoom-in.active {
    transform: scale(1);
}

.zoom-out.active {
    transform: scale(1);
}

.fade-up.active {
    transform: translateY(0);
    opacity: 1;
}

.bounce.active {
    animation: bounceIn 0.9s ease forwards;
}

@keyframes bounceIn {
    0% { transform: scale(0.9); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* burger menu */


/* BURGER ICON */
/* BURGER ICON - Same for both mobile & desktop */

/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/*journey section */


#journey {
   /* based on number of years */
  height: 100vh;
  position: relative;
  overflow: visible; /* SVG must overflow */
}

.roadmap-track {
  height: 100%;
  display: inline-flex;
  align-items: center;
}





     #particle-canvas {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color:#4f008c;
        }

        /* 2. SCROLLABLE VIEWPORT */
        #main-viewport {
            width: 100vw;
            height: 100vh;
            overflow-x: auto; /* Enables the horizontal scrollbar logic */
            overflow-y: hidden;
            display: block;
            scroll-behavior: auto;
        }
        /* Hide scrollbar but keep functionality */
        #main-viewport::-webkit-scrollbar { display: none; }

        .header-section {
            position: fixed; top: 30px; left: 50px; z-index: 100;
        }
        .main-title {
           font-family: 'STC Forward' ,roboto,arial,sans-serif !important;
            margin: 0;
            color: var(--stc-cyan); letter-spacing: 2px;
        }

        /* 3. ROADMAP TRACK - The long horizontal line */
 .roadmap-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 600px;
    /* Ensure no clipping */
    overflow: visible !important;
}

        /* 4. SNAKE SVG & HEAD */

#snakeHead {
    filter: drop-shadow(0 0 8px #FF375E);
    transition: r 0.3s ease;
}
/* Ensure parents don't clip the path */
#Journey, .section-content, .content-page {
    overflow: visible !important;
}
        .path-guide { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 3; }
        .path-draw { 
            fill: none; stroke: var(--stc-coral); stroke-width: 5; 
            stroke-linecap: round; filter: drop-shadow(0 0 10px var(--stc-coral));
        }
       .snake-head {
    position: absolute;
    top: 0; 
    left: 0;
    width: 24px;
    height: 24px;
    background: #FF375E;
    border-radius: 50%;
    z-index: 1000;
    box-shadow: 0 0 20px #FF375E, 0 0 40px rgba(255, 55, 94, 0.5);
    /* Center the head on the path line */
    margin-top: -12px;
    margin-left: -12px;
    pointer-events: none;
    will-change: transform;
    display: block !important;
}

        /* 5. MILESTONE NODES (UP & DOWN) */
       /* Update these in your CSS */
.milestone-node {
    display: inline-flex; 
    flex-direction: column; /* Default: Hex on top, Card below */
    align-items: center;
    width: 380px; 
    margin: 0px; 
    position: relative; 
    z-index: 5;
    transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2008, 2010, etc. - Card is BELOW the circle */
.milestone-node:nth-child(odd) { 
    transform: translateY(100px); 
    flex-direction: column; 
}

/* 2009, 2011, etc. - Card is ABOVE the circle */
.milestone-node:nth-child(even) { 
    transform: translateY(-195px); 
    flex-direction: column-reverse; /* Flips card to the top */
}

/* Ensure the hex remains the center point for the snake */
.hex-wrapper {
    margin: 10px 0; /* consistent spacing */
}
        .hex-shape {
            position: absolute; width: 100%; height: 100%;
            background: var(--hex-bg);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            border: 2px solid var(--stc-purple); transition: 0.4s;
            display:none;
        }
        .milestone-node.active .hex-shape {
            background: var(--stc-purple); border-color: var(--stc-coral);
            box-shadow: 0 0 30px var(--stc-purple);
        }
        .year-label { 


    font-size: 1.5rem;
    font-weight: 700;
    background-color: #fff;
    width: 100px;
    height: 100px;
    z-index: 2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #ff375e;

         }

        /* 6. REVEALING CARDS */
        .content-card {
  width: 400px;
    backdrop-filter: blur(10px);
    padding: 20px;
    /* border-left: 4px solid #ff375f; */
    opacity: 0;
    transform: scale(0.8);
    transition: 0.6s ease;
    white-space: normal;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 5px 5px 0px #ff475e;
        }
        .milestone-node.active .content-card {
            opacity: 1; transform: scale(1);
            border-left-color: var(--stc-coral);
        }
        .content-card ul { list-style: none; padding: 0; margin: 0; }
        .content-card li { 
               font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 8px;
    color: #4f008c;
    position: relative;
    padding-left: 30px;
        }
        .content-card li::before {
            content: "▪"; color: var(--stc-coral); position: absolute; left: 0;
        }

       /* JOURNEY SECTION MUST BE LONG */
/* #Journey {
       
    height: 100vh;
    position: relative;
    overflow: visible;
} */

/* REMOVE INTERNAL SCROLL LOCKS */
#Journey .section-content {
    width: 100%;
    height: 100%;
    overflow: visible !important;
}

#Journey.contentpage.tex-content{width:50%;}
/* ROADMAP */
#Journey .roadmap-track {
    display: inline-flex;
    align-items: center;
    height: 100%;
    position: relative;
    margin-left:-20vw;
}

/* SVG MUST MATCH JOURNEY WIDTH */
#Journey .snake-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 500vw;
    height: 100%;
    pointer-events: none;
}

#Journey .section-content {
    overflow-x: visible !important;
}

.path-guide {
    fill: none;
    stroke: rgba(255,55,94,0.2);
    stroke-width: 2;
}

.path-draw {
    fill: none;
    stroke: #FF375E;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dashoffset: 1000;
}






.roadmap-track {
    position: relative;
    display: inline-flex;
    align-items: center;
 min-height:100vh;
    padding-left: 10px; /* Give the first year some breathing room */
    overflow: visible !important
}


#roadmapTrack {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height:100vh;
    padding: 0 15px; /* Space for the snake to start/end */
    overflow: visible !important;
}



.mt-10{margin-top:7%;}

/* initial hidden state */
.reveal {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

/* active state */
.reveal.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* stagger paragraphs */
.reveal.is-visible p {
    opacity: 0;
    transform: translateX(30px);
    animation: revealText 0.7s ease forwards;
}

.reveal.is-visible p:nth-child(1) { animation-delay: 0.2s; }
.reveal.is-visible p:nth-child(2) { animation-delay: 0.4s; }
.reveal.is-visible p:nth-child(3) { animation-delay: 0.6s; }

@keyframes revealText {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}



.section1 {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 0.9s ease, transform 0.9s ease;
    will-change: opacity, transform;
}

/* Active */
.section1.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================
   FADE ANIMATIONS
========================================= */

/* Fade Up */
.section1.fade-up {
    transform: translateY(40px);
}
.section1.fade-up.is-visible {
    transform: translateY(0);
}

/* Fade Left */
.section1.fade-left {
    transform: translateX(-80px);
}
.section1.fade-left.is-visible {
    transform: translateX(0);
}

/* Fade Right (stronger) */
.section1.fade-right {
    transform: translateX(120px);
}
.section1.fade-right.is-visible {
    transform: translateX(0);
}

/* =========================================
   ZOOM ANIMATIONS
========================================= */

/* Zoom In */
.section1.zoom-in {
    transform: scale(0.5);
}
.section1.zoom-in.is-visible {
    transform: scale(1);
}

/* Zoom Out */
.section1.zoom-out {
    transform: scale(1.1);
}
.section1.zoom-out.is-visible {
    transform: scale(1);
}

/* =========================================
   ROTATE / FLIP
========================================= */

/* Rotate In */
.section1.rotate-in {
    transform: rotate(-6deg) scale(0.95);
}
.section1.rotate-in.is-visible {
    transform: rotate(0deg) scale(1);
}

/* Flip Y */
.section1.flip-y {
    transform: perspective(800px) rotateY(90deg);
}
.section1.flip-y.is-visible {
    transform: perspective(800px) rotateY(0deg);
}

/* Flip X */
.section1.flip-x {
    transform: perspective(800px) rotateX(90deg);
}
.section1.flip-x.is-visible {
    transform: perspective(800px) rotateX(0deg);
}

/* =========================================
   BLUR / COMBO
========================================= */

/* Blur Reveal */
.section1.blur {
    filter: blur(8px);
    transform: scale(0.98);
}
.section1.blur.is-visible {
    filter: blur(0);
    transform: scale(1);
}

/* Slide + Fade Combo */
.section1.slide-fade {
    opacity: 0;
    transform: translateY(60px) scale(0.97);
}
.section1.slide-fade.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* =========================================
   BOUNCE / ELASTIC
========================================= */

/* Bounce */
.section1.bounce.is-visible {
    animation: bounceIn 0.8s ease;
}

@keyframes bounceIn {
    0%   { transform: scale(0.95); }
    50%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* Elastic Pop */
.section1.elastic.is-visible {
    animation: elasticPop 0.9s ease-out;
}

@keyframes elasticPop {
    0%   { transform: scale(0.8); }
    60%  { transform: scale(1.1); }
    80%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* =========================================
   ACCESSIBILITY
========================================= */
@media (prefers-reduced-motion: reduce) {
    .section1 {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        filter: none !important;
    }
}

/* year review */

:root {
    --stc-purple: #622D91;
    --stc-red: #FF0000;
    --stc-dark: #1D1D1B;
    --stc-bg: #F8F9FA;
    --text-gray: #444;
}

* { box-sizing: border-box; margin: 0; padding: 0; }


.year-review-container {
    display: flex;
    width: 100%;
    height: 100%;
}



.stc-ir-main-wrapper {
position: relative;
    z-index: 1;
    display: flex;
    width:130vw;
    overflow: hidden;
  /* border-left: 0px solid #e7c8ff; */
  

}
/* Sidebar Styling */
.stc-ir-navigation-pane {
    width: 360px;
    background: var(--stc-onyx);
    padding: 140px 30px 0 30px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    
    position: relative;
    z-index: 1000000 !important;
}

.stc-ir-brand-header { color: white; font-size: 2rem; font-weight: 800; margin-bottom: 50px; }
.stc-ir-brand-header span { color: var(--stc-crimson); }

.stc-ir-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.stc-ir-month-trigger {
    /* background: #ff375f; */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #4f008c;
    padding: 18px 0;
    text-align: center;
    /* fill: #ff375f; */
    cursor: pointer;
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    background: #ffffffc2;
    transition: 0.3s;
    border-radius: 10px;
}

.stc-ir-month-trigger.is-active { background: var(--stc-purp); border-color: var(--stc-crimson); color: white; transform: scale(1.05); }

/* Content Area */
.stc-ir-viewport {
    flex: 1;
    padding:30px;
     position: relative;
    overflow-y: hidden;
    position: relative;
    z-index: 5;
margin-top:2%;
    flex: 1;
}

.stc-ir-content-panel { display: none; max-width: 100%; margin-top:6%;}
.stc-ir-content-panel.is-visible { display: block; animation: stcPanelFade 0.6s ease forwards; }

@keyframes stcPanelFade {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Shatter Layer */
#stc-ir-shatter-canvas {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #4f008c; /* Or your brand color */
    transform: translateX(-100%); /* Start off-screen */
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 10;
    pointer-events: none;
}
#stc-ir-shatter-canvas.is-active {
    transform: translateX(0%);
}

/* Smooth fade for the content panels themselves */
.stc-ir-content-panel {
    opacity: 0;
    transition: opacity 0.3s ease;
    display: none;
}

.stc-ir-content-panel.is-visible {
    display: block;
    opacity: 1;
}
/* The individual shards */
.stc-ir-shard {
    position: absolute;
    background-color: #622D91 !important; /* stc Purple */
    width: 10.1%; /* Added .1 to prevent tiny gaps */
    height: 10.1%;
    opacity: 0;
    border: 0.5px solid rgba(255,255,255,0.1);
    transform: translateX(-110%);
    transition: none; /* Prevent CSS transitions from fighting JS animations */
}
.stc-ir-shard.do-sweep { animation: stcShardIn 0.35s ease-out forwards; }
.stc-ir-shard.do-explode { animation: stcShardOut 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

@keyframes stcShardIn {
    from { transform: translateX(-115%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes stcShardOut {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0) rotate(var(--dr)); opacity: 0; }
}
.stc-ir-entry h2{margin:0 0 5px 0;}

/* Typography */
.stc-ir-month-heading { font-size: 35px !important; color: #ff375e !important; font-weight: 900; margin-bottom: 20px; border-left: 12px solid var(--stc-crimson);  line-height: 0.9; }
.stc-ir-entry { margin-bottom:0; border-bottom: 1px solid #fcfcfc6e; padding:7px;  }
.stc-ir-entry-title { font-size: 16px; font-weight: 800; color: var(--stc-onyx); margin-top:10px; }

.stc-ir-entry-body { 
    line-height: 1.3;
    color: #fff;
    white-space: pre-line;
    padding-left: 32px;
    font-size: 14px !important; }
.stc-ir-entry-title{color:#fff !important;}
.stc-ir-entry-body{color:#fff !important;}


.stc-ir-content-panel .stc-ir-entry:last-child{border:0;}

/* Shard */
.stc-shard { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 100; overflow: hidden; }

 .financial-helights1 {
    background: url(../images/financial-statement.png) no-repeat center center;
    background-size: cover;
    margin-top: 0;
    position:relative;
} 

.financial-helights2 {
    position: relative;
    background: url(../images/operations.jpg) no-repeat center center;
    background-size: cover;
    margin-top: 0;
    overflow: hidden;
}

/* Glass overlay */
.financial-helights2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15); /* glass tint */
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    z-index: 0;
}

/* Keep content above glass */
.financial-helights2 > * {
    position: relative;
    z-index: 1;
}

 .financial-helights3 {
    background: url(../images/sustainbility2.jpg) no-repeat center center;
    background-size: cover;
    margin-top: 0;
} 

  .flag {
            width: 40px;
            height: 40px;
            background: #ff375e;
            border: 1px solid var(--lite-grey);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color:#fff;
          
            transition: all 0.3s ease;
            animation: floatUp 2.5s ease-in-out infinite;
        }



 .financial-helights4 {
    margin-top: 0;
    background: #4f008c;
    position: relative;
} 
.mt-7_percentage{margin-top:7%;}
.content-gap-fill{margin-left:-500px;}
.mt-2_percentage{margin-top:2%;}


/* ===============================
   TEAM MEMBERS SECTION
================================= */

.lt-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin-top: -30px;
    margin-bottom: 5%;
}

/* Title */
.lt-title {
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #4f008c;
}

/* Tabs */
.lt-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
    margin-top: 111px;
}

.lt-tab-btn {
    padding: 10px 22px;
    border-radius: 30px;
    border: none;
    background: #e8ddf3;
    font-weight: 600;
    font-family: 'STC Forward';
    cursor: pointer;
    transition: all 0.3s ease;
    color: #4f008c;
}

.lt-tab-btn.lt-active {
    background:  #ff375e;
    color: #fff;
}

/* ===============================
   TEAM GRID (Flex Layout)
================================= */

.lt-team-grid {
    flex: 1;
    display: none;
    flex-wrap: wrap;
    justify-content: center; /* centers second row */
    gap: 10px;
}

.lt-team-grid.lt-active {
    display: flex;
}

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

.lt-card {
    width: calc(20% - 20px); /* 5 per row */
    max-width: 240px;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(79, 0, 140, 0.15);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    padding:7px 10px;
}

.lt-card:hover {
    transform: translateY(-6px);
}

/* Image */
.lt-card-image {
    height: 180px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  
}

.lt-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* keeps images uniform */
}

/* Content */
.lt-card-content {
    padding: 0px 14px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* centers content vertically */
}

/* Card Text */
.lt-card-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #222;
}

.lt-card-role {
    font-size: 13px;
    font-weight: 500;
    color: #4f008c;
    margin-bottom: 6px;
}

.lt-card-rep {
    font-size: 12px;
    color: #666;
}

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

@media (max-width: 1200px) {
    .lt-card {
        width: calc(25% - 20px); /* 4 per row */
    }
}

@media (max-width: 992px) {
    .lt-card {
        width: calc(33.33% - 20px); /* 3 per row */
    }
}

@media (max-width:1024px) {
    .lt-wrapper {
        min-height: auto;

    }

    .lt-title {
        font-size: 22px;
    }

    .lt-card {
        width: calc(50% - 20px); /* 2 per row */
    }
}

@media (max-width: 480px) {
    .lt-card {
        width: 100%; /* 1 per row */
    }
}


.about-us-container{
    width:100%;
    display:flex;
   
}

.aboutus-left{
width: 50%;
    padding:30px;
    margin-top: 4%;
    background: linear-gradient(90deg, #4f008ce0, #4f008c00);
    text-align: justify;
    height:100vh;
}

.aboutus-right{
    width:50%;
    padding: 0 20px;
    margin-top:12%;
    margin-left:7%;
}

.stats-container {
display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    max-width: 500px;
    background: linear-gradient(178deg, #4f008c, transparent);
    box-shadow: 5px 5px 0px #ff375fc4;
    border: 10px solid #ffffff78;
    border-radius: 50px 0;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
        justify-content: center;
    margin: 0 auto;
}

.icon-box {
    margin-bottom:5px;
    opacity: 0.8; /* Matches the slightly muted icons in the image */
}

.icon-box img {
    width: 55px;
    height: 55px;
}

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--white);
    line-height: 0.9;
    margin-bottom: 15px;
    letter-spacing: 3px;
    color:#fff !important;
}
h3.title, h1.stc-val-main-title {color:#fff;}
.year-in-reivew-text1 p, .description p{color:#4f008c;}

.stat-number span {
    font-size: 1.8rem;
    vertical-align: top;
    margin-left: 2px;
    color:#fff;
}

.color-coral {
    color: var(--stc-coral);
}

.stat-label {
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 400;
}

/* Responsive for Mobile */
@media (max-width: 480px) {
    .stats-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .stat-number {
        font-size: 2.5rem;
    }
}

.white-icon {
  filter: brightness(0) invert(1);
}

.vision-mission-bg{
background: url(../images/vision-mission.png) top left no-repeat;
    background-size: 50%;
}


.box-content{width:100%; display:flex;}
.box-content-left{width:50%;
    padding: 10px 10px;    background: linear-gradient(0deg, #8736c4 0%, #4f008c 100%);
    border: none !important;
    border-radius: 8px;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease-in-out;
    margin-right:10px;
}
.box-content-right{width:50%; padding: 10px 10px;    background: linear-gradient(0deg, #8736c4 0%, #4f008c 100%);
    border: none !important;
    border-radius: 8px;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease-in-out;
        }

        .box-content-left:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

        .box-content-right:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Container and Background */
.stc-val-wrapper {

  color: #ffffff;
  padding: 0px 20px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stc-val-content {
  max-width:100%;
  width: 100%;
}

/* Header Section */
.stc-val-header {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
}

.stc-val-star {
  color: #ff4d4d;
  font-size: 3.5rem;
  margin-right: 15px;
}

.stc-val-main-title {
  font-size:40px;
  font-weight: 600;

  line-height: 150%;
}

/* Grid Layout */
.stc-val-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 25px;
}

/* Card Styling */
.stc-val-card {
     background: #4f008c;
    padding: 5px 10px;
    min-height: 269px;
    display: flex;
    flex-direction: column;
    /* border: 10px solid #ffffff59; */
    border-radius: 20px 0;
    border: 3px solid #ffffff82;
}

/* .stc-val-icon-box {
  width: 90px;
  height: 90px;
  margin-bottom: 40px;
} */

.stc-val-svg {
  width: 100%;
  height: 100%;
}

/* Typography */
.stc-val-card-title {
  color: #ff375e; /* Muted orange/coral from image */
  font-size: 1.8rem;
  font-weight: 600;

}

.stc-val-text {
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  max-width: 100%;
  text-align:left;
}

/* Footer link */
.stc-val-footer {
  margin-top: 40px;
  font-size: 0.85rem;
  font-weight: bold;
  opacity: 0.8;
}

/* Responsive Scaling */
@media (max-width:1024px) {

    .aboutus-left, .stc-val-wrapper{height:auto !important; min-height:auto !important;}
  .stc-val-main-title {
    font-size: 3rem;
  }
  .stc-val-card {
    min-height: auto;
    padding: 12px;
  }
}

.about-right{width:50%;padding:40px; margin-top:0;}

.aboutus-bgs{  margin-top: 0;
    background-image: 
        url("../images/purposea.png"),
        url("../images/vision-mission.png");
    background-position: 
        bottom right,
        top left;
    background-repeat: 
        no-repeat,
        no-repeat;
    background-size: 
        auto,
        50%;
   width: 133vw;
    padding-right: 27vw;
    
    }


.purpose{    background: #00000038;
    padding: 15px;
    border-radius: 20px 0;
    border: 3px solid #ffffff2e;
margin-top:35px;
margin-bottom:20px;
}
.mt-8{margin-top:8%;}

.about-title1{ font-size:40px !important; margin:0; padding:0;}
.about-title2{ font-size:30px; margin:0; padding:0;}

    .ml-9{margin-left:9%;}


    .kfi-section-wrapper {

    color: #ffffff;
 padding: 40px 0 0 0px;
    display: flex;
    justify-content: center;
    border-radius: 50px 0;
    width:1200px;
    max-width:100%;
        }

        .financial-hilights-h1{
            margin-bottom:50px;
            color:#fff;
        }

        .kfi-container {
             max-width: 1200px;
    width: 100%;
max-width:100%;
    padding: 0px;

        }

        /* 2. HEADER STYLES */
        .kfi-main-title {
            font-size: 36px;
            font-weight: 600;
            margin-bottom: 50px;
            letter-spacing: -0.5px;
        }

        /* 3. GRID SYSTEM */
        .kfi-stats-layout {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px 40px;
        }

        /* 4. INDIVIDUAL ITEM CLASSES */
        .kfi-stat-box {
      display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px);
    /* This ensures it fades out smoothly when the 'is-visible' class is removed */
    transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .kfi-stat-box.is-visible {
    opacity: 1;
    transform: translateY(0);
        }

        .kfi-metric-label {
            font-size: 16px;
            font-weight: 400;
            margin-bottom: 12px;
            color: rgba(255, 255, 255, 0.85);
        }

        .kfi-metric-number {
            font-size: 45px;
            font-weight: 700;
            line-height: 1;
            margin: 0;
        }

        /* 5. DECORATIVE ELEMENTS */
        .kfi-divider-line {
            border: none;
            border-bottom: 2px solid #ff4b5c; /* Accent color from image */
            margin-top: 60px;
            width: 100%;
        }
        .desk-space{margin-top: 80px;
    margin-left: 10%; color:#fff;}

        /* RESPONSIVE DESIGN */
        @media (max-width: 900px) {
            .kfi-stats-layout { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .kfi-stats-layout { grid-template-columns: 1fr; }
            .kfi-metric-number { font-size: 56px; }
        }


          .charts-row { 
      display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0px;

    padding:2% 0 1% 0;
  
        }

        .chart-column { flex: 1; min-width: 350px; }
        
        h2 { color: #4f1d7d; font-size: 18px; margin-bottom: 20px; }
        .canvas-container { position: relative; height: 280px; width: 100%; }

        @media (max-width: 1000px) {
            .charts-row { flex-direction: column; align-items: center; }
            .chart-column { width: 100%; }
        }

     
        .shareholder-page1{padding:2%;/* background:url(../images/share-holder.jpg) top right no-repeat; */ background-size: cover; width:130vw;position:relative;}
        .shareholder-page2{padding:2%;/* background:url(../images/investment-case.png) top right fixed no-repeat; */ background-color:#4f008c; width:80vw;position:relative;}
        
 .market-page2{padding:2%;background:url(../images/market-overview.jpg) top right fixed no-repeat; background-size: cover; width:80vw;position:relative;}
    .risk-page2{padding:2%;background:url(../images/risk-mgnt.jpg) top left  no-repeat; background-size: cover; width:80vw;position:relative;}
     .year-page2{padding:2%;background:url(../images/year1.jpg) 100% 30% fixed no-repeat; background-size: cover; width:80vw;position:relative;}
    
        /* operational hilights */

          .gm-highlight-wrapper {
            --gm-purple: #DCCCE8;
            --gm-purple-light: #4f008c;
            --gm-accent: #fb923c;
            padding: 60px 20px 0px 20px;
             color: white;
            min-height: 555px;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            width:1100px;
            max-width:100%;
        }

        .gm-title {
            width: 100%;
            max-width: 1000px;
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 40px;
        }
.about-title2{margin-top:8%;}
        .gm-stats-container {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 15px;
            width: 100%;
            max-width: 1000px;
            height: 494px; /* Fixed height for the bars to grow into */
        }

        .gm-bar {

    flex: 1;
    background:linear-gradient(180deg, var(--gm-purple-light) 0%, #fbf7ff6b 100%);
    border-radius: 6px 6px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
padding-top:10px;
    position: relative;
    text-align: center;
    height: 50px;
    opacity: 0.3;
    transition: height 1.5s cubic-bezier(0.17, 0.67, 0.2, 1), opacity 0.5s ease;
        }

        /* ANIMATED STATE */
        .gm-bar.is-animated {
            opacity: 1;
            /* Height is applied by JS */
        }

        .gm-icon { width: 30px; height: 30px; fill: var(--gm-accent); margin-bottom: 15px; }
        .gm-val { 
            font-size: 35px;
    font-weight: 600;
    display: block; }
        .gm-lab { font-size: 15px; margin-top: 5px; opacity: 0.9;}

        /* Staggered Delay */
        .gm-bar:nth-child(1) { transition-delay: 0.1s; }
        .gm-bar:nth-child(2) { transition-delay: 0.2s; }
        .gm-bar:nth-child(3) { transition-delay: 0.3s; }
        .gm-bar:nth-child(4) { transition-delay: 0.4s; }
        .gm-bar:nth-child(5) { transition-delay: 0.5s; }

        .icon-white {
  filter: invert(44%) sepia(95%) saturate(3015%) hue-rotate(323deg) brightness(101%) contrast(101%);
}
.text-purple{color:#4f008c;}

.esg-section {
            --esg-purple: #fff;
            --esg-accent: #ff375e;
            --esg-text: #4f008c;
            color: var(--esg-text);
            padding: 80px 40px;
            min-height: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .esg-title {
            font-size: 42px;
            font-weight: 700;
            margin-bottom: 60px;
            margin-left: 20px;
        }

        .esg-grid {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .esg-item {
            display: flex;
            align-items: flex-start;
            flex: 1;
            opacity: 0; /* Hidden initially */
            transform: translateY(20px);
            transition: all 0.8s ease-out;
        }

        /* Left Side: Letter and Icon */
        .esg-left {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 20px;
            min-width: 60px;
        }

        .esg-letter {
            font-size: 70px;
            font-weight: 900;
            margin-bottom: 10px;
          
           text-shadow:5px 5px 80px #4f008c;
        }

        .esg-icon svg {
            width: 40px;
            height: 40px;
            fill: var(--esg-accent);
        }

        /* Middle: The Animated Vertical Line */
        .esg-divider {
            width: 2px;
            background-color: #4f008c;
            height: 0; /* Animated height */
            margin-right: 25px;
            position: relative;
            transition: height 1.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Right Side: Text Content */
        .esg-right {
            display: flex;
            flex-direction: column;
            gap: 15px;
            padding-top: 10px;
        }

        .esg-text-item {
            font-size: 18px;
            line-height: 1.4;
            max-width: 250px;
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.5s ease-out;
        }

        /* ANIMATION STATES */
        .esg-item.reveal {
            opacity: 1;
            transform: translateY(0);
        }

        .esg-item.reveal .esg-divider {
            height: 120px; /* Target height */
        }

        .esg-item.reveal .esg-text-item {
            opacity: 1;
            transform: translateX(0);
        }

        .esg-margin{margin:-3% 0% 0 10% !important;}
        /* Staggered text delays */
        .esg-item.reveal .esg-text-item:nth-child(1) { transition-delay: 0.6s; }
        .esg-item.reveal .esg-text-item:nth-child(2) { transition-delay: 0.9s; }

        .pd-space-2{padding:2.1% 2% !important;}
                /* Unique namespace classes to ensure no conflicts */
:root {
        --stc-purple: #4f008c;
        --stc-red: #ff375e;
        --stc-node: #ff375e;
        --col-width: 450px;
    }

    .content-page_journey-white {
        min-width: 2700px; 
        width: 100%;
        height: 100vh;
        background-color: #4f008c;
        flex-shrink: 0;
        overflow-x: auto;
        overflow-y: hidden;
        font-family: 'STC Forward' ,roboto,arial,sans-serif !important;
    }

    .stc-timeline-section {
        background: linear-gradient(1deg, #4f008c, transparent);
        display: flex;
        align-items: center;
        height: 88vh;
        flex-shrink: 0; 
    }

    .stc-main-container {
        position: relative;
        width: 2700px;
        height: 70vh;
        display: grid;
        grid-template-columns: repeat(6, var(--col-width));
        margin-top: -6%; /* Adjusted to keep 3 items visible in 70vh */
    }

    .stc-svg-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
    }

    .stc-snake-path {
        fill: none;
        stroke: #fff;
        stroke-width: 3;
        stroke-linecap: square;
        stroke-linejoin: miter;
        stroke-dasharray: 10000;
        stroke-dashoffset: 10000;
    }

    .stc-main-container.is-active .stc-snake-path {
        animation: stc-draw-line 7s linear forwards;
    }

    @keyframes stc-draw-line {
        from { stroke-dashoffset: 10000; }
        to { stroke-dashoffset: 0; }
    }

    .stc-col {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        z-index: 2;
        padding: 20px 20px 20px 140px;
        box-sizing: border-box;
    }

    .stc-col-reverse { flex-direction: column-reverse; }

    .stc-year-group {
        position: relative;
        opacity: 0;
        transform: scale(0.9);
    }

    .stc-main-container.is-active .stc-year-group {
        animation: stc-fade-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    @keyframes stc-fade-in {
        from { opacity: 0; transform: scale(0.8) translateY(10px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
    }

    .stc-node-point {
        position: absolute;
        width: 16px;
        height: 16px;
        background-color: var(--stc-node);
        border: 2px solid #fff;
        border-radius: 50%;
        left: -56.5px; 
        top: 10px;
        box-shadow: 0 0 8px rgba(255, 55, 94, 0.4);
        z-index: 3;
    }

    .stc-year-box { width: 100%; max-width: 290px; }

    .stc-year-tag {
        background-color: #f9f9f9;
        color: #4f008c;
        display: inline-block;
        padding: 4px 12px;
        font-weight: bold;
        font-size: 1rem;
        margin-bottom: 8px;
        border-radius: 10px;
    }

    .stc-year-tag.stc-highlight-final {
        background-color: #00c48c;
        padding: 15px 40px;
        color: #fff;
        animation: pulse-thick 2.5s infinite both;
        border-radius: 25px 0;
        border: 2px solid #fff;
    }

    @keyframes pulse-thick {
        0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); }
        50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
        100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    }

    .stc-list { list-style: none; padding: 0; margin: 0; font-size: 11.5px; color: #fff; line-height: 1.4; }
    .stc-list-item { position: relative; padding-left: 15px; margin-bottom: 5px; }
    .stc-list-item::before { content: "■"; color: var(--stc-red); position: absolute; left: 0; font-size: 8px; top: 2px; }
    .text-white { color: #fff; }

.content-page_journey-white p{width:1200px;padding-left: 80px !important;}
.content-page_journey-white h1{padding-left: 80px !important;}

/*leader ship */


.leadership-container {
            display: flex;
            height: 100vh;
            width: 100vw;
        }

        .persona-panel {
            flex: 1;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 60px 40px;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            overflow: hidden;
            text-decoration: none;
        }

        /* Background Image Container */
        .profile-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .profile-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(100%) brightness(0.5);
            transition: 0.8s ease;
        }

        /* Bottom Gradient Overlay */
        .overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0.2) 60%, transparent 100%);
            z-index: 2;
        }

        /* Content Positioning */
        .content1 {
            position: relative;
            z-index: 3;
            color: white;
            transition: transform 0.4s ease;
        }

        .section-number {
            font-size: 1.2rem;
            font-weight: 300;
            color: var(--stc-magenta);
            margin-bottom: 5px;
            display: block;
        }

        h2 {
            font-size: 2.5rem;
            margin: 0 0 10px 0;
            line-height: 1.1;
        }

        .title-sub {
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #ccc;
            margin-bottom: 25px;
            display: block;
        }

        .description {
            font-size: 14px;
            line-height: 1.6;
            color: #bbb;
            margin-bottom: 10px;
            max-width: 100%;
            opacity: 0.8;
            transition: 0.4s ease;
        }

        /* View More Button */
        .view-more-btn {
            display: inline-flex;
            align-items: center;
            padding: 12px 28px;
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 1px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.3s;
            background: transparent;
        }

        /* Interactions */
        .persona-panel:hover {
            flex: 1.3; /* Subtle expansion */
        }

        .persona-panel:hover .profile-image img {
            filter: grayscale(0%) brightness(0.7);
            transform: scale(1.05);
        }

        .persona-panel:hover .description {
            opacity: 1;
            -webkit-line-clamp: 10; /* Reveal more text on hover */
        }

        .persona-panel:hover .view-more-btn {
            background: var(--stc-magenta);
            border-color: var(--stc-magenta);
        }

        /* Mobile Adjustments */
        @media (max-width: 1024px) {
            .section1.flip-y {
    transform: none !important;
}
            .leadership-container { flex-direction: column; overflow-y: auto; }
            .persona-panel { flex: 0 0 100vh; }
        }

        .pd-0{Padding:0 !important;}

        /* Statements */

       /* Custom Transition Variable for a Cinematic Feel */
:root{
    --purple:#4f008c;
    --pink:#ff375e;
    --curve:cubic-bezier(0.19,1,0.22,1);
}

/* ================= LAYOUT ================= */
.ld-viewport{
    width:100%;
    min-height:85vh;
    display:flex;
    justify-content:left;
    align-items:left;
    overflow:hidden;
}

.ld-stage{
    display:flex;
    width:100%;
    max-width:1400px;
    gap:16px;
}

/* ================= CARD ================= */
.ld-card{
    flex:1;

    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    overflow:hidden;
    transition:all 1.1s var(--curve);
}

/* Desktop hover expand */
@media (hover:hover){
    .ld-card:hover{
        flex:4;
        background:var(--purple);
    }
}

/* ================= MEDIA ================= */
.ld-media{
    width:260px;
    height:380px;
    border-radius:20px;
    overflow:hidden;
    z-index:2;
    transition:all 1.1s var(--curve);
    filter:grayscale(1);
}

.ld-image,
.ld-video{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Move image left on hover */
@media (hover:hover){
    .ld-card:hover .ld-media{
        transform:translateX(-110%);
           filter:grayscale(0);
    }
}

/* ================= META ================= */
.ld-meta{
    margin-top:20px;
    text-align:center;
    transition:.4s ease;
}

.ld-meta h4{
    margin:0;
    font-size:20px;
    color:#fff;
}

.ld-meta p{
    margin:5px 0 0;
    font-size:14px;
    color:#ff375e;
}

@media (hover:hover){
    .ld-card:hover .ld-meta{
        opacity:0;
        transform:translateY(20px);
    }
}

/* ================= INFO ================= */
.ld-info{
    position:absolute;
    right:0px;
    width:63%;
    opacity:0;
    transform:translateX(60px);
    transition:all 1.1s var(--curve);
    pointer-events:none;
}

@media (hover:hover){
    .ld-card:hover .ld-info{
        opacity:1;
        transform:translateX(0);
        pointer-events:auto;
    }
}



/* ================= TEXT ================= */
.ld-role{
    color:var(--pink);
    letter-spacing:4px;
    font-size:12px;
    font-weight:800;
    margin-bottom:10px;
}

.ld-name{
    font-size:20px;
    margin:0 0 20px;
    color:#fff;
}

.ld-text{
    color:#fff;
    font-size:15px;
    line-height:1.7;
    margin-bottom:15px;
    text-align:justify;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.ld-btn{
  background: #ff375f;
    border: 1px solid #ff375f;
    color: #fff;
    padding: 12px 35px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
}

/* ================= MOBILE ================= */
@media (max-width:991px){
    .ld-stage{
        flex-direction:column;
    }

    .ld-card{
        padding:30px 20px;
    }

    .ld-media{
            max-width: 100%;
        height: 375px;
        transform: none !important;
        width: 275px;
        filter: grayscale(0) !important;
    }

    .ld-info{
        position:static;
        width:100%;
        opacity:1;
        transform:none;
        pointer-events:auto;
        margin-top:25px;
    }

    .ld-meta{
        display:none;
    }
}



        :root {
            --brand-purple: #4f008c;
            --brand-deep: #2d104a;
            --accent-pink: #ff375e;
            --border-light: rgba(255, 255, 255, 0.3);
            --text-dim: #fff;
        }

.exec-grid:last-child{border:0;}
           .exec-model-slide {
    width: 100vw;
    height: 100vh;
    display: flex;
    background: linear-gradient(95deg, #4f008cd6, #4f008c8f);
    flex-direction: column;
    padding: 80px 50px 50px 50px;
 

       
        }

        .exec-header {
            margin-bottom: 50px;
        }

        .exec-header h1 {
            font-size: 2.8rem;
            font-weight: 300; /* Light weight for professional look */
            letter-spacing: -1px;
        }

        /* Grid System */
        .exec-grid {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 2px; /* For the thin line divider look */
            position: relative;
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
            margin-top:15px;

        }

        /* The vertical/horizontal separator lines */
/*         .exec-grid::before {
            content: '';
            position: absolute;
            top: 0; bottom: 0; left: 50%;
            width: 1px;
            background: var(--border-light);
        }
        .exec-grid::after {
            content: '';
            position: absolute;
            left: 0; right: 0; top: 50%;
            height: 1px;
            background: var(--border-light);
        }
 */
        .exec-cell {
            padding: 10px;
            display: flex;
            flex-direction: column;
        }

        .exec-cell h2 {
            font-size: 1.1rem;
            letter-spacing: 2px;
            color: var(--accent-pink);
            margin-bottom: 5px;
            font-weight: 600;
        }

        .exec-cell ul {
            list-style: none;
        }

        .exec-cell li {
          font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 4px;
    padding-left: 20px;
    position: relative;
    color: var(--text-dim);
        }

        .exec-cell li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 10px;
            width: 6px;
            height: 6px;
            background: var(--accent-pink);
        }

        /* Footer Corporate Summary */
        .exec-footer {
            height: 25vh;
            margin-top: 40px;
            display: grid;
            grid-template-columns: 350px 1fr;
            gap: 60px;
            align-items: center;
        }

 

        .exec-visual::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, rgba(45, 16, 74, 0.8), transparent);
        }

        .exec-summary-text {
            display: flex;
            gap: 40px;
        }

        .exec-summary-text p {
            flex: 1;
            font-size: 0.9rem;
            line-height: 1.3;
            color: var(--text-dim);
            text-align: justify;
        }

        /* Subtle Entrance */
        .fade-in {
            animation: fadeIn 1s ease-out forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .our-journey-bg{

background: url(../images/our-journey1.jpg) center  center no-repeat;
    background-size: cover;
    position: relative;


        }
   .business-model_bg{background:#4f008c url(../images/business-modal.jpg) fixed top center no-repeat; background-size:cover;  position: relative; z-index: 1;}
   .reach_bg{ background: #4f008c url(../images/reach3.jpg) top center no-repeat; background-size:cover;  position: relative; z-index: 1;}
      

         .board-members_bg{background:#4f008c url(../images/business-model.png) fixed top center  no-repeat; background-size:cover;  position: relative; z-index: 1;}
        .font-small{font-size:35px !important;}

  :root {
            --stc-red: #ff375e;
            --text-dark: #1d1d1f;
            --text-gray: #6e6e73;
            --bg-gray: #f5f5f7;
            --border-light: #e5e5e5;
        }
                /* Main layout wrapper */
        .page-wrapper {
            display: flex;
    flex-direction: column;
    height: 85vh;
    padding:2vh 29% 2vh 10%;
   
    margin-top: 15vh;
    border-radius: 0px;
        }

        .header-section {
            text-align: center;
            height: 8vh; /* Fixed height for header */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header-section h1 {
            font-size: clamp(1.5rem, 4vh, 2.5rem);
            font-weight: 800;
            margin: 0;
        }

        .header-section span {
            color: var(--stc-red);
        }

        /* The Strategy Grid - Takes remaining space */
        .reach-container {
            display: flex;
            gap: 1vw;

            width: 100%;
            align-items: stretch;
            margin-top:8%;

        }

        .strategy-column {
            flex: 1;
            background: var(--bg-gray);
            border-radius: 0px 30px;
            padding:10px;
            display: flex;

            transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
 
            cursor: pointer;
        }

        /* Hover Expansion */
        .strategy-column:hover {
            flex: 1.6;
            background: white;
            box-shadow: 0 15px 35px rgba(0,0,0,0.08);
            border: 1px solid var(--stc-red);
        }

        .letter-wrap {
            margin-bottom: 2vh;
          
            padding-left: 10px;
        }

        .big-letter {
            font-size: clamp(2.5rem, 8vh, 5rem);
            font-weight: 900;
            color: var(--stc-red);
            line-height: 1;
        }

        .subtitle {
            font-size: clamp(0.7rem, 1.5vh, 0.9rem);
            font-weight: 700;
            text-transform: uppercase;
            margin-top: 5px;
            color:#4f008c;
        }

        .objectives-list {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 1vh;
            overflow-y: auto; /* Just in case content is long on small screens */
            scrollbar-width: none; /* Hide scrollbar Firefox */
        }
        .objectives-list::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome/Safari */

        .obj-item {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .obj-id {
            font-size: 0.7rem;
            font-weight: 800;
            color: var(--stc-red);
            background: rgba(255, 55, 94, 0.1);
            width: fit-content;
            padding: 1px 6px;
            border-radius: 4px;
        }

        .obj-text {
            font-size: clamp(0.8rem, 1.6vh, 0.95rem);
            font-weight: 500;
        }

        .kpi-box {
            margin-top: 1.5vh;
            padding-top: 1.5vh;
            border-top: 1px solid var(--border-light);
        }

        .kpi-label {
            font-size: 0.65rem;
            font-weight: 800;
            color: var(--text-gray);
            text-transform: uppercase;
        }

        .kpi-text {
            font-size: clamp(0.75rem, 1.4vh, 0.85rem);
            color: var(--text-gray);
            font-style: italic;
            margin: 0;
            font-size: 12px !important;
        }

    .ptb-5{padding:10px 0 !important;}
    .text-new{font-size: 20px !important;
}


.panel.active .panel-content:hover {
    cursor: pointer; /* This makes the mouse look like the standard arrow */
}

:root {
    /* This curve starts fast and ends very softly */
    --transition: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    --stc-light: #f4f4f4; /* Ensure this is defined */
}

          /* Container */
        .accordion-wrapper {
            display: flex;
            width: 100vw;
            height:57vh;
            align-items: stretch;
            background: #fff;
        }

        /* Individual Panel */
        .panel {
            position: relative;
            flex: 1;
            overflow: hidden;
            cursor: pointer;
transition: flex var(--transition), background var(--transition);
            display: flex;
            flex-direction: column;
            border-right: 1px solid rgba(255, 255, 255, 0.1);

        }

        /* Color Variations for Panels */
        .p1 { background: #3d2363; }
        .p2 { background: #4f2d7f; }
        .p3 { background: #5d3596; }
        .p4 { background: #6a41a3; }
        .p5 { background: #784db0; }
        .p6 { background: #855abd; }

        .panel.active {
            flex: 6;
            cursor: default;
            background: var(--stc-light);
        }

        /* Vertical Sidebar Title (Collapsed View) */
        .panel-header {
       position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: opacity 0.4s ease-in-out;

        }

        .panel.active .panel-header { opacity: 0; pointer-events: none; }

        .panel-header h3 {
            transform: rotate(-90deg);
            white-space: nowrap;
            color: #fff;
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 4px;
            font-weight: 300;
        }

        /* Content Area (Expanded View) */
        .panel-content {
            opacity: 0;
            visibility: hidden;
            padding: 5% 3%;
            height: 100%;
            overflow-y: auto;
            transform: translateX(30px);
            transition: all 0.5s ease;
            color: #333;
            display: flex;
            flex-direction: column;
            justify-content:flex-start;
        }

        .panel.active .panel-content {
          opacity: 1;
    visibility: visible;
    transform: translateX(0);
    /* Reduced delay from 0.4s to 0.2s for a snappier feel */
    transition: all 0.5s ease-out 0.2s;
        }

        /* Typography */
        .category-tag {
            color: var(--stc-accent);
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 2px;
            font-size: 0.9rem;
            margin-bottom: 10px;
   
            display:none;
        }

         .panel-content h2 {
            font-size: 1.2rem;
            margin: 0 0 15px 0;
            color: var(--stc-purple);
            line-height: 1.1;
        }

        .description {
     
            line-height: 1.7;
            font-size: 1.05rem;
            color: #444;
        }

 

        /* Responsive Mobile View */
   

        .stakeholder-bg{background:#4f008c url(../images/stakeholder.png) top right no-repeat !important; background-size: 100% 100%; padding:0 2%; min-width:150vw;}
        .top-content-text{background:linear-gradient(91deg, #4f008c, transparent);
    width: 75vw;
    padding: 17px;
    color: #fff;
margin-top:88px;}

    .top-content-text .about-title{    color: #fff;
    padding: 0px 0 10px 0;
    font-size: 40px;
    margin:0;
    }
.risk-bg{
background:url(../images/risk-mgnt.jpg) top right no-repeat !important; background-size: 100% 100%; padding:0; min-width:80vw;

}

    :root {
            --stc-brand: #4f008c;
            --stc-vibe: #ff375e;
            --stc-glass: rgba(255, 255, 255, 0.95);
        }

        /* Viewport Lock & Unique Reset */
        .stc-main-viewport {
      height: 100vh;
    width: 100vw;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    position: relative;

        }

        /* Sidebar Identity */
        .stc-identity-col {
            width: 30%;
            background: var(--stc-brand);
            color: white;
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            z-index: 5;
        }

        .stc-title-main {
            font-size: clamp(2.5rem, 7vh, 4rem);
            font-weight: 900;
            line-height: 0.95;
            margin-bottom: 24px;
            animation: stcFadeSlide 0.8s ease-out forwards;
        }

        .stc-intro-body {
            font-size: 1rem;
            line-height: 1.6;
            opacity: 0.85;
            border-left: 3px solid var(--stc-vibe);
            padding-left: 20px !important;
            animation: stcFadeIn 1.2s ease forwards 0.3s;
        }

        /* Content Dashboard */
        .stc-dashboard-area {
            flex: 1;
            padding: 23vh 10vh 0 10vh;
            display: grid;
            grid-template-rows: auto 1fr;
            gap: 20px;
             background:linear-gradient(87deg, #4f008c, #ece2e200);
            z-index: 2;
        }

        /* Unique Tile Components */
        .stc-shift-banner {
            background: var(--stc-glass);
            border: 1px solid rgba(79, 0, 140, 0.1);
            padding: 25px;
            border-radius: 24px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        }

        .stc-tag-header {
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 2px;
            color: #ff375e;

            margin-bottom: 12px;
            display: block;
        }

        .stc-shift-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        .stc-stat-item h4 { color: var(--stc-brand); margin-bottom: 5px; }
        .stc-stat-item p { font-size: 0.85rem; color: #555; line-height: 1.4; }

        .stc-strategy-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 15px;
        }

        .stc-pill-card {
            background: white;
            padding: 20px;
            border-radius: 16px;
            border: 1px solid #eee;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .stc-pill-card:hover {
            border-color: var(--stc-brand);
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(79, 0, 140, 0.08);
        }

        .stc-pill-card strong { color: var(--stc-brand); font-size: 0.9rem; margin-bottom: 4px; }
        .stc-pill-card span { font-size:14px; color:#1d252d; line-height: 1.3; }

        /* Floating Details Button */
        .stc-fab-details {
            position: absolute;
            bottom: 40px;
            left: 40px;

                 background: var(--stc-vibe);
            color: white;
            padding: 16px 32px;
            border-radius: 100px;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 15px 35px rgba(79, 0, 140, 0.25);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: none;
            cursor: pointer;
            z-index: 10;
            left:10%;
        }

        .stc-fab-details:hover {
                   background:#fff;
                   color:#ff375e;
            transform: scale(1.05) rotate(-1deg);
            box-shadow: 0 20px 45px rgba(255, 0, 255, 0.3);
        }




 /* Floating Details Button */
        .stc-fab-details1 {
 
            bottom: 40px;
            right: 40px;

                 background: var(--stc-vibe);
            color: white;
            padding: 10px 32px;
            border-radius: 100px;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 15px 35px rgba(79, 0, 140, 0.25);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: none;
            cursor: pointer;
            z-index: 10;
        }

        .stc-fab-details1:hover {
                   background:#fff;
                   color:#ff375e;
            transform: scale(1.05) rotate(-1deg);
            box-shadow: 0 20px 45px rgba(255, 0, 255, 0.3);
        }







        /* Animations */
        @keyframes stcFadeSlide { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes stcFadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* Responsive height check */
        @media (max-height: 700px) {
            .stc-identity-col { padding: 30px; }
            .stc-dashboard-area { padding: 20px; }
            .stc-pill-card { padding: 12px; }
        }

        .stc-title-main.about-title{font-size:40px;}

        p.obj-text{font-size:11px !important;}
/* ESG review */



:root {
            --esg-env-color: #00C48C;
            --esg-env-bg: #e5f9f4;
            --esg-soc-color: #ff375e;
            --esg-soc-bg: #ffebef;
            --esg-gov-color: #4f008c;
            --esg-gov-bg: #ede5f4;
            --esg-border-ui: #e2e8f0;
        }


        .sustain-btn{margin-right:23%}

        /* Animated Background Container */
        .esg-main-container {
position: relative;
    min-height: 53vh;
    display: flex;
    align-items: flex-start;
    justify-content: left;
    overflow: hidden;
    color: #1e293b;
    margin-left: -10%;
    padding: 0;
    margin-top: 20px;
        }

        /* Moving Lines Background Animation */
        .esg-bg-lines {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: 0;
            background-image: 
                linear-gradient(90deg, rgba(98, 0, 234, 0.03) 1px, transparent 1px),
                linear-gradient(0deg, rgba(98, 0, 234, 0.03) 1px, transparent 1px);
            background-size: 60px 60px;
            animation: esg-move-lines 20s linear infinite;
        }

        @keyframes esg-move-lines {
            0% { background-position: 0 0; }
            100% { background-position: 60px 60px; }
        }

        .esg-matrix-wrapper {
              position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 100px repeat(3, 1fr);
    grid-template-rows: 90px 1fr 1fr 1fr;
    width: 96vw;
    gap: 10px;
    perspective: 1500px;
        }

        /* --- SIDE LABELS --- */
        .esg-side-label {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height:90px;
            align-items: flex-end;
            padding-right: 30px;
            border-right: 2px solid var(--esg-border-ui);
        }

        .esg-side-label h3 {
          font-size: 10px;
    /* text-transform: uppercase; */
    letter-spacing: 3px;
    color: #ff375e;
    font-weight: 800;
    transform: rotate(-180deg);
    writing-mode: vertical-lr;
        }

        /* --- COLUMN HEADERS --- */
        .esg-col-header {
            border-radius: 16px;
            display: flex;
            align-items: center;
            padding: 25px;
            color: white;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .esg-col-header span {
            font-size: 4.5rem;
            font-weight: 900;
            margin-right: 20px;
          padding-top:10px;
        }

        .esg-env-h { background: linear-gradient(135deg, #00C48C, #00C48C); }
        .esg-soc-h { background: linear-gradient(135deg, #ff375e, #ff375e); }
        .esg-gov-h { background: linear-gradient(135deg, #4f008c, #4f008c); }

        /* --- DATA CELLS --- */
        .esg-card {
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 20px;
            padding: 10px;
            height:80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
            opacity: 0;
            transform: translateX(-50px);
            backdrop-filter: blur(8px);
        }

        .esg-env-cell { background-color: var(--esg-env-bg); border-left: 4px solid var(--esg-env-color); color:#00C48C }
        .esg-soc-cell { background-color: var(--esg-soc-bg); border-left: 4px solid var(--esg-soc-color); color:#ff375e}
        .esg-gov-cell { background-color: var(--esg-gov-bg); border-left: 4px solid var(--esg-gov-color); color:#4f008c}

.esg-env-cell p{color:#00C48C; }

.esg-soc-cell p{color:#ff375e; }

  .esg-gov-cell p{color:#4f008c; }


        .esg-card.esg-reveal { opacity: 1; transform: translateX(0); }

        .esg-card:hover {
            transform: translateY(-10px) rotateX(5deg) rotateY(2deg) !important;
            background: white;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
            z-index: 10;
        }

     

        @media (max-width: 1024px) {
            .esg-matrix-wrapper { grid-template-columns: 1fr; overflow-y: auto; height: auto; gap: 10px; }
            .esg-side-label { display: none; }
        }
.width-1200{width:1200px;}

           .esg-bg{background:#4f008c url(../images/sustain-bg.jpg) top right no-repeat !important; background-size: contain !important; padding:0 0 0 15% !important; min-width:130vw;}
           a.view-more{color:#fff; text-decoration:none;}
           a.view-more:hover{text-decoration: underline; color:#ff375e;}


           .svg-icon{    
                filter: brightness(0) invert(1);
            width: 50px;
    height: 50px;
    color:#fff;
    /* display: block; */
    /* margin: 0 auto; */
    margin-right: -54px;}
    

    /* Business Review */

     :root {
            --stc-red: #ff375e;
            --stc-dark: #0a0118;
            --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
            --transition-speed: 0.9s;
        }

      

        .stc-main-container1 {
            display: flex;
            width:100vw;
            height: 100vh;
            margin-top:-14%;
        }

        .stc-panel {
            flex: 1;
            position: relative;
            overflow: hidden;
            transition: flex var(--transition-speed) var(--ease-out-expo);
            border-right: 1px solid rgba(255,255,255,0.05);
            will-change: flex;
        }

        .stc-panel:hover {
            flex: 2;
        }

        /* Background Layer */
        .stc-panel-bg {
      position: absolute;
    top: 34%;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.5) grayscale(1);
    transition: transform 1.5s var(--ease-out-expo), filter 1s ease;
    z-index: 1;
   

        }

        .mt-5-new{margin-top:5%;}

     .stc-panel:hover .stc-panel-bg {
    /* 1.1 is a subtle zoom. Use 1.0 for no zoom at all, or 1.2 for more */
    transform: scale(1); 
    filter: brightness(0.7) grayscale(0); /* Optional: brighten on hover */
}

        /* Enhanced Shiny Falling Lines */
        .stc-line-container {
            position: absolute;
            inset: 0;
            z-index: 2;
            overflow: hidden;
            pointer-events: none;
            opacity: 0.15;
            transition: opacity 0.8s ease;
        }

        .stc-panel:hover .stc-line-container { opacity: 0.5; }

        .stc-line {
            position: absolute;
            top: -250px;
            width: 1px;
            height: 200px;
            background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.7));
            animation: fall linear infinite;
        }

        .stc-line::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 2px;
            background: white;
            box-shadow: 0 0 15px 2px white, 0 0 10px var(--stc-red);
            border-radius: 50%;
        }

        @keyframes fall {
            0% { transform: translateY(-20%); }
            100% { transform: translateY(120vh); }
        }

        /* Parallax Timings for 8 Lines */
        .stc-line:nth-child(1) { left: 8%; animation-duration: 5s; animation-delay: 0s; }
        .stc-line:nth-child(2) { left: 22%; animation-duration: 9s; animation-delay: 1.5s; }
        .stc-line:nth-child(3) { left: 35%; animation-duration: 6s; animation-delay: 3s; }
        .stc-line:nth-child(4) { left: 50%; animation-duration: 11s; animation-delay: 0.5s; }
        .stc-line:nth-child(5) { left: 62%; animation-duration: 7s; animation-delay: 2s; }
        .stc-line:nth-child(6) { left: 78%; animation-duration: 10s; animation-delay: 4s; }
        .stc-line:nth-child(7) { left: 88%; animation-duration: 5.5s; animation-delay: 1s; }
        .stc-line:nth-child(8) { left: 95%; animation-duration: 8.5s; animation-delay: 2.5s; }

        /* Content Area */
        .stc-panel-body {
            position: absolute;
            bottom: 40px;
            left: 0;
            width: 100%;
            padding: 0px 60px;
            z-index: 4;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            /* Resting at bottom */
            transform: translateY(calc(100% - 160px)); 
            transition: transform var(--transition-speed) var(--ease-out-expo);
            pointer-events: none;
        }

        .stc-panel:hover .stc-panel-body {
            transform: translateY(0);
            pointer-events: auto;
        }

        .stc-tag {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--stc-red);
             letter-spacing: 5px;
            margin-bottom: 15px;
            display: block;
        }

        .stc-panel h2 {
            font-size:30px;
            font-weight: 800;
               margin-bottom: 30px;
            line-height: 0.95;
            letter-spacing:2px;
            color:#fff;
        }

.coral-text-segment{ font-size:30px;
            font-weight: 800;
               margin-bottom: 30px;
            line-height: 0.95;
            letter-spacing: 2px;
        color:#ff375e;
         font-size:30px;
        }


        .stc-full-text {
            font-size: 1.05rem;
            line-height: 1.8;

            max-width: 700px;
            margin-bottom: 45px;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.5s ease, transform 0.7s var(--ease-out-expo);
        }

        .stc-panel:hover .stc-full-text {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.2s;
            color:#fff;
        }

        /* Button Style */
        .stc-btn {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            padding: 20px 45px;
            background: #ff375e;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.85rem;

            letter-spacing: 3px;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease, opacity 0.5s ease, transform 0.7s var(--ease-out-expo);
        }

        .stc-panel:hover .stc-btn {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.35s;
        }

        .stc-btn:hover {
            background:#fff;
            border-color: var(--stc-red);
            color:var(--stc-red);
            letter-spacing: 5px;
            box-shadow: 0 10px 30px rgba(255, 55, 94, 0.3);
        }

        .stc-overlay {
            position: absolute;
            inset: 0;
           /*  background: linear-gradient(to top, rgba(10,1,24,1) 0%, rgba(10,1,24,0.6) 45%, transparent 100%); */
            z-index: 3;
            cursor: pointer;
        }

        .ld-card{cursor: pointer;}
        .stc-panel-body{ cursor: pointer;}

        .stay-text{z-index:99; position:relative; padding-left:80px;}


        /****************************** download Center*************************** */
   :root {
            --primary: #4f008c;
            --accent: #ff375e;
            --bg: #0a001a;
            --glass: rgba(255, 255, 255, 0.08);
            --transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
        }

    
        /* --- Background Manager (Fixed Layer) --- */
        .bg-manager {
            position: fixed;
            inset: 0;
            z-index: -1;
        }

        .bg-image {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1.2s ease-in-out;
 /*            filter: brightness(0.65) saturate(0.6); */
        }

        .bg-image.active { opacity: 1; }

        .vignette {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, transparent 0%, var(--bg) 100%);
            z-index: 1;
        }

        /* --- Navigation Header --- */
        .nav-header {
            position: fixed;
            top: 0; width: 100%;
            padding: 40px 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            margin-top:5%;
        }

        .stc-logo { font-weight: 900; font-size: 2.2rem; letter-spacing: -1px; }

        .title-nav { display: flex; gap: 30px; }

        .nav-btn {
            background: none; border: none; color: #fff;
          letter-spacing: 1.5px;
            cursor: pointer; opacity: 0.4; transition: 0.3s;
            position: relative;
            padding-bottom: 5px;
      font-family: 'STC Forward';
        }

        .nav-btn.active { opacity: 1; color: var(--accent); }
        .nav-btn.active::after {
            content: ''; position: absolute; bottom: 0; left: 0; 
            width: 100%; height: 2px; background: var(--accent);
        }

        /* --- Master Slider Container --- */
        .master-slider {
            display: flex;
            width: 500vw; /* 5 Sections x 100vw */
            height: 100vh;
            transition: var(--transition);
            will-change: transform;
        }

        /* --- Section Panel Layout --- */
        .section-panel {
            width: 100vw;
            height: 100vh;
            flex-shrink: 0; /* Prevents container from collapsing */
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            align-items: center;
            padding: 0 2%;
            margin-top:1%;
            gap: 80px;
        }

        /* Left Side: Text */
        .panel-heading h1 { font-size: 8rem; font-weight: 900; opacity: 0.1; line-height: 0.8; }
        .panel-heading h2 { font-size: 3rem; font-weight: 600; margin-top: -50px; position: relative; z-index: 2; color:#fff; }
        .panel-heading h2 span { color: var(--accent); display: block; }

        /* Right Side: Links (Ensuring Visibility) */
        .links-container {
            display: flex;

            gap: 15px;
    
            overflow-y: auto;
            padding-right: 20px;
        
        }

        .doc-card {
           background: #ff375e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(50px);
    padding: 12px 28px;
    border-radius: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: white;
    transition: all 0.4s ease;
        }

        .doc-card:hover {
            background: #4f008c;
            border-color: var(--accent);
            transform: translateX(12px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            color:#fff;
        }

        .doc-info span { display: block; font-size: 0.65rem; color: var(--accent); font-weight: 800; text-transform: uppercase; margin-bottom: 4px; }
        .doc-info h4 { font-size: 1.1rem; font-weight: 400; }

        .download-icon {
            width:45px; height: 45px; 
            border-radius: 50%; display: flex;
            align-items: center; justify-content: center; font-weight: 900; font-size: 0.9rem;
        }

        /* Scrollbar Styling */
        .links-container::-webkit-scrollbar { width: 3px; }
        .links-container::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }

        @media (max-width: 1100px) {
            .section-panel { grid-template-columns: 1fr; padding-top: 100px; gap: 30px; }
            .links-container { min-width: 100%; }
            .panel-heading h1 { font-size: 5rem; }
            .panel-heading h2 { font-size: 2.5rem; margin-top: -30px; }
        }


        /* ===============================
   BASE VISIBILITY
================================ */

.desktop-nav {
  display: none;
}

.burger {
  display: flex;
}

/* ===============================
   HEADER (DESKTOP)
================================ */

@media (min-width: 1024px) {
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    background: linear-gradient(190deg, #0c0c0d, transparent);
  }

  .desktop-nav {
    display: block;
  }

  .desktop-nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
  }

  .desktop-nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
  }

  .desktop-nav a:hover {
    color: #ff375e;
  }

  .burger,
  .mobile-drawer,
  .drawer-backdrop {
    display: none !important;
  }
}

/* ===============================
   BURGER BUTTON (MOBILE)
================================ */

.burger {
  position: fixed;
  top: 18px;
  right: 5%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f008c, #2d0055);
  border: 3px solid #fff;
  color: #fff;
  font-size: 26px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001;
  box-shadow: 0 4px 20px rgba(79, 0, 140, 0.4);
  transition: all 0.3s ease;
}

.burger:hover {
  background: linear-gradient(135deg, #5a0099, #3a0066);
}

/* ===============================
   MOBILE DRAWER (FULL SCREEN)
================================ */

.mobile-drawer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #0c0c1f, #1a0033);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10000;
  padding: 90px 24px 30px;
  overflow-y: auto;
}

.mobile-drawer.open {
  transform: translateX(0);
}

/* ===============================
   DRAWER CLOSE
================================ */

.drawer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.drawer-close:hover {
  background: #ff375e;
  transform: rotate(90deg);
}

/* ===============================
   DRAWER MENU
================================ */

.mobile-drawer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-drawer li {
  margin-bottom: 16px;
}

.mobile-drawer a {
  display: block;
  padding: 16px 22px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
}

.mobile-drawer a:hover {
  background: rgba(79, 0, 140, 0.4);
  transform: translateX(8px);
}

.mobile-drawer a.active {
  background: linear-gradient(135deg, #4f008c, #ff375f);
  box-shadow: 0 6px 25px rgba(79, 0, 140, 0.4);
}
#scroll-container.dragging {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    user-select: none;
}

.desktop-nav a.active,
#mobileDrawer a.active {

  color: #fff;
  font-weight: 600;
}

.mt-20{margin-top:20%;}

.mt-12{margin-top:12%;}
/* Container to put buttons side-by-side */
.button-container {
    display: flex;
    gap: 10px; /* Adjust spacing between the two buttons */
    align-items: center;
}

/* Styling the buttons */
.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* padding: 0px 12px; */
    cursor: pointer;
    border: 1px solid #ccc;
    /* background-color: #fff; */
    border-radius: 4px;
    background: none;
    border: none;
    color: #ff375e;
}
.download-btn, .language-btn i{font-size:25px;}
.download-btn, .language-btn:hover{color:#fff;}
/* Optional: Right-to-left adjustment for Arabic text */
.language-btn span {

    direction: rtl;
}

.header-actions{display:flex;}


:root {
            --stc-accent: #ff375e;
            --stc-purple: #4f0599;
            --butter-curve: cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Prevent background scroll when modal is open */
        body.modal-active {
            overflow: hidden;
        }

 

        /* --- BUTTONS: CENTERED & HIGH Z-INDEX --- */
        .stc-btn-wrapper {
            display: flex;
            gap: 60px;
            position: relative;
            z-index: 999999; /* Higher priority */
        }

        .stc-nav-link {
            background: none;
            border: none;
            padding: 10px 0;
            font-size: 22px;
            font-weight: 600;
            color: var(--stc-accent);
            cursor: pointer;
            position: relative;
            display: flex;
            align-items: center;
            gap: 12px;
            outline: none;
            text-decoration: none;
            font-family: 'STC Forward';
        }

        /* The animated underline */
        .stc-nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 50%;
            background-color: var(--stc-accent);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        .stc-nav-link:hover::after {
            width: 100%;
        }

        .stc-nav-link span {
            font-size: 26px;
            font-weight: 300;
            transition: transform 0.4s var(--butter-curve);
        }

        .stc-nav-link:hover span {
            transform: rotate(270deg);
        }

        /* --- OVERLAY & SHEET --- */
        .stc-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 54vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(20px);
            z-index: 1000000; /* Absolute top */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.6s var(--butter-curve);
        }

 .stc-modal-sheet {
    position: fixed !important;
    bottom: 40px;
    left: 0;
    width: 54vw;
    background: white;
    z-index: 2147483647 !important; 
    border-radius: 40px 40px 0 0;
    
    /* --- THE FIXES --- */
    transform: translateY(100%); /* Changed from 105% */
    visibility: hidden;           /* Hide it from the screen entirely */
    /* ----------------- */

    transition: transform 0.8s var(--butter-curve), visibility 0.8s;
    max-height: 92vh;
    overflow-y: auto;
    isolation: isolate; 
    box-shadow: 0 -20px 100px rgba(0,0,0,0.3);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Add visibility: visible to the active class */
.is-active { 
    transform: translateY(0); 
    visibility: visible !important; 
}

.stc-modal-sheet::-webkit-scrollbar {
    display: none;
}
        .is-open { opacity: 1; visibility: visible; }
        .is-active { transform: translateY(0); }

        /* --- CONTENT WRAPPER --- */
        .stc-inner-container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 50px 30px;
            position: relative;
        }

        .stc-close-icon {
            position: absolute;
            top: 30px;
            right: 30px;
            font-size: 50px;
            color: #ff375e;
            cursor: pointer;
            line-height: 0.6;
            transition: color 0.3s;
        }

        .stc-close-icon:hover { color: var(--stc-accent); }

 /* Universal Fix */
.brand-layout {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    width: 100%;
    /* Added: This prevents children from pushing the parent wider */
    box-sizing: border-box; 
}

.brand-layout img {
    /* Use flex-basis instead of just width */
    flex: 0 0 40%; 
    max-width: 40%;
    height: auto;
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
}

.text-block {
    /* This forces the text to occupy only the remaining 60% */
    flex: 1; 
    min-width: 0; 
    word-wrap: break-word;
}

        .text-block h2 { color:#ff375e; font-size: 20px; margin-top: 0; }
        .text-block p { color: #4f008c; font-size: 14px !important; margin-bottom: 24px; text-align: justify; }

        .logo-strip {
           display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    /* background: #fcfcfc; */
    /* border: 1px solid #f0f0f0; */
    /* padding: 50px; */
    border-radius: 30px;
    margin-top: 20px;;
        }

        .logo-strip img { height: 50px; object-fit: contain; }

        @media (max-width: 850px) {
            .brand-layout { flex-direction: column; text-align: center; }
            .brand-layout img { width: 100%; }
            .stc-btn-wrapper {  gap: 20px; }
            .stc-nav-link{font-size:20px;}

        }
.action-anchor .desktop-nav a:active{color:#fff;}

        canvas {
    overflow: visible !important;
}


.shaded-section-grid {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
    }


    :root {
            --stc-brand-purple: #4f008c;
            --stc-brand-pink: #ff375e;
            --stc-deep-bg: #070010;
        }

        /* Unique Scoped Classes */
        .stc-node-overlay {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: radial-gradient(circle at center, var(--stc-brand-purple) 0%, var(--stc-deep-bg) 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s;
        }

        .stc-node-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.4;
        }

        .stc-node-interface {
            position: relative;
            z-index: 10;
            text-align: center;
        }

        .stc-node-logo {
            width: 140px;
            margin-bottom: 2rem;
            filter: drop-shadow(0 0 20px rgba(255, 55, 94, 0.3));
            animation: stc-node-pulse 2s infinite ease-in-out;
        }

        .stc-node-subtitle {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 4px; /* Increased spacing for a premium digital look */
    text-transform: uppercase;
    margin-top: -5px; /* Pulls it slightly closer to the percentage */
    opacity: 0.9;
font-family: 'STC Forward',roboto,arial,sans-serif !important;
}

/* Adjust margin on the bar container to give the subtitle room */
.stc-node-progress-container {
    width: 240px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin: 30px auto; /* Increased top margin from 20px to 30px */
    overflow: hidden;
}
.second-headings{margin: 0px 0 0px 0;
    font-size: 25px !important;
  }
        .stc-node-percentage {
            color: #ffffff; /* Add this line */
            font-size: 5rem;
            font-weight: 800;
            margin: 0;
            letter-spacing: -3px;
            font-variant-numeric: tabular-nums;
        }

  .mt-18{margin-top:18%;}

        .stc-node-progress-bar {
            height: 100%;
            width: 0%;
            background: var(--stc-brand-pink);
            box-shadow: 0 0 15px var(--stc-brand-pink);
            transition: width 0.1s ease-out;
        }

        @keyframes stc-node-pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.8; }
        }

        /* Exit Animation */
        .stc-node-finished {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .stc-node-content {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }


        /* AWARDS */


      :root {
    --purple: #4f008c;
    --pink: #ff375e;
    --white: #ffffff;
    --light-purple: #eddcf9;
}

/* Container */
.awards-stack {
    display: flex;
    height: 100vh;
    width: 100vw;
    align-items: stretch;
    overflow: hidden;
}

/* The Header Strip (Stationary) */
.stack-header {
    flex: 0 0 15vw;
    background: var(--purple);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    color: white;
    z-index: 10;
}

.stack-header h1 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: clamp(2rem, 5vh, 4rem);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 10px;
}

.stack-header img {
    width: 50px;
    margin-bottom: 30px;
}

/* The Award Strips (Default/Collapsed State) */
.award-list-item {
    flex: 1;
    border-left: 1px solid #4f008c3b;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    background: var(--light-purple);
    overflow: hidden;
    cursor: pointer;
}

/* Vertical Line Accent */
.item-accent {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 2px;
    height: 40px;
/*     background: var(--pink); */
    z-index: 2;
}

/* Collapsed Text Styling */
.award-list-item h3 {
    font-size: 1.2rem;
    color: var(--purple);
    margin: 0;
    transform: rotate(270deg);
    transform-origin: left bottom;
    white-space: nowrap;
    transition: all 0.4s ease;
    position: absolute;
    bottom: 40px;
    left: 50%;
    font-weight: 800;
    z-index: 2;
}

.award-list-item p, .award-list-item img {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease 0.2s;
    color: #fff;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    pointer-events: none;
    z-index: 2;
}


.award-list-item img.awards-img{

    margin-bottom: 15px;
    border-radius: 20px 0;
    border-right: 10px solid #ff375f;
    border-bottom: 10px solid #4f008c;
        width: 285px;
    height: auto;
}

/* Background Overlay Effect */
.award-list-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--purple);
    transition: height 0.4s ease;
    z-index: 1;
    opacity: 0.05;
}

/* ACTIVE / EXPANDED STATE (Triggered by JS) */
.award-list-item.active {
    flex: 3;
    background: linear-gradient(179deg, #4f008c, var(--purple));
}

.award-list-item.active::after {
    height: 100%;
}

.award-list-item.active h3 {
    transform: rotate(0deg);
    position: relative;
    bottom: 0;
    color: #fff;
    left: 0;
    font-size: 1.8rem;
    white-space: normal;
    margin-bottom: 20px;
}

.award-list-item.active p, .award-list-item.active img {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Utility classes from your original code */
.flext-right-content { display: flex; justify-content: start; margin-top:10px;}
.stc-text-group { margin-top: 3%; }
.mr-23 { margin-right: 23%; }

/* Responsive adjustments */
@media (max-width: 1024px) {

     .stc-btn-wrapper {
          padding:40px 0;
        }
 #bg0 { background-image: none !important;}
 #bg1 { background-image: none !important; }
 #bg2 { background-image: none !important;}
 #bg3 { background-image: none !important;}
 #bg4 { background-image: none !important;}
 #bg5 { background-image: none !important;}


.panel-heading h1 {
    font-size: 8rem;
    font-weight: 900;
    opacity: 0.3;
    line-height: 0.8;
    color: #fff;
}

    .exec-cell ul {
    list-style: none;
    padding: 15px 0;
}
.exec-cell ul li {line-height:160%;}
    .awards-stack { flex-direction: column; height: auto; width: 100%; }
    
    .stack-header { 
        flex: 0 0 auto; width: 100%; padding: 40px 20px; 
        writing-mode: horizontal-tb; 
    }
    .stack-header h1 { transform: none; letter-spacing: 5px; }

    .award-list-item {
        display: flex;
        flex-direction: column; /* Content stacks inside, but we use a wrapper for the top row */
        height: auto;
        padding: 20px;
        background: #e7d3f6;
        border-bottom: 1px solid #eee;
        position: relative;
        transition: background 0.3s ease;
    }

    /* Create the Side-by-Side Layout for Image and Title */
    .award-list-item::after { display: none; } /* Remove the desktop overlay */
    
    .award-list-item img.awards-img {

        object-fit: cover;
        margin: 0 15px 0 0 !important;
        opacity: 1 !important;
        transform: none !important;
        border: 1px solid #eee;
                width: 120px;
        border-radius: 0;
    }.award-list-item img{opacity:1 !important;}
    .global-award{height: 80px;
    width: 60px;
}

   

    /* Container for the Top Row (Image + Heading) */
    .award-list-item .item-top-row {
        display: block;
        align-items: center;
        width: 100%;
    }

    /* According Style Arrow */
  /* Base state: the Down Arrow */
.award-list-item::before {
    content: '';
    position: absolute;
    right: 25px;
    top: 40px; /* Adjust this to center with your header row */
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--purple);
    border-bottom: 2px solid var(--purple);
    transform: translateY(-50%) rotate(45deg); /* Creates the 'V' shape */
    transition: all 0.3s ease;
    z-index: 5;
}

/* Active state: the Up Arrow */
.award-list-item.active::before {
    border-color: #fff; /* Changes color to white when background is purple */
    transform: translateY(-25%) rotate(-135deg); /* Flips it upward */
}
    /* Description (P) Styling */
    .award-list-item p {
        display: none;
        margin-top:0px;
        font-size: 0.95rem;
        line-height: 1.5;
        color: #333;
    }

    /* Active State Mobile */

    .award-list-item.active h3, 
    .award-list-item.active p { color: #fff !important; padding:20px 0 !important; }
    .award-list-item.active p { display: block; }
}

          .chart-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .chart-container {
            width: 100%;
            height: 400px; /* Increased height to accommodate labels */
        }

             :root {
            --stc-purple: #4f008c;
            --stc-pink: #ff375e;
            --stc-dark: #1a1a1b;
            --glass-bg: rgba(255, 255, 255, 0.95);
        }


        .stc-container {
            width: 100%;
            max-width: 1000px;
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        /* Top Branding Section */
        .stc-title-area {
            display: flex;
            align-items: center;
            gap: 25px;
        }

  

        .stc-text-group h2 {
            font-size: 1.1rem;
            color: var(--stc-pink);
            text-transform: uppercase;
            letter-spacing: 4px;
            font-weight: 700;
            margin-bottom: 5px;
        }

    
        /* Content Card */
        .stc-content-card {

    padding:0;
    border-radius: 35px;
    color: #ffffff;
    position: relative;

        }

        .stc-body-text {
            font-size: 1rem;
            line-height: 1.7;
            margin-bottom: 2.5rem;
            font-weight: 400;
            
            max-width:100%;
        }
        
        .stc-body-text1 {
            font-size: 1rem;
            line-height: 1.7;
            margin-bottom: 2.5rem;
            font-weight: 400;
            max-width:100%;
            width:500px;
        }
.stc-strategy-badge {
    background: #ff375e;
    color: white;
    padding: 2px 14px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 1.2rem;
    display: inline-block;
    transform: skewX(-10deg);
    margin: 0 5px;
    
    /* Animation Call */
    animation: pulse-glow 2s infinite ease-in-out;
}

/* Pulse Animation Definition */
@keyframes pulse-glow {
    0% {
        /* Start with no shadow (fully transparent white) */
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
        transform: skewX(-10deg) scale(1);
    }
    50% {
        /* Bright white glow expansion */
        box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.5);
        transform: skewX(-10deg) scale(1.03);
    }
    100% {
        /* Fade back to nothing */
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        transform: skewX(-10deg) scale(1);
    }
}
        .stc-focus {
            color:#ff375e;
            font-weight: 700;
            text-decoration: underline decoration-var(--stc-pink) 3px;
            text-underline-offset: 5px;
        }

        /* Action Area */
        .stc-action-bar {
            display: flex;
            align-items: center;
        }

        .stc-link-btn {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background:#ff375e;
            color: white;
            padding: 20px 45px;
            border-radius: 18px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.1rem;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .stc-link-btn:hover {
            background: var(--stc-purple);
            transform: translateY(-5px);
            color:#fff;
            box-shadow: 0 15px 30px rgba(79, 0, 140, 0.3);
        }

        /* Animations */
        @keyframes stcFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        @keyframes stcSlideUp {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .stc-animate {
            animation: stcSlideUp 0.8s ease-out forwards;
        }

        .stc-delay-1 { animation-delay: 0.3s; opacity: 0; }
        .stc-delay-2 { animation-delay: 0.5s; opacity: 0; }

        @media (max-width:1024px) {
            .stc-text-group h1 { font-size: 2.5rem; }
            .stc-body-text,.stc-body-text1 { font-size: 1.2rem; }
            .stc-content-card { padding: 2.5rem 1.5rem; }
            .stc-title-area { flex-direction: column; align-items: flex-start; gap: 15px; }
        }

        @media screen and (max-width:1024px) {
    .hero {
        padding: 0px 5% !important;
    }
}


.mobile-bottom-tabs {
            display: none; /* Hidden on Desktop */
        }

        @media (max-width:1024px) {
            .ml2 .letter{display:inline !important;}
            .desktop-nav { display: none; }

 .mobile-bottom-tabs {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 100%;
        height: 70px;
        background: var(--glass-bg);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 0;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
        z-index: 9999;
        justify-content: space-around;
        align-items: center;
        padding: 0 10px;
    }

            .tab-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-decoration: none;
                color: #8e8e93;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                flex: 1;
            }

            .tab-item i {
                font-size: 1.3rem;
                margin-bottom: 4px;
            }

            .tab-item span {
                font-size: 0.65rem;
                font-weight: 600;
                letter-spacing: 0.3px;
            }

            /* Active State Style */
            .tab-item.active {
                color: var(--stc-purple);
            }

            .tab-item.active i {
                transform: translateY(-5px);
                color: var(--stc-red); /* Subtle accent color */
            }

            /* Dot indicator for active tab */
            .tab-item.active::after {
                content: '';
                position: absolute;
                bottom: -8px;
                width: 5px;
                height: 5px;
                background-color: var(--stc-purple);
                border-radius: 50%;
            }

            /* Burger Menu hidden if tabs are the primary nav */
            .burger { color: white; font-size: 1.5rem; cursor: pointer; }
        }

        /* drop water */

              .scene {
            position: relative;
            width: 400px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

             .scene1 {
            position: relative;
            width: 400px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
/* 1. Define the Heartbeat Keyframes */
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.1); /* First thump */
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.15); /* Second, stronger thump */
    }
    70% {
        transform: scale(1); /* Rest period */
    }
}
        /* --- THE MAIN DROP --- */
    /* 2. Update your .main-drop class */
.main-drop {
    position: relative;
    width: 130px;
    height: 130px;
    background: var(--water);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 10px 10px 20px rgba(255, 255, 255, 0.3), 
                inset -5px -5px 15px #535088, 
                0 20px 50px #332966;
    
    /* Layered Animations: morphs over 8s, heartbeats every 2s */
    animation: morphMain 8s ease-in-out infinite, 
               heartBeat 2s ease-in-out infinite;
               
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

        .main-drop::before {
            content: '';
            position: absolute;
            top: 20%;
            left: 20%;
            width: 30px;
            height: 15px;
            background: var(--glare);
            border-radius: 50%;
            transform: rotate(-30deg);
            filter: blur(1px);
        }

       .main-drop i {
    font-size: 35px;
    color: white;
    margin-left: 8px;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    
    /* --- Added Animation --- */
    display: inline-block; /* Ensures transform works correctly */
    animation: softPulse 4s ease-in-out infinite;
}

        
@keyframes softPulse {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05); /* Very slight grow */
        text-shadow: 0 0 25px rgba(255, 255, 255, 0.9), 0 0 10px rgba(255, 255, 255, 0.5);
        opacity: 1;
    }
}
        .width-150 {
    width: 170vw;
    padding: 0 50px;
}

     .video-walk {
      /* 100% of the Viewport Width */
    height: 100vh;      /* 100% of the Viewport Height */
    position: absolute;
    top: 0;
    right: 10px;
    left: auto;            /* Added to ensure it starts from the edge */
    bottom: 0;          /* Added to ensure it ends at the edge */
    object-fit: fill;   /* This forces the video to stretch to fit the box */
}
        /* --- ORBITING DROPS (Particles) --- */
        .particle {
            position: absolute;
            background: var(--water);
            backdrop-filter: blur(4px);
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: inset 2px 2px 5px rgba(255,255,255,0.4);
            pointer-events: none;
        }

        /* Unique animation for each particle */
        .p1_n { width: 15px; height: 15px; animation: orbit 6s linear infinite; }
        .p2_n { width: 10px; height: 10px; animation: orbit 10s linear infinite reverse; }
        .p3_n { width: 20px; height: 20px; animation: orbit 8s linear infinite; animation-delay: -2s; }
        .p4_n { width: 8px; height: 8px; animation: orbit 12s linear infinite reverse; animation-delay: -4s; }

        @keyframes orbit {
            from { transform: rotate(0deg) translateX(120px) rotate(0deg); }
            to { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
        }

        /* --- CIRCULAR TEXT --- */
        .circle-text {
            position: absolute;
            width: 280px;
            height: 280px;
            animation: rotateText 20s linear infinite;
        }

        .circle-text text {
            fill: white;
            font-size: 11px;
            letter-spacing: 5px;
            text-transform: uppercase;
            font-weight: 700;
            opacity: 0.4;
        }

        @keyframes rotateText {
            to { transform: rotate(360deg); }
        }

        @keyframes morphMain {
            0%, 100% { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
            50% { border-radius: 45% 55% 45% 55% / 55% 45% 55% 45%; }
        }

        /* --- HOVER STATE --- */
        .scene:hover .main-drop {
            transform: scale(1.1);
            background: rgba(255,255,255,0.25);
            box-shadow: 0 0 40px rgba(255,255,255,0.2);
        }
        
        .scene:hover .circle-text text { opacity: 0.9; }




            .scene1:hover .main-drop {
            transform: scale(1.1);
            background: rgba(255,255,255,0.25);
            box-shadow: 0 0 40px rgba(255,255,255,0.2);
        }
        
        .scene1:hover .circle-text text { opacity: 0.9; }



         .action-anchor {
            position: absolute; /* Fixed so it stays in view while scrolling */
            bottom: 65px;
            right: 53px;
            z-index: 9999;
        }

        .pulse-scroller-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 240px;
            padding: 14px 24px;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-radius: 50px;
            background: #ff375e;
            color: #fff;
         font-family: 'STC Forward' ,roboto,arial,sans-serif !important;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }

        /* The Professional Pulse */
        .pulse-scroller-btn::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            border-radius: 50px;
            border: 2px solid #fff;
            animation: ripple-effect 2s infinite;
        }

        .btn-chevron {
            animation: arrow-nudge 1.5s infinite;
        }

        @keyframes ripple-effect {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.4); opacity: 0; }
        }

        @keyframes arrow-nudge {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(8px); }
        }

        .pulse-scroller-btn:hover {
            background: #fff;
            color: #000;
        }


      
      .kfi-number-row {
            display: flex;
            align-items: left;
            justify-content: left;
            gap: 10px;
        }

        .kfi-metric-number {
            font-size: 2rem;
            margin: 0;
            color: #333;
        }

        .kfi-percentage {
            font-size: 0.9rem;
            font-weight: bold;
            padding: 4px 8px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            opacity: 0;
            transition: opacity 0.8s ease;
        }

        .is-visible .kfi-percentage {
            opacity: 1;
        }

        .kfi-percentage.positive { color: #fff; background: #00c48c; }
        .kfi-percentage.negative { color: #fff; background:#ff375e; }

        .kfi-percentage.positive::before { content: '▲'; margin-right: 4px; font-size: 0.7rem; }
        .kfi-percentage.negative::before { content: '▼'; margin-right: 4px; font-size: 0.7rem; }

        .mt-4-new{margin-top:3%;}

        .shareholder-page1 p{font-size:10px !important; padding:0 !important; margin:0 !important; color:#aeb4b7;}


p.small-text small{color:#aeb4b7 !important;}

        /* Default English Images */
#bg0 { background-image: url('../images/over-view.jpg'); }
#bg1 { background-image: url('../images/business-modal.jpg'); }
#bg2 { background-image: url('../images/cover-pic1-old.jpg'); }
#bg3 { background-image: url('../images/sustainbility3.jpg'); }
#bg4 { background-image: url('../images/governance.jpg'); }
#bg5 { background-image: url('../images/financial1.jpg'); }




@media(max-width:1024px){


    #bg0 { background-image: url('../images/over-view.jpg') 100% 10% / cover no-repeat fixed !important;; background-size:cover;}
#bg1 { background-image: url('../images/business-modal.jpg') 100% 10% / cover no-repeat fixed !important;; background-size:cover; }
#bg2 { background-image: url('../images/cover-pic1-ar.jpg') 100% 10% / cover no-repeat fixed !important;; background-size:cover;}
#bg3 { background-image: url('../images/sustainbility3.jpg') 100% 10% / cover no-repeat fixed !important;; background-size:cover;}
#bg4 { background-image: url('../images/governance.jpg') 100% 10% / cover no-repeat fixed !important;; background-size:cover;}
#bg5 { background-image: url('../images/financial1.jpg') 100% 10% / cover no-repeat fixed !important;; background-size:cover;}
}




.language-switch{font-weight:bold; font-size:14px; color:#fff; text-decoration:none !important;}

#mainSlider {
    display: flex;
    flex-direction: row; /* Ensures panels are side-by-side */
    transition: transform 0.8s ease-in-out;
}


.business-review-p{line-height:1.5rem;}

.footer-bottom{font-size: 10px !important;
    margin-top: 70%;}

    .pd-space-3 {
    padding: 1% 2% 2.5% 2% !important;
}


a.pulse-scroller-btn{color:#fff !important;}
a.pulse-scroller-btn:hover{color:#FF375E !important;}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* This is the most important line to stop vertical gaps */
  background-color: #000; /* Set this to your content color to hide flickering */
}

.horizontal-wrapper {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden; /* Strictly prevent vertical movement */
  width: 100vw;
  /* Smooth scrolling for a better feel */
  scroll-snap-type: x mandatory; 
}

.section {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-snap-align: start;
}


/* Target the spans inside the animated header */
 .coral-text {
    color: #FF375e !important; /* Use your specific coral hex */
font-size: 40px !important;   /* Keeps it on one line during animation */
}

 .text-white1 {
    color: #FFFFFF !important;
font-size: 40px !important;
}

p small{color:#eee !important;}

.annual-report-text {
       color: #fff !important;
    font-size: 60px !important;
    position: absolute;
    right: 6%;
    top: 25%;
    line-height: 25px;
}

h2.annual-report-text small{font-size:20px;}

.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px); /* Matches your glassmorphism theme */
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-overlay.active {
    display: flex;
    opacity: 1;
}

.video-container {
    position: relative;
    width: 80%;
    max-width: 800px;
    aspect-ratio: 16/9;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.video-container iframe {
    width: 100%;
    height: 100%;
}

.close-btn {
    position: absolute;
    top: -45px;
    right: 0;
    color: white;
    font-size: 35px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.close-btn:hover {
    transform: rotate(90deg) scale(1.2);
}

.text-purple1{color:#4f008c; font-size:40px !important;}

.page-title-model

 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--primary-color);
    position: relative;
    display: inline-block;
    margin-bottom: 0px;
}

a{text-decoration: none !important;}



.video-overlay1234 {
    position: absolute;
    top: 0;
    left: 28%;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(84deg, #4f008c 0%, #4f008c 30%, #4f008c99 90%);
    z-index: 0;
    pointer-events: none;

}


.hero-video-investment1:after{
    background-color:#4f008c46;
}

.scene3 {
    position: relative;
  
}
.pd-top-2{padding-top:2%;}

.dashboard-container{position: absolute;
    z-index: 999;
    top: 20%;}

    .about-title-share{    position: absolute;
    top: 4%;}


    .flext-right-content-en{    position: absolute;
    bottom: 24px;
}

 :root {
            --veloview-accent: #3498db;
            --veloview-bg: #0f0f0f;
        }
    /* --- VeloView Trigger (The Small View) --- */
        .veloview-trigger {
            position: relative;
            width: 380px;
            height: 250px;
            cursor: pointer;
            border-radius: 12px;
            overflow: hidden;
              margin-top:50px;
            border:2px solid #fff;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .veloview-trigger:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 15px 35px rgba(0,0,0,0.25);
        }

        .veloview-trigger img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.8);
            transition: filter 0.3s;
        }

        .veloview-trigger:hover img {
            filter: brightness(1);
        }

        /* Font Awesome Icon Styling */
        .veloview-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 3.5rem;
            opacity: 0.9;
            transition: transform 0.3s;
            animation: velo-pulse 2s infinite;
        }

        @keyframes velo-pulse {
            0% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1); }
        }

        /* --- VeloView Backdrop (The Big Centered View) --- */
        .veloview-backdrop {
            display: none; 
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(8px); /* Modern blur effect */
            justify-content: center;
            align-items: center;
          
        }

        .veloview-stage {
            position: relative;
            width: 56%;
            max-width: 1100px;
            transform: scale(0.8);
            transition: transform 0.4s ease-out;
        }

        .veloview-backdrop.active .veloview-stage {
            transform: scale(1);
        }

     .veloview-stage   video { 
            width: 100%; 
            border-radius: 8px; 
            box-shadow: 0 0 50px rgba(0,0,0,0.5);
            background: #000;
        }

        .veloview-close {
            position: absolute;
            top: -50px;
            right: 0;
            color: #fff;
            font-size: 2rem;
            cursor: pointer;
            transition: color 0.3s;
        }

        .veloview-close:hover {
            color: var(--veloview-accent);
        }


        /* Increase the container width for desktop */
#donut1, #donut2, #barChart {
    width: 450px; /* Increased from your current 350px */
    height: 400px; /* Ensure you have a height set */
    margin: 0 auto; /* Center them if needed */
}

/* Maintain responsiveness for tablets/phones */
@media (max-width: 768px) {
    #donut1, #donut2, #barChart {
        width: 100%; 
        max-width: 350px;
    }
}