/* Global Styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root {
    --header-height: 3.3rem;

    /* ------------------colors ----------------*/
    --first-color: #013d33;
    --first-color-lighter: #076f5e;
    --hover-light-color: #e0f7f3;
    --title-color: #38746a;
    --text-color: #5d5d5d;
    --body-color: #f1fcfb;
    --background-colors: #f0fffd;

    --body-font: "Poppins", sans-serif;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
    --font-medium: 500;
    --font-semi-bold: 600;

    /* -----------------z-index---------------- */
    --z-tooltip: 10;
    --z-fixed: 100;
}

/* ---------------responsive typography----------- */
@media screen and (min-width: 1024px) {
    :root {
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
/* contact us page */
    .contact-card {
        width: 70%;
        height: 60vh;
        padding: 3vh 2vw;
        font-size: 0.9rem;
}
    .bg-word {
        font-size: 5vw;
}

.chat-popup-wrapper {
    align-items: center;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2rem;
  }

  .chat-popup-card {
    width: 95vw;
    max-width: 400px;
    padding: 1.5rem 1.25rem;
  }

}

/* --------------------Base----------------------- */
html {
  scroll-behavior: smooth;
}

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

body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
    animation: backgroundChange 10s infinite alternate ease-in-out;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 1s ease-out forwards;
    /* overflow-y: auto;
    height: auto; */
}

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





/* Scroll Animation for Sections */
.hidden {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.show {
    opacity: 1;
    transform: translateY(0);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

/* --------------------Reusable css classes----------------------- */
.container {
    /* max-width: 1120px; */
    margin-inline: 1.5rem;
}

/* Top Bar */
.top-bar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: #004d40;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    font-size: 14px;
    z-index: 1000;
    overflow: hidden;
}

/* News Ticker (Left - 40% width) */
.news-ticker {
    flex: 0 0 30%; /* Take 40% of the screen width */
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

.news-content {
    display: inline-block;
    padding-left: 100%; /* Push content to the right */
    animation: ticker 20s linear infinite;
    white-space: nowrap; /* Prevent text from wrapping */
    box-sizing: border-box; /* Include padding in width calculation */
}

.news-content span {
    margin-right: 50px; /* Space between news items */
}

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

/* Help and Contact Buttons (Center) */
.top-links {
    display: flex;
    gap: 15px;
    position: absolute;
    left: 45%;
    transform: translateX(-50%);
}

.top-links a {
    color: white;
    text-decoration: none;
}

/* Countdown Timer (Right) */
.countdown-timer {
    flex: 1;
    text-align: right;
    font-weight: bold;
}

/* Sparkling Animation */
@keyframes sparkle {
    0% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}

.top-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 10%, transparent 10.01%);
    background-size: 20px 20px;
    animation: sparkle 2s infinite;
}
/* ========================HEADER======================== */
.down-navbar-head {
    top: 38px;
    position: sticky;
    left: 0;
    width: 100%;
    box-shadow: 0 2px 8px hsla(220, 68%, 12%, 0.1);
    background-color: var(--body-color);
    z-index: var(--z-fixed);
}

/* ========================NAV======================== */
.down-navbar {
    height: var(--header-height);
}

