@font-face {
font-family: "Galano";
src: url("/-global-assets/fonts/GalanoGrotesqueRegular.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Galano";
src: url("/-global-assets/fonts/GalanoGrotesque-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}

/* =========================================================
FAQ HEADING
========================================================= */

.clear-things-up-heading {
text-align: center;
margin-top: 100px;
margin-bottom: 60px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
width: 100%;
padding: 0 20px;
}

.clear-things-up-heading .text-aqua {
background: linear-gradient(
90deg,
#02bcdd 0%,
#06d1e5 30%,
#64eda8 68%,
#d0f88d 100%
);

color: transparent;

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

background-clip: text;

font-size: clamp(2.2rem, 6vw, 3.8rem);
font-weight: 800;
line-height: 1.15;
}

.clear-things-up-heading span:not(.text-aqua) {

color: #ffffff;
font-size: clamp(.9rem,3vw,1.4rem);
max-width: 900px;
opacity: .85;
line-height: 1.5;
font-weight: 400;
}

/* =========================================================
FAQ GRID — DESKTOP (above 767px, untouched)
========================================================= */

.faq-grid-section {
width: 100%;
max-width: 1150px;
margin: 0 auto 120px;
padding: 0 24px;
}

.faq-grid-container {
display: grid;
/* grid-template-columns: 1fr 1fr 2fr 1fr 1fr; */

grid-template-columns:
minmax(110px,1fr)
minmax(110px,1fr)
minmax(220px,2fr)
minmax(110px,1fr)
minmax(110px,1fr);
gap: 10px;
}

.faq-column {
display: flex;
flex-direction: column;
gap: 10px;
}

/* Desktop column heights — these only apply above 767px */
/* .faq-column-1 { height: 410px; }
.faq-column-2 { height: 250px; }
.faq-column-3 { height: 290px; }
.faq-column-4 { height: 220px; }
.faq-column-5 { height: 410px; } */

.faq-column-1 { min-height: 410px; }
.faq-column-2 { min-height: 290px; }
.faq-column-3 { min-height: 290px; }
.faq-column-4 { min-height: 220px; }
.faq-column-5 { min-height: 410px; }

.faq-row-bottom {
display: flex;
gap: 10px;
width: 100%;
height: 140px;
}

/* =========================================================
FAQ CARD
========================================================= */

.faq-card {
position: relative;
background: #ffffff;
color: #000c1a;
width: 100%;
padding: 24px 20px;
overflow: hidden;
cursor: pointer;
display: flex;
flex-direction: column;
box-shadow: inset -12px 0 15px -10px rgba(0,12,26,.5);
transition: transform .3s ease, box-shadow .3s ease;
}

.faq-card:hover {
transform: translateY(-4px);
}

.faq-question {
color: #000c1a;
font-size: 17px;
line-height: 1.2;
margin: 0;
}

/* =========================================================
CARD SHAPES
========================================================= */

.faq-card-c1, .faq-card-c5{
    min-height: 410px;
}
.faq-card-c1       { border-radius: 45px 10px 45px 10px; }
.faq-card-c2-top   { border-radius: 10px 45px 10px 10px; }
.faq-card-c2-bottom{ border-radius: 10px 10px 45px 10px; }
.faq-card-rainbow  { border-radius: 45px 45px 10px 10px; }
.faq-card-gradient-aqua  { border-radius: 10px 10px 10px 45px; }
.faq-card-gradient-green { border-radius: 10px 10px 10px 45px; }
.faq-card-c4       { border-radius: 45px 10px 10px 45px; }
.faq-card-c5       { border-radius: 10px 45px 10px 45px; }

/* =========================================================
CARD MIN-HEIGHTS — Desktop only (above 767px)
========================================================= */

/* @media (min-width: 768px) {
    .faq-card-c1                              { min-height: 410px; }
    .faq-card-c2-top,
    .faq-card-c2-bottom,
    .faq-card-rainbow,
    .faq-card-gradient-aqua,
    .faq-card-gradient-green                  { min-height: 140px; }
    .faq-card-c4                              { min-height: 220px; }
    .faq-card-c5                              { min-height: 410px; }
} */

/* =========================================================
DESKTOP → TABLET SHRINK
Keep same layout until 767px
========================================================= */

@media (min-width:768px) and (max-width:1150px){

    .faq-grid-section{

        max-width:100%;

        padding-left:20px;
        padding-right:20px;
    }

    .faq-grid-container{

        grid-template-columns:
        minmax(90px,1fr)
        minmax(90px,1fr)
        minmax(180px,2fr)
        minmax(90px,1fr)
        minmax(90px,1fr);
    }
    .faq-column-1,
.faq-column-2,
.faq-column-3,
.faq-column-4,
.faq-column-5{
    height:auto;
}

}
/* =========================================================
RAINBOW CARD
========================================================= */

.faq-card-rainbow {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
background: linear-gradient(
    90deg,
    #02bcdd 0%,
    #64eda8 50%,
    #d0f88d 100%
);
min-height: 120px;
}

.faq-rainbow-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.faq-card-rainbow .faq-question {
position: relative;
z-index: 2;
max-width: 80%;
}

/* =========================================================
GRADIENT CARDS
========================================================= */

.faq-card-gradient-aqua {
background: linear-gradient(135deg, #02bcdd 0%, #64eda8 100%);
}

.faq-card-gradient-green {
background: linear-gradient(135deg, #64eda8 0%, #d0f88d 100%);
}

/* =========================================================
CARD ICONS
========================================================= */

.faq-icon {
margin-top: auto;
width: auto;
height: auto;
}

.faq-card-c1 .faq-icon {
max-width: 110px;
}

.faq-card-c4 .faq-icon {
max-width: 110px;
margin-left: auto;
margin-right: auto;
}

.faq-card-c5 .faq-icon {
max-width: 95px;
margin-left: auto;
}

/* =========================================================
MODAL
========================================================= */

.faq-modal-overlay {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,12,26,.82);
backdrop-filter: blur(12px);
opacity: 0;
pointer-events: none;
transition: .4s;
}

.faq-modal-overlay.is-open {
opacity: 1;
pointer-events: auto;
}

.faq-modal-content {
width: 100%;
max-width: 1150px;
height: 450px;
background: #fff;
border-radius: 30px;
overflow: hidden;
transform: scale(.92);
transition: .4s;
}

.faq-modal-overlay.is-open .faq-modal-content {
transform: scale(1);
}

.faq-modal-header {
position: relative;
padding: 55px 80px;
background: linear-gradient(135deg, #02bcdd 0%, #64eda8 100%);
}

.faq-modal-title {
color: #000c1a;
font-size: clamp(1.4rem, 3vw, 2.15rem);
font-weight: 800;
}

.faq-modal-body {
position: relative;
display: flex;
padding: 50px 80px 65px;
flex: 1;
}

.faq-modal-text-wrapper {
width: 100%;
}

.faq-modal-text-wrapper p {
color: #334155;
line-height: 1.6;
margin-bottom: 20px;
font-size: 24px;
}

.faq-modal-illustration {
position: absolute;
right: 0vh;
max-width: 20%;
height: 25%;
bottom: 5vh;
}

.faq-close-modal-btn {
position: absolute;
top: 30px;
right: 45px;
border: none;
background: none;
cursor: pointer;
}

.faq-close-modal-btn i {
font-size: 38px;
}

/* =========================================================
UTILITY
========================================================= */

.hidden {
display: none !important;
}

/* =========================================================
MODAL — TABLET (max-width: 900px)
Only affects modal, not the grid
========================================================= */

@media (max-width: 900px) {

.faq-modal-content {
    width: calc(100% - 30px);
    height: auto;
    min-height: 500px;
}

.faq-modal-header {
    padding: 35px 30px;
}

.faq-modal-title {
    max-width: 85%;
}

.faq-modal-body {
    padding: 35px 30px;
    flex-direction: column;
}

.faq-modal-text-wrapper {
    width: 100%;
}

.faq-modal-illustration {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    margin: 25px auto 0;
    /*max-width: 220px;*/
}
}

/* =========================================================
MOBILE FAQ GRID — Breakpoint: 767px
─────────────────────────────────────────────────────────
WHY THIS APPROACH:
  • A single clean breakpoint at max-width:767px handles
    all mobile layout. The old code had two overlapping
    breakpoints (768px and 767px) that fought each other,
    plus a 1150px tablet block that destroyed the desktop
    column heights.
  • display:contents on .faq-column flattens the column
    wrappers so every .faq-card becomes a direct grid child,
    letting us place them with explicit grid-column /
    grid-row assignments.
  • .faq-row-bottom also gets display:contents so the
    aqua/green cards inside column-3 are lifted out and
    placed as direct grid children too — without this they
    were stuck inside a flex container that had no grid
    position, causing them to overflow or disappear.
  • Explicit grid-row assignments create the exact layout
    shown in the reference image:
      Row 1-2 | col 1 → c1 (tall, spans 2 rows)
      Row 1   | col 2 → c2-top
      Row 2   | col 2 → c2-bottom
      Row 3   | col 1-2 → rainbow (full width)
      Row 4   | col 1 → gradient-aqua
      Row 4   | col 2 → gradient-green
      Row 5   | col 1 → c4
      Row 5   | col 2 → c5
  • min-height on each card ensures they never shrink
    below a readable size while still allowing expansion.
========================================================= */

@media (max-width: 767px) {
    .faq-grid-section{
        max-width : 500px;
    }

    /* ── Grid container: 2 equal columns ── */
    .faq-grid-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
        /* Remove fixed heights set on desktop columns */
    }

    /* ── Flatten column wrappers ──
       display:contents removes the column div from the
       rendering tree; its children become direct grid items */
    .faq-column {
        display: contents;
    }

    /* Remove fixed heights from all columns on mobile */
    .faq-column-1,
    .faq-column-2,
    .faq-column-3,
    .faq-column-4,
    .faq-column-5 {
        height: auto;
    }

    /* ── Flatten the inner row wrapper inside column-3 ──
       Without this, .faq-card-gradient-aqua and
       .faq-card-gradient-green remain inside a flex child
       and can't be placed on the grid directly. */
    .faq-row-bottom {
        display: contents;
    }

    /* ── Base card reset for mobile ── */
    .faq-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    /* ── Text alignment ── */
    .faq-question {
        width: 100%;
        text-align: center;
        line-height: 1.4;
        margin: 0;
    }

    /* ── Cards without icons: center vertically too ── */
    .faq-card-c2-top,
    .faq-card-c2-bottom,
    .faq-card-gradient-aqua,
    .faq-card-gradient-green {
        justify-content: center;
    }

    /* ── Icons ── */
    .faq-icon {
        margin-top: 18px;
        align-self: center;
    }

    .faq-card-c1 .faq-icon,
    .faq-card-c4 .faq-icon,
    .faq-card-c5 .faq-icon {
        max-width: 90px;
    }

    /* ─────────────────────────────────────────────────
       EXPLICIT GRID PLACEMENT
       Matches the reference image exactly:
         Row 1-2  │ c1 (tall left) + c2-top (right)
         Row 2    │ c2-bottom (right)
         Row 3    │ rainbow (full width)
         Row 4    │ aqua (left) + green (right)
         Row 5    │ c4 (left) + c5 (right)
    ───────────────────────────────────────────────── */

    .faq-card-c1 {
        grid-column: 1;
        grid-row: 1 / span 2;  /* spans rows 1 & 2 to match c2-top + c2-bottom height */
        min-height: 410px;     /* never shrinks below this */
    }

    .faq-card-c2-top {
        grid-column: 2;
        grid-row: 1;
        min-height: 140px;
    }

    .faq-card-c2-bottom {
        grid-column: 2;
        grid-row: 2;
        min-height: 140px;
    }

    .faq-card-rainbow {
        grid-column: 1 / -1;  /* spans both columns */
        grid-row: 3;
        min-height: 170px;
        padding: 20px;        /* restore padding removed by desktop zero-padding */
    }

    .faq-card-gradient-aqua {
        grid-column: 1;
        grid-row: 4;
        min-height: 140px;
    }

    .faq-card-gradient-green {
        grid-column: 2;
        grid-row: 4;
        min-height: 140px;
    }

    .faq-card-c4 {
        grid-column: 1;
        grid-row: 5;
        min-height: 220px;
    }

    .faq-card-c5 {
        grid-column: 2;
        grid-row: 5;
        min-height: 410px;
    }

    /* ── Heading ── */
    .clear-things-up-heading {
        margin-top: 60px;
        margin-bottom: 40px;
    }

    .clear-things-up-heading .text-aqua {
        font-size: 2rem;
    }

    .clear-things-up-heading span:not(.text-aqua) {
        font-size: 0.95rem;
    }
}

/* =========================================================
SMALL MOBILE (max-width: 480px)
========================================================= */

@media (max-width: 480px) {

.faq-grid-section {
    padding: 0 45px;
}

.faq-question {
    font-size: 0.95rem;
}

.faq-modal-title {
    font-size: 1.05rem;
}

.faq-modal-text-wrapper p {
    font-size: 0.9rem;
}

.faq-modal-illustration {
    max-width: 140px;
}

.clear-things-up-heading .text-aqua {
    font-size: 1.7rem;
}
}


@media (min-width: 768px) and (max-width: 1024px) {
    .faq-modal-content {
        width: 90% !important;
        max-width: 90% !important;
    }
}