:root {
            --brand-green: #2fae38; 
            --dark-text: #1a1a1a;
            --brand-dark: #123815;  /* Deep Green */
            --brand-bright: #123815; /* Bright Green accent */
            --brand-light: #e6f9e3;  /* Very light green */
            --text-white: #ffffff;
            --dark-green: #123815;  /* Darker green for subtitles */
            --brand-dark-green: #164016; /* Deep green for buttons */
            --brand-light-bg: #F4F9F4;   /* Very light mint background */
            --arrow-color: #164016;
            --box-gray: #e0e0e0;     /* Placeholder image color */

        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: #ffffff;
            overflow-x: hidden;
        }

        /* Navbar Styling */
        .navbar {
            padding-top: 20px;
            padding-bottom: 20px;
            background: white;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: var(--dark-text);
            display: flex;
            align-items: center;
            letter-spacing: -0.5px;
        }

        .logo-icon {
            color: var(--brand-green);
            font-size: 1.8rem;
            margin-right: 5px;
        }

        .nav-link {
            color: var(--dark-text) !important;
            font-weight: 600;
            margin: 0 10px;
            font-size: 0.95rem;
        }

        .nav-link:hover {
            color: var(--brand-green) !important;
        }

        .btn-strategy {
            background-color: #164a1a; /* Darker green for header button */
            color: white;
            padding: 10px 25px;
            font-size: 0.9rem;
            border-radius: 5px;
            border: none;
            transition: 0.3s;
        }
        
        .btn-strategy:hover {
            background-color: var(--brand-green);
            color: white;
        }

        /* Hero Section Styling */
        .hero-wrapper {
            /* Limits width and adds padding to match screenshot layout */
            max-width: 1300px; 
            margin: 0 auto;
            padding: 0 15px;
        }

        .hero-container {
            position: relative;
            /* Placeholder office image */
            background-image: url('images/Rectangle\ 768.png'); 
            background-size: cover;
            background-position: center;
            border-radius: 20px; /* The rounded corners in the image */
            height: 650px;
            display: flex;
            align-items: center;
            overflow: hidden;
            padding-bottom: 40px;
        }

        /* Dark Overlay to make text readable */
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            padding-left: 60px; /* Indentation from left */
            padding-right: 20px;
            max-width: 800px;
        }

        .hero-title {
            color: white;
            font-weight: 700;
            margin-top: 160px;
            font-size: 3.5rem;
            line-height: 1.1;
            margin-bottom: 25px;
        }

        .hero-subtitle {
            color: #e0e0e0;
            font-size: 1.1rem;
            margin-bottom: 35px;
            max-width: 600px;
            font-weight: 300;
        }

        .highlight-green {
            color: var(--brand-green);
            font-weight: 500;
        }

        .btn-cta-hero {
            background-color: #277e2d; /* Slightly darker green */
            color: white;
            padding: 12px 30px;
            border-radius: 50px; /* Pill shape */
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            transition: 0.3s;
            border: 1px solid transparent;
        }

        .btn-cta-hero:hover {
            background-color: var(--brand-green);
            color: white;
            transform: translateX(5px); /* Subtle movement on hover */
        }

        .btn-cta-hero i {
            margin-left: 10px;
            background: white;
            color: var(--brand-green);
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
        }

        /* Responsive Adjustments */
        @media (max-width: 991px) {
            .hero-title { font-size: 2.5rem; }
            .hero-container { height: 500px; }
            .hero-content { padding-left: 30px; }
        }

        @media (max-width: 768px) {
            .navbar-collapse {
                background: white;
                padding: 20px;
                border-radius: 10px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.1);
                margin-top: 10px;
            }
            .hero-title { font-size: 2rem; }
            .hero-content { padding-left: 20px; text-align: left; }
            .btn-strategy { margin-top: 10px; width: 100%; }
        }


        /* The dark green banner block */
        .green-banner {
            background-color: #1a4012; /* Color matched from image */
            color: white;
            text-align: center;
            /* Large bottom padding creates space for the overlapping image */
            padding: 70px 20px 180px;
            position: relative;
        }

        .banner-text {
            font-size: 1.1rem;
            line-height: 1.6;
            max-width: 900px;
            margin: 0 auto 30px;
            font-weight: 400;
        }

        .banner-heading {
            font-size: 2rem;
            font-weight: 700;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.4;
        }

        /* Container for the image to handle positioning and overlap */
        .image-overlap-container {
            position: relative;
            /* Negative margin pulls the image up to overlap the banner */
            margin-top: -130px; 
            z-index: 2; /* Ensures image is on top of the banner */
            text-align: center;
            padding-bottom: 50px;
        }

        .feature-image {
           max-height: 300px;
           border-radius: 50px;
            height: auto;
            display: inline-block;
            /* Optional: Adds a subtle shadow to make it pop */
            box-shadow: 0 15px 30px rgba(0,0,0,0.2); 
        }

        /* Responsive Adjustments for mobile devices */
        @media (max-width: 768px) {
            .green-banner {
                padding: 50px 20px 120px;
            }
            .banner-text {
                font-size: 0.95rem;
            }
            .banner-heading {
                font-size: 1.5rem;
            }
            .image-overlap-container {
                margin-top: -80px; /* Less overlap on smaller screens */
                padding-left: 20px;
                padding-right: 20px;
            }
        }

       

        /* --- SECTION 3: Cards (Mission & Vision) --- */
        .cards-section {
            padding: 80px 0;
        }

        .custom-card {
            border-radius: 25px; /* Heavy rounding as per design */
            padding: 40px 30px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border: none;
            transition: transform 0.3s ease;
        }

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

        /* Card 1: Light Green */
        .card-light {
            background-color: var(--brand-light);
            color: var(--brand-dark);
        }

        .card-light h2 {
            font-weight: 800;
            font-size: 2.2rem;
            line-height: 1.1;
            margin-bottom: 20px;
        }

        .arrow-icon {
            font-size: 2rem;
            color: var(--brand-dark);
        }

        /* Cards 2 & 3: Dark Green */
        .card-dark {
            background-color: var(--brand-dark);
            color: white;
        }

        .card-dark h3 {
            font-weight: 700;
            font-size: 1.8rem;
            margin-bottom: 20px;
        }

        .card-dark p {
            font-size: 0.95rem;
            line-height: 1.6;
            opacity: 0.9;
            margin: 0;
        }

        /* Responsive Tweaks */
        @media (max-width: 991px) {
            .image-wrapper { padding-left: 20px; padding-right: 20px; }
            .green-decoration-box { width: 50px; left: 0; } /* Smaller deco on tablet */
        }

        @media (max-width: 768px) {
            .intro-section { padding-bottom: 120px; }
            .overlap-container { margin-top: -100px; }
            .intro-heading { font-size: 1.5rem; }
            .green-decoration-box { display: none; } /* Hide decoration on mobile */
            .image-wrapper { padding: 0 15px; }
            .custom-card { padding: 30px 20px; min-height: 250px; }
        }

    

        /* Top Green Line Decoration */
        .top-decoration {
            /* border-top: 3px solid var(--brand-green); */
            width: 60%;
            position: absolute;
            top: 0;
            right: 0;
            margin-bottom: 40px;
        }

        /* Typography */
        h2.section-title {
            font-weight: 800;
            font-size: 3.4rem;
            color: #000;
            margin-bottom: 1.5rem;
            position: relative;
        }

        /* The Green Plus Sign */
        .plus-sign {
            color: var(--brand-green);
            font-size: 2.8rem;
            vertical-align: super;
            font-weight: bold;
            position: relative;
            top: -10px;
        }

        .content-text {
            font-size: 1.1rem;
            line-height: 1.8;
            color: #333;
        }

        /* Image Area Styling */
        .image-container {
            position: relative;
            padding-top: 40px;  /* Space for green box top overhang */
            padding-right: 40px; /* Space for green box right overhang */
            margin-top: 20px;
        }

        .green-backdrop {
            position: absolute;
            top: 0;
            right: 0;
            width: 70%;  /* Covers part of the area */
            height: 80%;
            background-color: var(--brand-green);
            z-index: 0; /* Behind the image */
        }

        .main-image {
            position: relative;
            z-index: 1; /* On top of green box */
            width: 70vw;
            text-align: right;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            /* object-fit: cover; */
        }

        /* Mobile Adjustments */
        @media (max-width: 991px) {
            .image-container {
                margin-top: 60px;
                padding-right: 20px;
            }
            .green-backdrop {
                width: 50%;
            }
            h2.section-title {
                font-size: 2.5rem;
            }
            .top-decoration {
                width: 100%; /* Full width line on mobile usually looks better */
            }
        }

          .role-section {
            padding: 60px 0;
            background-color: #fff;
            overflow-x: hidden; /* Prevents horizontal scroll if decorations extend */
        }

        /* --- Top decorative line --- */
        .top-decoration-container {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 40px;
        }

        .top-green-line {
            width: 60%; /* Adjust width as needed relative to container */
            height: 3px;
            background-color: var(--brand-green);
        }

        /* --- Main Title Styling --- */
        .main-title {
            font-weight: 800;
            font-size: 3rem;
            color: #000;
            margin-bottom: 30px;
        }

        .plus-sup {
            color: var(--brand-green);
            font-weight: bold;
            font-size: 0.7em; /* Relative to the main title size */
            top: -0.5em;
        }

        /* --- Image Section with Green Overlay --- */
        .image-wrapper {
            position: relative;
            margin-bottom: 50px;
        }

        .office-img {
            width: 100%;
            height: auto;
            display: block;
            /* Using object-fit to ensure the image area stays consistent if you swap images */
            max-height: 400px; 
            object-fit: cover;
            object-position: center;
        }

        .green-overlay-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 25%; /* Covers the bottom quarter of the image container */
            background-color: var(--brand-green);
            z-index: 2;
        }

        /* --- Subtitle --- */
        .sub-title {
            color: var(--dark-green);
            font-weight: 700;
            font-size: 2rem;
            margin-bottom: 40px;
        }

        /* --- Numbered Steps Styling --- */
        .step-item {
            margin-bottom: 30px;
        }

        /* Using flex to align the big number next to the text block */
        .step-container {
            display: flex;
            align-items: flex-start;
        }
        

        .step-number {
            font-size: 5rem;
            font-weight: 900;
            color: var(--brand-green);
            line-height: 0.8; /* Tighter line height aligns it better with title top */
            margin-right: 25px;
            flex-shrink: 0; /* Prevents number from squishing */
        }

        .step-content h4 {
            color: var(--dark-green);
            font-weight: 700;
            font-size: 1.3rem;
            margin-bottom: 10px;
        }

        .step-content p {
            color: var(--text-body);
            font-size: 1.05rem;
            line-height: 1.6;
        }

        /* --- Responsive Adjustments --- */
        @media (max-width: 768px) {
            .main-title { font-size: 2.5rem; }
            .sub-title { font-size: 1.6rem; }
            .top-green-line { width: 80%; } /* Longer line on smaller screens */
            .step-number { font-size: 3rem; margin-right: 15px; }
        }

           /* Section Styling */
        .explore-section {
            background-color: var(--brand-light-bg);
            padding: 60px 0;
            border-radius: 50px;
        }

        .section-title {
            font-weight: 600;
            font-size: 3rem !important;
            color: #000;
            text-align: left;
        }

        /* Button/Card Styling */
        .explore-btn {
            background-color: var(--brand-dark-green);
            color: white;
            border-radius: 50px; /* Pill shape */
            padding: 15px 25px;
            display: flex;
            align-items: center;
            text-decoration: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            max-width: 800px; /* Limits width on large screens */
            margin: 0 auto 20px auto; /* Centers the button */
            border: none;
        }

        .explore-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
            color: white; /* Keeps text white on hover */
        }

        /* Icon Images */
        .icon-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            margin-right: 20px;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

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

        /* Text Styling */
        .btn-text {
            font-size: 1.1rem;
            font-weight: 500;
            flex-grow: 1; /* Pushes arrow to the right */
            margin-right: 15px;
            line-height: 1.4;
        }

        /* Arrow Styling */
        .arrow-circle {
            width: 35px;
            height: 35px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .arrow-circle i {
            color: var(--arrow-color);
            font-size: 1.2rem;
            font-weight: bold;
        }

        /* Mobile Responsiveness */
        @media (max-width: 576px) {
            .explore-btn {
                border-radius: 30px; /* Slightly less rounded on mobile to save space */
                padding: 15px;
                flex-direction: row; /* Keep row but might wrap text */
            }
            .btn-text {
                font-size: 0.95rem;
            }
            .icon-circle {
                width: 40px;
                height: 40px;
                margin-right: 15px;
            }
            .arrow-circle {
                width: 30px;
                height: 30px;
            }
        }

                /* Section Spacing */
        .benefits-section {
            padding: 80px 0;
        }

        /* Left Placeholder Image Area */
        .left-image-area img{
            background-color: #e0e0e0; /* Light gray placeholder color */
            width: 100%;
            height: 100%;
            max-height: 920px; /* Ensures it has height even without an image */
            border-radius: 4px;
        }

        /* Main Heading */
        .section-title {
            font-weight: 800;
            font-size: 2.5rem;
            margin-bottom: 40px;
            color: var(--text-dark);
        }

        /* Timeline Styling */
        .timeline-item {
            display: flex;
            position: relative;
            padding-bottom: 30px; /* Space between items */
        }

        /* The vertical line */
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 15px; /* Center with the 30px circle (15px is half) */
            top: 0;
            height: 100%;
            width: 2px;
            background-color: var(--line-color);
            z-index: 0;
        }

        /* Remove line for the last item */
        .timeline-item:last-child::before {
            display: none;
        }

        /* The Green Number Circle */
        .number-circle {
            width: 32px;
            height: 32px;
            background-color: var(--brand-green);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.9rem;
            position: relative;
            z-index: 1; /* Sits on top of the line */
            flex-shrink: 0; /* Prevents shrinking */
            margin-right: 20px;
        }

        /* Text Content */
        .content-box h5 {
            font-weight: 700;
            font-size: 1.2rem;
            margin-bottom: 5px;
            color: var(--text-dark);
        }

        .content-box p {
            color: var(--text-grey);
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 0;
        }

        /* Mobile Responsive Tweaks */
        @media (max-width: 991px) {
            .left-image-area {
                min-height: 300px;
                margin-bottom: 40px;
            }
        }

        /* Typography Styling */
        .headline-text {
            font-weight: 900;
            font-size: 5.5rem;
            line-height: 1.1;
            color: var(--brand-dark);
            margin-bottom: 20px;
        }

        .headline-text .plus-sup {
            color: var(--brand-dark); /* Matches text color in image */
            font-size: 0.6em;
            vertical-align: top;
            position: relative;
            top: -0.1em;
        }

        .sub-headline {
            color: var(--brand-dark);
            font-weight: 600;
            font-size: 1.25rem;
            text-align: left;
            margin-bottom: 30px;
        }

        .description-text {
            text-align: left;
            font-size: 1.05rem;
            line-height: 1.6;
            color: #222;
        }

        /* Placeholder Box Styling */
        .placeholder-box {
            width: 100%;
            height: 100%;
            min-height: 300px;
            border-radius: 10px;
        }

        /* Responsive Adjustments */
        @media (max-width: 991px) {
            .headline-text, .sub-headline, .description-text {
                text-align: left; /* Align left on mobile for better readability */
            }
            .headline-text {
                font-size: 2.5rem;
            }
            .placeholder-box {
                margin-top: 40px;
                min-height: 300px;
            }
        }

          .competencies-section {
            padding: 80px 0;
        }

        /* The Item Container */
        .comp-item {
            margin-bottom: 60px; /* Space between rows */
        }

        /* Last item shouldn't have bottom margin */
        .comp-item:last-child {
            margin-bottom: 0;
        }

        /* Gray Placeholder Box */
        .image-placeholder img {
            width: 100%;
            max-height: 200px; /* Fixed height for consistency */
            border-radius: 2px;
        }

        /* Typography */
        .comp-title {
            font-weight: 800;
            font-size: 2rem;
            color: var(--text-dark);
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

        /* The Green Plus Sign */
        .plus-sup {
            color: var(--brand-green);
            font-weight: bold;
            font-size: 0.7em;
            vertical-align: super;
            margin-left: 2px;
        }

        .comp-desc {
            font-size: 1.05rem;
            line-height: 1.6;
            color: var(--text-body);
            max-width: 800px; /* Keeps text line length readable */
        }

        /* Responsive Adjustments */
        @media (max-width: 991px) {
            .image-placeholder {
                margin-bottom: 25px; /* Add space below image on mobile */
                height: 250px; /* Slightly taller on mobile looks better */
            }
            .comp-title {
                font-size: 1.75rem;
            }
        }

         /* The Gray Form Box */
        .form-box-custom {
            background-color: #f0f0f0; /* The specific gray from your image */
            border-radius: 20px;
            padding: 55px;
            height: 100%;
        }

        /* Input Fields Styling */
        .form-control {
            border: none;
            border-radius: 8px;
            padding: 12px 15px;
            font-size: 14px;
        }
        
        .form-control:focus {
            box-shadow: none; /* Removes the default Bootstrap blue glow */
            outline: 2px solid #4CAF50; /* Adds green focus border */
        }

        /* Labels */
        .form-label {
            font-weight: 600;
            font-size: 15px;
            color: #000;
        }

        /* The Green Button */
        .btn-brand {
            background-color: #4CAF50;
            color: white;
            font-weight: 600;
            padding: 12px 25px;
            border-radius: 8px;
            border: none;
            transition: all 0.3s;
        }

        .btn-brand:hover {
            background-color: #45a049;
            color: white;
        }

        /* Right Side Typography */
        .section-title {
            font-weight: 700;
            color: #0d3b0e;
            margin-bottom: 15px;
        }

        .map-wrapper {
            /* background-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ec/Map_wrapper.png'); */
            background-size: cover;
            height: 145px;
            border-radius: 20px;
            margin-bottom: 30px;
            overflow: hidden;
        }

        /* Link colors */
        .contact-link {
            color: #333;
            text-decoration: none;
        }
        .contact-link:hover {
            color: #4CAF50;
        }

        .cta-section {
            padding: 60px 0;
        }
        .cta-card {
            background-color: #004d00; /* Dark green background */
            border-radius: 30px;
            padding: 50px 30px;
            text-align: center;
            color: white;
            max-width: 1000px; /* Limit width on large screens */
            margin: 0 auto; /* Center the card */
        }
        .cta-card h2 {
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        .cta-card p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            font-weight: 400;
        }
        /* Customizing the button */
        .btn-custom-green {
            background-color: #ffffff; /* Light green color from the button */
            color: #004d00; /* Dark green text */
            font-weight: 600;
            padding: 12px 30px;
            border-radius: 8px;
            border: none;
            transition: all 0.3s ease;
        }
        .btn-custom-green:hover {
            background-color: #e4fdea; /* Slightly darker on hover */
            color: #003300;
        }







        /* Footer Styles */
.footer-section {
    background-color: #003500; /* Dark background */
    color: #ffffff;
    padding: 80px 0 30px 0;
    margin-top: 0px; /* Adjust if needed */
    font-family: 'Poppins', sans-serif;
}

.footer-desc {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.6;
    max-width: 350px;
}

.footer-heading {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: #4CAF50; /* Your brand green */
    padding-left: 5px; /* Subtle movement on hover */
}

/* Social Icons */
.social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 50%;
    margin-right: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background-color: #4CAF50;
    transform: translateY(-3px);
}

