:root {
    --primary: #041a54;

    --primary-opacity-90: #041a54e6;
    --primary-opacity-80: #041a54cc;
    --primary-opacity-70: #041a54b3;
    --primary-opacity-60: #041a5499;
    --primary-opacity-50: #041a5480;
    --primary-opacity-40: #041a5466;
    --primary-opacity-30: #041a544d;
    --primary-opacity-20: #041a5433;
    --primary-opacity-10: #041a541a;

    --primary-light-30: #43537f;
    --primary-light-20: #304272;
    --primary-light-10: #1b2f64;

    --primary-dark-30: #04143f;
    --primary-dark-20: #041645;
    --primary-dark-10: #04184c;

        /* CSS HEX */
    --primary-to-secondary-1: #041A54;
    --primary-to-secondary-2: #0B2E70;
    --primary-to-secondary-3: #12438C;
    --primary-to-secondary-4: #1958A9;
    --primary-to-secondary-5: #1F6CC5;
    --primary-to-secondary-6: #2681E1;
    --primary-to-secondary-7: #2D95FD;

    /* --primary: #041A54; */
    --primary-90: #1D3165;
    --primary-80: #364876;
    --primary-70: #4F5F87;
    --primary-60: #687698;
    --primary-50: #818CAA;
    --primary-40: #9AA3BB;
    --primary-30: #B3BACC;
    --primary-20: #CCD1DD;
    --primary-10: #E5E8EE;

    --secondary: #2d95fd;
    --tertiary: #ebebeb;

    /* monochromical set */
    --primary-100: #000207;
    --primary-150: #010510;
    --primary-200: #010818;
    --primary-250: #020a21;
    --primary-300: #020d29;
    --primary-350: #020f32;
    --primary-400: #03123a;
    --primary-450: #031543;
    --primary-500: #04174b;
    --primary:     #041a54; /* base / brand color */
    --primary-600: #041d5c; /* closest to primary-80 */
    --primary-650: #051f65;
    --primary-700: #05226d;
    --primary-750: #062576;
    --primary-800: #06277e;
    --primary-850: #062a87;
    --primary-900: #072c8f;
    --primary-950: #072f98;
    --primary-1000:#0832a0;
    --primary-1050:#0834a9;
    --primary-1100:#0837b1;
    --primary-1150:#093aba;
    --primary-1200:#093cc2;
    --primary-1250:#0a3fcb;
    --primary-1300:#0a41d3;
    --primary-1350:#0a44dc;
    --primary-1400:#0b47e4;
    --primary-1450:#0b49ed;
    --primary-1500:#0c4cf5;
    --primary-1550:#0c4ffe;

    --color-black: 27 29 30; /* #1b1d1e */
    /* --color-black-5: #1b1d1e0d; */
    /* --color-black-5: rgb(var(--color-black) / var(--opacity-5)); */

    /* --opacity-3: 0.03;
    --opacity-5: 0.05;
    --opacity-10: 0.1;
    --opacity-20: 0.2; */

    /* Parameterized Variabled Values for A/B tests */
    /* ----------- 
        Default A Version 
    --------------*/

    --ab-grad-stop: 25%;
    --ab-overlay-alpha: 0.12;
    --ab-image-opacity: 1;


    /* Master color method */
    .color-redish    { --c-accent: #cd0511; }
    .color-greenish  { --c-accent: #01d111; }
    .color-orangish  { --c-accent: #cd8911; }
    .color-brownish  { --c-accent: #852732; }
    .color-pinkish   { --c-accent: #cd9fb3; }
    .color-silverish { --c-accent: #9a9faa; }
    .color-beigish   { --c-accent: #c5c9c1; }
    .color-talish    { --c-accent: #34b8b7; }
    .color-peachish  { --c-accent: #cdb4a5; }
    .color-purplish  { --c-accent: #341f47; }
    .color-purplish-2{ --c-accent: #291261; }
    .color-olivish   { --c-accent: #cdd111; }
    .color-olivish-2 { --c-accent: #4f5f3b; }
    .color-brownish-2{ --c-accent: #241d4c; }
    
    --ink-rgb: 27 29 30; /* #1b1d1e */
    --alpha-5: 0.05;
    --ink-5: rgb(var(--ink-rgb) / 0.05);
    --ink-10: rgb(var(--ink-rgb) / 0.1);
    --ink-20: rgb(var(--ink-rgb) / 0.2);
    /* --black-50: rgb(var(--ink-rgb) / var(--alpha-5)); */

}
.round-cornder { border-radius: 15px; }
.text-primary { color: var(--primary); }
.text-primary-90 { color: var(--primary-90); }
.text-primary-80 { color: var(--primary-80); }
.text-primary-70 { color: var(--primary-70); }
.text-primary-60 { color: var(--primary-60); }
.text-primary-50 { color: var(--primary-50); }
.text-primary-40 { color: var(--primary-40); }
.text-primary-30 { color: var(--primary-30); }
.text-primary-20 { color: var(--primary-20); }
.text-primary-10 { color: var(--primary-10); }
.text-primary-light-30 { color: var(--primary-light-30); }
.text-primary-light-20 { color: var(--primary-light-20); }
.text-primary-light-10 { color: var(--primary-light-10); }
.text-primary-dark-30 { color: var(--primary-dark-30); }
.text-primary-dark-20 { color: var(--primary-dark-20); }
.text-primary-dark-10 { color: var(--primary-dark-10); }
.text-secondary { color: var(--secondary); }
.text-third { color: var(-) }
.text-muted { color: hsla(0, 0%, 0%, 0.6); }
.text-dark { color: #111; }
.text-light { color: var(--tertiary); }
.text-white { color: #fff; }
.text-bg {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0.25em 0.5em;
    border-radius: 0.25em;
}
.text-visibility-shadow { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25), 0 6px 12px rgba(0, 0, 0, 0.15); }
.text-edge { text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3), 1px -1px 0 rgba(0, 0, 0, 0.3), -1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 0 rgba(0, 0, 0, 0.3); }
.text-glow { text-shadow: 0 0 6px rgba(0, 0, 0, 0.4); }
.text-legible {
    font-weight: 500;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

img { border-radius: 15px; }
.vertical-secondary-silver {
    background-image: linear-gradient(90deg, rgba(45, 149, 253, 0.15), rgba(197, 201, 193, 0.1) 31%, rgba(197, 201, 193, 0.15) 68%, rgba(45, 149, 253, 0.1));
}

/* .primary-1-redish {
    background-image: linear-gradient(45deg, #cd051112, #041a54cc 25%);
}

.primary-1-greenish {
    background-image: linear-gradient(45deg, #01d11112, #041a54cc 25%);
}

.primary-1-orangish {
    background-image: linear-gradient(45deg, #cd891112, #041a54cc 25%);
}

.primary-1-brownish {
    background-image: linear-gradient(45deg, #85273212, #041a54cc 25%);
}

.primary-1-pinkish {
    background-image: linear-gradient(45deg, #cd9fb312, #041a54cc 25%);
}

.primary-1-silverish {
    background-image: linear-gradient(45deg, #9a9faa12, #041a54cc 25%);
}

.primary-1-beigish {
    background-image: linear-gradient(45deg, #c5c9c112, #041a54cc 25%);
}

.primary-1-talish {
    background-image: linear-gradient(45deg, #34b8b712, #041a54cc 25%);
}

.primary-1-peachish {
    background-image: linear-gradient(45deg, #cdb4a512, #041a54cc 25%);
} */

.primary-1-redish {
    --grad-stop: 25%;
    background-image: linear-gradient(45deg, #cd051112, #041a54cc var(--grad-stop));
}

.primary-1-greenish {
    --grad-stop: 25%;
    background-image: linear-gradient(45deg, #01d11112, #041a54cc var(--grad-stop));
}

.primary-1-orangish {
    --grad-stop: 25%;
    background-image: linear-gradient(45deg, #cd891112, #041a54cc var(--grad-stop));
}

.primary-1-brownish {
    --grad-stop: 25%;
    background-image: linear-gradient(45deg, #85273212, #041a54cc var(--grad-stop));
}

.primary-1-pinkish {
    --grad-stop: 25%;
    background-image: linear-gradient(45deg, #cd9fb312, #041a54cc var(--grad-stop));
}

.primary-1-silverish {
    --grad-stop: 25%;
    background-image: linear-gradient(45deg, #9a9faa12, #041a54cc var(--grad-stop));
}

.primary-1-beigish {
    --grad-stop: 25%;
    background-image: linear-gradient(45deg, #c5c9c112, #041a54cc var(--grad-stop));
}

.primary-1-talish {
    --grad-stop: 25%;
    background-image: linear-gradient(45deg, #34b8b712, #041a54cc var(--grad-stop));
}

.primary-1-peachish {
    --grad-stop: 25%;
    background-image: linear-gradient(45deg, #cdb4a512, #041a54cc var(--grad-stop));
}


/* Primary 2 */
.primary-2-redish { background-image: linear-gradient(45deg, #cd051112, #041a5440 25%); }
.primary-2-greenish { background-image: linear-gradient(45deg, #01d11112, #041a5440 25%); }
.primary-2-orangish { background-image: linear-gradient(45deg, #cd891112, #041a5440 25%); }
.primary-2-brownish { background-image: linear-gradient(45deg, #85273212, #041a5440 25%); }
.primary-2-pinkish { background-image: linear-gradient(45deg, #cd9fb312, #041a5440 25%); }
.primary-2-silverish { background-image: linear-gradient(45deg, #9a9faa12, #041a5440 25%); }
.primary-2-beigish { background-image: linear-gradient(45deg, #c5c9c112, #041a5440 25%); }
.primary-2-talish { background-image: linear-gradient(45deg, #34b8b712, #041a5440 25%); }
.primary-2-peachish { background-image: linear-gradient(45deg, #cdb4a512, #041a5440 25%); }
.secondary-redish { background-image: linear-gradient(45deg, #2d95fd40, #cd051112 75%); }
.secondary-greenish { background-image: linear-gradient(45deg, #2d95fd40, #01d11112 75%); }
.secondary-orangish { background-image: linear-gradient(45deg, #2d95fd40, #cd891112 75%); }
.secondary-brownish { background-image: linear-gradient(45deg, #2d95fd40, #85273212 75%); }
.secondary-pinkish { background-image: linear-gradient(45deg, #2d95fd40, #cd9fb312 75%); }
.secondary-silverish { background-image: linear-gradient(45deg, #2d95fd40, #9a9faa12 75%); }
.secondary-beigish { background-image: linear-gradient(45deg, #2d95fd40, #c5c9c112 75%); }
.secondary-talish { background-image: linear-gradient(45deg, #2d95fd40, #34b8b712 75%); }
.secondary-peachish { background-image: linear-gradient(45deg, #2d95fd40, #cdb4a512 75%); }
.secondary-orangish-5perc { background-image: linear-gradient(45deg, #2d95fd26, #cd89110d 75%); }
.secondary-orangish-3perc { background-image: linear-gradient(45deg, #2d95fd1a, #cd891108 75%); }
.bg-black-50 { background-color: var(--black-50); }
.bg-color-none{ background-color: unset; }

/*  ---------------------
        Master Gradient
    ---------------------
*/ 
.grad-primary-1 {
    --grad-stop: 25%;
    --accent-alpha: 100%;
    --bg-gradient: linear-gradient(45deg,
            color-mix(in srgb, var(--c-accent) var(--accent-alpha), transparent),
            #041a54cc var(--grad-stop));
}

.grad-primary-2 {
    --accent-alpha: 100%;
    --bg-gradient: linear-gradient(45deg,
            color-mix(in srgb, var(--c-accent) var(--accent-alpha), transparent),
            #041a5440 25%);
}

.grad-secondary {
    --accent-alpha: 7%;
    --bg-gradient: linear-gradient(45deg,
            #2d95fd40,
            color-mix(in srgb, var(--c-accent) var(--accent-alpha), transparent) 75%);
}

.qw-grad-primary {
    /* Tunables - High: 80% - low: 25%*/
    --grad-stop: 25%;
    --accent-alpha: 100%;
    --grad-alpha: 80%; /* controls darkness / strength */
    
    --bg-color: none;
    --bg-gradient: linear-gradient( 45deg, 
        color-mix( in srgb, var(--c-accent) var(--accent-alpha, 100%), transparent ),
        color-mix( in srgb, #041a54 var(--grad-alpha), transparent ) var(--grad-stop)
    );
}

.qw-grad-secondary {
    --accent-alpha: 7%;
    --gard-stop: 75%;

    --bg-color: none;
    --bg-gradient: linear-gradient( 45deg, 
        color-mix( in srgb, #2d95fd 25%, transparent ), 
        color-mix( in srgb, var(--c-accent) var(--accent-alpha), transparent ) var(--grad-stop)
    );
}


/* Grad - Gradient strength utilities */
.grad-20 { --grad-stop: 20%; }
.grad-25 { --grad-stop: 25%; }
.grad-30 { --grad-stop: 30%; }
.grad-40 { --grad-stop: 40%; }
.grad-50 { --grad-stop: 50%; }
.grad-60 { --grad-stop: 60%; }
.grad-70 { --grad-stop: 70%; }
.grad-80 { --grad-stop: 80%; }

/* accent Grad stops */
/* .accent-grad-20 { --accent-grad-stop: 20%; }
.accent-grad-25 { --accent-grad-stop: 25%; }
.accent-grad-30 { --accent-grad-stop: 30%; }
.accent-grad-40 { --accent-grad-stop: 40%; }
.accent-grad-50 { --accent-grad-stop: 50%; }
.accent-grad-60 { --accent-grad-stop: 60%; } */

.grad-alpha-5 { --grad-alpha: 5%; }
.grad-alpha-7 { --grad-alpha: 7%; }
.grad-alpha-10 { --grad-alpha: 10%; }
.grad-alpha-15 { --grad-alpha: 15%; }
.grad-alpha-20 { --grad-alpha: 20%; }
.grad-alpha-25 { --grad-alpha: 25%; }
.grad-alpha-30 { --grad-alpha: 30%; }
.grad-alpha-35 { --grad-alpha: 35%; }
.grad-alpha-40 { --grad-alpha: 40%; }
.grad-alpha-50 { --grad-alpha: 50%; }
.grad-alpha-60 { --grad-alpha: 60%; }
.grad-alpha-70 { --grad-alpha: 70%; }
.grad-alpha-80 { --grad-alpha: 80%; }
.grad-alpha-100 { --grad-alpha: 100%; }

.accent-alpha-5 { --accent-alpha: 5%; }
.accent-alpha-7 { --accent-alpha: 7%; }
.accent-alpha-10 { --accent-alpha: 10%; }
.accent-alpha-15 { --accent-alpha: 15%; }
.accent-alpha-20 { --accent-alpha: 20%; }
.accent-alpha-25 { --accent-alpha: 25%; }
.accent-alpha-30 { --accent-alpha: 30%; }
.accent-alpha-40 { --accent-alpha: 40%; }
.accent-alpha-50 { --accent-alpha: 50%; }
.accent-alpha-60 { --accent-alpha: 60%; }
.accent-alpha-70 { --accent-alpha: 70%; }
.accent-alpha-80 { --accent-alpha: 80%; }
.accent-alpha-100 { --accent-alpha: 100%; }

.bg-black {
    background-image: 
        linear-gradient(var(--bg-color), var(--bg-color)),
        var(--bg-image, none); /* fallback to none if no image class */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.black-opacity-3 { --bg-color: rgb(var(--color-black) / 0.03); }
.black-opacity-5 { --bg-color: rgb(var(--color-black) / 0.05); }
.black-opacity-10 { --bg-color: rgb(var(--color-black) / 0.1); }
.black-opacity-20 { --bg-color: rgb(var(--color-black) / 0.2); }

/* Usage class="bg-black black-opacity-5" */

/* Image handling (optional layer) */

/* Base composable background */
.bg-image {
    --bg-x: center;
    --bg-y: center;
    background-color: var(--bg-color, transparent);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: var(--bg-x) var(--bg-y);

    /* Compose gradient + image */
    background-image:
        var(--bg-gradient, none),
        var(--bg-image, none);
    border-radius: 15px;
}

/* Position utilities */
.bg-left  { --bg-x: left; }
.bg-top   { --bg-y: top; }
.bg-25    { --bg-x: 25%; }
.bg-50    { --bg-x: 50%; }
.bg-75    { --bg-x: 75%; }
.bg-100    { --bg-x: 100%; }

/* Image selectors */
.bg-logo { --bg-image: url("../images/que-logo-bg-25.png"); }
.bg-logo-transparent { --bg-image: url("../images/que-logo-nobg-25.png"); }
.bg-no-image { --bg-image: none; }

/* Gradient only */
.bg-gradient-only {
    --bg-image: none;
    /* optionally set a default gradient */
    --bg-gradient: linear-gradient(to bottom, #00000033, #00000033);
}

/* Optional: fallback if you want a “transparent background” */
.bg-transparent {
    --bg-gradient: none;
    --bg-image: none;
}

/* How to use */
/* mage only
<div class="bg-image bg-logo bg-left"></div>

Gradient only
<div class="bg-image bg-gradient-only"></div>

Gradient + image
<div class="bg-image bg-logo" style="--bg-gradient: linear-gradient(...);"></div>

No background
<div class="bg-image bg-transparent"></div>

Position override
<div class="bg-image bg-logo bg-25 bg-top"></div>
 */

 .img-overlay {
     position: relative;
     border-radius: 15px;
     overflow: hidden;
 }

 .img-overlay::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(45deg,
             rgb(var(--color-black) / 0.25),
             rgb(var(--color-black) / 0.25));
     background: var(--bg-gradient, none);
     pointer-events: none;
 }

 .img-overlay > img {
     display: block;
     width: 100%;
     height: auto;
 }



/* *************** ********* *************** */
/* *************** OLD SYSTM *************** */
/* *************** ********* *************** */

/* .bg-image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
} */
.bg-logo {
    --bg-image: url("../images/que-logo-bg-25.png");
}
.bg-logo-transparent {
    --bg-image: url("../images/que-logo-nobg-25.png");
}
/* Background composer */
.has-bg {
    background-image:
    var(--bg-gradient),
    var(--bg-image, none);
}
.bg-image-only {
    background-color: transparent; /* no color at all */
    background-image: var(--bg-image);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
}
.bg-no-image {
    --bg-image: none;
}
.bg-gradient {
    background-image:
    var(--bg-gradient);
}

.bg-set-image {
    /* defaults + external overrides */
    --bg-x: var(--bg-x, center);
    --bg-y: var(--bg-y, center);
    /* --bg-image: var(--bg-image, none); */

    background-repeat: no-repeat;
    background-size: cover;

    background-position: var(--bg-x) var(--bg-y);
    background-image: var(--bg-image, none);
}

/* position utilities */
/* .bg-left  { --bg-x: left; }
.bg-top   { --bg-y: top; }

.bg-25    { --bg-x: 25%; }
.bg-50    { --bg-x: 50%; }
.bg-75    { --bg-x: 75%; } */


/* if custom bg image to be used - class="bg-image-only" style="--bg-image: url('../images/que-logo-bg-25.png')" */

/* Usage Example */
/* Gradient only */
/* <div class="color-peachish grad-primary-1 grad-30 has-bg"> */
/* Gradient + image
<div class="color-orangish grad-secondary bg-logo bg-image has-bg">

Image only
<div class="bg-logo bg-image"> */
/* EO Usage Example  */

/* For A/B Tests */
/* ----------------------
    .grad-primary-1 {
        --grad-stop: var(--ab-grad-stop);
    }

    Variant B (override only variables)
    .ab-test-b {
        --ab-grad-stop: 40%;
        --ab-overlay-alpha: 0.22;
        --ab-image-opacity: 0.85;
    }

    Connect variables to visuals
    Gradient opacity
    .grad-primary-1 {
        --bg-gradient: linear-gradient(
            45deg,
            rgb(var(--c-accent) / var(--ab-overlay-alpha)),
            #041a54cc var(--grad-stop)
        );
    }

    Image layer (optional test)
    .has-bg {
        background-image:
            var(--bg-gradient),
            var(--bg-image);
    }

    .bg-image {
        background-size: cover;
        opacity: var(--ab-image-opacity);
    }
    
    A/B test examples (real scenarios)
    Test 1: Softer vs stronger gradient
    .ab-test-b {
        --ab-overlay-alpha: 0.25;
    }
    Test 2: More visual weight
        .ab-test-b {
        --ab-grad-stop: 55%;
    }

    Test 3: Gradient vs image dominance
    .ab-test-b {
        --ab-image-opacity: 0.6;
    }

    Test 4: Completely different accent colors
    .ab-test-b {
        --c-accent: 52 184 183;  //teal 
    }   
    
    Advanced: multivariate tests (optional)
    This tests combinations, not just single tweaks
    .ab-test-b {
        --ab-grad-stop: 45%;
        --ab-overlay-alpha: 0.18;
        --ab-image-opacity: 0.75;
    }

---------------------- */

.svg-icon {
    width: 48px;
    height: 48px;
    display: block;
    /* fill: currentColor; */
    /* optional but recommended */
}


.svg-icon--fill {
    fill: var(--primary-80);
}

.svg-icon--stroke {
    stroke: var(--primary-80);
}

.qw-section {
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 80px;
    padding-bottom: 80px;

}

.display-card {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    border-radius: 16px;
    flex-flow: column;
    padding: 32px;
    display: flex;
}

.display-card-2 {
    /* background-image: url('../images/on-demand-support-2.jpg'); */
    background-position: 0 0;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 16px;
    flex-flow: column;
    width: 100%;
    min-height: 470px;
    padding: 32px;
    display: flex;
    position: static;
}

.info-card {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    background-color: var(--black-50);
    border-radius: 16px;
    flex-flow: column;
    /* min-height: 500px; */
    padding: 32px;
    display: flex;
}
.inner-card {
    position: absolute;
    inset: 0;
    border-radius: 15px;
    z-index: 0;
}
@media (max-width: 767px) {
    .qw-card__media .inner-card {
        inset: 0 2rem;
    }
}
.info-card {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    background-color: var(--black-50);
    border-radius: 16px;
    flex-flow: column;
    /* min-height: 500px; */
    padding: 32px;
    display: flex;
}

.card-layout{
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    border-radius: 16px;
    flex-flow: column;
    display: flex;
}

.card-padding {
    padding: 32px;
}

.display-card-left-img {

    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 16px;
    flex-flow: column;
    width: 100%;
    display: flex;
    position: static;
}

.card-overlay {
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    /* background-color: rgba(4, 26, 84, 0.75); */
    width: 100%;
    height: 100%;
}

.card-overlay-container {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    flex-flow: column;
    padding: 32px;
    border-radius: 16px;
}

.sec-bg-1 {
    background-image: url(../images/que-bg-2.png);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.sec-bg-2 {
    background-image: url(../images/que_background-wbg.png);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.sec-bg-3 {
    /* Peachish */
    background-image: url(../images/que-bg-3.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.sec-bg-rev-3 {
    /* Peachish */
    background-image: url(../images/que-bg-3-rev.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.sec-bg-4 {
    /* sliverish */
    background-image: url(../images/que-bg-4.png);
    background-position: center;
    background-repeat: no-repeat;
    /* background-size: 75%; */
    background-size: cover;
}
.sec-bg-rev-4 {
    /* silverish */
    background-image: url(../images/que-bg-4-rev.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.sec-bg-5 {
    /* beigish */
    background-image: url(../images/que-bg-5.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.sec-bg-rev-5 {
    /* beigish */
    background-image: url(../images/que-bg-5-rev.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.list-box {
    padding: 15px 10px 15px 0;
    border: 0.5px solid var(--primary-20);
    border-radius: 10px;
    margin-right: 50px;
}

.quote {
    font-size: 1.2rem;
    font-style: italic;
    color: #444;
    border-left: 4px solid #e2e2e2;
    padding-left: 1rem;
    margin: 1.5rem 0;
}

.fancy-quote {
    font-size: 1.4rem;
    font-style: italic;
    line-height: 1.8;
    color: #333;
}

.quote-text {
    quotes: '«' '»';
    /* Arabic quotes */
    /* quotes: '“' '”'; */
}

.quote-text::before {
    content: open-quote;
}

.quote-text::after {
    content: close-quote;
}

.quote-box {
    background: #f9f9f9;
    border-left: 5px solid #4a90e2;
    padding: 1.5rem;
    margin: 2rem 0;
}

.quote-box span {
    display: block;
    margin-top: 1rem;
    text-align: right;
    font-size: 0.9rem;
    color: #666;
}

.inline-quote {
    quotes: '“' '”';
}

.inline-quote::before {
    content: open-quote;
}

.inline-quote::after {
    content: close-quote;
}
.list-regular {
    font-size: var(--fs-3);
}
.package-card-row {
    grid-template-rows: 3rem 3rem 12.5rem 16rem auto ;
    /* grid-template-rows: minmax(1rem, auto) minmax(1rem, auto) minmax(8rem, auto) minmax(1rem, auto) minmax(1rem, auto) !important; */
    height: 100%;
}
.qw-num-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
}

.qw-num-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: flex-start;
}

.qw-num {
    width: 32px;
    height: 32px;
    border-radius: 15%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: var(--fs-3);
    color: var(--primary-80);
    background: rgba(4, 26, 84, 0.08);
    border: 1px solid rgba(4, 26, 84, 0.2);
    flex-shrink: 0;
}

.qw-num-content strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.qw-num-content p {
    color: var(--primary);
    font-size: var(--fs-3);
    font-weight: 500;
    margin: 0;
    opacity: 0.85;
}
.qw-portrait {
  /* tune per component */
  --qw-frame-radius: 18px;
  --qw-frame-border: 2px;
  --qw-frame-color: rgba(255,255,255,.35);
  --qw-frame-bg: rgba(255,255,255,.08);

  --qw-frame-w: 220px;
  --qw-frame-h: 260px;
  --qw-frame-h: 225px;

  --qw-breakout-top: 34px;     /* how much the person pops out */
  --qw-img-scale: 1.15;        /* make PNG larger than frame */
  --qw-img-x: 50%;             /* horizontal crop/position */
  --qw-img-y: 0%;              /* vertical crop/position (0% pushes up) */

  position: relative;
  width: var(--qw-frame-w);
  height: calc(var(--qw-frame-h) + var(--qw-breakout-top));
  overflow: visible; /* allow top breakout */
}

/* The frame itself sits lower, leaving room for breakout */
.qw-portrait__frame {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* frame anchored at the bottom */
  height: var(--qw-frame-h);

  border-radius: var(--qw-frame-radius);
  background: var(--qw-frame-bg);
  border: var(--qw-frame-border) solid var(--qw-frame-color);

  /* optional "depth" */
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

/* Person image breaks out above the frame */
.qw-portrait__img {
  position: absolute;
  left: 50%;
  bottom: 0; /* feet/torso anchored to bottom of frame */
  transform:
    translateX(-50%)
    translateY(calc(-1 * var(--qw-breakout-top)))
    scale(var(--qw-img-scale));

  transform-origin: bottom center;

  width: 110%;
  height: auto;

  /* crop + positioning */
  object-fit: contain;
  object-position: var(--qw-img-x) var(--qw-img-y);

  pointer-events: none;
  z-index: 2;
}
@media (max-width: 768px) {
  .qw-portrait {
    --qw-frame-w: 180px;
    --qw-frame-h: 220px;
    --qw-breakout-top: 26px;
  }
}
.qw-portrait__frame::after {
  content: "";
  position: absolute;
  inset: -10px -10px 10px 10px; /* offset outline */
  border-radius: calc(var(--qw-frame-radius) + 10px);
  border: 1px solid rgba(255,255,255,.20);
  z-index: -1;
}
.qw-tag:hover {
    transform: translateY(-1px);
    border-color: var(--primary-20);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 26px rgba(4, 26, 84, 0.10);
    color: var(--primary);
}
a:active, a:hover {
    outline: 0;
}
.qw-tag--accent {
    border-color: var(--primary-20);
    background: linear-gradient(135deg, rgba(45, 149, 253, 0.18), rgba(73, 40, 253, 0.12));
    color: var(--primary-dark-10);
}
.qw-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 14px;
    border-radius: 5px;
    border: 1px solid var(--black-10);
    background: rgba(255, 255, 255, 0.75);
    color: var(--primary-dark-30);
    font-family: var(--ibm-plex-sans);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .2px;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(4, 26, 84, 0.06);
    user-select: none;
    white-space: nowrap;
}