:root {
    --header-height: 100px;
    --site-max-width: 1180px;
    --site-desktop-gutter: 80px;
    --site-mobile-gutter: 24px;
}

.navbar,
.hero-inner,
.page-container {
    width: calc(100% - var(--site-desktop-gutter));
    max-width: var(--site-max-width);
}

@media (max-width: 768px) {

    .navbar,
    .hero-inner,
    .page-container {
        width: calc(100% - var(--site-mobile-gutter)) !important;
        max-width: 100%;
    }
}

.navbar {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);

    width: calc(100% - 80px);
    max-width: 1180px;

    height: 64px;
    padding: 6px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    z-index: 9999;
    opacity: 0.9;

    background-image: url("../assets/BG img_hero.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9999px;
}


.navbar.scrolled {
    height: 58px;

    top: 10px;

    padding: 0 22px;

    background: rgba(20, 20, 20, 0.82);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.section,
.stats-section,
.verify-steps-section,
.pillars-section,
.verification-section,
.testimonials-section,
.partner-section {
    scroll-margin-top: var(--header-height);
}

.verify-steps-section,
.pillars-section,
.verification-section,
.testimonials-section,
.partner-section {
    padding-top: 130px;
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: #050509;
    color: white;
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-x: hidden;
}

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
    display: none;
}

.section {
    height: 100vh;
    width: 100%;
}

/* HERO SECTION */
.section1 {
    position: relative;
    background-color: #000000;
    /* Load low-res placeholder first */
    background-image: url("../assets/hero-ex-bg 1.svg");
    background-size: cover;
    background-position: 45% 50%;
    background-repeat: no-repeat;
    min-height: 100vh;
    overflow: hidden;
    padding-top: var(--header-height);
    transition: background-image 0.5s ease-in-out;
}


/* Forces the Poppins font on the navbar and all its links/buttons */
.navbar,
.navbar * {
    font-family: 'Poppins', sans-serif;
}


.logo {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0;
}






.logo img {
    width: 150px;
    height: 40px;
    object-fit: contain;
    display: block;
    padding-left: 7px;
}

.navbar.scrolled .logo img {
    width: 145px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 14px;

    height: 42px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 30px;

    padding: 8px 16px;
}



.nav-links a {
    color: white;
    text-decoration: none;

    font-size: 12px;
    font-weight: 500;

    white-space: nowrap;

    opacity: 0.92;

    transition: 0.3s ease;
}

.nav-links a:hover {
    opacity: 1;
    color: #D4AD4F;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-switch {
    background: #FFFFFF;
    border-radius: 30px;
}

.lang-toggle {
    height: 46px;
    padding: 0;

    display: flex;
    align-items: center;
    gap: 0;

    direction: ltr;
    /* always LTR — prevents RTL from flipping flag spacing */

    background: #0d0d12;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;

    overflow: hidden;
}


.lang-btn {
    height: 100%;
    padding: 0 12px;

    border: none;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
    transition: all 0.3s ease;
}

/* AR button */
.lang-btn:first-child {
    padding-left: 5px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
}

/* EN active button */
.lang-btn.active {
    background: #C9A84C;
    color: #ffffff;
}

/* EN button padding when active or last child */
.lang-btn:last-child {
    padding-left: 15px;
    padding-right: 5px;
}

.contact-btn {
    height: 46px;
    padding: 10 24px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ===============================
   LOGIN / REGISTER BUTTON
================================ */

.login-btn {
    height: 46px;
    min-width: 150px;

    /* top right bottom left */
    padding: 7px 7px 7px 18px;

    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.22);

    color: #ffffff;

    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    transition: all 0.3s ease;
}

/* Keep language toggle and login button same height */
.lang-toggle,
.login-btn {
    height: 46px;
}

/* Icon circle */
.login-btn .btn-icon {
    width: 30px;
    height: 30px;

    border-radius: 50%;

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

    background: #ffffff;
    flex-shrink: 0;

    transition: all 0.3s ease;
}

/* Icon image */
.login-btn .btn-icon img {
    width: 24px;
    height: 24px;

    object-fit: contain;
    display: block;

    transition: all 0.3s ease;
}

/* Hover effect */
.login-btn:hover {
    transform: translateY(-4px) scale(1.03);

    box-shadow:
        0 12px 30px rgba(201, 168, 76, 0.35),
        0 0 18px rgba(201, 168, 76, 0.25);

    background: #C9A84C;
    border-color: #C9A84C;
    color: #111111;
}

/* Keep icon circle white on hover */
.login-btn:hover .btn-icon {
    background: #ffffff;
}



/* icon circle becomes yellow */
.login-btn:hover .btn-icon {
    background: #ffffff;
}

/* arrow becomes white */
.login-btn:hover .btn-icon img {

    color: #A96F13;
}

@media (max-width: 1100px) {
    .nav-links {
        gap: 14px;
        padding: 7px 14px;
    }

    .nav-links a {
        font-size: 11px;
    }

    .login-btn {
        min-width: 100px;
        padding: 0 16px;
        font-size: 11px;
    }
}

/* @media (max-width: 1100px) {
    .navbar {
        width: calc(100% - 40px);
        padding: 0 18px;
        gap: 18px;
    }

    .logo img {
        width: 170px;
    }

    .nav-links {
        gap: 22px;
    }

    .nav-links a {
        font-size: 13px;
    }
} */

/* Gold background for the active side */
.lang-btn.active {
    background: #C9A84C;
}

/* Styling for the circular flags */
.flag-icon {
    width: 34px;
    height: 34px;

    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.lang-btn.active .flag-icon {
    width: 34px;
    height: 34px;
}

.contact-btn:hover {
    background: #C9A84C;
    border-color: #C9A84C;
    color: #111111;
}


.floating-scan-btn {
    text-decoration: none;
}

.hero-content {
    position: absolute;
    top: 20%;
    left: 0;
    right: auto;
    transform: none;

    z-index: 5;
    max-width: 520px;
    text-align: left;
}

.arabic-title {
    color: #d4ad4f;
    font-size: 48px;
    margin-bottom: 15px;
    font-weight: bold;
}

.hero-content h1 {
    font-family: 'Noto Naskh Arabic', serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 52px;
    color: #FFFFFF;
    margin-bottom: 22px;
}

.hero-content p {
    font-size: 22px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 2px;
    color: #eeeeee;
    margin-bottom: 50px;
    text-align: left;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    font-family: 'Poppins', sans-serif;
}

/* Desktop-only: right-align hero text only (no position change) */
@media (min-width: 769px) {
    .hero-content {
        text-align: left;
    }

    .hero-content p {
        text-align: left;
    }

    .hero-buttons {
        justify-content: flex-start;
    }
}

.primary-btn,
.secondary-btn {
    height: 48px;

    padding: 0 26px;

    border-radius: 999px;

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

    text-decoration: none;

    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;

    transition: all 0.3s ease;
}

.primary-btn {
    background: #C9A84C;

    color: #111111;

    border: 1px solid rgba(0, 0, 0, 0.08);

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.secondary-btn {
    background: rgba(0, 0, 0, 0.25);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Floating Scan Button */
.floating-scan-btn {
    position: fixed;
    bottom: 0;
    right: 0;
    background: #C9A84C;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px;
    border-radius: 16px 0 0 0;
    z-index: 999;
    box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif !important;
}

.floating-scan-btn:hover {
    background: #d4ad4f;
    padding-right: 15px;
}

.floating-scan-btn .icon-circle {
    background: #FFFFFF;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}

.floating-scan-btn .icon-circle img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    transform: rotate(90deg);
}

.floating-scan-btn span {
    writing-mode: vertical-rl;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.5px;
    font-family: 'Poppins', sans-serif !important;
}

.section2 {
    background-color: #E8F3D6;
}

.section3 {
    background-color: #DDEDEA;
}

.section4 {
    background-color: #EADCF8;
}

.verify-steps-section {
    height: 1462px;
    padding: 60px 70px;
    background-image: url("../assets/verification-bg.png");
    background-size: cover;
    background-position: center;
    color: #1A1A2E;
    position: relative;
}


.section-heading {
    max-width: 1140px;
    margin: 0 auto 40px;
    text-align: center;
}

.section-heading h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;

    white-space: nowrap;

    margin-bottom: 12px;

    background: linear-gradient(90deg, #C9A84C 0%, #1A1A2E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-heading p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;

    color: #1A1A2E;

    text-align: center;

    margin: 0 auto;


}

.steps-container-single {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 70px;
    width: 100%;
    padding: 0 20px;
}

.combined-phones-img {
    width: 100%;
    max-width: 900px;
    /* Controls max size of the phones */
    height: auto;
    object-fit: contain;
    margin-bottom: 30px;
    /* Space between image and text */
}

/* Uses CSS Grid to create 3 equal columns for the text */
.steps-text-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    max-width: 1100px;
    text-align: center;
}

.step-text p {
    font-size: 18px;
    color: #1A1A2E;
    line-height: 1.5;
}




.problem-solution-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto;
}

.problem-card,
.solution-card {
    position: relative;
    min-height: 360px;
    padding: 36px;
    border-radius: 24px;
}

.problem-card {
    background-image: url("../assets/problem.png");
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
}

.solution-card {
    background-image: url("../assets/verificationsimple.png");
    background-size: cover;
    background-position: center;
    color: #1A1A2E;
}


.problem-card h2,
.solution-card h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 42px;
    letter-spacing: 0%;
    margin-bottom: 18px;

    background: linear-gradient(90deg, #C9A84C 0%, #8b8b5b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.problem-card p,
.solution-card p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    margin-bottom: 25px;
}

.problem-card p {
    color: #FFF8E7;
}

.solution-card p {
    color: #4A4A4A;
}

.problem-card ul,
.solution-card ul {
    list-style: none;
}

.problem-card li {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #FFF8E7;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}


.solution-card li {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #4A4A4A;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.problem-card li::before {
    content: none;
    /* Removes the old red cross */
}

.problem-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}


.solution-card li::before {
    content: none;
}

.solution-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}




.card-icon {
    position: absolute;

    top: 40px;
    right: 40px;

    width: 40px;
    height: 40px;

    border-radius: 50%;

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

    font-size: 16px;
    font-weight: 600;

    z-index: 5;
}

.card-icon img {
    width: 30px;
    height: 30px;
}

.card-number {
    font-size: 42px;
    font-weight: 600;
    color: #C89B3C;
    display: block;
    margin-bottom: 20px;
}

.quote-card h4 {
    margin-top: 20px;
    color: #B9892D;
    font-size: 18px;
    font-weight: 500;
}

.testimonial-card.quote-card h4 {
    width: auto;
    text-align: left;
    margin: 0 auto;
}

.testimonials-section {
    padding: 110px 0 80px;
}

.testimonial-header,
.testimonial-grid {
    max-width: 1124px;
    margin-left: auto;
    margin-right: auto;
}

.testimonial-header {
    display: block;
    margin-bottom: 70px;
}

.testimonial-header h2,
.testimonial-header p {
    text-align: left;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 360px);
    justify-content: center;
    gap: 22px;
    margin-bottom: 60px;
}

.video-preview.mission-preview {
    max-width: 1124px !important;
    width: 100% !important;
    height: 550px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 28px !important;
}

.video-preview.mission-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.video-preview.mission-preview .mission-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 70px !important;
    transform: translateY(-50%) !important;
    max-width: 450px !important;
    color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.video-preview.mission-preview .coming-icon {
    width: 60px !important;
    height: 60px !important;
    border: 1px solid #D4A64A !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    color: #D4A64A !important;
}

.video-preview.mission-preview .coming-icon img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
}

.video-preview.mission-preview .mission-overlay h3 {
    font-size: 38px !important;
    line-height: 1.2 !important;
    margin-bottom: 18px !important;
    font-weight: 500 !important;
    font-family: 'Poppins', sans-serif !important;
    text-align: left !important;
    background: linear-gradient(90deg, #C9A84C 0%, #FFFFFF 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.video-preview.mission-preview .mission-overlay p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: 'Poppins', sans-serif !important;
    text-align: left !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .video-preview.mission-preview {
        height: 380px !important;
        border-radius: 20px !important;
    }

    .video-preview.mission-preview .mission-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        max-width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
        text-align: center !important;
        background: rgba(0, 0, 0, 0.5) !important;
    }

    .video-preview.mission-preview .coming-icon {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 12px !important;
    }

    .video-preview.mission-preview .coming-icon img {
        width: 26px !important;
        height: 26px !important;
    }

    .video-preview.mission-preview .mission-overlay h3 {
        font-size: 26px !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }

    .video-preview.mission-preview .mission-overlay p {
        font-size: 14px !important;
        text-align: center !important;
    }
}


.danger {
    background: #ff4b4b;
    color: white;
}

.success {
    background: #2ECC71;
    color: white;
}

