:root {
    --color-primary: #0F172A; /* Deep Slate Blue */
    --color-secondary: #4ADE80; /* Vibrant Light Green */
    --color-text-light: #E2E8F0;
    --transition-speed: 0.35s; /* Used for smooth transitions */
}


.about-faq-snippet {
background: var(--color-background-mid, #F1F5F9); 
padding: 6rem 0;
}

.faq-header {
text-align: center;
margin-bottom: 3rem;
}

.faq-heading {
font-size: clamp(2rem, 4vw, 3rem);
color: var(--color-primary);
margin-bottom: 0.5rem;
font-weight: 800;
}

.faq-subtext {
font-size: 1.1rem;
color: var(--color-grey);
max-width: 700px;
margin: 0 auto;
}

.faq-list {
max-width: 700px;
margin: 0 auto;
}

.faq-item {
margin-bottom: 1rem;
border-radius: 12px;
background: var(--color-primary);
color: var(--color-text-light);
overflow: hidden;
transition: box-shadow var(--transition-speed);
}

.faq-item:hover {
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

.faq-item.is-open {
box-shadow: 0 0 0 2px var(--color-secondary);
}

.faq-item summary {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
font-weight: 700;
font-size: 1.15rem;
cursor: pointer;
list-style: none; /* Hide default triangle icon */
position: relative;
transition: color var(--transition-speed);
}

/* Re-insert a custom list marker visually */
.faq-item summary::before {
content: '';
display: none;
}

.faq-item.is-open summary {
color: var(--color-secondary); /* Green text when open */
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-item summary i {
font-size: 0.8rem;
color: var(--color-secondary);
transition: transform var(--transition-speed);
}

.faq-item.is-open summary i {
transform: rotate(180deg);
}


.faq-answer {
padding: 0 2rem; 
max-height: 0; 
overflow: hidden;
transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
font-size: 1rem;
line-height: 1.6;
color: #94A3B8;
}

.faq-item.is-open .faq-answer {
max-height: 500px; 
padding: 1rem 2rem 2rem 2rem;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
.about-faq-snippet {
padding: 4rem 0;
}
.faq-item summary {
font-size: 1rem;
padding: 1rem 1.2rem;
}
.faq-answer {
padding: 0 1.2rem 1.5rem 1.2rem;
}
.faq-item.is-open .faq-answer {
padding: 1rem 1.2rem 1.5rem 1.2rem;
}
}

/* --- Required Variables for Context --- */
:root {
    --color-primary: #0F172A; /* Deep Slate Blue */
    --color-secondary: #4ADE80; /* Vibrant Light Green */
    --color-text-light: #E2E8F0;
    --transition-speed: 0.35s; /* Used for smooth transitions */
}

/* ----------------------------------- */
/* CTA SECTION STYLES */
/* ----------------------------------- */
.about-cta {
    background: var(--color-primary); /* Deep Slate Background */
    padding: 4rem 0; /* Reduced vertical padding from 6rem to 4rem */
    text-align: center;
    position: relative;
    z-index: 10;
}
.about-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Subtle glow/shadow from the green accent at the edges */
    box-shadow: 0 0 50px rgba(74, 222, 128, 0.2) inset;
    pointer-events: none;
}
.about-cta h2 {
    color: #ffffff; /* White Heading */
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 1rem;
    font-weight: 800;
}
.about-cta p {
    color: var(--color-text-light); /* Light Grey Text */
    font-size: 1.1rem; /* Slightly reduced paragraph font size from 1.2rem */
    max-width: 800px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
}

/* CTA Button Styling */
.cta-btn {
    display: inline-block;
    padding: 1rem 3rem;
    background: var(--color-secondary); /* Light Green Button */
    color: var(--color-primary); /* Dark Text on Green */
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: all var(--transition-speed);
    box-shadow: 0 5px 20px rgba(74, 222, 128, 0.5); /* Green Shadow */
}
.cta-btn:hover {
    background: #ffffff; /* White background on hover */
    color: var(--color-primary); /* Dark text remains */
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 30px rgba(74, 222, 128, 0.8); 
}

/* Responsive adjustments for smaller screens */
@media (max-width: 992px) {
    .about-cta {
        padding: 3rem 0; /* Reduced mobile vertical padding from 4rem to 3rem */
    }
    .about-cta h2 {
        font-size: 2.5rem;
    }
    .about-cta p {
        font-size: 1rem;
    }
}

/* ---------------------------------------------------------------------------------- */
/* ---------- WHO IS SABIA DIGITAL SECTION - Base Styles (Desktop First) ---------- */
/* ---------------------------------------------------------------------------------- */

.who-section {
  /* Use fluid padding (e.g., 5% horizontal) to better adapt to width, but keeping original values */
  width: 100%;
  padding: 6rem 2rem;
  background: #f8fafc;
}

.who-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap; /* Allows wrapping if the screen is too narrow */
  gap: 2rem;
}

/* Left Column - Heading and Label */
.who-left {
  flex: 1;
  /* min-width ensures the column takes up at least this much space before wrapping/stacking. 
     This is mainly relevant for wide screens. */
  min-width: 320px; 
}

.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}

