/* Google Fonts: Plus Jakarta Sans */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Fonts */
    --font-primary: 'Plus Jakarta Sans', sans-serif;

    /* Colors - Light AI Theme */
    --neutral-100: #f5f5f5;
    --primary-color: #2563eb;
    /* Electric Blue */
    --secondary-color: #7c3aed;
    /* Purple */
    --accent-color: #06b6d4;
    /* Cyan */

    --bg-color: #f2eeee;
    /* User requested light bg */
    --bg-card: #ffffff;
    --text-color: #1f2937;
    /* Gray 900 */
    --text-muted: #64748b;
    /* Slate 500 */

    --border-color: #e2e8f0;

    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --gradient-text: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
}

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

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

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

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

/* Typography Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-color);
}

h1 {
    font-size: 3.5rem;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 2.5rem;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 1.5rem;
}

p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* Navbar */
/* Navbar */
.navbar {
    position: absolute;
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 950px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 100px;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    height: 40px;
    /* Adjust height as needed to fit the navbar */
    width: auto;
    object-fit: contain;
}

/* Old logo-icon styles removed */

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
    padding-bottom: 2px;
}

.nav-links a:hover,
.nav-links a.active {
    color: #265fb1;
    /* User requested color */
    font-weight: 600;
}

/* Dropdown Menu Styles */
.dropdown {
    position: relative;
    display: flex;
    /* alignment */
    align-items: center;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 220px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    padding: 0.5rem 0;
    list-style: none;
    z-index: 1000;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

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

.dropdown-menu li {
    position: relative;
    width: 100%;
    /* Ensure full width */
}

.dropdown-menu li a {
    display: flex;
    align-items: center;
    padding: 0.7rem 1.2rem;
    color: var(--text-color);
    font-size: 0.9rem;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: space-between;
    /* For chevron */
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    color: #265fb1;
    background: rgba(38, 95, 177, 0.05);
    /* Slight tint of the brand color */
}

/* Submenu - Level 2 */
.dropdown-submenu .dropdown-menu-sub {
    position: absolute;
    top: 0;
    left: 100%;
    /* Shows to the right */
    margin-left: 0.5rem;
    /* Gap */
    background: #ffffff;
    min-width: 200px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    padding: 0.5rem 0;
    list-style: none;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

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

/* Header Button */
.btn-header {
    background: #1f2937;
    /* Dark Gray/Black */
    color: white;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: white;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
}

/* Hero Section */
/* Hero Section */
.hero {
    padding: 180px 0 100px 0;
    /* Top padding for fixed navbar */
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/images/homePage/heroImage-home.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Overlay scroll effect */
    margin: 20px;
    border-radius: 10px;
    position: relative;
    color: white;
    /* Ensure text is visible on dark overlay */
}

/* Override text colors inside hero for better visibility if needed, or rely on inheritance */
.hero h1,
.hero p {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero h1 {
    max-width: 800px;
    margin: 0 auto 1.5rem;
}

.hero p {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

/* Features/Services */
.features {
    padding: 6rem 0;
}

/* New Wrapper to match Hero margins */
.features-wrapper {
    margin: 0 20px;
    border-radius: 10px;
    /* Optional: if we want a background, add it here. For now, just structure. */
}

/* Two Column Layout */
.features-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    /* Align top, or stretch if we want equal height */
}

/* New Header Row Layout */
/* New Header Row Layout */
.features-header-row {
    margin-bottom: 0;
    /* Removed margin as requested */
    text-align: left;
    padding-bottom: 0;
    /* No padding */
    position: relative;
    z-index: 2;
}

/* Replaces old feature-col-content logic */
.feature-col-globe {
    flex: 1;
    min-width: 320px;
    background: #2c2c2f;
    /* Updated color */
    border-radius: 20px;
    /* Increase height significantly as requested */
    min-height: 500px;
    display: flex;
    flex-direction: column;
    /* Stack vertically */
    justify-content: space-between;
    /* Top and Bottom */
    align-items: center;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: -5px;
    /* Negative margin to ensure no gap */
}

.feature-col-globe .globe-img {
    max-width: 100%;
    /* Allow height to adjust naturally, or constrain if needed. 
       If we want it 'appearing from bottom', consistent width is good. */
    width: 100%;
    object-fit: contain;
    opacity: 0.9;
    margin-bottom: -15%;
    /* Pull it down slightly so it looks like appearing from bottom */
    transform-origin: center;
    z-index: 1;
}

/* Globe Content Styles */
.globe-content {
    text-align: center;
    padding-top: 4rem;
    z-index: 2;
    width: 100%;
}

.globe-heading {
    color: #ffffff;
    font-size: 2.0rem;
    /* Reduced size */
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.btn-glossy {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: linear-gradient(180deg, #52525b 0%, #18181b 100%);
    color: white;
    border-radius: 100px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid #3f3f46;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-glossy:hover {
    transform: translateY(-2px);
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: white;
}

/* Stat Grid & Cards */
.stat-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Space between the two rows */
    height: 100%;
    margin-left: 20px;
    /* Separation from globe box */
}

/* Ensure column grid wrapper stretches */
.feature-col-grid {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stat-card {
    /* 3D Background Effect */
    /* 3D Background Effect */
    background: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    padding: 2.5rem;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Deep 3D Shadow */
    box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
    /* Top highlight */
    overflow: visible;
    min-height: 240px;
    margin-bottom: 12px;
}

.stat-text {
    font-size: 1.10rem;
    /* Increased from 1rem */
    width: 60%;
    /* Restrict text width as requested */
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2rem;
    line-height: 1.6;
    /* Increased line height */
    z-index: 2;
    /* Content above watermark */
    position: relative;
}

.stat-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 2;
}

/* Metric Display (Counter) */
.metric-display {
    display: flex;
    flex-direction: column;
}

.metric-value {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--primary-color);
    background: var(--gradient-text);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.metric-label-small {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Trustpilot Styles - kept if needed for other cards, or can be removed if unused */
.trustpilot-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 1rem;
    color: #1f2937;
}

.text-success {
    color: #00b67a;
    /* Trustpilot Green */
}

.tp-stars {
    background: #1f2937;
    /* Black bg */
    display: inline-flex;
    padding: 6px 10px;
    gap: 4px;
    border-radius: 4px;
}

.tp-stars .fa-star {
    color: #ffffff;
    font-size: 0.8rem;
}

/* Main Stat Number (formerly Watermark) */
/* Main Stat Number (formerly Watermark) */
.stat-watermark {
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
    color: #e4e4e7;
    /* Changed back to solid color per request */
    background: none;
    /* Remove gradient */
    -webkit-text-fill-color: initial;
    /* Reset text fill */

    position: relative;
    right: auto;
    bottom: auto;
    pointer-events: auto;
    z-index: 2;
    margin-left: auto;
}

/* Metric Bar for 2nd card */
.metric-wrapper {
    width: 100%;
    max-width: 200px;
}

.metric-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}

.metric-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.metric-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 10px;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

/* Section Tag / Button - 3D Glass Style */
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1.25rem;
    background: transparent;
    /* Removed solid bg */
    color: var(--primary-color);
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0;
    /* 3D Borders & Shadow */
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.05),
        inset 0 1px 1px rgba(255, 255, 255, 0.8),
        inset 0 -1px 1px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.section-heading-large {
    font-size: 3.25rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-color);
    margin-bottom: 0;
}

.text-muted-gradient {
    color: #94a3b8;
}

/* The Dot */
.section-tag::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: var(--primary-color);
    border-radius: 50%;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Slightly smaller minmax for tight spaces */
    gap: 2rem;
}