@media (max-width: 768px) {
    .hero-inner {
        width: calc(100% - 24px);
        max-width: 100%;
    }

    .hero-content {
        position: absolute;
        top: 118px;
        left: 50%;
        transform: translateX(-50%);

        width: 100%;
        max-width: 320px;

        text-align: center;
    }
}

@media (max-width: 900px) {
    .verify-steps-section {
        padding: 70px 22px;
    }

    .steps-container {

        align-items: center;
        gap: 35px;
    }

    .problem-solution-container {
        grid-template-columns: 1fr;
    }
}

.pillars-section {
    width: 100%;
    min-height: 100vh;
    background: #ffffff;
    color: #1A1A2E;
    padding: 80px 70px;
    text-align: center;
}

.pillars-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #4A4A4A;
    margin-bottom: 18px;
}

.pillars-section h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 85px;
    text-align: center;

    background: linear-gradient(90deg, #C9A84C 0%, #1A1A2E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pillars-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1350px;
    margin: 0 auto;
    align-items: start;
}



.pillar-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    border-radius: 20px;
}

.pillar-card h3 {
    margin-top: 24px;
    margin-bottom: 16px;
    font-size: 18px;
}

.pillar-card p {
    max-width: 100%;
    /* control text width */
    margin: 0 auto;
    line-height: 1.6;
}

/* .pillar-card {
    text-align: center;
    padding: 40px 20px;
    border-radius: 20px;

} */

.pillar-card img {
    width: 150px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 35px;
}

/* .pillar-card h3 {
    font-size: 24px;
    color: #1A1A2E;
    margin-bottom: 16px;
    font-weight: 700;
}

.pillar-card p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: #1A1A2E;
} */
/* Removed specific first-child overrides so all cards match */

/* @media (max-width: 900px) {
    .pillars-section {
        padding: 60px 24px;
    }

    .pillars-section h2 {
        font-size: 30px;
    }

    .pillars-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pillar-card img {
        margin-bottom: 15px;
    }
} */

@media (max-width: 900px) {
    .pillars-section {
        padding: 60px 24px;
    }

    .pillars-section h2 {
        font-size: 30px;
    }

    .pillars-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pillar-card {
        padding: 20px 15px;
    }

    .pillar-card img {
        width: 100px;
        height: 90px;
        margin-bottom: 8px;
    }

    .pillar-card h3 {
        margin-top: 0;
        margin-bottom: 8px;
        font-size: 16px;
    }

    .pillar-card p {
        max-width: 260px;
        font-size: 13px;
        line-height: 1.45;
        font-family: 'Poppins', sans-serif;
    }
}



.verification-section {
    width: 100%;
    min-height: 100vh;

    padding: 110px 70px 90px;

    background-image: url("../assets/instantly.png");
    background-size: cover;
    background-position: center;

    text-align: center;
}

.verification-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #FFF8E7;
    margin-bottom: 18px;
}

.verification-section h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 400;

    line-height: 1.25;
    margin-bottom: 65px;

    background: linear-gradient(90deg, #C9A84C 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}




.verification-card {
    max-width: 1150px;
    margin: 0 auto;

    background-image: linear-gradient(rgba(255, 248, 231, 0.5), rgba(255, 248, 231, 0.5)), url("../assets/Rectangle 15.png");

    background-size: cover;
    background-position: center;
    border-radius: 36px;

    overflow: hidden;
}

.verification-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #FFFFFF;
}

.verification-info {
    padding: 45px 60px;
    text-align: left;

    border-right: 1px solid #FFFFFF;
}

.verification-info:last-child {
    border-right: none;
}

.verification-icon {
    width: 72px;
    height: 72px;


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

    color: #C9A84C;
    font-size: 24px;

    margin-bottom: 28px;
}



.verification-info h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.4;

    color: #1A1A2E;

    margin-bottom: 20px;
}

.verification-info p {
    font-family: 'Poppins', sans-serif;

    font-weight: 400;
    font-size: 16px;

    line-height: 1.7;

    color: #1A1A2E;

    max-width: 430px;
}

.verification-bottom {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 35px 60px;
}


.verify-input-box {
    flex: 1;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
}

.verify-input-box input {
    flex: 1;
    height: 80px;
    border: none;
    outline: none;
    padding: 0 40px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #7A7A7A;
}

.verify-input-box input::placeholder {
    color: #7A7A7A;
}


.qr-btn {
    width: 100px;
    height: 80px;
    border: none;
    background: transparent;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    color: #C9A84C;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* Add this new rule to size the QR image */
.qr-btn img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}


.verify-btn {
    /* width: 229px; */
    height: 80px;
    border: none;
    border-radius: 24px;
    background: #C9A84C;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 30px;
    cursor: pointer;
}

.verify-btn:hover {
    transform: translateY(-4px) scale(1.03);

    box-shadow:
        0 12px 30px rgba(201, 168, 76, 0.35),
        0 0 18px rgba(201, 168, 76, 0.25);

    background: #C9A84C;
    border-color: #C9A84C;
    color: #ffffff;
}

/* .verify-input-box {
    width: 680px;
} */

/* .verify-btn {
    width: 210px;
} */

@media (max-width: 768px) {
    .verification-info {
        padding: 28px 18px !important;
    }

    .verification-info p {
        font-size: 11.5px !important;
        line-height: 1.55 !important;
        max-width: 260px !important;
    }
}

@media (max-width: 768px) {
    .verification-info p {
        max-width: 100% !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
}

/* ===============================
   MOBILE VERIFY BUTTON FIX
================================ */
@media (max-width: 768px) {

    /* .verification-bottom {
        flex-direction: column !important;
        gap: 14px !important;
        padding: 16px 22px 22px !important;
    } */

    .verify-input-box {
        width: 100% !important;
        height: 70px !important;
        border-radius: 20px !important;
    }

    .verify-input-box input {
        height: 70px !important;
        font-size: 11px !important;
        padding: 0 12px 0 16px !important;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .qr-btn {
        width: 58px !important;
        height: 70px !important;
        flex-shrink: 0;
    }

    .verify-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        width: 100% !important;
        height: 54px !important;

        border-radius: 18px !important;
        background: #C9A84C !important;
        color: #ffffff !important;

        font-size: 15px !important;
        font-weight: 600;
    }
}

@media (max-width: 900px) {

    .verification-section {
        padding: 60px 24px;
    }

    .verification-section h2 {
        font-size: 36px;
    }

    .verification-top {
        grid-template-columns: 1fr;
    }

    .verification-info {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .verification-bottom {
        flex-direction: column;
    }

    .verify-btn {
        width: 100%;
    }

}

.testimonials-section {
    width: 100%;
    min-height: 100vh;

    background-image: url("../assets/testimonials.png");
    background-size: cover;
    background-position: center;

    padding: 80px 40px;
}


.testimonial-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 70px;
}

.testimonial-header h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.35;
    letter-spacing: 0%;
    margin-bottom: 12px;

    background: linear-gradient(90deg, #C9A84C 0%, #1A1A2E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.testimonial-header h2 span {
    background: none;
    -webkit-text-fill-color: #C9A84C;
    color: #C9A84C;
}

.testimonial-header p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0%;
    color: #4A4A4A;
    max-width: 500px;
}




.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 360px);
    justify-content: center;
    gap: 22px;
    margin-bottom: 60px;
}

.testimonial-card {
    position: relative;

    background: #FFFFFF;

    border-radius: 18px;
    text-align: center;

    padding: 28px;

    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


}

.testimonial-card p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.8;
    color: #1A1A2E;
    text-align: left;
    margin: 0 auto;
    margin-bottom: 35px;
}

.testimonial-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-user img {
    width: 46px;
    height: 46px;

    border-radius: 50%;
    object-fit: cover;
}

.testimonial-user h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #1A1A2E;
    margin-bottom: 4px;


}

.testimonial-user span {
    font-family: 'Poppins', sans-serif;
    color: #C9A84C;
    font-size: 14px;
    text-align: left;
}


/* Fix testimonial icons: place icon above text */
.testimonial-card .card-icon {
    position: static !important;

    width: 42px;
    height: 42px;

    margin-bottom: 18px;

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

    border: 1px solid #C9A84C;
    border-radius: 50%;

    background: transparent;
}

.testimonial-card .card-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.testimonial-card p {
    margin-bottom: 0;
}

.quote-icon {
    position: absolute;
    bottom: 18px;
    right: 20px;

    font-size: 70px;
    color: rgba(201, 168, 76, 0.25);

    line-height: 1;
}

.video-preview {
    position: relative;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    border-radius: 22px;

    overflow: hidden;
}

.video-preview img {
    width: 100%;
    display: block;
}

.play-btn {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 90px;
    height: 90px;

    border: none;

    border-radius: 50%;

    background: #FFFFFF;

    color: #1A1A2E;

    font-size: 34px;

    cursor: pointer;
}

@media (max-width: 900px) {

    .testimonials-section {
        padding: 60px 24px;
    }

    .testimonial-header {
        flex-direction: column;
        gap: 25px;
    }

    /* .testimonial-grid {
        display: flex;
        gap: 22px;

        overflow-x: auto;
        scroll-behavior: smooth;

        padding-bottom: 10px;
    } */

    /* Hide scrollbar */
    .testimonial-grid::-webkit-scrollbar {
        display: none;
    }

    /* .testimonial-card {
        min-width: 380px;
        flex-shrink: 0;
    } */
}

.testimonial-header h2 {
    font-size: 34px;
}

.stats-section {
    width: 100%;
    min-height: 330px;

    padding: 65px 70px;

    background-image:
        linear-gradient(90deg,
            rgba(5, 5, 12, 0.95),
            rgba(10, 10, 18, 0.9),
            rgba(122, 95, 35, 0.65)),
        url("../assets/snapshot.png");

    background-size: cover;
    background-position: center;

    color: #FFFFFF;
}

.stats-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 55px;
}

.stats-top h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.35;

    /* Linear gradient text */
    background: linear-gradient(90deg, #C9A84C 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stats-top p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    max-width: 440px;
    color: #FFFFFF;
}

.stats-grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.stat-item h3 {
    font-size: 34px;
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.stat-item:first-child h3,
.stat-item:first-child p {
    margin-inline-start: 25px;
}

.stat-item p {
    font-size: 15px;
    color: #FFFFFF;
    font-family: "Poppins", sans-serif;
}

@media (max-width: 900px) {
    .stats-section {
        padding: 50px 24px;
    }

    .stats-top {
        flex-direction: column;
        gap: 20px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

.partner-section {
    width: 100%;
    min-height: 100vh;

    padding: 70px;

    background-image: url("../assets/instantly.png");
    background-size: cover;
    background-position: center;

    color: #FFFFFF;
}

.partner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 60px;
}

.partner-header p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #FFF8E7;
    margin-bottom: 18px;
}



.partner-header h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.35;
    padding-top: 4px;
    padding-bottom: 6px;


    background: linear-gradient(90deg, #C9A84C 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.partner-header h2 span {
    background: none;
    -webkit-text-fill-color: #C9A84C;
    color: #C9A84C;
}

.apply-btn {
    position: relative;

    height: 56px;

    padding: 0 10px 0 34px;
    gap: 12px;

    border-radius: 999px;

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

    background: #C9A84C;

    color: #ffffff;

    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 400;

    border: 2px solid rgba(255, 255, 255, 0.16);

    text-decoration: none;

    overflow: hidden;

    transition: all 0.4s ease;

    animation: floatButton 3s ease-in-out infinite;
}

.apply-btn .btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.apply-btn .btn-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
}

html[dir="rtl"] .apply-btn {
    padding: 0 34px 0 10px;
}

.apply-btn:hover {
    transform: translateY(-4px) scale(1.03);

    box-shadow:
        0 12px 30px rgba(201, 168, 76, 0.35),
        0 0 18px rgba(201, 168, 76, 0.25);

    background: #D8B55A;
}

@keyframes floatButton {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0px);
    }
}

.apply-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.45),
            transparent);

    transform: skewX(-20deg);

    transition: all 0.8s ease;
}

.apply-btn:hover::before {
    left: 140%;
}

.partner-card {

    max-width: 1180px;
    margin: 0 auto;

    position: relative;

    display: grid;
    grid-template-columns: repeat(2, 1fr);

    border-radius: 30px;

    overflow: hidden;
}

.partner-card::before {
    content: '';
    position: absolute;
    inset: -10px;
    background-image: url("../assets/become_an.png");
    background-size: cover;
    background-position: center;
    filter: blur(3px);
    z-index: 0;
}

.partner-item {
    position: relative;
    z-index: 1;

    min-height: 250px;
    padding: 48px;

}

.partner-item {
    border-bottom: 3px solid #FFF8E7;
}

/* vertical divider between 2 columns */
.partner-item:nth-child(odd) {
    border-inline-end: 3px solid #FFF8E7;
}

/* remove bottom border from last row */
.partner-item:nth-child(3),
.partner-item:nth-child(4) {
    border-bottom: none;
}