.down-navbar-info {
    padding: 0 1.5rem;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-button, .nav-list li a {
    font-size: 14.5px;
    font-weight: 400;
    color: var(--first-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.down-navbar-logo {
    color: var(--first-color);
    transition: color .3s;
}

.down-navbar-logo img {
    height: 24px;
    width: auto;
}

.down-navbar-logo:hover {
    color: var(--first-color-lighter);
}

/* ========= GENERAL NAV ICON STYLING ========= */
.nav-icon-container {
    position: relative;
    display: inline-block;
    margin: 0 10px;
}

.menu-toggle-icon {
    position: relative;
    width: 32px;
    height: 32px;
}

[data-toggle="open"],
[data-toggle="close"] {
    font-size: 1.25rem;
    color: var(--first-color);
    position: absolute;
    display: grid;
    place-items: center;
    inset: 0;
    cursor: pointer;
    transition: opacity .1s, transform .4s;
}

[data-toggle="close"] {
    opacity: 0;
}
   /* Hidden Container for Register and Login Buttons */
    .auth-buttons-container {
        display: none;
        flex-direction: column; /* Stack buttons vertically */
        gap: 10px; /* Space between buttons */
        position: absolute; /* Position below the user accounts button */
        top: 3.5rem; /* Adjust based on your layout */
        padding: 10px; /* Padding inside the container */
        border-radius: 8px; /* Rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        z-index: 100; /* Ensure it appears above other elements */
    }

    /* Show the container when active */
    .auth-buttons-container.active {
        display: flex;
}


    

/* =================Navigation for Mobile Devices=============== */
@media screen and (max-width: 1118px) {
    .down-navbar-logo img {
        height: 18px;
        width: auto;
    }

    /* top-nav */
    .news-ticker{
        display: none;
    }

    .top-links {
        align-items: center;
        
    }
    
    .countdown-timer {
        display: none;
    }

    .top-bar{
        padding: 17px;
    }
    .nav-menu {
        background-color: var(--body-color);
        position: absolute;
        left: 0;
        top: 2.5rem;
        width: 100%;
        height: calc(100vh - 3.5rem);
        overflow: auto;
        padding-block: 1.5rem 4rem;
        pointer-events: none;
        opacity: 0;
        transition: top .4s, opacity .3s;
    }

   


}

.nav-links {
    column-gap: 0.1rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color .3s;
}

/* ==========show menu=============== */
.show-menu {
    opacity: 1;
    top: 3.5rem;
    pointer-events: initial;
}

/* Hide the close icon by default */
[data-toggle="close"] {
    opacity: 0;
    transform: rotate(90deg);
    transition: opacity 0.3s, transform 0.3s;
}

/* Show the open icon by default */
[data-toggle="open"] {
    opacity: 1;
    transform: rotate(0deg);
    transition: opacity 0.3s, transform 0.3s;
}

/* When the show-icon class is applied */
.show-icon [data-toggle="open"] {
    opacity: 0;
    transform: rotate(90deg);
}

.show-icon [data-toggle="close"] {
    opacity: 1;
    transform: rotate(0deg);
}

/* other buttons */
.other-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
    height: 50px;
}

.nav-btn {
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.1rem 1rem;
    border-radius: 20px;
    transition: all 0.3s ease-in-out;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.nav-btn:last-child{
    margin-right: 1rem;
}
/* Register & Login Buttons */
.register-btn, .login-btn {
    background-color: var(--hover-light-color);
    color: var(--first-color);
    border: 0.1px solid var(--hover-light-color);
}

.register-btn:hover, .login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Donate Button */
.donate-btn {
    background: linear-gradient(135deg, #ff7e00, #ff3d00);
    color: white;
    font-weight: bold;
}

.donate-btn:hover {
    background: linear-gradient(135deg, #ff3d00, #ff7e00);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 99, 71, 0.5);
}

/* ======================Menu Dropdowns================== */
.dropdown-button {
    cursor: pointer;
}

[data-dropdown-arrow] {
    font-size: 1.5rem;
    font-weight: initial;
    transition: transform .4s;
}

.dropdown-container,
.dropdown-group,
.dropdown-list {
    display: grid;
}

.dropdown-container {
    background-color: var(--background-colors);
    height: 0;
    overflow: hidden;
    transition: height .4s;
}

.dropdown-content {
    padding: 1.75rem;
}

.dropdown-group {
    padding-left: 1.5rem;
 
}

.dropdown-group:first-child {
    margin-top: 1.25rem;
}

.dropdown-group:last-child {
    margin-bottom: 1.25rem;
}

.dropdown-icon {
    font-size: 1.25rem;
    color: var(--first-color);
}

.dropdown-title {
    font-size: var(--small-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--title-color);
}

.dropdown-list {
    row-gap: .25rem;
}

.dropdown-link{
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
    color: var(--text-color);
    transition: color .3s;
}

.dropdown-list li a {
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
    color: var(--text-color);
    transition: color .3s;
}

.dropdown-list li a:hover {
    color: var(--title-color);
}

/* Default state of the dropdown arrow */
[data-dropdown-arrow] {
    transition: transform 0.3s ease; /* Smooth transition */
}

/* Rotate dropdown icon and show dropdown content on hover */
.dropdown-item:hover [data-dropdown-arrow] {
    transform: rotate(180deg);
}

/* breakpoints for smaller devices */
@media screen and (max-width: 766px) {
    .only-this-not {
        display: none;
    }

    .only-this{
    font-size: 20px;
    text-align: center;
    }
     /* About Us Section */
  .about-us-container {
    margin-bottom: 20px;
    padding: 10px;
    box-sizing: border-box;
  }

  .about-us-content {
    flex-direction: column;
    gap: 25px;
    width: 100%;
  }

  .about-us-box-left,
  .about-us-box-right {
    width: 100% !important;
    padding: 15px;
    box-sizing: border-box;
  }

  .about-us-box-left {
    flex-direction: column;
  }

  .about-us-box-left-first,
  .about-us-box-left-second {
    padding: 12px 0;
  }

  .horizontal-line {
    display: none;
  }

  .core-values-slider {
    height: auto;
    padding: 15px 0;
  }

  .core-value {
    font-size: 15px;
    padding: 0 12px;
  }

  .dots-container {
    margin-top: 8px;
  }

  .dot {
    height: 10px;
    width: 10px;
    margin: 0 4px;
  }

  /* Stats Page */
  .stats-page-container {
    margin-top: 20px;
    flex-direction: column;
    width: 100% !important;
    padding: 0 10px;
    min-height: auto;
    box-sizing: border-box;
  }

  .stack-area {
    flex-direction: column;
    width: 100% !important;
    padding: 10px 0;
    box-sizing: border-box;
  }

  .stack-area-left,
  .stack-area-right {
    width: 100% !important;
    padding: 15px;
    box-sizing: border-box;
  }

  .stack-area-left h2 {
    font-size: 30px;
    line-height: 1.4;
    text-align: center;
  }

  .stack-area-left p {
    font-size: 15px;
    text-align: center;
  }

  .stack-area-left button {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    margin-top: 20px;
    border-radius: 30px;
  }

  .stack-area-right {
    height: auto;
  }

  .stats-card {
    width: 100% !important;
    max-width: 300px;
    margin: 20px auto;
    height: auto;
    transform: none;
    position: relative;
    left: 0;
    top: 0;
    border-radius: 12px;
  }

  .stats-card h4,
  .stats-card p {
    padding: 12px;
    font-size: 15px;
  }

  .chart-container {
    margin-top: 40px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
  }

  .chart {
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
    align-items: flex-end;
    height: auto;
    min-width: 600px;
    position: relative;
  }

  .bar {
    width: 50px;
    border-radius: 5px;
    position: relative;
    background-color: #004d40;
    text-align: center;
    transition: transform 0.3s ease-in-out;
  }

  .bar:hover {
    transform: scale(1.1);
  }

  .profit {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
  }

  .arrow {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
  }

  .year {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
  }

  /* products */
  .products-section {
    padding-bottom: 4rem;
    flex-wrap: nowrap;
  }

  .products-content {
    margin: 10px 5px;
    
  }

  .products-text {
    padding-right: 0;
    width: 100%;
    flex: 1 1 100%;
  }

  .products-text h2 {
    font-size: 1.5rem;
    text-align: center;
  }

  .products-text p {
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .product-cards {
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
  }

  .product-card {
    width: 90%;
    max-width: 350px;
  }

  .product-card h3 {
    font-size: 1rem;
  }

  .product-card p {
    font-size: 0.85rem;
  }

  .products-learn-more {
    font-size: 0.85rem;
    padding: 8px 14px;
  }

  .products-image-wrapper {
    height: 50%;
  }

  .products-image {
    object-fit: cover;
  }

  .circular-background-wrapper {
    width: 220px;
    height: 220px;
    top: 10%;
    right: -30px;
  }

  .circle-item {
    padding: 0.5rem 0.8rem;
    font-size: 0.75rem;
    transform: rotate(var(--angle)) translate(110px) rotate(calc(-1 * var(--angle)));
  }

  .circle-item:hover {
    transform: rotate(var(--angle)) translate(110px) rotate(calc(-1 * var(--angle))) scale(1.05);
  }
}

/* breakpoints for smaller devices */
@media screen and (max-width: 400px) {
    html, body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
    
    
    .only-this-not {
        display: none;
    }

    .only-this{
        display: flex;
        align-items: center;
        font-size: var(--smaller-font-size);
    }
    .dropdown-group {
        padding-left: 1.5rem;
    }

    .nav-btn {
        font-weight: 400;
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
 .about-us-container{
    margin-bottom: 10px;
 }
    .about-us-content {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .about-us-box-left,
    .about-us-box-right {
        width: 100% !important;
        box-sizing: border-box;
    }

    .about-us-box-left {
        flex-direction: column;
        padding: 15px;
    }

    .about-us-box-left-first,
    .about-us-box-left-second {
        padding: 10px 0;
    }

    .horizontal-line {
        display: none; /* Hide vertical line on small screens */
    }

    .core-values-slider {
        height: auto;
        padding: 10px 0;
    }

    .core-value {
        font-size: 14px;
        padding: 0 10px;
    }

    .dots-container {
        margin-top: 5px;
    }

    .dot {
        height: 8px;
        width: 8px;
        margin: 0 3px;
    }

    
   /* stats */

.stats-page-container {
    margin-top: 1px;
    flex-direction: column;
    width: 100% !important;
    padding: 0;
    margin: 0;
    min-height: auto;
    box-sizing: border-box;
}

.stack-area {
    flex-direction: column;
    width: 100% !important;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
}

.stack-area-left,
.stack-area-right {
    width: 100% !important;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
}

.stack-area-left h2 {
    margin-bottom: 12px;
    font-size: 28px;
    line-height: 1.3;
    text-align: center;
}

.stack-area-left p {
    font-size: 14px;
    text-align: center;
}

.stack-area-left button {
    width: 100%;
    padding: 12px 0;
    font-size: 14px;
    margin-top: 20px;
}

.stack-area-right {
    height: auto;
}

.stats-card {
    width: 100% !important;
    height: auto;
    max-width: 250px;
    margin: 20px auto;
    transform: none;
    position: relative;
    left: 0;
    top: 0;
    border-radius: 10px;
}

.stats-card h4, .stats-card p {
    padding: 10px;
    font-size: 14px;
}

.chart-container {
    margin-top: 50px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

.chart {
    flex-wrap: nowrap;
    overflow-x: visible;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 10px;
}

.bar {
    margin: 0;
}

.profit,
.arrow,
.year {
    font-size: 10px;
    color: white;
}

/* products page */

.products-section {
    padding: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .products-content {
    margin: 1px;
    width: calc(100% - 2px); /* ensures content fits with margin */
  }

  .products-text {
    width: 95%;
    margin: 0 auto 1.5rem;
    position: relative;
  }

  .products-text h2 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
  }

  .products-text p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
  }

  .product-cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 1.5rem;
    min-width: 100%;
    margin-bottom: 2rem;
  }

  .product-card {
    width: 95%;
    background-color: #fff;
    padding: 1rem;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    z-index: 2;
    position: relative;
  }

  .product-card .icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }

  .product-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
  }

  .product-card p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .product-card .btn {
    width: 100%;
    font-size: 0.9rem;
    padding: 0.6rem;
    border-radius: 8px;
  }

  .products-learn-more {
    display: block;
    width: 100%;
    font-size: 0.9rem;
    padding: 0.6rem;
    text-align: center;
    border-radius: 8px;
    margin-top: 1rem;
  }

  /* Ensure circular chart/rotator is in its own section */
  .circular-background-wrapper {
    display: none;
    width: 95%;
    max-width: 300px;
    height: auto;
    margin: 2rem auto;
    position: relative;
    z-index: 1;
  }

  .circular-chart {
    width: 100%;
    height: auto;
  }
  

  .circle-item {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    transform: rotate(var(--angle)) translate(75px) rotate(calc(-1 * var(--angle)));
  }

.chat-popup-wrapper{
    top: 50000px;
}

#storyCards{
    flex-direction: column;
}

.downloads-left p{
  font-size: 12px;
}
.downloads-left h2{
  font-size: 18px;
}

}

@media screen and (min-width: 1465px) {
    .other-buttons-hideout {
       display: none;
    }


    
}
/* breakout for medium devices */
@media screen and (max-width: 1465px) {

    .other-buttons{
       display: none;
    }

    .other-buttons-hideout {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 4rem;
     }
     

    /* Container for the buttons */
.other-buttons-hideout {
    display: flex;
    gap: 10px; /* Space between buttons */
    align-items: center; /* Vertically center buttons */
}

/* Base style for all buttons */
.other-btn-hide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Fixed width for circular buttons */
    height: 40px; /* Fixed height for circular buttons */
    border-radius: 50%; /* Make buttons circular */
    background-color: #f0f0f0; /* Light gray background */
    color: #333; /* Dark text color */
    text-decoration: none;
    transition: all 0.3s ease; /* Smooth hover effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Hover effect for all buttons */
.other-btn-hide:hover {
    transform: translateY(-2px); /* Slight lift on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Specific style for the register button */
.other-btn-hide-register-btn, .other-btn-hide-donate-btn {
    background-color: var(--normal-font-size); /* Blue background */
    color: var(--first-color); /* White text color */
}

.other-btn-hide-register-btn, .other-btn-hide-donate-btn:hover{
    background-color: var(--hover-light-color);
}

/* Icon styling */
.other-btn-hide i {
    font-size: 1.2rem; /* Icon size */
}
/* Landing Page Container */

/* products page */

.products-section {
    padding: 0 0 5rem 0;
  }

  .products-content {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
    gap: 1.5rem;
    overflow-y: hidden;
    position:absolute;
    align-items: flex-start;
    left: 0%;
  }

  .products-text {
    text-align: center;
    align-items: center;
    max-width: 100%;
    text-align: left;

  }

  .products-text h2 {
    font-size: 1.9rem;
    margin-bottom: 0.6rem;
  }

  .products-text p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  .product-cards {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  .product-card {
    flex: 1 1 calc(45% - 1rem);
    max-width: 45%;
    padding: 1.2rem;
  }

  .product-card h3 {
    font-size: 1rem;
  }

  .product-card p {
    font-size: 0.9rem;
  }

  .product-card .btn {
    font-size: 0.85rem;
    padding: 0.45rem 1rem;
  }

  .circular-background-wrapper {
    width: 260px;
    height: 260px;
    top: 30%;
    right: 30px;
  }

  .circle-item {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    transform: rotate(var(--angle)) translate(140px) rotate(calc(-1 * var(--angle)));
  }

  .circle-item:hover {
    transform: rotate(var(--angle)) translate(140px) rotate(calc(-1 * var(--angle))) scale(1.05);
  }
}

/* breakpoints for larger devices */
@media screen and (min-width: 1118px) {


    /* nav */
    .down-navbar {
        width: 100%; /* Ensure it covers the full width */
        height: calc(var(--header-height) + 2rem);
        display: flex;
        justify-content: space-between;
        margin: 0; /* Remove any default margin */
        padding: 0; /* Remove any default padding */
        box-sizing: border-box; /* Include padding and border in the element's total width */
    }


    .menu-toggle-icon {
        display: none;
    }

    .nav-list {
        display: flex;
        height: 100%;
    }

    .nav-list:last-child{
        column-gap: 2rem;
    }

    .down-navbar li {
        display: flex;
        padding: 0.1rem;
    }

    .nav-links {
        padding: 0;
    }

    .nav-links:hover {
        background-color: initial;
    }

    /* dropdown */
    .dropdown-container {
        height: max-content;
        position: absolute;
        left: 0;
        right: 0;
        top: 6.5rem;
        background-color: var(--body-color);
        box-shadow: 0 6px 8px hsla(220, 68%, 12%, 0.05);
        pointer-events: none;
        opacity: 0;
        transition: top .4s, opacity .3s;
    }

    .dropdown-content {
        display: flex;
        grid-template-columns: repeat(4, max-content);
        column-gap: 4rem;
        max-width: 1220px;
        margin-inline: auto;
    }

    .dropdown-group {
        padding: 4rem 0 0 0;
        align-content: 1.25rem;
    }

    .dropdown-group:first-child,
    .dropdown-group:last-child {
        margin: 0;
    }

    .dropdown-list {
        row-gap: .75rem;
    }

    .dropdown-icon {
        width: 60px;
        height: 60px;
        background-color: var(--hover-light-color);
        border-radius: 50%;
        display: grid;
        place-items: center;
        margin-bottom: 1rem;
    }

    .dropdown-icon i {
        font-size: 2rem;
    }

    .dropdown-title {
        font-size: var(--normal-font-size);
    }

    .dropdown-link {
        font-size: var(--small-font-size);
    }

    .dropdown-link:hover {
        color: var(--first-color);
    }

    .dropdown-item {
        cursor: pointer;
    }

    /* show dropdown menu */
    .dropdown-item:hover > .dropdown-container {
        top: 5.5rem;
        opacity: 1;
        pointer-events: initial;
        cursor: initial;
    }
}

@media screen and (min-width: 1152px) {
    /* .container {
        margin-inline: auto;
    } */
}

/* ===========================end of navbars======================= */


/* ===================================Landing Page============================ */

/* Background with Multiple Gradient Styles */
.landing-background {
    top: 0;
    align-items: center;
    position: relative; /* Ensures it stays in place */
    width: 100%;
    height: auto; /* Allow it to expand beyond viewport height */
    background: radial-gradient(circle at center, #013d33 30%, #026b54 50%, #038f72 70%),
                conic-gradient(from 180deg, #04b48f, #26a69a, #42a5f5, #7e57c2, #ab47bc, #ec407a);
    background-size: cover;
    z-index: -1;
    padding-bottom: 50px;
}


/* Landing Page Container */
.landing-container {
    left: auto;
    top: 100px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px 100px 200px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    
  
}


/* Left Section (Text) */
.landing-left-section {
    width: 50%;
    color: white;
    text-align: left;
}

.landing-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #baffce;
    margin-bottom: 10px;
}

.landing-subtitle-container {
    position: relative;
    height: 60px; /* Adjust based on your subtitle height */
    overflow: hidden;
}

.landing-subtitle {
    font-size: 1rem;
    color: #d4f3ea;
    margin-bottom: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    animation-fill-mode: forwards; /* Keep the final state of the animation */
}

.landing-subtitle:first-child {
    opacity: 1; /* Make the first subtitle visible immediately */
}

.subtitle-text {
    display: inline-block;
}

/* Animation 1: Characters escape to the right, next comes from the left */
@keyframes escapeRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes comeFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animation 2: Bounce to the left, next comes from the top with shake */
@keyframes bounceLeft {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-100%);
    }
}

@keyframes shakeFromTop {
    0% {
        transform: translateY(-100%) rotate(0deg);
    }
    25% {
        transform: translateY(0) rotate(5deg);
    }
    50% {
        transform: translateY(0) rotate(-5deg);
    }
    75% {
        transform: translateY(0) rotate(5deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* Animation 3: Fade out downward, next comes from the right */
@keyframes fadeOutDown {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes comeFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.landing-slogan {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 30px;
}

/* Buttons */
.landing-btn {
    display: inline-block;
    background: var(--hover-light-color);
    color: var(--first-color);
    border: none;
    padding: 12px 24px;
    margin: 10px 5px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 230, 118, 0.4);
}

.landing-btn:hover {
    background: #007b4a;
    box-shadow: 0 6px 20px rgba(0, 200, 83, 0.5);
    transform: scale(1.05);
    color: white;
}

/* Search Bar */
.landing-search-bar {
    display: flex;
    align-items: center;
    margin-top: 20px;
    border-radius: 25px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.2);
}

#landing-search-input {
    flex: 1;
    padding: 12px;
    border: none;
    outline: none;
    font-size: 16px;
    background: transparent;
    color: white;
}

#landing-search-button {
    background: var(--first-color);
    border: none;
    padding: 12px;
    cursor: pointer;
    color: white;
    font-weight: 400;
}

#landing-search-button:hover {
    background: #007b4a;
}

#landing-search-input::placeholder {
    color: white;
    opacity: 1; /* Ensures full visibility */
}


/* Right Section (Image or Content) */

/* time and greeting */
.landing-date-time {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.05); /* Black with 20% opacity */
    backdrop-filter: blur(5px); /* Slight blur to enhance readability */
}

#landing-time {
    padding-right: 10px;
    font-size: 1.3rem;
    font-weight: 400;
    color: #c8ff00; /* Gold color for time */
}

#landing-date {
    font-size: 18px;
    color: #FFFFFF;
}

