/*  Loader styles end  */
/*
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Matches your clean background */ /*
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensures it stays on top of everything */ /*
    transition: opacity 0.5s ease;
}

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

.loader-logo {
    width: 80px; /* Adjust size as needed */  /*
    margin-bottom: 20px;
    animation: pulse 2s infinite ease-in-out;
}

.loader-text {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--deep-blue);
    letter-spacing: 5px;
}

.loader-text span {
    opacity: 0;
    animation: fadeInOut 2s infinite forwards;
}

/* Staggering the letters */  /*
.loader-text span:nth-child(1) { animation-delay: 0.1s; }
.loader-text span:nth-child(2) { animation-delay: 0.3s; }
.loader-text span:nth-child(3) { animation-delay: 0.5s; }
.loader-text span:nth-child(4) { animation-delay: 0.7s; }
.loader-text span:nth-child(5) { animation-delay: 0.9s; }
.loader-text span:nth-child(6) { animation-delay: 1.1s; }

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Class to hide the loader */  /*
.loader-hidden {
    opacity: 0;
    visibility: hidden;
}   */
/*  Loader styles end  */

:root {
    --deep-blue: #0a7cc3;
    --warm-orange: #FF8C00;
    --white: #ffffff;
}

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

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

.navbar {
    background-color: var(--deep-blue);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 5%;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Logo and Title Styling */
.brand-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    height: 50px; /* Adjust based on your logo size */
    width: auto;
}

.brand-text {
    display: flex;
    flex-direction: column;
    color: var(--white);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.85rem;
    line-height: 1.1;
}

/* Nav Menu */
.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 20px;
}

.nav-menu a {
    color: var(--white);
    text-decoration: none;
    font-size: 0.95rem;
    transition: 0.3s;
}

.nav-menu a:hover {
    color: var(--warm-orange);
}

/* Donate Button */
.donate-btn {
    background-color: var(--warm-orange);
    color: white !important;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
}

.donate-btn:hover {
    background-color: #e67e00;
}

/* Hamburger Logic */
.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background-color: white;
}

/*  New hamburger styles */

/* KEEP your .navbar, .brand-container, and .logo styles exactly as they are */

/* NEW: Add this to handle the button and hamburger together */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Update your .nav-menu to remove the donate button gap logic since it's moved */
.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 20px;
}

/* KEEP your .nav-menu a and .donate-btn styles as they are */

/* UPDATED Responsive Design */
@media (max-width: 1024px) {
    .hamburger { 
        display: block; 
        order: 2; /* This pushes it to the right */
    }

    .donate-btn {
        order: 1; /* This pushes it to the left of the hamburger */
        padding: 8px 15px; /* Slightly smaller for mobile */
        font-size: 0.85rem;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: var(--deep-blue);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        padding: 40px 0;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    .nav-menu.active { 
        left: 0; 
    }

    .nav-menu li { 
        margin: 15px 0; 
    }
}
/* New hamburger styles end */
/* Responsive Design */
@media (max-width: 1024px) {
    .hamburger { display: block; }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: var(--deep-blue);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        padding: 40px 0;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    .nav-menu.active { left: 0; }

    .nav-menu li { margin: 15px 0; }
}

/* Hero Section New  */

.hero-carousel {
    position: relative;
    width: 100%;
    height: 80vh; /* Adjust height as needed */
    overflow: hidden;    
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.slide.active {
    opacity: 1;
}

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

.hero-overlay2 {
    position: absolute;
    top: 50%;
    left: 50%;   
    transform: translate(-50%, -50%);   /* Center the overlay */
    text-align: center;
    color: white;
    background-color: rgba(0,0,0,0.4); /* Semi-transparent black */
    width: 80%;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.hero-overlay2 h1 { font-size: 3rem; margin-bottom: 20px; color: var(--warm-orange); }
.hero-overlay2 p { font-size: 1.5rem; }

/* Buttons */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.3);
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 24px;
    border-radius: 50%;
    z-index: 10;
}
.prev { left: 20px; }
.next { right: 20px; }
.prev:hover, .next:hover { background: var(--warm-orange); }

/* Tracker Dots */
.dots-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.dot {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
}
.dot.active { background: var(--warm-orange); }

/* New Hero Section Ends */

/*  Old Hero Section Begins */


:root {
    --deep-blue: #003366;
    --warm-orange: #FF8C00;
}

.hero {
    position: relative;
    height: 80vh; /* Adjust height as needed */
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
}

/* The Background Image */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('IMAGES/SHO (32).jpg'); /* Replace with your image path */
    background-size: cover;
    background-position: center;
    transition: transform 5s ease-out; /* 5 second zoom duration */
    z-index: 1;
}

/* Opacity Overlay (50% darkness) */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 50% Opacity */
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0 5%;
    object-fit: cover;
}

.hero-content {
    position: relative;
    z-index: 3;
    width: 100%; /* Default for small screens */
}

.hero-content h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-content p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 2rem;
}

/* Large Screen Constraints (3/4 Width) */
@media (min-width: 1024px) {
    .hero-content h1, 
    .hero-content p {
        width: 75%; /* 3/4 width */
    }
}

/* Zoom Class triggered by JS */
.zoom-active {
    transform: scale(1.2);
}

/* Button Styling */
.hero-btns {
    display: flex;
    gap: 15px;
}

.btn-primary {
    background-color: var(--warm-orange);
    color: white;
    padding: 12px 28px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}
.btn-primary:hover {
    background-color: #fad048;
}

.btn-secondary {
    border: 2px solid white;
    color: white;
    padding: 12px 28px;
    text-decoration: none;
    border-radius: 4px;
}
.btn-secondary:hover {
    background-color: rgb(252, 203, 68);
    animation-delay: 0.5s;
}
/*  Old hero section ends  */

/* Welcome Section */
:root {
    --deep-blue: #003366;
    --warm-orange: #FF8C00;
    --light-bg: #f9f9f9;
}

.director-section {
    padding: 60px 10%;
    background-color: var(--white);
}

.section-title {
    text-align: center;
    color: var(--deep-blue);
    font-size: 2.2rem;
    margin-bottom: 50px;
    position: relative;
}

/* Orange underline for the title */
.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--warm-orange);
    margin: 10px auto 0;
}

.director-container {
    display: flex;
    align-items: center;
    gap: 60px;
    background: var(--light-bg);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.director-image {
    flex: 1;
    position: relative;
    max-width: 400px;
}

.director-image img {
    width: 100%;
    border-radius: 10px;
    position: relative;
    z-index: 2;
    display: block;
}

/* Decorative orange box behind image */
.image-accent {
    position: absolute;
    top: -15px;
    left: -15px;
    width: 100px;
    height: 100px;
    background: var(--warm-orange);
    border-radius: 10px;
    z-index: 1;
}

.director-message {
    flex: 1.5;
}

.director-message h3 {
    color: var(--warm-orange);
    margin-bottom: 15px;
    font-size: 1.6rem;
}

.director-message p {
    color: #444;
    line-height: 1.8;
    margin-bottom: 20px;
    font-style: italic;
}

.director-signature {
    margin-top: 30px;
    border-left: 4px solid var(--warm-orange);
    padding-left: 15px;
}

.director-signature strong {
    display: block;
    color: var(--deep-blue);
    font-size: 1.2rem;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .director-container {
        flex-direction: column; /* Stack vertically */
        text-align: center;
        padding: 30px 20px;
    }

    .director-image {
        max-width: 300px;
        margin-bottom: 30px;
    }

    .image-accent {
        left: 50%;
        transform: translateX(-160%); /* Adjust accent for center image */
    }

    .director-signature {
        border-left: none;
        border-top: 2px solid var(--warm-orange);
        padding-left: 0;
        padding-top: 15px;
    }
}
/* Welcome Section Ends */

/* Impact Section */
:root {
    --deep-blue: #003366;
    --warm-orange: #FF8C00;
    --white: #ffffff;
}

.stats-section {
    padding: 80px 5%;
    background-color: #f4f7f9;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-card {
    background: var(--deep-blue);
    padding: 40px 20px;
    border-radius: 12px;
    text-align: center;
    color: var(--white);
    transition: transform 0.3s ease;
    border-bottom: 5px solid var(--warm-orange); /* Warm orange accent */
    box-shadow: 0 10px 20px rgba(0, 51, 102, 0.15);
}

.stat-card:hover {
    transform: translateY(-10px);
}

.stat-number {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--warm-orange); /* Primary focus on the number */
}

.stat-label {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 20px;
    min-height: 50px; /* Keeps cards aligned */
}

.stat-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    font-style: italic;
    transition: color 0.3s;
}

.stat-link:hover {
    color: var(--warm-orange);
    text-decoration: underline;
}

/* Mobile: Each card takes full row */
@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Who Is SHO */
:root {
    --deep-blue: #003366;
    --warm-orange: #FF8C00;
    --text-gray: #444;
}