.partner-icon {
    width: 54px;
    height: 54px;

    border: 1px solid #C9A84C;
    border-radius: 50%;

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

    color: #C9A84C;

    margin-bottom: 30px;
}

.partner-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.partner-item h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    color: #1A1A2E;
    margin-bottom: 24px;
}

.partner-item p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #1A1A2E;
}

@media (max-width: 768px) {
    .partner-item {
        border-inline-end: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.7) !important;
    }

    .partner-item:last-child {
        border-bottom: none !important;
    }
}

@media (max-width: 900px) {
    .partner-section {
        padding: 50px 24px;
    }

    .partner-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }

    .partner-header h2 {
        font-size: 32px;
    }

    .partner-card {
        grid-template-columns: 1fr;
    }

    .partner-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.7) !important;
    }
}

.footer-section {
    width: 100%;
    background: #FFFFFF;
    padding: 40px 70px 24px;
    /* Reduced vertical padding from 60px/40px to 40px/24px */
    color: #1A1A2E;
    overflow: hidden;
}

.footer-section * {
    font-family: 'Poppins', sans-serif;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    max-width: 1140px;
    /* Figma layout content width constraint */
    margin: 0 auto;
    width: 100%;
    padding-bottom: 24px;
    /* Reduced from 35px to eliminate white empty space */
    border-bottom: 1px solid rgba(201, 168, 76, 0.2);
    /* Sleek gold accent line */
}

.footer-brand {
    max-width: 320px;
}

.footer-logo img {
    width: 180px;
    margin-bottom: 16px;
}

.footer-brand p {
    font-size: 14px;
    line-height: 1.5;
    color: #6C6D77;
    margin-bottom: 20px;
    /* Reduced text margin from 28px */
}

.social-icons {
    display: flex;
    gap: 16px;
}

.social-icons a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: transparent;
    color: #6C6D77;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    color: #C9A84C;
    transform: translateY(-2px);
}

.social-svg {
    transition: transform 0.3s ease;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Poovu decorative image — right side of footer, pinned to top */
.footer-poovu {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-shrink: 0;
}

.footer-poovu-img {
    max-height: 160px;
    width: auto;
    object-fit: contain;
    opacity: 0.9;
}

.footer-column h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1A1A2E;
    margin-bottom: 10px;

    /* Reduced header margin from 12px */
}

.footer-column a {
    text-decoration: none;
    color: #6C6D77;
    font-size: 14px;
    /* Balanced, highly readable font size */
    font-weight: 400;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: #C9A84C;
}

.footer-bottom {
    text-align: center;
    max-width: 1140px;
    /* Figma layout content width constraint */
    margin: 0 auto;
    width: 100%;
    padding-top: 20px;
    /* Reduced from 24px */
    font-size: 14px;
    color: #6C6D77;
}

@media (max-width: 900px) {

    .footer-section {
        padding: 40px 24px 20px;
        border-radius: 0 0 20px 20px;
    }

    .footer-top {
        flex-direction: column;
        gap: 40px;
    }

    .footer-poovu {
        display: none;
    }

}

.problem-card p,
.solution-card p {
    line-height: 1.8;
    margin-bottom: 28px;
}

.problem-list li,
.solution-list li {
    line-height: 1.9;
    margin-bottom: 22px;
}

.primary-btn:hover {
    background: #D6B45A;

    color: #000000;

    transform: translateY(-2px);

    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.secondary-btn:hover,
.secondary-btn.active {
    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.18);

    color: #FFFFFF;

    transform: translateY(-2px);
}

.contact-popup {
    position: fixed;
    inset: 0;

    z-index: 20000;

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

    padding: 24px;

    background: rgba(0, 0, 0, 0.72);

    backdrop-filter: blur(8px);
}

.contact-popup.active {
    display: flex;
}

.contact-popup-box {
    position: relative;

    font-family: 'Poppins', sans-serif;

    width: 78%;
    max-width: 920px;
    min-height: 560px;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    border-radius: 26px;

    overflow: hidden;

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.82),
            rgba(0, 0, 0, 0.82)),
        url("../assets/instantly.png");

    background-size: cover;
    background-position: center;
}

.popup-close {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: #C9A84C;

    color: #111111;

    font-size: 22px;
    font-weight: 600;

    cursor: pointer;

    z-index: 10;

    transition: 0.3s ease;
}

.popup-close:hover {
    transform: rotate(90deg);
}

