@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Italianno&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
       @import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Great+Vibes&family=Italianno&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

       img.qr-code {
            width: 10%;
            position: absolute;
            z-index: 9;
            right: 5%;
            bottom: 5%;
        }
       
       /* Hide the default system cursor globally */
        html, body, a, button, .eco-card  {
            cursor: none !important;
        }

        /* The primary moving cursor head */
        .custom-cursor {
            width: 20px;
            height: 20px;
            background: rgb(135 85 99 / 57%);
            border: 2px solid #a38fa4;
            border-radius: 50%;
            position: fixed;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 9999;
            transition: width 0.2s, height 0.2s, background-color 0.2s;
        }

        /* Dynamic styling for when hovering over clickable elements */
        .custom-cursor.cursor-hover {
            width: 40px;
            height: 40px;
            background: rgba(163, 143, 164, 0.2);
            border-color: #524354; /* Deep branch color */
        }

        /* Style for the temporary trail particles */
        .cursor-particle {
            position: fixed;
            width: 8px;
            height: 8px;
            background: radial-gradient(circle, #f6e5f7 0%, rgba(163,143,164,0) 70%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            transform: translate(-50%, -50%);
            animation: fadeOutParticle 0.8s forwards ease-out;
        }

        /* .pin-spacer {
            width: 100% !important;
            height: 100vh !important;
        } */

        /* Particle fade away animation */
        @keyframes fadeOutParticle {
            0% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.2);
            }
        }
       
       
       /* Reset & Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Google Sans Flex", sans-serif;
            overflow-x: hidden;
        }

        .logo img{ max-width: 100%!important;}

        .download-btn{ padding: 8px 20px; margin-right: 10px; background: #2f4095; color: white;}
        .download-btn:hover{ background: #1d3557; color: white;}

        p, .strategy-list li{
                font-size: 16px;
                line-height: 1.5;
        }

         h2 {
            font-size: 3rem;
            font-family: "Google Sans Flex", sans-serif;
            color: #1d3557;
            line-height: 3rem;
            font-weight: 600;
            margin-bottom: 25px;
        }

        h4 {
            font-family: "Google Sans Flex", sans-serif;
            color: #1d3557;
            font-size: 3.2rem;
            line-height: 3rem;
            font-weight: 600;
        }

        h6{  
            font-size: 16px;
            line-height: 1.5;
            color: #2f4095;
        }

        footer{ 
            width: 100%;
            background: #001632!important;
            color: #ffffff!important;
            padding: 100px 0 40px!important;
        }

        .under-artwork {
            position: relative;
            height: 60px;
            margin-top: -15px; 
            background: url(images/underline-artwork.png) center;
            background-size: 30% 100%;
            background-repeat: no-repeat;
        }

        .under-artwork::before {
            content: "";
            position: absolute;
            width: 34%;
            height: 3px;
            background: linear-gradient(to right, rgb(122 209 242), rgb(37 73 120));
            left: 0;
            top: 60%;
        }

        .under-artwork::after {
            content: "";
            position: absolute;
            width: 34%;
            height: 3px;
            background: linear-gradient(to right, rgb(37 72 120), rgb(122 209 242));
            right: 0;
            top: 60%;
        }

        #section2 .under-artwork.mb-5 { width: 68%; }

        .stack-section{ position: static;}

         /* #section2.stack-section:nth-child(1) { z-index: 1; }
        #about.stack-section:nth-child(2) { z-index: 2; } 
        #vision_mission.stack-section:nth-child(3) { z-index: 3; }  */
        
        #section2 { z-index: 1; }
        #about { z-index: 2; } 
        #vision_mission { z-index: 3; } 
        #chairman-sect { z-index: 4; }
        #ceo-sect { z-index: 5; }

        section#value-section { z-index: 6; }
        #stakeholder-section { z-index: 7; }
        #materiality-section { z-index: 8; }
        #our_values { z-index: 9; }
        #sustainable { z-index: 10; }
        #strategy-section { z-index: 11; }

        #progress-section { z-index: 12; } 
        #award-section { z-index: 13; } 

        #governance-section { z-index: 14; }
        #risk-section{ z-index: 15; }
        #leadership-section{ z-index: 16; }

        /* .stack-section:nth-child(17) { z-index: 17; }
        .stack-section:nth-child(18) { z-index: 18; }

        .stack-section:nth-child(19) { z-index: 19; }
        .stack-section:nth-child(20) { z-index: 20; } */
        #financial-section.stack-section { z-index: 17; }
        #infomation-section.stack-section { z-index: 18; }

        .network-section {
            position: sticky;
            width: 100%;
            height: 100vh;
            margin: 0 auto; 
            background-color: #ffffff;
            background-image: url('images/background-pattern.jpg'); 
            background-size: contain;
            background-position: center;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            animation: liquidNetwork 20s ease-in-out infinite alternate;
        }

        @media (min-width: 1560px){
            .col-lg-3 { width: 33% !important; }
            section#award-section::before { height: 440px!important; }
            section#award-section::after { height: 400px!important; }
        }

        @media (max-width: 1920px) {
            body {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }

        /* --- Circle Artwork Layer --- */
        .circle-artwork {
            position: absolute;
            width: 85%; 
            height: 85%;
            background-image: url('images/circle-artwork.png');
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            will-change: transform; 
            transition: transform 0.1s ease-out; 
            z-index: 1;
            transform:scale(0.7);
        animation:zoomIn 8s ease-out forwards;
        }

        .center-text {
            position: relative;
            z-index: 2;
            text-align: center;
            pointer-events: none; 
        }

        .center-text h1 {
            font-size: 9rem;
            font-family: "Italianno", cursive;
            color: #1d3557;
            line-height: 7rem;
            font-weight: 700;
        }

        .center-text h1 span {
            display: block;
            font-style: italic;
        }

        .intro-section  {
            position: relative;
            width: 100%;
            height: 100vh; 
            overflow: hidden;
            background: url('images/tree-bg.webp') no-repeat top center;
            background-size: cover;
            z-index: 1;
            display: flex;
            align-items: center;
        }

        /* .tree-container {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 60%;
            height: 80%;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            z-index: 2;
            pointer-events: none; 
        } */

        /* .tree-layer {
            width: auto;
            height: 100%; 
            object-fit: contain;
            transform-origin: center center; 
            opacity: 0; 
        } */
        
        .scroll-animate {
            position: absolute;
            width: 50px;
            height: 50px;
            z-index: 11;
            bottom: 0;
        }



        /***** Animation CSS *****/
        @keyframes zoomIn{
            from{
                transform:scale(0.85);
            }
            to{
                transform:scale(1);
            }
        }

        @keyframes iconBounce{ 
            0%,100%{
                transform:translateY(0)
            }
            50%{
                transform:translateY(-15px)
            }
        }

        @keyframes liquidNetwork {
            0% {
                transform: scale(1) translate(0, 0) rotate(0deg);
            }
            50% {
                transform: scale(1.05) translate(-1%, 2%) rotate(0.5deg);
            }
            100% {
                transform: scale(1.02) translate(1%, -1%) rotate(-0.5deg);
            }
        }

/*************************/


.scroll-container {
    height: 300vh!important; 
    position: relative;
    background: #f9f1e4;
    padding: 80px 0;
}

/* Keeps the viewport locked while translating the inner content horizontally */
.sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 4rem;
}