.feature-card {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
}

.feature-card h3 {
    margin-bottom: 1rem;
}

/* Footer */
footer {
    background: transparent;
    border-top: 1px solid var(--border-color);
    padding: 4rem 0 2rem;
    margin-top: 1rem;
}

.btn-footer-icon {
    width: 50px;
    height: 50px;
    background-color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: auto;
    /* Align to right if flex container */
}

.btn-footer-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-footer-icon img {
    width: 24px;
    height: auto;
    object-fit: contain;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3rem;
}

.footer-section {
    flex: 1;
    min-width: 200px;
}

.footer-content h3 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.footer-bottom {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #cbd5e1;
    color: var(--text-muted);
    text-align: center;
}

/* =========================================
   Utility Classes & New Components
   ========================================= */
.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-primary {
    color: var(--primary-color);
}

.text-secondary {
    color: var(--secondary-color);
}

.btn-outline {
    border: 1px solid var(--border-color);
    color: white;
    /* specialized for hero dark bg */
    background: transparent;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Icon Boxes */
.icon-box {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    font-size: 1.5rem;
}

.icon-primary {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-color);
}

.icon-secondary {
    background: rgba(124, 58, 237, 0.1);
    color: var(--secondary-color);
}

.icon-accent {
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent-color);
}

/* Links */
.learn-more-link {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.link-primary {
    color: var(--primary-color);
}

.link-secondary {
    color: var(--secondary-color);
}

.link-accent {
    color: var(--accent-color);
}

/* About Section */
.about-section {
    padding: 6rem 0;
}

.about-container {
    display: flex;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.about-content {
    flex: 1;
    min-width: 300px;
}

.about-image-wrapper {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
}

.about-placeholder {
    width: 100%;
    height: 400px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-color);
}

.about-list li {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* =========================================
   Responsive & Mobile Menu
   ========================================= */
.mobile-menu-toggle {
    display: none;
    font-size: 1.5rem;
    color: var(--text-color);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-only-item {
    display: none;
}

/* Hero Buttons */
.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Media Query for Mobile/Tablet */
@media (max-width: 968px) {

    /* Navbar Adjustment */
    .navbar {
        width: 95%;
        top: 1rem;
        padding: 0.75rem 1rem;
    }

    .desktop-only-btn {
        display: none;
    }

    .mobile-only-item {
        display: block;
    }

    .mobile-menu-toggle {
        display: block;
    }

    /* Nav Links as Mobile Menu */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        flex-direction: column;
        padding: 1.5rem;
        gap: 1rem;
        border-radius: 20px;
        margin-top: 1rem;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.05);
        display: none;
        /* Hidden by default */
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .nav-links.active {
        display: flex;
        /* Flex to show */
        opacity: 1;
        transform: translateY(0);
        animation: fadeIn 0.3s ease forwards;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

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

    /* Adjust Dropdowns for Mobile */
    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0;
        margin-left: 1rem;
        display: none;
        /* Hide by default */
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: auto;
        background: transparent;
    }

    .dropdown:hover .dropdown-menu {
        display: none;
        /* Disable hover effect on mobile */
    }

    /* Only show when .show class is added via JS */
    /* Only show when .show class is added via JS */
    .dropdown-menu.show {
        display: block !important;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .dropdown-menu-sub {
        position: static;
        box-shadow: none;
        border: none;
        background: transparent;
        padding-left: 1rem;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: auto;
        display: none;
        /* Hide sub-dropdown by default */
    }

    .dropdown-menu-sub.show {
        display: block !important;
    }

    .submenu-trigger i {
        display: none;
    }

    /* Mobile Menu Button - 3D Effect */
    .mobile-only-item {
        text-align: center;
        margin-top: 1.5rem;
    }

    .mobile-only-item .btn {
        background: #1f2937;
        color: white;
        border: none;
        width: auto !important;
        display: inline-block;
        padding: 0.8rem 2rem;
        border-radius: 50px;
        /* 3D Effect */
        box-shadow: 0 6px 0 #0f172a;
        /* Darker shade */
        transform: translateY(0);
        transition: all 0.1s;
        margin-bottom: 6px;
        /* Space for shadow */
    }

    .mobile-only-item .btn:active {
        transform: translateY(6px);
        box-shadow: 0 0 0 #0f172a;
    }


    /* hide chevron right */

    .nav-links a {
        font-size: 1.1rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f1f5f9;
        display: block;
    }

    .nav-links li:last-child a {
        border-bottom: none;
    }

    /* Hero */
    .hero {
        padding-top: 140px;
        /* less padding */
    }

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

    .hero p {
        font-size: 1rem;
    }

    /* Sections */
    .feature-grid {
        grid-template-columns: 1fr;
        /* Stack cards */
    }

    .about-container {
        flex-direction: column-reverse;
        /* Image on top? or Text on top? Text on top usually better. Default is row. */
        gap: 2rem;
    }

    .about-image-wrapper {
        width: 100%;
    }

    .about-content {
        width: 100%;
        text-align: center;
    }

    .about-list li {
        justify-content: center;
    }

    /* Responsive Features */
    .features-layout {
        flex-direction: column;
        gap: 3rem;
    }

    .features-layout .section-header {
        text-align: center;
    }

    /* Mobile Adjustments for Features */
    .section-heading-large {
        font-size: 2.1rem;
        /* Reduced to fit on one line */
        line-height: 1.2;
    }

    .globe-heading {
        font-size: 1.5rem;
        /* Reduced for mobile */
    }

    .stat-text {
        width: 100%;
        /* Full width for mobile */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    .container {
        padding: 0 16px;
    }
}

/* Our Services Section */
/* Our Services Section */
.our-services {
    padding: 1rem 0 6rem 0;
}

.services-wrapper {
    background-color: #ffffff;
    border-radius: 20px;
    display: flex;
    gap: 4rem;
    padding: 4rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    align-items: flex-start;
}

.service-col {
    flex: 1;
}

/* Services Left Column */
.service-intro {
    padding-right: 2rem;
}

.service-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f3f4f6;
    color: #2563eb;
    /* Blue */
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.service-tag .dot {
    width: 6px;
    height: 6px;
    background: #2563eb;
    /* Blue */
    border-radius: 50%;
}

.service-preview-img {
    width: 100%;
    max-width: 400px;
    display: block;
    margin-top: 2rem;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease;
    border-radius: 20px;
}

.service-heading {
    font-size: 4rem;
    line-height: 1.1;
    color: #1f2937;
    margin-bottom: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.service-desc {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
    max-width: 90%;
}

/* Accordion 3D Styles */
.accordion-3d {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.accordion-item {
    background: #f8fafc;
    /* Very light grey/white */
    border-radius: 50px;
    /* Pill shape */
    box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
    /* Highlight */
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
}

.accordion-item:hover {
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.08),
        0 4px 6px -2px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
    background: #ffffff;
}

.accordion-header {
    padding: 1.5rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: #71717a;
    font-size: 2.0rem;
    letter-spacing: -0.02em;
    /* Matching Hero H1 style */
}

.accordion-item:hover .accordion-header {
    color: var(--primary-color);
}

.accordion-number {
    font-weight: 600;
    color: #94a3b8;
    font-size: 1rem;
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 2.5rem;
    color: var(--text-muted);
}

.accordion-item.active .accordion-body {
    max-height: 800px;
    padding-bottom: 2rem;
}

.accordion-body ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}

.accordion-body li {
    margin-bottom: 0.5rem;
}

.accordion-item.active {
    background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), #18181b;
    box-shadow: 0px -8px 0px 0px #2E2E2E inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 7.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843);
    border: none;
}

.accordion-item.active .accordion-header {
    color: #ffffff;
}

.accordion-item.active .accordion-number {
    color: rgba(255, 255, 255, 0.8);
}

.accordion-item.active .accordion-body {
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 992px) {
    .services-wrapper {
        flex-direction: column;
        padding: 2rem;
        gap: 2rem;
    }

    .service-heading {
        font-size: 3rem;
    }

    .service-intro {
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .services-wrapper {
        padding: 1.5rem;
    }

    .service-heading {
        font-size: 2.5rem;
    }

    .accordion-header {
        padding: 1.25rem 1.5rem;
        font-size: 1.1rem;
    }
}

/* Our Process Section */
.our-process-section {
    padding: 1rem 0 2rem 0;
    /* Reduced top padding */
}

.process-wrapper {
    background: transparent;
    padding: 0;
    display: flex;
    gap: 4rem;
    align-items: flex-start;
}

.process-left {
    flex: 0 0 30%;
    max-width: 30%;
}

.process-right {
    flex: 0 0 70%;
    max-width: 70%;
}

/* Process Navigation Arrows */
.process-controls {
    display: flex;
    gap: 1.5rem;
    margin-top: 3rem;
    justify-content: flex-start;
}

.process-arrow {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(0deg, #F5F5F5, #F5F5F5), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    border: none;
    box-shadow: 0px -3px 0px 0px #E9E9E9 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.6980392157) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
}

.process-arrow:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    color: var(--primary-color);
}

.process-arrow:active {
    transform: translateY(-1px);
}


/* Steps Grid inside Right Column */

.process-right {
    flex: 0 0 70%;
    max-width: 70%;
    overflow: hidden;
    /* Hide overflow for carousel */
}

/* Process Carousel */
.process-viewport {
    width: 100%;
    overflow: hidden;
}

.process-carousel-track {
    display: flex;
    gap: 2rem;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    /* Fix: Constrain to viewport width so percentages work */
    padding: 10px;
    margin: -10px;
}

.process-step-card {
    background: #f4f4f4;
    padding: 2.5rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.03),
        inset 0 0 0 1px rgba(255, 255, 255, 1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 480px;
    position: relative;

    /* Carousel Item Sizing */
    flex: 0 0 calc(50% - 1rem);
    width: calc(50% - 1rem);
    /* 2 items visible with 2rem gap */
    min-width: calc(50% - 1rem);
    max-width: calc(50% - 1rem);
}

.process-step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.06);
}

/* Card Icon Wrapper */
.card-icon-wrapper {
    width: 65px;
    height: 65px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 2rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    position: relative;
}

/* Specific Icon Colors */
.icon-dark {
    background: linear-gradient(135deg, #272626, #595958);
    box-shadow: 0 8px 20px rgb(17 17 17 / 50%);
}

/* Card Content */
.process-step-card h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #000;
    letter-spacing: -0.01em;
}

/* Separator Line */
.card-separator {
    width: 50px;
    height: 2px;
    background: #d1d5db;
    /* Light gray line */
    margin-bottom: 1.5rem;
}

.process-step-card p {
    font-size: 1rem;
    margin-bottom: auto;
    color: #64748b;
    line-height: 1.6;
    height: 100px;
    overflow: hidden;
}

/* Card Footer */
.card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 2rem;
    border-top: 1px solid transparent;
}

/* Time Tag */
.time-tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #1f2937;
    background: transparent;
    letter-spacing: 0.05em;
}