/* Subscribe Form */
.subscribe-form .form-control {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 12px 15px;
    border-radius: 6px 0 0 6px;
}

.subscribe-form .form-control:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    box-shadow: none;
}

.btn-footer-submit {
    background-color: #4CAF50;
    color: #fff;
    border: none;
    padding: 0 20px;
    font-weight: 600;
    border-radius: 0 6px 6px 0;
    transition: background 0.3s;
}

.btn-footer-submit:hover {
    background-color: #ffffff;
    color: #fff;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
}

.copyright-text {
    color: #ffffff;
    font-size: 13px;
}

/* =========================================
   RESPONSIVE DESIGN FIXES
   Add this to the bottom of style.css
   ========================================= */

/* --- Tablet & Small Desktop (max-width: 991px) --- */
@media (max-width: 991px) {
    
    /* Hero Section: Switch from fixed height to flexible padding */
    .hero-container {
        height: auto;       /* Removes the rigid 650px height */
        min-height: 500px;  /* Ensures it's still tall enough */
        padding: 80px 20px; /* Gives text room to breathe */
        background-position: center left; /* Focuses image better */
    }

    .hero-title {
        margin-top: 20px;   /* Removes the huge 160px top margin */
        font-size: 2.8rem;
    }

    /* Benefits Section: Adjust image/text balance */
    .left-image-area img {
        max-height: 400px;  /* Prevents image from stretching too tall */
        margin-bottom: 30px;
    }
    
    /* Main Image in Principles Section */
    .main-image {
        width: 100%; /* Prevents horizontal scroll caused by 70vw */
    }

    /* Green Banner overlap adjustment */
    .green-banner {
        padding-bottom: 100px; /* Reduce empty space */
    }
    
    .image-overlap-container {
        margin-top: -80px; /* Less overlap to prevent covering text */
    }
}