/* Header styles */
.slider-header {
    text-align: center;

}

/* Horizontal Moving Track */
.horizontal-track {
    display: flex;
    gap: 2.5rem;
    width: max-content;
    will-change: transform;
    transition: transform 0.1s ease-out; 
    margin-top: 50px;
}

/* Individual UI Cards */
.card {
    display: flex;
    flex-direction: row;
    width: 750px;
    height: 520px;
    background-color: #557467;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Left Half of Card: Image Area */
.card-image {
    width: 45%;
    position: relative;
    background-color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1rem;
}

/* Decorative background placeholders to mimic your image AI art style */
.art-placeholder {
    width: 90%;
    height: 90%;
    border-radius: 50%;
    opacity: 0.8;
}
.nautilus {
    background: conic-gradient(from 0deg, #e2a04e, #9b5de5, #f15bb5, #00f5d4, #e2a04e);
    clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0); /* Fibonacci-like spiral shortcut style */
}
.fern {
    background: radial-gradient(circle, #2a9d8f, #264653);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.interview-tag {
    position: absolute;
    bottom: 1.5rem;
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
}

/* Right Half of Card: Content Area */
.card-content {
    width: 55%;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #4a6d7c;
    letter-spacing: 1px;
}

.card-content h3 {
    font-size: 2rem;
    font-weight: 400;
    margin-top: 0.5rem;
    color: #fff;
}

.description {
    font-size: 0.9rem;
    color: #8faec4;
    line-height: 1.5;
    margin-top: 0.5rem;
}

/* Floating Quote Panel matching UI design */
.quote-box {
    background: rgba(3, 22, 30, 0.6);
    border-left: 2px solid #ff4a85;
    padding: 1.25rem;
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
}
.quote-box.text-gold { border-left-color: #e2a04e; }

.quote {
    font-style: italic;
    font-size: 4rem;
    color: #e1edf5;
    margin-bottom: 0.75rem;
}
.author {
    display: block;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
}
.role {
    font-size: 0.7rem;
    color: #618799;
}

/* Bottom Actions Row */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1.5rem;
}

.footer-label { font-size: 1.1rem; color: #fff;}
.video-btn {
    background: none;
    border: none;
    color: #4cd137;
    font-size: 0.75rem;
    letter-spacing: 1px;
    cursor: pointer;
}

.stat .number { font-size: 1.5rem; font-weight: bold; display: block;}
.stat .lbl { font-size: 0.6rem; color: #618799; letter-spacing: 1px;}

/* ==========================================================================
   1. Base Layout & Structure
   ========================================================================== */
   #about.logo-partnership-section { 
    background: url(images/side-left-bg.jpg), #f3f0e9; 
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    }
    .logo-partnership-section {
    background-color: #f6efe7; 
    /* background: url(images/side-left-bg.jpg), #f3f0e9; */
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    position:relative; height: 100vh; display: flex; align-items: center; 
    width: 100%;
    }

/* .logo-container {
  max-width: 1200px;
  margin: 0 auto;
} */

.logo-header {
   /*text-align: center;
  max-width: 700px; */
  margin: 0 auto 60px auto;
}


.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  align-items: center;
  justify-content: center;
}

.logo-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px; /* Slightly smoother rounded corners */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
              box-shadow 0.4s ease, 
              filter 0.3s ease;
}

.logo-item img {
  max-width: 100%;
  height: auto;
  max-height: 45px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: all 0.3s ease;
}

/* Hover States (Overrules infinite animation beautifully on mouseover) */
.logo-item:hover {
  transform: translateY(-8px) scale(1.03) !important; /* Smooth pop out */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  z-index: 10;
}

.logo-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* ==========================================================================
   2. Creative Animations (Entrance & Infinity)
   ========================================================================== */

/* --- Entrance Animation --- */
@keyframes creativeFadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

    @keyframes zoomInEntrance1 {
    0% {
        opacity: 0;
        transform: scale(0.3); /* Start small */
    }
    100% {
        opacity: 1;
        transform: scale(1);   /* Settle at normal size */
    }
}

.animate-fade-up {
  opacity: 0; /* Starts hidden */
  animation: creativeFadeUp 1.2s cubic-bezier(0.215, 0.610, 0.355, 1) forwards;
}

/* Entrance Delays */
.delay-1 { animation-delay: 0.2s; }

/* --- Infinite Floating Animation --- */
@keyframes infiniteFloat {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px); /* Smoothly floats up 10px */
  }
  100% {
    transform: translateY(0px);
  }
}