.contact-popup-left {
    min-height: 560px;

    padding: 70px 54px;

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

    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-popup-left::before {
    content: "";

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #C9A84C;

    box-shadow:
        28px 0 #FFFFFF30,
        14px 14px #C9A84C;

    margin-bottom: 34px;
}

.contact-popup-left::after {
    content: "Are you interested\A in hearing more?";

    white-space: pre-line;

    font-family: 'Poppins', sans-serif;

    font-size: 30px;
    line-height: 1.2;
    font-weight: 400;

    color: #FFFFFF;
}

body.arabic-mode .contact-popup-left::after {
    content: "هل أنت مهتم\A بمعرفة المزيد؟";
    direction: rtl;
    text-align: right;
    font-family: 'Noto Naskh Arabic', serif;
}

.contact-popup-right {
    padding: 70px 56px;

    display: flex;
    align-items: center;
}

.contact-popup-right h2,
.contact-popup-right p {
    display: none;
}

.contact-form {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 22px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;

    padding: 18px 18px;

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    outline: none;

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

    color: #FFFFFF;

    font-family: 'Poppins', sans-serif;
    font-size: 15px;

    transition: 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #AEB8C5;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #C9A84C;

    background: rgba(255, 255, 255, 0.08);
}

.contact-form textarea {
    height: 140px;

    resize: none;
}

.send-btn {
    width: 110px;
    height: 52px;

    margin-left: auto;

    border: none;
    border-radius: 8px;

    background: #C9A84C;

    color: #111111;

    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.3s ease;
}

.send-btn:hover {
    background: #a88a37;

    transform: translateY(-2px);
}

@media (max-width: 768px) {

    .contact-popup-box {
        grid-template-columns: 1fr;

        max-height: 92vh;

        overflow-y: auto;
    }

    .contact-popup-left {
        min-height: 220px;

        padding: 42px 26px;

        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .contact-popup-left::after {
        font-size: 34px;
    }

    .contact-popup-right {
        padding: 34px 24px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .send-btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .contact-popup-box {
        grid-template-columns: 1fr;
        max-height: 90vh;
        overflow-y: auto;
    }

    .contact-popup-left {
        min-height: 180px;
    }

    .contact-popup-right {
        padding: 34px 22px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

.mobile-menu-btn,
.mobile-menu {
    display: none;
}

/* MOBILE VIEW ONLY */
@media (max-width: 768px) {

    .navbar {
        width: calc(100% - 32px);
        height: 56px;
        padding: 0 18px;
        top: 22px;

    }

    .logo img {
        width: 130px;
    }

    .nav-links,
    .nav-actions {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
        background: transparent;
        border: none;
        color: white;
        font-size: 26px;
        cursor: pointer;
    }

    .mobile-menu {
        margin-top: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;

        position: fixed;
        inset: 0;
        z-index: 10000;

        background: rgba(0, 0, 0, 0.96);
        padding-top: 34px;

        transform: translateX(100%);
        transition: 0.35s ease;
    }

    .mobile-menu.active {
        transform: translateX(0);
    }

    .mobile-close {
        position: absolute;
        top: 18px;
        right: 18px;

        width: 28px;
        height: 28px;

        border-radius: 50%;
        border: none;

        background: rgba(255, 255, 255, 0.15);
        color: white;

        font-size: 18px;
        cursor: pointer;
    }

    .mobile-logo {
        width: 130px;
        margin-bottom: 36px;
        align-self: flex-start;
        margin-left: 22px;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        transform: translateZ(0);
    }

    .mobile-menu a {
        color: white;
        text-decoration: none;

        font-family: 'Poppins', sans-serif;
        font-size: 18px;
        font-weight: 400;
        margin-top: 18px;
        margin-bottom: 18px;
    }

    .mobile-lang {
        margin-top: 6px;
        display: flex;
        align-items: center;


        border-radius: 999px;
        padding: 3px;
    }
}

@media (max-width: 768px) {
    .mobile-lang {
        height: 42px;
        padding: 0;

        display: flex;
        align-items: center;
        gap: 0;

        background: rgba(8, 8, 16, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;

        overflow: hidden;
    }

    .mobile-lang .lang-btn {
        height: 100%;
        padding: 0 10px;

        border: none;
        background: transparent;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;

        color: #ffffff;
        font-family: 'Poppins', sans-serif;
        font-size: 12px;
        font-weight: 600;

        border-radius: 0;
    }

    .mobile-lang .lang-btn:first-child {
        border-right: 1px solid rgba(255, 255, 255, 0.22);
        padding-left: 6px;
        padding-right: 12px;
    }

    .mobile-lang .lang-btn.active {
        background: #C9A84C;
        color: #ffffff;
    }

    .mobile-lang .flag-icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }
}

/* ===============================
   MOBILE NAVBAR: LOGO + MENU ONLY
================================ */
@media (max-width: 768px) {

    .navbar {
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);

        width: calc(100% - 24px);
        height: 54px;

        padding: 5px 14px;

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

        background-image: url("../assets/BG img_hero.png") !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;

        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 999px !important;

        z-index: 9999;
        opacity: 0.95;
    }

    .navbar .logo {
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 0;
        flex-shrink: 0;
    }

    .navbar .logo img {
        width: 135px !important;
        height: auto !important;
        max-height: 40px;
        object-fit: contain;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;

    }

    /* Hide desktop links and actions in mobile */
    .navbar .nav-links,
    .navbar .nav-actions {
        display: none !important;
    }

    /* Show only hamburger */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 32px;
        height: 32px;

        background: transparent;
        border: none;

        color: #ffffff;
        font-size: 24px;
        line-height: 1;

        cursor: pointer;
        padding: 0;
    }
}


@media (max-width: 768px) {

    .navbar {
        position: fixed !important;
        top: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;

        width: calc(100% - 24px) !important;
        height: 54px !important;

        padding: 5px 14px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;


        background-image: url("../assets/BG img_hero.png") !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 999px !important;

        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
        overflow: hidden !important;

        z-index: 9999 !important;
        opacity: 1 !important;
    }

    .navbar .logo img {
        width: 135px !important;
        height: auto !important;
        max-height: 40px !important;
        object-fit: contain !important;
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
        transform: translateZ(0) !important;
    }

    .navbar .nav-links,
    .navbar .nav-actions {
        display: none !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 32px !important;
        height: 32px !important;

        background: transparent !important;
        border: none !important;

        color: #ffffff !important;
        font-size: 24px !important;
        line-height: 1 !important;

        cursor: pointer;
        padding: 0 !important;
    }
}

@media (max-width: 390px) {
    .navbar .logo img {
        width: 110px !important;
    }

    .navbar .login-btn {
        min-width: 34px;
        width: 34px;
        padding: 3px;
    }

    .navbar .login-btn .btn-text {
        display: none;
    }

    .navbar .lang-btn span {
        font-size: 8px;
    }

    .navbar .flag-icon {
        width: 19px !important;
        height: 19px !important;
    }
}

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    .section {
        height: auto;
        min-height: 100vh;
    }

    .section1 {
        min-height: 100vh;
        height: 100vh;

        background-image: url("../assets/mobile_80.jpeg");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;

        padding-top: 0;
        position: relative;
        overflow: hidden;
    }

    .hero-content {
        position: absolute;
        top: 95px;
        left: 50%;
        transform: translateX(-50%);

        width: 100%;
        max-width: 300px;

        text-align: center;
        z-index: 10;
    }

    .hero-content .arabic-title {
        font-size: 17px;
        line-height: 1.25;
        margin-bottom: 6px;
    }

    .hero-content h1 {
        font-size: 22px;
        line-height: 1.12;
        margin-bottom: 8px;
    }

    .hero-content p {
        font-size: 10px;
        line-height: 1.3;
        letter-spacing: 1px;
        margin-bottom: 12px;
    }

    .hero-buttons {
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    .primary-btn,
    .secondary-btn {
        height: 30px;
        padding: 0 11px;
        font-size: 8px;
        white-space: nowrap;
        border-radius: 999px;
    }

    .stats-section {
        padding: 45px 24px;
        min-height: auto;
    }

    .stats-top {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 30px;
    }

    .stats-top h2 {
        font-size: 22px;
        line-height: 28px;
    }

    .stats-top p {
        font-size: 11px;
        line-height: 18px;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .stat-item h3 {
        font-size: 20px;
    }

    .stat-item p {
        font-size: 10px;
    }

    .floating-scan-btn {
        padding: 12px 8px;
    }

    .verification-section {
        background-image:
            linear-gradient(rgba(4, 4, 10, 0.45),
                rgba(4, 4, 10, 0.60)),
            url("../assets/mob_instant_bg.png");

        background-size: cover;
        background-position: center;
    }

    .verification-label {
        font-size: 12px;
        line-height: 18px;

        margin-bottom: 18px;

        color: #FFFFFF;
    }

    .verification-section h2 {
        font-size: 17px;
        line-height: 1.35;

        margin-bottom: 34px;

        text-align: center;
    }

    .verification-section p {
        font-size: 11px;
    }

    .verification-card {
        background-image:
            linear-gradient(rgba(255, 248, 231, 0.78),
                rgba(255, 248, 231, 0.78)),
            url("../assets/mob_instant_card.png");

        background-size: cover;
        background-position: center;
    }

    .verification-top {
        grid-template-columns: 1fr;
    }

    .verification-info {
        padding: 28px 20px;

        border-right: none;
        border-bottom: 1px solid #ffffff;

        text-align: left;
    }

    .verification-icon {
        width: 54px;
        height: 54px;

        margin-bottom: 18px;
    }

    .verification-icon img {
        width: 54px;
    }

    .verification-info h3 {
        font-size: 16px;
        line-height: 1.4;

        margin-bottom: 12px;
    }

    .verification-info p {
        font-size: 13px;
        line-height: 1.7;
        max-width: 240px;
    }

    .verification-bottom {
        flex-direction: column;

        gap: 14px;

        padding: 18px 16px 20px;
    }

    .verify-input-box {
        width: 760px;
        max-width: 100%;
        border-radius: 18px;
    }

    .verify-input-box input {
        height: 64px;

        padding: 0 18px;

        font-size: 13px;

        line-height: 1.6;
    }

    .qr-btn {
        width: 70px;
        height: 64px;
    }

    .verify-btn {
        width: 230px;
        height: 58px;

        border-radius: 18px;

        font-size: 15px;
    }
}

@media (max-width: 768px) {

    .hero-buttons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .hero-buttons .primary-btn,
    .hero-buttons .secondary-btn {
        height: 34px;
        min-width: 96px;

        padding: 0 4px 0 12px;

        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 7px;

        border-radius: 999px;

        font-size: 9px;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
    }

    .hero-buttons .primary-btn {
        background: #C9A84C;
        color: #111111;
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    .hero-buttons .secondary-btn {
        background: rgba(0, 0, 0, 0.28);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.45);
    }

    .hero-buttons .btn-icon {
        width: 26px;
        height: 26px;

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

        border-radius: 50%;
        flex-shrink: 0;
    }

    .hero-buttons .btn-icon img {
        width: 9px;
        height: 9px;
        object-fit: contain;
    }

    .hero-buttons .primary-btn .btn-icon {
        background: #ffffff;
    }

    .hero-buttons .secondary-btn .btn-icon {
        background: #C9A84C;
    }
}

@media (max-width: 420px) {
    .section1 {
        background-position: center top;
    }

    .hero-content {
        padding-left: 20px;
        max-width: 240px;
    }

    .hero-content h1 {
        font-size: 24px;
        line-height: 30px;
    }
}

@media (max-width: 768px) {

    .section1 {

        background-image: url("../assets/mobile_bg.png");

        background-size: cover;

        background-position: center top;

        background-repeat: no-repeat;

        min-height: 100vh;
    }

}

@media (max-width: 768px) {

    .section1 {
        min-height: 845px;
        height: 100vh;
        padding-top: 0;

        background-size: cover;
        background-position: center top;
    }

    .navbar {
        top: 10px;
        width: calc(100% - 28px);
        height: 42px;
        padding: 0 12px;

        background: rgba(0, 0, 0, 0.45);
        border-radius: 999px;
    }

    .logo img {
        width: 125px;
        height: auto;
    }


    .hero-content {
        position: absolute;

        top: 118px;
        left: 50%;

        transform: translateX(-50%);

        width: 100%;
        max-width: 320px;

        text-align: center;

        z-index: 5;
    }

    .hero-content .arabic-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .hero-subtitle {
        font-size: 12px;
        letter-spacing: 1px;

        margin-bottom: 18px;
    }

    .hero-content h1 {
        font-size: 28px;
        line-height: 1.1;

        max-width: 290px;

        margin: 0 auto 12px;

        text-align: center;
    }

    .hero-content p {
        font-size: 11px;
        margin-bottom: 18px;
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
        gap: 10px;
    }

    .hero-buttons .btn {
        height: 36px;
        padding: 0 14px;

        font-size: 11px;
    }

    s .primary-btn,
    .secondary-btn {
        padding: 8px 12px;
        font-size: 9px;
        border-radius: 999px;
    }


    .hero-content {
        z-index: 3;
    }

    .floating-scan-btn {
        width: 55px;
        padding: 15px 10px;
        align-items: center;
        justify-content: center;
    }

    .floating-scan-btn .icon-circle {
        width: 34px;
        height: 34px;
        margin-bottom: 12px;
    }

    .floating-scan-btn span {
        font-size: 13px;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .section1 {
        background-image: url("../assets/mobile_bg.png");
    }
}

@media (max-width: 768px) {

    .verify-steps-section {
        padding: 55px 18px;

        background-image: url("../assets/mob_voice_bg.png") !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;

        background-color: transparent !important;
    }

    .section-heading {
        max-width: 100%;
        margin-bottom: 30px;
    }

    .section-heading h2 {
        font-size: 24px;
        line-height: 32px;
        white-space: normal;
    }

    .section-heading p {
        font-size: 12px;
        line-height: 20px;
    }

    .steps-container-single {
        display: block;
        padding: 0;
        margin-bottom: 35px;
    }

    .combined-phones-img {
        width: 100%;
        max-width: 260px;
        display: block;
        margin: 0 auto;
    }

    .problem-solution-container {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .problem-card,
    .solution-card {
        min-height: auto;
        padding: 28px 22px;
        border-radius: 22px;
    }
}

.mobile-steps {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 260px;
    margin-bottom: 45px;
}

.mobile-step img {
    width: 190px;
}



.mobile-step p {
    font-size: 18px;
    text-align: center;
    color: #1A1A2E;
    line-height: 1.5;
}


.mobile-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 55px;
    align-items: start;

    max-width: 760px;
    margin: 35px auto 70px;
}

.mobile-step {
    text-align: center;
}

.mobile-step img {
    width: 145px;
    height: auto;
    display: block;
    margin: 0 auto 18px;
}



.verify-steps-section {
    height: auto;
    padding: 70px 70px;
}

.mobile-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 55px;
    max-width: 780px;
    margin: 35px auto 70px;
}

.mobile-step {
    text-align: center;
}

.mobile-step img {
    width: 145px;
    display: block;
    margin: 0 auto 16px;
}

.mobile-step p {
    font-size: 16px;
    line-height: 1.5;
    color: #1A1A2E;
}

.problem-solution-container {
    grid-template-columns: 1fr 1fr;
    max-width: 1120px;
    gap: 24px;
}

@media (max-width: 768px) {

    .verify-steps-section {
        padding: 55px 18px;
    }

    .section-heading h2 {
        font-size: 18px;
        line-height: 30px;
        white-space: normal;
    }

    .section-heading p {
        font-size: 13px;
        line-height: 1.8;

        text-align: center;

        margin: 0 auto;

    }

    .mobile-steps {
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 260px;
        margin: 30px auto 35px;
    }

    .mobile-step img {
        width: 165px;
    }

    .mobile-step p {
        font-size: 12px;
    }

    .problem-solution-container {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .problem-card,
    .solution-card {
        min-height: auto;
        padding: 24px 18px;
        border-radius: 18px;
    }
}

@media (max-width: 768px) {

    .verification-info {
        padding: 30px 24px;
    }

    .verification-info h3 {
        font-size: 22px;
        margin-bottom: 14px;
    }

    .verification-info p {
        font-size: 14px;
        line-height: 1.8;
    }
}

@media (max-width: 768px) {

    .verification-section {
        padding: 55px 16px 70px;
        min-height: auto;

        background-image:
            linear-gradient(rgba(4, 4, 10, 0.35), rgba(4, 4, 10, 0.55)),
            url("../assets/mob_instant_bg.png");
    }

    .verification-card {
        width: 100%;
        max-width: 358px;
        margin: 0 auto;

        border-radius: 30px;
        overflow: hidden;

        background-image: url("../assets/mob_instant_card.png") !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    .verification-info {
        padding: 32px 26px;
    }

    .verification-info h3 {
        font-size: 18px;
        line-height: 1.4;
    }

    .verification-info p {
        font-size: 14px;
        line-height: 1.55;
    }

    .verification-bottom {
        flex-direction: row;
        padding: 16px 22px 18px;
        gap: 0;
    }

    .verify-input-box {
        width: 100%;
        height: 74px;
        border-radius: 20px;
    }

    .verify-input-box input {
        height: 74px;
        font-size: 14px;
        padding: 0 18px;
    }

    .qr-btn {
        width: 68px;
        height: 74px;
        flex-shrink: 0;
    }

    .verify-btn {
        display: none;
    }
}

@media (max-width: 768px) {

    .partner-section {
        padding: 60px 16px;
        min-height: auto;

        background-image:
            linear-gradient(rgba(5, 5, 12, 0.55), rgba(5, 5, 12, 0.75)),
            url("../assets/mob_instant_bg.png");

        background-size: cover;
        background-position: center;
    }

    .partner-header {
        display: block;
        text-align: center;
        margin-bottom: 28px;
    }

    .partner-header p {
        font-size: 12px;
        line-height: 18px;
        margin-bottom: 10px;
    }

    .partner-header h2 {
        font-size: 20px;
        line-height: 1.35;
        max-width: 280px;
        margin: 0 auto;
    }

    .apply-btn {
        display: none;
    }

    .partner-card {
        width: 100%;
        max-width: 358px;
        margin: 0 auto;

        display: grid;
        grid-template-columns: 1fr;

        border-radius: 30px;
        overflow: hidden;

        background-image: url("../assets/mob_become.png");
        background-size: cover;
        background-position: center;
    }

    .partner-card::before {
        display: none;
    }

    .partner-item {
        min-height: auto;
        padding: 28px 24px;

        border-right: none !important;
        border-bottom: 1px solid #ffffff !important;

        background: transparent;
    }

    .partner-item:last-child {
        border-bottom: none !important;
    }

    .partner-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 18px;
    }

    .partner-icon img {
        width: 16px;
        height: 16px;
    }

    .partner-item h3 {
        font-size: 16px;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .partner-item p {
        font-size: 13px;
        line-height: 1.55;
    }
}

@media (max-width: 768px) {

    .testimonials-section {
        padding: 55px 16px;

        background-image: url("../assets/mob_voice_bg.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        min-height: auto;
    }

    .testimonial-header {
        display: block;
        margin-bottom: 26px;
    }

    .testimonial-header h2 {
        font-size: 20px;
        line-height: 1.4;

        text-align: center;

        margin-bottom: 12px;
    }

    .testimonial-header p {
        font-size: 12px;
        line-height: 1.6;

        text-align: center;

        max-width: 300px;
        margin: 0 auto;
    }



    @media (max-width: 768px) {
        .testimonial-grid {
            display: grid !important;
            grid-template-columns: 1fr !important;

            gap: 18px !important;

            overflow: visible !important;
            scroll-snap-type: none !important;

            width: 100% !important;
            max-width: 358px !important;

            margin-left: auto !important;
            margin-right: auto !important;
            margin-bottom: 28px !important;
            padding-bottom: 0 !important;
        }

        .testimonial-card {
            width: 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;

            min-height: auto !important;

            scroll-snap-align: unset !important;

            padding: 24px 22px !important;
            border-radius: 20px !important;
        }
    }


    .testimonial-grid::-webkit-scrollbar {
        display: none;
    }

    .testimonial-card {
        min-width: 280px;
        max-width: 280px;
        min-height: 190px;

        border-radius: 20px;
        padding: 20px 18px;

        scroll-snap-align: center;

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

        text-align: center;
    }


    .testimonial-card p {
        text-align: left;

    }

    .testimonial-card .card-icon {
        margin-left: auto;
        margin-right: auto;
    }

    .testimonial-card h4 {
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        font-size: 16px;
    }

    .video-preview {
        width: 100%;
        max-width: 358px;

        margin: 0 auto;

        border-radius: 20px;

        overflow: hidden;
    }

    .video-preview img {
        width: 100%;
        height: auto;
        display: block;
    }

    .play-btn {
        width: 72px;
        height: 72px;

        font-size: 24px;
    }
}

@media (max-width: 768px) {

    .coming-icon {
        width: 36px;
        height: 36px;

        margin-bottom: 18px;
    }

    .coming-icon img {
        width: 15px;
        height: 15px;
    }

    .coming-icon {
        border: 1px solid #D4A64A;
    }


    .mission-overlay h3 {
        font-size: 20px;
        line-height: 1.25;

        margin-bottom: 14px;
    }

}

@media (max-width: 768px) {
    .mission-overlay .coming-icon {
        width: 38px;
        height: 38px;
    }

    .mission-overlay .coming-icon img {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain;
    }
}

@media (max-width: 768px) {

    .testimonials-section {
        background-image: url("../assets/mob_voice_bg.png") !important;
        background-size: 100% 100% !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;

        padding: 55px 16px 70px !important;
        min-height: auto !important;
    }

    @media (max-width: 768px) {

        .verification-section {
            margin-bottom: 0 !important;
            border-bottom: none !important;
        }

        .verification-card {
            margin-bottom: 0 !important;
            border-bottom: none !important;
            box-shadow: none !important;
        }

        .pillars-section {
            padding-top: 40px !important;
            border-top: none !important;
        }

    }

    .testimonial-card {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 358px !important;

        border-radius: 20px;
        padding: 24px 20px;
        margin: 0 auto;
    }

    .video-preview {
        width: 100% !important;
        max-width: 358px !important;

        height: 566px !important;

        margin: 18px auto 0 !important;
        border-radius: 20px !important;
        overflow: hidden;
    }

    .video-preview img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;
    }

    .play-btn {
        width: 70px !important;
        height: 70px !important;
        font-size: 24px !important;
    }
}

@media (max-width: 768px) {

    .verify-steps-section {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    .pillars-section {
        padding-top: 48px !important;
        background: #ffffff !important;
        border-top: none !important;
        box-shadow: none !important;
    }

    .pillars-section h2 {
        font-size: 17px;
        line-height: 1.45;

        max-width: 340px;

        margin: 0 auto 38px;

        text-align: center;
    }
}

@media (max-width: 768px) {

    .verification-section,
    .verify-steps-section,
    .pillars-section,
    .testimonials-section,
    .partner-section {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .verification-section {
        padding-bottom: 70px !important;
        margin-bottom: 0 !important;
    }

    .verify-steps-section {
        padding-bottom: 55px !important;
        margin-bottom: 0 !important;
    }

    .pillars-section {
        margin-top: 0 !important;
        padding-top: 55px !important;
        padding-bottom: 60px !important;
    }

    .testimonials-section {
        margin-top: 0 !important;
        padding-top: 55px !important;
    }

    .mission-desktop-img {
        display: block;
        width: 100%;
    }

    .mission-mobile-img {
        display: none;
        width: 100%;
    }



    .problem-list li,
    .solution-list li {
        display: flex;
        align-items: flex-start;

        gap: 10px;

        margin-bottom: 16px;

        line-height: 1.7;

        font-size: 13px;
    }

    .problem-card h3,
    .solution-card h3 {
        line-height: 1.35;

        margin-bottom: 18px;
    }
}

@media (max-width: 768px) {

    footer,
    .footer-section {
        border-radius: 0 !important;
        overflow: hidden;
        margin-bottom: 0 !important;
        padding-bottom: 30px !important;

        background: #F5F5F5 !important;
    }

    body {
        background: #F5F5F5 !important;
    }

    html {
        background: #F5F5F5 !important;
    }
}

@media (max-width: 768px) {

    .problem-solution-container {
        max-width: 330px !important;
        margin: 0 auto !important;
        gap: 0 !important;
    }

    .problem-card,
    .solution-card {
        width: 330px !important;
        min-height: auto !important;
        padding: 18px 16px !important;
        border-radius: 18px !important;
    }

    .problem-card {
        margin-bottom: 0 !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .solution-card {
        border-radius: 0 0 18px 18px !important;
    }

    .problem-card h2,
    .solution-card h2 {
        font-size: 20px !important;
        line-height: 26px !important;
        margin-bottom: 10px !important;
    }

    .problem-card p,
    .solution-card p {
        width: 327px !important;
        max-width: 100% !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
        margin-bottom: 14px !important;
    }

    .problem-card li,
    .solution-card li {
        font-size: 11px !important;
        line-height: 1.45 !important;
        margin-bottom: 10px !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    .problem-icon,
    .solution-icon {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0;
    }

    .card-icon {
        width: 30px !important;
        height: 30px !important;
        top: 14px !important;
        right: 14px !important;
    }
}

/* Mission preview image switch */
.mission-desktop-img {
    display: block !important;
}

.mission-mobile-img {
    display: none !important;
}

@media (max-width: 768px) {

    .mission-desktop-img {
        display: none !important;
    }

    .mission-mobile-img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;
    }


}


@media (max-width: 1100px) {
    .navbar {
        width: calc(100% - 32px);
        height: 52px;
        padding: 0 14px;
        gap: 12px;
    }

    .logo img {
        width: 135px;
    }

    .nav-links {
        gap: 14px;
        padding: 7px 14px;
        height: 38px;
    }

    .nav-links a {
        font-size: 11px;
    }

    .lang-toggle {
        height: 44px;
    }

    .lang-btn {
        font-size: 13px;
        padding: 0 11px;
    }

    .lang-btn.active {
        padding-left: 12px;
        padding-right: 4px;
    }

    .lang-btn:first-child {
        padding-left: 7px;
        padding-right: 12px;
    }

    .flag-icon {
        width: 30px;
        height: 30px;
    }

    .lang-btn.active .flag-icon {
        width: 38px;
        height: 38px;
    }

    .contact-btn {
        height: 38px;
        min-width: 120px;
        padding: 0 14px;
        font-size: 11px;
    }
}

@media (max-width: 900px) {
    .navbar {
        width: calc(100% - 24px);
        height: 48px;
        padding: 0 12px;
    }

    .logo img {
        width: 120px;
    }

    .nav-links {
        gap: 10px;
        padding: 6px 12px;
    }

    .nav-links a {
        font-size: 10px;
    }

    .contact-btn {
        min-width: 105px;
        font-size: 10px;
        padding: 0 12px;
    }

    .lang-toggle {
        height: 34px;
    }

    .lang-btn {
        padding: 0 8px;
        font-size: 10px;
    }
}

@media (max-width: 768px) {

    .nav-links,
    .nav-actions {
        display: none;
    }

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

    .navbar {
        width: calc(100% - 28px);
        height: 42px;
        padding: 0 12px;
    }

    .logo img {
        width: 125px;
    }
}

/* ===============================
   RTL SUPPORT
   Arabic: other sections can flip
   Hero section must stay like English
================================ */

/* Do NOT let the whole body flip */
html[dir="rtl"] body {
    direction: ltr !important;
}

/* Navbar can flip in Arabic */
html[dir="rtl"] .navbar,
html[dir="rtl"] .nav-links,
html[dir="rtl"] .nav-actions {
    direction: rtl;
}

/* Other sections can use RTL */
html[dir="rtl"] .stats-section,
html[dir="rtl"] .verify-steps-section,
html[dir="rtl"] .pillars-section,
html[dir="rtl"] .verification-section,
html[dir="rtl"] .testimonials-section,
html[dir="rtl"] .partner-section,
html[dir="rtl"] .footer-section {
    direction: rtl;
}

/* Right-align text in RTL sections */
html[dir="rtl"] .verification-info,
html[dir="rtl"] .partner-item,
html[dir="rtl"] .footer-brand,
html[dir="rtl"] .footer-column {
    text-align: right;
}

/* RTL layout for section rows */
html[dir="rtl"] .stats-top,
html[dir="rtl"] .partner-header,
html[dir="rtl"] .footer-top,
html[dir="rtl"] .footer-links {
    direction: rtl;
}

/* ===============================
   HERO SECTION FIX
   Hero should NOT flip in Arabic
================================ */

.section1,
html[dir="rtl"] .section1,
body.arabic-mode .section1 {
    direction: ltr !important;
    background-position: 45% 50% !important;
}

/* Keep hero content same position in English and Arabic */
.section1>.hero-content,
html[dir="rtl"] .section1>.hero-content,
body.arabic-mode .section1>.hero-content {
    position: absolute !important;

    top: 31% !important;
    left: 70px !important;
    right: auto !important;

    transform: none !important;

    width: auto !important;
    max-width: 520px !important;

    text-align: left !important;
    direction: ltr !important;

    z-index: 5 !important;
}

/* Keep hero text aligned like English */
html[dir="rtl"] .section1 .arabic-title,
html[dir="rtl"] .section1 .hero-content h1,
html[dir="rtl"] .section1 .hero-content p,
body.arabic-mode .section1 .arabic-title,
body.arabic-mode .section1 .hero-content h1,
body.arabic-mode .section1 .hero-content p {
    text-align: left !important;
    direction: ltr !important;
}

/* Keep hero buttons same order and position */
html[dir="rtl"] .section1 .hero-buttons,
body.arabic-mode .section1 .hero-buttons {
    direction: ltr !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
}

/* ===============================
   PROBLEM / SOLUTION RTL FIX
================================ */

/* In Arabic, flip the two cards visually */
html[dir="rtl"] .problem-solution-container {
    direction: rtl;
}

/* Keep text direction correct inside cards */
html[dir="rtl"] .problem-card,
html[dir="rtl"] .solution-card {
    direction: rtl;
    text-align: right;
}

/* Fix Arabic heading clipping */
html[dir="rtl"] .problem-card h2,
html[dir="rtl"] .solution-card h2 {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 34px !important;
    line-height: 1.35 !important;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 18px;
    white-space: normal !important;
}

/* Fix paragraph spacing in Arabic */
html[dir="rtl"] .problem-card p,
html[dir="rtl"] .solution-card p {
    font-size: 16px;
    line-height: 1.9 !important;
    text-align: right;
}

/* Flip list items */
html[dir="rtl"] .problem-card li,
html[dir="rtl"] .solution-card li {
    direction: rtl;
    text-align: right;
    flex-direction: row;
    justify-content: flex-start;
    line-height: 1.8 !important;
}

/* Keep list icons near Arabic text */
html[dir="rtl"] .problem-icon,
html[dir="rtl"] .solution-icon {
    margin-left: 10px;
    margin-right: 0;
    flex-shrink: 0;
}

/* Move danger/success icons to the left side in Arabic */
html[dir="rtl"] .problem-card .card-icon,
html[dir="rtl"] .solution-card .card-icon {
    right: auto !important;
    left: 40px !important;
}

@media (max-width: 768px) {

    html[dir="rtl"] .problem-card h2,
    html[dir="rtl"] .solution-card h2 {
        font-size: 22px !important;
        line-height: 1.45 !important;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    html[dir="rtl"] .problem-card .card-icon,
    html[dir="rtl"] .solution-card .card-icon {
        right: auto !important;
        left: 14px !important;
    }
}

html[dir="rtl"] .verification-section h2 {
    font-family: 'Noto Naskh Arabic', serif;
    line-height: 1.45 !important;
    margin-bottom: 70px;
}

/* Fix Arabic Mission & Vision heading cut */
html[dir="rtl"] .testimonial-header h2 {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 36px;
    line-height: 1.5 !important;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 14px;
    overflow: visible;
}

/* Fix Arabic partner heading cut */
html[dir="rtl"] .partner-header h2 {
    font-family: 'Noto Naskh Arabic', serif;
    line-height: 1.55 !important;
    padding-top: 8px;
    padding-bottom: 8px;
    overflow: visible;
}

html[dir="rtl"] .partner-header p {
    font-family: 'Noto Naskh Arabic', serif;
    line-height: 1.8 !important;
}

/* Fix Arabic stats heading cut */
html[dir="rtl"] .stats-top h2 {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 36px;
    line-height: 1.55 !important;

    padding-top: 8px;
    padding-bottom: 8px;

    overflow: visible;
}

/* Increase Arabic font size globally
body.arabic-mode {
    font-size: 20px;
} */

body.arabic-mode {
    font-family: 'Noto Naskh Arabic', serif;
}

body.arabic-mode {
    font-family: 'Noto Naskh Arabic', serif;
}

/* ===============================
   ARABIC FONT SIZE FIX - DESKTOP
   Keep same visual size as English
================================ */

html[dir="rtl"] .arabic-title {
    font-size: 48px !important;
    line-height: 1.2 !important;
}

html[dir="rtl"] .hero-content h1 {
    font-size: 44px !important;
    line-height: 52px !important;
}

html[dir="rtl"] .hero-content p {
    font-size: 22px !important;
    line-height: 1.4 !important;
}

html[dir="rtl"] .stats-top h2,
html[dir="rtl"] .section-heading h2,
html[dir="rtl"] .pillars-section h2,
html[dir="rtl"] .verification-section h2,
html[dir="rtl"] .testimonial-header h2,
html[dir="rtl"] .partner-header h2 {
    font-size: 36px !important;
    line-height: 1.35 !important;
}

html[dir="rtl"] .stats-top p,
html[dir="rtl"] .section-heading p,
html[dir="rtl"] .verification-label,
html[dir="rtl"] .testimonial-header p,
html[dir="rtl"] .partner-header p,
html[dir="rtl"] .pillars-label {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

html[dir="rtl"] .problem-card h2,
html[dir="rtl"] .solution-card h2 {
    font-size: 36px !important;
    line-height: 42px !important;
}

html[dir="rtl"] .problem-card p,
html[dir="rtl"] .solution-card p,
html[dir="rtl"] .problem-card li,
html[dir="rtl"] .solution-card li {
    font-size: 16px !important;
    line-height: 1.8 !important;
}

html[dir="rtl"] .pillar-card h3,
html[dir="rtl"] .verification-info h3,
html[dir="rtl"] .partner-item h3 {
    font-size: 24px !important;
    line-height: 1.4 !important;
}

html[dir="rtl"] .pillar-card p,
html[dir="rtl"] .verification-info p,
html[dir="rtl"] .partner-item p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

html[dir="rtl"] .testimonial-card p {
    font-size: 15px !important;
    line-height: 1.8 !important;
}

html[dir="rtl"] .video-preview.mission-preview .mission-overlay h3 {
    font-size: 45px !important;
    line-height: 1.2 !important;
    text-align: right !important;
    width: 100% !important;
}

html[dir="rtl"] .video-preview.mission-preview .mission-overlay p {
    font-size: 18px !important;
    line-height: 1.7 !important;
    text-align: right !important;
    width: 100% !important;
}

html[dir="rtl"] .video-preview.mission-preview .mission-overlay {
    direction: rtl !important;
    text-align: right !important;
    align-items: flex-end !important;
}

html[dir="rtl"] .video-preview.mission-preview .mission-overlay .coming-icon {
    align-self: center !important;
}

html[dir="rtl"] .apply-btn,
html[dir="rtl"] .verify-btn {
    font-size: 16px !important;
}

html[dir="rtl"] .nav-links a,
html[dir="rtl"] .login-btn,
html[dir="rtl"] .lang-btn {
    font-size: 12px !important;
}

html[dir="rtl"] .login-btn {
    padding: 7px 18px 7px 7px !important;
}

/*ARABIC FONT SIZE FIX - MOBILE*/

@media (max-width: 768px) {

    html[dir="rtl"] .hero-content .arabic-title {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    html[dir="rtl"] .hero-content h1 {
        font-size: 28px !important;
        line-height: 1.1 !important;
    }

    html[dir="rtl"] .hero-content p {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    html[dir="rtl"] .hero-buttons .primary-btn,
    html[dir="rtl"] .hero-buttons .secondary-btn {
        font-size: 11px !important;
        height: 38px !important;
        min-width: auto !important;
        padding: 0 6px 0 14px !important;
        white-space: nowrap !important;
    }

    html[dir="rtl"] .hero-buttons .btn-icon {
        width: 28px !important;
        height: 28px !important;
    }

    html[dir="rtl"] .hero-buttons .btn-icon img {
        width: 10px !important;
        height: 10px !important;
    }

    html[dir="rtl"] .stats-top h2 {
        font-size: 22px !important;
        line-height: 28px !important;
    }

    html[dir="rtl"] .stats-top p {
        font-size: 11px !important;
        line-height: 18px !important;
    }

    html[dir="rtl"] .stat-item h3 {
        font-size: 20px !important;
    }

    html[dir="rtl"] .stat-item p {
        font-size: 10px !important;
    }

    html[dir="rtl"] .section-heading h2 {
        font-size: 22px !important;
        line-height: 30px !important;
    }

    html[dir="rtl"] .section-heading p {
        font-size: 13px !important;
        line-height: 1.8 !important;
    }

    html[dir="rtl"] .mobile-step p {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }

    html[dir="rtl"] .problem-card h2,
    html[dir="rtl"] .solution-card h2 {
        font-size: 22px !important;
        line-height: 1.45 !important;
    }

    html[dir="rtl"] .problem-card p,
    html[dir="rtl"] .solution-card p,
    html[dir="rtl"] .problem-card li,
    html[dir="rtl"] .solution-card li {
        font-size: 13px !important;
        line-height: 1.8 !important;
    }

    html[dir="rtl"] .pillars-section h2 {
        font-size: 18px !important;
        line-height: 1.45 !important;
    }

    html[dir="rtl"] .verification-label {
        font-size: 12px !important;
        line-height: 18px !important;
    }

    html[dir="rtl"] .verification-section h2 {
        font-size: 22px !important;
        line-height: 1.35 !important;
    }

    html[dir="rtl"] .verification-info h3 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    html[dir="rtl"] .verification-info p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    html[dir="rtl"] .verify-input-box input {
        font-size: 14px !important;
    }

    html[dir="rtl"] .testimonial-header h2 {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }

    html[dir="rtl"] .testimonial-header p {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    html[dir="rtl"] .testimonial-card p {
        font-size: 15px !important;
        line-height: 1.8 !important;
    }

    html[dir="rtl"] .mission-overlay h3 {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    html[dir="rtl"] .mission-overlay p {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    html[dir="rtl"] .partner-header p {
        font-size: 12px !important;
        line-height: 18px !important;
    }

    html[dir="rtl"] .partner-header h2 {
        font-size: 20px !important;
        line-height: 1.35 !important;
    }

    html[dir="rtl"] .partner-item h3 {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    html[dir="rtl"] .partner-item p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    html[dir="rtl"] .mobile-menu a {
        font-size: 18px !important;
    }

    html[dir="rtl"] .mobile-login-btn {
        font-size: 13px !important;
    }

    /* Floating Scan & Verify button — RTL/Arabic mobile fix */
    html[dir="rtl"] .floating-scan-btn {
        right: auto !important;
        left: 0 !important;
        border-radius: 0 16px 0 0 !important;
        box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2) !important;
    }

    html[dir="rtl"] .floating-scan-btn span {
        writing-mode: vertical-lr !important;
        transform: rotate(180deg) !important;
    }
}

@media (max-width: 768px) {

    html[dir="rtl"] .mission-preview,
    html[dir="rtl"] .mission-overlay {
        direction: rtl;
        text-align: center !important;
    }

    html[dir="rtl"] .mission-overlay {
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;

        width: 100%;
        max-width: 260px;

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

    html[dir="rtl"] .mission-overlay h3,
    html[dir="rtl"] .mission-overlay p {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }

    html[dir="rtl"] .coming-icon {
        margin-left: auto;
        margin-right: auto;
    }
}

.mobile-login-btn {
    height: 38px;
    padding: 0 24px;

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

    border-radius: 999px;

    background: #C9A84C;
    color: #111111 !important;

    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    margin-top: -18px;
}

@media (max-width: 768px) {
    .section1 .hero-content {
        top: 170px !important;
    }
}

@media (max-width: 768px) {

    /* Hero section should not flip/reposition in Arabic */
    html[dir="rtl"] .section1,
    body.arabic-mode .section1 {
        direction: ltr !important;
        background-image: url("../assets/mobile_bg.png") !important;
        background-position: center top !important;
        background-size: cover !important;
    }

    /* Keep heading in the same mobile position */
    html[dir="rtl"] .section1 .hero-content,
    body.arabic-mode .section1 .hero-content {
        position: absolute !important;
        top: 170px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;

        width: 100% !important;
        max-width: 300px !important;

        text-align: center !important;
        direction: ltr !important;
        z-index: 10 !important;
    }

    /* Keep Arabic text centered, not shifted */
    html[dir="rtl"] .section1 .arabic-title,
    html[dir="rtl"] .section1 .hero-content h1,
    html[dir="rtl"] .section1 .hero-content p,
    body.arabic-mode .section1 .arabic-title,
    body.arabic-mode .section1 .hero-content h1,
    body.arabic-mode .section1 .hero-content p {
        text-align: center !important;
        direction: ltr !important;
    }

    /* Keep buttons in same order/position */
    html[dir="rtl"] .section1 .hero-buttons,
    body.arabic-mode .section1 .hero-buttons {
        direction: ltr !important;
        flex-direction: row !important;
        justify-content: center !important;
    }
}

@media (max-width: 768px) {

    .navbar {
        position: fixed;
        top: 12px;
        left: 0;
        right: 0;
        transform: none;

        width: 100%;
        height: 42px;

        padding: 0 18px;

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


        background-image: none !important;

        border: none !important;
        border-radius: 0 !important;

        z-index: 9999;
    }

    .logo {
        display: flex;
        align-items: center;
    }

    .logo img {
        width: 105px;
        height: auto;
        max-height: 34px;
        object-fit: contain;
    }

    .nav-links,
    .nav-actions {
        display: none !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 28px;
        height: 28px;

        background: transparent;
        border: none;

        color: #ffffff;
        font-size: 22px;
        line-height: 1;

        cursor: pointer;
        padding: 0;
    }
}

.login-btn,
.mobile-login-btn,
.primary-btn,
.secondary-btn {
    gap: 8px;
}

.btn-text {
    display: inline-flex;
    align-items: center;
}

.btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;

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


    flex-shrink: 0;
}

.btn-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
}

/* Desktop login/register button */
.login-btn {
    min-width: 150px;
    padding: 0 10px 0 18px;
}



/* Hero buttons with icon */
.hero-action-btn {
    padding-right: 10px;
}

/* Dark icon circle for secondary button if needed */
.secondary-btn .btn-icon {
    background: #C9A84C;
}

/* Mobile menu login/register */
.mobile-login-btn {
    width: fit-content;
    min-width: 165px;
    margin: 14px auto 0;
    gap: 8px;

    height: 42px;
    padding: 0 10px 0 20px;

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

    border-radius: 999px;
    background: #C9A84C;
    color: #111111;

    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.stats-top,
.stats-grid,
.section-heading,
.mobile-steps,
.problem-solution-container,
.pillars-label,
.pillars-section h2,
.pillars-container,
.verification-section>p,
.verification-section>h2,
.verification-card,
.testimonial-header,
.testimonial-grid,
.video-preview,
.partner-header,
.partner-card,
.footer-top,
.footer-bottom {
    width: calc(100% - 80px);
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {

    .stats-top,
    .stats-grid,
    .section-heading,
    .mobile-steps,
    .problem-solution-container,
    .pillars-label,
    .pillars-section h2,
    .pillars-container,
    .verification-section>p,
    .verification-section>h2,
    .verification-card,
    .testimonial-header,
    .testimonial-grid,
    .video-preview,
    .partner-header,
    .partner-card,
    .footer-top,
    .footer-bottom {
        width: calc(100% - 24px);
        max-width: 100%;
    }
}


/* HERO SAME WIDTH AS HEADER */


.section1 {
    position: relative;
}

.hero-inner {
    width: calc(100% - 80px);
    max-width: 1180px;
    height: 100%;
    margin: 0 auto;

    position: relative;
}

/* ===============================
   ARABIC TESTIMONIAL SECTION FIX
================================ */
html[dir="rtl"] .testimonial-header {
    text-align: right !important;
}

html[dir="rtl"] .testimonial-header h2,
html[dir="rtl"] .testimonial-header p {
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Keep grid position same as English */
html[dir="rtl"] .testimonial-grid {
    direction: ltr !important;
}

/* But keep Arabic text RTL inside cards */
html[dir="rtl"] .testimonial-card {
    direction: rtl !important;
    text-align: center !important;
    align-items: center !important;
}

html[dir="rtl"] .testimonial-card p {
    width: auto;
    text-align: right !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html[dir="rtl"] .testimonial-card h4 {
    width: auto;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html[dir="rtl"] .testimonial-card .card-icon {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html[dir="rtl"] .testimonial-user {
    direction: rtl !important;
    justify-content: center !important;
}

html[dir="rtl"] .testimonial-user span,
html[dir="rtl"] .testimonial-user h4 {
    text-align: center !important;
}

html[dir="rtl"] .testimonial-card.quote-card h4 {
    text-align: right !important;
}

html[dir="rtl"] .quote-icon {
    right: auto !important;
    left: 20px !important;
}

html[dir="rtl"] .quote-card h4 {
    text-align: right !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* PARTNER CARD BORDER FIX - ARABIC */

html[dir="rtl"] .partner-card {
    direction: rtl;
}

@media (min-width: 769px) {

    /* reset all borders first */
    html[dir="rtl"] .partner-item {
        border-right: none !important;
        border-left: none !important;
        border-bottom: 3px solid #FFF8E7 !important;
    }

    /* vertical middle line in Arabic */
    html[dir="rtl"] .partner-item:nth-child(1),
    html[dir="rtl"] .partner-item:nth-child(3) {
        border-left: 3px solid #FFF8E7 !important;
    }

    /* remove bottom border from last row */
    html[dir="rtl"] .partner-item:nth-child(3),
    html[dir="rtl"] .partner-item:nth-child(4) {
        border-bottom: none !important;
    }
}

/* ===============================
   HOVER ANIMATION SYSTEM
   - Whole box hover for large sections
   - Individual hover for item cards
================================ */


/* ===============================
   1. WHOLE SECTION / WHOLE BOX HOVER
   Applies to complete boxes only
================================ */

.testimonial-card,
.partner-card,
.verification-card,
.mission-preview {
    cursor: pointer;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;

    will-change: transform;
}

.testimonial-card:hover,
.partner-card:hover,
.verification-card:hover,
.mission-preview:hover {
    transform: translateY(-8px) scale(1.01);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.20),
        0 0 28px rgba(201, 168, 76, 0.22);

    border-color: #C9A84C !important;
}


/* Icon animation inside whole hovered boxes */

.testimonial-card .card-icon,
.partner-card .partner-icon,
.verification-card .verification-icon,
.mission-preview .coming-icon {
    transition: transform 0.35s ease;
}

.testimonial-card:hover .card-icon,
.partner-card:hover .partner-icon,
.verification-card:hover .verification-icon,
.mission-preview:hover .coming-icon {
    transform: scale(1.08) rotate(3deg);
}


/* ===============================
   2. INDIVIDUAL ITEM HOVER
   Applies one-by-one on user hover
================================ */

.pillar-card,
.problem-card,
.solution-card,
.mobile-step {
    cursor: pointer;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;

    will-change: transform;
}

.pillar-card:hover,
.problem-card:hover,
.solution-card:hover,
.mobile-step:hover {
    transform: translateY(-8px) scale(1.02);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.16),
        0 0 24px rgba(201, 168, 76, 0.22);

    border-color: #C9A84C !important;
}


/* Icon/image animation inside individual hovered items */

.pillar-card img,
.problem-card .card-icon,
.solution-card .card-icon,
.mobile-step img {
    transition: transform 0.35s ease;
}

.pillar-card:hover img,
.problem-card:hover .card-icon,
.solution-card:hover .card-icon,
.mobile-step:hover img {
    transform: scale(1.08) rotate(3deg);
}


/* ===============================
   3. OPTIONAL BOX STYLING
   Add soft radius/padding for hover visibility
================================ */




.mobile-step {
    border-radius: 22px;
    padding: 18px 16px;
}


/* ===============================
   4. DISABLE HOVER EFFECTS ON MOBILE
   Touch screens do not need hover animation
================================ */

@media (max-width: 768px) {

    .testimonial-card:hover,
    .partner-card:hover,
    .verification-card:hover,
    .mission-preview:hover,
    .pillar-card:hover,
    .problem-card:hover,
    .solution-card:hover,
    .mobile-step:hover {
        transform: none;
        box-shadow: none;
        border-color: inherit !important;
    }

    .testimonial-card:hover .card-icon,
    .partner-card:hover .partner-icon,
    .verification-card:hover .verification-icon,
    .mission-preview:hover .coming-icon,
    .pillar-card:hover img,
    .problem-card:hover .card-icon,
    .solution-card:hover .card-icon,
    .mobile-step:hover img {
        transform: none;
    }
}

.stats-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 30px;
}

.stat-item {
    flex: 1;
}

@media (min-width: 769px) {
    .stats-grid .stat-item:first-child {
        margin-inline-start: -12px;
    }
}


.stat-item h3 {
    font-size: 34px;
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.stat-item p {
    font-size: 16px;
    color: #FFFFFF;
}

.count-number {
    display: inline-block;
    transition: transform 0.3s ease;
}

.stat-item:hover .count-number {
    transform: translateY(-4px);
    color: #C9A84C;
}

@media (max-width: 768px) {
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .stats-grid .stat-item:nth-child(odd) {
        margin-inline-start: 10px;
    }

    .stat-item:first-child h3,
    .stat-item:first-child p {
        margin-inline-start: 0;
    }

    .stat-item h3 {
        font-size: 20px;
    }

    .stat-item p {
        font-size: 10px;
    }
}



/* ===============================
   HERO TEXT ANIMATION
================================ */

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroFadeRight {
    from {
        opacity: 0;
        transform: translateX(-35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-content .arabic-title {
    opacity: 0;
    animation: heroFadeRight 0.8s ease forwards;
    animation-delay: 0.2s;
}

.hero-content h1 {
    opacity: 0;
    animation: heroFadeUp 0.9s ease forwards;
    animation-delay: 0.45s;
}

.hero-content p {
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards;
    animation-delay: 0.75s;
}

.hero-buttons {
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards;
    animation-delay: 1s;
}

.hero-content h1,
.hero-content p,
.hero-content .arabic-title,
.hero-buttons {
    will-change: transform, opacity;
}

.hero-buttons .primary-btn,
.hero-buttons .secondary-btn {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.hero-buttons .primary-btn:hover,
.hero-buttons .secondary-btn:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow:
        0 12px 30px rgba(201, 168, 76, 0.35),
        0 0 18px rgba(201, 168, 76, 0.25);
}

html[dir="rtl"] .hero-content .arabic-title {
    animation-name: heroFadeUp;
}

/* ===============================
   HEADER / NAVBAR ANIMATION
================================ */

@keyframes navbarDrop {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-24px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes navItemFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Whole navbar entrance */
.navbar {
    animation: navbarDrop 0.8s ease forwards;
}

/* Navbar inner items */
.logo,
.nav-links,
.nav-actions {
    opacity: 0;
    animation: navItemFade 0.6s ease forwards;
}

.logo {
    animation-delay: 0.25s;
}

.nav-links {
    animation-delay: 0.4s;
}

.nav-actions {
    animation-delay: 0.55s;
}

.nav-links a {
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
}

.nav-links a:hover {
    color: #D4AD4F;
    transform: translateY(-2px);
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;

    width: 0;
    height: 2px;

    background: #C9A84C;
    border-radius: 999px;

    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.navbar {
    transition:
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.navbar:hover {
    border-color: rgba(201, 168, 76, 0.45);
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.28),
        0 0 22px rgba(201, 168, 76, 0.18);
}

@media (max-width: 768px) {
    .navbar {
        animation: navbarDrop 0.7s ease forwards;
    }

    .nav-links,
    .nav-actions {
        animation: none;
    }

    .logo,
    .mobile-menu-btn {
        opacity: 0;
        animation: navItemFade 0.6s ease forwards;
    }

    .logo {
        animation-delay: 0.2s;
    }

    .mobile-menu-btn {
        animation-delay: 0.35s;
    }
}

/* ==========================================================================
   UNIFIED PREMIUM HOVER & GLOSS SHIMMER SWEEP FOR ALL MAIN CALL-TO-ACTIONS
   Matches the "Apply for Certification" button styling (.apply-btn)
   ========================================================================== */

/* Buttons that use position: relative for shimmer */
.login-btn,
.mobile-login-btn,
.verify-btn,
.primary-btn {
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s ease !important;
}

/* Floating scan btn keeps position: fixed — shimmer via overflow hidden only */
.floating-scan-btn {
    position: fixed !important;
    overflow: hidden !important;
    transition: all 0.4s ease !important;
}

.login-btn:hover,
.mobile-login-btn:hover,
.verify-btn:hover,
.primary-btn:hover,
.floating-scan-btn:hover {
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow:
        0 12px 30px rgba(201, 168, 76, 0.35),
        0 0 18px rgba(201, 168, 76, 0.25) !important;
    background: #D8B55A !important;
    border-color: #D8B55A !important;
}

/* Shimmer/Gloss sweeping element */
.login-btn::before,
.mobile-login-btn::before,
.verify-btn::before,
.primary-btn::before,
.floating-scan-btn::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 80% !important;
    height: 100% !important;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.45),
            transparent) !important;
    transform: skewX(-20deg) !important;
    transition: all 0.8s ease !important;
    z-index: 2 !important;
}

.login-btn:hover::before,
.mobile-login-btn:hover::before,
.verify-btn:hover::before,
.primary-btn:hover::before,
.floating-scan-btn:hover::before {
    left: 140% !important;
}

/* ================================
   PILLARS SECTION RESPONSIVE FIX
================================ */

.pillars-section {
    width: 100%;
    min-height: auto;
    background: #ffffff;
    color: #1A1A2E;
    padding: 90px 70px 80px;
    text-align: center;
}

.pillars-label {
    font-size: 13px;
    color: #6C6D77;
    margin-bottom: 12px;
}

.pillars-section h2 {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.45;
    margin-bottom: 55px;
    text-align: center;
    background: linear-gradient(90deg, #C9A84C 0%, #1A1A2E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pillars-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    align-items: stretch;
}

.pillar-card {
    padding: 40px 20px;
    text-align: center;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pillar-card img {
    width: 135px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 30px;
}

.pillar-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1A1A2E;
    margin-bottom: 16px;
}

.pillar-card p {
    max-width: 230px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.55;
    color: #1A1A2E;
}

/* Tablet */
@media (max-width: 900px) {
    .pillars-section {
        padding: 70px 24px;
    }

    .pillars-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 55px 35px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .pillars-section h2 {
        font-size: 16px;
    }

    .pillars-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .pillar-card img {
        width: 110px;
        height: 95px;
        margin-bottom: 18px;
    }

    .pillar-card p {
        max-width: 260px;
        font-size: 13px;
    }
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/* =====================================================
   FINAL FIX FOR 863px - 633px BREAKING ISSUE
   Navbar + Mission/Vision/Testimonial Cards
===================================================== */

/* Prevent horizontal page overflow */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

* {
    box-sizing: border-box;
}


/* =====================================================
   NAVBAR: SHOW MOBILE VIEW FROM 863px DOWN
===================================================== */

@media (max-width: 863px) {
    .navbar {
        position: fixed !important;
        top: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;

        width: calc(100% - 24px) !important;
        height: 54px !important;

        padding: 5px 14px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        background-image: url("../assets/BG img_hero.png") !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;

        border-radius: 999px !important;
        overflow: hidden !important;
        z-index: 9999 !important;
    }

    .navbar .logo img {
        width: 135px !important;
        height: auto !important;
        max-height: 40px !important;
        object-fit: contain !important;
    }

    .navbar .nav-links,
    .navbar .nav-actions {
        display: none !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 32px !important;
        height: 32px !important;

        background: transparent !important;
        border: none !important;

        color: #ffffff !important;
        font-size: 24px !important;
        cursor: pointer !important;
    }
}

/* =====================================================
   MISSION & VISION SECTION FIX
   This section uses testimonial classes
===================================================== */

/* Desktop safety */
.testimonials-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.testimonial-header,
.testimonial-grid {
    width: calc(100% - 80px) !important;
    max-width: 1124px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.testimonial-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;

    overflow: visible !important;
    padding-bottom: 0 !important;
}

.testimonial-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}


/* =====================================================
   Tablet: 2 cards per row
   864px to 1024px
===================================================== */

@media (max-width: 1024px) {
    .testimonials-section {
        padding: 70px 36px !important;
        min-height: auto !important;
    }

    .testimonial-header,
    .testimonial-grid {
        width: 100% !important;
        max-width: 100% !important;
    }

    .testimonial-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;

        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .testimonial-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 32px 26px !important;
        border-radius: 18px !important;
    }
}


/* =====================================================
   Large mobile / small tablet
   501px to 863px = still 2 columns
===================================================== */

@media (max-width: 863px) and (min-width: 501px) {
    .testimonials-section {
        padding: 55px 20px !important;
        min-height: auto !important;
    }

    .testimonial-header {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 35px !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;

        text-align: center !important;
    }

    .testimonial-header h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    .testimonial-header p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .testimonial-grid {
        width: 100% !important;
        max-width: 100% !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;

        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .testimonial-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 28px 20px !important;
        border-radius: 18px !important;
    }

    .testimonial-card p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    .testimonial-card .card-icon {
        margin-bottom: 14px !important;
    }
}


/* =====================================================
   Small mobile
   500px and below = 1 column
===================================================== */

@media (max-width: 500px) {
    .testimonials-section {
        padding: 45px 16px !important;
        min-height: auto !important;
    }

    .testimonial-header {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 28px !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;

        text-align: center !important;
    }

    .testimonial-header h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    .testimonial-header p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        max-width: 340px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .testimonial-grid {
        width: 100% !important;
        max-width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;

        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .testimonial-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 28px 20px !important;
        border-radius: 18px !important;
    }

    .testimonial-card p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .testimonial-card .card-icon {
        margin-bottom: 14px !important;
    }
}

/* =====================================================
   FLOATING SCAN BUTTON SAFETY
===================================================== */

@media (max-width: 863px) {
    .floating-scan-btn {
        right: 0 !important;
        transform: scale(1) !important;
        transform-origin: right bottom !important;
    }
}

@media (max-width: 480px) {
    .floating-scan-btn {
        transform: scale(0.9) !important;
    }
}

/* =====================================================
   FINAL NAVBAR RESPONSIVE FIX
   Desktop + Tablet + Mobile
===================================================== */

/* Prevent page overflow */
html,
body {
    overflow-x: hidden !important;
}

/* Desktop navbar safety */
.navbar {
    max-width: 1180px !important;
    width: calc(100% - 32px) !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 8px !important;
    overflow: hidden !important;
}

.logo {
    flex-shrink: 0 !important;
}

.logo img {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
}

.nav-links {
    display: flex !important;
    align-items: center !important;

    gap: clamp(6px, 1vw, 14px) !important;
    padding: 8px clamp(8px, 1vw, 16px) !important;

    min-width: 0 !important;
    flex-shrink: 1 !important;
}

.nav-links a {
    font-size: clamp(10px, 0.8vw, 12px) !important;
    white-space: nowrap !important;
}

.nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.login-btn {
    min-width: 120px !important;
    height: 44px !important;
    padding: 6px 6px 6px 14px !important;
    font-size: 12px !important;
}

.lang-toggle {
    height: 44px !important;
}

.lang-btn {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 12px !important;
}

.flag-icon {
    width: 30px !important;
    height: 30px !important;
}


/* =====================================================
   TABLET COMPRESSED NAVBAR
   864px to 1100px
===================================================== */

@media (min-width: 864px) and (max-width: 1100px) {
    .navbar {
        width: calc(100% - 20px) !important;
        height: 58px !important;
        padding: 5px 8px !important;
        gap: 5px !important;
    }

    .logo img {
        width: 115px !important;
        max-width: 115px !important;
        padding-left: 0 !important;
    }

    .nav-links {
        gap: 7px !important;
        padding: 6px 9px !important;
        height: 38px !important;
    }

    .nav-links a {
        font-size: 10px !important;
    }

    .nav-actions {
        gap: 5px !important;
    }

    .lang-toggle {
        height: 40px !important;
    }

    .lang-btn {
        padding-left: 7px !important;
        padding-right: 7px !important;
        font-size: 11px !important;
    }

    .flag-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .login-btn {
        min-width: 112px !important;
        height: 40px !important;
        padding: 5px 5px 5px 12px !important;
        font-size: 11px !important;
        gap: 6px !important;
    }

    .login-btn .btn-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .login-btn .btn-icon img {
        width: 20px !important;
        height: 20px !important;
    }
}


/* =====================================================
   MOBILE NAVBAR STARTS FROM 863px
===================================================== */

@media (max-width: 863px) {
    .navbar {
        position: fixed !important;
        top: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;

        width: calc(100% - 24px) !important;
        height: 54px !important;

        padding: 5px 14px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        border-radius: 999px !important;
        overflow: hidden !important;
        z-index: 9999 !important;
    }

    .navbar .logo img {
        width: 135px !important;
        max-width: 135px !important;
        height: auto !important;
        max-height: 40px !important;
        object-fit: contain !important;
    }

    .navbar .nav-links,
    .navbar .nav-actions {
        display: none !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 32px !important;
        height: 32px !important;

        background: transparent !important;
        border: none !important;

        color: #ffffff !important;
        font-size: 24px !important;
        cursor: pointer !important;
    }
}


/* Small mobile */
@media (max-width: 390px) {
    .navbar .logo img {
        width: 115px !important;
        max-width: 115px !important;
    }
}

/* =====================================================
   MOBILE MENU FIX FROM 863px DOWN
===================================================== */

@media (max-width: 863px) {

    .mobile-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100vh !important;

        z-index: 10000 !important;

        background: rgba(0, 0, 0, 0.96) !important;

        padding-top: 34px !important;

        transform: translateX(100%) !important;
        transition: transform 0.35s ease !important;
    }

    .mobile-menu.active {
        transform: translateX(0) !important;
    }

    .mobile-close {
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;

        width: 32px !important;
        height: 32px !important;

        border-radius: 50% !important;
        border: none !important;

        background: rgba(255, 255, 255, 0.15) !important;
        color: white !important;

        font-size: 20px !important;
        cursor: pointer !important;
    }

    .mobile-logo {
        width: 130px !important;
        margin-bottom: 36px !important;
        align-self: flex-start !important;
        margin-left: 22px !important;
    }

    .mobile-menu a {
        color: white !important;
        text-decoration: none !important;

        font-family: 'Poppins', sans-serif !important;
        font-size: 18px !important;
        font-weight: 400 !important;

        margin-top: 18px !important;
        margin-bottom: 18px !important;
    }

    .mobile-lang {
        margin-top: 6px !important;

        height: 42px !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        gap: 0 !important;

        background: rgba(8, 8, 16, 0.75) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 999px !important;

        overflow: hidden !important;
    }
}

/* =====================================================
   FINAL VERIFICATION INPUT RESPONSIVE FIX
   White rectangle + QR button + Verify button
===================================================== */

.verification-bottom {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    gap: 24px !important;

    padding: 35px 60px !important;
    box-sizing: border-box !important;
}

/* White input rectangle */
.verify-input-box {
    flex: 1 1 auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 80px !important;

    display: flex !important;
    align-items: center !important;

    background: #ffffff !important;
    border-radius: 24px !important;
    overflow: hidden !important;
}

/* Input field */
.verify-input-box input {
    flex: 1 1 auto !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 80px !important;

    border: none !important;
    outline: none !important;

    padding: 0 32px !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;

    color: #1A1A2E !important;
    background: transparent !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.verify-input-box input::placeholder {
    color: #7A7A7A !important;
}

/* QR icon side */
.qr-btn {
    width: 100px !important;
    height: 80px !important;

    flex: 0 0 100px !important;

    border: none !important;
    border-left: 1px solid rgba(0, 0, 0, 0.08) !important;

    background: transparent !important;

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

    cursor: pointer !important;
}

.qr-btn img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
}

/* Verify button */
.verify-btn {
    width: 210px !important;
    height: 80px !important;

    flex: 0 0 210px !important;

    border: none !important;
    border-radius: 24px !important;

    background: #C9A84C !important;
    color: #ffffff !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
}


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

@media (max-width: 1024px) {
    .verification-bottom {
        padding: 28px 36px !important;
        gap: 18px !important;
    }

    .verify-input-box {
        height: 72px !important;
        border-radius: 22px !important;
    }

    .verify-input-box input {
        height: 72px !important;
        font-size: 14px !important;
        padding: 0 24px !important;
    }

    .qr-btn {
        width: 78px !important;
        height: 72px !important;
        flex-basis: 78px !important;
    }

    .verify-btn {
        width: 180px !important;
        height: 72px !important;
        flex-basis: 180px !important;
        border-radius: 22px !important;
        font-size: 15px !important;
    }
}


/* =====================================================
   MOBILE VIEW FROM 863px DOWN
===================================================== */

@media (max-width: 863px) {
    .verification-bottom {
        flex-direction: column !important;

        width: 100% !important;

        padding: 22px 20px 28px !important;
        gap: 16px !important;
    }

    .verify-input-box {
        width: 100% !important;
        max-width: 100% !important;

        height: 70px !important;
        border-radius: 22px !important;
    }

    .verify-input-box input {
        height: 70px !important;

        font-size: 14px !important;
        padding: 0 18px !important;
    }

    .qr-btn {
        width: 72px !important;
        height: 70px !important;
        flex: 0 0 72px !important;
    }

    .qr-btn img {
        width: 26px !important;
        height: 26px !important;
    }

    .verify-btn {
        width: 100% !important;
        max-width: 100% !important;

        height: 60px !important;

        flex: none !important;

        border-radius: 22px !important;
        font-size: 15px !important;
    }
}


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

@media (max-width: 500px) {
    .verification-bottom {
        padding: 18px 16px 24px !important;
        gap: 14px !important;
    }

    .verify-input-box {
        height: 64px !important;
        border-radius: 20px !important;
    }

    .verify-input-box input {
        height: 64px !important;

        font-size: 12px !important;
        padding: 0 14px !important;
    }

    .qr-btn {
        width: 58px !important;
        height: 64px !important;
        flex: 0 0 58px !important;
    }

    .qr-btn img {
        width: 24px !important;
        height: 24px !important;
    }

    .verify-btn {
        height: 56px !important;
        border-radius: 20px !important;
        font-size: 14px !important;
    }
}



/* =====================================================
   PILLARS TABLET RESIZE ALIGNMENT FIX
   Fix spacing issue in 2-column view
===================================================== */

@media (max-width: 863px) and (min-width: 501px) {
    .pillars-section {
        padding: 45px 20px !important;
    }

    .pillars-section h2 {
        margin-bottom: 30px !important;
    }

    .pillars-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 24px !important;
        row-gap: 22px !important;
        align-items: start !important;
    }

    .pillar-card {
        padding: 12px 12px !important;
        min-height: auto !important;
        justify-content: flex-start !important;
    }

    .pillar-card img {
        width: 95px !important;
        height: 82px !important;
        object-fit: contain !important;
        margin-bottom: 8px !important;
    }

    .pillar-card h3 {
        font-size: 16px !important;
        margin-top: 0 !important;
        margin-bottom: 7px !important;
    }

    .pillar-card p {
        max-width: 240px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin: 0 auto !important;
    }

    .pillar-card:first-child {
        transform: none !important;
    }

    .pillar-card:first-child img,
    .pillar-card:first-child h3,
    .pillar-card:first-child p {
        transform: none !important;
    }
}

/* =====================================================
   FINAL PROBLEM / SOLUTION BULLET SPACING FIX
===================================================== */

/* Desktop + general fix */
.problem-card li,
.solution-card li,
.problem-list li,
.solution-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;

    line-height: 1.45 !important;
    margin-bottom: 20px !important;

    font-family: 'Poppins', sans-serif !important;
}

/* Prevent icons from moving/shrinking */
.problem-card li img,
.solution-card li img,
.problem-list li img,
.solution-list li img,
.problem-icon,
.solution-icon {
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    margin-top: 2px !important;
    object-fit: contain !important;
}

/* Paragraph spacing above bullet list */
.problem-card p,
.solution-card p {
    line-height: 1.65 !important;
    margin-bottom: 28px !important;
}


/* =====================================================
   TABLET VIEW
   501px to 863px
===================================================== */

@media (max-width: 863px) and (min-width: 501px) {

    .problem-card,
    .solution-card {
        padding: 32px 28px !important;
    }

    .problem-card li,
    .solution-card li,
    .problem-list li,
    .solution-list li {
        line-height: 1.55 !important;
        margin-bottom: 22px !important;
        gap: 11px !important;
        font-size: 15px !important;
    }

    .problem-card p,
    .solution-card p {
        line-height: 1.65 !important;
        margin-bottom: 26px !important;
        font-size: 15px !important;
    }

    .problem-card li img,
    .solution-card li img,
    .problem-icon,
    .solution-icon {
        width: 21px !important;
        height: 21px !important;
        margin-top: 3px !important;
    }
}


/* =====================================================
   SMALL MOBILE VIEW
   500px and below
===================================================== */

@media (max-width: 500px) {

    .problem-card,
    .solution-card {
        padding: 28px 22px !important;
    }

    .problem-card li,
    .solution-card li,
    .problem-list li,
    .solution-list li {
        line-height: 1.55 !important;
        margin-bottom: 18px !important;
        gap: 10px !important;
        font-size: 14px !important;
    }

    .problem-card p,
    .solution-card p {
        line-height: 1.6 !important;
        margin-bottom: 22px !important;
        font-size: 14px !important;
    }

    .problem-card li img,
    .solution-card li img,
    .problem-icon,
    .solution-icon {
        width: 20px !important;
        height: 20px !important;
        margin-top: 3px !important;
    }
}

/* =====================================================
   FIX VERIFY NOW BUTTON BECOMING SQUARE WHILE RESIZING
   Works from 900px down
===================================================== */

.verification-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
}

/* Make only this section's Verify button stable */
.verification-bottom .verify-btn {
    width: 210px !important;
    max-width: 210px !important;
    height: 80px !important;

    flex: 0 0 210px !important;

    border-radius: 24px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 24px !important;

    white-space: nowrap !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;

    background: #C9A84C !important;
    color: #ffffff !important;
}


/* Tablet */
@media (max-width: 1024px) {
    .verification-bottom {
        gap: 18px !important;
    }

    .verification-bottom .verify-btn {
        width: 180px !important;
        max-width: 180px !important;
        height: 72px !important;

        flex: 0 0 180px !important;

        border-radius: 22px !important;
        font-size: 15px !important;
    }
}


/* Mobile / resized view starts from 900px */
@media (max-width: 900px) {
    .verification-bottom {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;

        width: 100% !important;

        padding: 24px 22px 30px !important;
        gap: 16px !important;
    }

    .verification-bottom .verify-btn {
        width: 100% !important;
        max-width: 100% !important;
        height: 60px !important;

        flex: none !important;

        border-radius: 22px !important;
        padding: 0 20px !important;

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

        font-size: 15px !important;
        white-space: nowrap !important;
    }
}


/* Small mobile */
@media (max-width: 500px) {
    .verification-bottom {
        padding: 18px 16px 24px !important;
        gap: 14px !important;
    }

    .verification-bottom .verify-btn {
        height: 56px !important;
        border-radius: 20px !important;
        font-size: 14px !important;
    }
}