/* --------------------------------------------------------------------------------
   [Table of contents]
   1.  Base Styles & Variables
   2.  Header & Navigation
   3.  Modern UI Overrides (Hero, Sections, Cards)
   4.  About Page Specifics (New Page Headers, Collages, Badges)
   5.  Feature Box Section
   6.  Footer
   7.  Responsive Design
   8.  Inner Page Styles
   9.  Roadmap Page Styles
   10. Software Page Styles
   11. Contact Page Styles
   12. Download Page Styles
   13. Financial Literacy Page Styles
   14. Call to Action Section
   15. Homepage Enhancement Sections
   16. About Us Page Enhancements
   17. Trusted Clients (Wall of Trust)
   18. Legal & Cookie Banner Styles
   19. Cookie Consent Modal (Updated Floating Card)
   20. Cookie Modal Enhancements
   21. DCP Compliance Page Redesign
   22. DCP Compliance Page Service Boxes
   23. Roadmap / Process Steps Grid
   24. Dropdown Menu Navigation Styles
   25. Modern Gallery Grid & Lightbox
----------------------------------------------------------------------------------- */

/* 1. Base Styles & Variables
/* -------------------------------------------------------------------------------- */

:root {
    --primary-color: #164E2A; /* Deeper, more premium Green */
    --accent-color: #F08A00;  /* Softer, more modern Orange */
    --text-color: #1F2937;    /* Slate dark gray instead of pure black */
    --light-text-color: #6B7280;
    --background-color: #F9FAFB; /* Very soft gray for section depth */
    --white: #ffffff;
    --card-border: #E5E7EB;
    --heading-font: 'Poppins', sans-serif;
    --body-font: 'Montserrat', sans-serif;
}

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

body {
    font-family: var(--body-font);
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--white);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3 {
    font-family: var(--heading-font);
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.02em; /* Tighter letter spacing looks more modern */
}

p {
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: var(--accent-color);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-color);
}

.btn {
    display: inline-block;
    padding: 12px 28px;
    font-family: var(--heading-font);
    font-weight: 600;
    text-transform: none; /* Sentence case is more modern */
    border-radius: 8px; /* Rounder corners */
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-large {
    padding: 16px 32px;
    font-size: 1.1rem;
}

.btn-primary {
    background-color: var(--accent-color);
    color: var(--white);
    border: 2px solid var(--accent-color);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--accent-color);
    box-shadow: none;
}

.btn-secondary {
    background-color: var(--primary-color);
    color: var(--white);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background-color: transparent;
    color: var(--primary-color);
    box-shadow: none;
}

.btn-outline {
    background-color: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
}

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

.btn-outline-light {
    background-color: var(--white);
    color: var(--text-color);
    border: 1px solid var(--card-border);
}

.btn-outline-light:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* 2. Header & Navigation
/* -------------------------------------------------------------------------------- */
.header {
    background-color: rgba(255, 255, 255, 0.98); /* Slight transparency for modern feel */
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px; /* Taller for breathing room */
}

/* Ensures the logo container stays flexed horizontally with the menu */
.navbar > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.navbar-logo {
    display: flex;
    align-items: center;
}

.navbar-logo img {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 30px; /* Modern spacing instead of margins */
    margin: 0;
    padding: 0;
}

.nav-item {
    margin: 0; /* Resetting old margins */
}

.nav-link {
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.95rem; /* Slightly smaller, more elegant */
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

/* Underline effect for standard links only */
.nav-link:not(.btn-nav):after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--accent-color);
    transition: width 0.3s ease;
}

.nav-link:not(.btn-nav):hover:after,
.nav-link.active:not(.btn-nav):after {
    width: 100%;
}

.nav-link:not(.btn-nav):hover {
    color: var(--primary-color);
}

/* Contact Us Navigation Button Styles */
.nav-link.btn-nav {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 10px 24px;
    border-radius: 8px;
    padding-bottom: 10px; /* Overrides the 5px above */
}