.float-infinite {
  /* This attaches the ongoing background float loop */
  animation: infiniteFloat 5s ease-in-out infinite;
}


.logo-item.float-infinite.float-delay-1 { position: absolute; top: -50%; }
 .logo-item.float-infinite.float-delay-2 { position: absolute; top: -20%; left: 15%; }
 .logo-item.float-infinite.float-delay-3 { position: absolute; top: 30%; left: 30%; }
.logo-item.float-infinite.float-delay-4 { position: absolute; top: 30%; right: 50%;}
.logo-item.float-infinite.float-delay-5 { position: absolute; top: -10%; right: 30%; }
.logo-item.float-infinite.float-delay-6 { position: absolute; top: -70%; right: 15%; }
.logo-item.float-infinite.float-delay-7 { position: absolute; top: -150%; right: 0; }   

/* Staggered float delays & durations so they don't move rigidly together */
.float-delay-1 { animation-delay: 0s; animation-duration: 5s;}
.float-delay-2 { animation-delay: 0.5s; animation-duration: 5.5s; }
.float-delay-3 { animation-delay: 1s; animation-duration: 4.8s; }
.float-delay-4 { animation-delay: 1.5s; animation-duration: 5.2s; }
.float-delay-5 { animation-delay: 2s; animation-duration: 4.6s; }
.float-delay-6 { animation-delay: 2.5s; animation-duration: 5.4s; }
.float-delay-7 { animation-delay: 2.5s; animation-duration: 6.6s; }


        @keyframes scrollBackground {
            from {
                background-position: 0 0;
            }
            to {
                background-position: 100% 50%; 
            }
        }

        @keyframes zoomAndPan {
            0% {
                transform: scale(1) translate(0, 0);
            }
            100% {
                transform: scale(1.1) translate(-1%, -2%);
            }
        }

        @keyframes zoomEntrance {
    0% {
        transform: scale(1.05); /* Starts heavily zoomed in */
        filter: blur(5px) brightness(0.8); /* Starts dark and blurry */
    }
    100% {
        transform: scale(1); /* Settles into original size */
        filter: blur(0) brightness(1); /* Becomes perfectly clear and bright */
    }
}

/* 2. Infinite Left-to-Right Pan */
@keyframes slowPan {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 100% center; /* Moves the background seamlessly to the right */
    }
}

@keyframes slowPan2 {
    0% {
        background-position: 100% center;
    }
    100% {
        background-position: 0% center; /* Moves the background seamlessly to the right */
    }
}




/* ==========================================================================
   3. Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1024px) {
  .logo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .logo-partnership-section {
    padding: 60px 15px;
  }
  .logo-header h2 {
    font-size: 1.85rem;
  }
  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  /* Reduce float height on mobile devices for cleaner rendering */
  @keyframes infiniteFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
  }
}


/* section#vision_mission {
    min-height: 100%;
    height: auto;
}

section#stakeholder-section {
    height: auto;
    padding: 100px 0;
}
    .sustainable-sect { height: auto!important;} */

.ecosystem-section {
    position: relative;
    padding: 100px 20px;
    min-height: 100vh;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, rgb(246 239 231), rgb(140 113 96));
    /* background-image: linear-gradient(to bottom, rgba(252, 250, 252, 0.85), rgba(244, 235, 232, 0.9)), var(--bg-image); */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
    overflow: hidden;
    background-blend-mode: overlay;
}

.ecosystem-section#vision_mission::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url('images/artwork-blue.png');
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    animation: zoomAndPan 20s infinite alternate ease-in-out;
}

.ecosystem-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==========================================================================
   HEADER STYLE
   ========================================================================== */
.eco-header {
    text-align: center;
    margin-bottom: 40px;
    width: 80%;
}