/* --- Mobile Landscape & Portrait (max-width: 768px) --- */
@media (max-width: 768px) {
    
    /* Typography: Prevent massive text from breaking screen */
    .headline-text {
        font-size: 2.5rem; /* Down from 5.5rem */
    }

    .section-title {
        font-size: 2rem !important;
    }

    .hero-title {
        font-size: 2.2rem;
        text-align: center;
    }

    .hero-subtitle {
        text-align: center;
        margin-bottom: 25px;
    }
    
    .hero-content {
        padding: 0; /* Remove left padding */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Contact Form: Fix squished content */
    .form-box-custom {
        padding: 30px 20px; /* Reduce padding from 55px */
    }

    /* Timeline/Benefits spacing */
    .timeline-item {
        padding-left: 0; 
    }

    .timeline-item .content-box {
        padding-left: 10px;
    }

    /* Footer Alignment */
    .footer-section {
        text-align: center;
    }
    
    .footer-bottom .text-md-end {
        text-align: center !important;
        margin-top: 10px;
    }

    /* Mobile Navbar Button spacing */
    .navbar-collapse .btn-strategy {
        margin-top: 15px;
        width: 100%;
    }
}

/* --- Very Small Screens (max-width: 450px) --- */
@media (max-width: 450px) {
    .hero-title {
        font-size: 1.8rem;
    }
    
    /* Role Section Steps */
    .step-container {
        flex-direction: column; /* Stack number on top of text */
        align-items: flex-start;
    }
    
    .step-number {
        margin-bottom: 10px;
        font-size: 3.5rem;
    }

    /* Explore Buttons */
    .explore-btn {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .icon-circle {
        margin: 0 0 15px 0;
    }

    .btn-text {
        margin: 0 0 15px 0;
    }
}