.who-is-sho {
    padding: 80px 5%;
    background-color: #ffffff;
    text-align: center;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    color: var(--deep-blue);
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.section-subtitle {
    color: var(--text-gray);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 50px;
    line-height: 1.6;
}

/* Pillars Layout */
.pillars-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 50px;
}

.pillar {
    flex: 1;
    padding: 40px 25px;
    background-color: var(--deep-blue);
    color: white;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.pillar:hover {
    background-color: #00254a; /* Slightly darker blue */
}

.pillar-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.pillar h3 {
    color: var(--warm-orange);
    font-size: 1.5rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pillar p {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* Button Styling */
.btn-outline {
    display: inline-block;
    padding: 12px 30px;
    border: 2px solid var(--deep-blue);
    color: var(--deep-blue);
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
}

.btn-outline:hover {
    background-color: var(--deep-blue);
    color: white;
}

/* Responsive: 1 Column on small/medium screens */
@media (max-width: 900px) {
    .pillars-container {
        flex-direction: column;
    }
    
    .pillar {
        width: 100%;
    }
}

/* Who Is SHO Ends */

/* Credibility Section */
:root {
    --deep-blue: #003366;
    --warm-orange: #FF8C00;
    --white: #ffffff;
}

.transparency-section {
    padding: 80px 5%;
    background-color: #f0f4f8; /* Soft blue-grey background */
    text-align: center;
}

.transparency-header h2 {
    color: var(--deep-blue);
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.transparency-header p {
    color: #555;
    max-width: 650px;
    margin: 0 auto 50px;
}

.transparency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.transparency-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.trust-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.transparency-card h3 {
    color: var(--deep-blue);
    margin-bottom: 15px;
}

.transparency-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* CSS Pie Chart */
.chart-box {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.pie-chart {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* 85% Orange, 15% Deep Blue */
    background: conic-gradient(var(--warm-orange) 85%, var(--deep-blue) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Inner white circle for "Donut" look */
.pie-chart::after {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 50%;
}

.chart-label {
    position: relative;
    z-index: 10;
    font-weight: bold;
    color: var(--deep-blue);
    font-size: 1.2rem;
}

.trust-footer {
    margin-top: 30px;
    font-size: 0.9rem;
    color: #888;
}

.trust-footer a {
    color: var(--warm-orange);
    text-decoration: none;
    font-weight: bold;
}

/* Mobile: Cards stack automatically due to auto-fit */

/* Projects Section */
:root {
    --deep-blue: #003366;
    --warm-orange: #FF8C00;
    --card-bg: #ffffff;
    --bg-light: #fdfdfd;
}

.projects-section {
    padding: 80px 5%;
    background-color: var(--bg-light);
    text-align: center;
}

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

.section-title {
    color: var(--deep-blue);
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.section-subtitle {
    color: #666;
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Grid Logic */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on large screens */
    gap: 30px;
    justify-content: center;
}

.project-card {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

.project-img {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: #ddd; /* fallback */
}

.project-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.project-content h3 {
    color: var(--deep-blue);
    margin-bottom: 12px;
    font-size: 1.3rem;
}

.project-content p {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.learn-more {
    color: var(--warm-orange);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    transition: 0.2s;
}

.learn-more span {
    transition: margin-left 0.2s;
}

.learn-more:hover span {
    margin-left: 8px;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */
    }
}

@media (max-width: 600px) {
    .projects-grid {
        grid-template-columns: 1fr; /* 1 per row on mobile */
    }
    
    .section-title {
        font-size: 1.8rem;
    }
}


/* Projects Section Ends */

/* Latest News Section */
:root {
    --deep-blue: #003366;
    --warm-orange: #FF8C00;
    --white: #ffffff;
    --light-grey: #f4f7f9;
}

.news-section {
    padding: 80px 5%;
    background-color: var(--white);
}

.news-header {
    text-align: center;
    margin-bottom: 50px;
}

.news-header h2 {
    color: var(--deep-blue);
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.news-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border: 1px solid #eee;
}

.news-card:hover {
    transform: translateY(-5px);
}

/* Image Wrapper and Zoom Effect */
.news-img-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.news-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-img-wrapper img {
    transform: scale(1.1);
}

.category-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--warm-orange);
    color: white;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
}

.news-content {
    padding: 25px;
}

.news-date {
    font-size: 0.85rem;
    color: #888;
    display: block;
    margin-bottom: 10px;
}

.news-content h3 {
    color: var(--deep-blue);
    font-size: 1.25rem;
    margin-bottom: 15px;
    line-height: 1.4;
}

.news-content p {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.read-more {
    color: var(--deep-blue);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.read-more:hover {
    color: var(--warm-orange);
}

.view-all-news {
    text-align: center;
    margin-top: 50px;
}

.btn-news-outline {
    padding: 12px 30px;
    border: 2px solid var(--deep-blue);
    color: var(--deep-blue);
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    transition: 0.3s;
}

.btn-news-outline:hover {
    background: var(--deep-blue);
    color: white;
}

/* Mobile: Grid handles itself with auto-fit */
/* Testimonials start */
:root {
    --deep-blue: #003366;
    --warm-orange: #FF8C00;
    --light-grey: #f9f9f9;
}

.testimonial-section {
    padding: 80px 5%;
    background-color: #fff;
    position: relative;
}

.testimonial-header {
    text-align: center;
    margin-bottom: 50px;
}

.emoji-icon { font-size: 2.5rem; display: block; margin-bottom: 10px; }
.testimonial-header h2 { color: var(--deep-blue); font-size: 2.2rem; margin: 0; }
.testimonial-header p { color: #666; margin-top: 10px; }

/* Slider Logic */
.testimonial-slider {
    position: relative;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 50px; /* Space for buttons */
}

.testimonial-container {
    overflow: hidden;
}

.testimonial-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 20px; /* Consistent gap */
}

.testimonial-card {
    min-width: calc(33.333% - 14px); /* 3 cards on desktop minus gap */
    background: var(--light-grey);
    padding: 40px 30px;
    border-radius: 15px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.quote-icon, .quote-icon-end {
    font-size: 4rem;
    color: var(--warm-orange);
    opacity: 0.2;
    line-height: 0;
    display: block;
}

.quote-icon { text-align: left; margin-top: 15px; }
.quote-icon-end { text-align: right; margin-bottom: -10px; }

.testimonial-card p {
    font-style: italic;
    color: #444;
    line-height: 1.6;
    margin: 15px 0;
    font-size: 1.05rem;
}

.author-info { margin-top: 20px; }
.author-info strong { display: block; color: var(--deep-blue); font-size: 1.1rem; }
.author-info span { color: var(--warm-orange); font-size: 0.9rem; font-weight: bold; }

/* Nav Buttons */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--deep-blue);
    color: white;
    border: none;
    width: 45px;
    height: 45px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.nav-btn:hover { background: var(--warm-orange); }
.prev { left: 0; }
.next { right: 0; }

/* Mobile Adjustments */
@media (max-width: 900px) {
    .testimonial-card {
        min-width: 100%; /* 1 card on mobile */
    }
    .testimonial-slider {
        padding: 0 40px;
    }
    .nav-btn {
        width: 35px;
        height: 35px;
    }
}


/* CTA Begins */
:root {
    --deep-blue: #003366;
    --warm-orange: #FF8C00;
    --white: #ffffff;
}

.cta-final {
    position: relative;
    padding: 100px 5%;
    background: linear-gradient(135deg, var(--deep-blue) 60%, #012a52 100%);
    color: var(--white);
    text-align: center;
    overflow: hidden;
}

/* Optional: Decorative circle to add some "Warm Orange" energy */
.cta-final::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: var(--warm-orange);
    border-radius: 50%;
    opacity: 0.1;
    z-index: 1;
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.cta-final h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 800;
}

.cta-final p {
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 40px;
    opacity: 0.9;
}

.btn-cta-main {
    display: inline-block;
    background-color: var(--warm-orange);
    color: var(--white);
    padding: 18px 45px;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(255, 140, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s;
}

.btn-cta-main:hover {
    transform: translateY(-5px);
    background-color: #e67e00;
    box-shadow: 0 15px 30px rgba(255, 140, 0, 0.5);
}

.cta-note {
    display: block;
    margin-top: 25px;
    font-size: 0.85rem !important;
    opacity: 0.6 !important;
    font-style: italic;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .cta-final {
        padding: 60px 20px;
    }
    
    .btn-cta-main {
        width: 100%;
        padding: 15px 20px;
    }
}


/* Footer */
:root {
    --midnight-blue: #001a33;
    --deep-blue: #003366;
    --warm-orange: #FF8C00;
    --footer-text: #b3c6d9;
}

.main-footer {
    background-color: var(--midnight-blue);
    color: white;
    position: relative;
    padding-top: 60px;
}

.footer-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, var(--warm-orange), #ffb366);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr;
    gap: 50px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-logo { height: 45px; width: auto; }

.footer-message {
    color: var(--footer-text);
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 0.95rem;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    background: rgba(255, 255, 255, 0.1);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: 0.3s;
    overflow: hidden; /* Ensures image doesn't spill out */
}

/* NEW Styling for the Icon Images */
.social-icon {
    width: 18px;  /* Adjust this based on how big you want the icons to look */
    height: 18px;
    object-fit: contain;
    /* This filter makes black icons look white if you download black ones */
    /* filter: brightness(0) invert(1); */ 
}

.social-links a:hover {
    background: var(--warm-orange);
    transform: translateY(-3px);
}

.footer-col h3 {
    color: var(--warm-orange);
    font-size: 1.2rem;
    margin-bottom: 25px;
    position: relative;
}

.footer-links, .contact-info {
    list-style: none;
    padding: 0;
}

.footer-links li, .contact-info li {
    margin-bottom: 12px;
    color: var(--footer-text);
    font-size: 0.95rem;
}

.footer-links a {
    color: var(--footer-text);
    text-decoration: none;
    transition: 0.2s;
}

.footer-links a:hover {
    color: white;
    padding-left: 5px;
}

.orange-text {
    color: var(--warm-orange) !important;
    font-weight: bold;
}

.footer-map {
    margin-top: 15px;
    filter: grayscale(100%) invert(90%) contrast(90%);
}

.footer-bottom {
    margin-top: 60px;
    padding: 20px 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    font-size: 0.85rem;
    color: #667a8f;
}

@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer-brand, .social-links {
        justify-content: center;
    }

    .footer-col h3 {
        margin-bottom: 15px;
    }
}

/* About hero */
.orange-keyword {
    color: var(--warm-orange);
    font-weight: bold;
    border-right: 3px solid var(--warm-orange); /* The typing cursor */
    padding-right: 5px;
    white-space: nowrap;
    animation: blink 0.75s step-end infinite;
}

/* Cursor blinking animation */
@keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: var(--warm-orange); }
}

.typewriter-text {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.8;
    min-height: 3.6em; /* Prevents layout jump when text is deleted */
}

/* Who we are  */
:root {
    --deep-blue: #003366;
    --warm-orange: #FF8C00;
}

.who-we-are {
    padding: 100px 5%;
    background-color: #ffffff;
    overflow: hidden;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Visual Side Styling */
.about-visual {
    position: relative;
}

.image-stack {
    position: relative;
    z-index: 1;
}

.main-img {
    width: 100%;
    border-radius: 20px;
    display: block;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.orange-accent-box {
    position: absolute;
    top: -30px;
    left: -30px;
    width: 150px;
    height: 150px;
    background-color: var(--warm-orange);
    opacity: 0.1;
    border-radius: 20px;
    z-index: 0;
}

.stat-badge {
    position: absolute;
    bottom: -30px;
    right: 20px;
    background: var(--warm-orange);
    color: white;
    padding: 25px 35px;
    border-radius: 15px;
    text-align: center;
    z-index: 3;
    box-shadow: 0 10px 30px rgba(255, 140, 0, 0.4);
}

.stat-badge h3 {
    font-size: 3rem;
    margin: 0;
    font-weight: 800;
}

.stat-badge span {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Info Side Styling */
.top-label {
    color: var(--warm-orange);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
}

.about-info h2 {
    color: var(--deep-blue);  
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 25px;
}

.intro-text {
    font-size: 1.15rem;
    color: #333;
    font-weight: 600;
    margin-bottom: 20px;
}

.about-info p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
}

.info-pillars {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pillar {
    display: flex;
    gap: 20px;
}

.pillar-icon {
    width: 35px;
    height: 35px;
    background: rgba(255, 140, 0, 0.1);
    color: var(--warm-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.pillar-content h4 {
  /*  color: var(--deep-blue);  */
    color: #dcdada;
    margin: 0 0 5px 0;
}

.pillar-content p {
    color: #e6e2e2;
    margin: 0;
    font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .about-container {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }
    .pillar {
        text-align: left;
    }
    .stat-badge {
        right: 50%;
        transform: translateX(50%);
    }
}

/* Mission starts */

.mission-vision {
    padding: 80px 5%;
    background-color: #ffffff;
}

.mv-grid {
    display: grid;
    /* 4 columns on desktop, 2 on tablet, 1 on mobile */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.mv-card {
    text-align: center;
    padding: 40px 25px;
    background: #fff;
    border-radius: 20px;
    /* Subtle border instead of heavy shadow for a "light" feel */
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.mv-card:hover {
    border-color: var(--warm-orange);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.mv-icon-box {
    width: 70px;
    height: 70px;
    background: rgba(255, 140, 0, 0.1); /* Very light orange background */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}

.mv-icon {
    font-size: 2rem;
}

.mv-card h3 {
    color: var(--deep-blue);
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.mv-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* Responsive adjustment for 4 columns */
@media (max-width: 1100px) {
    .mv-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .mv-grid {
        grid-template-columns: 1fr;
    }
}
/* Mission ends  */

/* What we do starts */
.what-we-do {
    padding: 100px 5%;
    background-color: #f9f9f9;
    text-align: center;
}

.section-header h2 {
    color: #003366; /* Deep Blue */
    font-size: 2.8rem;
    margin: 10px 0 20px;
}

.section-header p {
    max-width: 750px;
    margin: 0 auto 60px;
    color: #666;
    line-height: 1.8;
}

/* 3-Column Grid for large screens */
.do-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.do-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid #eee;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.do-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    border-color: #FF8C00; /* Warm Orange */
}

/* Small Round Image at Top Centre */
.do-image-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 25px;
    border: 3px solid #FF8C00;
    padding: 3px;
    background: #fff;
}

.do-image-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.do-card h3 {
    color: #003366;
    font-size: 1.35rem;
    margin-bottom: 15px;
}

.do-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
}

.card-link {
    color: #FF8C00;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: auto; /* Pushes link to bottom of card */
}

/* The Huge Button at the Bottom */
.do-footer {
    margin-top: 70px;
}

.btn-full-view {
    display: inline-block;
    background: #003366;
    color: #fff;
    padding: 18px 50px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(0,51,102,0.2);
}

.btn-full-view:hover {
    background: #FF8C00;
    transform: scale(1.05);
}

/* Tablet: 2 Columns */
@media (max-width: 992px) {
    .do-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 Column */
@media (max-width: 600px) {
    .do-grid {
        grid-template-columns: 1fr;
    }
}


/* How we work */
.how-work {
    padding: 100px 5%;
    background-color: #ffffff;
}

.work-row {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-bottom: 100px;
}

.work-row.reverse {
    flex-direction: row-reverse;
}

.work-image {
    flex: 1;
}

.work-image img {
    width: 100%;
    border-radius: 30px;
    box-shadow: 25px 25px 0px rgba(255, 140, 0, 0.1); /* Subtle Orange Shadow */
    display: block;
}

.work-text {
    flex: 1;
}

.step-number {
    font-size: 4rem;
    font-weight: 900;
    color: rgba(0, 51, 102, 0.05); /* Very faint Deep Blue */
    line-height: 1;
    margin-bottom: -30px; /* Overlap effect with title */
    font-family: sans-serif;
}

.work-text h3 {
    color: var(--deep-blue);
    font-size: 2rem;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.work-text p {
    color: #555;
    line-height: 1.8;
    font-size: 1.1rem;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .work-row, .work-row.reverse {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 70px;
        text-align: center;
    }
    
    .work-image img {
        box-shadow: 15px 15px 0px rgba(255, 140, 0, 0.1);
        width: 80%;
        height: auto;
    }
}

/* Core Values */
/* Container Layout */
.values-wrapper {
    display: flex;
    max-width: 1100px;
    margin: 40px auto;
    gap: 40px;
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Sidebar Navigation */
.values-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.v-btn {
    padding: 18px 25px;
    border: 2px solid #f0f0f0;
    background: #fff;
    color: #003366; /* Deep Blue */
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    border-radius: 12px;
    transition: 0.3s ease;
    white-space: nowrap;
}

.v-btn.active {
    background: #FF8C00; /* Warm Orange */
    border-color: #FF8C00;
    color: #fff;
    box-shadow: 0 8px 15px rgba(255, 140, 0, 0.2);
}

/* Content Area */
.values-content-area {
    flex: 3;
    padding-left: 40px;
    border-left: 1px solid #eee;
    min-height: 250px;
    display: flex;
    align-items: center;
}

.v-panel {
    display: none;
    animation: slideIn 0.4s ease forwards;
}

.v-panel.active {
    display: block;
}

.v-panel h3 {
    color: #003366;
    font-size: 2rem;
    margin-bottom: 20px;
}

.v-panel p {
    color: #555;
    line-height: 1.8;
    font-size: 1.1rem;
}

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

/* SMALL SCREEN SETTINGS */
@media (max-width: 768px) {
    .values-wrapper {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .values-nav {
        flex-direction: row; /* Align horizontal */
        overflow-x: auto;   /* Enable scroll */
        padding-bottom: 15px;
        border-right: none;
        -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
        scroll-snap-type: x mandatory;
    }

    .v-btn {
        flex: 0 0 auto; /* Prevent buttons from shrinking */
        scroll-snap-align: start;
    }

    /* Hide scrollbar for a cleaner look */
    .values-nav::-webkit-scrollbar {
        display: none;
    }

    .values-content-area {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid #eee;
        padding-top: 25px;
    }
}

/* scroll progress */
/* Progress Bar Styles */
.nav-progress-container {
    display: none; /* Hidden on Desktop */
    width: 100%;
    height: 4px;
    background: #f0f0f0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 2px;
}

.nav-progress-bar {
    height: 100%;
    background: #FF8C00; /* Warm Orange */
    width: 0%; /* Starts at 0 */
    border-radius: 2px;
    transition: width 0.1s ease-out;
}

@media (max-width: 768px) {
    .values-nav {
        position: relative; /* Needed for the absolute progress bar */
        padding-bottom: 25px; /* Extra space for the bar */
    }
    
    .nav-progress-container {
        display: block; /* Show only on Mobile */
    }
}


/* Timelines start */
.timeline-journey {
    padding: 100px 5%;
    background-color: #fff;
}

.timeline-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 50px auto 0;
    padding: 20px 0;
}

/* The Vertical Line */
.timeline-wrapper::after {
    content: '';
    position: absolute;
    width: 3px;
    background-color: #FF8C00; /* Warm Orange */
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1.5px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    box-sizing: border-box;
    margin-bottom: 40px;
}

/* The Dots */
.timeline-dot {
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: #fff;
    border: 4px solid #003366; /* Deep Blue */
    top: 20px;
    border-radius: 50%;
    z-index: 1;
}

/* Alternating Sides */
.timeline-item:nth-child(odd) { left: 0; text-align: right; }
.timeline-item:nth-child(even) { left: 50%; text-align: left; }

.timeline-item:nth-child(even) .timeline-dot { left: -10px; }

.timeline-date {
    font-size: 1.5rem;
    font-weight: 800;
    color: #003366;
    margin-bottom: 10px;
}

.timeline-content {
    padding: 20px 30px;
    background-color: #f9f9f9;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.timeline-content h3 {
    margin-top: 0;
    color: #FF8C00;
    font-size: 1.2rem;
}

.timeline-content p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* RESPONSIVE: Mobile Layout */
@media (max-width: 768px) {
    .timeline-wrapper::after { left: 31px; } /* Move line to left */
    
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
        text-align: left !important;
    }

    .timeline-item:nth-child(even) { left: 0; }

    .timeline-dot {
        left: 21px !important;
        right: auto;
    }
}

/* Call to action on about page */
.about-cta {
    padding: 100px 5%;
    background-color: #003366; /* Deep Blue */
    position: relative;
    overflow: hidden;
    text-align: center;
    color: white;
}

/* Subtle orange glow effect in the background */
.cta-overlay {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.15) 0%, rgba(0, 51, 102, 0) 70%);
    pointer-events: none;
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.subtitle-tag.dark {
    color: #FF8C00; /* Warm Orange */
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
}

.about-cta h2 {
    font-size: 2.8rem;
    margin-bottom: 25px;
    line-height: 1.2;
}

.about-cta p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* Button Group Styling */
.cta-button-group {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-primary {
    background-color: #FF8C00;
    color: white;
    padding: 18px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s ease;
    border: 2px solid #FF8C00;
}

.btn-primary:hover {
    background-color: transparent;
    color: white;
    transform: translateY(-3px);
}

.btn-outline-white {
    background-color: transparent;
    color: white;
    padding: 18px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    border: 2px solid white;
    transition: 0.3s ease;
}

.btn-outline-white:hover {
    background-color: white;
    color: #003366;
    transform: translateY(-3px);
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .cta-button-group {
        flex-direction: column;
    }
    .about-cta h2 {
        font-size: 2rem;
    }
}

/* Label footer */
.footer-bottom {
    padding: 30px 5%;
    background-color: #001a33; /* A very deep blue to ground the page */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-socket-centered {
    display: flex;
    flex-direction: column; /* Stacks the two lines */
    align-items: center;    /* Centers them horizontally */
    justify-content: center;
    gap: 10px;              /* Space between the lines */
    text-align: center;
}

.footer-socket-centered p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5); /* Subtle grey so it doesn't distract */
    letter-spacing: 0.5px;
}

.developer-credit {
    font-size: 0.8rem;
    text-transform: uppercase; /* Makes the credit look like a professional tag */
    letter-spacing: 1px;
}

.developer-credit a {
    color: #FF8C00; /* Your Warm Orange theme color */
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.developer-credit a:hover {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 140, 0, 0.6);
}

/* Projects hero starts */
.projects-hero {
    position: relative;
    padding: 160px 5% 120px;
    min-height: 60vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #4388f0; /* Fallback color */
}

/* Background Image Styling */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps image from stretching */
    filter: brightness(0.6); /* Dims the image slightly */
}

/* Overlay for Text Readability */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 51, 102, 0.5)); 
    z-index: 2;
}

.hero-relative {
    position: relative;
    z-index: 3; /* Places text above image and overlay */
    text-align: center;
    color: white;
}

.projects-hero .top-tag {
    background: #FF8C00;
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 25px;
}

.projects-hero h1 {
    font-size: 3.5rem;
    color: white;
    max-width: 900px;
    margin: 0 auto 25px;
    line-height: 1.1;
}

.projects-hero .accent-text {
    color: #FF8C00;
}

.projects-hero p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 750px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* Hero Stats Styling */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px); /* Modern "Glass" effect */
    padding: 30px;
    border-radius: 20px;
    max-width: 800px;
    margin: 40px auto 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-item h4 {
    font-size: 2.5rem;
    color: #FF8C00;
    margin-bottom: 5px;
    font-weight: 800;
}

.stat-item span {
    font-size: 0.85rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .projects-hero h1 { font-size: 2.4rem; }
    .hero-stats { 
        flex-direction: column; 
        gap: 30px; 
        padding: 20px;
    }
}

/* Intro to Projects */
.approach-intro {
    padding: 100px 5%;
    background-color: #ffffff;
}

.approach-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Text side is slightly wider */
    gap: 80px;
    align-items: center;
}

.label-accent {
    color: #FF8C00;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 15px;
}

.approach-text h2 {
    color: #003366;
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 25px;
}

.lead-p {
    font-size: 1.25rem;
    color: #333;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.5;
}

.approach-text p {
    color: #666;
    line-height: 1.8;
}

/* Right side feature boxes */
.approach-features {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.feature-item {
    display: flex;
    gap: 20px;
    padding: 25px;
    background: #f9f9f9;
    border-radius: 15px;
    border-left: 4px solid #FF8C00; /* Orange accent stripe */
    transition: transform 0.3s ease;
}

.feature-item:hover {
    transform: translateX(10px);
}

.feature-icon {
    font-size: 2rem;
}

.feature-info h4 {
    color: #003366;
    margin: 0 0 5px 0;
    font-size: 1.1rem;
}

.feature-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #777;
    line-height: 1.4;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .approach-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .approach-text h2 {
        font-size: 2rem;
    }
}

/* Project Highlights section*/
.projects-grid-section {
    padding: 100px 5%;
    background: #f8fafd;
}

.section-header-centered {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.projects-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* Card Core Design */
.project-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}

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

.card-media {
    height: 230px;
    position: relative;
    overflow: hidden;
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The Impact Ribbon */
.impact-ribbon {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #FF8C00;
    color: white;
    padding: 6px 15px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* No-Photo Placeholders */
.icon-style {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #003366;
}

.no-photo-blue .icon-style { background: linear-gradient(135deg, #003366, #005bb5); }
.no-photo-dark .icon-style { background: linear-gradient(135deg, #222, #444); }
.no-photo-orange .icon-style { background: linear-gradient(135deg, #FF8C00, #ffae42); }

.emoji-icon {
    font-size: 4rem;
}

/* Content Area */
.card-content {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.project-category {
    font-size: 0.75rem;
    color: #FF8C00;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

.card-content h3 {
    font-size: 1.4rem;
    color: #003366;
    margin-bottom: 15px;
}

.card-content p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
}

/* Objectives List */
.objectives {
    background: #fdf6ee;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.objectives strong {
    font-size: 0.85rem;
    color: #003366;
}

.objectives ul {
    margin: 10px 0 0 15px;
    padding: 0;
    font-size: 0.85rem;
    color: #555;
}

/* Buttons */
.support-btn {
    margin-top: auto;
    text-align: center;
    background: #003366;
    color: white;
    padding: 12px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

.support-btn:hover {
    background: #FF8C00;
}

/* MEGA CTA */
.mega-cta-box {
    background: #003366;
    padding: 60px;
    border-radius: 30px;
    text-align: center;
    color: white;
}

.mega-donate-btn {
    display: inline-block;
    margin-top: 30px;
    background: #FF8C00;
    color: white;
    padding: 20px 40px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.3s;
}

.mega-donate-btn:hover {
    transform: scale(1.05);
    background-color: rgb(34, 199, 12);
}

/* Responsive */
@media (max-width: 768px) {
    .projects-container { grid-template-columns: 1fr; }
}

.no-photo-green .icon-style-green { background: linear-gradient(135deg, #1b5e20, #4caf50);}

/* Process starts */
.implementation-cycle {
    padding: 100px 5%;
    background-color: #ffffff;
    overflow: hidden;
}

.cycle-wrapper {
    position: relative;
    max-width: 900px;
    height: 600px; /* Needed for the circular layout */
    margin: 80px auto 0;
}

/* The Central Hub */
.cycle-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background: #003366;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 10;
    box-shadow: 0 0 30px rgba(0, 51, 102, 0.2);
    border: 8px solid #f0f7ff;
}

.cycle-center span {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Individual Steps */
.cycle-step {
    position: absolute;
    width: 320px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.step-icon {
    background: #FF8C00;
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3);
}

.step-text h4 {
    color: #003366;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.step-text p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}
.center-logo {
    width: 75px;
    height: 75px;
    background: #f0f7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #003366;
    font-weight: bold;
}

/* Positioning steps in a circle */
.step-1 { top: 0; left: 50%; transform: translateX(-50%); text-align: center; flex-direction: column; align-items: center; }
.step-2 { top: 50%; right: 0; transform: translateY(-50%); }
.step-3 { bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; flex-direction: column; align-items: center; }
.step-4 { top: 50%; left: 0; transform: translateY(-50%); text-align: right; flex-direction: row-reverse; }

/* RESPONSIVE: Tablet & Mobile */
@media (max-width: 992px) {
    .cycle-wrapper {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .cycle-center {
        position: relative;
        top: 0; left: 0;
        transform: none;
        margin: 0 auto 40px;
    }

    .cycle-step {
        position: relative;
        top: 0; left: 0; right: 0;
        transform: none;
        width: 100%;
        text-align: left !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        background: #f9f9f9;
        padding: 20px;
        border-radius: 15px;
    }
}

/* carousel style */

 .carousel-inner {
    border-radius: 8px; /* Optional: adds rounded corners for a softer look */
    box-shadow: 0 4px 15px rgba(0, 51, 102, 0.1); /* Optional: adds a subtle shadow for depth */
    margin-bottom: 10px;
  }
/* This applies only to large screens */
@media (min-width: 992px) {
  .carousel-inner {
    max-width: 500px; /* Adjust this to match your 'small screen' look */
    margin: 0 auto;  /* This centers the carousel on the page */
    text-align: center; /* Vertically centers the content */
    border-radius: 8px; /* Optional: adds rounded corners for a softer look */
    box-shadow: 0 4px 15px rgba(0, 51, 102, 0.1); /* Optional: adds a subtle shadow for depth */
    margin-bottom: 10px;
  }
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: orange; /* Semi-transparent background */
  border-radius: 50%; /* Make it circular */
  width: 40px; /* Increase size */
  height: 40px; /* Increase size */
}

/* Focus areas */
.reach-box {
    background: #f0f7ff;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    border: 1px dashed #003366;
    margin-bottom: 10px;
}
.region-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}
.region-tags span {
    background: white;
    color: #003366;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* How donations are used */
.donation-transparency {
    padding: 80px 5%;
    background-color: #f0f7ff; /* Soft blue background to stand out */
    border-radius: 40px;
    margin: 40px 20px;
}

.transparency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.usage-card {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

.usage-card:hover {
    transform: translateY(-5px);
}

.percentage-circle {
    width: 80px;
    height: 80px;
    background: #FF8C00; /* SHO Orange */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 auto 20px;
}

.percentage-circle.alt { background: #003366; } /* SHO Navy */
.percentage-circle.alt-2 { background: #666; }

.usage-card h4 {
    color: #003366;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.usage-card p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
}

.transparency-footer {
    text-align: center;
    margin-top: 40px;
    color: #003366;
    font-size: 0.9rem;
}

/* Call to action projects page */
.final-project-cta {
    padding: 100px 5%;
    background: #fff;
}

.cta-card-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background: #f8fafd;
    padding: 60px;
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0, 51, 102, 0.05);
}

.cta-path-card {
    flex: 1;
    text-align: center;
}

.cta-path-card h3 {
    color: #003366;
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.cta-path-card p {
    color: #666;
    margin-bottom: 25px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

/* The "OR" Circle */
.cta-divider {
    position: relative;
    height: 100px;
    width: 2px;
    background: #e0e0e0;
}

.cta-divider span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #f8fafd;
    padding: 10px;
    color: #999;
    font-weight: 700;
    font-size: 0.8rem;
}

/* Buttons */
.cta-btn {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

.cta-btn.orange { background: #FF8C00; color: white; }
.cta-btn.navy { background: #003366; color: white; }

.cta-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

/* Responsive */
@media (max-width: 768px) {
    .cta-card-wrapper { flex-direction: column; padding: 40px 20px; }
    .cta-divider { height: 2px; width: 100px; margin: 20px 0; }
}


/* Involve hero section */
/* GET INVOLVED HERO */
.get-involved-hero {
    padding: 120px 5% 80px;
    background: linear-gradient(135deg, #7276a4 0%, #f0f7ff 100%);
    overflow: hidden;
}

.hero-flex {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-text {
    flex: 1;
}

.hero-text h1 {
    font-size: 3.5rem;
    color: #003366;
    line-height: 1.1;
    margin: 20px 0;
}

.accent-text {
    color: #FF8C00;
}

.hero-text p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 35px;
    line-height: 1.6;
}

/* Buttons */
.hero-btns {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

.btn-main {
    background: #FF8C00;
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.btn-outline {
    border: 2px solid #003366;
    color: #003366;
    padding: 13px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.btn-main:hover { background: #e67e00; transform: translateY(-3px); }
.btn-outline:hover { background: #003366; color: white; transform: translateY(-3px); }

/* Mini Stats */
.hero-mini-stats {
    display: flex;
    gap: 40px;
    border-top: 1px solid #ddd;
    padding-top: 30px;
}

.mini-stat strong {
    display: block;
    font-size: 1.5rem;
    color: #003366;
}

.mini-stat span {
    font-size: 0.85rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Image Wrapper */
.hero-image-wrapper {
    flex: 1;
    position: relative;
}

.main-img-card {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
    transform: rotate(2deg); /* Adds a playful, modern tilt */
}

.main-img-card img {
    width: 100%;
    display: block;
}

.floating-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: white;
    padding: 15px 25px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 992px) {
    .hero-flex {
        flex-direction: column;
        text-align: center;
    }
    .hero-text h1 { font-size: 2.5rem; }
    .hero-btns { justify-content: center; }
    .hero-mini-stats { justify-content: center; }
    .main-img-card { transform: rotate(0); }
}


/* Why your support matters start */
.why-it-matters {
    padding: 100px 5%;
    background-color: #ffffff;
}

.impact-reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.reason-card {
    background: #fcfcfc;
    padding: 50px 40px;
    border-radius: 25px;
    border: 1px solid #eee;
    text-align: center; /* Centering the icons and text */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Keeps buttons at the bottom */
    transition: all 0.4s ease;
}

.reason-card:hover {
    background: #ffffff;
    border-color: #FF8C00;
    box-shadow: 0 20px 40px rgba(0, 51, 102, 0.08);
    transform: translateY(-10px);
}

.reason-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.reason-card h4 {
    color: #003366;
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.reason-card p {
    color: #666;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Button Styling within Cards */
.card-footer {
    margin-top: auto;
}

.action-link {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: 0.3s;
    width: 100%; /* Makes buttons uniform width */
}

.btn-orange { background: #FF8C00; color: white; }
.btn-navy { background: #003366; color: white; }
.btn-outline { border: 2px solid #003366; color: #003366; }

.action-link:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Quote Box Styling */
.emotional-quote-box {
    margin-top: 80px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 50px 40px;
    background: #003366;
    color: white;
    border-radius: 30px;
}

.emotional-quote-box blockquote {
    font-size: 1.6rem;
    font-style: italic;
    margin-bottom: 20px;
    line-height: 1.4;
}

.emotional-quote-box cite {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: #FF8C00;
}

/* Trust section start*/
.trust-transparency {
    padding: 100px 5%;
    background-color: #f8fafd; /* Very light professional blue */
}

/* Big Stat Section */
.transparency-hero-stat {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    margin-bottom: 60px;
    gap: 40px;
    border-left: 8px solid #FF8C00; /* SHO Orange accent */
}

.stat-circle {
    background: #003366;
    color: white;
    min-width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stat-circle .number {
    font-size: 2.5rem;
    font-weight: 800;
}

.stat-circle .label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-text h3 {
    color: #003366;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

/* Accountability Pillars */
.accountability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.trust-card {
    background: transparent;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #dce4ed;
    transition: 0.3s;
}

.trust-card:hover {
    border-color: #FF8C00;
    background: white;
}

.trust-icon {
    font-size: 2rem;
    color: #FF8C00;
    margin-bottom: 20px;
}

.trust-card h4 {
    color: #003366;
    margin-bottom: 15px;
    font-weight: 700;
}

.trust-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

.audit-notice {
    text-align: center;
    margin-top: 50px;
    font-size: 0.9rem;
    color: #003366;
}

.audit-notice a {
    color: #FF8C00;
    font-weight: 700;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .transparency-hero-stat {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }
}


/*  Recommendations start*/
.credentials-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #dce4ed;
    text-align: center;
}

.credentials-section h4 {
    color: #003366;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.credentials-subtitle {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 30px;
}

.recommendation-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.doc-badge {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 10px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.doc-badge i {
    color: #FF8C00; /* SHO Orange */
    font-size: 1.1rem;
}

.doc-badge span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #003366;
}

.doc-badge:hover {
    border-color: #FF8C00;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}


/*  Onboarding section starts */
.pathways-section {
    padding: 100px 5%;
    background: #ffffff;
}

.pathway-flex {
    display: flex;
    align-items: center;
    gap: 80px;
}

/* Image Animation Logic */
.pathway-visual {
    flex: 1.2;
    position: relative;
}

.image-composite {
    position: relative;
    display: flex;
    align-items: center;
}

.img-base {
    width: 75%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.floating-container {
    position: absolute;
    right: 0;
    height: 100%;
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.img-float {
    width: 100%;
    border-radius: 15px;
    border: 5px solid #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* 3cm is approx 115px. We use translateY for the movement */ /*
.float-up {
    animation: moveUp 8s ease-in-out infinite;
}

.float-down {
    animation: moveDown 8s ease-in-out infinite;
}

@keyframes moveUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-115px); }
}

@keyframes moveDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(115px); }
}
*/
/* Pathway Content Styling */
.pathway-content {
    flex: 1;
}

.step-list {
    margin: 40px 0;
}

.step {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.step-number {
    font-size: 1.2rem;
    font-weight: 800;
    color: #FF8C00;
    background: rgba(255, 140, 0, 0.1);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.step-info h4 {
    color: #003366;
    margin-bottom: 5px;
}

.step-info p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Partner Box */
.partner-cta-box {
    background: #f8fafd;
    padding: 30px;
    border-radius: 20px;
    border-left: 5px solid #003366;
}

.partner-cta-box h4 { color: #003366; margin-bottom: 10px; }
.partner-cta-box p { font-size: 0.9rem; color: #555; margin-bottom: 15px; }

.partner-link {
    color: #FF8C00;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

.partner-link:hover { text-decoration: underline; margin-left: 5px; }

/* Responsive */
@media (max-width: 992px) {
    .pathway-flex { flex-direction: column; }
    .img-base { width: 100%; }
  /*  .floating-container { display: none; } /* Hide complex animation on mobile for speed */ 
}

/* Volunteer Form Section */
.engagement-form-section {
    padding: 100px 5%;
    background-color: #fcfcfc;
}

.form-wrapper {
    max-width: 900px;
    margin: 50px auto 0;
    background: #ffffff;
    padding: 60px;
    border: 1px solid #dce4ed; /* Serious, formal border */
    border-radius: 8px; /* Professional, less round */
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #003366;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input, 
.form-group select, 
.form-group textarea {
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: #003366;
    background-color: #f8fafd;
}

.form-footer {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
    text-align: center;
}

.privacy-note {
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 25px;
}

.btn-submit-official {
    background: #003366; /* Navy signals more authority than Orange here */
    color: #fff;
    padding: 18px 45px;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-submit-official:hover {
    background: #002244;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-group.full-width { grid-column: span 1; }
    .form-wrapper { padding: 30px; }
}


/* Advocacy section */
.advocacy-section {
    padding: 60px 5% 100px;
    background-color: #fcfcfc;
}

.advocacy-card {
    background: #003366; /* Deep Navy - signals Authority */
    color: #ffffff;
    padding: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.advocacy-content {
    flex: 2;
}

.tag-sm {
    color: #FF8C00;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.advocacy-content h3 {
    font-size: 2rem;
    margin: 15px 0;
}

.advocacy-content p {
    color: #dce4ed;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 600px;
}

.advocacy-actions {
    display: flex;
    gap: 30px;
}

.adv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}

.adv-item i {
    color: #FF8C00;
}

/* Social Links Side */
.advocacy-cta {
    flex: 1;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 12px;
}

.advocacy-cta p {
    font-size: 0.85rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.social-links-row {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-links-row {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icon {
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s;
    overflow: hidden; /* Keeps the image inside the circle */
}

/* NEW: Ensures your icons are sized correctly inside the buttons */
.social-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    /* Optional: Uncomment the line below to turn black icons into white icons */
    /* filter: brightness(0) invert(1); */
}

.social-icon:hover {
    background: #FF8C00;
    border-color: #FF8C00;
}

/* Hover effect for the image itself */
.social-icon:hover .social-img {
    transform: scale(1.1);
    transition: 0.3s;
}

.social-icon:hover {
    background: #FF8C00;
    border-color: #FF8C00;
}

/* Mobile Friendly */
@media (max-width: 992px) {
    .advocacy-card {
        flex-direction: column;
        padding: 40px;
        text-align: center;
    }
    .advocacy-actions {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .advocacy-content p {
        margin-left: auto;
        margin-right: auto;
    }
}


/* advocacy continues */

/* CTA section */
.final-cta-section {
    padding: 100px 5%;
    background-color: #fcfcfc;
}

.cta-box-full {
    position: relative;
    background: linear-gradient(rgba(0, 51, 102, 0.7), rgba(0, 51, 102, 0.7)), 
                url('IMAGES/Home.webp'); /* Use a serious, high-quality field photo */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* This creates the professional 'Parallax' effect */
    padding: 80px 40px;
    border-radius: 20px;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
}

.cta-overlay-content h2 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    font-weight: 800;
}

.cta-overlay-content p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.6;
    color: #dce4ed;
}

.cta-final-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-cta-primary {
    background: #FF8C00;
    color: white;
    padding: 18px 40px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-cta-secondary {
    background: transparent;
    color: white;
    padding: 16px 40px;
    border: 2px solid white;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-cta-primary:hover {
    background: #e67e00;
    transform: translateY(-3px);
}

.btn-cta-secondary:hover {
    background: white;
    color: #003366;
    transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 768px) {
    .cta-overlay-content h2 { font-size: 2rem; }
    .cta-final-btns { flex-direction: column; }
    .cta-box-full { padding: 60px 20px; background-attachment: scroll; } /* Fixed bg can be glitchy on mobile */
}


/* FAQs of involvement */
.get-involved-faq {
    padding: 80px 5%;
    background-color: #ffffff;
}

.faq-accordion-container {
    max-width: 800px;
    margin: 40px auto 0;
}

.faq-item {
    border-bottom: 1px solid #dce4ed;
    margin-bottom: 10px;
}

.faq-question {
    width: 100%;
    padding: 20px 10px;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #003366;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s;
}

.faq-question:hover {
    color: #FF8C00;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: #fcfcfc;
}

.faq-answer p {
    padding: 0 10px 20px;
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Logic for opening the accordion (requires tiny JS below) */
.faq-item.active .faq-answer {
    max-height: 200px; /* Adjust based on content length */
}

.faq-item.active .faq-question {
    color: #FF8C00;
}

.faq-item.active .icon {
    transform: rotate(45deg);
    display: inline-block;
}


/* Contact us Hero section */
.contact-hero {
    padding: 120px 5% 80px;
    background: linear-gradient(135deg, #003366 0%, #001a33 100%);
    color: #ffffff;
    text-align: center;
}

.contact-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.contact-hero h1 {
    font-size: 3rem;
    font-weight: 800;
    margin: 20px 0;
    letter-spacing: -1px;
}

.contact-hero p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #dce4ed;
    margin-bottom: 40px;
}

/* Quick Stats Bar - Adds a touch of professionalism */
.contact-quick-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.q-stat {
    text-align: left;
}

.q-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #FF8C00; /* SHO Orange accent */
    margin-bottom: 5px;
    font-weight: 700;
}

.q-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .contact-hero h1 { font-size: 2.2rem; }
    .contact-quick-stats { flex-direction: column; gap: 20px; text-align: center; }
    .q-stat { text-align: center; }
}


/* Main contact form styling */
.contact-interface {
    padding: 100px 5%;
    background: #ffffff;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Form is wider than details */
    gap: 60px;
    align-items: start;
}

/* Form Styling */
.contact-form-container h3 {
    color: #003366;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.contact-form-container p {
    color: #666;
    margin-bottom: 30px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-item {
    margin-bottom: 20px;
}

.form-item label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #003366;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.form-item input, 
.form-item select, 
.form-item textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #dce4ed;
    border-radius: 4px;
    font-size: 1rem;
}

.btn-send-message {
    background: #003366;
    color: white;
    border: none;
    padding: 15px 40px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.3s;
}

.btn-send-message:hover {
    background: #FF8C00;
    transform: translateY(-2px);
}

/* Sidebar Styling */
.contact-details-sidebar {
    background: #f8fafd;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #dce4ed;
}

.detail-card {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.detail-icon {
    font-size: 1.5rem;
}

.detail-text h4 {
    color: #003366;
    font-size: 1rem;
    margin-bottom: 5px;
}

.detail-text p {
    font-size: 0.9rem;
    color: #555;
    margin: 2px 0;
}

.verification-box {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #dce4ed;
    font-size: 0.8rem;
    color: #888;
    font-style: italic;
}

/* Responsive */
@media (max-width: 992px) {
    .contact-grid { grid-template-columns: 1fr; }
}


/* Invitation Section */
.alignment-statement {
    padding: 60px 5% 20px;
    text-align: center;
    background-color: #ffffff;
}

.statement-box {
    max-width: 800px;
    margin: 0 auto;
}

.tag-accent {
    color: #FF8C00;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.alignment-statement h2 {
    color: #003366;
    margin: 15px 0;
    font-size: 2rem;
}

.alignment-statement p {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.6;
}


/* Main FAQ styles */
.master-faq-section {
    padding: 80px 5% 120px;
    background-color: #f8fafd; /* Slight contrast from the white form section */
}

.master-accordion {
    max-width: 900px;
    margin: 50px auto 0;
}

.faq-item {
    background: #ffffff;
    border: 1px solid #dce4ed;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
}

.faq-toggle {
    width: 100%;
    padding: 25px;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #003366;
    cursor: pointer;
    text-align: left;
}

.faq-toggle:hover {
    background-color: #f0f4f8;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    padding: 0 25px;
}

.faq-item.active .faq-content {
    max-height: 300px;
    padding-bottom: 25px;
}

.faq-item.active .arr {
    transform: rotate(180deg);
}

.arr {
    transition: 0.3s;
    color: #FF8C00;
    font-weight: 800;
}

.h3 .h2 {
    color: #003366;
    text-align: center;
    margin-bottom: 40px;
}

.subtitle-tag {
    color: orange;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 10px;
}

/* Call to action in contact page */
.contact-footer-cta {
    padding: 60px 5% 100px;
    background-color: #ffffff;
    border-top: 1px solid #dce4ed;
}

.cta-inner-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.cta-message {
    flex: 2;
}

.cta-message h3 {
    color: #003366;
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.cta-message p {
    color: #666;
    max-width: 600px;
}

.cta-social-proof {
    flex: 1;
    text-align: right;
}

.proof-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 15px;
}

.soc-btn {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #003366;
    color: #003366;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: 0.3s;
    margin-left: 10px;
}

.soc-btn:hover {
    background-color: #003366;
    color: #ffffff;
}

@media (max-width: 768px) {
    .cta-inner-grid { flex-direction: column; text-align: center; }
    .cta-social-proof { text-align: center; }
    .soc-btn { margin: 5px; }
}

/* Global hero section */
.network-hero {
    position: relative;
    padding: 140px 5% 100px;
    background-color: #001a33; /* Deep Dark Navy */
    color: #ffffff;
    text-align: center;
    overflow: hidden;
}

.network-map-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1200px;
    opacity: 0.25; /* Keeps the map subtle so text is readable */
    z-index: 1;
}

.map-container {
    position: relative;
    width: 100%;
}

.base-map {
    width: 100%;
    height: auto;
    filter: invert(1); /* Makes a dark map light, or vice versa */
}

/* Pin Styling */ /*
.pin {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #FF8C00; /* SHO Orange */
 /*   border-radius: 50%;
    box-shadow: 0 0 15px #FF8C00; 
}  */

/* Pulse Animation */
.pin::after {
    content: '';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border: 2px solid #FF8C00;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

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

/* Coordinate Adjustments (Approximate) */
.mogadishu { top: 62%; left: 63%; }
.minnesota { top: 35%; left: 22%; }
.kampala   { top: 61%; left: 60%; }
.nairobi   { top: 63%; left: 61%; }

.network-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
}

.network-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 20px 0;
}

.location-list {
    margin-top: 40px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: #FF8C00;
}

.loc-sep {
    margin: 0 15px;
    color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
    .network-content h1 { font-size: 2.2rem; }
    .network-map-bg { width: 150%; } /* Map stays visible on mobile */
}


/* Mogadishu section styling */
.hq-section { padding: 100px 5%; background: #ffffff; }

/* Intro Layout */
.hq-intro { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; margin-bottom: 60px; }
.hq-text h2 { color: #003366; font-size: 2.5rem; margin-bottom: 20px; }
.hq-text p { color: #555; line-height: 1.8; margin-bottom: 15px; }
.office-img { width: 100%; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

.section-divider { border: 0; border-top: 1px solid #eee; margin: 60px 0; }

/* Activity Grid - The 9 Tasks */
.section-title h3 { text-align: center; color: #003366; margin-bottom: 40px; text-transform: uppercase; letter-spacing: 2px; font-size: 1.2rem; }
.activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.activity-card { 
    background: #f8fafd; padding: 30px; border-radius: 8px; text-align: center;
    transition: 0.3s; border: 1px solid #eef2f6; 
}
.activity-card i { display: block; font-size: 2rem; margin-bottom: 10px; font-style: normal; }
.activity-card span { font-weight: 700; color: #003366; font-size: 0.9rem; }
.activity-card:hover { transform: translateY(-5px); background: #003366; }
.activity-card:hover span { color: #fff; }

/* Leadership Section */
.leadership-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.leader-card { text-align: center; padding: 20px; }
.leader-img { 
    width: 120px; height: 120px; background: #dce4ed; border-radius: 50%; 
    margin: 0 auto 20px; border: 4px solid #f0f4f8; 
}
.leader-card h4 { color: #003366; margin-bottom: 5px; }
.leader-card p { font-size: 0.85rem; color: #888; text-transform: uppercase; }

/* Responsive */
@media (max-width: 992px) {
    .hq-intro, .activity-grid, .leadership-grid { grid-template-columns: 1fr; }
    .hq-intro { text-align: center; }
}

/* leadership section styling */
.leader-img { 
    width: 100px; 
    height: 100px; 
    background: linear-gradient(135deg, #003366, #005599); 
    border-radius: 50%; 
    margin: 0 auto 20px; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.5rem;
    border: 3px solid #FF8C00; /* Subtle orange border to match SHO branding */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Mogadishu Button Styling */
.chapter-action-bar {
    margin-top: 50px;
    padding: 30px;
    background: #f0f4f8;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 5px solid #FF8C00; /* SHO Orange Accent */
}

.action-text span {
    font-size: 1.2rem;
    font-weight: 700;
    color: #003366;
}

.btn-chapter-join {
    display: inline-block;
    padding: 15px 35px;
    background-color: #003366;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.btn-chapter-join:hover {
    background-color: #FF8C00; /* Shifts to SHO Orange on hover */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3);
}

@media (max-width: 768px) {
    .chapter-action-bar { flex-direction: column; text-align: center; gap: 20px; }
}


/* USA Styling */
/* USA Branch specific styling */
.usa-branch {
    background-color: #fcfdfe; /* Very slight blue tint to distinguish from HQ white */
}

.usa-branch .subtitle-tag {
    background: #e6f0ff;
    color: #003366;
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Ensure the merged map image looks professional */
.usa-branch .office-img {
    border: 1px solid #dee2e6;
    padding: 10px;
    background: #fff;
}

/* Using the same pulse/hover effects we defined for the HQ to keep consistency */
.usa-branch .activity-card:hover {
    background: #003366; /* Keep the institutional Navy */
}

.usa-branch .btn-chapter-join {
    background-color: #003366;
}

.usa-branch .btn-chapter-join:hover {
    background-color: #FF8C00; /* SHO Orange on Hover */
}

/* Kampala section styling */
/* Uganda Branch specific styling */
.uganda-branch {
    background-color: #f9f6f2; /* A warmer, earthy tone for the regional hub */
}

.uganda-branch .subtitle-tag {
    background: #fff0e0;
    color: #cc7000;
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
}

.uganda-branch .activity-card:hover {
    background: #003366; /* Keep the consistent Navy hover */
}

/* Ensure the action bar remains distinct */
.uganda-branch .chapter-action-bar {
    background: #ffffff;
    border-left: 5px solid #003366; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}


/* Nairobi Section Styling */
/* Kenya Branch specific styling */
.kenya-branch {
    background-color: #ffffff; /* Clean white for the business hub */
}

.kenya-branch .subtitle-tag {
    background: #e1f5fe;
    color: #0277bd;
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Matching the consistent Navy-Orange SHO Branding */
.kenya-branch .activity-card:hover {
    background: #003366;
}

.kenya-branch .chapter-action-bar {
    background: #f8f9fa;
    border-left: 5px solid #FF8C00; /* SHO Orange Accent */
}

/* Flow section styles */
.flow-impact {
    padding: 80px 5%;
    background-color: #003366; /* SHO Navy */
    color: #ffffff;
}

.section-title.center {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 { color: #ffffff; margin-top: 10px; }
.section-intro { color: #d1d1d1; max-width: 700px; margin: 0 auto; }

.flow-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-top: 40px;
}

.flow-step {
    flex: 1;
    position: relative;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

.flow-step.highlight {
    border: 1px solid #FF8C00; /* SHO Orange */
    background: rgba(255, 140, 0, 0.1);
}

.step-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #FF8C00;
    margin-bottom: 15px;
    opacity: 0.8;
}

.flow-step h4 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #ffffff;
}

.flow-step p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #e0e0e0;
}

.flow-arrow {
    display: flex;
    align-items: center;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.2);
    padding-top: 50px;
}

/* Responsive */
@media (max-width: 992px) {
    .flow-container { flex-direction: column; align-items: center; }
    .flow-arrow { transform: rotate(90deg); padding: 10px 0; }
    .flow-step { width: 100%; text-align: center; }
}

/* Final form style */
.contact-section { padding: 100px 5%; background-color: #f4f7fa; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start; }

/* Sidebar Info */
.contact-info-panel h2 { color: #003366; font-size: 2.2rem; margin-bottom: 20px; }
.info-item { display: flex; gap: 15px; margin-bottom: 25px; }
.info-item i { font-size: 1.5rem; font-style: normal; color: #FF8C00; }
.info-item strong { display: block; color: #003366; }

.transparency-badge { 
    margin-top: 40px; padding: 20px; border-left: 4px solid #FF8C00; 
    background: #fff; border-radius: 0 8px 8px 0; font-size: 0.9rem;
}

/* Form Styling */
.contact-form-card { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 15px 35px rgba(0,51,102,0.08); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 700; color: #333; font-size: 0.9rem; }

input, select, textarea {
    width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; 
    font-family: inherit; font-size: 1rem;
}

input:focus, select:focus, textarea:focus { outline: none; border-color: #003366; }

.btn-submit-global {
    width: 100%; padding: 15px; background: #003366; color: #fff; border: none;
    border-radius: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer; transition: 0.3s;
}

.btn-submit-global:hover { background: #FF8C00; }

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


/* CTA global styles */
.global-footer-cta {
    padding: 100px 5%;
    background: linear-gradient(rgba(0, 51, 102, 0.9), rgba(0, 51, 102, 0.9)), url('IMAGES/SHO7\ \(7\).jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}

.cta-content h2 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.cta-content p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 40px;
    color: #e0e0e0;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-primary-orange {
    padding: 18px 40px;
    background: #FF8C00;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 6px;
    transition: 0.3s;
}

.btn-secondary-outline {
    padding: 18px 40px;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 6px;
    transition: 0.3s;
}

.btn-primary-orange:hover { background: #e67e00; transform: translateY(-3px); }
.btn-secondary-outline:hover { background: #fff; color: #003366; }

@media (max-width: 768px) {
    .cta-buttons { flex-direction: column; }
    .cta-content h2 { font-size: 2.2rem; }
}


/* This makes the link stay the hover color when active */
.nav-menu a.active {
    color: var(--warm-orange);
    font-weight: bold; /* Optional: makes it stand out more */
    border-bottom: 2px solid var(--warm-orange); /* Optional: adds a nice underline */
}

/*  Reseach section styles */
.research-section {
    padding: 80px 5%;
    background-color: #fcfcfc;
}

/* Featured Section */
.featured-research {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 60px;
    background: #ffffff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.research-image { flex: 1; }
.research-image img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.research-text { flex: 1.2; }
.research-text h2 { color: var(--deep-blue); margin: 15px 0; }
.research-text p { color: #555; line-height: 1.7; margin-bottom: 25px; }

.download-btn-main {
    padding: 12px 25px;
    background: var(--warm-orange);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
}

/* 4-Column Grid */
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.report-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.report-card:hover { transform: translateY(-5px); }

.report-thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.report-content {
    padding: 15px;
    border-top: 1px solid #eee;
}

.download-link {
    font-size: 0.9rem;
    color: var(--deep-blue);
    font-weight: bold;
    text-decoration: none;
}

.download-link:hover {
    color: var(--warm-orange);
    text-decoration: underline;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .featured-research { flex-direction: column; padding: 20px; }
    .report-grid { grid-template-columns: 1fr 1fr; }
}

/* Thank You Page Styles */
.thank-you-section {
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    background-color: #f9f9f9;
}

.thank-you-card {
    background: #ffffff;
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    max-width: 600px;
    text-align: center;
    border-top: 5px solid #FF8C00; /* SHO Orange */
}

.success-icon {
    font-size: 60px;
    color: #FF8C00;
    margin-bottom: 20px;
}

.thank-you-card h1 {
    color: #003366; /* SHO Navy */
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.thank-you-card p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
}

.btn-return-home {
    display: inline-block;
    background: #003366;
    color: white;
    padding: 15px 35px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s ease;
}

.btn-return-home:hover {
    background: #FF8C00;
    transform: translateY(-3px);
}

/* Footer Newsletter Styles */
.footer-newsletter {
    margin-top: 25px;
}

.footer-newsletter h3 {
    color: #ffffff;
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.footer-newsletter p {
    font-size: 0.9rem;
    color: #cccccc;
    margin-bottom: 15px;
    line-height: 1.4;
}

.newsletter-form {
    display: flex;
    gap: 0; 
    max-width: 280px; /* Aligns well with footer column width */
}

.newsletter-form input[type="email"] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #444;
    border-radius: 4px 0 0 4px;
   /* background: #1a1a1a; */
    background: var(--light-grey);
    color: black;
    font-size: 0.85rem;
    outline: none;
}

.newsletter-form button {
    padding: 10px 15px;
    background-color: #FF8C00; /* SHO Orange */
    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: background 0.3s ease;
}

.newsletter-form button:hover {
    background-color: #e67e00;
}

/* Mobile Fix */
@media (max-width: 480px) {
    .newsletter-form {
        max-width: 100%;
    }
}


/* Donation Page Styles */
.donation-container {
    padding: 80px 5%;
    background-color: #f4f7f9;
    text-align: center;
}

.bank-card {
    max-width: 600px;
    margin: 0 auto 40px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
    border-top: 5px solid var(--warm-orange);
}

.bank-header {
    background: var(--deep-blue);
    color: white;
    padding: 30px;
}

.bank-header i { font-size: 2.5rem; margin-bottom: 10px; }
.bank-header h3 { margin: 0; letter-spacing: 1px; }

.details-grid {
    padding: 30px;
    text-align: left;
}

.detail-item {
    margin-bottom: 20px;
}

.detail-item label {
    display: block;
    font-weight: bold;
    color: var(--text-gray);
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.copy-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9f9f9;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.copy-box span {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: var(--deep-blue);
}

.copy-box button {
    background: none;
    border: none;
    color: var(--warm-orange);
    cursor: pointer;
    font-size: 1.1rem;
    transition: transform 0.2s;
}

.copy-box button:hover { transform: scale(1.2); }

/* Donation Steps Styling */
.donation-steps {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.step {
    flex: 1;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.step-num {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: var(--warm-orange);
    color: white;
    border-radius: 50%;
    line-height: 30px;
    font-weight: bold;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .donation-steps { flex-direction: column; }
}

/* Paypal styles */
.payment-upcoming {
    padding: 60px 5%;
    background-color: #ffffff;
    text-align: center;
}

.upcoming-title {
    color: var(--deep-blue);
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.upcoming-subtitle {
    color: var(--text-gray);
    margin-bottom: 40px;
    font-style: italic;
}

.gateway-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.gateway-item {
    position: relative;
    width: 150px;
    padding: 20px;
    border: 2px dashed #ccc;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: 0.3s ease;
}

/* Optional: Slight hover effect to show it's "live" code */
.gateway-item:hover {
    filter: grayscale(50%);
    opacity: 0.8;
    border-color: var(--warm-orange);
}

.gateway-status {
    position: absolute;
    top: -12px;
    background: var(--warm-orange);
    color: white;
    font-size: 0.7rem;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

.gateway-icon {
    font-size: 3rem;
    color: var(--deep-blue);
    margin-bottom: 10px;
}

.gateway-item span {
    font-weight: bold;
    color: var(--text-gray);
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .gateway-container { gap: 20px; }
    .gateway-item { width: 120px; }
}