/* General styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            color: #333;
            background-color: #fff;
            line-height: 1.6;
        }

        /* Use the specified main color #0f6735 (dark green) for headings, links, etc. */
        h1, h2, h3 {
            color: #0f6735;
        }

        a {
            color: #0f6735;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        /* Header and Nav */
        header {
            background-color: #fff;
            border-bottom: 1px solid #ddd;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .hero-text {
            background-color: rgba(255, 255, 255, 0.8); /* White with slight transparency */
            padding: 20px;
            border-radius: 8px; /* Optional: soft corners for a modern look */
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5em;
            font-weight: bold;
            padding-top: 10px;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        nav li {
            margin-left: 20px;
            position: relative;
        }

        nav li ul {
            display: none;
            position: absolute;
            background-color: #fff;
            border: 1px solid #ddd;
            min-width: 200px;
            top: 100%;
            left: 0;
            z-index: 1;
        }

        nav li:hover > ul {
            display: block;
        }

        nav ul ul li {
            margin: 0;
            padding: 10px;
        }

        /* Hamburger for mobile */
        .hamburger {
            display: none;
            font-size: 1.5em;
            cursor: pointer;
        }

        .service-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #0f6735;
            color: #fff;
            font-weight: bold;
            border-radius: 5px;
            margin: 10px 5px 0;
            text-align: center;
        }

        .service-button2 {
            display: inline-block;
            padding: 10px 20px;
            background-color: #FFF;
            color: #000;
            font-weight: bold;
            border-radius: 5px;
            margin: 10px 5px 0;
            text-align: center;
        }

        .service-button:hover {
            background-color: #08421f; /* Darker shade of #0f6735 for hover */
            text-decoration: none;
        }

        .service-button2:hover {
            border-radius: 50px;
            border: 3px solid #000;
            text-decoration: none;
        }

        /* Container for centering content */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* Hero section */
        .hero {
            text-align: center;
            padding: 60px 20px;
            /* background-color: #f8f8f8;  Light gray background for contrast; no specific background image found */
            background: url('../images/hero.webp') center/cover no-repeat;
        }

        .hero h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .hero p {
            font-size: 1.2em;
            font-style: italic;
        }

        /* Services section */
        .services {
            padding: 40px 20px;
        }

        .services h2 {
            text-align: center;
            font-size: 2em;
            margin-bottom: 30px;
        }

        .service-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        .service-item {
            flex: 1 1 300px;
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            text-align: center;
        }

        .service-item h3 {
            font-size: 1.5em;
            margin-bottom: 10px;
        }

        .service-item p {
            font-size: 1em;
        }

        /* Value proposition section */
        .value-prop {
            text-align: center;
            padding: 40px 20px;
            background-color: #f8f8f8;
        }

        .value-prop p {
            font-size: 1.2em;
            max-width: 800px;
            margin: 0 auto 20px;
        }

        .value-prop a {
            font-weight: bold;
        }

        /* Why section */
        .why-section {
            padding: 40px 20px;
            background-image: url('../images/why-choose-caye-bg-1.jpg.webp');
            background-position: bottom center;
            background-size: cover;
        }

        .why-section h2 {
            text-align: center;
            font-size: 2em;
            margin-bottom: 30px;
        }

        .why-section ul {
            list-style-type: disc;
            max-width: 800px;
            margin: 0 auto;
            padding-left: 20px;
        }

        .why-section li {
            margin-bottom: 15px;
            font-size: 1em;
        }


/* About Overview section */
.about-overview {
    padding: 40px 20px;
    text-align: center;
}

.about-overview h3 {
    font-size: 1.8em;
    margin-bottom: 20px;
}

.about-overview p {
    max-width: 800px;
    margin: 0 auto 20px;
    font-size: 1em;
}

/* Timeline section */
.timeline {
    padding: 40px 20px;
    background-color: #f8f8f8; /* Similar to .value-prop for subtle contrast */
}

.timeline h2 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 30px;
}

.timeline-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.timeline-item {
    flex: 1 1 300px;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: left;
}

.timeline-item h4 {
    font-size: 1.4em;
    margin-bottom: 10px;
    color: #0f6735;
}

.timeline-item ul {
    list-style-type: disc;
    padding-left: 20px;
}

.timeline-item li {
    margin-bottom: 10px;
    font-size: 1em;
}

/* Choose An Account section */
.choose-account {
    padding: 40px 20px;
    text-align: center;
}

.choose-account h2 {
    font-size: 2em;
    margin-bottom: 30px;
}

.account-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.account-item {
    flex: 1 1 300px;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
}

.account-item h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.account-item p {
    font-size: 1em;
}

.compare-link {
    margin-top: 20px;
    font-size: 1em;
}

/* Account Benefits section */
.account-benefits {
    padding: 40px 20px;
    background-color: #f8f8f8;
    text-align: center;
}