/* Step Number */
.step-count {
    font-size: 3rem;
    font-weight: 700;
    color: #969798;
    /* Updated color */
    line-height: 1;
}

.step-total {
    font-size: 3rem;
    font-weight: 400;
    color: #d1d5db;
    /* Lighter gray */
}

/* Responsive */
@media (max-width: 992px) {
    .process-wrapper {
        flex-direction: column;
        padding: 2rem;
        gap: 2rem;
    }

    .process-left,
    .process-right {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .process-right {
        margin-top: 1rem;
    }

    .process-step-card {
        flex: 0 0 100%;
        /* Show 1 card on mobile */
        min-width: 100%;
        max-width: 100%;
    }
}

/* Why Choose Us Section */
.why-choose-us-section {
    padding: 2rem 0 6rem 0;
}

.why-choose-us-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 4rem 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
    /* User asked for radius border of 10px. This implies border-radius: 10px. */
}

.section-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.benefits-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1.25rem;
    background: #eff6ff;
    /* Light blue background */
    color: #2563eb;
    /* Blue text */
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.dot-blue {
    width: 6px;
    height: 6px;
    background-color: #2563eb;
    border-radius: 50%;
}

/* WCU Grid Layout & Visuals */
.wcu-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
    margin-top: 3rem;
    text-align: left;
}

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