.nav-link.btn-nav:hover {
    background-color: var(--accent-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.hamburger {
    display: none;
    cursor: pointer;
}

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


/* 3. Modern UI Overrides (Hero, Sections, Cards)
/* -------------------------------------------------------------------------------- */

.modern-hero {
    background: linear-gradient(135deg, var(--background-color) 0%, #E8F0EA 100%);
    color: var(--text-color);
    height: auto;
    min-height: 70vh;
    padding: 100px 0;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    align-items: center;
}

/* Split Layout for Hero */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    text-align: left;
}

.hero-text-content {
    max-width: 100%;
}

.hero-badge {
    display: inline-block;
    background-color: rgba(240, 138, 0, 0.15);
    color: var(--accent-color);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.light-badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--accent-color);
}

.modern-hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.modern-hero p {
    font-size: 1.25rem;
    color: var(--light-text-color);
    margin: 0 0 30px 0;
}

.hero-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
}

/* Floating Image Animation */
.floating-hero-img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(22, 78, 42, 0.25);
    animation: float 6s ease-in-out infinite;
}

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

.section-heading-centered {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px auto;
}

.section-heading-centered h2 {
    font-size: 2.5rem;
    color: var(--text-color);
}

.section-heading-centered p {
    font-size: 1.1rem;
    color: var(--light-text-color);
}

.modern-card {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 40px 30px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
}

.modern-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: rgba(22, 78, 42, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.icon-wrapper i {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin: 0;
}

.modern-card h3 {
    font-size: 1.3rem;
    color: var(--text-color);
    margin-bottom: 15px;
}

.modern-link {
    display: inline-block;
    margin-top: 15px;
    font-weight: 600;
}

.modern-section-bg {
    background-color: var(--background-color);
}

.modern-trust {
    padding: 30px 0;
    border-bottom: 1px solid var(--card-border);
}

.trust-title {
    text-align: center;
    font-size: 0.9rem;
    color: var(--light-text-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}

/* 4. About Page Specifics (New Headers, Collages, Badges)
/* -------------------------------------------------------------------------------- */

.modern-page-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0F381E 100%);
    color: var(--white);
    padding: 80px 0 100px 0; /* Extra bottom padding for layout overlap if needed */
    text-align: center;
    border-bottom: 5px solid var(--accent-color);
}

.modern-page-header h1 {
    color: var(--white);
    font-size: 3rem;
    margin-bottom: 15px;
}

.modern-page-header p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
}

/* The Creative Image Collage */
.modern-image-collage {
    position: relative;
    width: 100%;
    padding-bottom: 15%; /* Creates space for the overlapping image */
}