#sustainable .eco-header { width: 100%; }

.eco-tagline {
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-earth);
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}

.eco-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--color-primary);
    font-weight: 600;
}

.eco-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
    margin: 20px auto 0;
}

/* ==========================================================================
   CARDS GRID & GLASSMORPHISM
   ========================================================================== */
.eco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    perspective: 1000px; /* For potential 3D effects */
}

.eco-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 45px 35px;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    box-shadow: 0 10px 30px rgba(82, 67, 84, 0.04);
    text-align: center;
        display: flex;
    flex-direction: column;
    align-items: center;
}

/* Unique Bottom Border hints matching the growth stages */
.eco-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 4px;
    border-radius: 10px 10px 0 0;
    transition: transform 0.4s ease;
    transform: scaleX(0);
}
.eco-card[data-eco="vision"]::after { background: var(--color-accent); }
.eco-card[data-eco="mission"]::after { background: var(--color-secondary); }
.eco-card[data-eco="values"]::after { background: var(--color-earth); }

/* ==========================================================================
   CARD INTERNAL COMPONENTS
   ========================================================================== */
.eco-card__icon-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    transition: transform 0.4s ease;
}

.eco-card[data-eco="vision"] .eco-card__icon-wrapper { background: #fdf2f4; color: #cc99a7; }
.eco-card[data-eco="mission"] .eco-card__icon-wrapper { background: #f3eff4; color: #8e7391; }
.eco-card[data-eco="values"] .eco-card__icon-wrapper { background: #f5f0ed; color: #8c7160; }

.eco-card__icon {
    width: 100%;
    border-radius: 100px;
    /* height: 32px; */
}

.eco-card__label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-secondary);
    display: block;
    margin-bottom: 12px;
}

.eco-card__title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.eco-card__text {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.7;
    color: #615563;
}

/* ==========================================================================
   INTERACTIVE HOVER STATES
   ========================================================================== */
.eco-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(82, 67, 84, 0.12);
    border-color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.65);
}

.eco-card:hover::after {
    transform: scaleX(1);
}

.eco-card:hover .eco-card__icon-wrapper {
    transform: rotate(-8deg) scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .eco-title { font-size: 2.2rem; }
    .ecosystem-section { padding: 60px 15px; }
    .eco-card { padding: 35px 25px; }
}



/****  Count down ***/
.value-container{
    position: relative;
	height: 55vh!important;
    background: #f9f1e4;
    padding: 80px 0;
    width: 100%;
}
.hero-featured {
    position: relative;
    z-index: 30;
    margin-top: -170px;
    /* margin-bottom: clamp(-6rem, -8.3vh, -2.75rem);
    margin-left: auto;
    margin-right: auto; */
    width: min(1180px, calc(100% - 10vw));
    padding: clamp(0.85rem, 1.4vw, 1.3rem) clamp(1rem, 1.6vw, 1.6rem);
    /* background: #04383296; */
    border: 1px solid rgba(184, 140, 62, 0.2);
    border-radius: 20px;
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);

            background: url(images/count-down-bg.jpg), #082c4a;
            background-position: center;
            background-blend-mode: overlay;
            background-repeat: no-repeat;
            background-size: 100% 150%;
            /* background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); */
            background-repeat: repeat;
            animation: scrollBackground 30s linear infinite;
        
}

.featured-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.featured-item:first-child, .featured-item:nth-child(4) {
    border-left: 0;
}
.featured-item {
    display: flex;
    /* display: grid; 
    grid-template-columns: auto auto 1fr;*/
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1vw, 0.85rem);
    padding: clamp(1.5rem, 0.7vw, 0rem) clamp(0.85rem, 1.6vw, 1.5rem);
    border-left: 1px solid rgba(246, 250, 241, 0.12);
}

.featured-thumb {
    width: clamp(40px, 3.4vw, 52px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(184, 140, 62, 0.4);
    background: rgba(6, 18, 36, 0.6);
    flex: 0 0 auto;
}

.featured-page {
        color: #ffffff;
    display: flex;
    /* flex-direction: column; */
    line-height: 1;
    min-width: 2.4em;
    justify-content: center;
}

.featured-label {
    font-size: var(--text-xs);
    line-height: 1.3;
    color: rgba(246, 250, 241, 0.86);
    font-weight: 600;
}

.sustainable-sect {
    margin-top: -140px !important;
    align-items: center;
    z-index: 7;
    background: url(images/bottom-bg.png) bottom no-repeat, linear-gradient(to bottom, rgb(226 204 210), rgb(140 113 96));
    background-size: contain;
    background-blend-mode: overlay;
    height: 110vh !important;
}

#chairman-sect{
    background: url('images/gray-bg-flip.jpg'); 
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
}

#chairman-sect .row, #ceo-sect .row {
    display: flex;
    justify-content: center;
    align-items: center;
}

#chairman-sect .col-8 {
    padding-left: 15%;
}

#ceo-sect{
    background: url('images/gray-bg.jpg'); 
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
}

#ceo-sect .row{
    justify-content: flex-end;
}

#ceo-sect .col-8 {
    padding-right: 20%;
    padding-left: 5%;
}