.wcu-inner-card {
    background: #f4f4f4;
    border-radius: 20px;
    padding: 2.5rem;
    height: 100%;
    position: relative;
    transition: transform 0.3s ease;
    overflow: hidden;
    box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}

.wcu-grid-reverse {
    grid-template-columns: 2fr 3fr;
    /* 40% / 60% */
}

@media (max-width: 900px) {
    .wcu-grid-reverse {
        grid-template-columns: 1fr;
    }
}

.centering-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.center-visual {
    justify-content: center;
    padding: 0.5rem 0;
    /* Reduced padding to accommodate larger icon without growing card */
    margin-bottom: 0.5rem;
    /* Override default 2rem margin of wcu-visual-area */
}

.secure-icon {
    height: 180px;
    /* Increased from 120px */
    width: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
    transition: transform 0.3s ease;
}

.secure-icon:hover {
    transform: scale(1.05);
}

@keyframes moveLeftRight {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-15px);
    }
}

.composition-visual {
    height: 200px;
    /* Taller area for composition */
    position: relative;
    display: flex;
    /* Ensure flex is explicit */
    justify-content: flex-end;
    /* Align right */
    padding-right: 2rem;
}

.main-message-box {
    height: 180px;
    width: auto;
    position: relative;
    z-index: 2;
    /* Removed margin-left */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
}

.floating-chat-bubble {
    position: absolute;
    top: 30px;
    right: 140px;
    /* Position to the left of the phone (which is at right edge) */
    left: auto;
    /* Reset left */
    width: 140px;
    z-index: 1;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.05));
    animation: moveLeftRight 3s ease-in-out infinite;
}

.floating-tick {
    position: absolute;
    bottom: 20px;
    right: 20%;
    width: 50px;
    z-index: 3;
    background: white;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}


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

.wcu-inner-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #1f2937;
}

.wcu-inner-card p {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
}

/* Visual Areas */
.wcu-visual-area {
    min-height: 140px;
    position: relative;
    display: flex;
    align-items: center;
}

/* Outcome List (Left Card) */
.outcome-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.outcome-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.outcome-bar {
    flex: 1;
    /* Grow to fill */
    height: 32px;
    position: relative;
    /* Removed visual styles from container */
}

.outcome-fill {
    height: 100%;
    /* New styles for the 'fill' to be the visible bar */
    background-color: var(--neutral-100);
    box-shadow: 0px -4px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset, 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843);
    border-radius: 50px;
    transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    width: 0;
    /* Default starting width */
}

.outcome-pill {
    flex-shrink: 0;
    background: white;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
    /* Ensure consistent width */
}

.outcome-pill i {
    color: #64748b;
    width: 20px;
    text-align: center;
}

/* Floating Settings Icon */
.floating-settings-icon {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 32px;
    height: 32px;
    background: #1f2937;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* Eval Steps (Right Card) */
.eval-steps-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    position: relative;
    padding: 1rem 0;
}

.eval-line {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    height: 6px;
    background: #e2e8f0;
    transform: translateY(-50%);
    z-index: 0;
    border-radius: 10px;
}