.collage-img-main {
    width: 85%;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.collage-img-secondary {
    width: 50%;
    border-radius: 12px;
    border: 8px solid var(--white); /* White border to separate from main image */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
}

/* Modern Badges for Functional Areas */
.modern-badge-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.modern-badge {
    background-color: var(--white);
    border: 1px solid var(--card-border);
    padding: 12px 24px;
    border-radius: 50px; /* Pill shape */
    font-weight: 600;
    color: var(--text-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.modern-badge i {
    color: var(--accent-color);
}

.modern-badge:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* 5. Feature Box Section
/* -------------------------------------------------------------------------------- */

.three-box-section {
    padding: 80px 0;
    background-color: var(--background-color);
}

.box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}


/* 6. Footer (UPDATED to Modern Slate)
/* -------------------------------------------------------------------------------- */
.footer {
    background-color: #222222; /* Darker slate/black from your screenshot */
    color: #D1D5DB; 
    padding: 60px 0 20px;
    border-top: 15px solid var(--primary-color); /* The thick green bar! */
}

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

.footer-col h3 {
    color: var(--accent-color); /* Vibrant Orange headings */
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #D1D5DB;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: var(--accent-color);
}

.footer-col p {
    color: #D1D5DB;
    line-height: 1.7;
}

.footer-col p strong {
    color: var(--accent-color); /* Orange labels (Tel, Cell, Email) */
}

.social-icons a {
    color: var(--white);
    font-size: 1.2rem;
    margin-right: 15px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: var(--accent-color);
}

.copyright {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    padding-top: 20px;
    font-size: 0.9rem;
}


/* 7. Responsive Design
/* -------------------------------------------------------------------------------- */

@media (max-width: 992px) {
    .hero-split {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }
    .hero-text-content p {
        margin: 0 auto 30px auto;
    }
    .hero-actions {
        justify-content: center;
    }
    .modern-image-collage {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .navbar > .container {
        justify-content: space-between;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 90px;
        flex-direction: column;
        background-color: var(--white);
        width: 100%;
        height: calc(100vh - 90px);
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding-top: 2rem;
        gap: 15px;
    }

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

    .hamburger {
        display: block;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .modern-hero h1 {
        font-size: 2.5rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-image {
        order: -1;
        margin-bottom: 2rem;
    }
}

/* 8. Inner Page Styles
/* -------------------------------------------------------------------------------- */

.page-header {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 40px 0;
    text-align: center;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 0;
}

.benefits-section {
    padding: 80px 0;
    background-color: var(--background-color);
}

.benefits-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.benefits-text h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.benefits-image img {
    max-width: 100%;
    border-radius: 8px;
}

.benefits-list {
    list-style: none;
    padding-left: 0;
}

.benefits-list li {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-left: 30px;
    position: relative;
}

.benefits-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--accent-color);
    position: absolute;
    left: 0;
    top: 5px;
}

.erp-section {
    padding: 80px 0;
    text-align: center;
}

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

.erp-content h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.erp-image {
    margin-top: 2rem;
}

.erp-image img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 9. Roadmap Page Styles
/* -------------------------------------------------------------------------------- */

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

.roadmap-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.roadmap-intro h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.roadmap-item {
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.roadmap-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.roadmap-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .benefits-content {
        grid-template-columns: 1fr;
    }
}

/* 10. Software Page Styles
/* -------------------------------------------------------------------------------- */

.features-section {
    padding: 80px 0;
    background-color: var(--background-color);
}

.features-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.features-intro h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.feature-card {
    background-color: var(--white);
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}

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

.feature-card i {
    color: var(--accent-color);
    margin-bottom: 1.5rem;
}

.feature-card h3 {
    font-size: 1.2rem;
    color: var(--primary-color);
}

/* 11. Contact Page Styles
/* -------------------------------------------------------------------------------- */

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

.contact-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.contact-intro h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
}

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

.form-control {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    font-family: var(--body-font);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
}

.contact-details h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.office-location {
    margin-bottom: 2rem;
}

.office-location h4 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.office-location i {
    color: var(--accent-color);
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.map-section {
    width: 100%;
    height: 450px;
}

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

/* 12. Download Page Styles
/* -------------------------------------------------------------------------------- */

.download-section {
    padding: 80px 0;
    background-color: var(--background-color);
}

.download-card {
    max-width: 800px;
    margin: 0 auto 50px;
    background-color: var(--white);
    padding: 50px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.download-icon {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.download-card h2 {
    color: var(--primary-color);
    font-size: 2.2rem;
}

.download-card p {
    font-size: 1.1rem;
    color: var(--light-text-color);
    margin-bottom: 2rem;
}

.download-card .btn i {
    margin-right: 8px;
}

.embed-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    border: 1px solid var(--card-border);
    border-radius: 16px;
}

.embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 13. Financial Literacy Page Styles
/* -------------------------------------------------------------------------------- */

.problem-solution-section {
    padding: 60px 0;
    background-color: var(--background-color);
}

.problem-solution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.problem-card,
.solution-card {
    padding: 30px;
    border-radius: 16px;
}

.problem-card {
    background-color: #fff0e6;
    border-left: 5px solid #ff6b6b;
}

.solution-card {
    background-color: #e6f4ea;
    border-left: 5px solid var(--primary-color);
}

.problem-card h3,
.solution-card h3 {
    margin-top: 0;
    font-size: 1.5rem;
}

.services-tabs-section {
    padding: 80px 0;
}

.tab-nav {
    display: flex;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 30px;
}

.tab-button {
    padding: 15px 30px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: var(--heading-font);
    color: var(--light-text-color);
    position: relative;
    top: 1px;
}

.tab-button.active {
    color: var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-content h2 {
    font-size: 2rem;
    color: var(--primary-color);
}

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

.module-card {
    background: var(--background-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--card-border);
}

.module-card span {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
}

.module-card i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.module-card h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.why-us-section {
    padding: 80px 0;
    background-color: var(--background-color);
}

.why-us-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

/* Partners Logo Bar (Matched to Screenshot) */
.partners-logo-bar {
    text-align: center;
    margin-top: 60px;
    padding: 40px 20px;
    background-color: #E5E7EB; /* Light gray background */
    border-radius: 12px;
}

.partners-logo-bar h4 {
    margin: 0 0 25px 0;
    color: #4B5563; /* Slate/Blue-gray text */
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.partner-logos img {
    max-height: 65px;
    background-color: var(--white); /* White box behind logos */
    padding: 10px 15px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Slight shadow to make them pop */
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.partner-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .problem-solution-grid {
        grid-template-columns: 1fr;
    }
}

/* 14. Call to Action Section
/* -------------------------------------------------------------------------------- */

.modern-cta {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 80px 0;
    text-align: center;
}

.modern-cta .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.modern-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--white);
}

.modern-cta p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    margin-bottom: 30px;
}


/* 15. Homepage Enhancement Sections
/* -------------------------------------------------------------------------------- */

.why-us-homepage {
    padding: 80px 0;
    background-color: var(--white);
}

.why-us-grid-homepage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.core-services {
    padding: 80px 0;
}

.core-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* 16. About Us Page Enhancements
/* -------------------------------------------------------------------------------- */

.about-intro-section {
    padding: 80px 0;
    background: var(--white);
}

.vision-mission-section {
    padding: 60px 0;
    background-color: var(--background-color);
}

.vision-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.vision-card,
.mission-card {
    background: var(--white);
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.vision-card i,
.mission-card i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.vision-card h3,
.mission-card h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
}

.core-areas-section {
    padding: 80px 0;
}

.team-section {
    padding: 80px 0;
    background-color: var(--background-color);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.team-card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    text-align: center;
    padding: 30px;
}

.team-card img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--primary-color);
    margin-bottom: 1rem;
    background-color: #eee;
    object-fit: cover;
}

.team-card h4 {
    font-size: 1.3rem;
    margin: 0;
}

.team-card span {
    color: var(--accent-color);
    font-weight: 700;
    display: block;
    margin-bottom: 0.5rem;
}

.team-card p {
    font-size: 0.9rem;
    color: var(--light-text-color);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .vision-mission-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 992px) {
    .core-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 17. Trusted Clients (Wall of Trust)
/* -------------------------------------------------------------------------------- */

.trusted-clients-section {
    padding: 80px 0;
    background-color: var(--white);
    border-top: 1px solid var(--card-border);
}

.client-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 40px;
    align-items: center;
    justify-items: center;
}

.client-logo-grid img {
    max-width: 100%;
    max-height: 60px;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.client-logo-grid img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* 18. Legal Styles
/* -------------------------------------------------------------------------------- */

.legal-content {
    padding: 80px 0;
}

.legal-content .container {
    max-width: 800px;
}

.legal-content h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--background-color);
}