#landing-greeting {
    font-size: 1rem;
    color: #c8ff00; /* Light green greeting */
    
}


.landing-right-section {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
} 
/* Image Slider */
.landing-slider {
    position: relative;
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.landing-slide-container {
    position: absolute;
    transition: transform 0.8s ease, opacity 0.8s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.landing-slide {
    width: 350px;
    height: 250px;
    border-radius: 15px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.6s ease-in-out, box-shadow 0.6s ease-in-out;
}

.slide-text {

    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease-in-out;
}

.slide-text h2{
    font-size: 1rem;
}

.slide-text p {
    font-size: 0.7rem;
    color: #c8ff00;
}
.center-slide {
    z-index: 3;
    transform: scale(1.1);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.5);
}

.center-slide .slide-text {
    opacity: 1; /* Show text only for the center slide */
}

.side-slide {
    z-index: 2;
    opacity: 0.7;
}

.left-slide {
    left: -20%;
    transform: rotateY(10deg) scale(0.9);
}

.right-slide {
    right: -20%;
    transform: rotateY(-10deg) scale(0.9);
}

.landing-slide-container:hover {
    transform: scale(1.05);
    opacity: 1;
}

/* Slide in effect for images */
.slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.show-slide {
    opacity: 1;
    transform: translateX(0);
}

/* The reveal section container */
.landing-reveal-section {
    position: relative;
    width: 100%;
    height: 80px;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

/* The text is initially hidden with a dark color */
.scrolling-text {
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    color: rgba(0, 79, 30, 0.1); /* Almost invisible */
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 1;
}

/* The moving mask */
.slider-mask {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(0, 77, 1, 0) 100%);
    animation: slideReveal 5s linear infinite;
}

/* Smooth sliding animation */
@keyframes slideReveal {
    from {
        left: -100%;
    }
    to {
        left: 100%;
    }
}


/* About up page======================== */


.about-us-container {
    max-width: 1400px;
    margin: 50px auto;
    text-align: center;
}

h2 {
    font-size: 28px;
    color: #004d40;
}

.about-us-tabs-container {
    display: inline-flex; /* Ensures the container only takes the necessary width */
    justify-content: center;
    border: 1px solid #d8d8d8;
    padding: 15px;
    border-radius: 20px;
    margin: auto; /* Centers the container */
    width: fit-content; /* Shrinks to fit content */
}

.about-us-tabs {
    display: flex;
    gap: 15px;
    align-items: center; /* Ensures vertical alignment */
}

.about-us-tab-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #004d40;

    padding: 20px;
    border-radius: 10px;
}