.eval-step {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    z-index: 1;
    font-size: 1.5rem;
    color: #1f2937;
}

/* Floating Arrow Icon */
.floating-arrow-icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    background: #000;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Ensure Header Centering if not defined */
.section-header-center {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Service Map Section */
.service-map-section {
    padding-bottom: 6rem;
    overflow: hidden;
}

.service-map-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: relative;
    width: 100%;
    /* Full width of container */
    max-width: none;
    margin: 0 auto;
}

.map-column {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    z-index: 2;
}

.map-col-side {
    width: 380px;
    /* Increased size */
}

/* Alignment for Left Column (Right Aligned) */
.icon-right-side .map-card {
    text-align: left;
    align-items: flex-start;
    /* If flex column */
}

.icon-right-side .map-card-icon {
    margin-right: auto;
    margin-left: 0;
}

/* Alignment for Right Column (Left Aligned - Default but ensured) */
.icon-left-side .map-card {
    text-align: left;
    align-items: flex-start;
}

.icon-left-side .map-card-icon {
    margin-right: auto;
    margin-left: 0;
}

.map-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    transition: transform 0.3s ease;
}

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

.map-card-icon {
    width: 48px;
    height: 48px;
    background: #1f2937;
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.map-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #1f2937;
}

.map-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0;
    line-height: 1.5;
}