.legal-content ul {
    list-style-position: inside;
    padding-left: 1rem;
    margin-bottom: 1rem;
}

.legal-content ul li {
    margin-bottom: 0.5rem;
}

/* 19. Cookie Consent Modal (Modern Floating Card)
/* -------------------------------------------------------------------------------- */

#cookie-modal-overlay {
    position: fixed;
    bottom: 20px;
    left: 20px; 
    width: calc(100% - 40px);
    max-width: 420px; 
    background-color: var(--white);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    z-index: 9998; 
    padding: 24px;
    border-radius: 16px; 
    border: 1px solid var(--card-border);
    display: flex;
    justify-content: center;
}

#cookie-modal-overlay.hidden {
    display: none !important;
}

#cookie-modal {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#cookie-modal h3 {
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--text-color);
    font-size: 1.1rem;
}

#cookie-modal p {
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: var(--light-text-color);
    line-height: 1.5;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-buttons .btn {
    padding: 8px 16px;
    font-size: 0.85rem; 
    flex: 1; 
    text-align: center;
}

/* 20. Cookie Modal Enhancements
/* -------------------------------------------------------------------------------- */

#cookie-advanced-view {
    text-align: left;
}

.cookie-options {
    margin: 20px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.cookie-option {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
}

.cookie-option:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
}

.cookie-option input[type="checkbox"] {
    margin-right: 15px;
    margin-top: 5px;
    width: 1.3em;
    height: 1.3em;
}

.cookie-option label {
    font-size: 16px;
    cursor: pointer;
}

.cookie-option label strong {
    display: block;
    color: #000000;
}

.cookie-option label small {
    display: block;
    color: #666666;
    font-size: 13px;
    margin-top: 4px;
}

/* 21. DCP Compliance Page Redesign
/* -------------------------------------------------------------------------------- */
.challenge-solution-section {
    padding: 80px 0;
    background-color: var(--white);
}