#footprint-gro .eco-card1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#footprint-gro .eco-card__icon-wrapper{
    margin-bottom: -40px;
    z-index: 9;
}

#footprint-gro p.eco-card__text {
    min-height: 255px;
    padding: 65px 35px 45px;
}

#footprint-gro .item{ margin: 0 10px;}

section#value-section::after {
    content: "";
    position: absolute;
    right: 130px;
    top: 0;
    bottom: 0;
    width: 55%;
    background: url(images/value-method-bg.webp) right center;
    background-size: 65%;
    background-repeat: no-repeat;
    will-change: transform;
    transition: transform 0.1s ease-out;
    transform: scale(0.85);
    animation: zoomIn 10s ease-out infinite alternate;
}

section#value-section::before {
    content: "";
    position: absolute;
    right: -6%;
    top: 0;
    bottom: 0;
    width: 25%;
    background: url(images/horizontal-artwork.png) right center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    overflow: hidden;
}


#strategy-section{
        background: url(images/strategy-bckg.jpg);
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
}

#progress-section{
    background: linear-gradient(to bottom, rgb(252 247 227), rgb(140 113 96));
}

/* #progress-section .row{
    margin-right: 6%;
} */

/* --- Floating Circle Components --- */
        .animated-circle {
            position: absolute;
            width: 220px;
            height: 220px;
            background: url(images/artwork-count-cirlcle.webp);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            border: 2px solid var(--circle-border);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            box-shadow: 0 8px 20px rgba(0,0,0,0.06);
            z-index: 5;
            padding: 10px;
            transition: transform 0.3s ease;
        }

        .animated-circle:hover {
            transform: scale(1.1) !important;
            z-index: 20;
            background: url(images/artwork-count-cirlcle.webp);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }

        .circle-number {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-blue);
            line-height: 1.1;
        }

        .circle-text {
            font-size: 0.8rem;
            color: #666;
            margin-top: 8px;
            font-weight: 600;
            text-transform: uppercase;
        }

        /* --- Exact Absolute Mapping for the 8 Circles --- */
        /* Positions match your red marks left-to-right, top-to-bottom */
        .c1 { width: 300px; height: 300px; top: 8%;   left: 4%;   animation: swayInfinity 6s ease-in-out infinite; }
        .c2 { top: 15%;  left: 28%;  animation: swayInfinity 7s ease-in-out infinite 0.5s; }
        .c3 { width: 245px; height: 245px;top: 6%;   left: 52%;  animation: swayInfinity 5.5s ease-in-out infinite 1s; }
        .c4 { top: 22%;  left: 78%;  animation: swayInfinity 8s ease-in-out infinite 0.2s; }
        .c5 { top: 48%;  left: 10%;  animation: swayInfinity 6.5s ease-in-out infinite 1.5s; }
        .c6 { width: 260px; height: 260px; top: 70%;  left: 25%;  animation: swayInfinity 7.5s ease-in-out infinite 0.8s; }
        .c7 { top: 65%;  left: 55%;  animation: swayInfinity 6s ease-in-out infinite 1.2s; }
        .c8 { width: 280px; height: 280px; top: 70%;  left: 80%;  animation: swayInfinity 7.2s ease-in-out infinite 0.4s; }

        /* --- Continuous "Infinity" Swaying Animation Loop --- */
        @keyframes swayInfinity {
            0% { transform: translate(0, 0); }
            25% { transform: translate(6px, -6px); }
            50% { transform: translate(12px, 0); }
            75% { transform: translate(6px, 6px); }
            100% { transform: translate(0, 0); }
        }

        /* Responsive handling for standard laptops/tablets */
        @media (max-width: 992px) {
            .section-container { height: auto; min-height: 800px; padding: 20px; }
            .content-middle { position: relative; left: 0; top: 0; transform: none; width: 100%; margin-top: 250px; z-index: 15;}
            .animated-circle { width: 85px; height: 85px; }
            .circle-number { font-size: 1.1rem; }
            .circle-text { font-size: 0.65rem; }
        }

    #stakeholder-section{
        background: url(images/side-left-bg.jpg), #f3f0e9;
        background-size: contain;
        background-position: left;
        background-repeat: no-repeat;
        
    }

    #stakeholder-section .row{ align-items: flex-end;}

    #stakeholder-section .col-12{
	margin-top: 0!important;
        margin-bottom: 0%;
        /* margin-left: -15%; */
                display: flex;
        justify-content: flex-end;
    }

    .stack-image{ animation: liquidNetwork 10s ease-in-out infinite alternate; }

    #materiality-section{ 
        background: url(images/bg-art-cirlce.jpg), #ebe9e387;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100% !important;
        /* background-blend-mode: overlay; */
        align-items: flex-start;
        padding-top: 11%;
    }

    #leadership-section{ 
        background: url(images/bod-leaders.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    #leadership-section .col-5 {
        height: 80vh;
        display: flex;
        align-items: flex-end;
    }

    #award-section{
        color: white !important;
    background: url(images/awards-bg.jpg), linear-gradient(213deg, rgb(63 63 63) 50%, rgba(255, 255, 255, 0) 75% 75%);
    background-size: cover;
    background-position: left bottom;
    background-repeat: no-repeat;
    }

    section#award-section::before {
        content: "";
        position: absolute;
        background: url(images/plc-awards-01.png);
        background-position: left bottom;
        background-size: contain;
        background-repeat: no-repeat;
        width: 40%;
        height: 340px;
        left: 4%;
        top: 7%;
        animation: slowPan 70s linear 2s infinite;
    }

    section#award-section::after {
        content: "";
        position: absolute;
        background: url(images/plc-awards-02.png);
        background-position: left bottom;
        background-size: contain;
        background-repeat: no-repeat;
        width: 40%;
        height: 300px;
        left: 28%;
        bottom: 3%;
        animation: slowPan2 70s linear 2s infinite;
    }

    #governance-section{
        background: url(images/color-bg.webp);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    #governance-section::before{
        content: "";
        position: absolute;
        right: 0;
        bottom: 1%;
        width: 45%;
        height: 100%;
        background: url(images/goveranance-image.png) bottom right;
        background-size: contain;
        background-repeat: no-repeat;
            animation: zoomIn 10s ease-out infinite alternate;
    }

    #risk-section{
        background: url(images/background.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

     #risk-section::before{
        content: "";
        position: absolute;
        left: 3%;
        top: 0;
        bottom: 0;
        width: 40%;
        height: 100%;
        background: url(images/family.webp) left center;
        background-size: contain;
        background-repeat: no-repeat;
            animation: zoomIn 10s ease-out infinite alternate;
    }

    #financial-section::before{ 
        content: "";
        position: absolute;
        left: 0px;
        bottom: 1%;
        width: 45%;
        height: 100%;
        background: url(images/financial-image.webp) left bottom / contain no-repeat;
        animation: 10s ease-out 0s infinite alternate none running zoomIn;
    }

    #infomation-section{
        background: url(images/gray-bg.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    #infomation-section::before{
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 30%;
            background: url(images/horizontal-artwork.png) right center;
            background-size: contain;
            background-repeat: no-repeat;
    } 

        #infomation-section::after{
            content: "";
            position: absolute;
            right: 10%;
            top: 0;
            bottom: 0;
            width: 25%;
            background: url(images/imformation-circle.png) right center;
            background-size: contain;
            background-repeat: no-repeat;
            will-change: transform; 
  animation: bobbingMotion 8s ease-in-out infinite;
    } 

    @keyframes bobbingMotion {
  0% {
    /* Starting point: slightly lower and zoomed in */
    transform: translateY(0px) scale(1.05);
  }
  50% {
    /* Peak point: moved up and zoomed out */
    transform: translateY(100px) scale(0.95);
  }
  100% {
    /* Return smoothly to the starting point */
    transform: translateY(0px) scale(1.05);
  }
}

   #cat-section {
        background: linear-gradient(to bottom, rgb(203 187 181), rgb(245 245 245));
        width: 100%;
        padding: 100px 0;
        border-bottom: 1px solid lightgray;
    }