/* Center Column */
.map-col-center {
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-brand-card {
    background: linear-gradient(135deg, #1f1f1f 0%, #676767 100%);
    padding: 2.5rem 3rem;
    border-radius: 30px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
    min-width: 220px;
    text-align: center;
}

.center-logo {
    width: 60px;
    height: 60px;
    filter: brightness(0) invert(1);
}

.center-brand-card h2 {
    color: white;
    font-size: 1.5rem;
    margin: 0;
}

/* Connectors */
.map-connector {
    position: relative;
    width: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Connectors - Electric Neuron Effect */
/* Base Line Style with animation support */
.connector-spine-left,
.connector-spine-right,
.connector-bridge-left,
.connector-bridge-right,
.connector-arm-top-left,
.connector-arm-bottom-left,
.connector-arm-middle-left,
.connector-arm-top-right,
.connector-arm-bottom-right,
.connector-arm-middle-right {
    position: absolute;
    /* Base color is grey, but we use a gradient for the pulse */
    background: linear-gradient(90deg, #e2e8f0 0%, #e2e8f0 40%, #2b2b2b 50%, #e2e8f0 60%, #e2e8f0 100%);
    background-size: 200% 200%;
}

/* Vertical Spines - Flow Down */
.connector-spine-left,
.connector-spine-right {
    top: 16%;
    bottom: 16%;
    width: 2px;
    left: 50%;
    transform: translateX(-50%);
    /* Vertical Gradient Pulse */
    background: linear-gradient(180deg, #e2e8f0 0%, #e2e8f0 40%, #2b2b2b 50%, #e2e8f0 60%, #e2e8f0 100%);
    background-size: 200% 200%;
    animation: neuronPulseVertical 3s infinite linear;
}

/* Left Side Horizontal Lines (Arms & Bridge) - Flow Left to Right (towards center) */
.connector-arm-top-left,
.connector-arm-bottom-left,
.connector-arm-middle-left,
.connector-bridge-left {
    height: 2px;
    background: linear-gradient(90deg, #e2e8f0 0%, #e2e8f0 40%, #2b2b2b 50%, #e2e8f0 60%, #e2e8f0 100%);
    background-size: 200% 200%;
    animation: neuronPulseHorizontal 3s infinite linear;
}

/* Right Side Horizontal Lines - Flow Right to Left (towards center) */
/* Note: For Gradient to flow Right to Left, we animate background position in reverse or flip gradient */
.connector-arm-top-right,
.connector-arm-bottom-right,
.connector-arm-middle-right,
.connector-bridge-right {
    height: 2px;
    background: linear-gradient(270deg, #e2e8f0 0%, #e2e8f0 40%, #2b2b2b 50%, #e2e8f0 60%, #e2e8f0 100%);
    background-size: 200% 200%;
    animation: neuronPulseHorizontalReverse 3s infinite linear;
}

/* Specific Positioning Adjustments (overriding repeats if necessary) */
.connector-bridge-left {
    top: 50%;
    right: 0;
    left: 50%;
    width: 50%;
    transform: translateY(-50%);
}

.connector-bridge-right {
    top: 50%;
    left: 0;
    right: 50%;
    width: 50%;
    transform: translateY(-50%);
}

.connector-arm-top-left,
.connector-arm-top-right {
    top: 16%;
    width: 50%;
}

.connector-arm-bottom-left,
.connector-arm-bottom-right {
    bottom: 16%;
    width: 50%;
}

.connector-arm-middle-left,
.connector-arm-middle-right {
    top: 50%;
    width: 50%;
}

.connector-arm-top-left,
.connector-arm-bottom-left,
.connector-arm-middle-left {
    left: 0;
}

.connector-arm-top-right,
.connector-arm-bottom-right,
.connector-arm-middle-right {
    right: 0;
    left: 50%;
}

/* Keyframes */
@keyframes neuronPulseHorizontal {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }

    /* Moves Right */
}

/* For Left to Right logic: 
   Standard Gradient 90deg is Left-Color to Right-Color.
   Moving Background Position from 100% to 0% moves it. 
   Let's ensure the pulse moves towards center.
   Center is at Right for Left-Side lines.
*/

@keyframes neuronPulseVertical {
    0% {
        background-position: 0 100%;
    }

    100% {
        background-position: 0 -100%;
    }
}

@keyframes neuronPulseHorizontalReverse {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* Dots at intersection - Make them glow orange too */
.connector-spine-left::before,
.connector-spine-right::before,
.connector-spine-left::after,
.connector-spine-right::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #2b2b2b;
    /* Changed from Orange tint */
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(43, 43, 43, 0.5);
}

.connector-spine-left::before,
.connector-spine-right::before {
    top: 0;
}

.connector-spine-left::after,
.connector-spine-right::after {
    bottom: 0;
}


/* Responsive */
@media (max-width: 992px) {
    .service-map-container {
        flex-direction: column;
        gap: 2rem;
    }

    .map-connector {
        display: none;
    }

    .map-col-center {
        order: -1;
        padding: 0;
        margin-bottom: 2rem;
    }

    .map-col-side {
        width: 100%;
        max-width: 400px;
    }
}

/* AI Tools Section */
.ai-tools {
    padding: 2rem 0 0 0;
}

.ai-tools-wrapper {
    background: #ffffff;
    border-radius: 20px;
    padding: 6rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.ai-tools-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 100px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.dot-small {
    width: 6px;
    height: 6px;
    background-color: #1f2937;
    border-radius: 50%;
}

.ai-tools-heading {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    color: #1f2937;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

.ai-tools-desc {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #4b5563;
    max-width: 800px;
    margin-bottom: 3rem;
}

.btn-ai-tools {
    display: inline-block;
    background-color: #1f2937;
    color: #ffffff;
    padding: 1rem 2.5rem;
    border-radius: 100px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.btn-ai-tools:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    background-color: #000000;
}

@media (max-width: 768px) {
    .ai-tools-heading {
        font-size: 2.5rem;
    }

    .ai-tools-desc {
        font-size: 1rem;
    }

    .ai-tools-wrapper {
        padding: 4rem 1.5rem;
    }
}


/* Floating Tool Logos */
/* Floating Tool Logos */
.ai-tools-wrapper {
    position: relative;
    overflow: visible;
    /* Allow overlap */
}

.tool-logo-card {
    position: absolute;
    width: 150px;
    height: 100px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: transform 0.3s ease;
    animation: floatLogo 6s ease-in-out infinite;
    padding: 0;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

.tool-logo-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tool-logo-card:hover {
    transform: scale(1.1) rotate(0deg) !important;
    z-index: 12;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.15));
}

/* Positions - Pushed outwards to avoid text overlap */

/* Top Left - Office 365 */
.card-pos-1 {
    top: 5%;
    left: 5%;
    transform: rotate(-12deg);
    animation-delay: 0s;
    --rotation: -12deg;
}

/* Top Right - OpenAI */
.card-pos-2 {
    top: 5%;
    right: 5%;
    transform: rotate(12deg);
    animation-delay: 2s;
    --rotation: 12deg;
}

/* Middle Left - Gemini */
.card-pos-3 {
    top: 35%;
    left: -2%;
    transform: rotate(15deg);
    animation-delay: 1s;
    --rotation: 15deg;
}

/* Middle Right - Zapier */
.card-pos-4 {
    top: 35%;
    right: -2%;
    transform: rotate(-10deg);
    animation-delay: 3s;
    --rotation: -10deg;
}

/* Bottom Left - Salesforce */
.card-pos-5 {
    bottom: 5%;
    left: 5%;
    transform: rotate(-8deg);
    animation-delay: 1.5s;
    --rotation: -8deg;
}

/* Bottom Right (Inner) - Meta */
.card-pos-6 {
    bottom: 5%;
    right: 5%;
    transform: rotate(8deg);
    animation-delay: 2.5s;
    --rotation: 8deg;
}

/* Bottom Right (Outer) - WhatsApp (Moved from Center) */
.card-pos-7 {
    bottom: 25%;
    right: 2%;
    top: auto;
    left: auto;
    transform: rotate(-5deg);
    animation-delay: 4s;
    --rotation: -5deg;
}

/* Floating Animation */
@keyframes floatLogo {

    0%,
    100% {
        transform: translateY(0) rotate(var(--rotation, 0deg));
    }

    50% {
        transform: translateY(-10px) rotate(var(--rotation, 0deg));
    }
}

/* Mobile: Hide or re-flow */
@media (max-width: 992px) {
    .tool-logo-card {
        width: 100px;
        height: 80px;
    }

    .card-pos-1 {
        left: 2%;
        top: 5%;
    }

    .card-pos-2 {
        right: 2%;
        top: 5%;
    }

    .card-pos-3 {
        top: 30%;
        left: -5%;
    }

    .card-pos-4 {
        top: 30%;
        right: -5%;
    }

    .card-pos-5 {
        bottom: 5%;
        left: 2%;
    }

    .card-pos-6 {
        bottom: 5%;
        right: 2%;
    }

    .card-pos-7 {
        bottom: 20%;
        right: -5%;
    }
}

@media (max-width: 768px) {
    .tool-logo-card {
        display: none;
    }
}

/* Additional Logo Positions */
.card-pos-3 {
    top: 45%;
    left: 4%;
    transform: rotate(15deg);
    animation-delay: 1s;
    --rotation: 15deg;
}

.card-pos-4 {
    top: 45%;
    right: 4%;
    transform: rotate(-10deg);
    animation-delay: 3s;
    --rotation: -10deg;
}

.card-pos-5 {
    bottom: 12%;
    left: 10%;
    transform: rotate(-8deg);
    animation-delay: 1.5s;
    --rotation: -8deg;
}

.card-pos-6 {
    bottom: 12%;
    right: 10%;
    transform: rotate(8deg);
    animation-delay: 2.5s;
    --rotation: 8deg;
}

.card-pos-7 {
    top: 23%;
    right: 78%;
    margin-left: -90px;
    /* Half of width (180/2) */
    transform: rotate(0deg);
    animation-delay: 4s;
    --rotation: 0deg;
}

/* Update mobile rules for new cards */
@media (max-width: 992px) {
    .card-pos-3 {
        top: 35%;
        left: 0%;
    }

    .card-pos-4 {
        top: 35%;
        right: 0%;
    }

    .card-pos-5 {
        bottom: 10%;
        left: 5%;
    }

    .card-pos-6 {
        bottom: 10%;
        right: 5%;
    }

    .card-pos-7 {
        bottom: 2%;
        left: 50%;
        margin-left: -60px;
        /* Half of tablet size (120/2) */
    }
}

/* Mobile Logo Visibility & Positioning Override */
@media (max-width: 768px) {
    .tool-logo-card {
        display: flex !important;
        width: 60px !important;
        height: 40px !important;
        border-radius: 12px;
        opacity: 0.9;
        filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
    }

    /* Pushed to edges to avoid covering text */
    .card-pos-1 {
        top: 7%;
        left: 5%;
        transform: rotate(-5deg);
    }

    .card-pos-2 {
        top: 18%;
        right: 14%;
        transform: rotate(5deg);
    }

    /* Middle ones slightly higher to avoid text body */
    .card-pos-3 {
        top: 16%;
        left: 14%;
        transform: rotate(10deg);
    }

    .card-pos-4 {
        top: 8%;
        right: 5%;
        transform: rotate(-10deg);
    }

    /* Lower ones */
    .card-pos-5 {
        bottom: 5%;
        left: 2%;
        transform: rotate(-5deg);
    }

    .card-pos-6 {
        bottom: 5%;
        right: 2%;
        transform: rotate(5deg);
    }

    /* WhatsApp - Bottom Right corner */
    .card-pos-7 {
        top: auto !important;
        left: auto !important;
        bottom: 20% !important;
        right: 3% !important;
        margin: 0 !important;
        transform: rotate(0deg);
    }
}

/* FAQ Section */
.faq-section {
    padding: 1rem 0 6rem 0;
    background-color: transparent;
    margin-top: 4rem;
}

.faq-header-center {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.faq-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1.2rem;
    background: #ffffff;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.dot-black {
    width: 6px;
    height: 6px;
    background-color: #1f2937;
    border-radius: 50%;
}

.faq-heading-large {
    font-size: 3rem;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -0.02em;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

.faq-question {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #fff;
    user-select: none;
}

.faq-question h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f2937;
}

.faq-toggle {
    width: 32px;
    height: 32px;
    background: #1f2937;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
    flex-shrink: 0;
}

.faq-toggle i {
    color: white;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
    background: #4b5563;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), padding 0.3s ease;
    background: #fff;
    padding: 0 2rem;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    /* Transition to ample height */
    padding-bottom: 2rem;
}

.faq-answer p {
    color: var(--text-muted);
    font-size: 1rem;
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .faq-heading-large {
        font-size: 2rem;
    }

    .faq-question {
        padding: 1.25rem 1.5rem;
    }

    .faq-question h3 {
        font-size: 1rem;
        padding-right: 1rem;
    }
}

/* Contact Details Section */
.contact-details {
    padding: 60px 0;
    /* Spacing below hero */
}

.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    justify-content: center;
}

.contact-card {
    background: #f8fafc;
    /* Very light grey/white */
    border-radius: 30px;
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    /* Soft neumorphic-like shadow */
    box-shadow:
        10px 10px 30px rgba(0, 0, 0, 0.05),
        -10px -10px 30px rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}

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

.contact-icon-box {
    width: 70px;
    height: 70px;
    background: #1f2937;
    /* Dark color */
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    /* Drop shadow for the icon itself to make it pop */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.contact-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 0.5rem;
}

.contact-card p {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 0;
}

/* Badge specific for the first card */
.card-badge-setting {
    position: absolute;
    top: 40px;
    left: -20px;
    width: 50px;
    height: 50px;
    background: #1f2937;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* Map Section */
.map-section {
    padding-bottom: 60px;
}

.map-card-wrapper {
    background: #ffffff;
    border-radius: 30px;
    padding: 10px;
    /* Small padding like a frame */
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.map-card-wrapper iframe {
    border-radius: 20px;
    display: block;
}

/* Under Construction Section */
.under-construction {
    padding: 2rem 0;
    text-align: center;
}

.uc-card {
    background: var(--bg-card);
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border-color);
}

.uc-image {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

/* Umrah CRM Page Styles */
.crm-intro {
    padding: 6rem 0 10rem 0;
    overflow: hidden;
}

.crm-intro-wrapper {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.crm-intro-left,
.crm-intro-right {
    flex: 1;
}

.crm-dashboard-img {
    width: 150%;
    max-width: none;
    margin-left: -15%;
    margin-top: 1rem;
    border-radius: 20px;
    border: 8px solid white;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);

    /* Animation Initial State */
    opacity: 0;
    transform: translateX(100px) rotate(15deg);
    transition: all 1s ease-out;
}

.crm-dashboard-img.visible {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
}

.crm-dashboard-img:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
    z-index: 10;
    position: relative;
}

@media (max-width: 768px) {
    .crm-intro-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 3rem;
    }

    .crm-dashboard-img {
        width: 100%;
        margin-left: 0;
        margin-top: 2rem;
        transform: rotate(0deg) translateX(50px);
        /* Init state mobile */
    }

    .crm-dashboard-img.visible {
        transform: rotate(0deg) translateX(0);
    }

    .crm-intro {
        padding-bottom: 6rem;
    }
}

.crm-feature-card {
    background: #212121;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 2rem;
    box-shadow:
        10px 10px 20px #010101,
        -5px -5px 15px rgba(255, 255, 255, 0.05),
        inset 0 4px 0 rgba(255, 255, 255, 0.05);
    /* Top lip highlight */
    margin-top: 2rem;
    max-width: 500px;
    color: white;
}

.crm-feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: #60a5fa;
    /* Lighter blue for dark bg */
}

.crm-feature-card p {
    font-size: 1rem;
    color: #a1a1aa;
    /* Light grey text */
    margin-bottom: 0;
    line-height: 1.6;
}

/* Product Features Section */
.product-features {
    padding: 0 0 4rem 0;
}

.product-features-wrapper {
    background-color: #f2f2f2;
    border-radius: 10px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.product-features-left {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 3rem;
}

.product-features-right {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 6rem 3rem 3rem 3rem;
}

@media (max-width: 968px) {
    .product-features-wrapper {
        flex-direction: column;
    }

    .product-features-left,
    .product-features-right {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 3rem 2rem;
        /* Reduced padding for mobile */
    }

    .product-features-right {
        order: -1;
        /* Ensure text comes first on mobile */
        padding-top: 4rem;
        padding-bottom: 2rem;
    }

    .automate-card {
        margin-top: 2rem !important;
        /* Reset the large desktop margin */
        width: 100%;
        /* Full width on mobile */
        max-width: 100%;
    }
}

/* Feature Badge (White pill with dot) */
.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.5rem 1.2rem;
    background-color: #ebebeb;
    /* Requested bg */
    border-radius: 20px;
    /* 3D inset shadow */
    box-shadow: inset 3px 3px 6px #d7d7d7, inset -3px -3px 6px #ffffff;
    font-weight: 600;
    color: #2752db;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    border: none;
}

.feature-badge .badge-dot {
    display: block;
    width: 8px;
    height: 8px;
    background-color: #2752db;
    border-radius: 50%;
}

.product-display-card {
    background: #f8f8f8;
    height: 100%;
    min-height: 200px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    /* Requested complex 3D shadow */
    box-shadow:
        0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588),
        0px 3px 3px 0px rgba(0, 0, 0, 0.102),
        inset 0px -8px 0px 0px rgba(0, 0, 0, 0.051),
        inset 0px 4px 0px 0px rgba(255, 255, 255, 0.6);
}

/* Feature List Styles */
.feature-list {
    list-style: none;
    padding: 2rem;
    width: 100%;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    /* Small line below */
    font-size: 1rem;
    color: #4b5563;
    /* Dark gray text */
    font-weight: 500;
}

.feature-item:last-child {
    border-bottom: none;
    /* Remove border for last item */
}

.feature-icon {
    color: #000000;
    /* Black tick mark */
    font-size: 1rem;
    flex-shrink: 0;
}

/* Update Product Display Card Layout */
.product-display-card {
    flex-direction: column;
    justify-content: space-between;
    /* Distribute space */
}

/* Book Demo Button Styles */
.btn-book-demo {
    background-color: #000000;
    color: #ffffff;
    padding: 0.8rem 2.5rem;
    border-radius: 50px;
    /* Capsule shape */
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    border: none;
    cursor: pointer;
    margin-bottom: 2rem;

    /* 3D Effect */
    box-shadow:
        0 6px 0 #2a2a2a,
        0 15px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    top: 0;
}

.btn-book-demo:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow:
        0 8px 0 #2a2a2a,
        0 20px 25px rgba(0, 0, 0, 0.2);
}

.btn-book-demo:active {
    transform: translateY(4px);
    box-shadow:
        0 2px 0 #2a2a2a,
        inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Automate Inquiry Card */
.automate-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #ffffff;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    /* Fully rounded/pill shape as requested (50%) */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    border: 1px solid rgba(0, 0, 0, 0.05);
    max-width: 400px;
    /* Limit width */
    margin-top: 12rem;
    transition: transform 0.3s ease;
}

.automate-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

.automate-icon-wrapper {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

.automate-content h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}

/* Step Number Style for Service Map Cards */
.map-card {
    position: relative;
    overflow: hidden;
}

.step-number {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 4.5rem;
    /* Increased size */
    font-weight: 900;
    /* Increased weight */
    color: #dedede;
    /* Requested color */
    line-height: 1;
    pointer-events: none;
    font-family: var(--font-primary);
    opacity: 0.5;
    /* Keeping some opacity as implicit request or to blend #dedede better, but user said keep opacity low in prev turn, and now make color #dedede. #dedede is light. I'll stick to color #dedede and remove opacity property to be safe, or set opacity 1. #dedede is lighter than rgba(0,0,0,0.05) ~ #f2f2f2? No #dedede is darker. #dedede is rgb(222,222,222). approx 13% gray. */
    /* Let's remove opacity and trust the color. */
    opacity: 1;
    z-index: 0;
}

/* Ensure content is above number if they overlap */
.map-card h3,
.map-card p,
.map-card-icon {
    position: relative;
    z-index: 1;
}

/* CTA Section Styles */
.cta-section {
    padding: 0 0 6rem 0;
    /* Align with other sections spacing */
}

.cta-card {
    background-color: #ffffff;
    /* Requested bg */
    border-radius: 100px;
    /* High value for capsule/pill shape (50% equivalent for standard rect) */
    padding: 3rem 4rem;
    /* Small height via padding control */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    max-width: 900px;
    /* Contain width for better Pill look */
    margin: 0 auto;

    box-shadow: 0px 7.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}



.btn-whatsapp-cta {
    background-color: #25D366;
    /* WhatsApp Green */
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    white-space: nowrap;
    /* Prevent text wrap */
    flex-shrink: 0;
    /* Prevent squash */
}

.btn-whatsapp-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    color: white;
}

@media (max-width: 768px) {
    .cta-card {
        flex-direction: column;
        text-align: center;
        border-radius: 30px;
        /* Less rounded on mobile for space */
        padding: 2rem;
    }


}