.section-label span {
  display: inline-block;
  width: 50px;
  height: 3px;
  background: #22c55e; /* Green line */
  border-radius: 2px;
}

.section-label p {
  font-weight: 600;
  color: #22c55e;
  margin: 0;
}

.who-left h2 {
  font-size: 2.5rem; /* Large desktop heading size */
  font-weight: 800;
  color: #0f172a;
  margin-top: 1rem;
  line-height: 1.3;
}

/* Right Column - Content/Paragraphs */
.who-right {
  flex: 1.5;
  min-width: 350px; /* Relevant for wide screens */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #334155;
  font-size: 1.05rem; /* Slightly larger text for readability */
  line-height: 1.8;
}

.who-right p {
  margin: 0;
  text-align: left;
}


/* ---------------------------------------------------------------------------------- */
/* ---------- RESPONSIVE - Tablet / Medium Screens (Max 992px) ---------------------- */
/* ---------------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .who-container {
    /* Stack the two columns vertically */
    flex-direction: column;
    text-align: center;
  }

  .who-left, .who-right {
    /* Remove fixed minimum width constraints to allow them to scale to 100% width */
    min-width: auto;
    width: 100%;
  }
  
  .who-left {
    /* Ensure the left column (heading) aligns correctly when stacked */
    text-align: center;
  }
  
  .who-right {
    /* Ensure the right column (paragraphs) aligns correctly when stacked */
    text-align: center;
    font-size: 1rem; /* Slightly reduce body font size */
  }

  .who-left h2 {
    font-size: 2rem; /* Reduce heading size for tablets */
  }

  /* Center the label line and text for the stacked layout */
  .section-label {
    justify-content: center;
  }

  .who-right p {
    /* Realign paragraphs to be centered on tablet/mobile screens for better aesthetics */
    text-align: center;
  }
}


/* ---------------------------------------------------------------------------------- */
/* ---------- RESPONSIVE - Small Mobile Screens (Max 576px) ------------------------- */
/* ---------------------------------------------------------------------------------- */
@media (max-width: 576px) {
  .who-section {
    padding: 4rem 1.5rem; /* Reduce vertical and horizontal padding for smaller screens */
  }

  .who-left h2 {
    font-size: 1.75rem; /* Further reduce heading size for small phones */
  }

  .section-label span {
    width: 40px; /* Slightly shorten the green line */
  }

  .who-right {
    font-size: 0.95rem; /* Fine-tune body text size for optimal mobile reading */
  }
}


/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
  .why-sabia2 .why-content {
    flex-direction: column;
  }

  .why-sabia2 .why-center {
    order: -1;
  }

  .why-sabia2 .why-left,
  .why-sabia2 .why-right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .why-card2 {
    width: 45%;
    min-width: 260px;
  }
}