.account-benefits h2 {
    font-size: 2em;
    margin-bottom: 30px;
}

.benefits-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.benefit-item {
    flex: 1 1 300px;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
}

.benefit-item h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.benefit-item p {
    font-size: 1em;
}

/* Why Bank section */
.why-bank {
    padding: 40px 20px;
    text-align: center;
}

.why-bank h2 {
    font-size: 2em;
    margin-bottom: 30px;
}

.why-bank ul {
    list-style-type: disc;
    max-width: 800px;
    margin: 0 auto 20px;
    padding-left: 20px;
    text-align: left;
}

.why-bank li {
    margin-bottom: 15px;
    font-size: 1em;
}

/* Build Future section */
.build-future {
    padding: 40px 20px;
    background-color: #f8f8f8;
    text-align: center;
}

.build-future h2 {
    font-size: 2em;
    margin-bottom: 30px;
}

.future-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.future-item {
    flex: 1 1 300px;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
}

.future-item h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.future-item p {
    font-size: 1em;
}

.account-note {
    margin-top: 20px;
    font-size: 1.2em;
    font-weight: bold;
}

/* Interest Rates section */
.interest-rates {
    padding: 40px 20px;
    text-align: center;
}

.interest-rates h2 {
    font-size: 2em;
    margin-bottom: 30px;
}

.rates-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.rate-item {
    flex: 1 1 300px;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
}

.rate-item h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.rate-item p {
    font-size: 1em;
}

/* Things Know section */
.things-know {
    padding: 40px 20px;
    background-color: #f8f8f8;
    text-align: center;
}

.things-know h2 {
    font-size: 2em;
    margin-bottom: 30px;
}

.things-know p {
    max-width: 800px;
    margin: 0 auto 20px;
    font-size: 1em;
    text-align: left;
}

/* Contact Details section */
.contact-details {
    padding: 40px 20px;
    text-align: center;
}

.contact-details h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.calling-note {
    max-width: 800px;
    margin: 0 auto 20px;
    font-style: italic;
    font-size: 1em;
}

.contact-details ul {
    list-style-type: none;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    text-align: left;
}

.contact-details li {
    margin-bottom: 15px;
    font-size: 1em;
}

.contact-details strong {
    color: #0f6735;
}

/* Contact Form section */
.contact-form {
    padding: 40px 20px;
    background-color: #f8f8f8;
    text-align: center;
}

.contact-form h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.contact-form p {
    max-width: 800px;
    margin: 0 auto 20px;
}

.contact-form form {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #0f6735;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
}

.contact-form textarea {
    height: 150px;
}

.contact-form button {
    display: block;
    margin: 0 auto;
}

.complaints {
    margin-top: 30px;
    font-size: 1em;
}

/* Find Us section */
.find-us {
    padding: 40px 20px;
    text-align: center;
}

.find-us h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.find-us p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1em;
}

/* Program Overview section */
.program-overview {
    padding: 40px 20px;
    text-align: center;
    background-color: #f8f8f8;
}

.program-overview p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.2em;
    font-style: italic;
}

/* How It Works section */
.how-works {
    padding: 40px 20px;
    text-align: center;
}

.how-works h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.how-works p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1em;
}

/* Participation section */
.participation {
    padding: 40px 20px;
    background-color: #f8f8f8;
    text-align: center;
}

.participation h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.participation p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1em;
}

/* Costs section */
.costs {
    padding: 40px 20px;
    text-align: center;
}

.costs h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.costs p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1em;
}

/* Gold CTA section */
.gold-cta {
    padding: 40px 20px;
    background-color: #f8f8f8;
    text-align: center;
}

.gold-cta p {
    max-width: 800px;
    margin: 0 auto 20px;
    font-size: 1em;
}

/* Wire Overview section */
.wire-overview {
    padding: 40px 20px;
    text-align: center;
}

.wire-overview h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.wire-overview h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.transfer-in {
    list-style-type: none;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
}

.transfer-in li {
    margin-bottom: 10px;
    font-size: 1em;
    font-weight: bold;
}

/* Currencies List section */
.currencies-list {
    padding: 40px 20px;
    background-color: #f8f8f8;
    text-align: center;
}

.currencies-list h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.currencies-list ul {
    list-style-type: disc;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 20px;
    text-align: left;
}

.currencies-list li {
    margin-bottom: 10px;
    font-size: 1em;
}

/* More Info section */
.more-info {
    padding: 40px 20px;
    text-align: center;
}

.more-info p {
    max-width: 800px;
    margin: 0 auto 20px;
    font-size: 1em;
}

/* Slider container */
.slider-container {
    position: relative;
    max-width: 600px; /* Adjust to fit 4 items: 4 * --item-width + gaps */
    margin: 0 auto;
    overflow: hidden;
}

