/* =========================================================
   RESPONSIVE
========================================================= */
/* Prevent accidental horizontal overflow */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .nav-inner {
        width: calc(100% - 40px);
    }

    .hero-wrapper {
        width: calc(100% - 40px);
    }

    .hero-title {
        font-size: 58px;
    }

    .hero-description {
        font-size: 17px;
    }

    .hero-left {
        padding-right: 10px;
    }

    /* =========================
       RIGHT SIDE
    ========================= */

    .hero-visual {
        height: 600px;
    }

    .app-stage {
        height: 600px;
        margin-top: 20px;
    }

    .app-halo {
        width: 450px;
        height: 450px;
    }

    .app-orbit {
        width: 500px;
        height: 500px;
    }

    .app-phone {
        width: 310px;
    }

    .app-quran-card {
        left: 0;
    }

    .app-community-card {
        right: 0;
    }

    .app-prayer-card {
        left: 5%;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    /* =========================
       NAVBAR
    ========================= */

    .nav-inner {
        width: calc(100% - 36px);
    }

    .nav-links {
        display: none;
    }

    .mobile-toggle {
        display: block;
    }

    .mobile-menu {
        position: absolute;
        top: calc(100% - 2px);
        left: 18px;
        right: 18px;

        padding: 10px;

        border-radius: 16px;

        background: rgba(255, 255, 255, 0.98);

        box-shadow:
            0 18px 45px rgba(7, 29, 67, 0.12);

        display: none;
    }

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

    .mobile-menu a {
        display: block;

        padding: 13px 14px;

        color: #173451;

        font-size: 14px;
        font-weight: 700;

        border-radius: 10px;
    }

    .mobile-menu a:hover {
        background: #eef8fd;
        color: #1477b8;
    }


    /* =========================
       HERO
    ========================= */

    .iqraa-hero {
        padding: 110px 0 60px;
    }

    .hero-wrapper {
        width: calc(100% - 36px);
        max-width: 760px;
    }

    .hero-left {
        text-align: center;
        padding-top: 0;
    }

    .hero-badge {
        margin-bottom: 24px;
    }

    .hero-title {
        font-size: clamp(44px, 7vw, 62px);
        line-height: 1.02;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;

        max-width: 620px;
    }

    .hero-buttons {
        justify-content: center;
    }


    /* =========================
       HERO RIGHT SIDE
    ========================= */

    .hero-visual {
        width: 100%;
        height: 540px;

        margin-top: 35px;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .app-stage {
        position: relative;

        width: 100%;
        height: 540px;

        margin: 0 auto;
    }

    .app-halo {
        width: 440px;
        height: 440px;
    }

    .app-orbit {
        width: 500px;
        height: 500px;
    }

    .app-phone {
        width: 320px;

        margin: 0 auto;
    }

    .app-quran-card {
        left: 3%;
    }

    .app-community-card {
        right: 3%;
    }

    .app-prayer-card {
        left: 6%;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    /* =========================
       NAVBAR
    ========================= */

    .iqraa-navbar {
        padding: 9px 0;
    }

    .nav-inner {
        width: calc(100% - 24px);
    }

    .nav-logo img {
        width: 150px;
        height: auto;
    }


    /* =========================
       HERO
    ========================= */

    .iqraa-hero {
        min-height: auto;

        padding: 95px 0 45px;
    }

    .hero-wrapper {
        width: calc(100% - 24px);
        max-width: none;
    }

    .hero-left {
        width: 100%;
        padding: 0;
    }

    .hero-title {
        font-size: 38px;

        line-height: 1.05;

        letter-spacing: -1px;
    }

    .hero-description {
        font-size: 15px;

        line-height: 1.7;

        margin-bottom: 25px;
    }


    /* =========================
       BUTTONS
    ========================= */

    .hero-buttons {
        flex-direction: column;

        width: 100%;

        gap: 12px;

        position: relative;

        z-index: 20;
    }

    .early-access {
        width: 100%;

        justify-content: center;
    }

    .watch-button {
        width: 100%;

        justify-content: center;

        position: relative;

        z-index: 25;
    }


    /* =========================
       RIGHT IMAGE AREA
    ========================= */

    .hero-visual {
        width: 100%;

        height: 430px;

        /*
         * IMPORTANT:
         * Extra space between Watch button
         * and phone image.
         */
        margin-top: 55px;

        overflow: visible;

        position: relative;

        z-index: 1;
    }

    .app-stage {
        position: relative;

        width: 100%;

        height: 430px;

        margin: 0 auto;

        overflow: visible;
    }


    /* =========================
       SOFT BACKGROUND GLOW
    ========================= */

    .app-halo {
        width: 320px;
        height: 320px;
    }

    .app-orbit {
        width: 355px;
        height: 355px;
    }


    /* =========================
       PHONE
    ========================= */

    .app-phone {
        width: min(275px, 78vw);

        margin: 0 auto;

        position: relative;

        z-index: 5;
    }


    /* =========================
       APP LABEL
    ========================= */

    .app-label {
        top: 28px;

        right: 0;

        font-size: 9px;

        padding: 8px 10px;

        white-space: nowrap;

        z-index: 10;
    }


    /* =========================
       FEATURE CARDS
    ========================= */

    .app-feature-card {
        min-width: 0;

        padding: 8px 10px;

        gap: 8px;

        transform: scale(.72);

        white-space: nowrap;

        z-index: 15;
    }

    .app-feature-card .feature-icon {
        width: 34px;
        height: 34px;

        flex-basis: 34px;

        font-size: 13px;
    }

    .app-feature-card strong {
        font-size: 8px;
    }

    .app-feature-card span {
        font-size: 7px;
    }


    /* =========================
       QURAN CARD
    ========================= */

    .app-quran-card {
        left: -12px;

        top: 28%;

        transform: scale(.72);
    }


    /* =========================
       COMMUNITY CARD
    ========================= */

    .app-community-card {
        right: -12px;

        bottom: 25%;

        transform: scale(.72);
    }


    /* =========================
       PRAYER CARD
    ========================= */

    .app-prayer-card {
        left: -8px;

        bottom: 5%;

        transform: scale(.72);
    }


    /* =========================
       SCROLL
    ========================= */

    .scroll-explore {
        display: none;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .nav-logo img {
        width: 135px;
    }

    .iqraa-hero {
        padding-top: 88px;
    }

    .hero-title {
        font-size: 34px;
    }

    .hero-description {
        font-size: 14px;
    }


    /* Buttons */

    .hero-buttons {
        gap: 12px;
    }


    /* Right image */

    .hero-visual {
        height: 390px;

        /*
         * Keep separation from
         * Watch How It Works.
         */
        margin-top: 50px;
    }

    .app-stage {
        height: 390px;
    }

    .app-phone {
        width: min(245px, 76vw);
    }

    .app-halo {
        width: 285px;
        height: 285px;
    }

    .app-orbit {
        width: 315px;
        height: 315px;
    }


    /* Cards */

    .app-feature-card {
        transform: scale(.62);
    }

    .app-quran-card {
        left: -22px;
    }

    .app-community-card {
        right: -22px;
    }

    .app-prayer-card {
        left: -18px;
    }
}



/* ================= Home Statitics */


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1199px) {

    .iqraa-bridge {
        margin-top:
            -65px;

        margin-bottom:
            -65px;
    }

    .bridge-container {
        width:
            calc(100% - 50px);

        padding:
            22px 25px 25px;

        border-radius:
            26px;
    }

    .bridge-number {
        font-size:
            36px;
    }

    .bridge-number span {
        font-size:
            22px;
    }

    .bridge-label {
        font-size:
            11px;
    }

    .bridge-description {
        font-size:
            8px;
    }

    .bridge-icon {
        width:
            34px;

        height:
            34px;

        border-radius:
            10px;
    }

    .bridge-stat {
        min-height:
            115px;
    }

    .bridge-divider {
        height:
            80px;
    }
}


/* ============================================================
   TABLET / MOBILE
============================================================ */

@media (max-width: 767px) {

    .iqraa-bridge {
        margin-top:
            -45px;

        margin-bottom:
            -45px;
    }

    .bridge-container {
        width:
            calc(100% - 28px);

        padding:
            18px 15px 22px;

        border-radius:
            22px;
    }

    .bridge-heading {
        font-size:
            7px;

        letter-spacing:
            0.13em;

        gap:
            8px;

        margin-bottom:
            13px;
    }

    .bridge-heading-line {
        width:
            25px;
    }

    .bridge-stats {
        grid-template-columns:
            1fr 1fr;
    }

    .bridge-stat {
        min-height:
            112px;

        padding:
            8px 5px;
    }

    .bridge-divider {
        display:
            none;
    }

    .bridge-stat:nth-child(1),
    .bridge-stat:nth-child(3) {
        border-right:
            1px solid rgba(25, 118, 185, 0.10);
    }

    .bridge-stat:nth-child(1),
    .bridge-stat:nth-child(3),
    .bridge-stat:nth-child(5) {
        border-bottom:
            1px solid rgba(25, 118, 185, 0.10);
    }

    .bridge-icon {
        width:
            32px;

        height:
            32px;

        margin-bottom:
            6px;

        border-radius:
            9px;

        font-size:
            11px;
    }

    .bridge-number {
        font-size:
            31px;
    }

    .bridge-number span {
        font-size:
            18px;
    }

    .bridge-label {
        margin-top:
            5px;

        font-size:
            10px;
    }

    .bridge-description {
        font-size:
            7px;
    }

    .bridge-container::after {
        width:
            100px;
    }
}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

    .iqraa-bridge {
        margin-top:
            10px;

        margin-bottom:
            -35px;
    }

    .bridge-container {
        width:
            calc(100% - 20px);

        padding:
            15px 10px 18px;

        border-radius:
            19px;
    }

    .bridge-heading {
        font-size:
            6px;

        margin-bottom:
            8px;
    }

    .bridge-heading-line {
        width:
            18px;
    }

    .bridge-stat {
        min-height:
            95px;
    }

    .bridge-icon {
        width:
            28px;

        height:
            28px;

        font-size:
            10px;
    }

    .bridge-number {
        font-size:
            27px;
    }

    .bridge-number span {
        font-size:
            16px;
    }

    .bridge-label {
        font-size:
            8px;
    }

    .bridge-description {
        font-size:
            6px;
    }
}

/* ============================================================
   SECTION 2 — THE PROBLEM WE'RE SOLVING
   MOBILE — FINAL FIX
============================================================ */

@media (max-width: 575px) {

    .iqraa-problem {
        padding: 78px 0 90px;
    }

    .iqraa-problem .problem-container {
        width: calc(100% - 24px);
        max-width: none;
    }


    /* =========================================================
       BADGE
    ========================================================= */

    .problem-badge {
        padding: 9px 15px;
        gap: 9px;
        margin-bottom: 22px;
        font-size: 12px;
    }

    .problem-badge-dot {
        width: 8px;
        height: 8px;
        flex-basis: 8px;
    }


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

    .problem-title {
        margin-bottom: 22px;
        font-size: 37px;
        line-height: 1.1;
        letter-spacing: -1px;
    }


    /* =========================================================
       DESCRIPTION
    ========================================================= */

    .problem-description {
        max-width: 100%;
        margin-bottom: 17px;
        font-size: 14px;
        line-height: 1.75;
    }

    .problem-highlight {
        font-size: 14px;
    }


    /* =========================================================
       FEATURE POINTS
    ========================================================= */

    .problem-points {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 25px;
    }

    .problem-point {
        min-height: auto;
        padding: 14px;
        gap: 11px;
        text-align: left;
        border-radius: 14px;
    }

    .problem-point-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        border-radius: 10px;
        font-size: 13px;
    }

    .problem-point strong {
        font-size: 11px;
    }

    .problem-point span {
        font-size: 9px;
        line-height: 1.5;
    }


    /* =========================================================
       RIGHT VISUAL
    ========================================================= */

    .problem-visual {
        min-height: 500px;
        margin-top: -30px;

        overflow: visible;

        transform: none;
    }


    /* =========================================================
       OLD WAY CARD
    ========================================================= */

    .problem-main-card {
        width: min(355px, 90vw);

        /*
         * Enough room for all four readable items.
         */
        min-height: 400px;

        padding: 18px;

        border-radius: 21px;

        transform: none;

        opacity: 1;

        filter: none;

        overflow: visible;

        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }


    /* =========================================================
       OLD WAY HEADER
    ========================================================= */

    .problem-main-top {
        gap: 10px;

        padding-bottom: 14px;

        margin-bottom: 12px;
    }

    .problem-main-icon {
        width: 41px;
        height: 41px;
        flex-basis: 41px;

        border-radius: 11px;

        font-size: 15px;
    }


    /* =========================================================
       SCATTERED ITEMS — CLEAR MOBILE TEXT
    ========================================================= */

    .scattered-item {
        display: flex;
        align-items: center;

        width: 100%;
        box-sizing: border-box;

        gap: 10px;

        padding: 10px 11px;

        min-height: 52px;

        margin-bottom: 8px;

        border-radius: 12px;

        /*
         * Keep each item at 1:1 scale.
         * Scaling/rotating tiny text makes it look soft.
         */
        transform: none;

        opacity: 1;
        filter: none;

        background: rgba(255, 255, 255, 0.98);

        border: 1px solid rgba(20, 71, 105, 0.06);

        box-shadow:
            0 4px 12px rgba(19, 55, 83, 0.06);

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        text-rendering: optimizeLegibility;
    }


    /* =========================================================
       ICON
    ========================================================= */

    .scattered-icon {
        width: 33px;
        height: 33px;

        min-width: 33px;

        flex: 0 0 33px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 9px;

        font-size: 12px;

        opacity: 1;
    }


    /* =========================================================
       TEXT WRAPPER
    ========================================================= */

    .scattered-item > div:not(.scattered-icon) {
        flex: 1;
        min-width: 0;

        display: flex;
        flex-direction: column;
        justify-content: center;

        opacity: 1;
    }


    /* =========================================================
       TITLE — CLEAR + DARK
    ========================================================= */

    .scattered-item strong {
        display: block;

        font-size: 13px;

        line-height: 1.25;

        font-weight: 700;

        color: #183b5a;

        margin: 0 0 3px;

        padding: 0;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

        opacity: 1;
        filter: none;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        text-rendering: optimizeLegibility;
    }


    /* =========================================================
       DESCRIPTION — CLEAR + DARKER
    ========================================================= */

    .scattered-item span {
        display: block;

        font-size: 10px;

        line-height: 1.35;

        font-weight: 500;

        color: #000000;

        margin: 0;
        padding: 0;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

        opacity: 1;
        filter: none;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        text-rendering: optimizeLegibility;
    }


    /* =========================================================
       X ICON
    ========================================================= */

    .scattered-status {
        flex: 0 0 auto;

        font-size: 10px;

        color: #c97878;

        opacity: 1;

        margin-left: 3px;
    }


    /* =========================================================
       KEEP ALL FOUR ITEMS SHARP + VISIBLE
    ========================================================= */

    .scattered-paper,
    .scattered-notebook,
    .scattered-whatsapp,
    .scattered-quran {
        opacity: 1;
        filter: none;
        transform: none;
    }

    .scattered-quran {
        position: relative;
        z-index: 5;
        margin-bottom: 0;
    }


    /* =========================================================
       SOLUTION CARD
    ========================================================= */

    .problem-solution-card {
        right: 0;

        /*
         * Move it slightly lower so the 4th item
         * remains visible.
         */
        bottom: -28px;

        width: 255px;

        min-height: 115px;

        padding: 14px;

        gap: 10px;

        border-radius: 17px;

        z-index: 10;

        opacity: 1;

        filter: none;
    }

    .solution-logo {
        width: 40px;
        height: 40px;
        flex-basis: 40px;

        border-radius: 11px;

        font-size: 16px;
    }

    .solution-content > span {
        font-size: 6px;
    }

    .solution-content > strong {
        font-size: 10px;

        margin-bottom: 7px;
    }

    .solution-tags {
        gap: 3px;
    }

    .solution-tags div {
        padding: 4px 5px;

        font-size: 5.5px;

        border-radius: 5px;
    }

    .solution-check {
        width: 18px;
        height: 18px;

        right: 10px;
        top: 10px;

        font-size: 7px;
    }


    /* =========================================================
       FLOATING CARDS
    ========================================================= */

    .problem-floating-card {
        padding: 8px 10px;

        gap: 7px;

        border-radius: 11px;

        opacity: 1;
    }

    .problem-floating-one {
        left: -2px;
        top: 20px;
    }

    .problem-floating-two {
        right: -2px;
        top: 86px;
    }

    .floating-icon {
        width: 27px;
        height: 27px;
        flex-basis: 27px;

        border-radius: 8px;

        font-size: 9px;
    }


    .problem-connection-line {
        display: none;
    }
}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 380px) {

    .iqraa-problem {
        padding: 68px 0 85px;
    }

    .problem-title {
        font-size: 33px;
    }

    .problem-description {
        font-size: 13px;
    }

    .problem-highlight {
        font-size: 13px;
    }


    /* VISUAL */

    .problem-visual {
        min-height: 470px;

        margin-top: -25px;

        overflow: visible;
    }


    /* MAIN CARD */

    .problem-main-card {
        width: 330px;

        min-height: 380px;

        padding: 16px;

        transform: none;

        overflow: visible;
    }


    /* SCATTERED ITEMS */

    .scattered-item {
        gap: 9px;

        padding: 9px 10px;

        min-height: 49px;

        margin-bottom: 7px;

        border-radius: 11px;

        transform: none;

        opacity: 1;
    }


    .scattered-icon {
        width: 31px;
        height: 31px;

        min-width: 31px;

        flex-basis: 31px;

        font-size: 11px;
    }


    .scattered-item strong {
        font-size: 11px;

        line-height: 1.25;

        margin-bottom: 2px;

        color: #183b5a;
    }


    .scattered-item span {
        font-size: 9px;

        line-height: 1.3;

        color: #000000;
    }


    .scattered-status {
        font-size: 9px;
    }


    /* 4TH ITEM */

    .scattered-quran {
        position: relative;
        z-index: 5;
        margin-bottom: 0;
    }


    /* SOLUTION CARD */

    .problem-solution-card {
        width: 235px;

        min-height: 105px;

        padding: 12px;

        bottom: -15px;
    }

    .solution-logo {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .solution-content > strong {
        font-size: 9px;
    }
}


/* ============================================================
   IQRAA MARK — SECTION 3
   THREE CORE PILLARS — RESPONSIVE
============================================================ */


/* ============================================================
   LARGE TABLET / SMALL DESKTOP
   992px — 1199px
============================================================ */

@media (max-width: 1199px) {

    .iqraa-pillars {
        padding: 120px 0 110px;
    }

    .pillars-container {
        width: min(100% - 40px, 1080px);
    }

    .pillars-header {
        max-width: 750px;
        margin-bottom: 55px;
    }

    .pillars-title {
        font-size: clamp(44px, 5.2vw, 62px);
    }

    .pillars-subtitle {
        font-size: 16px;
    }

    .pillars-grid {
        gap: 18px;
    }

    .pillar-card {
        min-height: 550px;
        padding: 27px 23px 23px;
        border-radius: 24px;
    }

    .pillar-top {
        margin-bottom: 30px;
    }

    .pillar-number {
        font-size: 42px;
    }

    .pillar-icon {
        width: 58px;
        height: 58px;
        border-radius: 16px;
        font-size: 22px;
    }

    .pillar-label {
        font-size: 11px;
    }

    .pillar-content h3 {
        font-size: 25px;
    }

    .pillar-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .pillar-feature {
        font-size: 13px;
    }

    .pillars-connection {
        margin-top: 45px;
    }
}


/* ============================================================
   TABLET
   768px — 991px
============================================================ */

@media (max-width: 991px) {

    .iqraa-pillars {
        padding: 105px 0 100px;
    }

    .pillars-container {
        width: calc(100% - 40px);
    }

    /* Header */

    .pillars-header {
        max-width: 700px;
        margin-bottom: 45px;
    }

    .pillars-badge {
        padding: 9px 17px;
        font-size: 12px;
        margin-bottom: 20px;
    }

    .pillars-title {
        font-size: clamp(42px, 6vw, 56px);
        line-height: 1.08;
        letter-spacing: -1.5px;
    }

    .pillars-subtitle {
        max-width: 600px;
        font-size: 15px;
        line-height: 1.7;
    }


    /* Cards */

    .pillars-grid {
        grid-template-columns: 1fr;

        width: min(100%, 650px);

        margin: 0 auto;

        gap: 20px;
    }

    .pillar-card {
        min-height: auto;

        padding: 28px;

        border-radius: 24px;
    }

    .pillar-top {
        margin-bottom: 25px;
    }

    .pillar-number {
        font-size: 40px;
    }

    .pillar-icon {
        width: 60px;
        height: 60px;

        border-radius: 16px;

        font-size: 23px;
    }

    .pillar-content h3 {
        font-size: 27px;
    }

    .pillar-content p {
        max-width: 580px;

        font-size: 15px;
        line-height: 1.75;
    }

    .pillar-features {
        margin-top: 24px;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 12px 20px;
    }

    .pillar-feature {
        font-size: 13px;
    }

    .pillar-bottom {
        margin-top: 28px;
    }


    /* Connection */

    .pillars-connection {
        margin-top: 40px;
    }

    .connection-line {
        width: 110px;
    }
}


/* ============================================================
   MOBILE
   576px — 767px
============================================================ */

@media (max-width: 767px) {

    .iqraa-pillars {
        padding: 90px 0 85px;
    }

    .pillars-container {
        width: calc(100% - 30px);
    }


    /* ========================================================
       HEADER
    ======================================================== */

    .pillars-header {
        margin-bottom: 35px;
    }

    .pillars-badge {
        padding: 8px 15px;

        gap: 8px;

        margin-bottom: 18px;

        font-size: 11px;
    }

    .pillars-badge-dot {
        width: 7px;
        height: 7px;
    }

    .pillars-title {
        font-size: 39px;

        line-height: 1.08;

        letter-spacing: -1.2px;

        margin-bottom: 17px;
    }

    .pillars-title span {
        margin-top: 3px;
    }

    .pillars-subtitle {
        max-width: 500px;

        font-size: 14px;

        line-height: 1.7;
    }


    /* ========================================================
       GRID
    ======================================================== */

    .pillars-grid {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 16px;
    }


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

    .pillar-card {
        min-height: auto;

        padding: 23px 21px 20px;

        border-radius: 21px;
    }

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


    /* ========================================================
       CARD TOP
    ======================================================== */

    .pillar-top {
        margin-bottom: 23px;
    }

    .pillar-number {
        font-size: 36px;

        letter-spacing: -1.5px;
    }

    .pillar-icon {
        width: 53px;
        height: 53px;

        border-radius: 14px;

        font-size: 20px;
    }


    /* ========================================================
       CONTENT
    ======================================================== */

    .pillar-label {
        margin-bottom: 8px;

        font-size: 9px;

        letter-spacing: 0.10em;
    }

    .pillar-content h3 {
        margin-bottom: 12px;

        font-size: 23px;

        line-height: 1.2;
    }

    .pillar-content p {
        font-size: 13px;

        line-height: 1.7;
    }


    /* ========================================================
       FEATURES
    ======================================================== */

    .pillar-features {
        margin-top: 20px;

        grid-template-columns: 1fr;

        gap: 9px;
    }

    .pillar-feature {
        gap: 8px;

        font-size: 12px;

        line-height: 1.45;
    }

    .feature-check {
        flex: 0 0 19px;

        width: 19px;
        height: 19px;

        font-size: 8px;
    }


    /* ========================================================
       CARD FOOTER
    ======================================================== */

    .pillar-bottom {
        margin-top: 22px;

        padding-top: 17px;

        font-size: 10px;
    }

    .pillar-bottom i {
        width: 27px;
        height: 27px;

        font-size: 9px;
    }


    /* ========================================================
       CONNECTED LINE
    ======================================================== */

    .pillars-connection {
        margin-top: 32px;

        gap: 9px;
    }

    .connection-line {
        width: 55px;
    }

    .connection-center {
        gap: 7px;

        font-size: 7px;

        letter-spacing: 0.09em;
    }

    .connection-center i {
        width: 25px;
        height: 25px;

        font-size: 9px;
    }
}


/* ============================================================
   SMALL MOBILE
   421px — 575px
============================================================ */

@media (max-width: 575px) {

    .iqraa-pillars {
        padding: 78px 0 75px;
    }

    .pillars-container {
        width: calc(100% - 24px);
    }


    /* Header */

    .pillars-title {
        font-size: 36px;

        letter-spacing: -1px;
    }

    .pillars-subtitle {
        font-size: 13px;

        line-height: 1.7;
    }


    /* Cards */

    .pillar-card {
        padding: 21px 18px 18px;

        border-radius: 19px;
    }

    .pillar-number {
        font-size: 33px;
    }

    .pillar-icon {
        width: 50px;
        height: 50px;

        border-radius: 13px;

        font-size: 19px;
    }

    .pillar-content h3 {
        font-size: 22px;
    }

    .pillar-content p {
        font-size: 12.5px;
    }

    .pillar-feature {
        font-size: 11.5px;
    }

    .pillar-bottom {
        font-size: 9.5px;
    }


    /* Connection */

    .connection-line {
        width: 42px;
    }

    .connection-center {
        font-size: 6.5px;
    }
}


/* ============================================================
   VERY SMALL MOBILE
   420px AND BELOW
============================================================ */

@media (max-width: 420px) {

    .iqraa-pillars {
        padding: 70px 0 65px;
    }

    .pillars-container {
        width: calc(100% - 20px);
    }


    /* Header */

    .pillars-header {
        margin-bottom: 30px;
    }

    .pillars-badge {
        padding: 7px 13px;

        font-size: 10px;

        margin-bottom: 16px;
    }

    .pillars-title {
        font-size: 31px;

        line-height: 1.1;
    }

    .pillars-subtitle {
        font-size: 12px;
    }


    /* Card */

    .pillar-card {
        padding: 19px 16px 17px;

        border-radius: 17px;
    }

    .pillar-top {
        margin-bottom: 20px;
    }

    .pillar-number {
        font-size: 30px;
    }

    .pillar-icon {
        width: 46px;
        height: 46px;

        border-radius: 12px;

        font-size: 17px;
    }

    .pillar-label {
        font-size: 8px;
    }

    .pillar-content h3 {
        font-size: 20px;

        margin-bottom: 10px;
    }

    .pillar-content p {
        font-size: 11.5px;

        line-height: 1.65;
    }


    /* Features */

    .pillar-features {
        margin-top: 17px;

        gap: 8px;
    }

    .pillar-feature {
        font-size: 10.5px;
    }

    .feature-check {
        flex-basis: 18px;

        width: 18px;
        height: 18px;

        font-size: 7px;
    }


    /* Footer */

    .pillar-bottom {
        margin-top: 19px;

        padding-top: 15px;

        font-size: 9px;
    }

    .pillar-bottom i {
        width: 25px;
        height: 25px;
    }


    /* Connection */

    .pillars-connection {
        margin-top: 28px;

        gap: 6px;
    }

    .connection-line {
        width: 25px;
    }

    .connection-center {
        gap: 5px;

        font-size: 5.5px;

        letter-spacing: 0.06em;
    }

    .connection-center i {
        width: 22px;
        height: 22px;

        font-size: 8px;
    }
}



/* ============================================================
   SECTION 4 — FULL RESPONSIVE SYSTEM
============================================================ */

@media (max-width: 1300px) {
    .interfaces-container {
        width: min(1160px, calc(100% - 40px));
    }

    .interface-card {
        width: 330px;
    }

    .interface-admin { left: 0; }
    .interface-manager { right: 0; }
    .interface-student { left: 5%; }
    .interface-community { right: 5%; }
}

@media (max-width: 1100px) {
    .iqraa-interfaces {
        padding: 90px 0 80px;
    }

    .interfaces-container {
        width: calc(100% - 36px);
    }

    .interfaces-heading-row {
        grid-template-columns: 1fr 0.8fr;
        gap: 35px;
    }

    .interfaces-heading h2 {
        font-size: clamp(46px, 5.5vw, 62px);
    }

    .interfaces-description p {
        font-size: 16px;
    }

    .interface-system {
        height: 740px;
    }

    .interface-card {
        width: 285px;
        min-height: 230px;
        padding: 22px;
    }

    .interface-admin,
    .interface-manager {
        top: 0;
    }

    .interface-admin { left: 0; }
    .interface-manager { right: 0; }

    .interface-teacher,
    .interface-parent {
        top: 255px;
    }

    .interface-teacher { left: 0; }
    .interface-parent { right: 0; }

    .interface-student { left: 5%; }
    .interface-community { right: 5%; }

    .interface-orbit-one {
        width: 440px;
        height: 440px;
    }

    .interface-orbit-two {
        width: 620px;
        height: 620px;
    }
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {
    .iqraa-interfaces {
        padding: 80px 0 70px;
    }

    .interfaces-container {
        width: calc(100% - 32px);
    }

    .interfaces-intro {
        margin-bottom: 55px;
    }

    .interfaces-heading-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .interfaces-heading h2 {
        font-size: clamp(44px, 7vw, 58px);
    }

    .interfaces-description {
        padding-bottom: 0;
    }

    .interfaces-description p {
        max-width: 700px;
        font-size: 16px;
        line-height: 1.7;
    }

    /* Switch from desktop positioning to a stable 2-column grid */
    .interface-system {
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        padding-top: 105px;
    }

    .interface-orbit,
    .interface-line {
        display: none;
    }

    .interface-center {
        top: 0;
        left: 50%;
        width: 145px;
        height: 145px;
        transform: translateX(-50%);
    }

    .center-pulse {
        inset: -12px;
    }

    .center-logo-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 6px;
        border-radius: 10px;
        font-size: 15px;
    }

    .center-logo span {
        font-size: 11px;
    }

    .center-logo strong {
        font-size: 19px;
    }

    .center-caption {
        margin-top: 8px;
        font-size: 7px;
    }

    .center-status {
        margin-top: 8px;
        padding: 4px 7px;
        font-size: 7px;
    }

    .interface-card {
        position: relative;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100%;
        min-height: 230px;
        padding: 22px;
    }

    .interface-card:hover {
        transform: translateY(-6px);
    }

    .interface-content h3 {
        font-size: 22px;
    }

    .interface-content p {
        font-size: 13px;
        line-height: 1.65;
    }

    .interfaces-bottom {
        margin-top: 28px;
    }
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {
    .iqraa-interfaces {
        padding: 70px 0 60px;
    }

    .interfaces-container {
        width: calc(100% - 28px);
    }

    .interfaces-badge {
        padding: 8px 14px;
        font-size: 11px;
        margin-bottom: 20px;
    }

    .interfaces-eyebrow {
        font-size: 10px;
        letter-spacing: .15em;
    }

    .interfaces-heading h2 {
        font-size: clamp(38px, 10vw, 48px);
        letter-spacing: -1.5px;
    }

    .interfaces-description p {
        font-size: 15px;
        line-height: 1.7;
    }

    .interfaces-mini-line {
        font-size: 11px;
    }

    .interface-system {
        grid-template-columns: 1fr;
        gap: 15px;
        padding-top: 92px;
    }

    .interface-center {
        width: 145px;
        height: 145px;
    }

    .interface-card {
        min-height: auto;
        padding: 20px;
        border-radius: 19px;
    }

    .interface-card-top {
        margin-bottom: 16px;
    }

    .interface-icon {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        font-size: 17px;
    }

    .interface-role {
        font-size: 9px;
        letter-spacing: .13em;
    }

    .interface-content h3 {
        font-size: 21px;
        margin-bottom: 8px;
    }

    .interface-content p {
        font-size: 13px;
        line-height: 1.7;
    }

    .interface-tags {
        gap: 7px;
        margin-top: 14px;
    }

    .interface-tags span {
        padding: 6px 9px;
        font-size: 9px;
    }

    .interfaces-bottom {
        padding: 15px 16px;
        gap: 11px;
        margin-top: 25px;
    }

    .interfaces-bottom-icon {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 10px;
        font-size: 13px;
    }

    .interfaces-bottom strong {
        font-size: 13px;
    }

    .interfaces-bottom span {
        font-size: 10px;
        line-height: 1.5;
    }
}

/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {
    .iqraa-interfaces {
        padding: 60px 0 50px;
    }

    .interfaces-container {
        width: calc(100% - 22px);
    }

    .interfaces-intro {
        margin-bottom: 45px;
    }

    .interfaces-heading h2 {
        font-size: 36px;
        line-height: 1.06;
    }

    .interfaces-description p {
        font-size: 14px;
    }

    .interface-system {
        padding-top: 88px;
        gap: 13px;
    }

    .interface-center {
        width: 145px;
        height: 145px;
    }

    .center-logo-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .center-logo span {
        font-size: 10px;
    }

    .center-logo strong {
        font-size: 17px;
    }

    .center-caption {
        font-size: 6.5px;
    }

    .center-status {
        font-size: 6px;
        padding: 4px 6px;
    }

    .interface-card {
        padding: 18px;
        border-radius: 17px;
    }

    .interface-content h3 {
        font-size: 20px;
    }

    .interface-content p {
        font-size: 12.5px;
    }

    .interface-icon {
        width: 43px;
        height: 43px;
        font-size: 16px;
    }

    .interfaces-bottom {
        align-items: flex-start;
    }
}

/* ============================================================
   VERY SMALL PHONES
============================================================ */

@media (max-width: 360px) {
    .interfaces-container {
        width: calc(100% - 18px);
    }

    .interfaces-heading h2 {
        font-size: 33px;
    }

    .interfaces-description p {
        font-size: 13px;
    }

    .interface-system {
        padding-top: 84px;
    }

    .interface-center {
        width: 145px;
        height: 145px;
    }

    .center-logo strong {
        font-size: 16px;
    }

    .interface-card {
        padding: 16px;
    }

    .interface-content h3 {
        font-size: 19px;
    }

    .interface-content p {
        font-size: 12px;
    }
}


/* ============================================================
   LAUNCH — TABLET
============================================================ */

@media (max-width: 991px) {

    .iqraa-launch {
        padding: 105px 0 85px;
    }

    .launch-container {
        width: calc(100% - 36px);
    }

    .launch-title {
        font-size:
            clamp(
                44px,
                7vw,
                62px
            );
    }

    .launch-description {
        font-size: 16px;
    }

    .launch-countdown {
        gap: 12px;

        margin-top: 42px;
    }

    .countdown-item {
        width: 125px;

        min-height: 115px;

        border-radius: 19px;
    }

    .countdown-number {
        font-size: 44px;
    }

    .countdown-divider {
        font-size: 28px;
    }

    .launch-orbit-one {
        width: 520px;
        height: 520px;
    }

    .launch-orbit-two {
        width: 720px;
        height: 720px;
    }
}


/* ============================================================
   LAUNCH — MOBILE
============================================================ */

@media (max-width: 767px) {

    .iqraa-launch {
        padding: 80px 0 65px;
    }

    .launch-container {
        width: calc(100% - 28px);
    }

    .launch-badge {
        padding: 8px 14px;

        font-size: 11px;

        margin-bottom: 22px;
    }

    .launch-title {
        font-size:
            clamp(
                36px,
                10vw,
                48px
            );

        line-height: 1.07;

        letter-spacing: -1.5px;

        margin-bottom: 20px;
    }

    .launch-description {
        font-size: 14px;

        line-height: 1.7;
    }

    .launch-countdown {
        gap: 7px;

        margin-top: 34px;
    }

    .countdown-item {
        width: 78px;

        min-height: 88px;

        padding: 13px 7px;

        border-radius: 14px;
    }

    .countdown-number {
        font-size: 31px;

        letter-spacing: -1px;
    }

    .countdown-label {
        margin-top: 7px;

        font-size: 7px;

        letter-spacing: .12em;
    }

    .countdown-divider {
        font-size: 21px;

        transform:
            translateY(-5px);
    }

    .launch-date {
        gap: 10px;

        margin-top: 23px;
    }

    .launch-date-line {
        width: 35px;
    }

    .launch-date-content {
        font-size: 8px;

        letter-spacing: .12em;
    }

    .launch-date-content i {
        font-size: 10px;
    }

    .launch-actions {
        margin-top: 30px;
    }

    .launch-cta {
        min-width: 195px;

        height: 53px;

        padding: 0 20px;

        font-size: 13px;
    }

    .launch-orbit-one {
        width: 400px;
        height: 400px;
    }

    .launch-orbit-two {
        width: 570px;
        height: 570px;
    }
}


/* ============================================================
   LAUNCH — SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .iqraa-launch {
        padding: 70px 0 55px;
    }

    .launch-container {
        width: calc(100% - 22px);
    }

    .launch-badge {
        font-size: 10px;

        padding: 8px 12px;
    }

    .launch-title {
        font-size: 34px;

        line-height: 1.08;

        letter-spacing: -1px;
    }

    .launch-description {
        font-size: 13px;

        line-height: 1.7;
    }

    .launch-countdown {
        gap: 4px;

        margin-top: 30px;
    }

    .countdown-item {
        width: 67px;

        min-height: 76px;

        padding: 10px 5px;

        border-radius: 12px;
    }

    .countdown-number {
        font-size: 25px;
    }

    .countdown-label {
        font-size: 6px;

        margin-top: 6px;
    }

    .countdown-divider {
        font-size: 17px;
    }

    .launch-date {
        margin-top: 19px;
    }

    .launch-date-line {
        width: 24px;
    }

    .launch-date-content {
        font-size: 7px;

        gap: 5px;
    }

    .launch-cta {
        min-width: 185px;

        height: 50px;

        font-size: 12px;
    }

    .launch-orbit-one {
        width: 300px;
        height: 300px;
    }

    .launch-orbit-two {
        width: 430px;
        height: 430px;
    }
}


/* ============================================================
   LAUNCH — VERY SMALL PHONES
============================================================ */

@media (max-width: 360px) {

    .launch-title {
        font-size: 31px;
    }

    .launch-description {
        font-size: 12px;
    }

    .countdown-item {
        width: 61px;

        min-height: 72px;
    }

    .countdown-number {
        font-size: 22px;
    }

    .countdown-label {
        font-size: 5.5px;
    }

    .countdown-divider {
        font-size: 15px;
    }

    .launch-date-content {
        font-size: 6px;
    }
}

@media (max-width: 767px) {

    .launch-cta {
        min-width: 200px;
        height: 55px;

        padding: 0 22px;

        font-size: 13px;
    }

    .launch-cta i {
        width: 28px;
        height: 28px;

        font-size: 11px;
    }
}


@media (max-width: 480px) {

    .launch-cta {
        min-width: 190px;
        height: 52px;

        font-size: 12px;
    }

    .launch-cta i {
        width: 27px;
        height: 27px;
    }
}



/* ============================================================
   FAQ + PRE FOOTER RESPONSIVE
============================================================ */

@media (max-width: 991px) {

    .iqraa-faq {
        padding: 85px 0 90px;
    }

    .faq-header {
        margin-bottom: 42px;
    }

    .faq-container {
        width: min(
            760px,
            calc(100% - 36px)
        );
    }

    .faq-question {
        min-height: 70px;

        font-size: 16px;

        padding: 17px 20px;
    }

    .faq-answer p {
        padding:
            0 55px 22px 20px;

        font-size: 14px;
    }

    .iqraa-prefooter {
        padding: 80px 0;
    }

    .prefooter-container {
        width:
            calc(100% - 36px);
    }

    .prefooter-content p {
        font-size: 16px;
    }
}


@media (max-width: 575px) {

    .iqraa-faq {
        padding: 70px 0 75px;
    }

    .faq-container {
        width:
            calc(100% - 24px);
    }

    .faq-header {
        margin-bottom: 32px;
    }

    .faq-badge {
        padding: 9px 15px;

        font-size: 11px;
    }

    .faq-header h2 {
        font-size: 38px;

        letter-spacing: -1.2px;
    }

    .faq-list {
        gap: 10px;
    }

    .faq-item {
        border-radius: 16px;
    }

    .faq-question {
        min-height: 64px;

        padding: 15px 16px;

        gap: 12px;

        font-size: 14px;

        line-height: 1.4;
    }

    .faq-question i {
        width: 31px;
        height: 31px;

        flex: 0 0 31px;

        font-size: 10px;
    }

    .faq-answer p {
        padding:
            0 16px 20px;

        font-size: 13px;

        line-height: 1.7;
    }


    /* PRE FOOTER */

    .iqraa-prefooter {
        padding: 65px 0;
    }

    .prefooter-container {
        width:
            calc(100% - 24px);
    }

    .prefooter-content h2 {
        font-size: 36px;

        letter-spacing: -1px;

        line-height: 1.12;

        margin-bottom: 17px;
    }

    .prefooter-content p {
        max-width: 340px;

        font-size: 14px;

        line-height: 1.7;

        margin-bottom: 27px;
    }

    .iqraa-prefooter .launch-cta {
        min-width: 195px;

        height: 54px;
    }
}


@media (max-width: 380px) {

    .faq-header h2 {
        font-size: 33px;
    }

    .faq-question {
        font-size: 13px;
    }

    .prefooter-content h2 {
        font-size: 32px;
    }

}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1199px) {

    .footer-container {
        width:
            min(1080px, calc(100% - 50px));
    }


    .footer-grid {
        grid-template-columns:
            1.4fr
            1fr
            1fr;

        gap:
            48px 40px;
    }


    .footer-brand {
        max-width: 100%;
    }


    .footer-contact {
        grid-column:
            2 / 4;
    }

}


/* ============================================================
   TABLET / MOBILE
============================================================ */

@media (max-width: 991px) {

    .iqraa-footer {
        padding-top: 65px;
    }


    .footer-container {
        width:
            calc(100% - 36px);
    }


    .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            45px 35px;

        padding-bottom: 45px;
    }


    .footer-brand {
        grid-column:
            1 / -1;

        max-width: 650px;
    }


    .footer-contact {
        grid-column:
            auto;
    }


    .footer-brand p {
        max-width: 650px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575px) {

    .iqraa-footer {
        padding-top: 55px;
    }


    .footer-container {
        width:
            calc(100% - 28px);
    }


    .footer-grid {
        grid-template-columns: 1fr;

        gap: 36px;

        padding-bottom: 35px;
    }


    .footer-brand {
        grid-column: auto;
    }


    .footer-contact {
        grid-column: auto;
    }


    /* LOGO */

    .footer-logo {
        font-size: 27px;
    }


    /* BRAND */

    .footer-brand h3 {
        font-size: 19px;

        margin-bottom: 13px;
    }


    .footer-brand p {
        font-size: 14px;

        line-height: 1.8;
    }


    /* SOCIAL */

    .footer-socials {
        margin-top: 23px;
    }


    .footer-socials a {
        width: 40px;
        height: 40px;

        border-radius: 11px;

        font-size: 14px;
    }


    /* COLUMN */

    .footer-column h4 {
        font-size: 17px;
    }


    .footer-heading-line {
        margin-bottom: 20px;
    }


    .footer-column li {
        margin-bottom: 13px;
    }


    .footer-column li a {
        font-size: 14px;
    }


    /* CONTACT */

    .footer-contact-item {
        font-size: 14px;

        line-height: 1.55;

        margin-bottom: 16px;
    }


    .footer-contact-icon {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }


    /* COPYRIGHT */

    .footer-bottom {
        padding:
            20px 0 23px;
    }


    .footer-bottom-content p {
        font-size: 12px;
    }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 380px) {

    .iqraa-footer {
        padding-top: 48px;
    }


    .footer-container {
        width:
            calc(100% - 22px);
    }


    .footer-logo {
        font-size: 25px;
    }


    .footer-brand h3 {
        font-size: 18px;
    }


    .footer-brand p {
        font-size: 13px;
    }


    .footer-column h4 {
        font-size: 16px;
    }


    .footer-column li a {
        font-size: 13px;
    }


    .footer-contact-item {
        font-size: 13px;
    }


    .footer-bottom-content p {
        font-size: 11px;
    }

}

@media (max-width: 575px) {

    .footer-logo img {
        width: 165px;
        max-height: 55px;
    }

}


/* =========================================================
   ABOUT HERO
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .about-hero {
        min-height: 720px;
    }

    .about-hero-container {
        width:
            min(1080px, calc(100% - 40px));

        grid-template-columns:
            minmax(0, 1fr)
            minmax(400px, 0.9fr);

        gap: 30px;
    }

    .about-hero-title {
        font-size: 58px;
    }

    .about-visual-circle {
        width: 350px;
        height: 350px;
    }

    .about-circle-inner {
        width: 225px;
        height: 225px;
    }

    .about-visual-orbit.orbit-one {
        width: 460px;
        height: 460px;
    }

    .about-visual-orbit.orbit-two {
        width: 360px;
        height: 360px;
    }

    .about-floating-card {
        transform: scale(0.9);
    }

}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 991px) {

    .about-hero {
        min-height: auto;

        padding:
            110px 0 80px;
    }

    .about-hero-container {
        width:
            calc(100% - 36px);

        max-width: 760px;

        grid-template-columns: 1fr;

        gap: 30px;
    }

    .about-hero-content {
        max-width: 700px;

        text-align: center;

        margin: 0 auto;
    }

    .about-hero-badge {
        margin-bottom: 25px;
    }

    .about-hero-title {
        font-size: 50px;
    }

    .about-hero-description {
        margin-left: auto;
        margin-right: auto;

        font-size: 16px;
    }

    .about-hero-actions {
        display: flex;

        justify-content: center;
    }

    .about-hero-visual {
        height: 500px;
    }

    .about-scroll {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .about-hero {
        padding:
            95px 0 55px;
    }

    .about-hero-container {
        width:
            calc(100% - 24px);
    }

    .about-hero-title {
        font-size: 37px;

        line-height: 1.1;

        letter-spacing: -1.3px;
    }

    .about-hero-description {
        font-size: 14px;

        line-height: 1.7;
    }

    .about-hero-button {
        height: 54px;

        padding-left: 19px;

        font-size: 13px;
    }

    .about-button-icon {
        width: 40px;
        height: 40px;
    }

    .about-hero-visual {
        height: 390px;

        margin-top: 5px;
    }

    .about-visual-circle {
        width: 285px;
        height: 285px;
    }

    .about-circle-inner {
        width: 190px;
        height: 190px;
    }

    .about-circle-icon {
        width: 45px;
        height: 45px;

        margin-bottom: 9px;

        font-size: 18px;
    }

    .about-circle-inner > span {
        font-size: 9px;
    }

    .about-circle-inner strong {
        font-size: 21px;
    }

    .about-circle-inner small {
        font-size: 8px;
    }

    .about-visual-orbit.orbit-one {
        width: 320px;
        height: 320px;
    }

    .about-visual-orbit.orbit-two {
        width: 265px;
        height: 265px;
    }

    .about-floating-card {
        min-width: 165px;

        padding: 9px 11px;

        gap: 9px;

        border-radius: 13px;

        transform: scale(0.82);
    }

    .about-floating-icon {
        width: 35px;
        height: 35px;

        flex-basis: 35px;

        font-size: 13px;
    }

    .about-floating-card strong {
        font-size: 10px;
    }

    .about-floating-card span {
        font-size: 8px;
    }

    .about-card-quran {
        top: 45px;
        left: -25px;
    }

    .about-card-madrassa {
        top: 140px;
        right: -30px;
    }

    .about-card-mahal {
        bottom: 30px;
        left: -15px;
    }

}


/* =========================================================
   SECTION 2 — OUR STORY
========================================================= */
/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

    .our-story-section {
        padding: 105px 0 115px;
    }

    .story-container {
        width:
            min(1080px, calc(100% - 40px));

        grid-template-columns:
            400px minmax(0, 1fr);

        gap: 55px;
    }

    .story-main-card {
        width: 350px;
        height: 350px;

        padding: 38px;
    }

    .story-content h2 {
        font-size: 48px;
    }

    .story-text p {
        font-size: 15px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .our-story-section {
        padding: 90px 0 100px;
    }

    .story-container {
        width:
            calc(100% - 36px);

        max-width: 760px;

        grid-template-columns: 1fr;

        gap: 65px;
    }

    .story-visual {
        min-height: 470px;

        order: 2;
    }

    .story-content {
        order: 1;

        max-width: 720px;

        margin: 0 auto;

        text-align: center;
    }

    .story-badge {
        margin-bottom: 22px;
    }

    .story-content h2 span {
        display: inline;
    }

    .story-text {
        margin: 0 auto;
    }

    .story-main-card {
        width: 350px;
        height: 350px;
    }

    .story-line {
        left: calc(50% - 174px);
    }

    .story-card-top {
        right: calc(50% - 245px);
    }

    .story-card-bottom {
        left: calc(50% - 245px);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .our-story-section {
        padding: 75px 0 80px;
    }

    .story-container {
        width:
            calc(100% - 24px);

        gap: 45px;
    }

    .story-content h2 {
        font-size: 36px;

        line-height: 1.12;

        letter-spacing: -1.2px;

        margin-bottom: 23px;
    }

    .story-text p {
        font-size: 14px;

        line-height: 1.75;

        margin-bottom: 18px;
    }

    .story-visual {
        min-height: 360px;
    }

    .story-main-card {
        width: 275px;
        height: 275px;

        padding: 27px;

        border-radius: 28px;
    }

    .story-card-number {
        font-size: 58px;
    }

    .story-card-icon {
        width: 55px;
        height: 55px;

        border-radius: 16px;

        font-size: 21px;
    }

    .story-card-content span {
        font-size: 9px;
    }

    .story-card-content strong {
        font-size: 18px;
    }

    .story-line {
        width: 55px;
        height: 3px;

        left: calc(50% - 136px);
        bottom: 57px;
    }

    .story-floating-card {
        padding: 10px 12px;

        gap: 8px;

        font-size: 9px;

        border-radius: 11px;
    }

    .story-floating-card i {
        font-size: 12px;
    }

    .story-card-top {
        top: 30px;
        right: calc(50% - 165px);
    }

    .story-card-bottom {
        bottom: 35px;
        left: calc(50% - 165px);
    }

}


/* =========================================================
   SECTION 3 — OUR VISION & MISSION
========================================================= */

/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

    .vision-mission-section {
        padding: 95px 0 105px;
    }

    .vision-header {
        margin-bottom: 55px;
    }

    .vision-card {
        min-height: 510px;

        padding: 30px;
    }

    .vision-card-content h3 {
        font-size: 27px;
    }

    .vision-card-content p {
        font-size: 15px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .vision-mission-section {
        padding: 85px 0 95px;
    }

    .vision-container {
        width:
            calc(100% - 36px);

        max-width: 760px;
    }

    .vision-header {
        margin-bottom: 48px;
    }

    .vision-mission-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .vision-card {
        min-height: auto;

        padding: 30px;
    }

    .vision-card-content p {
        max-width: 700px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .vision-mission-section {
        padding: 72px 0 80px;
    }

    .vision-container {
        width:
            calc(100% - 24px);
    }

    .vision-header {
        margin-bottom: 38px;
    }

    .vision-badge {
        padding: 9px 14px;

        font-size: 11px;
    }

    .vision-header h2 {
        font-size: 38px;

        letter-spacing: -1.3px;
    }

    .vision-card {
        padding: 25px 22px 24px;

        border-radius: 23px;
    }

    .vision-card-top {
        margin-bottom: 30px;
    }

    .vision-icon {
        width: 56px;
        height: 56px;

        border-radius: 16px;

        font-size: 21px;
    }

    .vision-number {
        font-size: 39px;
    }

    .vision-label {
        font-size: 10px;
    }

    .vision-card-content h3 {
        font-size: 24px;

        margin-bottom: 17px;
    }

    .vision-card-content p {
        font-size: 14px;

        line-height: 1.72;

        margin-bottom: 16px;
    }

    .vision-card-line {
        width: 48px;

        margin-top: 28px;
    }
}


/* =========================================================
   SECTION 4 — OUR VALUES
========================================================= */

/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

    .values-section {
        padding: 95px 0 105px;
    }

    .values-header {
        margin-bottom: 50px;
    }

    .value-card {
        min-height: 310px;

        padding: 25px;
    }

    .value-content h3 {
        font-size: 22px;
    }

    .value-content p {
        font-size: 14px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .values-section {
        padding: 85px 0 95px;
    }

    .values-container {
        width:
            calc(100% - 36px);

        max-width: 760px;
    }

    .values-header {
        margin-bottom: 42px;
    }

    .values-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

    .value-card {
        min-height: 300px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .values-section {
        padding: 72px 0 80px;
    }

    .values-container {
        width:
            calc(100% - 24px);
    }

    .values-header {
        margin-bottom: 35px;
    }

    .values-badge {
        padding: 9px 14px;

        font-size: 11px;
    }

    .values-header h2 {
        font-size: 37px;

        line-height: 1.1;

        letter-spacing: -1.2px;
    }

    .values-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .value-card {
        min-height: 285px;

        padding: 24px 22px;

        border-radius: 21px;
    }

    .value-top {
        margin-bottom: 30px;
    }

    .value-number {
        font-size: 38px;
    }

    .value-icon {
        width: 53px;
        height: 53px;

        border-radius: 15px;

        font-size: 20px;
    }

    .value-label {
        font-size: 10px;
    }

    .value-content h3 {
        font-size: 22px;

        margin-bottom: 12px;
    }

    .value-content p {
        font-size: 14px;

        line-height: 1.7;
    }

    .value-accent {
        width: 45px;
    }

    .values-cta {
        margin-top: 35px;
    }

    .values-cta-button {
        min-height: 52px;

        padding-left: 20px;

        font-size: 14px;
    }

    .values-cta-button i {
        width: 35px;
        height: 35px;
    }
}



/* =========================================================
   SERVICES HERO
   Same design system as ABOUT HERO
========================================================= */

/* =========================================================
   SERVICES HERO — TABLET
========================================================= */

@media (max-width: 1199px) {

    .service-hero {
        min-height: 720px;
    }

    .service-hero .about-hero-container {

        width:
            min(1080px, calc(100% - 40px));

        grid-template-columns:
            minmax(0, 1fr)
            minmax(400px, 0.9fr);

        gap: 30px;
    }

    .service-hero .about-hero-title {
        font-size: 58px;
    }

    .service-hero .about-visual-circle {
        width: 350px;
        height: 350px;
    }

    .service-hero .about-circle-inner {
        width: 225px;
        height: 225px;
    }

    .service-hero .about-visual-orbit.orbit-one {
        width: 460px;
        height: 460px;
    }

    .service-hero .about-visual-orbit.orbit-two {
        width: 360px;
        height: 360px;
    }

    .service-hero .about-floating-card {
        transform: scale(0.9);
    }

}


/* =========================================================
   SERVICES HERO — MOBILE / TABLET
========================================================= */

@media (max-width: 991px) {

    .service-hero {

        min-height: auto;

        padding:
            110px 0 80px;
    }

    .service-hero .about-hero-container {

        width:
            calc(100% - 36px);

        max-width: 760px;

        grid-template-columns: 1fr;

        gap: 30px;
    }

    .service-hero .about-hero-content {

        max-width: 700px;

        text-align: center;

        margin: 0 auto;
    }

    .service-hero .about-hero-badge {
        margin-bottom: 25px;
    }

    .service-hero .about-hero-title {
        font-size: 50px;
    }

    .service-hero .about-hero-description {

        margin-left: auto;
        margin-right: auto;

        font-size: 16px;
    }

    .service-hero .about-hero-visual {
        height: 500px;
    }

    .service-hero .scroll-explore {
        display: none;
    }

}


/* =========================================================
   SERVICES HERO — SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .service-hero {

        padding:
            95px 0 55px;
    }

    .service-hero .about-hero-container {

        width:
            calc(100% - 24px);
    }

    .service-hero .about-hero-title {

        font-size: 37px;

        line-height: 1.1;

        letter-spacing: -1.3px;
    }

    .service-hero .about-hero-description {

        font-size: 14px;

        line-height: 1.7;
    }

    .service-hero .about-hero-visual {

        height: 390px;

        margin-top: 5px;
    }

    .service-hero .about-visual-circle {

        width: 285px;
        height: 285px;
    }

    .service-hero .about-circle-inner {

        width: 190px;
        height: 190px;
    }

    .service-hero .about-circle-icon {

        width: 45px;
        height: 45px;

        margin-bottom: 9px;

        font-size: 18px;
    }

    .service-hero .about-circle-inner > span {
        font-size: 9px;
    }

    .service-hero .about-circle-inner strong {
        font-size: 21px;
    }

    .service-hero .about-circle-inner small {
        font-size: 8px;
    }

    .service-hero .about-visual-orbit.orbit-one {

        width: 320px;
        height: 320px;
    }

    .service-hero .about-visual-orbit.orbit-two {

        width: 265px;
        height: 265px;
    }

    .service-hero .about-floating-card {

        min-width: 165px;

        padding: 9px 11px;

        gap: 9px;

        border-radius: 13px;

        transform: scale(0.82);
    }

    .service-hero .about-floating-icon {

        width: 35px;
        height: 35px;

        flex-basis: 35px;

        font-size: 13px;
    }

    .service-hero .about-floating-card strong {
        font-size: 10px;
    }

    .service-hero .about-floating-card span {
        font-size: 8px;
    }

    .service-hero .about-card-quran {
        top: 45px;
        left: -25px;
    }

    .service-hero .about-card-madrassa {
        top: 120px;
        right: -25px;
    }

    .service-hero .about-card-mahal {
        bottom: 45px;
        left: -25px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .service-hero .about-hero-title {
        font-size: 34px;
    }

    .service-hero .about-hero-description {
        font-size: 13px;
    }

    .service-hero .about-hero-visual {
        height: 360px;
    }

    .service-hero .about-visual-circle {
        width: 260px;
        height: 260px;
    }

    .service-hero .about-circle-inner {
        width: 175px;
        height: 175px;
    }

    .service-hero .about-visual-orbit.orbit-one {
        width: 295px;
        height: 295px;
    }

    .service-hero .about-visual-orbit.orbit-two {
        width: 240px;
        height: 240px;
    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .about-card-privilege {

        width: 175px;
        min-width: 175px;

        padding: 10px 11px;

        gap: 8px;

        right: -30px;
        bottom: 125px;

        border-radius: 13px;

        transform: scale(0.9);
    }

    .about-card-privilege .privilege-icon {

        width: 36px;
        height: 36px;

        flex-basis: 36px;

        border-radius: 10px;

        font-size: 13px;
    }

    .privilege-label {
        font-size: 6px;
    }

    .about-card-privilege strong {
        font-size: 10px;
    }

    .about-card-privilege small {
        font-size: 7px;
    }

    .privilege-card-badge {

        width: 19px;
        height: 19px;

        top: 7px;
        right: 7px;

        font-size: 7px;
    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .about-card-careers {

        width: 175px;
        min-width: 175px;

        padding: 10px 11px;

        gap: 8px;

        right: 25px;
        bottom: 5px;

        border-radius: 13px;

        transform: scale(0.9);
    }

    .about-card-careers .careers-icon {

        width: 36px;
        height: 36px;

        flex-basis: 36px;

        border-radius: 10px;

        font-size: 13px;
    }

    .careers-label {
        font-size: 6px;
    }

    .about-card-careers strong {
        font-size: 10px;
    }

    .about-card-careers small {
        font-size: 7px;
    }

    .careers-card-arrow {

        width: 19px;
        height: 19px;

        top: 7px;
        right: 7px;

        font-size: 7px;
    }

}


/* ==================Service==== */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .service-detail-section {
        padding: 105px 0 115px;
    }

    .service-detail-container {
        width:
            min(1080px, calc(100% - 45px));

        grid-template-columns:
            minmax(0, 1fr)
            minmax(410px, 0.85fr);

        gap: 45px;
    }

    .service-detail-content h3 {
        font-size: 50px;
    }

    .service-detail-content > p {
        font-size: 15px;
    }

    .service-feature span {
        font-size: 12px;
    }

    .service-detail-visual {
        min-height: 500px;
    }

    .quran-ai-image {
        max-width: 490px;
    }

    .service-detail-visual::before {
        width: 420px;
        height: 420px;
    }

    .service-detail-visual::after {
        width: 325px;
        height: 325px;
    }
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 991px) {

    .service-detail-section {
        padding: 95px 0 105px;
    }

    .service-detail-container {
        width:
            calc(100% - 36px);

        max-width: 760px;

        grid-template-columns: 1fr;

        gap: 60px;
    }

    .service-detail-content {
        max-width: 720px;

        margin: 0 auto;

        text-align: center;
    }

    .service-detail-badge {
        margin-bottom: 23px;
    }

    .service-detail-content h3 {
        font-size: 50px;
    }

    .service-detail-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .service-features {
        text-align: left;
    }

    .service-audience {
        text-align: left;
    }

    .service-detail-visual {
        min-height: 500px;

        padding: 10px;
    }

    .quran-ai-image {
        max-width: 520px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .service-detail-section {
        padding: 75px 0 85px;
    }

    .service-detail-container {
        width:
            calc(100% - 24px);

        gap: 45px;
    }

    .service-detail-badge {
        padding: 8px 14px;

        font-size: 9px;

        margin-bottom: 20px;
    }

    .service-detail-content h3 {
        font-size: 36px;

        line-height: 1.1;

        letter-spacing: -1.2px;

        margin-bottom: 20px;
    }

    .service-detail-content > p {
        font-size: 15px;

        line-height: 1.7;

        margin-bottom: 25px;
    }


    /* FEATURES */

    .service-features {
        gap: 8px;

        margin-bottom: 25px;
    }

    .service-feature {
        gap: 9px;

        padding: 10px;

        border-radius: 11px;
    }

    .service-feature > i {
        width: 27px;
        height: 27px;

        flex-basis: 27px;

        font-size: 13px;
    }

    .service-feature span {
        font-size: 13px;

        line-height: 1.5;
    }


    /* AUDIENCE */

    .service-audience {
        padding: 16px;

        border-radius: 13px;
    }

    .service-audience strong {
        font-size: 13px;

        margin-bottom: 7px;
    }

    .service-audience p {
        font-size: 13px;

        line-height: 1.6;
    }


    /* VISUAL */

    .service-detail-visual {
        min-height: auto;

        padding: 20px 0 25px;
    }

    .quran-ai-image {
        width: 100%;

        max-width: 100%;

        border-radius: 17px;

        box-shadow:
            0 20px 45px rgba(7, 29, 67, 0.13);
    }

    .service-detail-visual::before {
        width: 310px;
        height: 310px;
    }

    .service-detail-visual::after {
        width: 250px;
        height: 250px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .service-detail-content h3 {
        font-size: 32px;

        letter-spacing: -0.8px;
    }

    .service-detail-content > p {
        font-size: 15px;
    }

    .service-feature span {
        font-size: 13px;
    }

    .service-audience p {
        font-size: 13px;
    }

    .service-detail-visual::before {
        width: 280px;
        height: 280px;
    }

    .service-detail-visual::after {
        width: 225px;
        height: 225px;
    }
}


@media (max-width: 575px) {

    .beyond-digital-section {
        padding: 75px 0 65px;
    }

    .beyond-digital-container {
        width: calc(100% - 28px);
    }

    .beyond-digital-container h2 {
        font-size: 34px;
    }

    .beyond-digital-container > p {
        font-size: 12px;
        line-height: 1.7;
    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .prefooter-badge {

        padding: 7px 13px;

        font-size: 8px;

        margin-bottom: 18px;
    }

    .prefooter-actions {

        flex-direction: column;

        width: 100%;

        gap: 9px;
    }

    .prefooter-actions .launch-cta,
    .prefooter-talk-btn {

        width: 100%;
    }

}


/* =========================================================
   PRIVILEGE CARD HERO — RESPONSIVE
========================================================= */


/* =========================================================
   LARGE TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .privilege-card-image {
        width: 440px;
        max-width: 92%;
    }

    .privilege-card-image-glow {
        width: 380px;
        height: 245px;
    }

    .privilege-price-banner {
        gap: 13px;
        padding: 13px 18px;
    }

    .privilege-price-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .privilege-price-content {
        gap: 10px;
    }

    .privilege-price-content span {
        font-size: 13px;
    }

    .privilege-price-content strong {
        font-size: 20px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .privilege-card-visual {
        margin-top: 25px;
    }

    .privilege-card-image-wrapper {
        width: 100%;
    }

    .privilege-card-image {
        width: 450px;
        max-width: 82%;
    }

    .privilege-card-image-glow {
        width: 370px;
        height: 230px;
    }

    .privilege-price-banner {
        margin-left: auto;
        margin-right: auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .privilege-card-visual {
        margin-top: 30px;
    }

    .privilege-card-image {
        width: 390px;
        max-width: 88%;
    }

    .privilege-card-image-glow {
        width: 320px;
        height: 200px;
    }

    .privilege-price-banner {
        gap: 12px;

        padding: 13px 15px;

        border-radius: 14px;
    }

    .privilege-price-icon {
        width: 43px;
        height: 43px;

        flex-basis: 43px;

        border-radius: 12px;

        font-size: 15px;
    }

    .privilege-price-content {
        gap: 8px;
    }

    .privilege-price-content span {
        font-size: 12px;
    }

    .privilege-price-content strong {
        font-size: 19px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .privilege-card-visual {
        margin-top: 25px;
    }

    .privilege-card-image-wrapper {
        min-height: 300px;
    }

    .privilege-card-image {
        width: 350px;
        max-width: 92%;
    }

    .privilege-card-image-glow {
        width: 280px;
        height: 175px;

        filter: blur(22px);
    }

    .privilege-price-banner {
        width: 100%;

        display: flex;

        align-items: center;
        justify-content: flex-start;

        padding: 12px 14px;

        gap: 11px;
    }

    .privilege-price-icon {
        width: 41px;
        height: 41px;

        flex: 0 0 41px;

        border-radius: 11px;
    }

    .privilege-price-content {
        display: block;

        text-align: left;
    }

    .privilege-price-content span {
        display: block;

        font-size: 12px;

        line-height: 1.4;

        margin-bottom: 2px;
    }

    .privilege-price-content strong {
        display: block;

        font-size: 20px;

        line-height: 1.2;
    }

}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .privilege-card-visual {
        margin-top: 15px;
    }

    .privilege-card-image-wrapper {
        min-height: 270px;
    }

    .privilege-card-image {
        width: 310px;
        max-width: 94%;
    }

    .privilege-card-image-glow {
        width: 245px;
        height: 150px;
    }

    .privilege-price-banner {
        padding: 11px 12px;

        gap: 9px;
    }

    .privilege-price-icon {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        font-size: 14px;
    }

    .privilege-price-content span {
        font-size: 11px;
    }

    .privilege-price-content strong {
        font-size: 18px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .privilege-card-image {
        width: 285px;
    }

    .privilege-card-image-wrapper {
        min-height: 245px;
    }

    .privilege-price-content span {
        font-size: 10px;
    }

    .privilege-price-content strong {
        font-size: 17px;
    }

}


/* =========================================================
   WHAT IT IS — RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .privilege-what-section {
        padding: 100px 0;
    }

    .privilege-what-grid {
        gap: 55px;
    }

    .privilege-what-title {
        font-size: 52px;
    }

    .privilege-ecosystem-card {
        width: 350px;
        height: 420px;
    }

    .ecosystem-card-rewards {
        left: -5px;
    }

    .ecosystem-card-quran {
        right: -15px;
    }

}


@media (max-width: 991px) {

    .privilege-what-section {
        padding: 90px 0;
    }

    .privilege-what-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .privilege-what-content {
        max-width: 700px;

        margin: 0 auto;

        text-align: center;
    }

    .privilege-what-text {
        max-width: 680px;

        margin: 0 auto;
    }

    .privilege-what-visual {
        min-height: 520px;
    }

    .privilege-ecosystem-card {
        width: 370px;
        height: 440px;
    }

}


@media (max-width: 767px) {

    .privilege-what-section {
        padding: 75px 0;
    }

    .privilege-what-container {
        width: calc(100% - 32px);
    }

    .privilege-what-title {
        font-size: 43px;

        line-height: 1.08;

        letter-spacing: -1px;
    }

    .privilege-what-subhead {
        font-size: 16px;
    }

    .privilege-what-text p {
        font-size: 14.5px;

        line-height: 1.8;
    }

    .privilege-what-visual {
        min-height: 480px;
    }

    .privilege-ecosystem-card {
        width: 340px;
        height: 410px;

        padding: 24px;

        border-radius: 24px;
    }

    .ecosystem-card-rewards {
        left: 0;
        top: 60px;
    }

    .ecosystem-card-quran {
        right: 0;
        top: 185px;
    }

    .ecosystem-card-community {
        left: 10px;
        bottom: 45px;
    }

    .ecosystem-floating-card {
        min-width: 170px;

        padding: 10px 12px;
    }

}


@media (max-width: 575px) {

    .privilege-what-section {
        padding: 65px 0;
    }

    .privilege-what-container {
        width: calc(100% - 24px);
    }

    .privilege-what-badge {
        font-size: 12px;
    }

    .privilege-what-title {
        font-size: 36px;

        letter-spacing: -0.8px;
    }

    .privilege-what-subhead {
        font-size: 15px;

        margin-bottom: 22px;
    }

    .privilege-what-text p {
        font-size: 14px;

        line-height: 1.75;
    }

    .privilege-what-visual {
        min-height: 430px;
    }

    .privilege-ecosystem-card {
        width: 290px;
        height: 360px;

        padding: 20px;

        border-radius: 21px;
    }

    .ecosystem-card-top > span {
        font-size: 15px;
    }

    .ecosystem-card-icon {
        width: 36px;
        height: 36px;

        font-size: 13px;
    }

    .ecosystem-main-icon {
        width: 65px;
        height: 65px;

        margin-bottom: 17px;

        border-radius: 18px;

        font-size: 24px;
    }

    .ecosystem-card-center strong {
        font-size: 24px;
    }

    .ecosystem-card-center > span {
        font-size: 12px;
    }

    .ecosystem-card-bottom span {
        font-size: 8px;
    }

    .ecosystem-floating-card {
        min-width: 145px;

        gap: 8px;

        padding: 8px 10px;

        border-radius: 11px;
    }

    .ecosystem-floating-icon {
        width: 32px;
        height: 32px;

        flex-basis: 32px;

        border-radius: 9px;

        font-size: 12px;
    }

    .ecosystem-floating-card strong {
        font-size: 10px;
    }

    .ecosystem-floating-card span {
        font-size: 8px;
    }

    .ecosystem-card-rewards {
        left: -3px;
        top: 45px;
    }

    .ecosystem-card-quran {
        right: -3px;
        top: 170px;
    }

    .ecosystem-card-community {
        left: 0;
        bottom: 30px;
    }

}


@media (max-width: 380px) {

    .privilege-what-title {
        font-size: 33px;
    }

    .privilege-what-text p {
        font-size: 13.5px;
    }

    .privilege-what-visual {
        min-height: 395px;
    }

    .privilege-ecosystem-card {
        width: 270px;
        height: 335px;
    }

    .ecosystem-card-rewards {
        left: -2px;
        top: 40px;
    }

    .ecosystem-card-quran {
        right: -2px;
        top: 155px;
    }

    .ecosystem-card-community {
        bottom: 20px;
    }

}



/* =========================================================
   HOW IT WORKS — RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .privilege-how-section {
        padding: 100px 0 110px;
    }

    .privilege-how-grid {
        gap: 16px;
    }

    .privilege-step-card {
        padding: 24px 21px 26px;

        min-height: 315px;
    }

    .privilege-step-content h3 {
        font-size: 19px;
    }

    .privilege-step-content p {
        font-size: 13.5px;
    }

    .privilege-step-icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .privilege-how-section {
        padding: 90px 0 100px;
    }

    .privilege-how-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 18px;
    }

    .privilege-step-card {
        min-height: 285px;

        padding: 24px;
    }

    .privilege-step-connector {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .privilege-how-section {
        padding: 75px 0 85px;
    }

    .privilege-how-section .values-header {
        margin-bottom: 40px;
    }

    .privilege-how-subhead {
        font-size: 16px;

        line-height: 1.65;
    }

    .privilege-how-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .privilege-step-card {
        min-height: auto;

        padding: 23px;

        border-radius: 17px;
    }

    .privilege-step-content {
        margin-top: 23px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .privilege-how-section {
        padding: 65px 0 75px;
    }

    .privilege-how-subhead {
        font-size: 14px;
    }

    .privilege-step-card {
        padding: 20px;

        border-radius: 16px;
    }

    .privilege-step-icon {
        width: 43px;
        height: 43px;

        flex-basis: 43px;

        border-radius: 11px;

        font-size: 16px;
    }

    .privilege-step-content {
        margin-top: 21px;
    }

    .privilege-step-content h3 {
        font-size: 19px;
    }

    .privilege-step-content p {
        font-size: 13.5px;

        line-height: 1.7;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .privilege-step-card {
        padding: 18px;
    }

    .privilege-step-content h3 {
        font-size: 18px;
    }

    .privilege-step-content p {
        font-size: 13px;
    }

}


/* =========================================================
   PRICING — RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .privilege-pricing-section {
        padding: 100px 0 110px;
    }

    .privilege-pricing-card {
        max-width: 900px;

        padding: 42px 40px;

        gap: 38px;
    }

    .privilege-pricing-price strong {
        font-size: 68px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .privilege-pricing-section {
        padding: 90px 0 100px;
    }

    .privilege-pricing-card {
        max-width: 700px;

        grid-template-columns: 1fr;

        gap: 32px;

        padding: 40px;

        text-align: center;
    }

    .privilege-pricing-main {
        display: flex;

        flex-direction: column;

        align-items: center;
    }

    .privilege-pricing-description {
        margin-left: auto;
        margin-right: auto;
    }

    .privilege-pricing-divider {
        width: 100%;
        height: 1px;
    }

    .privilege-pricing-includes {
        padding-left: 0;

        text-align: left;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .privilege-pricing-section {
        padding: 75px 0 85px;
    }

    .privilege-pricing-card {
        width: calc(100% - 10px);

        padding: 32px 25px;

        border-radius: 22px;

        gap: 27px;
    }

    .privilege-pricing-label {
        font-size: 11px;
    }

    .privilege-pricing-price strong {
        font-size: 62px;

        letter-spacing: -2px;
    }

    .privilege-currency {
        margin-top: 9px;

        font-size: 25px;
    }

    .privilege-pricing-duration {
        font-size: 14px;
    }

    .privilege-pricing-description {
        margin: 21px 0 24px;

        font-size: 13.5px;
    }

    .privilege-pricing-button {
        padding: 11px 15px 11px 18px;

        font-size: 13px;
    }

    .privilege-pricing-button i {
        width: 29px;
        height: 29px;
    }

    .privilege-includes-heading {
        font-size: 20px;

        margin-bottom: 20px;
    }

    .privilege-include-item {
        gap: 11px;

        margin-bottom: 16px;
    }

    .privilege-include-item p {
        font-size: 18px;

        line-height: 1.65;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .privilege-pricing-section {
        padding: 65px 0 75px;
    }

    .privilege-pricing-card {
        width: 100%;

        padding: 28px 20px;

        border-radius: 20px;
    }

    .privilege-pricing-price strong {
        font-size: 54px;
    }

    .privilege-currency {
        margin-top: 7px;

        font-size: 22px;
    }

    .privilege-pricing-description {
        max-width: 320px;

        font-size: 13px;
    }

    .privilege-pricing-button {
        width: 100%;

        justify-content: space-between;
    }

    .privilege-pricing-includes {
        width: 100%;
    }

    .privilege-includes-heading {
        font-size: 19px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .privilege-pricing-card {
        padding: 25px 17px;
    }

    .privilege-pricing-price strong {
        font-size: 49px;
    }

    .privilege-currency {
        font-size: 20px;
    }

    .privilege-pricing-description {
        font-size: 12.5px;
    }

    .privilege-include-item p {
        font-size: 12.5px;
    }

}


/* =========================================================
   CAREER HERO — RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .career-main-circle {
        width: 370px;
        height: 370px;
    }

    .career-circle-icon {
        width: 75px;
        height: 75px;

        font-size: 26px;
    }

    .career-circle-inner strong {
        font-size: 28px;
    }

    .career-floating-card {
        min-width: 175px;

        padding: 11px 13px;
    }

    .career-card-team {
        left: -5px;
    }

    .career-card-education {
        right: -10px;
    }

    .career-card-technology {
        left: 0;
    }

}


@media (max-width: 991px) {

    .career-hero-visual {
        margin-top: 25px;
    }

    .career-main-circle {
        width: 390px;
        height: 390px;
    }

    .career-floating-card {
        min-width: 180px;
    }

}


@media (max-width: 767px) {

    .career-hero-visual {
        margin-top: 20px;
    }

    .career-main-circle {
        width: 350px;
        height: 350px;
    }

    .career-main-circle::before {
        inset: 17px;
    }

    .career-circle-icon {
        width: 68px;
        height: 68px;

        margin-bottom: 16px;

        border-radius: 20px;

        font-size: 23px;
    }

    .career-circle-inner > span {
        font-size: 10px;
    }

    .career-circle-inner strong {
        font-size: 25px;
    }

    .career-circle-inner small {
        font-size: 9px;
    }

    .career-floating-card {
        min-width: 160px;

        padding: 9px 11px;

        gap: 8px;
    }

    .career-floating-icon {
        width: 33px;
        height: 33px;

        flex-basis: 33px;

        border-radius: 9px;

        font-size: 12px;
    }

    .career-floating-card strong {
        font-size: 10px;
    }

    .career-floating-card span {
        font-size: 8px;
    }

    .career-card-team {
        left: -5px;
        top: 45px;
    }

    .career-card-education {
        right: -5px;
        top: 165px;
    }

    .career-card-technology {
        left: 0;
        bottom: 35px;
    }

}


@media (max-width: 575px) {

    .career-hero-visual {
        margin-top: 15px;
    }

    .career-main-circle {
        width: 300px;
        height: 300px;
    }

    .career-main-circle::before {
        inset: 14px;
    }

    .career-circle-icon {
        width: 58px;
        height: 58px;

        margin-bottom: 13px;

        border-radius: 17px;

        font-size: 20px;
    }

    .career-circle-inner > span {
        font-size: 9px;

        letter-spacing: 1.5px;
    }

    .career-circle-inner strong {
        font-size: 22px;
    }

    .career-circle-inner small {
        font-size: 8px;
    }

    .career-floating-card {
        min-width: 140px;

        padding: 8px 9px;

        border-radius: 11px;
    }

    .career-floating-icon {
        width: 29px;
        height: 29px;

        flex-basis: 29px;

        border-radius: 8px;

        font-size: 10px;
    }

    .career-floating-card strong {
        font-size: 9px;
    }

    .career-floating-card span {
        font-size: 7px;
    }

    .career-card-team {
        left: -3px;
        top: 30px;
    }

    .career-card-education {
        right: -3px;
        top: 135px;
    }

    .career-card-technology {
        left: 0;
        bottom: 20px;
    }

}


@media (max-width: 380px) {

    .career-main-circle {
        width: 270px;
        height: 270px;
    }

    .career-circle-icon {
        width: 52px;
        height: 52px;

        font-size: 18px;
    }

    .career-circle-inner strong {
        font-size: 20px;
    }

    .career-floating-card {
        min-width: 130px;
    }

}

/* =========================================================
   CAREER WHY — RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .career-why-section .values-grid {
        gap: 16px;
    }

    .career-why-section .value-card {
        padding: 24px;
    }

}


@media (max-width: 991px) {

    .career-why-section .values-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 18px;
    }

}


@media (max-width: 767px) {

    .career-why-section .values-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .career-why-section .value-card {
        min-height: auto;
    }

}


/* =========================================================
   CAREER OPENINGS — RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .career-openings-section {
        padding: 100px 0 110px;
    }

    .career-openings-grid {
        gap: 17px;
    }

    .career-role-card {
        padding: 24px 22px;
    }

    .career-role-content h3 {
        font-size: 19px;
    }

    .career-role-detail {
        grid-template-columns: 80px 1fr;

        gap: 9px;
    }

}


@media (max-width: 991px) {

    .career-openings-section {
        padding: 90px 0 100px;
    }

    .career-openings-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 18px;
    }

    .career-role-card {
        padding: 24px;
    }

}


@media (max-width: 767px) {

    .career-openings-section {
        padding: 75px 0 85px;
    }

    .career-openings-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .career-role-card {
        padding: 23px;

        border-radius: 17px;
    }

    .career-role-icon {
        width: 44px;
        height: 44px;

        border-radius: 12px;

        font-size: 17px;
    }

}


@media (max-width: 575px) {

    .career-openings-section {
        padding: 65px 0 75px;
    }

    .career-role-card {
        padding: 20px;

        border-radius: 16px;
    }

    .career-role-top {
        margin-bottom: 21px;
    }

    .career-role-content h3 {
        font-size: 19px;
    }

    .career-role-description {
        font-size: 15px;

        line-height: 1.7;
    }

    .career-role-detail {
        grid-template-columns: 78px 1fr;

        gap: 8px;

        margin-bottom: 12px;
    }

    .career-role-detail strong {
        font-size: 11px;
    }

    .career-role-detail span {
        font-size: 12px;
    }

    .career-role-button {
        margin-top: 23px;

        padding: 11px 13px 11px 15px;

        font-size: 12px;
    }

}


@media (max-width: 380px) {

    .career-role-card {
        padding: 18px;
    }

    .career-role-content h3 {
        font-size: 18px;
    }

    .career-role-detail {
        grid-template-columns: 72px 1fr;
    }

    .career-role-detail span {
        font-size: 12px;
    }

}


@media (max-width: 575px) {

    .career-looking-section {
        padding: 65px 0 75px;
    }

    .career-looking-content {
        padding: 24px 20px;
    }

    .career-looking-content p {
        font-size: 14px;
    }

}




@media (max-width: 991px) {

    .career-apply-section {
        padding: 90px 0;
    }

    .career-apply-container {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .career-apply-content {
        max-width: 700px;
    }

    .career-apply-action {
        max-width: 650px;
    }

}


@media (max-width: 767px) {

    .career-apply-section {
        padding: 75px 0;
    }

    .career-apply-container {
        width: calc(100% - 32px);

        gap: 35px;
    }

    .career-apply-content h2 {
        font-size: 48px;

        letter-spacing: -1.5px;
    }

    .career-apply-content p {
        font-size: 15px;

        line-height: 1.7;
    }

    .career-apply-action {
        min-height: 145px;

        padding: 20px;

        border-radius: 18px;
    }

}


@media (max-width: 575px) {

    .career-apply-section {
        padding: 65px 0;
    }

    .career-apply-container {
        width: calc(100% - 24px);
    }

    .career-apply-content h2 {
        font-size: 40px;
    }

    .career-apply-content p {
        font-size: 14px;
    }

    .career-apply-action {
        padding: 17px;

        gap: 12px;
    }

    .career-apply-mail-icon {
        width: 50px;
        height: 50px;

        flex-basis: 50px;

        border-radius: 14px;

        font-size: 17px;
    }

    .career-apply-action-content strong {
        font-size: 15px;
    }

    .career-apply-arrow {
        width: 42px;
        height: 42px;

        flex-basis: 42px;

        font-size: 12px;
    }

}


/* =========================================================
   CONTACT — TABLET
========================================================= */

@media (max-width: 1199px) {

    .contact-container {
        width: min(1180px, calc(100% - 60px));

        gap: 60px;
    }

    .contact-form-wrapper {
        padding: 38px;
    }

    .contact-details h2 {
        font-size: 56px;
    }

}


/* =========================================================
   CONTACT — TABLET
========================================================= */

@media (max-width: 991px) {

    .contact-section {
        padding: 95px 0 105px;
    }

    .contact-container {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .contact-details {
        max-width: 750px;
    }

    .contact-details h2 {
        font-size: 58px;
    }

}


/* =========================================================
   CONTACT — MOBILE
========================================================= */

@media (max-width: 767px) {

    .contact-section {
        padding: 75px 0 85px;
    }

    .contact-container {
        width: calc(100% - 32px);

        gap: 40px;
    }

    .contact-details h2 {
        margin-bottom: 35px;

        font-size: 46px;

        letter-spacing: -1px;
    }

    .contact-form-wrapper {
        padding: 30px 24px;

        border-radius: 20px;
    }

    .contact-form {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .contact-message-group,
    .contact-submit-button {
        grid-column: auto;
    }

}


/* =========================================================
   CONTACT — SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .contact-section {
        padding: 65px 0 75px;
    }

    .contact-container {
        width: calc(100% - 24px);
    }

    .contact-section-badge {
        padding: 9px 15px;

        font-size: 12px;
    }

    .contact-details h2 {
        font-size: 38px;
    }

    .contact-detail-list {
        gap: 23px;
    }

    .contact-detail-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;

        border-radius: 13px;

        font-size: 16px;
    }

    .contact-detail-content strong {
        font-size: 14px;
    }

    .contact-detail-content p {
        font-size: 13px;
    }

    .contact-form-wrapper {
        padding: 24px 18px;

        border-radius: 18px;
    }

    .contact-form-group input,
    .contact-form-group select,
    .contact-form-group textarea {
        padding: 14px;

        font-size: 14px;
    }

    .contact-form-group input,
    .contact-form-group select {
        min-height: 54px;
    }

    .contact-form-group textarea {
        min-height: 140px;
    }

    .contact-submit-button {
        width: 100%;

        min-height: 55px;
    }

}




/* ============== ABOUT TEAMS ===================== */
/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .team-section {
        padding: 85px 0 65px;
    }

    .team-section-header {
        margin-bottom: 45px;
    }

    .team-slider-wrapper {
        width: calc(100% - 100px);
    }

    .team-track {
        gap: 22px;
    }

    .team-track .team-card {
        flex: 0 0 calc((100% - 22px) / 2);
    }

    .team-image-wrapper {
        height: 320px;
    }

    .team-prev {
        left: -25px;
    }

    .team-next {
        right: -25px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .team-section {
        padding: 70px 0 50px;
    }

    .team-section-header {
        padding: 0 22px;

        margin-bottom: 35px;
    }

    .team-section-label {
        font-size: 9px;

        letter-spacing: 2.5px;
    }

    .team-section-label::before,
    .team-section-label::after {
        width: 18px;
    }

    .team-section-header h2 {
        font-size: 34px;

        letter-spacing: -1px;
    }

    .team-section-header p {
        margin-top: 15px;

        font-size: 13px;

        line-height: 1.7;
    }

    .team-slider-wrapper {
        width: calc(100% - 45px);
    }

    .team-track {
        gap: 16px;
    }

    .team-track .team-card {
        flex: 0 0 100%;
    }

    .team-image-wrapper {
        height: 340px;
    }

    .team-content {
        padding: 22px 20px;
    }

    .team-content h3 {
        font-size: 23px;
    }

    .team-content p {
        min-height: auto;
    }

    .team-slider-btn {
        width: 44px;

        height: 44px;

        font-size: 13px;
    }

    .team-prev {
        left: -22px;
    }

    .team-next {
        right: -22px;
    }

    .team-bottom {
        width: calc(100% - 35px);

        gap: 10px;

        margin-top: 28px;
    }

    .team-bottom-line {
        max-width: 40px;
    }

    .team-bottom p {
        font-size: 11px;

        letter-spacing: .2px;

        white-space: normal;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .team-section {
        padding: 60px 0 45px;
    }

    .team-section-header {
        margin-bottom: 30px;
    }

    .team-section-header h2 {
        font-size: 30px;
    }

    .team-section-header p {
        font-size: 12px;
    }

    .team-slider-wrapper {
        width: calc(100% - 35px);
    }

    .team-image-wrapper {
        height: 300px;
    }

    .team-number {
        width: 42px;

        height: 42px;

        left: 15px;

        top: 15px;
    }

    .team-prev {
        left: -18px;
    }

    .team-next {
        right: -18px;
    }

    .team-bottom {
        width: calc(100% - 25px);

        gap: 7px;
    }

    .team-bottom-line {
        max-width: 25px;
    }

    .team-bottom p {
        font-size: 10px;
    }
}



/* =========================================================
    GALLERY PAGE
========================================================= */

/* =========================================================
    MOBILE
========================================================= */

@media(max-width:767px) {

    .gallery-hero {
        min-height: 470px;

        padding:
            125px 0 70px;
    }


    .gallery-hero h1 {
        font-size: 43px;

        letter-spacing: -1.2px;
    }


    .gallery-hero p {
        font-size: 14px;
    }


    .gallery-section {
        padding:
            65px 0 75px;
    }


    .gallery-container {
        width:
            calc(100% - 24px);
    }


    .gallery-filters {
        justify-content: flex-start;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding:
            5px 3px 12px;

        scrollbar-width: none;
    }


    .gallery-filters::-webkit-scrollbar {
        display: none;
    }


    .gallery-filter {
        flex: 0 0 auto;

        padding:
            9px 16px;

        font-size: 12px;
    }


    .featured-gallery {
        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            300px
            200px
            200px
            200px;

        gap: 14px;
    }


    .gallery-card.featured-main {
        grid-row: auto;
    }


    .gallery-overlay {
        opacity: 1;

        padding: 17px;
    }


    .gallery-open {
        opacity: 1;

        transform: none;
    }


    .masonry-gallery {
        columns: 2 150px;

        column-gap: 10px;
    }


    .masonry-item {
        margin-bottom: 10px;

        border-radius: 13px;
    }


    .masonry-overlay {
        opacity: 1;

        padding: 12px;
    }


    .masonry-overlay-content h4 {
        font-size: 12px;
    }


    .lightbox-prev {
        left: 10px;
    }


    .lightbox-next {
        right: 10px;
    }


    .lightbox-close {
        top: 15px;

        right: 15px;
    }

}


@media(max-width:420px) {

    .masonry-gallery {
        columns: 1;
    }


    .gallery-hero h1 {
        font-size: 38px;
    }

}

/* =========================================================
   EARLY ACCESS MODAL
========================================================= */


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 576px) {

    .early-access-modal {

        margin: 15px;

        border-radius: 20px;

    }


    .early-access-header {

        padding: 32px 22px 22px;

    }


    .early-access-header h3 {

        font-size: 24px;

    }


    .early-form-body {

        padding: 23px 22px 25px;

    }

}



/* ================= Privacy / Terms ==================== */

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {

    .iqraa-problem.terms-section {
        padding: 90px 0 90px;
    }

    .terms-section .problem-container {
        width: min(
            900px,
            calc(100% - 40px)
        );
    }

    .terms-card {
        padding: 28px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .iqraa-problem.terms-section {
        padding: 70px 0;
    }

    .terms-section .problem-container {
        width: calc(100% - 30px);
    }

    .terms-intro {
        margin-bottom: 32px;
    }

    .terms-intro .problem-title {
        font-size: 40px;
    }

    .terms-intro .problem-description {
        font-size: 14px;
    }

    .terms-card {
        padding: 23px 20px;

        border-radius: 18px;
    }

    .terms-card-header {
        margin-bottom: 17px;
    }

    .terms-number {
        font-size: 34px;
    }

    .terms-icon {
        width: 45px;
        height: 45px;

        border-radius: 13px;
    }

    .terms-card-content h3 {
        font-size: 19px;
    }

    .terms-card-content p,
    .terms-list li {
        font-size: 14px;
        line-height: 1.75;
    }

    .terms-contact-list {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .terms-intro .problem-title {
        font-size: 34px;
    }

    .terms-card {
        padding: 20px 17px;
    }

    .terms-number {
        font-size: 30px;
    }

    .terms-card-content h3 {
        font-size: 18px;
    }

}



/* Mobile */

@media (max-width: 767px) {

    .terms-final-message {
        padding: 20px;

        margin-top: 25px;
    }

    .terms-final-message p {
        font-size: 13px;
    }

}


/* =========================================================
   RESPONSIVE - Verify Privilege card
========================================================= */
/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .verify-content h2 {
        font-size: 48px;
    }

    .verify-box {
        max-width: 100%;
        padding: 38px;
    }

    .verify-btn {
        max-width: 100%;
    }

}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 991px) {

    .verify-section {
        padding: 80px 0;
    }

    .verify-content {
        text-align: center;
    }

    .verify-content p {
        margin-right: auto;
        margin-left: auto;
    }

    .verify-section .col-lg-6:last-child {
        align-items: center;
    }

    .verify-box {
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
    }

    .verify-btn {
        width: 100%;
        max-width: 750px;
        margin-right: auto;
        margin-left: auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .verify-section {
        padding: 65px 0;
    }

    .verify-tag {
        padding: 7px 18px;
        margin-bottom: 20px;
        font-size: 13px;
    }

    .verify-content h2 {
        font-size: 36px;
        line-height: 1.12;
    }

    .verify-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    .verify-box {
        padding: 25px 18px;
        border-radius: 24px;
    }

    .verify-top {
        margin-bottom: 32px;
    }

    .verify-top i {
        font-size: 34px;
    }

    .verify-top img {
        height: 36px;
    }

    .verify-user {
        margin-bottom: 25px;
        font-size: 17px;
    }

    .card-number {
        gap: 8px;
        height: 68px;
        padding: 0 10px;
        border-radius: 18px;
    }

    .fixed-mask {
        font-size: 19px;
        letter-spacing: 3px;
    }

    #cardLastDigits {
        width: 105px;
        padding: 9px 5px;
        font-size: 19px;
        letter-spacing: 3px;
        border-radius: 10px;
    }

    .verify-btn {
        height: 64px;
        margin-top: 25px;
        font-size: 17px;
    }
}