.about-us-tab-left {
    display: flex;
    align-items: center;
    color: #004d40;
    background-color: #def3f0;
    padding: 20px;
    border-radius: 10px;
}

.left-bank {
    font-size: 45px;
    padding-right: 5px;
}

.about-us-tab-left-right {
    text-align: left;
}

.about-us-description {
    margin: 20px 0;
    color: #666;
}

.about-us-content {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 30px;
}
.about-us-box-left{
    width: 68%;
    display: flex;
    justify-content: space-between;
    border-top: 5px solid #004d40;
    border-radius: 10px;
    border-left: 1px solid #004d40;
    border-bottom: 1px solid #004d40;
    border-right: 1px solid #004d40;
}

.about-us-box-right {
    width: 35%;
    background: white;
    padding: 20px;
    border-radius: 8px;
    flex: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.about-us-box-right h3 {
    color: #004d40;
    font-size: 18px;
}

.about-us-box-left {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.about-us-box-left-first,
.about-us-box-left-second {
    flex: 1; /* Makes both sections take equal space */
    padding: 20px;
    border-radius: 10px;
    text-align: left;
}

/* Dotted vertical line */
.horizontal-line{
width: 2px;
height: 100px;
}

.about-us-highlight {
    position: relative;
    background: #fff; /* Background color */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Ensures pseudo-element stays inside */
    border: 1px solid #79b1a8; /* Solid border for left, right, and bottom */
    border-top: none; /* Remove default top border */
}

/* Gradient Top Border */
.about-us-highlight::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px; /* Border thickness */
    background: linear-gradient(to right, #004d40, #00bfa5); /* Smooth gradient */
    border-radius: 10px 10px 0 0; /* Rounded edges */
}


.core-values-slider {
    position: relative;
    width: 100%;
    height: 100px; /* Adjust height as needed */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core-value {
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Smooth fading effect */
    font-size: 16px;
    text-align: center;
    color: #004d40;
    font-weight: bold;
}

.core-value.active {
    opacity: 1;
}

/* Dots navigation */
.dots-container {
    text-align: center;
    margin-top: 10px;
}

.dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #ccc;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background-color: #004d40; /* Highlight active dot */
}

/* General Fade-In Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation Class (Initially Hidden) */
.animate {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-in-out;
}

/* Active Class - Starts Animation When in View */
.animate.active {
    opacity: 1;
    transform: translateY(0);
}

/* Delay Different Elements */
.delay-1 { transition-delay: 0.3s; }
.delay-2 { transition-delay: 0.6s; }
.delay-3 { transition-delay: 0.9s; }
.delay-4 { transition-delay: 1.2s; }

/* Smooth Sliding for Core Values */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.core-value {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-in-out;
}

.core-value.active {
    opacity: 1;
    transform: translateX(0);
}


/* Stats Page */

/* Add these to your existing CSS */

.stack-area-right {
    position: relative;
    height: 400px; /* Set a fixed height for the animation area */
}

.initial-content, .secondary-content {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.secondary-content {
    opacity: 0;
    pointer-events: none;
}

.secondary-content.active {
    opacity: 1;
    pointer-events: all;
}

.initial-content.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Stats Page */
.stats-page-container {
    margin-top: 100px;
    min-height: 70vh;
    position: relative;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stack-area {
    margin-top: 100px;
    position: sticky;
    top: 0;
    width: 90%;
    display: flex;
    align-items: center;
    padding: 20px;
}

.stack-area-left {
    flex-basis: 50%;
    padding: 20px;
    margin-left: 20px;
}

.stack-area-left button {
    padding: 15px 25px;
    background-color: #004d40;
    color: #ccff00;
    border-radius: 50px;
    margin-top: 30px;
    font-size: 16px;
    border: none;
    transition: 0.3s ease-in-out;
}

.stack-area-left button:hover {
    cursor: pointer;
    background-color: #00bfa5;
    color: #ffffff;
}

.stack-area-left h2 {
    font-size: 60px;
}

.stack-area-left p {
    font-size: 16px;
}

.stack-area-right {
    flex-basis: 50%;
    padding: 20px;
    margin-left: 20px;
    position: relative;
    height: 400px;
}


.stats-card {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 15px;
    text-align: center;
    padding-top: 20px;
  
    /* ✅ Center the card horizontally and vertically */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-5deg); /* <== Center + initial tilt */
  
    transition: transform 0.6s ease, opacity 0.4s ease;
    z-index: 1;
  }
  

.stats-card h4 {
    padding: 20px;
    color: white;
    font-size: 16px;
}

.stats-card p {
    padding: 20px;
    color: white;
    font-size: 20px;
}

/* Different colors for each card */
.stack-area-right-card-1 { background-color: #004d40; }
.stack-area-right-card-2 { background-color: #f70000; }
.stack-area-right-card-3 { background-color: #ff6600; }
.stack-area-right-card-4 { background-color: #00adaa; }

/* Content transition styles */
.initial-content, .secondary-content {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.secondary-content {
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.secondary-content.active {
    opacity: 1;
    pointer-events: all;
}

.initial-content.fade-out {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

.chart-container {
    margin-top: 50px;
    padding: 30px;
    display: block; /* always present but hidden via opacity */
    opacity: 0;
    transition: opacity 0.1s ease;
    pointer-events: none; /* prevent interactions when hidden */
}

.chart-container.visible {
    opacity: 1;
    pointer-events: auto;
}


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

.chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 250px;
    width: 80%;
    margin: 0 auto;
    position: relative;
    margin-bottom: 50px;
}

.bar {
    width: 60px;
    border-radius: 5px;
    position: relative;
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.bar:hover {
    transform: scale(1.1);
}

.year {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.profit {

    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: bold;
    color: #444;
}

.arrow {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    font-weight: bold;
    color: #222;
}


/* Milestone page====================================== */
.timeline-container {
    position: relative;
    width: 80%;
    height: 90vh;
    background: transparent;
}

.timeline-path {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('curved-path.png') no-repeat center center;
    background-size: contain;
}

.milestone {
    position: absolute;
    width: 160px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.8);
    border-left: 5px solid;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.milestone-icon img {
    width: 40px;
    height: 40px;
}

.milestone-content h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.milestone-content p {
    margin: 0;
    font-size: 14px;
    color: #666;
}
/* === Products Section === */
.products-section {
    position: relative;
    width: 100%;
    background-color: #f9f9f9;
    padding: 0 0 6rem 0;
    margin-top: 20px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-in-out;
  }
  .products-section.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .products-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75%;
    z-index: 0;
  }
  .products-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
  }
  .products-content {
    max-width: 2400px;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 85%;
    margin: 0 auto; /* override the auto centering */
    padding: 20px;
    gap: 1.5rem;
    position: relative;
    z-index: 2;
  }
  .products-text {
    margin-top: 10px;
    flex: 1 1 95%;
 
  }
  .products-text,
  .product-cards,
  .products-image-wrapper {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease-in-out;
  }
  .products-section.visible .products-text,
  .products-section.visible .product-cards,
  .products-section.visible .products-image-wrapper {
    opacity: 1;
    transform: translateY(0);
  }

  .products-text h2 {
    font-size: 2rem;
    font-weight: 500;
    color: #004d40;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
  }
  .products-text p {
    font-size: 1rem;
    color: #444;
    margin-bottom: 2rem;
  }
  .product-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .ri-bank-line, 
  .ri-secure-payment-line, 
  .ri-school-line, 
  .ri-group-3-fill {
    color: #004d40;
  }

  .product-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    text-align: center;
    flex: 1 1 280px;
    min-width: 280px;
    z-index: 2;
  }
  .product-card .icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
  .product-card h3 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
    color: black;
  }
  .product-card p {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 1rem;
  }
  .product-card .btn {
    background-color: #004d40;
    border: none;
    color: white;
    padding: 0.5rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
  }
  .product-card .btn:hover {
    background-color: #00695c;
  }
  
  /* === Circular Chart Background === */
  .circular-background-wrapper {
    position: absolute;
    top: 20%;
    right: 0;
    width: 320px;
    height: 320px;
    z-index: -1;
    pointer-events: none;
  }
  .circular-background-wrapper:hover .rotating-wrapper {
    animation-play-state: paused;
  }
  
  /* === Rotating Animation === */
  @keyframes rotate {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(80deg); }
    50% { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
  }
  .rotating-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate 20s linear infinite;
    transform-origin: center;
  }
  
  /* === Circular Chart === */
  
  .circular-chart {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(to right, #f1feff, #e0ffe3, #99d19f, #d3fecb, #6ed27d);
    box-shadow: 0 0 20px rgba(0, 77, 64, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
  }
  
  /* === Circle Items (Links) === */
  .circle-item {
    --angle: 0deg;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(var(--angle)) translate(160px) rotate(calc(-1 * var(--angle)));
    transform-origin: center;
    background: linear-gradient(135deg, #004d40, #009688);
    color: white;
    border-radius: 50px;
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 6px 15px rgba(0, 77, 64, 0.3);
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    pointer-events: auto; /* makes links clickable */
    z-index: 3;
  }
  .circle-item:hover {
    background: linear-gradient(135deg, #00695c, #26a69a);
    transform: rotate(var(--angle)) translate(160px) rotate(calc(-1 * var(--angle))) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 77, 64, 0.4);
  }

  .products-learn-more {
    color: #004d40;
    background-color: #ffffff;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 400;

    border: 1px solid #004d40;
    transition: all 0.3s ease;
  }
  
  .products-learn-more:hover {
    color: #ffffff;
    background-color: #004d40;
    border-color: #004d40;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 77, 64, 0.3);
  }
  

/* merchandise page */

.merchandise-section {
  padding: 60px 20px;
  background-color: #f7fdfc;
  text-align: center;
}

.section-title {
  font-size: 2rem;
  color: #004d40;
  margin-bottom: 30px;
  font-weight: 700;
}

.merchandise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  justify-content: center;
  align-items: start;
}

.merch-item {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
  transition: transform 0.3s ease;
}

.merch-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.merch-item h3 {
  color: #004d40;
  font-size: 1.1rem;
  font-weight: 600;
}

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

.explore-btn-wrapper {
  margin-top: 30px;
}

.explore-btn {
  background-color: #004d40;
  color: #fff;
  padding: 12px 28px;
  border-radius: 25px;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.explore-btn:hover {
  background-color: #00796b;
  transform: translateY(-3px);
}



/* CONTACT SECTION */
.contact-section {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, 
      #004d40 0%, 
      #bfff00 50%, 
      #ffffff 50%, 
      #ffffff 100%);
    padding: 6vh 4vw;
    position: relative;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

/* Contact card container */
.contact-card {

    height: 55vh;
    width: 50%;
    max-width: 800px;
    min-width: 280px;
    background-color: #004d40;
    color: white;
    border-radius: 1.875rem; /* 30px */
    padding: 4vh 3vw;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transition: background-color 0.3s ease;
}

/* Contact main content fade on popup active */
.contact-card.popup-active .contact-main-content {
    opacity: 0.2;
    filter: blur(3px);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Contact main content normal */
.contact-card .contact-main-content {
    opacity: 1;
    filter: none;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Heading */
.contact-card h2 {
    color: rgb(179, 255, 0);
    font-size: 1.75rem; /* ~28px */
    margin-bottom: 2rem;
}

/* Contact rows */
.contact-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Icons inside contact rows */
.contact-row .icon {
    width: 1.5rem;  /* 24px */
    height: 1.5rem;
}

/* Horizontal dashed line */
hr {
    border: none;
    border-top: 2px dashed #2d9c2b;
    margin: 0.625rem 0 1.25rem;
}

.contact-social-media {
    position: absolute;
    bottom: 20px;   /* distance from bottom edge of the card */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 300px; /* optional max width */
  }
  
  
  .contact-social-icon {
    color: #ffffff; /* Primary green color */
    font-size: 1.6rem;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

  }
  
  .contact-social-icon:hover {
    color: #aaff00; /* Slightly lighter green on hover */
    cursor: pointer;
  }
  
/* Chat bubbles styling */
.chat-bubble {
    width: 3.75rem; /* 60px */
    height: 3.125rem; /* 50px */
    background-color: rgb(157, 255, 0);
    border-radius: 50% 50% 50% 0;
    position: absolute;
    bottom: -1.25rem;
    right: -1.875rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    color: white;
    font-weight: bold;
    cursor: pointer;
    z-index: 11;
    transition: background-color 0.3s ease;
}
.chat-bubble:hover {
    background-color: #00bfa5;
}

.chat2 {
    width: 3.125rem;
    height: 2.8rem;
    right: 1.25rem;
    bottom: -0.625rem;
    background-color: rgb(179, 255, 0);
    border-radius: 50% 50% 50% 0;
    z-index: 10;
}

/* Decorative dots */
.dots {
    position: absolute;
    width: 4.375rem; /* 70px */
    height: 6.25rem; /* 100px */
    background-image: radial-gradient(#000 2px, transparent 2px);
    background-size: 10px 10px;
    opacity: 0.7;
    z-index: 1;
}

.dots-left {
    top: 30%;
    left: 1.875rem; /* 30px */
}

.dots-right {
    top: 10%;
    right: 2.5rem; /* 40px */
}

/* Chat popup wrapper */
.chat-popup-wrapper {
    position: fixed;
    top: 180rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none; /* Optional: allow clicks to pass if popup is hidden */
  }
  

  
  /* Popup card */
  .chat-popup-card {
    width: 90vw;
    max-width: 350px;
    background: #fff;
    border-radius: 1.25rem;
    padding: 1.875rem 1.563rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(50%) scale(0.8);
    pointer-events: none;
    transition: all 0.4s ease-in-out;
    overflow-y: visible;
    position: relative;
  }
  
  .chat-popup-card.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  
  /* Popup icon */
  .popup-icon {
    width: 3.75rem;
    margin: 0 auto 1rem;
    display: block;
  }
  
  /* Popup heading */
  .chat-popup-card h2 {
    font-weight: 700;
    margin: 0.625rem 0 1.25rem;
    text-align: center;
    color: #004d40;
    font-size: 1.5rem;
  }
  
  /* Popup subtext */
  .popup-subtext {
    font-size: 0.875rem;
    color: #666;
    text-align: center;
    margin-bottom: 1.25rem;
  }
  
  /* Form labels */
  .chat-popup-card label {
    display: block;
    margin: 0.625rem 0 0.3125rem;
    font-size: 0.875rem;
    color: #333;
  }
  
  /* Form inputs and textarea */
  .chat-popup-card input,
  .chat-popup-card textarea {
    width: 100%;
    padding: 0.625rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.375rem;
    resize: vertical;
  }
  
  /* Submit button */
  .chat-popup-card button {
    width: 100%;
    background: #004d40;
    color: white;
    padding: 0.75rem;
    font-size: 1rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .chat-popup-card button:hover {
    background-color: #009688;
  }
  


  
  

/* Fade effects when popup active */
.contact-card.popup-active .contact-main-content {
    opacity: 0.2;
    filter: blur(3px);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.contact-card.popup-active .chat-bubble {
    opacity: 0.2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.contact-card.popup-active .chat-bubble.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
}

/* BACKGROUND WORDS CONTAINER */
.animated-bg-text {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Background words */
.bg-word {
    position: absolute;
    font-size: 2vw; /* Responsive font size */
    font-weight: bold;
    color: rgba(0, 77, 64, 0.15);
    white-space: nowrap;
    animation: floatWord 10s ease-in-out infinite;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    transition: top 1s, left 1s;
    user-select: none;
}

/* Floating animation */
@keyframes floatWord {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.3;
    }
    25% {
        transform: translate(1vw, -1vh) scale(1.05) rotate(2deg);
        opacity: 0.5;
    }
    50% {
        transform: translate(-1vw, 1vh) scale(1.08) rotate(-2deg);
        opacity: 0.4;
    }
    75% {
        transform: translate(1vw, 0.5vh) scale(1.03) rotate(1deg);
        opacity: 0.38;
    }
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.3;
    }
}

/* === FAQ Hero Section === */
.faq-hero {
    background-color: var(--background-colors);
    color: var(--text-color);
    padding: 60px 20px;
    text-align: center;
  }
  
  .faq-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
  }
  
  .faq-text {
    flex: 1 1 500px;
    text-align: left;
  }
  
  .faq-text h1 {
    font-size: 2.8em;
    margin-bottom: 20px;
  }
  
  .faq-text p {
    font-size: 1.1em;
    line-height: 1.6;
  }
  
  .faq-image {
    flex: 1 1 400px;
    text-align: center;
  }
  
  .faq-image img {
    max-width: 100%;
    height: auto;
  }
  
  /* === FAQ Body === */
  .faq-body {
    background-color: #ffffff;
    padding: 40px 20px;
  }
  
  .faq-content {
    max-width: 1200px;
    margin: auto;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
  }
  
  /* === Sidebar === */
  .faq-sidebar {
    flex: 0 0 250px;
    border-radius: 8px;
    padding: 20px;
    position: sticky;
    top: 100px;
  }
  
  .faq-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .faq-sidebar ul li {
    margin-bottom: 12px;
  }
  
  .faq-sidebar ul li a {
    text-decoration: none;
    color: #085A40;
    font-weight: 500;
    display: block;
    padding: 10px 15px;
    border-left: 4px solid transparent;
    border-radius: 4px;
    transition: 0.3s;
  }
  
  .faq-sidebar ul li a:hover,
  .faq-sidebar ul li a.active-link {
    background-color: #e8f5f0;
    border-left: 4px solid #085A40;
  }
  
  /* === FAQ Details === */
  .faq-details {
    flex: 1;
  }
  
  /* === FAQ Sections === */
  .faq-questions {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
  }
  
  .faq-questions.active {
    display: block;
  }
  
  .faq-questions h2 {
    color: #085A40;
    margin-bottom: 20px;
    font-size: 1.6em;
  }
  
  /* === FAQ Items === */
  .faq-item {
    background: #fff;
    border-radius: 6px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: max-height 0.3s ease;
  }
  
  .faq-question {
    width: 100%;
    padding: 18px 20px;
    background: #ffffff;
    border: none;
    font-weight: bold;
    font-size: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .faq-item.open .faq-question {
    background: var(--background-colors);
  }
  
  .faq-question:hover {
    background: #f5f5f5;
  }
  
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    background: white;
    padding: 0 20px;
    font-size: 0.95em;
    line-height: 1.6;
    border-top: 1px solid #eee;
  }
  
  .faq-item.open .faq-answer {
    max-height: 800px;
    padding: 15px 20px;
  }
  
  .arrow i {
    transition: transform 0.3s ease;
  }
  
  .faq-item.open .arrow i {
    transform: rotate(180deg);
  }
  
  /* Animation */
  @keyframes fadeIn {
    from {opacity: 0; transform: translateY(20px);}
    to {opacity: 1; transform: translateY(0);}
  }

  /* success stories */


  .stories-section {
    position: relative;
    padding: 5rem 2rem;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/front-end/images/background1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white; /* optional: for readability */
  }
  
  
  .stories-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    max-width: 1200px;
    margin: auto;
  }
  
  .stories-left {
    flex: 1 1 350px;
    animation: fadeLeft 1.2s ease forwards;
  }
  
  .section-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: #004d40;
    background-color: #ffffff;
    padding: 0.3rem 0.8rem;
    border-radius: 2rem;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 1rem;
  }
  
  .stories-left h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
  }
  
  .stories-left p {
    font-size: 0.95rem;
    color: #bbd58e;
    margin: 1rem 0;
    line-height: 1.6;
    letter-spacing: 0.5px;
  }
  
  .stories-btn {
    background: #00ff3c;
    color: #000000;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .stories-btn:hover {
    background: #007718;
  }
  
  .stories-right {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
  }
  
  .story-card {
    flex: 0 0 calc(33.333% - 2rem); /* Three cards in a row with spacing */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.4s ease, opacity 0.4s ease;
    min-height: 360px;
    max-height: 500px;
    display: flex;
    flex-direction: column;
  }
  
  .story-card.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    animation: fadeUp 1s ease forwards;
  }
  
  .story-card img {
    width: 100%;
    height: 250px; /* fixed height */
    object-fit: cover;
    display: block;
  }
  
  .story-card .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    margin: 1rem;
    border-radius: 6px;
    background-color: #e0f2f1;
    color: #004d40;
    font-weight: 600;
    width: fit-content;
  }
  
  .story-card h4 {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0 1rem 1rem;
    margin-top: auto;
    color: #333;
    line-height: 1.4;
  }
  
  /* For visibility toggling */
.story-card.hidden {
    display: none;
  }
  
  .story-card.visible {
    display: flex;
  }
  .label.marketing { color: #2196f3; }
  .label.designing { color: #ff9800; }
  .label.mobile { color: #9c27b0; }
  .label.strategy { color: #4caf50; }
  .label.finance { color: #f44336; }
  .label.education { color: #3f51b5; }
  
  /* Animations */
  @keyframes fadeLeft {
    from {
      opacity: 0;
      transform: translateX(-40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* patners section */
  .partners-section {
    background-image: url(/front-end/images/background7.jpg);
    background-size: cover;
    background-position: center;
    padding: 6rem 2rem;
    text-align: center;
  }
  
  .partners-title h2 {
    font-size: 1.8rem;
    color: #333;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
  }
  
  .partners-title p {
    font-size: 1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto 3rem;
  }
  
  .partners-logos-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 70%;
    margin: 0 auto; /* centers the container */
    overflow: hidden;
    background: linear-gradient(to right, #eaeaea 0%, #ffffff 50%, #f0f0f0 100%);
    border-radius: 10px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
    padding: 2rem 0;
  }
  
  
  .partners-logos {
    display: flex;
    gap: 3rem;
    will-change: transform;
    white-space: nowrap;
  }
  
  .partners-logos img {
    border-radius: 20px;
    max-height: 120px;
    object-fit: contain;
 
    transition: filter 0.3s ease;
    flex-shrink: 0;
  }
  
  .partners-logos img:hover {
    filter: grayscale(0%);
  }
  
  
  /* membership application */

  .membership-section {
    padding: 6rem 2rem;
    background: #f4f6f8;
    font-family: 'Segoe UI', sans-serif;
  }
  
  .membership-container {
    max-width: 90%;
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
    align-items: center;
  }
  
  .membership-left {
    flex: 1 1 40%;
    padding: 1rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .membership-left h2 {
    font-size: 1.8rem;
    color: #029a81;
    margin-bottom: 1rem;
    letter-spacing: 1.2px;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 800;
  
   

  }
  
  .membership-left p {
    font-size: 1.1rem;
    color: #444;
    letter-spacing: 0.3px;
    line-height: 1.8;
    max-width: 500px;
  }
  
  
  .membership-right {
    flex: 1 1 55%;
  }
  
  .membership-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
  }
  
  .tab {
    flex: 1;
    padding: 1rem;
    text-align: center;
    background: #e8f0ef;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    position: relative;
    transition: background 0.3s;
  }
  
  .tab:hover {
    background: #d1e7e3;
  }
  
  .tab.active {
    background: #006352;
    color: white;
  }
  
  .tab-indicator {
    height: 0;
    width: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #006352;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
  }
  
  .tab.active .tab-indicator {
    display: block;
  }
  
  .membership-forms {
    position: relative;
    min-height: 300px;
  }
  
  .membership-card {
    display: none;
    flex-direction: column;
    gap: 1rem;
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    animation: fadeIn 0.4s ease-in-out;
  }

  .membership-card h2{
    font-size: 1.1rem;
    color: #005429;
    letter-spacing: 0.3px;
    line-height: 1.8;
    max-width: 500px;
  }
  
  .membership-card.active {
    display: flex;
    animation: fadeIn 0.4s ease-in-out;
  }
  
  .membership-card input {
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
  }
  
  .membership-card button {
    margin-top: 1rem;
    padding: 12px;
    background: #006352;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .membership-card button:hover {
    background: #004f41;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
/* downloads page */

.downloads-section {
  flex-wrap: wrap;
  gap: 3rem;
  padding: 4rem 2rem;
  background: linear-gradient(to right, #eef2f3, #ffffff);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.animated-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 2.5rem;
  color: #004d3c;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.1em;
  perspective: 1000px;
}

.animated-heading .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(-8px);
  animation: slideIn 0.5s ease forwards;
  position: relative;
}

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

.scatter {
  animation: scatterAway 1s ease forwards;
}

@keyframes scatterAway {
  to {
    opacity: 0;
    transform: translate(
      calc(var(--x) * 1vw),
      calc(var(--y) * 1vh)
    ) rotate(720deg) scale(0.3);
  }
}

.reenter {
  animation: reenterFromRandom 0.7s ease forwards;
}

@keyframes reenterFromRandom {
  from {
    opacity: 0;
    transform: translate(
      calc(var(--x) * 1vw),
      calc(var(--y) * 1vh)
    ) rotate(360deg) scale(0.3);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

.downloads-left p {
  font-size: 1.1rem;
  color: #444;
  line-height: 1.7;
  margin-bottom: 40px;
}

.downloads-right {
  flex: 1 1 50%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.download-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.07);
  padding: 1.2rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;
  border-left: 3px solid #006352;
}

.download-card:hover {
  transform: translateY(-8px);
}

.download-card h3 {
  font-size: 1.1rem;
  color: #003c32;
  margin-bottom: 0.5rem;
}

.download-card p {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 1.2rem;
}

.actions {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}

.actions a {
  flex: 1;
  text-align: center;
  padding: 0.6rem 0.8rem;
  border-radius: 5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.actions .view {
  background-color: #e0f7f4;
  color: #006352;
  border: 1px solid #006352;
}

.actions .download {
  background-color: #006352;
  color: white;
  border: 1px solid transparent;
}

.actions .view:hover {
  background-color: #d1f1ec;
}

.actions .download:hover {
  background-color: #014136;
}


/* latest news page */

/* ================ BASE STYLES ================ */
.latest-section {
  color: #333;
  margin: 0 auto;
  overflow: hidden;
  background-color: transparent;
}

/* ================ DIVIDER LINES ================ */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #085A40, transparent);
  margin: 2rem 0;
}

.vertical-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent, #085A40, transparent);
  margin: 0 1rem;
}

/* ================ HERO CAROUSEL ================ */
.hero-carousel {
  position: relative;
  height: 40vh;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 1s cubic-bezier(0.65, 0, 0.35, 1);
  opacity: 0;
  z-index: 0;
}

.hero-slide.active {
  left: 0;
  opacity: 1;
  z-index: 1;
}

.hero-content {
  padding: 3rem;
  border-radius: 12px;
  color: #fff;
  text-align: center;
  transform: translateY(20px);
  animation: fadeInUp 0.8s 0.3s forwards;
  backdrop-filter: blur(4px);
}

.hero-content h2 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero-content p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ================ MAIN CONTENT LAYOUT ================ */
.latest-content {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap: 2rem;
  padding: 2rem 0;
  min-height: 60vh; /* Changed from fixed height */
}

.latest-box {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%; /* Take full available height */
}

.latest-box h3 {
  font-size: 1.2rem;
  color: #085A40;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e0e0e0;
}

/* ================ SLIDER STYLES ================ */
.event-card p, .news-card p{
  font-size: 0.8rem;
}
.event-card h4, .news-card h4{
  font-size: 1rem;
  color: #004d40;
}
.events-slider, 
.news-slider,
.blog-slider {
  position: relative;
  min-height: 450px; /* Minimum height */
  height: auto; /* Flexible height */
  overflow: hidden;
  flex-grow: 1; /* Take remaining space */
}

.event-card, 
.news-card,
.blog-post {
  position: relative; /* Changed from absolute */
  width: 100%;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 1rem;
  border-radius: 8px;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-bottom: 1rem;
}

.event-card.active, 
.news-card.active,
.blog-post.active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
  height: auto;
}

.event-card img, 
.news-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 6px;
  margin: 1rem 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.meta-date {
  font-size: 0.8rem;
  color: #666;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.event-summary, 
.news-summary {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
  margin-bottom: 1rem;
}

/* ================ BLOG STYLES ================ */
.blog-post {
  display: flex;
  flex-direction: column;
  height: auto; /* Flexible height */
}

.blog-header {
  margin-bottom: 1rem;
}

.blog-post h4 {
  font-size: 1rem;
  color: #003c32;
  margin-bottom: 0.3rem;
}

.blog-post h5 {
  font-size: 0.8rem;
  color: #666;
  font-weight: 500;
}

.blog-preview, .blog-reveal p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1rem;
}

.read-more {
  background: transparent;
  border: none;
  color: #085A40;
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 0;
  text-align: left;
  transition: color 0.2s;
}

.read-more:hover {
  color: #0a7a5a;
}

.blog-reveal {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.blog-reveal:not(.hidden) {
  max-height: 1000px; /* Allow full expansion */
}

/* ================ COMMENTS SECTION ================ */
.comments-section {
  margin-top: 1rem;
  border-top: 1px solid #eee;
  padding-top: 1rem;
  position: relative; /* Ensure it stays in flow */
}

.comments-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.comments-count {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}

.view-comments {
  background: none;
  border: none;
  color: #085A40;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}

.comments-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-right: 0.5rem;
}

.comments-list:not(.hidden) {
  max-height: 200px; /* Reduced from 300px */
  overflow-y: auto;
  margin-bottom: 1rem;
}

.comment {
  padding: 0.8rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}

.comment-author {
  font-weight: 600;
  font-size: 0.9rem;
  color: #085A40;
  margin: 0;
}

.comment-time {
  font-size: 0.8rem;
  color: #888;
  margin: 0;
}

.comment-text {
  font-size: 0.9rem;
  color: #444;
  margin: 0;
  padding-left: 0.5rem;
  border-left: 2px solid #e0e0e0;
}

.add-comment {
  display: flex;
  margin-top: 1rem;
}

.add-comment input {
  flex-grow: 1;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 20px 0 0 20px;
  font-size: 0.9rem;
}

.add-comment button {
  background: #085A40;
  color: white;
  border: none;
  border-radius: 0 20px 20px 0;
  padding: 0 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.add-comment button:hover {
  background: #0a7a5a;
}

/* ================ BLOG INTERACTIONS ================ */
.blog-actions {
  display: flex;
  gap: 1rem;
  margin-top: auto; /* Push to bottom */
  padding-top: 1rem;
  border-top: 1px solid #eee;
  position: relative; /* Ensure it stays visible */
  z-index: 1; /* Keep above other elements */
}

.like-btn, 
.comment-btn, 
.share-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: #f5f5f5;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.like-btn:hover, 
.comment-btn:hover, 
.share-btn:hover {
  background: #e0e0e0;
}

.like-count {
  font-weight: 600;
}

/* ================ ANIMATIONS ================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================ RESPONSIVE DESIGN ================ */
@media (max-width: 1024px) {
  .latest-content {
    grid-template-columns: 1fr;
  }
  
  .vertical-divider {
    display: none;
  }
  
  .hero-content {
    padding: 2rem;
    margin: 0 1rem;
  }
  
  .hero-content h2 {
    font-size: 2.2rem;
  }
}

@media (max-width: 768px) {
  .hero-carousel {
    height: 30vh;
  }
  
  .hero-content h2 {
    font-size: 1.8rem;
  }
  
  .hero-content p {
    font-size: 1rem;
  }
  
  .events-slider,
  .news-slider,
  .blog-slider {
    min-height: 400px;
  }
}

@media (max-width: 480px) {
  .latest-content {
    min-height: 50vh;
  }
  
  .blog-actions {
    padding: 0.5rem 0;
  }
  
  .like-btn, 
  .comment-btn, 
  .share-btn {
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
  }
  
  .stats-card {
      height: 180px;
      width: 180px;
  }
}

@media (max-width:420px){
      .stats-card {
      height: 150px;
      width: 150px;
  }
}
/* Responsive Behavior */
@media (max-width: 768px) {
  .downloads-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .downloads-left {
    text-align: center;
    max-width: 100%;
  }

  .animated-heading {
    font-size: 2rem;
    letter-spacing: 0.08em;
  }
  .downloads-right {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .actions {
    flex-direction: column;
  }

  .actions a {
    width: 100%;
  }
}

  /* footer */

  .newsletter {
    background-color: #006352;
    padding: 40px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .newsletter .left {
    display: flex;
    align-items: center;
    gap: 105px;
  }
  
  .newsletter .left img {
    width: 200px;
  }
  
  .newsletter .left .text h2 {
    margin: 0;
    font-size: 22px;
    color: #ffffff;
    letter-spacing: 0.5px;


  }
  
  .newsletter .left .text p {
    margin: 4px 0 0;
    font-size: 14px;
    color: #dddddd;
    letter-spacing: 0.5px;
  }
  
  .newsletter .right {
    display: flex;
    gap: 10px;
    margin-top: 15px;
  }
  
  .newsletter input[type="email"] {
    padding: 10px;
    border: none;
    border-radius: 5px;
    width: 250px;
  }
  
  .newsletter button {
    background-color: #013027;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  footer {
    background-color: #02352c;
    padding: 50px 20px 20px;
  }
  
  .footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
  }
  
  .footer-columns h4 {
    font-size: 16px;
    margin-bottom: 15px;
    color: #ffffff;
  }
  
  /* start */
  #footer-columns-contact {
    color: #cfdce7;
    font-size: 14px;
    line-height: 1.6;
  }
  
  #footer-columns-contact h4 {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 18px;
  }
  
  #footer-columns-contact .description {
    margin-bottom: 18px;
    line-height: 1.7;
  }
  
  #footer-columns-contact p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
  }
  
  #footer-columns-contact i {
    font-size: 18px;
    color: #ffffff;
    margin-top: 2px;
    flex-shrink: 0;
  }
  
  #footer-columns-contact span {
    display: inline-block;
  }
  
  
  /* end */
  .footer-columns ul,
  .footer-columns p {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #dddddd;
  }
  
  .footer-columns ul li {
    margin-bottom: 10px;
  }
  
  .footer-columns ul li a {
    color: #dddddd;
    text-decoration: none;
  }
  
  .footer-columns ul li a:hover {
    color: #ffffff;
  }
  
  .social-icons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
  }
  
  .social-icons a {
    color: #cfdce7;
    font-size: 18px;
    transition: color 0.3s;
  }
  
  .social-icons a:hover {
    color: #ffffff;
  }

  .join-us-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(135deg, #00b894, #006352);
    color: #ffffff;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
  }
  
  .join-us-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, #00d8a4, #01493d);
  }
  
  
  .footer-bottom {
    border-top: 1px solid #294056;
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    color: #cfdce7;
  }
  
  .footer-bottom a {
    color: #cfdce7;
    margin-left: 15px;
    text-decoration: none;
  }
  
  .footer-bottom a:hover {
    text-decoration: underline;
  }
  
  /* start of media quesries */
  

@media (max-width: 1117px){

    .landing-title {
        font-size: 1.6rem; /* Reduce font size for smaller screens */
    }

    .landing-subtitle {
        font-size: 0.85rem; /* Reduce font size for smaller screens */
    }

    .landing-slogan {
        font-size: 1rem; /* Reduce font size for smaller screens */
    }

/* Buttons */
.landing-buttons {
    display: flex;
    align-items: left;

}

.landing-btn {
    padding: 10px 20px; /* Adjust button padding */
    font-size: 14px; /* Reduce font size for smaller screens */
}

/* Search Bar */
.landing-search-bar {
    width: 80%; /* Take full width */
    width: auto; /* Limit search bar width */
    margin: 20px auto; /* Center-align search bar */
}

/* Right Section (Image or Content) */
.landing-right-section {
    width: 50%; /* Take full width */
    align-items: center; /* Center-align content */
}

/* Date and Time */
.landing-date-time {
    font-size: 1rem; /* Reduce font size for smaller screens */
    padding: 10px 20px; /* Adjust padding */
}

#landing-time {
    font-size: 1rem; /* Reduce font size for smaller screens */
}

#landing-date {
    font-size: 1rem; /* Reduce font size for smaller screens */
}

/* Image Slider */
.landing-slider {
    height: 230px; /* Adjust slider height */
}

.landing-slide {
    width: 270px; /* Adjust slide width */
    height: 150px; /* Adjust slide height */
}

.slide-text {
    font-size: 0.4rem; /* Reduce font size for smaller screens */
}

/* Reveal Section */
.landing-reveal-section {
    height: 50px; /* Adjust height for smaller screens */
}

.scrolling-text {
    font-size: 0.8rem; /* Reduce font size for smaller screens */
}

.about-us-container {
    max-width: 90%;
}

.stats-page-container {
    margin-top: 0px;
    min-height: 60vh;
}

.stack-area-left {
    flex-basis: 70%;
    padding: 0px;
    margin-left: 0px;
}
.chart-container {
    min-width: 30%;
    margin-top: 50px;
    margin-bottom: 100px;
    padding: 10px;
}

.chart-container h2{
    margin-bottom: 40px;
}
.stats-card {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 15px;
    text-align: center;
    padding-top: 0px;
  
    /* ✅ Center the card horizontally and vertically */
    left: 20%;
  }

  .chart {
    height: 200px;
    width: 100%;

}
.bar {
    width: 57px;
}
}

@media (max-width:600px){
    #storyCards{
        flex-direction: column;
    }
    
}
/* Responsive Design */
@media (max-width: 768px) {
    .landing-container {
        flex-direction: column;
        text-align: center;
        padding: 0 20px;
        top: 40px;
    }

    .landing-left-section,
    .landing-right-section {
        width: 100%;
    }

    .landing-search-bar {
        justify-content: center;
    }

    .landing-title {
        font-size: 1.5rem; /* Reduce font size for smaller screens */
    }
    
    .landing-subtitle {
        font-size: 0.85rem; /* Reduce font size for smaller screens */
    }
    
    .landing-slogan {
        font-size: 1.2rem; /* Reduce font size for smaller screens */
    }
    
    /* Buttons */
    .landing-buttons {
        display: flex;
        align-items: left;
    
    }
    
    .landing-btn {
        padding: 10px 20px; /* Adjust button padding */
        font-size: 14px; /* Reduce font size for smaller screens */
    }
    
    /* Search Bar */
    .landing-search-bar {
        width: 100%; /* Take full width */
        width: auto; /* Limit search bar width */
        margin: 20px auto; /* Center-align search bar */
    }
    
    /* Right Section (Image or Content) */
    .landing-right-section {
        width: 100%; /* Take full width */
        align-items: center; /* Center-align content */
    }
    
    /* Date and Time */
    .landing-date-time {
        font-size: 18px; /* Reduce font size for smaller screens */
        padding: 10px 20px; /* Adjust padding */
    }
    
    #landing-time {
        font-size: 1.1rem; /* Reduce font size for smaller screens */
    }
    
    #landing-date {
        font-size: 16px; /* Reduce font size for smaller screens */
    }
    
    /* Image Slider */
    .landing-slider {
        height: 300px; /* Adjust slider height */
    }
    
    .landing-slide {
        width: 300px; /* Adjust slide width */
        height: 200px; /* Adjust slide height */
    }
    
    .slide-text {
        font-size: 0.9rem; /* Reduce font size for smaller screens */
    }
    
    /* Reveal Section */
    .landing-reveal-section {
        height: 60px; /* Adjust height for smaller screens */
    }
    
    .about-us-container{
        width: 90%;
    }


    .scrolling-text {
        font-size: 0.9rem; /* Reduce font size for smaller screens */
    }
    .stack-area-right{
        width: 35%;
    }
    .stack-area-left{
        width: 60%;
    }
    .stats-card {
        width: 230px;
        height: 230px;
      }

    .stack-area-left h2 {
        font-size: 40px;
    }
    .stats-page-container{
        width: 95%;
    }
    .chart-container {
        margin-top: 10px;
        padding: 10px;
    }
      .stack-area-left h2 {
        font-size: 32px;
    }

    .stack-area-left p {
        font-size: 14px;
    }

    .stack-area-left button {
        font-size: 14px;
        padding: 10px 20px;
    }

    .bar {
        width: 40px;
    }

    .chart {
        width: 95%;
    }

    /* contact us page */
    .contact-section {
        padding: 4vh 3vw;
        }
        .contact-card {
        width: 85%;
        height: auto;
        padding: 3vh 2vw;
        }
        .chat-bubble {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
        bottom: -1rem;
        right: -1rem;
        }
        .chat2 {
        width: 2rem;
        height: 1.8rem;
        right: 1rem;
        bottom: -0.5rem;
        }
        .dots {
        width: 3rem;
        height: 4rem;
        background-size: 7px 7px;
        opacity: 0.5;
        }
        .dots-left {
        top: 25%;
        left: 1rem;
        }
        .dots-right {
        top: 8%;
        right: 1rem;
        }
        .bg-word {
        font-size: 6vw;
        }

        .chat-popup-wrapper {
            position: fixed;
            left: 50%;
            align-items: center;
            bottom: 1rem;
            width: 80%;
          }
        
          .chat-popup-card {
            width: 95%;
            max-width: 95%;
            padding: 1.25rem 1rem;
            border-radius: 1rem;
          }

          /* footer */
          .newsletter {
            flex-direction: column;
            align-items: center;
            text-align: center;
          }
        
          .newsletter .left {
            flex-direction: column;
            align-items: center;
            gap: 20px;
          }
        
          .newsletter .right {
            flex-direction: column;
            align-items: stretch;
            width: 100%;
            max-width: 350px;
            margin-top: 20px;
          }
        
          .newsletter input[type="email"],
          .newsletter button {
            width: 100%;
          }

          .footer-columns {
            grid-template-columns: 1fr;
            text-align: center;
          }
        
          #footer-columns-contact p {
            justify-content: center;
            text-align: left;
          }
        
          .footer-bottom {
            flex-direction: column;
            align-items: center;
            gap: 10px;
            text-align: center;
          }
        
          .footer-bottom a {
            margin-left: 0;
          }

          /* patners */

          .partners-section {

            padding: 3rem 1rem;

          }

          .partners-title h2 {
            font-size: 1.2rem;
            letter-spacing: 0.6px;
            margin-bottom: 0.3rem;
          }
          
          .partners-title p {
            font-size: 0.85rem;
            overflow: wrap;
          }
          

          .partners-logos-container {

            max-width: 95%;
            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
            padding: 1rem 0;
          }
}

@media (max-width: 480px) {
    .contact-section {
    flex-direction: column;
    padding: 3vh 2vw;
    }
    .contact-card {
    width: 95%;
    height: 40vh;
    padding: 3vh 1.5vw;
    border-radius: 1rem;
    font-size: 0.85rem;
    }
    .contact-card h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    }
    .chat-bubble {
    width: 2rem;
    height: 2rem;
    font-size: 0.85rem;
    bottom: -0.75rem;
    right: -0.75rem;
    }
    .chat2 {
    width: 1.5rem;
    height: 1.3rem;
    right: 0.75rem;
    bottom: -0.4rem;
    }
    .dots {
    width: 2rem;
    height: 3rem;
    background-size: 5px 5px;
    }
    .dots-left {
    top: 20%;
    left: 0.75rem;
    }
    .dots-right {
    top: 5%;
    right: 0.75rem;
    }
    .bg-word {
    font-size: 8vw;
    }

    .chat-popup-wrapper {
        top: 4100px;
        left: 50%;
        bottom: 4rem;
        width: 95%;
      }
    
      .chat-popup-card {
        width: 95%;
        max-width: 95%;
        padding: 1.25rem 1rem;
        border-radius: 1rem;
      }
    
      .chat-popup-card h2 {
        font-size: 1.25rem;
      }
    
      .popup-subtext {
        font-size: 0.8rem;
      }
    
      .chat-popup-card input,
      .chat-popup-card textarea {
        font-size: 0.85rem;
      }
    
      .chat-popup-card button {
        font-size: 0.95rem;
      }

      /* downloads */
      .animated-heading {
        font-size: 1.5rem;
        letter-spacing: 0.06em;
      }

      .downloads-left p{
        font-size: 14px;
      }
    }
    
    
    
    
    /* Add this to your CSS file */
    .tawk-min-container {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        z-index: 9999999 !important;
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
    }
    
    .tawk-min-container iframe {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        z-index: 9999999 !important;
        width: 350px !important;
        height: 500px !important;
        border-radius: 10px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
        border: none !important;
    }
    
    /* Fix for any parent containers */
    body, html, .landing-container, .about-us-container, 
    .stats-page-container, .contact-section {
        overflow: visible !important;
        transform: none !important;
    }