.slider-wrapper {
    overflow: hidden;
}

.transfer-in {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    padding: 0;
    margin: 0;
    transition: transform 0.5s ease; /* Smooth slide */
    --item-width: 150px; /* Width per item; adjust for text (e.g., 100px) or images */
    gap: 10px; /* Space between items */
}

.transfer-in li {
    flex: 0 0 var(--item-width);
    text-align: center; /* Center text or images */
    margin: 0;
}

/* Buttons */
.slider-prev, .slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.slider-prev {
    left: 0;
}

.slider-next {
    right: 0;
}

/* Key Features section */
.key-features {
    padding: 40px 20px;
    text-align: center;
    background-color: #f8f8f8;
}

.key-features h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.key-features ul {
    list-style-type: disc;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 20px;
    text-align: left;
}

.key-features li {
    margin-bottom: 15px;
    font-size: 1em;
}

/* Card Application section */
.card-application {
    padding: 40px 20px;
    text-align: center;
}

.card-application h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.card-application ul {
    list-style-type: disc;
    max-width: 800px;
    margin: 0 auto 20px;
    padding-left: 20px;
    text-align: left;
}

.card-application li {
    margin-bottom: 15px;
    font-size: 1em;
}

/* Card Fees section */
.card-fees {
    padding: 40px 20px;
    background-color: #f8f8f8;
    text-align: center;
}

.card-fees h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.card-fees table {
    max-width: 1000px;
    margin: 0 auto 20px;
    border-collapse: collapse;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.card-fees th, .card-fees td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
    font-size: 1em;
}

.card-fees th {
    background-color: #0f6735;
    color: #fff;
    font-weight: bold;
}

.card-fees td {
    background-color: #fff;
}

.fees-note {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1em;
    font-style: italic;
}

        /* Footer (assumed basic, as not detailed in source) */
        footer {
            background-color: #0f6735;
            color: #fff;
            text-align: center;
            padding: 20px;
            font-size: 0.9em;
        }

        /* Responsiveness for mobile */
        @media (max-width: 768px) {
            .hero-text {
                padding: 15px;
                max-width: 90%; /* Wider on smaller screens */
            }
            .nav-container {
                flex-direction: column;
            }

            nav ul {
                display: none;
                flex-direction: column;
                width: 100%;
            }

            nav li {
                margin: 10px 0;
                text-align: center;
            }

            nav li ul {
                position: static;
                border: none;
            }

            .hamburger {
                display: block;
                align-self: flex-end;
            }

            .service-grid {
                flex-direction: column;
            }

            .hero {
                padding: 40px 10px;
            }

            .hero h1 {
                font-size: 2em;
            }

            .services h2, .why-section h2 {
                font-size: 1.8em;
            }

            .about-overview {
                padding: 30px 10px;
            }

            .about-overview h3 {
                font-size: 1.6em;
            }

            .timeline h2 {
                font-size: 1.8em;
            }

            .timeline-grid {
                flex-direction: column;
            }
            .choose-account, .account-benefits, .why-bank, .build-future, .interest-rates, .things-know {
                padding: 30px 10px;
            }

            .choose-account h2, .account-benefits h2, .why-bank h2, .build-future h2, .interest-rates h2, .things-know h2 {
                font-size: 1.8em;
            }

            .account-grid, .benefits-grid, .future-grid, .rates-grid {
                flex-direction: column;
            }

            .why-bank ul, .things-know p {
                text-align: center;
                padding: 0 10px;
            }

            .contact-details, .contact-form, .find-us {
                padding: 30px 10px;
            }

            .contact-details h2, .contact-form h2, .find-us h2 {
                font-size: 1.8em;
            }

            .contact-details ul {
                padding: 0 10px;
            }

            .contact-form form {
                padding: 0 10px;
            }

            .program-overview, .how-works, .participation, .costs, .gold-cta {
                padding: 30px 10px;
            }

            .how-works h2, .participation h2, .costs h2 {
                font-size: 1.8em;
            }
            .wire-overview, .currencies-list, .more-info {
                padding: 30px 10px;
            }

            .wire-overview h2, .currencies-list h2 {
                font-size: 1.8em;
            }

            .wire-overview h3 {
                font-size: 1.4em;
            }

            .currencies-list ul {
                padding-left: 10px;
            }

            .slider-container {
                max-width: 100%; /* Full width on mobile, show fewer if needed */
            }

            .transfer-in {
                --item-width: 100px; /* Smaller items on mobile, e.g., show 3-4 */
            }
            .key-features, .card-application, .card-fees {
                padding: 30px 10px;
            }

            .key-features h2, .card-application h2, .card-fees h2 {
                font-size: 1.8em;
            }

            .card-fees table {
                overflow-x: auto;
                display: block;
            }

            .key-features ul, .card-application ul {
                padding-left: 10px;
            }

        }