@media (max-width: 600px) {
  .who-we-are h2 {
    font-size: 2rem;
    text-align: center;
  }

  .who-we-are p {
    text-align: center;
  }

  .why-card2 {
    width: 100%;
  }
}
        /* Define custom styles and colors for the premium look */
        :root {
            /* Theme Colors */
            --color-primary: #10B981; /* Light Green (Emerald 500) */
            --color-slate-950: #020617;
            --color-yellow-touch: #FBBF24; /* Minimal Yellow (Amber 400) */
        }
        .why-sabia-new {
            /* Background image and size settings */
            background-image: url('../images/hero-home-sabia-digital.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            /* Height is slightly bigger than the cards */
            padding: 4rem 0 8rem;
            font-family: 'Inter', sans-serif;
            overflow: hidden; /* Ensure overlay doesn't create scrollbars */
        }

        /* 1. Dark Overlay (Slate 950, 80% opacity) */
        .why-sabia-new::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(2, 6, 23, 0.85); /* Slate 950 with 85% opacity */
            z-index: 1;
        }

        /* 2. Intro Text Styling (White against the dark overlay) */
        .why-intro {
            position: relative;
            z-index: 2;
            text-align: center;
            margin-bottom: 3rem;
        }

        .section-subtitle {
            color: var(--color-primary); /* Light Green */
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.5rem;
        }

        .intro-line {
            display: inline-block;
            width: 3rem;
            height: 3px;
            background: var(--color-yellow-touch); /* Minimal yellow touch */
            border-radius: 9999px;
            margin-bottom: 1rem;
        }

        .why-sabia-new h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #FFFFFF; /* White text */
        }

        /* 3. Horizontal Card Grid */
        .why-cards-grid {
            position: relative;
            z-index: 2;
            display: grid;
            gap: 1.5rem;
            padding: 0 1rem;
        }

        /* Responsive Grid: 1 column -> 2 columns -> 4 columns */
        @media (min-width: 640px) {
            .why-cards-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (min-width: 1024px) {
            .why-cards-grid {
                grid-template-columns: repeat(4, 1fr);
                max-width: 1200px;
                margin: 0 auto;
            }
        }

        /* 4. Individual Card Styling (Slightly Transparent) */
        .why-card-item {
            /* White background with 90% opacity (Slightly Transparent) */
            background-color: rgba(255, 255, 255, 0.9);
            padding: 1.75rem;
            border-radius: 0.75rem;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
            border-top: 5px solid var(--color-primary); /* Premium green accent */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .why-card-item:hover {
            transform: translateY(-8px); /* Lift on hover */
            box-shadow: 0 20px 50px rgba(16, 185, 129, 0.3); /* Green shadow for emphasis */
        }

        .why-card-item h3 {
            color: var(--color-slate-950);
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .why-card-item p {
            color: #475569; /* Slate 600 */
            font-size: 1rem;
            line-height: 1.6;
        }

        /* Icon Styling (Font Awesome) */
        .card-icon {
            font-size: 2.25rem;
            color: var(--color-primary); /* Light Green icon color */
            margin-bottom: 1.25rem;
            line-height: 1;
        }

        .card-icon i {
            /* Ensure the light/regular icon style is used and looks clean */
            font-weight: 300; /* Force a lighter look if possible */
        }

/* Color Variables for consistency */
:root {
    --color-primary: #10B981; /* Light Green (Emerald) */
    --color-text-dark: #1f2937; /* Dark Grey for headings (Slate 800) */
    --color-text-body: #4b5563; /* Medium Grey for body (Slate 600) */
    --color-border-light: #e5e7eb; /* Very light grey border (Gray 200) */
    --color-bg-light: #f9fafb; /* Section background (Gray 50) */
    --color-bg-white: #ffffff;
}

/* SECTION CONTAINER */
.about-faq-snippet {
    padding: 6rem 0;
    background-color: var(--color-bg-light); /* Subtle light grey background */
    font-family: 'Inter', sans-serif;
}

/* Container limits width and adds padding */
.about-faq-snippet .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* HEADER STYLING */
.faq-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3.5rem;
}

.faq-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 0.75rem;
}

.faq-subtext {
    font-size: 1.125rem;
    color: var(--color-text-body);
}

/* FAQ LIST CONTAINER */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Spacing between items */
}

/* INDIVIDUAL FAQ ITEM (The <details> element) */
.faq-item {
    background-color: var(--color-bg-white);
    border-radius: 0.75rem; /* Rounded corners */
    border: 1px solid var(--color-border-light);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Subtle shadow for premium look */
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* Slight lift/enhanced shadow on hover */
}

/* SUMMARY / QUESTION BAR */
.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.75rem;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-dark);
    list-style: none; /* Hide default indicator */
    outline: none;
    transition: background-color 0.2s ease;
}

.faq-item summary::-webkit-details-marker,
.faq-item summary::marker {
    display: none;
}

/* Highlight for the active question when open */
.faq-item[open] summary {
    background-color: #f0fff4; /* Very slight green tint when open */
    border-bottom: 1px solid var(--color-primary); /* Green separator */
    color: var(--color-primary); /* Highlight the question text */
}

/* ICON STYLING (Chevron) */
.faq-item i.fa-chevron-down {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
    color: var(--color-primary);
}

/* Rotate icon when the details element is open */
.faq-item[open] i.fa-chevron-down {
    transform: rotate(180deg);
}

/* ANSWER CONTENT */
.faq-answer {
    padding: 0 1.75rem 1.75rem;
}

.faq-answer p {
    color: var(--color-text-body);
    font-size: 1rem;
    line-height: 1.6;
    padding-top: 1.25rem; /* Space below the separator line */
}