/* ============================================================
   EZYGODIGI GLOBAL THEME v1.1
   ============================================================ */

:root {
    /* --- Brand Colors --- */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --dark-navy: #1e293b;
    --text-main: #2c3e50;
    --text-muted: #666666;
    --bg-light: #f8f9fa;
    --white: #ffffff;
    --accent-success: #10b981;
    --accent-yellow: #fbbf24;

    /* --- Hero & Glass Effects --- */
    --hero-overlay: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    --glass-bg: rgba(255, 255, 255, 0.14);
    --glass-border: rgba(255, 255, 255, 0.35);

    /* --- Typography --- */
    --font-main: 'Poppins', sans-serif;
    
    /* --- Spacing & Radius --- */
    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-pill: 50px;
    --container-width: 1200px;
    --section-padding: 80px 20px;
}


/* PREVENTS ABRUPT JUMPING */
html {
    scroll-behavior: smooth;
}

#showcase {
    /* Adjust this to match your header height so the text isn't cut off */
    scroll-margin-top: 100px;
    /* Added subtle top border to create a soft visual divide from the Hero */
    border-top: 1px solid rgba(0,0,0,0.03);
    padding-top: 100px; 
}

/* SUBTLE HOVER HINT */
.hero-buttons .btn-primary:hover {
    letter-spacing: 0.5px;
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
}

/* Ensure secondary image doesn't break flow on small screens */
@media (max-width: 900px) {
    #showcase {
        padding-top: 60px;
        scroll-margin-top: 80px;
    }
}

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

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

/* --- Layout Utilities --- */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding { padding: var(--section-padding); }

/* --- Global Reusable Split Layout (Left/Right) --- */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* --- Global Button System --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    gap: 10px;
    font-size: 16px;
    text-align: center;
}

.btn-primary {
    background: var(--primary-gradient);
    color: var(--white);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.btn-glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--white);
    backdrop-filter: blur(10px);
}

.btn-pill { border-radius: var(--radius-pill); }

/* --- Global Card Style --- */
.ez-card {
    background: var(--white);
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

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

/* --- Global Form Elements --- */
.form-group { margin-bottom: 25px; }

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
}

.form-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e0e0e0;
    border-radius: var(--radius-md);
    font-family: var(--font-main);
    font-size: 15px;
    transition: all 0.3s;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

/* --- Global FAQ Accordion --- */
.faq-item {
    background: var(--bg-light);
    margin-bottom: 15px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.faq-item summary {
    padding: 20px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
}

/* --- Responsive Behavior --- */
@media (max-width: 992px) {
    .split-layout { grid-template-columns: 1fr; gap: 40px; }
    :root { 
        --section-padding: 50px 16px;
        --h1-mobile: 28px; 
    }
}
/* --- BUTTON GROUP (Add this to theme.css) --- */
.btn-group {
    display: flex;
    flex-direction: column; /* Stacked by default for Mobile */
    gap: 8px;               /* Minimal vertical distance for mobile */
    width: 100%;
    max-width: 280px;       /* Keeps mobile buttons from being too wide */
    margin: 0 auto;         /* Centers the group */
}

.btn-group .btn {
    width: 100%;            /* Buttons take full width of the small container */
}

/* --- DESKTOP ADJUSTMENT --- */
@media (min-width: 769px) {
    .btn-group {
        flex-direction: row; /* Side-by-side for Desktop */
        justify-content: center;
        max-width: none;     /* Removes width restriction on desktop */
        gap: 15px;           /* Slightly wider gap for desktop elegance */
    }

    .btn-group .btn {
        width: auto;         /* Buttons only take as much space as needed */
        min-width: 180px;    /* Ensures symmetrical button sizes */
    }
}

/* Whatsapp Icon*/

/* Define the WhatsApp Icon once here */
.icon-whatsapp {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor; /* Inherits text color (white) */
    
    /* The Magic: This "masks" the background color into the shape of the SVG */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.1 0-65.6-8.9-93.9-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-5.5-2.8-23.2-8.5-44.2-27.1-16.4-14.6-27.4-32.7-30.6-38.1-3.2-5.5-.3-8.5 2.5-11.2 2.5-2.5 5.5-6.4 8.3-9.7 2.8-3.3 3.7-5.7 5.5-9.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 13.3 5.7 23.5 9.2 31.6 11.8 13.3 4.2 25.4 3.6 35 2.2 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.1 0-65.6-8.9-93.9-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-5.5-2.8-23.2-8.5-44.2-27.1-16.4-14.6-27.4-32.7-30.6-38.1-3.2-5.5-.3-8.5 2.5-11.2 2.5-2.5 5.5-6.4 8.3-9.7 2.8-3.3 3.7-5.7 5.5-9.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 13.3 5.7 23.5 9.2 31.6 11.8 13.3 4.2 25.4 3.6 35 2.2 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") no-repeat center;
}