.challenge-solution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    align-items: flex-start;
}

.challenge-card,
.solutions-card {
    padding: 30px;
    border-radius: 16px;
    height: 100%;
}

.challenge-card {
    background-color: #fff0e6;
    border: 2px solid #ffcbb9;
}

.solutions-card {
    background-color: #e6f4ea;
    border: 2px solid #a3d3b0;
}

.challenge-card h3,
.solutions-card h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 1rem;
}

.regulator-icons {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #ffcbb9;
    display: flex;
    justify-content: space-around;
    gap: 15px;
    text-align: center;
}

.regulator-icons span {
    font-weight: 600;
    color: var(--text-color);
}

.regulator-icons i {
    display: block;
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

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

.solutions-list li {
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 1rem;
}

.solutions-list li i {
    color: var(--primary-color);
    font-size: 1.5rem;
    width: 25px;
}

.service-breakdown-section {
    padding: 80px 0;
    background-color: var(--background-color);
}

.service-article {
    max-width: 800px;
    margin: 0 auto 40px auto;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--card-border);
}

.service-article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.service-article h2 {
    font-size: 2rem;
    color: var(--primary-color);
}

/* 22. DCP Compliance Page Service Boxes
/* -------------------------------------------------------------------------------- */

.dcp-services-section {
    padding: 60px 0 80px;
}

.dcp-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.service-box {
    background-color: #e6f4ea;
    border-left: 5px solid var(--primary-color);
    padding: 30px;
    border-radius: 12px;
}

.service-box i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.service-box h3 {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-top: 0;
}

@media (min-width: 992px) {
    .dcp-services-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* 23. Roadmap / Process Steps Grid 
/* -------------------------------------------------------------------------------- */

.process-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    position: relative;
}

.process-card {
    position: relative;
    overflow: hidden;
    padding-top: 50px;
    z-index: 1;
}

/* Large faded number in the background */
.step-number {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 8rem;
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--primary-color);
    opacity: 0.05;
    line-height: 1;
    z-index: -1;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.process-card:hover .step-number {
    transform: scale(1.1) translate(-10px, 10px);
    opacity: 0.08;
}

.process-card h3 {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
    display: inline-block;
}

.process-card p {
    color: var(--light-text-color);
    margin-bottom: 20px;
}

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

.process-list li {
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.process-list li i {
    color: var(--accent-color);
    font-size: 1.1rem;
}

/* 24. Dropdown Menu Navigation Styles
/* -------------------------------------------------------------------------------- */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    min-width: 200px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 10px 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1001;
    border: 1px solid var(--card-border);
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    margin: 0;
    padding: 0;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-menu a:hover, .dropdown-menu a.active {
    background-color: rgba(22, 78, 42, 0.05); /* Soft green hover */
    color: var(--primary-color);
}

/* 25. Modern Gallery Grid & Lightbox
/* -------------------------------------------------------------------------------- */
.modern-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.modern-gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3; /* Keeps all images uniformly sized */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    cursor: pointer;
}

.modern-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill the box perfectly without stretching */
    transition: transform 0.5s ease;
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(22, 78, 42, 0.7); /* Deep green overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-overlay i {
    color: var(--white);
    font-size: 2.5rem;
    transform: scale(0.5);
    transition: transform 0.3s ease;
}

.modern-gallery-item:hover img {
    transform: scale(1.1); /* Gentle zoom on the image */
}

.modern-gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.modern-gallery-item:hover .gallery-overlay i {
    transform: scale(1);
}

/* Lightbox Styles */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    z-index: 10000; /* Must be above everything */
    display: none; /* Controlled via JS */
    justify-content: center;
    align-items: center;
}

.lightbox:not(.hidden) {
    display: flex;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
    box-shadow: 0 0 25px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: var(--white);
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.lightbox-close:hover {
    color: var(--accent-color);
}
/* 26. Modern Map Container (Contact Page Fix)
/* -------------------------------------------------------------------------------- */
.modern-map-container {
    width: 100%;
    height: 450px; /* Locks the height so it never overlaps the footer */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--card-border);
    position: relative;
    z-index: 1; /* Keeps it above the background but below dropdown menus */
    background-color: var(--white);
}

.modern-map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block; /* Removes any weird inline spacing */
}