/* --- Logo Positioning Grid (Matching your red boxes) --- */
    .logo-box {
      position: absolute;
      width: 220px;
      height: 220px;
      background: #ffffff;
      border: 1px solid rgb(226 188 175);
      border-radius: 120px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      box-sizing: border-box;
          z-index: 1 !important;
      
      /* The Infinity Loop Animation applied to each card */
      animation: infinityFloating 6s ease-in-out 1.5s infinite;
    }

    .logo-box img {
      max-width: 90%;
      max-height: 90%;
      object-fit: contain;
    }

    /* Top Left Box */
    .pos-top-left {
      top: 6%;
      left: 45%;
    }

    .pos-top-mid {
      top: 10%;
      left: 25%;
    }

    /* Top Right Box */
    .pos-top-right {
      top: 10%;
      right: 20%;
    }

    /* Middle Right Box */
    .pos-mid-right {
      top: 35%;
      right: 6%;
    }

    .pos-mid-left{
        bottom: 23%;
      left: 13%;
    }

    /* Bottom Left Box */
    .pos-bot-left {
      bottom: 4%;
      left: 28%;
    }

    /* Bottom Center Box */
    .pos-bot-mid {
      bottom: 10%;
      left: 52%;
    }

    /* Bottom Right Box */
    .pos-bot-right {
      bottom: 6%;
      right: 12%;
    }

    /* --- Infinity Animation Staggering --- */
    /* Slightly shifting the delays so they don't bob up and down at the exact same millisecond */
    .pos-top-left  { animation-delay: 0s; }
    .pos-top-right { animation-delay: -1s; }
    .pos-mid-right { animation-delay: -2s; }
    .pos-bot-left  { animation-delay: -3s; }
    .pos-bot-mid   { animation-delay: -4s; }
    .pos-bot-right { animation-delay: -5s; }


    /* --- The Infinity Loop CSS Animation --- 
       Simulates a gentle 3D infinity/floating cycle using translate and scale */
    @keyframes infinityFloating {
      0% {
        transform: translateY(0px) scale(1);
      }
      25% {
        transform: translateY(-6px) scale(1.02);
      }
      50% {
        transform: translateY(0px) scale(1);
      }
      75% {
        transform: translateY(6px) scale(0.98);
      }
      100% {
        transform: translateY(0px) scale(1);
      }
    }

    /* Simple responsive scale-down for smaller screens */
    @media (max-width: 1560px)  {
        h2, .eco-title  { font-size: 2.5rem; line-height: 2.7rem; margin-bottom: 10px; }
        h4 { font-size: 2.2rem; line-height: 2.5rem; }
        .under-artwork.mb-5 { margin-bottom: 20px !important; height: 45px; }
        #value-section .col-7{  padding-left: 140px; }

        #vision_mission .under-artwork, #sustainable .under-artwork{ width: 75%; margin: auto; }
        #vision_mission h2, .under-artwork h2{ margin-bottom: 0;}
        
        /*.network-section { background-size: cover; }*/

        .logo-box {
            width: 145px;
            height: 145px;
            z-index: -1;
        }
        .eco-card { 
            padding: 30px; 
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .eco-card__icon-wrapper {
            width: 100px;
            height: 100px;
            margin-bottom: 15px;
        }
        .eco-header, .eco-card__text { margin-bottom: 0px; }
        .eco-card__title {
            font-size: 1.5rem;
            margin-bottom: 10px;
            line-height: 42px;
        }


        .value-container { height: 75vh !important; padding-top: 100px; }

        .sustainable-sect { margin-top: -85px !important; }
        #footprint-gro p.eco-card__text {
            min-height: 260px;
            padding: 50px 25px 25px;
        }

        section#value-section::after { right: 70px; width: 55%; }

        .animated-circle { width: 180px; height: 180px; }
        .circle-number { font-size: 1.8rem; }
        .circle-text { font-size: 11.5px; }
        .c1 { width: 220px; height: 220px; }
        .c2 { top: 10%; left: 26%; }
        .c3 { width: 190px; height: 190px; top: 1%; }
        .c4 { top: 12%; left: 83%; }
        .c6 { width: 210px; height: 210px; top: 63%; }
        .c8 { width: 200px; height: 200px; top: 65%; }

        #stakeholder-section .col-12 {
            margin-top: -2rem !important;
            margin-bottom: -5rem;
        }
        #stakeholder-section .col-12 img.w-100 { width: 60%!important;}

    }

    @media (max-width: 1100px){
        .logo img { max-width: 80% !important; }
        .download-btn { font-size: 14px; }
        .scroll-animate { bottom: 2.5%; }
    }

    @media (max-width: 991px) {
      .logo-box { width: 130px; height: 130px; }
        .pos-top-mid { top: 8%; left: 20%; }
        .pos-top-left { top: 18%; left: 46%; }
        .pos-top-right { top: 12%; right: 10%; }
        .pos-bot-right { bottom: 28%; right: 12%; }
        .pos-bot-mid { bottom: 6%; left: 62%; }
        .pos-bot-left { bottom: 14%; left: 33%; }
        .pos-mid-left { bottom: 8%; left: 8%; }

        h2 { font-size: 2.5rem; line-height: 2.8rem; }
        section .container { max-width: 95%; }
        #about { align-items: center; }
        .network-section { background-size: cover; }
        section#section2 { background-position: 65%; }

        .eco-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
        .value-container { height: 50vh !important; }
        .sustainable-sect { height: 70vh !important; }
        #footprint-gro p.eco-card__text { min-height: 350px; }
        #chairman-sect .row, #ceo-sect .row { flex-direction: row; flex-wrap: nowrap; }
        .col-lg-3 { width: 40%; }
        .col-lg-3 img{ width: 100%!important;}
        #value-section .col-7 { padding-left: 0px!important; text-align: center; width: 80%!important;}

        .logo-partnership-section, .ecosystem-section { align-items: flex-start; padding-top: 20%!important; }
        section#value-section::after { right: 50px; width: 55%; bottom: -45%; background-size: 100%; }

        section#strategy-section { background-position: 35%; }
        section#strategy-section .col-6.p-0 { width: 55%; }

        .c8 { left: 70%; }
        .c7 { top: 78%; left: 42%; }
        .c6 { top: 70%; left: 6%; }
        .c5 { top: 46%; }
        .c1 { top: 18%; left: 2%; }
        .c2 { top: 2%; left: 24%; }
        .c3 { top: 11%; left: 50%; }
        .c4 { top: 4%; left: 74%; }

        section#stakeholder-section { align-items: center; }
        #stakeholder-section .col-12 img.w-100 { width: 100% !important; margin-top: 10%!important;}
        #materiality-section .col-5.text-center { padding-top: 10%; width: 70%; }

        #leadership-section { background: url(images/bod-leaders.jpg), white; background-size: contain; background-position: center; background-repeat: no-repeat;  background-blend-mode: darken; }
        #leadership-section .row{ height: 75vh; flex-direction: column-reverse; justify-content: space-between; }
        #leadership-section .col-5, #leadership-section .col-4 { width: 100%; height: 50%; }

        section#award-section::after { width: 65%; height: 350px; left: 28%; }
        section#award-section::before { width: 60%; top: 30%; }

        #governance-section::before, #governance-section .col-6, #risk-section .col-6, #infomation-section .col-6{ width: 88%; }
        #risk-section::before { left: 10%; top: 380px; width: 78%; height: 62vh; }
        #risk-section .row, #infomation-section .row { justify-content: center; text-align: center; }
        #infomation-section::after { right: 13%; top: 45%; width: 55%; height: 450px; background-size: contain; }
        #cat-section .col-7 { width: 75%; }
        #cat-section h4{ font-size: 20px !important; line-height: 20px!important; }
        #financial-section .col-6.text-center { width: 100%; }
        #financial-section::before{ width: 78% !important; bottom: 0 !important; }
    }

    @media (max-width: 767px){
            .menubox { width: 60px; }
            a.logo { width: 45%; }
        .menuwrap { padding-left: 0; padding-right: 0; }
        .download-btn { font-size: 10px; }
        .menutitle-wrap { display: none; }
        .center-text h1 { font-size: 5.5rem; line-height: 4.35rem; }
        h2, .eco-title { font-size: 28px; line-height: 26px; }
        p, .strategy-list li{ font-size: 14px; line-height: 20px;}
        section#vision_mission { height: auto; }
        .col-7, #about .col-6, #our_values .col-8, #award-section .col-6, #risk-section .col-6, #cat-section .col-2, #cat-section .col-7{ width: 95%; text-align: center; }

        .logo-box { width: 100px; height: 100px; }
            .pos-top-mid { top: 5%; left: 5%; }
            .pos-top-left { top: 19%; left: 23%; }
            .pos-top-right { top: 8%; right: 25%; }
            .pos-mid-right { top: 21%; right: 5%; }
            .pos-bot-left { bottom: 20%; left: 25%; }
            .pos-bot-right { bottom: 23%; right: 5%; }
            .pos-mid-left { bottom: 4%; left: 7%; }
            .pos-bot-mid { bottom: 7%; left: 47%; }

        .eco-card__icon-wrapper { width: 80px; height: 80px; }
            .value-container { height: 530px !important; }
            .featured-list { grid-template-columns: repeat(2, 1fr); }
            .featured-item { border-left: 0px; }

            .hero-featured { margin-top: -280px; }
            #sustainable{ padding-top: 80px !important; height: auto !important; min-height: 100%; }
            .eco-card__text { font-size: 14px; line-height: 20px; }
    #footprint-gro p.eco-card__text { min-height: 230px; }
    #sustainable .download-btn, #leadership-section .download-btn { margin: 5px 0;}

        #chairman-sect .row, #ceo-sect .row { flex-direction: column; }
        #chairman-sect, #ceo-sect, #stakeholder-section, #materiality-section{ padding-top: 60px; padding-bottom: 60px; height: auto; }

            /* #leadership-section { background-position: bottom; } */
     
        section#award-section::after { width: 80%; height: 200px; left: 10%;  bottom: 5%;}
        section#award-section::before { width: 80%; top: 42%; height: 200px; }
        #risk-section::before { left: 10%; top: 280px; }
        #infomation-section::after { top: 39%; width: 48%; z-index: -1;  }
        #cat-section .row{ flex-direction: column; align-items: center; }
        #cat-section .col-2 { justify-content: center; }


        .vision-title {  font-size: 25px!important; }
        h3{ line-height: 25px;}
        .eco-grid { grid-template-columns: repeat(auto-fit, minmax(100%, 1fr))!important; }
        #section2 .under-artwork.mb-5{ width: 100%; }
         #stakeholder-section .col-8 { width: 100%!important; }
         span.featured-label { text-align: center; }
         aside.hero-featured.aos-init.aos-animate { background-size: cover; }
         section#strategy-section { background-color: #fffefea8; background-blend-mode: overlay; height: auto!important; }
         #stakeholder-section{ background-blend-mode: overlay; background-color: #f6efe782; }
         section#strategy-section .col-6.p-0, #progress-section .col-9  { width: 100%; }

        section#value-section { height: auto; padding-bottom: 250px; }
        section#value-section::after {
            width: 55%;
            height: 50%;
            bottom: 0;
            top: 56%;
        }

        #progress-section{ height: 130vh!important; }

        .circle-number { font-size: 20px; }
        .circle-text { font-size: 9px; }
        .c1 { width: 155px; height: 155px; }
        .animated-circle { width: 125px; height: 125px; }
        .c3, .c6 { width: 140px; height: 140px; }
        .c8 { width: 150px; height: 150px; }

        .c2 { left: 20%; }
        .c3 { top: 18%; left: 40%; }
        .c4 { top: 3%; left: 59%; }
        .c6 { top: 81%; left: 3%; }
        .c8 { left: 53%; }
        .c7 { top: 83%; left: 44%; }
        .c5 { top: 65%; }
    }

    @media (max-width: 767px) and (min-width: 400px) {
                #leadership-section { height: auto; min-height: 60vh;}
           #leadership-section .row { height: 50vh; }
        section#award-section, #infomation-section { height: auto !important; min-height: 85vh; }
        #governance-section, #risk-section, #financial-section { height: auto; min-height: 80vh; }
    }

    @media (max-width: 460px) {
        .value-container { height: 600px !important; }
    }

    @media (max-width: 400px) {
        section#award-section::before {
            width: 50%;
            top: 46%;
        }
        section#award-section::after {
            width: 60%;
            left: 33%;
            bottom: 5%;
        }
        section#financial-section, #infomation-section, #governance-section { height: 110vh; }
    }