/* =========================================================
   VOXIN LANDING PAGE
   Main Stylesheet
========================================================= */

/* =========================
   ROOT
========================= */
:root {
    --bg-main: #06101f;
    --bg-secondary: #0a1628;
    --bg-card: rgba(13, 28, 49, 0.76);
    --bg-card-solid: #0d1b2e;

    --primary: #19c3ff;
    --primary-light: #5bd7ff;
    --primary-dark: #0d8fcc;

    --secondary: #5a68ff;
    --accent: #16e3c5;

    --text-main: #ffffff;
    --text-secondary: #aebed1;
    --text-muted: #72869d;

    --border: rgba(255, 255, 255, 0.1);

    --success: #35e6a5;

    --shadow-primary: 0 20px 60px rgba(0, 174, 255, 0.16);
    --shadow-card: 0 25px 80px rgba(0, 0, 0, 0.32);

    --container: 1220px;

    --radius-small: 12px;
    --radius-medium: 18px;
    --radius-large: 28px;

    --transition: 0.3s ease;
}


/* =========================
   RESET
========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Cairo", sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

html[dir="rtl"] body {
    font-family: "Cairo", sans-serif;
}

body::-webkit-scrollbar {
    width: 9px;
}

body::-webkit-scrollbar-track {
    background: #050c17;
}

body::-webkit-scrollbar-thumb {
    background: linear-gradient(
        var(--primary),
        var(--secondary)
    );
    border-radius: 20px;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
    outline: 0;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: min(92%, var(--container));
    margin-inline: auto;
}


/* =========================
   HEADER
========================= */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    border-bottom: 1px solid transparent;

    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.header.scrolled {
    background: rgba(5, 14, 27, 0.86);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    border-bottom-color: var(--border);

    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.22);
}

.nav-container {
    min-height: 86px;

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

    gap: 35px;
}


/* =========================
   LOGO
========================= */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    flex-shrink: 0;
}

.logo-icon {
    width: 100px;
    height: 100px;

    border-radius: 13px;

    display: grid;
    place-items: center;

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    box-shadow:
        0 10px 30px rgba(25, 195, 255, 0.24);
}

.logo-icon::before {
    content: "";
    position: absolute;

    width: 40px;
    height: 40px;

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

    border-radius: 50%;

    top: -24px;
    right: -18px;

    filter: blur(3px);
}

.logo-icon span {
    font-size: 21px;
    font-weight: 800;
    color: white;

    position: relative;
    z-index: 1;
}

.logo-text {
    font-size: 24px;
    font-weight: 800;

    letter-spacing: 2px;

    color: #ffffff;
}


/* =========================
   NAVIGATION
========================= */
.navbar {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 34px;
}

.nav-link {
    position: relative;

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

    color: var(--text-secondary);

    padding-block: 10px;

    transition: var(--transition);
}

.nav-link::after {
    content: "";

    position: absolute;

    bottom: 3px;
    left: 50%;

    width: 0;
    height: 2px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        var(--primary),
        var(--accent)
    );

    transform: translateX(-50%);

    transition: width var(--transition);
}

.nav-link:hover,
.nav-link.active {
    color: #fff;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 70%;
}


/* =========================
   NAV ACTIONS
========================= */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.language-switcher {
    height: 43px;
    padding-inline: 14px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    cursor: pointer;

    color: #ffffff;

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

    border: 1px solid var(--border);

    border-radius: 12px;

    transition: var(--transition);
}

.language-switcher:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(25, 195, 255, 0.3);
}

.language-switcher i {
    color: var(--primary);
}


/* =========================
   BUTTONS
========================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 46px;

    padding: 12px 20px;

    border-radius: 13px;

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

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition),
        border-color var(--transition);

    cursor: pointer;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    color: #03101d;

    background:
        linear-gradient(
            135deg,
            #38d1ff,
            #36b8ff
        );

    box-shadow:
        0 12px 30px rgba(25, 195, 255, 0.2);
}

.btn-primary:hover {
    box-shadow:
        0 16px 40px rgba(25, 195, 255, 0.34);
}

.btn-primary i {
    font-size: 12px;

    transition: transform var(--transition);
}

.btn-primary:hover i {
    transform: translateX(4px);
}

html[dir="rtl"] .btn-primary:hover i {
    transform: translateX(-4px);
}

html[dir="rtl"] .btn-primary i {
    transform: rotate(180deg);
}

.btn-outline {
    color: white;

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

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

    backdrop-filter: blur(10px);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(25, 195, 255, 0.35);
}

.btn-large {
    min-height: 55px;

    padding-inline: 25px;

    border-radius: 14px;
}


/* =========================
   MOBILE MENU BUTTON
========================= */
.menu-toggle {
    display: none;

    width: 43px;
    height: 43px;

    border-radius: 11px;

    cursor: pointer;

    color: white;

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

    border: 1px solid var(--border);

    font-size: 18px;
}


/* =========================
   HERO
========================= */
.hero {
    min-height: 100vh;

    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding:
        150px 0
        90px;

    background:
        radial-gradient(
            circle at 75% 42%,
            rgba(15, 139, 220, 0.14),
            transparent 35%
        ),
        linear-gradient(
            120deg,
            #06101f,
            #071526 60%,
            #06101f
        );
}

.hero-bg {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.hero-grid {
    position: absolute;
    inset: 0;

    opacity: 0.3;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );
}

.hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    opacity: 0.2;
}

.glow-one {
    width: 500px;
    height: 500px;

    background: var(--primary);

    top: 6%;
    right: 8%;
}

.glow-two {
    width: 400px;
    height: 400px;

    background: var(--secondary);

    bottom: -15%;
    left: 10%;
}


/* =========================
   HERO CONTAINER
========================= */
.hero-container {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 80px;
}


/* =========================
   HERO CONTENT
========================= */
.hero-content {
    max-width: 690px;
}

.hero-badge {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 8px 14px;

    border-radius: 100px;

    background: rgba(25, 195, 255, 0.07);

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

    color: #c5eefd;

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

    margin-bottom: 25px;
}

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

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 0 5px rgba(22, 227, 197, 0.08),
        0 0 16px rgba(22, 227, 197, 0.5);
}

.hero-title {
    display: flex;
    flex-direction: column;

    font-size: clamp(43px, 5vw, 67px);

    line-height: 1.07;

    letter-spacing: -2.7px;

    font-weight: 800;

    margin-bottom: 24px;
}

html[dir="rtl"] .hero-title {
    letter-spacing: 0;
    line-height: 1.18;
}

.gradient-text {
    width: fit-content;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--primary-light),
            #6dbaff,
            #9d8cff
        );

    background-clip: text;
    -webkit-background-clip: text;
}

html[dir="rtl"] .gradient-text {
    margin-left: auto;
}

.hero-description {
    max-width: 650px;

    color: var(--text-secondary);

    font-size: 16px;
    line-height: 1.85;

    margin-bottom: 31px;
}

html[dir="rtl"] .hero-description {
    line-height: 2;
}


/* =========================
   HERO BUTTONS
========================= */
.hero-buttons {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 40px;
}


/* =========================
   HERO TRUST
========================= */
.hero-trust {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 18px;
}

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

    gap: 10px;
}

.trust-icon {
    width: 38px;
    height: 38px;

    border-radius: 11px;

    display: grid;
    place-items: center;

    background: rgba(25, 195, 255, 0.08);

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

    color: var(--primary);

    font-size: 14px;
}

.trust-item > div:last-child {
    display: flex;
    flex-direction: column;
}

.trust-item strong {
    color: white;

    font-size: 13px;

    line-height: 1.25;
}

.trust-item span {
    color: var(--text-muted);

    font-size: 10px;

    white-space: nowrap;
}

.trust-divider {
    width: 1px;
    height: 29px;

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


/* =========================
   HERO VISUAL
========================= */
.hero-visual {
    min-height: 590px;

    position: relative;

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


/* =========================
   ORBITS
========================= */
.visual-orbit {
    position: absolute;

    border-radius: 50%;

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

    animation: orbitPulse 5s ease-in-out infinite;
}

.orbit-one {
    width: 540px;
    height: 540px;
}

.orbit-two {
    width: 410px;
    height: 410px;

    border-color: rgba(107, 104, 255, 0.09);

    animation-delay: 1s;
}

@keyframes orbitPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.035);
        opacity: 1;
    }
}


/* =========================
   DASHBOARD CARD
========================= */
.dashboard-card {
    position: relative;
    z-index: 4;

    width: min(100%, 470px);

    padding: 25px;

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 39, 65, 0.92),
            rgba(7, 21, 39, 0.88)
        );

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

    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.4),
        0 0 80px rgba(25, 195, 255, 0.07);

    backdrop-filter: blur(24px);

    transform:
        perspective(1000px)
        rotateY(-5deg)
        rotateX(2deg);

    transition: transform 0.5s ease;
}

.hero-visual:hover .dashboard-card {
    transform:
        perspective(1000px)
        rotateY(0)
        rotateX(0)
        translateY(-5px);
}

html[dir="rtl"] .dashboard-card {
    transform:
        perspective(1000px)
        rotateY(5deg)
        rotateX(2deg);
}


/* =========================
   DASHBOARD HEADER
========================= */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;

    margin-bottom: 24px;
}

.small-label {
    display: block;

    margin-bottom: 5px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.7px;

    color: var(--primary);
}

.dashboard-header h3 {
    font-size: 18px;
    font-weight: 700;
}

.live-status {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 6px 9px;

    border-radius: 8px;

    border: 1px solid rgba(53, 230, 165, 0.15);

    background: rgba(53, 230, 165, 0.06);
}

.live-status span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--success);

    box-shadow:
        0 0 10px rgba(53, 230, 165, 0.8);

    animation: liveBlink 1.5s infinite;
}

.live-status small {
    color: #7df0c1;

    font-size: 9px;
    font-weight: 700;
}

@keyframes liveBlink {
    50% {
        opacity: 0.4;
    }
}


/* =========================
   DASHBOARD STATS
========================= */
.dashboard-stats {
    display: grid;

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

    gap: 12px;

    margin-bottom: 14px;
}

.stat-card {
    padding: 15px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-radius: 15px;

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

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

    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-2px);

    border-color: rgba(25, 195, 255, 0.18);

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

.stat-icon {
    width: 39px;
    height: 39px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(25, 195, 255, 0.15),
            rgba(90, 104, 255, 0.14)
        );

    color: var(--primary);

    font-size: 14px;
}

.stat-card > div:last-child {
    display: flex;
    flex-direction: column;
}

.stat-card span {
    color: var(--text-muted);

    font-size: 9px;
}

.stat-card strong {
    font-size: 20px;
    line-height: 1.4;
}


/* =========================
   PERFORMANCE CARD
========================= */
.performance-card {
    padding: 15px;

    border-radius: 15px;

    background:
        linear-gradient(
            90deg,
            rgba(25, 195, 255, 0.055),
            rgba(90, 104, 255, 0.045)
        );

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

    margin-bottom: 14px;
}

.performance-top {
    display: flex;

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

    gap: 20px;

    margin-bottom: 10px;
}

.performance-top span {
    color: var(--text-secondary);

    font-size: 10px;
}

.performance-top strong {
    color: var(--primary-light);

    font-size: 15px;
}

.progress-track {
    height: 6px;

    width: 100%;

    overflow: hidden;

    border-radius: 100px;

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

.progress-bar {
    width: 94%;
    height: 100%;

    border-radius: 100px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--accent)
        );

    position: relative;
}

.progress-bar::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #ffffff;

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

    box-shadow:
        0 0 14px rgba(25, 195, 255, 0.8);
}


/* =========================
   CHART
========================= */
.chart-card {
    padding: 16px;

    border-radius: 16px;

    background: rgba(4, 14, 27, 0.5);

    border: 1px solid rgba(255, 255, 255, 0.065);
}

.chart-header {
    display: flex;

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

    margin-bottom: 15px;

    color: var(--text-secondary);

    font-size: 10px;
}

.positive {
    color: var(--success);
    font-weight: 700;
}

.bars {
    height: 100px;

    display: flex;
    align-items: flex-end;

    gap: 7px;

    padding-top: 10px;
}

.bars span {
    flex: 1;

    min-width: 5px;

    border-radius: 4px 4px 1px 1px;

    background:
        linear-gradient(
            to top,
            rgba(25, 195, 255, 0.22),
            rgba(25, 195, 255, 0.9)
        );

    transition:
        height 0.5s ease,
        filter var(--transition);
}

.bars span:nth-child(even) {
    background:
        linear-gradient(
            to top,
            rgba(90, 104, 255, 0.18),
            rgba(90, 104, 255, 0.85)
        );
}

.bars span:hover {
    filter: brightness(1.3);
}


/* =========================
   FLOATING CARDS
========================= */
.floating-card {
    position: absolute;

    z-index: 6;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 13px 15px;

    border-radius: 14px;

    background: rgba(13, 30, 51, 0.82);

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

    backdrop-filter: blur(18px);

    box-shadow:
        0 17px 50px rgba(0, 0, 0, 0.32);

    animation: floatCard 4s ease-in-out infinite;
}

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

    border-radius: 10px;

    display: grid;
    place-items: center;

    color: #06121e;

    background: var(--primary);

    font-size: 13px;
}

.ai-icon {
    background:
        linear-gradient(
            135deg,
            var(--secondary),
            #b376ff
        );

    color: white;
}

.floating-card > div:last-child {
    display: flex;
    flex-direction: column;
}

.floating-card small {
    font-size: 8px;

    color: var(--text-muted);
}

.floating-card strong {
    color: white;

    font-size: 12px;
}

.floating-call {
    left: -15px;
    top: 26%;
}

.floating-ai {
    right: -20px;
    bottom: 20%;

    animation-delay: 1.4s;
}

@keyframes floatCard {
    0%,
    100% {
        transform: translateY(0);
    }

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


/* =========================
   SCROLL DOWN
========================= */
.scroll-down {
    position: absolute;

    left: 50%;
    bottom: 25px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--text-muted);

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

    transition: var(--transition);
}

.scroll-down:hover {
    color: var(--primary);
}

.scroll-down i {
    font-size: 9px;

    animation: scrollArrow 1.7s ease-in-out infinite;
}

@keyframes scrollArrow {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}


/* =========================
   PLACEHOLDER SECTIONS
========================= */
.section-placeholder {
    min-height: 500px;

    display: flex;
    align-items: center;

    padding: 110px 0;

    background: #f7f9fc;

    color: #071426;
}

.dark-placeholder {
    background: var(--bg-secondary);

    color: white;
}

.section-tag {
    display: block;

    margin-bottom: 13px;

    color: var(--primary-dark);

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

    letter-spacing: 2px;
}

.dark-placeholder .section-tag {
    color: var(--primary);
}

.section-placeholder h2 {
    max-width: 800px;

    font-size: clamp(35px, 4vw, 55px);

    line-height: 1.15;

    letter-spacing: -1.7px;
}

html[dir="rtl"] .section-placeholder h2 {
    letter-spacing: 0;
    line-height: 1.35;
}


/* =========================================================
   RESPONSIVE
========================================================= */


/* =========================
   1150
========================= */
@media (max-width: 1150px) {

    .navbar {
        gap: 20px;
    }

    .nav-link {
        font-size: 13px;
    }

    .hero-container {
        gap: 45px;
    }

    .hero-title {
        font-size: clamp(42px, 5vw, 57px);
    }

    .dashboard-card {
        width: 430px;
    }

    .floating-call {
        left: -5px;
    }

    .floating-ai {
        right: -5px;
    }
}


/* =========================
   980
========================= */
@media (max-width: 980px) {

    .nav-cta {
        display: none;
    }

    .navbar {
        position: fixed;

        top: 76px;
        left: 4%;
        right: 4%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 5px;

        padding: 16px;

        border-radius: 18px;

        background: rgba(7, 19, 35, 0.96);

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

        backdrop-filter: blur(25px);

        box-shadow:
            0 25px 60px rgba(0,0,0,0.35);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-12px);

        transition: var(--transition);
    }

    .navbar.active {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }

    .nav-link {
        width: 100%;

        padding: 13px 16px;

        border-radius: 10px;
    }

    .nav-link:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .nav-link::after {
        display: none;
    }

    .menu-toggle {
        display: grid;
        place-items: center;
    }

    .hero {
        padding-top: 135px;
    }

    .hero-container {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .hero-content {
        max-width: 760px;

        margin-inline: auto;
    }

    .hero-badge {
        margin-inline: auto;
    }

    .gradient-text {
        margin-inline: auto;
    }

    .hero-description {
        margin-inline: auto;
    }

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

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

    .hero-visual {
        margin-top: 25px;

        min-height: 560px;
    }

    .dashboard-card {
        width: min(88%, 500px);

        transform: none;
    }

    html[dir="rtl"] .dashboard-card {
        transform: none;
    }

    .floating-call {
        left: 7%;
    }

    .floating-ai {
        right: 6%;
    }

    .scroll-down {
        display: none;
    }
}


/* =========================
   650
========================= */
@media (max-width: 650px) {

    .nav-container {
        min-height: 75px;
    }

    .logo-icon {
        width: 38px;
        height: 38px;
    }

    .logo-text {
        font-size: 20px;
    }

    .language-switcher {
        height: 40px;

        padding-inline: 11px;
    }

    .menu-toggle {
        width: 40px;
        height: 40px;
    }

    .hero {
        min-height: auto;

        padding:
            125px 0
            65px;
    }

    .hero-container {
        gap: 50px;
    }

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

        text-align: start;
    }

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

        line-height: 1.08;

        letter-spacing: -1.7px;
    }

    html[dir="rtl"] .hero-title {
        font-size: 39px;
    }

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

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-trust {
        gap: 12px;
    }

    .trust-divider {
        display: none;
    }

    .trust-item {
        flex: 1 1 30%;

        min-width: 95px;

        flex-direction: column;

        text-align: center;
    }

    .trust-item span {
        white-space: normal;
    }

    .hero-visual {
        min-height: 480px;

        margin-top: 0;
    }

    .dashboard-card {
        width: 100%;

        padding: 17px;

        border-radius: 22px;
    }

    .dashboard-stats {
        gap: 8px;
    }

    .stat-card {
        padding: 11px;

        gap: 8px;
    }

    .stat-icon {
        width: 32px;
        height: 32px;

        font-size: 11px;
    }

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

    .stat-card strong {
        font-size: 17px;
    }

    .floating-card {
        padding: 9px 10px;
    }

    .floating-icon {
        width: 29px;
        height: 29px;
    }

    .floating-call {
        top: -5px;
        left: 5px;
    }

    .floating-ai {
        right: 4px;
        bottom: 4px;
    }

    .bars {
        height: 75px;
    }

    .section-placeholder {
        min-height: 350px;

        padding: 80px 0;
    }

    .section-placeholder h2 {
        font-size: 35px;
    }
}


/* =========================
   420
========================= */
@media (max-width: 420px) {

    .nav-actions {
        gap: 7px;
    }

    .language-switcher span {
        font-size: 12px;
    }

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

    html[dir="rtl"] .hero-title {
        font-size: 34px;
    }

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

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

    .floating-card {
        display: none;
    }
}
.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-image {
    width: auto;
    height: 52px;
    object-fit: contain;
    display: block;
    transition: 0.3s ease;
}

.logo:hover .logo-image {
    transform: scale(1.03);
}

@media (max-width: 650px) {
    .logo-image {
        height: 43px;
    }
}
/* =========================================================
   NAVBAR THEME ON LIGHT SECTIONS
========================================================= */

.header.light-nav {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    border-bottom: 1px solid rgba(5, 20, 40, 0.08);

    box-shadow:
        0 10px 40px rgba(5, 20, 40, 0.08);
}


/* Navigation links */
.header.light-nav .nav-link {
    color: #55677b;
}

.header.light-nav .nav-link:hover,
.header.light-nav .nav-link.active {
    color: #071426;
}


/* Active line */
.header.light-nav .nav-link::after {
    background: linear-gradient(
        90deg,
        #0d8fcc,
        #19c3ff
    );
}


/* Language Button */
.header.light-nav .language-switcher {
    color: #071426;

    background: rgba(7, 20, 38, 0.04);

    border-color: rgba(7, 20, 38, 0.1);
}

.header.light-nav .language-switcher:hover {
    background: rgba(7, 20, 38, 0.07);

    border-color: rgba(13, 143, 204, 0.25);
}


/* Mobile menu button */
.header.light-nav .menu-toggle {
    color: #071426;

    background: rgba(7, 20, 38, 0.05);

    border-color: rgba(7, 20, 38, 0.1);
}


/* Mobile Navbar */
@media (max-width: 980px) {

    .header.light-nav .navbar {
        background: rgba(255, 255, 255, 0.98);

        border-color: rgba(7, 20, 38, 0.08);

        box-shadow:
            0 25px 60px rgba(7, 20, 38, 0.12);
    }

    .header.light-nav .nav-link {
        color: #526477;
    }

    .header.light-nav .nav-link:hover {
        color: #071426;

        background: rgba(7, 20, 38, 0.045);
    }
}
/* =========================================================
   ABOUT SECTION
========================================================= */

.about-section {
    position: relative;
    overflow: hidden;

    padding: 130px 0;

    background:
        radial-gradient(
            circle at 85% 40%,
            rgba(25, 195, 255, 0.08),
            transparent 30%
        ),
        #f7f9fc;

    color: #071426;
}

.about-container {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 90px;
}

.section-label {
    display: inline-flex;

    margin-bottom: 18px;

    color: #0d8fcc;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2.5px;
}

.section-title {
    display: flex;
    flex-direction: column;

    font-size: clamp(38px, 4.4vw, 58px);

    line-height: 1.12;

    letter-spacing: -2px;

    margin-bottom: 28px;
}

.dark-title {
    color: #071426;
}

.text-blue {
    color: #0d8fcc;
}

html[dir="rtl"] .section-title {
    letter-spacing: 0;
    line-height: 1.3;
}

.about-text {
    max-width: 650px;

    margin-bottom: 18px;

    color: #657488;

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

html[dir="rtl"] .about-text {
    line-height: 2;
}


/* ABOUT VISUAL */

.about-visual {
    min-height: 500px;

    position: relative;

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

.about-visual-bg {
    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(25, 195, 255, 0.14),
            rgba(90, 104, 255, 0.05),
            transparent 68%
        );
}

.about-main-card {
    width: min(100%, 480px);

    position: relative;
    z-index: 2;

    padding: 24px;

    border-radius: 25px;

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

    border: 1px solid rgba(7, 20, 38, 0.08);

    box-shadow:
        0 35px 80px rgba(17, 45, 77, 0.12);

    backdrop-filter: blur(20px);
}

.about-card-header {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 22px;

    font-weight: 700;
}

.about-card-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #19c3ff,
            #536eff
        );

    box-shadow:
        0 12px 30px rgba(25, 195, 255, 0.2);
}

.about-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 12px;
}

.about-mini-card {
    min-height: 155px;

    display: flex;
    flex-direction: column;

    padding: 17px;

    border-radius: 16px;

    background: #f7f9fc;

    border: 1px solid rgba(7, 20, 38, 0.06);

    transition: 0.3s ease;
}

.about-mini-card:hover {
    transform: translateY(-5px);

    background: #ffffff;

    box-shadow:
        0 18px 35px rgba(17, 45, 77, 0.09);
}

.about-mini-card i {
    margin-bottom: 19px;

    color: #0d8fcc;

    font-size: 20px;
}

.about-mini-card strong {
    margin-bottom: 6px;

    color: #071426;

    font-size: 13px;
}

.about-mini-card span {
    color: #7a899b;

    font-size: 10px;
    line-height: 1.7;
}


/* FLOATING ABOUT */

.about-floating-box {
    position: absolute;

    z-index: 5;

    right: -20px;
    bottom: 40px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 13px 17px;

    border-radius: 15px;

    background: #071426;

    box-shadow:
        0 18px 45px rgba(7, 20, 38, 0.22);

    animation: floatAbout 4s ease-in-out infinite;
}

.floating-check {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #16e3c5;

    color: #071426;

    font-size: 12px;
}

.about-floating-box > div:last-child {
    display: flex;
    flex-direction: column;
}

.about-floating-box strong {
    color: white;

    font-size: 11px;
}

.about-floating-box span {
    color: #8191a6;

    font-size: 8px;
}

@keyframes floatAbout {

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

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


/* =========================================================
   OPERATIONS SECTION
========================================================= */

.operations-section {
    position: relative;

    overflow: hidden;

    padding: 140px 0;

    background:
        linear-gradient(
            115deg,
            #06101f,
            #091b31
        );
}

.operations-bg {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.operations-grid {
    position: absolute;
    inset: 0;

    opacity: 0.28;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
}

.operations-glow {
    position: absolute;

    width: 600px;
    height: 600px;

    left: -10%;
    top: 5%;

    border-radius: 50%;

    background: rgba(25, 195, 255, 0.1);

    filter: blur(100px);
}

.operations-container {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 100px;
}


/* OPERATIONS VISUAL */

.operations-visual {
    position: relative;

    min-height: 520px;

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

.operations-center {
    position: relative;
    z-index: 5;

    width: 185px;
    height: 185px;

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

    text-align: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(19, 43, 71, 0.95),
            rgba(6, 17, 32, 0.95)
        );

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

    box-shadow:
        0 0 0 25px rgba(25, 195, 255, 0.025),
        0 0 0 50px rgba(25, 195, 255, 0.015),
        0 25px 70px rgba(0, 0, 0, 0.35);
}

.operations-logo {
    margin-bottom: 7px;

    color: #ffffff;

    font-size: 28px;
    font-weight: 800;

    letter-spacing: 3px;
}

.operations-center span {
    max-width: 110px;

    color: #8196ad;

    font-size: 9px;
}


/* NODES */

.operation-node {
    position: absolute;

    z-index: 6;

    min-width: 135px;

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

    gap: 8px;

    padding: 14px;

    border-radius: 15px;

    background: rgba(13, 30, 51, 0.9);

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

    box-shadow:
        0 18px 40px rgba(0,0,0,0.25);
}

.node-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: #06101f;

    background: #19c3ff;

    font-size: 13px;
}

.operation-node span {
    color: #c1ccda;

    font-size: 10px;
    font-weight: 600;
}

.node-support {
    top: 3%;
    left: 50%;

    transform: translateX(-50%);
}

.node-sales {
    right: 0;
    top: 50%;

    transform: translateY(-50%);
}

.node-backoffice {
    bottom: 3%;
    left: 50%;

    transform: translateX(-50%);
}

.node-tech {
    left: 0;
    top: 50%;

    transform: translateY(-50%);
}


/* CONNECTORS */

.connector-line {
    position: absolute;

    z-index: 1;

    opacity: 0.45;

    background:
        linear-gradient(
            90deg,
            transparent,
            #19c3ff,
            transparent
        );
}

.line-one,
.line-three {
    width: 2px;
    height: 110px;

    left: 50%;
}

.line-one {
    top: 20%;
}

.line-three {
    bottom: 20%;
}

.line-two,
.line-four {
    width: 115px;
    height: 2px;

    top: 50%;
}

.line-two {
    right: 20%;
}

.line-four {
    left: 20%;
}


/* OPERATIONS CONTENT */

.light-label {
    color: #46d3ff;
}

.operations-text {
    max-width: 620px;

    margin-bottom: 18px;

    color: #a9b8ca;

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

html[dir="rtl"] .operations-text {
    line-height: 2;
}

.operations-highlight {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    margin: 30px 0;

    padding: 18px;

    border-radius: 16px;

    background:
        linear-gradient(
            90deg,
            rgba(25, 195, 255, 0.07),
            rgba(90, 104, 255, 0.05)
        );

    border: 1px solid rgba(25, 195, 255, 0.1);
}

.highlight-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #19c3ff;

    color: #06101f;

    font-size: 13px;
}

.operations-highlight p {
    color: #becadb;

    font-size: 12px;
    line-height: 1.8;
}


/* =========================================================
   ABOUT + OPERATIONS RESPONSIVE
========================================================= */

@media (max-width: 980px) {

    .about-container,
    .operations-container {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .about-content,
    .operations-content {
        text-align: center;
    }

    .about-text,
    .operations-text {
        margin-inline: auto;
    }

    .section-label {
        justify-content: center;
    }

    .operations-visual {
        order: 2;
    }

    .operations-content {
        order: 1;
    }

    .operations-highlight {
        max-width: 700px;

        margin-inline: auto;
        margin-bottom: 30px;

        text-align: start;
    }

}

@media (max-width: 650px) {

    .about-section,
    .operations-section {
        padding: 90px 0;
    }

    .about-visual {
        min-height: 460px;
    }

    .about-main-card {
        padding: 17px;
    }

    .about-card-grid {
        gap: 8px;
    }

    .about-mini-card {
        min-height: 140px;

        padding: 13px;
    }

    .about-floating-box {
        right: 5px;
        bottom: 0;
    }

    .operations-visual {
        min-height: 450px;

        transform: scale(0.88);
    }

}

@media (max-width: 480px) {

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

    .about-visual {
        min-height: 650px;
    }

    .about-floating-box {
        display: none;
    }

    .operations-visual {
        min-height: 420px;

        transform: scale(0.72);
    }

}
/* =========================================================
   WHAT WE OFFER
========================================================= */

.offer-section {
    position: relative;
    overflow: hidden;

    padding: 135px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6f9fc 100%
        );

    color: #071426;
}


/* =========================================================
   BACKGROUND
========================================================= */

.offer-background {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.offer-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);
}


.offer-glow-one {
    width: 500px;
    height: 500px;

    top: -180px;
    right: -120px;

    background:
        rgba(25, 195, 255, 0.09);
}


.offer-glow-two {
    width: 480px;
    height: 480px;

    bottom: -200px;
    left: -180px;

    background:
        rgba(90, 104, 255, 0.07);
}


.offer-pattern {
    position: absolute;
    inset: 0;

    opacity: 0.35;

    background-image:
        radial-gradient(
            rgba(7, 20, 38, 0.09) 0.7px,
            transparent 0.7px
        );

    background-size: 25px 25px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 85%,
            transparent
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.offer-container {
    position: relative;
    z-index: 2;
}


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

.offer-header {
    max-width: 780px;

    margin:
        0 auto
        65px;

    text-align: center;
}


.offer-header .section-label {
    justify-content: center;
}


.offer-title {
    display: flex;
    flex-direction: column;

    margin-bottom: 24px;

    color: #071426;

    font-size:
        clamp(
            40px,
            4.6vw,
            62px
        );

    font-weight: 800;

    letter-spacing: -2.4px;

    line-height: 1.08;
}


html[dir="rtl"] .offer-title {
    letter-spacing: 0;

    line-height: 1.25;
}


.offer-description {
    max-width: 730px;

    margin:
        0 auto
        12px;

    color: #65758a;

    font-size: 15px;

    line-height: 1.9;
}


.secondary-description {
    color: #8794a5;
}


html[dir="rtl"] .offer-description {
    line-height: 2;
}


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

.offer-grid {
    display: grid;

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

    gap: 18px;
}


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

.offer-card {
    min-height: 340px;

    position: relative;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    padding: 31px;

    border-radius: 24px;

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

    border:
        1px solid
        rgba(7, 20, 38, 0.075);

    box-shadow:
        0 20px 60px
        rgba(25, 55, 86, 0.06);

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


.offer-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(25, 195, 255, 0.25);

    background: #ffffff;

    box-shadow:
        0 32px 70px
        rgba(22, 54, 88, 0.12);
}


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

.offer-card-featured {
    background:
        linear-gradient(
            145deg,
            #071426,
            #0a1c31
        );

    border-color:
        rgba(25, 195, 255, 0.15);

    box-shadow:
        0 30px 80px
        rgba(7, 20, 38, 0.17);
}


.offer-card-featured:hover {
    background:
        linear-gradient(
            145deg,
            #08182b,
            #0b213a
        );

    border-color:
        rgba(25, 195, 255, 0.3);
}


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

.offer-card-number {
    position: absolute;

    right: 26px;
    top: 24px;

    color:
        rgba(7, 20, 38, 0.09);

    font-size: 43px;
    font-weight: 800;

    letter-spacing: -2px;

    line-height: 1;
}


.offer-card-featured .offer-card-number {
    color:
        rgba(255, 255, 255, 0.07);
}


html[dir="rtl"] .offer-card-number {
    right: auto;
    left: 26px;
}


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

.offer-icon {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    margin-bottom: 45px;

    border-radius: 16px;

    color: #0b759e;

    background:
        linear-gradient(
            135deg,
            rgba(25, 195, 255, 0.13),
            rgba(90, 104, 255, 0.08)
        );

    border:
        1px solid
        rgba(25, 195, 255, 0.13);

    font-size: 20px;

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        color 0.4s ease;
}


.offer-card:hover .offer-icon {
    transform:
        translateY(-3px)
        rotate(-3deg);

    color: #06101f;

    background:
        linear-gradient(
            135deg,
            #4fd5ff,
            #23baff
        );
}


.offer-card-featured .offer-icon {
    color: #06101f;

    background:
        linear-gradient(
            135deg,
            #43d4ff,
            #47baff
        );

    border-color:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 15px 35px
        rgba(25, 195, 255, 0.17);
}


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

.offer-card-content {
    position: relative;
    z-index: 3;

    max-width: 510px;
}


.offer-category {
    display: block;

    margin-bottom: 9px;

    color: #0d8fcc;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.7px;
}


.offer-card-featured .offer-category {
    color: #50d8ff;
}


.offer-card h3 {
    margin-bottom: 14px;

    color: #071426;

    font-size: 25px;
    font-weight: 750;

    letter-spacing: -0.8px;

    line-height: 1.3;
}


.offer-card-featured h3 {
    color: #ffffff;
}


html[dir="rtl"] .offer-card h3 {
    letter-spacing: 0;

    line-height: 1.45;
}


.offer-card p {
    max-width: 510px;

    color: #748397;

    font-size: 13px;

    line-height: 1.85;
}


.offer-card-featured p {
    color: #9cadc1;
}


html[dir="rtl"] .offer-card p {
    line-height: 2;
}


/* =========================================================
   ARROW
========================================================= */

.offer-arrow {
    position: absolute;

    right: 27px;
    bottom: 27px;

    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: #8391a3;

    background:
        rgba(7, 20, 38, 0.035);

    border:
        1px solid
        rgba(7, 20, 38, 0.07);

    font-size: 10px;

    transition:
        0.35s ease;
}


.offer-card:hover .offer-arrow {
    color: #06101f;

    background: #48d3ff;

    border-color: #48d3ff;

    transform:
        translate(3px, -3px);
}


.offer-card-featured .offer-arrow {
    color: #9fb1c4;

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

    border-color:
        rgba(255, 255, 255, 0.08);
}


html[dir="rtl"] .offer-arrow {
    right: auto;
    left: 27px;
}


/* =========================================================
   FEATURED DECORATION
========================================================= */

.offer-card-decoration {
    position: absolute;

    width: 260px;
    height: 260px;

    right: -90px;
    bottom: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(25, 195, 255, 0.12),
            transparent 68%
        );

    pointer-events: none;
}


html[dir="rtl"] .offer-card-decoration {
    right: auto;
    left: -90px;
}


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

.offer-card-wide {
    grid-column:
        1 / -1;

    min-height: 300px;

    display: grid;

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

    align-items: center;

    gap: 55px;
}


.offer-card-wide .offer-icon {
    margin-bottom: 25px;
}


/* =========================================================
   DATA VISUAL
========================================================= */

.offer-data-visual {
    width: 100%;

    position: relative;
    z-index: 3;

    padding: 21px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #09192b,
            #0c2239
        );

    border:
        1px solid
        rgba(25, 195, 255, 0.1);

    box-shadow:
        0 20px 50px
        rgba(7, 20, 38, 0.14);
}


.data-visual-top {
    display: flex;

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

    gap: 20px;

    margin-bottom: 22px;

    color: #8ea2b8;

    font-size: 10px;
}


.data-visual-top strong {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    color: #06101f;

    background: #40d3ff;

    font-size: 9px;
}


.offer-mini-chart {
    height: 100px;

    display: flex;

    align-items: flex-end;

    gap: 8px;
}


.offer-mini-chart span {
    flex: 1;

    min-width: 8px;

    border-radius:
        5px 5px
        2px 2px;

    background:
        linear-gradient(
            to top,
            rgba(25, 195, 255, 0.22),
            #35caff
        );

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


.offer-mini-chart span:nth-child(even) {
    background:
        linear-gradient(
            to top,
            rgba(90, 104, 255, 0.2),
            #6977ff
        );
}


.offer-mini-chart span:hover {
    transform:
        scaleY(1.05);

    filter:
        brightness(1.2);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.offer-bottom {
    margin-top: 28px;

    min-height: 88px;

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

    gap: 30px;

    padding:
        18px 22px;

    border-radius: 20px;

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

    border:
        1px solid
        rgba(7, 20, 38, 0.07);

    box-shadow:
        0 15px 45px
        rgba(21, 50, 80, 0.045);
}


.offer-bottom-text {
    display: flex;
    align-items: center;

    gap: 13px;
}


.offer-bottom-icon {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #06101f;

    background:
        linear-gradient(
            135deg,
            #4bd5ff,
            #4dbbff
        );

    font-size: 14px;
}


.offer-bottom-text > div:last-child {
    display: flex;
    flex-direction: column;
}


.offer-bottom-text strong {
    margin-bottom: 3px;

    color: #071426;

    font-size: 12px;
}


.offer-bottom-text span {
    color: #8391a2;

    font-size: 10px;
}


.offer-contact-link {
    min-height: 44px;

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

    gap: 10px;

    flex-shrink: 0;

    padding:
        10px 16px;

    border-radius: 11px;

    color: #0c7fae;

    background:
        rgba(25, 195, 255, 0.07);

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

    font-size: 11px;
    font-weight: 750;

    transition:
        0.3s ease;
}


.offer-contact-link:hover {
    color: #06101f;

    background: #41d1ff;

    border-color: #41d1ff;

    transform:
        translateY(-2px);
}


.offer-contact-link i {
    font-size: 9px;

    transition:
        transform 0.3s ease;
}


.offer-contact-link:hover i {
    transform:
        translateX(3px);
}


html[dir="rtl"] .offer-contact-link i {
    transform:
        rotate(180deg);
}


html[dir="rtl"] .offer-contact-link:hover i {
    transform:
        rotate(180deg)
        translateX(3px);
}


/* =========================================================
   WHAT WE OFFER RESPONSIVE
========================================================= */

@media (max-width: 980px) {

    .offer-section {
        padding:
            110px 0;
    }


    .offer-grid {
        grid-template-columns: 1fr;
    }


    .offer-card-wide {
        grid-column: auto;

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .offer-data-visual {
        max-width: 500px;
    }

}


@media (max-width: 650px) {

    .offer-section {
        padding:
            90px 0;
    }


    .offer-header {
        margin-bottom: 45px;
    }


    .offer-title {
        font-size:
            clamp(
                36px,
                11vw,
                48px
            );
    }


    .offer-card {
        min-height: 320px;

        padding: 24px;
    }


    .offer-icon {
        margin-bottom: 38px;
    }


    .offer-card h3 {
        font-size: 22px;
    }


    .offer-card-number {
        top: 22px;
        right: 22px;

        font-size: 36px;
    }


    html[dir="rtl"]
    .offer-card-number {
        right: auto;
        left: 22px;
    }


    .offer-arrow {
        right: 22px;
        bottom: 22px;
    }


    html[dir="rtl"]
    .offer-arrow {
        right: auto;
        left: 22px;
    }


    .offer-bottom {
        flex-direction: column;

        align-items: stretch;

        text-align: start;
    }


    .offer-contact-link {
        width: 100%;

        justify-content: center;
    }

}


@media (max-width: 430px) {

    .offer-card {
        min-height: 350px;
    }


    .offer-card-wide {
        min-height: auto;
    }


    .offer-data-visual {
        padding: 16px;
    }


    .offer-mini-chart {
        height: 80px;

        gap: 5px;
    }


    .offer-bottom-text {
        align-items: flex-start;
    }

}
/* =========================================================
   24/7 SUPPORT SECTION
========================================================= */

.support-section {
    position: relative;
    overflow: hidden;

    padding: 140px 0;

    background:
        linear-gradient(
            180deg,
            #f7faff 0%,
            #ffffff 100%
        );

    color: #071426;
}


/* BACKGROUND */

.support-background {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.support-glow {
    position: absolute;

    width: 650px;
    height: 650px;

    right: -240px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        rgba(25, 195, 255, 0.09);

    filter: blur(100px);
}

.support-circles {
    position: absolute;

    width: 570px;
    height: 570px;

    right: 5%;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    border:
        1px solid
        rgba(25, 195, 255, 0.06);
}

.support-circles::before,
.support-circles::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(25, 195, 255, 0.05);
}

.support-circles::before {
    inset: 55px;
}

.support-circles::after {
    inset: 115px;
}


/* LAYOUT */

.support-container {
    position: relative;
    z-index: 2;

    display: grid;

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

    align-items: center;

    gap: 90px;
}


/* CONTENT */

.support-title {
    display: flex;
    flex-direction: column;

    margin-bottom: 27px;

    font-size:
        clamp(
            43px,
            4.7vw,
            64px
        );

    font-weight: 800;

    letter-spacing: -2.5px;

    line-height: 1.08;
}

html[dir="rtl"] .support-title {
    letter-spacing: 0;

    line-height: 1.25;
}

.support-text {
    max-width: 650px;

    margin-bottom: 17px;

    color: #67778a;

    font-size: 14px;

    line-height: 1.95;
}

html[dir="rtl"] .support-text {
    line-height: 2;
}


/* FEATURES */

.support-features {
    display: grid;

    gap: 11px;

    margin:
        31px 0
        31px;
}

.support-feature {
    display: flex;
    align-items: center;

    gap: 13px;

    max-width: 570px;

    padding: 12px 14px;

    border-radius: 14px;

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

    border:
        1px solid
        rgba(7, 20, 38, 0.065);

    transition:
        0.3s ease;
}

.support-feature:hover {
    transform:
        translateX(5px);

    border-color:
        rgba(25, 195, 255, 0.2);

    box-shadow:
        0 15px 35px
        rgba(18, 49, 80, 0.07);
}

html[dir="rtl"] .support-feature:hover {
    transform:
        translateX(-5px);
}

.support-feature-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: #06101f;

    background:
        linear-gradient(
            135deg,
            #4ed7ff,
            #3fbaff
        );

    font-size: 13px;
}

.support-feature > div:last-child {
    display: flex;
    flex-direction: column;
}

.support-feature strong {
    margin-bottom: 2px;

    color: #071426;

    font-size: 11px;
}

.support-feature span {
    color: #8997a7;

    font-size: 9px;
}


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

.support-visual {
    position: relative;

    min-height: 580px;

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


/* ORBITS */

.support-orbit {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(25, 195, 255, 0.1);
}

.support-orbit-one {
    width: 500px;
    height: 500px;

    animation:
        supportPulse
        5s ease-in-out
        infinite;
}

.support-orbit-two {
    width: 390px;
    height: 390px;

    border-color:
        rgba(90, 104, 255, 0.08);

    animation:
        supportPulse
        5s ease-in-out
        infinite reverse;
}

@keyframes supportPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.035);
        opacity: 1;
    }

}


/* MAIN CARD */

.support-main-card {
    position: relative;
    z-index: 4;

    width: min(100%, 440px);

    padding: 25px;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            #071426,
            #0b2037
        );

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

    box-shadow:
        0 35px 80px
        rgba(11, 31, 53, 0.22);
}


/* CARD HEADER */

.support-card-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}

.support-card-top > div:first-child {
    display: flex;
    flex-direction: column;
}

.support-card-top span {
    margin-bottom: 4px;

    color: #4bd4ff;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.support-card-top strong {
    color: white;

    font-size: 16px;
}

.support-live {
    display: flex;

    align-items: center;

    gap: 6px;

    padding: 6px 9px;

    border-radius: 8px;

    background:
        rgba(53, 230, 165, 0.06);

    border:
        1px solid
        rgba(53, 230, 165, 0.12);
}

.support-live span {
    width: 6px;
    height: 6px;

    margin: 0;

    border-radius: 50%;

    background: #35e6a5;

    box-shadow:
        0 0 12px
        rgba(53, 230, 165, 0.8);

    animation:
        supportBlink
        1.4s infinite;
}

@keyframes supportBlink {

    50% {
        opacity: 0.35;
    }

}

.support-live small {
    color: #78e9bd;

    font-size: 8px;
}


/* CLOCK */

.support-clock {
    min-height: 255px;

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

.support-clock-ring {
    width: 210px;
    height: 210px;

    display: grid;
    place-items: center;

    position: relative;

    border-radius: 50%;

    background:
        conic-gradient(
            #19c3ff 0deg,
            #19c3ff 265deg,
            rgba(255,255,255,0.06) 265deg,
            rgba(255,255,255,0.06) 360deg
        );

    box-shadow:
        0 0 55px
        rgba(25, 195, 255, 0.09);
}

.support-clock-ring::before {
    content: "";

    position: absolute;

    inset: 8px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #08182a,
            #0a1f35
        );
}

.support-clock-center {
    position: relative;
    z-index: 2;

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

    text-align: center;
}

.support-clock-center strong {
    color: #ffffff;

    font-size: 45px;

    line-height: 1;
}

.support-clock-center span {
    margin-top: 9px;

    color: #8297ad;

    font-size: 9px;
}


/* STATUS */

.support-status-grid {
    display: grid;

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

    gap: 10px;
}

.support-status-card {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px;

    border-radius: 13px;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.065);
}

.support-status-card i {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #44d5ff;

    background:
        rgba(25, 195, 255, 0.08);

    font-size: 11px;
}

.support-status-card > div {
    display: flex;
    flex-direction: column;
}

.support-status-card span {
    color: #788da4;

    font-size: 8px;
}

.support-status-card strong {
    color: #d7e3ef;

    font-size: 10px;
}


/* FLOATING CARDS */

.support-floating {
    position: absolute;
    z-index: 6;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px 14px;

    border-radius: 14px;

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

    border:
        1px solid
        rgba(7, 20, 38, 0.06);

    box-shadow:
        0 18px 45px
        rgba(17, 46, 75, 0.13);

    animation:
        supportFloat
        4s ease-in-out
        infinite;
}

.support-floating > i {
    width: 33px;
    height: 33px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 9px;

    color: #06101f;

    background: #40d2ff;

    font-size: 10px;
}

.support-floating > div {
    display: flex;
    flex-direction: column;
}

.support-floating strong {
    color: #071426;

    font-size: 10px;
}

.support-floating span {
    color: #8897a8;

    font-size: 8px;
}

.support-floating-one {
    left: -15px;
    top: 24%;
}

.support-floating-two {
    right: -12px;
    bottom: 20%;

    animation-delay: 1.4s;
}

@keyframes supportFloat {

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

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

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {

    .support-container {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .support-content {
        text-align: center;
    }

    .support-text {
        margin-inline: auto;
    }

    .support-features {
        max-width: 620px;

        margin-inline: auto;
        margin-bottom: 30px;

        text-align: start;
    }

    .support-visual {
        min-height: 540px;
    }

}


@media (max-width: 650px) {

    .support-section {
        padding: 95px 0;
    }

    .support-title {
        font-size:
            clamp(
                38px,
                11vw,
                50px
            );
    }

    .support-visual {
        min-height: 500px;

        transform: scale(0.9);
    }

}


@media (max-width: 480px) {

    .support-visual {
        min-height: 450px;

        transform: scale(0.78);
    }

    .support-status-grid {
        grid-template-columns: 1fr;
    }

    .support-floating-one {
        left: -35px;
    }

    .support-floating-two {
        right: -35px;
    }

}
/* =========================================================
   OUR SERVICES
========================================================= */

.services-section {
    position: relative;

    overflow: hidden;

    padding: 145px 0;

    color: #ffffff;

    background:
        linear-gradient(
            125deg,
            #04101e 0%,
            #07182a 45%,
            #061523 100%
        );
}


/* =========================================================
   BACKGROUND
========================================================= */

.services-background {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.services-grid-bg {
    position: absolute;
    inset: 0;

    opacity: 0.26;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
}


.services-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(120px);
}


.services-glow-one {
    width: 600px;
    height: 600px;

    right: -250px;
    top: -180px;

    background:
        rgba(25, 195, 255, 0.12);
}


.services-glow-two {
    width: 550px;
    height: 550px;

    left: -230px;
    bottom: -220px;

    background:
        rgba(90, 104, 255, 0.09);
}


/* =========================================================
   CONTAINER
========================================================= */

.services-container {
    position: relative;
    z-index: 2;
}


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

.services-header {
    max-width: 790px;

    margin:
        0 auto
        70px;

    text-align: center;
}


.services-header .section-label {
    justify-content: center;
}


.services-title {
    display: flex;
    flex-direction: column;

    align-items: center;

    margin-bottom: 24px;

    font-size:
        clamp(
            42px,
            4.8vw,
            65px
        );

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -2.7px;
}


html[dir="rtl"] .services-title {
    letter-spacing: 0;

    line-height: 1.25;
}


.services-description {
    max-width: 700px;

    margin-inline: auto;

    color: #93a7bc;

    font-size: 14px;

    line-height: 1.95;
}


html[dir="rtl"] .services-description {
    line-height: 2;
}


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

.services-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 17px;
}


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

.service-card {
    min-height: 460px;

    position: relative;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    padding: 27px;

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 38, 64, 0.72),
            rgba(7, 24, 42, 0.74)
        );

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

    box-shadow:
        0 22px 65px
        rgba(0, 0, 0, 0.14);

    backdrop-filter:
        blur(18px);

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


.service-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(25, 195, 255, 0.25);

    background:
        linear-gradient(
            145deg,
            rgba(19, 46, 77, 0.9),
            rgba(8, 29, 50, 0.9)
        );

    box-shadow:
        0 35px 85px
        rgba(0, 0, 0, 0.25);
}


/* =========================================================
   FEATURED
========================================================= */

.service-card-featured {
    background:
        linear-gradient(
            145deg,
            rgba(25, 195, 255, 0.12),
            rgba(10, 31, 53, 0.9)
        );

    border-color:
        rgba(25, 195, 255, 0.18);
}


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

.service-card-top {
    display: flex;

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

    gap: 20px;

    margin-bottom: 38px;
}


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

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 15px;

    color: #06101e;

    background:
        linear-gradient(
            135deg,
            #4dd7ff,
            #3ebaff
        );

    font-size: 18px;

    box-shadow:
        0 15px 35px
        rgba(25, 195, 255, 0.14);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.service-card:hover .service-icon {
    transform:
        translateY(-3px)
        rotate(-4deg);

    box-shadow:
        0 20px 45px
        rgba(25, 195, 255, 0.25);
}


.service-number {
    color:
        rgba(255, 255, 255, 0.08);

    font-size: 35px;
    font-weight: 800;

    letter-spacing: -1px;
}


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

.service-card-content {
    flex: 1;
}


.service-label {
    display: block;

    margin-bottom: 9px;

    color: #49d5ff;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.service-card h3 {
    min-height: 63px;

    margin-bottom: 16px;

    color: #ffffff;

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

    line-height: 1.42;

    letter-spacing: -0.5px;
}


html[dir="rtl"] .service-card h3 {
    letter-spacing: 0;

    line-height: 1.55;
}


.service-card p {
    margin-bottom: 13px;

    color: #98aabd;

    font-size: 11.5px;

    line-height: 1.9;
}


.service-secondary-text {
    color: #748aa1 !important;

    font-size: 10.5px !important;
}


html[dir="rtl"] .service-card p {
    line-height: 2;
}


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

.service-card-footer {
    display: flex;

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

    gap: 20px;

    margin-top: 25px;

    padding-top: 17px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.service-card-footer > span {
    color: #71869c;

    font-size: 9px;
    font-weight: 700;
}


.service-arrow {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #8da2b8;

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

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

    font-size: 9px;

    transition:
        0.35s ease;
}


.service-card:hover .service-arrow {
    color: #06101e;

    background: #46d4ff;

    border-color: #46d4ff;
}


.service-card:hover .service-arrow i {
    transform:
        translateX(2px);
}


.service-arrow i {
    transition:
        transform 0.3s ease;
}


html[dir="rtl"] .service-arrow i {
    transform:
        rotate(180deg);
}


html[dir="rtl"]
.service-card:hover
.service-arrow i {
    transform:
        rotate(180deg)
        translateX(2px);
}


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

.service-card-ai {
    background:
        linear-gradient(
            145deg,
            rgba(75, 83, 255, 0.13),
            rgba(10, 32, 54, 0.88)
        );

    border-color:
        rgba(111, 120, 255, 0.2);
}


.service-ai-glow {
    position: absolute;

    width: 260px;
    height: 260px;

    right: -110px;
    top: -100px;

    border-radius: 50%;

    background:
        rgba(81, 94, 255, 0.16);

    filter:
        blur(45px);

    pointer-events: none;
}


html[dir="rtl"] .service-ai-glow {
    right: auto;
    left: -110px;
}


.service-icon-ai {
    background:
        linear-gradient(
            135deg,
            #7c83ff,
            #44cfff
        );

    color: #ffffff;
}


.service-ai-badge {
    width: fit-content;

    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 6px;

    margin-top: 12px;

    padding:
        7px 10px;

    border-radius: 8px;

    color: #b6bcff;

    background:
        rgba(106, 116, 255, 0.08);

    border:
        1px solid
        rgba(106, 116, 255, 0.13);

    font-size: 8px;
    font-weight: 700;
}


.service-ai-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #7b87ff;

    box-shadow:
        0 0 10px
        rgba(123, 135, 255, 0.8);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.services-bottom {
    min-height: 100px;

    display: flex;

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

    gap: 30px;

    margin-top: 28px;

    padding:
        20px 23px;

    border-radius: 21px;

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

    border:
        1px solid
        rgba(255,255,255,0.07);
}


.services-bottom-content {
    display: flex;
    align-items: center;

    gap: 14px;
}


.services-bottom-icon {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 13px;

    color: #06101e;

    background:
        linear-gradient(
            135deg,
            #4ed7ff,
            #42bbff
        );

    font-size: 14px;
}


.services-bottom-content > div:last-child {
    display: flex;
    flex-direction: column;
}


.services-bottom-content strong {
    margin-bottom: 4px;

    color: #ffffff;

    font-size: 12px;
}


.services-bottom-content span {
    color: #8398ae;

    font-size: 9px;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.services-bottom-button {
    min-height: 46px;

    display: inline-flex;

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

    gap: 9px;

    flex-shrink: 0;

    padding:
        11px 18px;

    border-radius: 11px;

    color: #c5efff;

    background:
        rgba(25,195,255,0.07);

    border:
        1px solid
        rgba(25,195,255,0.13);

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

    transition:
        0.3s ease;
}


.services-bottom-button:hover {
    color: #06101e;

    background: #48d4ff;

    border-color: #48d4ff;

    transform:
        translateY(-2px);
}


.services-bottom-button i {
    font-size: 8px;

    transition:
        transform 0.3s ease;
}


.services-bottom-button:hover i {
    transform:
        translateX(3px);
}


html[dir="rtl"]
.services-bottom-button i {
    transform:
        rotate(180deg);
}


html[dir="rtl"]
.services-bottom-button:hover i {
    transform:
        rotate(180deg)
        translateX(3px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

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

}


@media (max-width: 720px) {

    .services-section {
        padding:
            100px 0;
    }


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


    .services-grid {
        grid-template-columns: 1fr;
    }


    .service-card {
        min-height: auto;
    }


    .service-card h3 {
        min-height: auto;
    }


    .services-bottom {
        flex-direction: column;

        align-items: stretch;
    }


    .services-bottom-button {
        width: 100%;
    }

}


@media (max-width: 450px) {

    .service-card {
        padding: 23px;
    }


    .service-card-top {
        margin-bottom: 32px;
    }


    .service-icon {
        width: 48px;
        height: 48px;

        font-size: 16px;
    }


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


    .services-bottom-content {
        align-items: flex-start;
    }

}
/* =========================================================
   CONTACT SECTION
========================================================= */

.contact-section {
    position: relative;

    overflow: hidden;

    padding: 145px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f9fd 100%
        );

    color: #071426;
}


/* =========================================================
   BACKGROUND
========================================================= */

.contact-background {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.contact-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(120px);
}


.contact-glow-one {
    width: 600px;
    height: 600px;

    right: -260px;
    top: -180px;

    background:
        rgba(25, 195, 255, 0.1);
}


.contact-glow-two {
    width: 500px;
    height: 500px;

    left: -230px;
    bottom: -180px;

    background:
        rgba(90, 104, 255, 0.075);
}


.contact-pattern {
    position: absolute;
    inset: 0;

    opacity: 0.25;

    background-image:
        radial-gradient(
            rgba(7,20,38,0.1) 0.6px,
            transparent 0.6px
        );

    background-size:
        26px 26px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 85%,
            transparent
        );
}


/* =========================================================
   LAYOUT
========================================================= */

.contact-container {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 85px;
}


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

.contact-title {
    display: flex;
    flex-direction: column;

    margin-bottom: 27px;

    font-size:
        clamp(
            43px,
            4.7vw,
            64px
        );

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -2.5px;
}


html[dir="rtl"] .contact-title {
    letter-spacing: 0;

    line-height: 1.25;
}


.contact-description {
    max-width: 590px;

    margin-bottom: 14px;

    color: #67778a;

    font-size: 14px;

    line-height: 1.95;
}


html[dir="rtl"] .contact-description {
    line-height: 2;
}


/* =========================================================
   CONTACT INFO
========================================================= */

.contact-info {
    display: grid;

    gap: 11px;

    margin-top: 32px;
}


.contact-info-item {
    display: flex;

    align-items: center;

    gap: 13px;
}


.contact-info-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #06101e;

    background:
        linear-gradient(
            135deg,
            #4ed7ff,
            #40baff
        );

    font-size: 13px;
}


.contact-info-item > div:last-child {
    display: flex;
    flex-direction: column;
}


.contact-info-item span {
    margin-bottom: 2px;

    color: #8997a7;

    font-size: 9px;
}


.contact-info-item strong {
    color: #071426;

    font-size: 11px;
}


/* =========================================================
   TRUST
========================================================= */

.contact-trust {
    max-width: 540px;

    display: flex;
    align-items: center;

    gap: 13px;

    margin-top: 30px;

    padding: 14px;

    border-radius: 15px;

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

    border:
        1px solid
        rgba(7,20,38,0.07);
}


.contact-trust-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: #119d78;

    background:
        rgba(29, 200, 153, 0.08);

    font-size: 13px;
}


.contact-trust > div:last-child {
    display: flex;
    flex-direction: column;
}


.contact-trust strong {
    margin-bottom: 2px;

    color: #071426;

    font-size: 10px;
}


.contact-trust span {
    color: #8391a3;

    font-size: 9px;
}


/* =========================================================
   FORM WRAPPER
========================================================= */

.contact-form-wrapper {
    position: relative;

    padding: 30px;

    border-radius: 27px;

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

    border:
        1px solid
        rgba(7,20,38,0.075);

    box-shadow:
        0 35px 90px
        rgba(18, 50, 83, 0.12);
}


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

.contact-form-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 30px;
}


.contact-form-top > div:first-child {
    display: flex;
    flex-direction: column;
}


.contact-form-top span {
    margin-bottom: 6px;

    color: #1294ca;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.contact-form-top h3 {
    color: #071426;

    font-size: 22px;

    font-weight: 750;

    line-height: 1.4;
}


.contact-form-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 14px;

    color: #06101e;

    background:
        linear-gradient(
            135deg,
            #4ed8ff,
            #3fbaff
        );

    font-size: 15px;

    box-shadow:
        0 15px 35px
        rgba(25,195,255,0.16);
}


/* =========================================================
   FORM
========================================================= */

.contact-form {
    display: flex;

    flex-direction: column;

    gap: 17px;
}


.form-row {
    display: grid;

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

    gap: 14px;
}


.form-group {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.form-group label {
    color: #35465a;

    font-size: 9px;
    font-weight: 700;
}


.form-input-wrapper {
    position: relative;
}


.form-input-wrapper > i {
    position: absolute;

    left: 14px;
    top: 50%;

    transform:
        translateY(-50%);

    color: #91a0b0;

    font-size: 11px;

    pointer-events: none;

    transition:
        color 0.3s ease;
}


html[dir="rtl"]
.form-input-wrapper > i {
    left: auto;
    right: 14px;
}


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

    outline: none;

    padding:
        13px
        14px
        13px
        40px;

    border-radius: 12px;

    color: #071426;

    background: #f8fafc;

    border:
        1px solid
        rgba(7,20,38,0.08);

    font: inherit;

    font-size: 11px;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


html[dir="rtl"]
.form-input-wrapper input,
html[dir="rtl"]
.form-input-wrapper textarea {
    padding:
        13px
        40px
        13px
        14px;
}


.form-input-wrapper textarea {
    min-height: 145px;

    resize: vertical;

    padding-top: 14px;
}


.textarea-wrapper > i {
    top: 18px;

    transform: none;
}


.form-input-wrapper input:focus,
.form-input-wrapper textarea:focus {
    background: #ffffff;

    border-color:
        rgba(25,195,255,0.5);

    box-shadow:
        0 0 0 4px
        rgba(25,195,255,0.07);
}


.form-input-wrapper:focus-within > i {
    color: #12a4df;
}


.form-input-wrapper input::placeholder,
.form-input-wrapper textarea::placeholder {
    color: #a5b1bd;
}


/* =========================================================
   SUBMIT
========================================================= */

.contact-submit {
    width: 100%;

    min-height: 52px;

    display: flex;

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

    gap: 10px;

    margin-top: 3px;

    padding: 12px 20px;

    border: 0;

    border-radius: 12px;

    color: #06101e;

    background:
        linear-gradient(
            135deg,
            #4fd8ff,
            #3eb8ff
        );

    font: inherit;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 16px 35px
        rgba(25,195,255,0.18);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.contact-submit:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 22px 45px
        rgba(25,195,255,0.27);
}


.contact-submit i {
    font-size: 9px;

    transition:
        transform 0.3s ease;
}


.contact-submit:hover i {
    transform:
        translateX(3px);
}


html[dir="rtl"] .contact-submit i {
    transform:
        rotate(180deg);
}


html[dir="rtl"]
.contact-submit:hover i {
    transform:
        rotate(180deg)
        translateX(3px);
}


/* =========================================================
   NOTE
========================================================= */

.contact-form-note {
    display: flex;

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

    gap: 7px;

    color: #9aa7b4;

    font-size: 8px;
}


.contact-form-note i {
    color: #62a5be;

    font-size: 8px;
}


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

.footer {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            125deg,
            #030c16,
            #061421
        );

    color: #ffffff;
}


.footer-background {
    position: absolute;
    inset: 0;

    pointer-events: none;
}


.footer-glow {
    position: absolute;

    width: 600px;
    height: 600px;

    right: -300px;
    top: -320px;

    border-radius: 50%;

    background:
        rgba(25,195,255,0.07);

    filter: blur(100px);
}


.footer-container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   FOOTER MAIN
========================================================= */

.footer-main {
    display: grid;

    grid-template-columns:
        1.7fr
        0.8fr
        1fr
        1fr;

    gap: 65px;

    padding:
        75px 0
        55px;
}


/* =========================================================
   BRAND
========================================================= */

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


.footer-logo {
    display: inline-flex;

    margin-bottom: 22px;
}


.footer-logo img {
    width: auto;

    height: 48px;

    object-fit: contain;
}


.footer-brand p {
    margin-bottom: 23px;

    color: #8195aa;

    font-size: 11px;

    line-height: 1.9;
}


html[dir="rtl"] .footer-brand p {
    line-height: 2;
}


/* SOCIAL */

.footer-social {
    display: flex;

    gap: 8px;
}


.footer-social a {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #8da2b7;

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

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

    font-size: 11px;

    transition:
        0.3s ease;
}


.footer-social a:hover {
    color: #06101e;

    background: #44d4ff;

    border-color: #44d4ff;

    transform:
        translateY(-3px);
}


/* =========================================================
   COLUMNS
========================================================= */

.footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}


.footer-column h4 {
    margin-bottom: 9px;

    color: #ffffff;

    font-size: 11px;
}


.footer-column > a {
    color: #7f93a8;

    font-size: 9.5px;

    transition:
        0.3s ease;
}


.footer-column > a:hover {
    color: #4dd6ff;

    transform:
        translateX(3px);
}


html[dir="rtl"]
.footer-column > a:hover {
    transform:
        translateX(-3px);
}


/* =========================================================
   CONTACT COLUMN
========================================================= */

.footer-contact-item {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #7f93a8;

    font-size: 9px;
}


.footer-contact-item i {
    width: 20px;

    color: #3dcfff;

    font-size: 9px;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    min-height: 74px;

    display: flex;

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

    gap: 30px;

    border-top:
        1px solid
        rgba(255,255,255,0.06);
}


.footer-bottom p {
    display: flex;

    align-items: center;

    gap: 4px;

    color: #6e8398;

    font-size: 8.5px;
}


.footer-bottom-links {
    display: flex;

    align-items: center;

    gap: 12px;
}


.footer-bottom-links a {
    color: #6e8398;

    font-size: 8.5px;

    transition:
        color 0.3s ease;
}


.footer-bottom-links a:hover {
    color: #4dd5ff;
}


.footer-bottom-links > span {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #465c72;
}


/* =========================================================
   CONTACT RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .contact-container {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .contact-content {
        max-width: 720px;
    }


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

        gap: 45px;
    }

}


@media (max-width: 650px) {

    .contact-section {
        padding:
            100px 0;
    }


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


    .contact-form-wrapper {
        padding: 23px;
    }


    .contact-form-top h3 {
        font-size: 19px;
    }


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

        gap: 35px;

        padding-top: 60px;
    }


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


    .footer-bottom {
        flex-direction: column;

        justify-content: center;

        padding:
            22px 0;

        text-align: center;
    }

}


@media (max-width: 430px) {

    .contact-form-wrapper {
        padding: 20px;
    }


    .contact-form-top {
        align-items: center;
    }


    .contact-form-icon {
        width: 43px;
        height: 43px;
    }


    .contact-info-item {
        align-items: flex-start;
    }

}
/* =========================================================
   GLOBAL FONT - CAIRO
========================================================= */

html,
body,
button,
input,
textarea,
select {
    font-family: "Cairo", sans-serif;
}

html[dir="ltr"],
html[dir="ltr"] body {
    font-family: "Cairo", sans-serif;
}

html[dir="rtl"],
html[dir="rtl"] body {
    font-family: "Cairo", sans-serif;
}
/* =========================================================
   PREMIUM SCROLL REVEAL
========================================================= */

.reveal-popup {
    opacity: 0;

    transform:
        translateY(55px)
        scale(0.94);

    filter: blur(7px);

    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);

    transition-delay:
        var(--reveal-delay, 0ms);

    will-change:
        transform,
        opacity,
        filter;
}


.reveal-popup.reveal-active {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);
}


/* =========================================================
   LEFT REVEAL
========================================================= */

.reveal-left {
    opacity: 0;

    transform:
        translateX(-70px)
        scale(0.96);

    filter: blur(6px);

    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.8s ease;

    will-change:
        transform,
        opacity,
        filter;
}


.reveal-left.reveal-active {
    opacity: 1;

    transform:
        translateX(0)
        scale(1);

    filter: blur(0);
}


/* =========================================================
   RIGHT REVEAL
========================================================= */

.reveal-right {
    opacity: 0;

    transform:
        translateX(70px)
        scale(0.96);

    filter: blur(6px);

    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.8s ease;

    will-change:
        transform,
        opacity,
        filter;
}


.reveal-right.reveal-active {
    opacity: 1;

    transform:
        translateX(0)
        scale(1);

    filter: blur(0);
}


/* =========================================================
   ZOOM REVEAL
========================================================= */

.reveal-zoom {
    opacity: 0;

    transform:
        scale(0.82);

    filter: blur(8px);

    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.8s ease;
}


.reveal-zoom.reveal-active {
    opacity: 1;

    transform:
        scale(1);

    filter: blur(0);
}


/* =========================================================
   EXTRA POP EFFECT
========================================================= */

.reveal-pop {
    opacity: 0;

    transform:
        translateY(35px)
        scale(0.82);

    filter: blur(5px);

    transition:
        opacity 0.75s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.6s ease;

    transition-delay:
        var(--reveal-delay, 0ms);
}


.reveal-pop.reveal-active {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);
}


/* =========================================================
   REVEAL RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .reveal-popup {
        transform:
            translateY(35px)
            scale(0.96);
    }


    .reveal-left {
        transform:
            translateX(-35px);
    }


    .reveal-right {
        transform:
            translateX(35px);
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .reveal-popup,
    .reveal-left,
    .reveal-right,
    .reveal-zoom,
    .reveal-pop {

        opacity: 1 !important;

        transform: none !important;

        filter: none !important;

        transition: none !important;
    }

}


/* =========================================================
   SERVICES
   NORMAL COLLAPSED CARDS
========================================================= */

.service-card {
    min-height: 220px;

    position: relative;

    overflow: hidden;

    padding: 27px;

    border-radius: 23px;

    cursor: pointer;

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


/* ---------------------------------------------------------
   Hide detailed information in normal card
--------------------------------------------------------- */

.service-card .service-label,
.service-card .service-card-content p,
.service-card .service-card-footer,
.service-card .service-ai-badge {

    opacity: 0;

    visibility: hidden;

    max-height: 0;

    overflow: hidden;

    margin-top: 0;

    margin-bottom: 0;

    padding-top: 0;

    pointer-events: none;
}


.service-card h3 {
    min-height: auto;

    margin: 0;

    font-size: 20px;

    line-height: 1.5;
}


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


/* ---------------------------------------------------------
   Normal hover before popup opens
--------------------------------------------------------- */

.service-card:hover:not(.service-popup-active) {

    transform:
        translateY(-5px);

    border-color:
        rgba(25, 195, 255, 0.25);

    box-shadow:
        0 25px 65px
        rgba(0, 0, 0, 0.22);
}


/* =========================================================
   SERVICE POPUP PLACEHOLDER
========================================================= */

.service-card-placeholder {
    min-height: 220px;

    border-radius: 23px;

    border:
        1px dashed
        rgba(255, 255, 255, 0.035);

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

    pointer-events: none;
}


/* =========================================================
   SERVICE POPUP BACKDROP
========================================================= */

.service-popup-backdrop {
    position: fixed;

    inset: 0;

    z-index: 99990;

    background:
        rgba(2, 9, 18, 0.72);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}


.service-popup-backdrop.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   BODY WHILE POPUP IS OPEN
========================================================= */

body.service-popup-open {
    overflow: hidden;
}


/* =========================================================
   SERVICE POPUP
   IMPORTANT:
   JS MOVES ACTIVE CARD DIRECTLY INTO BODY
========================================================= */

body > .service-card.service-popup-active {
    position: fixed !important;

    top: 50% !important;

    left: 50% !important;

    right: auto !important;

    bottom: auto !important;

    width:
        min(50vw, 760px) !important;

    max-width:
        760px !important;

    min-height:
        520px !important;

    max-height:
        calc(100vh - 70px);

    height:
        auto !important;

    z-index:
        100000 !important;

    margin:
        0 !important;

    padding:
        38px !important;

    overflow-y:
        auto !important;

    overflow-x:
        hidden !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    /*
     * Critical:
     * Never blur popup itself.
     */

    filter:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    transform:
        translate(-50%, -50%)
        scale(1) !important;

    border-radius:
        28px !important;

    border:
        1px solid
        rgba(68, 211, 255, 0.32) !important;

    background:
        linear-gradient(
            145deg,
            #0c243d 0%,
            #07182b 58%,
            #061523 100%
        ) !important;

    box-shadow:
        0 45px 140px
        rgba(0, 0, 0, 0.65),

        0 0 70px
        rgba(25, 195, 255, 0.14) !important;

    isolation: isolate;

    animation:
        servicePopupOpen
        0.55s
        cubic-bezier(0.16, 1, 0.3, 1)
        both;

    transition-delay:
        0ms !important;
}


/* =========================================================
   FORCE POPUP CHILDREN SHARP
========================================================= */

body > .service-card.service-popup-active,
body > .service-card.service-popup-active *,
body > .service-card.service-popup-active h3,
body > .service-card.service-popup-active p,
body > .service-card.service-popup-active span,
body > .service-card.service-popup-active i {

    filter:
        none !important;

}


/* =========================================================
   POPUP OPEN ANIMATION
========================================================= */

@keyframes servicePopupOpen {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -44%)
            scale(0.84);
    }


    60% {
        opacity: 1;

        transform:
            translate(-50%, -51%)
            scale(1.02);
    }


    100% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

}


/* =========================================================
   POPUP TOP
========================================================= */

body > .service-card.service-popup-active
.service-card-top {

    margin-bottom:
        34px;
}


body > .service-card.service-popup-active
.service-icon {

    width:
        62px;

    height:
        62px;

    border-radius:
        17px;

    font-size:
        21px;

    animation:
        serviceIconPopup
        0.65s
        cubic-bezier(0.34, 1.56, 0.64, 1)
        both;
}


@keyframes serviceIconPopup {

    from {
        transform:
            scale(0.55)
            rotate(-15deg);
    }


    to {
        transform:
            scale(1)
            rotate(0);
    }

}


body > .service-card.service-popup-active
.service-number {

    font-size:
        45px;

    opacity:
        0.15;
}


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

body > .service-card.service-popup-active
.service-label {

    opacity:
        1 !important;

    visibility:
        visible !important;

    max-height:
        50px !important;

    margin-bottom:
        10px !important;

    overflow:
        visible !important;

    pointer-events:
        auto !important;

    animation:
        popupTextReveal
        0.5s ease
        0.1s both;
}


body > .service-card.service-popup-active h3 {

    margin-bottom:
        20px !important;

    font-size:
        clamp(
            25px,
            2.4vw,
            34px
        ) !important;

    line-height:
        1.35;

    opacity:
        1 !important;

    visibility:
        visible !important;

    animation:
        popupTextReveal
        0.55s ease
        0.14s both;
}


body > .service-card.service-popup-active
.service-card-content p {

    opacity:
        1 !important;

    visibility:
        visible !important;

    max-height:
        400px !important;

    margin-bottom:
        15px !important;

    overflow:
        visible !important;

    pointer-events:
        auto !important;

    font-size:
        13px;

    line-height:
        1.9;

    animation:
        popupTextReveal
        0.55s ease
        0.2s both;
}


body > .service-card.service-popup-active
.service-card-content p:first-of-type {

    animation-delay:
        0.2s;
}


body > .service-card.service-popup-active
.service-secondary-text {

    animation-delay:
        0.28s;
}


/* =========================================================
   POPUP TEXT REVEAL
========================================================= */

@keyframes popupTextReveal {

    from {
        opacity: 0;

        transform:
            translateY(20px);
    }


    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   POPUP FOOTER
========================================================= */

body > .service-card.service-popup-active
.service-card-footer {

    opacity:
        1 !important;

    visibility:
        visible !important;

    max-height:
        120px !important;

    margin-top:
        28px !important;

    padding-top:
        18px !important;

    overflow:
        visible !important;

    pointer-events:
        auto !important;

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

    animation:
        popupTextReveal
        0.55s ease
        0.34s both;
}


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

body > .service-card.service-popup-active
.service-ai-badge {

    opacity:
        1 !important;

    visibility:
        visible !important;

    max-height:
        60px !important;

    margin-top:
        17px !important;

    padding:
        7px 10px !important;

    overflow:
        visible !important;

    pointer-events:
        auto !important;

    animation:
        popupTextReveal
        0.55s ease
        0.3s both;
}


/* =========================================================
   POPUP GLOW
========================================================= */

body > .service-card.service-popup-active::before {
    content: "";

    position: absolute;

    width:
        430px;

    height:
        430px;

    right:
        -180px;

    top:
        -210px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 202, 255, 0.22),
            transparent 68%
        );

    pointer-events:
        none;

    z-index:
        -1;

    animation:
        serviceGlowOpen
        0.8s ease both;
}


html[dir="rtl"]
body > .service-card.service-popup-active::before {

    right:
        auto;

    left:
        -180px;
}


@keyframes serviceGlowOpen {

    from {
        opacity: 0;

        transform:
            scale(0.5);
    }


    to {
        opacity: 1;

        transform:
            scale(1);
    }

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.service-popup-close {
    position:
        absolute;

    top:
        20px;

    right:
        20px;

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    z-index:
        50;

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

    border-radius:
        11px;

    color:
        #b8cad9;

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

    cursor:
        pointer;

    font-size:
        14px;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        scale(0.7);

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        opacity 0.3s ease;
}


body > .service-card.service-popup-active
.service-popup-close {

    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        scale(1);
}


.service-popup-close:hover {

    color:
        #06101e;

    background:
        #48d5ff;

    border-color:
        #48d5ff;

    transform:
        rotate(90deg) !important;
}


html[dir="rtl"]
.service-popup-close {

    right:
        auto;

    left:
        20px;
}


/* =========================================================
   POPUP CLOSING
========================================================= */

body > .service-card.service-popup-closing {

    opacity:
        0 !important;

    transform:
        translate(-50%, -47%)
        scale(0.92) !important;

    transition:
        opacity 0.32s ease,
        transform 0.35s
        cubic-bezier(0.4, 0, 1, 1) !important;

    animation:
        none !important;
}


/* =========================================================
   CUSTOM POPUP SCROLLBAR
========================================================= */

body > .service-card.service-popup-active::-webkit-scrollbar {

    width:
        6px;
}


body > .service-card.service-popup-active::-webkit-scrollbar-track {

    background:
        transparent;
}


body > .service-card.service-popup-active::-webkit-scrollbar-thumb {

    background:
        rgba(72, 213, 255, 0.35);

    border-radius:
        20px;
}


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

@media (max-width: 1050px) {

    body > .service-card.service-popup-active {

        width:
            72vw !important;

        max-width:
            760px !important;
    }

}


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

@media (max-width: 768px) {

    /*
     * JS does not create popup on mobile.
     * Show complete service cards normally.
     */

    .service-card {

        min-height:
            auto;

        cursor:
            default;
    }


    .service-card:hover {

        transform:
            none;
    }


    .service-card .service-label,
    .service-card .service-card-content p,
    .service-card .service-card-footer,
    .service-card .service-ai-badge {

        opacity:
            1;

        visibility:
            visible;

        max-height:
            none;

        overflow:
            visible;

        pointer-events:
            auto;
    }


    .service-card .service-label {

        margin-bottom:
            10px;
    }


    .service-card .service-card-content p {

        margin-bottom:
            14px;
    }


    .service-card .service-card-footer {

        margin-top:
            24px;

        padding-top:
            17px;
    }


    .service-card .service-ai-badge {

        margin-top:
            15px;
    }

}


/* =========================================================
   SAFETY OVERRIDES
   PREVENT REVEAL FROM BLURRING ACTIVE POPUP
========================================================= */

body > .service-card.service-popup-active.reveal-pop,
body > .service-card.service-popup-active.reveal-active,
body > .service-card.service-popup-active.reveal-pop.reveal-active {

    opacity:
        1 !important;

    visibility:
        visible !important;

    filter:
        none !important;

    transition-delay:
        0ms !important;
}


body > .service-card.service-popup-active.reveal-pop *,
body > .service-card.service-popup-active.reveal-active * {

    filter:
        none !important;
}
.service-card {
    cursor: pointer;
}
.service-card:hover:not(.service-popup-active) {
    transform: translateY(-5px);

    border-color:
        rgba(25, 195, 255, 0.25);

    box-shadow:
        0 25px 65px
        rgba(0, 0, 0, 0.22);
}
/* =========================================================
   SERVICE CARD ARROW
   SHOW ON NORMAL CARD / HIDE IN POPUP
========================================================= */

/* Show footer on normal service card */
.service-card:not(.service-popup-active)
.service-card-footer {
    opacity: 1 !important;
    visibility: visible !important;

    max-height: 80px !important;

    overflow: visible !important;

    pointer-events: auto !important;

    margin-top: 24px !important;

    padding-top: 16px !important;

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

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


/* Keep footer text hidden on normal card */
.service-card:not(.service-popup-active)
.service-card-footer > span {
    display: none !important;
}


/* Show only arrow on normal card */
.service-card:not(.service-popup-active)
.service-arrow {
    display: grid !important;

    width: 36px;
    height: 36px;

    place-items: center;

    margin-left: auto;

    border-radius: 10px;

    background: #48d5ff;

    color: #071522;

    opacity: 1 !important;
    visibility: visible !important;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


/* Hover effect */
.service-card:not(.service-popup-active)
.service-arrow:hover {
    transform:
        translateX(4px);

    box-shadow:
        0 8px 24px
        rgba(72, 213, 255, 0.28);
}


/* Arabic direction */
html[dir="rtl"]
.service-card:not(.service-popup-active)
.service-arrow {
    margin-left: 0;
    margin-right: auto;
}


html[dir="rtl"]
.service-card:not(.service-popup-active)
.service-arrow i {
    transform:
        rotate(180deg);
}


/* =========================================================
   HIDE ARROW INSIDE POPUP
========================================================= */

body > .service-card.service-popup-active
.service-arrow {
    display: none !important;
}


/* Keep footer text visible inside popup */
body > .service-card.service-popup-active
.service-card-footer > span {
    display: inline-block !important;
}
/* =========================================================
   CONTACT WITHOUT FORM
========================================================= */

.contact-container {
    grid-template-columns: 1fr !important;

    max-width: 1000px;

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


.contact-content {
    max-width: 850px;
}


.contact-form-wrapper {
    display: none !important;
}


/* =========================================================
   FLOATING ACTIONS
========================================================= */

.floating-actions {
    position: fixed;

    right: 28px;
    bottom: 28px;

    z-index: 8000;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 12px;
}


/* =========================================================
   GENERAL FLOATING BUTTON
========================================================= */

.floating-action {
    position: relative;

    width: 52px;
    height: 52px;

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

    border: none;
    outline: none;

    border-radius: 16px;

    text-decoration: none;

    cursor: pointer;

    font-size: 19px;

    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s ease,
        opacity 0.3s ease,
        background 0.3s ease;
}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp-floating {
    color: #ffffff;

    background: #25D366;

    box-shadow:
        0 12px 35px
        rgba(37, 211, 102, 0.30);
}


.whatsapp-floating:hover {
    color: #ffffff;

    transform:
        translateY(-4px)
        scale(1.06);

    box-shadow:
        0 18px 45px
        rgba(37, 211, 102, 0.42);
}


.whatsapp-floating i {
    font-size: 24px;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top {
    color: #061522;

    background: #48d5ff;

    box-shadow:
        0 12px 35px
        rgba(72, 213, 255, 0.25);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(15px)
        scale(0.85);
}


/* Visible after scrolling */

.back-to-top.show {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


.back-to-top.show:hover {
    transform:
        translateY(-4px)
        scale(1.06);

    box-shadow:
        0 18px 45px
        rgba(72, 213, 255, 0.38);
}


/* =========================================================
   TOOLTIPS
========================================================= */

.floating-tooltip {
    position: absolute;

    right: calc(100% + 12px);
    top: 50%;

    transform:
        translateY(-50%)
        translateX(8px);

    padding:
        8px 12px;

    border-radius:
        8px;

    background:
        #07182b;

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        600;

    white-space:
        nowrap;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.18);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}


.floating-action:hover
.floating-tooltip {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);
}


/* =========================================================
   RTL
========================================================= */

html[dir="rtl"]
.floating-actions {
    right: auto;
    left: 28px;
}


html[dir="rtl"]
.floating-tooltip {
    right: auto;

    left:
        calc(100% + 12px);

    transform:
        translateY(-50%)
        translateX(-8px);
}


html[dir="rtl"]
.floating-action:hover
.floating-tooltip {
    transform:
        translateY(-50%)
        translateX(0);
}


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

@media (max-width: 768px) {

    .floating-actions {
        right: 16px;
        bottom: 18px;

        gap: 9px;
    }


    html[dir="rtl"]
    .floating-actions {
        right: auto;
        left: 16px;
    }


    .floating-action {
        width: 46px;
        height: 46px;

        border-radius: 14px;

        font-size: 16px;
    }


    .whatsapp-floating i {
        font-size: 22px;
    }


    .floating-tooltip {
        display: none;
    }

}
/* =========================================================
   WHATSAPP PREMIUM ANIMATION
========================================================= */

.whatsapp-floating {
    position: relative;
    overflow: visible;

    animation:
        whatsappFloat 3.5s ease-in-out infinite;

    isolation: isolate;
}


/* =========================================================
   OUTER PULSE
========================================================= */

.whatsapp-floating::before {
    content: "";

    position: absolute;
    inset: -1px;

    border-radius: inherit;

    border: 2px solid rgba(37, 211, 102, 0.55);

    opacity: 0;

    pointer-events: none;

    z-index: -1;

    animation:
        whatsappPulse 3.5s ease-out infinite;
}


/* =========================================================
   SECOND SOFT PULSE
========================================================= */

.whatsapp-floating::after {
    content: "";

    position: absolute;
    inset: -1px;

    border-radius: inherit;

    border: 1px solid rgba(37, 211, 102, 0.35);

    opacity: 0;

    pointer-events: none;

    z-index: -2;

    animation:
        whatsappPulseSecond 3.5s ease-out infinite;
}


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

.whatsapp-floating i {
    position: relative;

    z-index: 2;

    font-size: 24px;

    animation:
        whatsappIcon 3.5s ease-in-out infinite;

    transform-origin: center;
}


/* =========================================================
   FLOATING MOTION
========================================================= */

@keyframes whatsappFloat {

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

    45% {
        transform: translateY(0);
    }

    52% {
        transform: translateY(-4px);
    }

    59% {
        transform: translateY(0);
    }

}


/* =========================================================
   FIRST PULSE
========================================================= */

@keyframes whatsappPulse {

    0%,
    42% {
        opacity: 0;
        transform: scale(1);
    }

    48% {
        opacity: 0.65;
    }

    68% {
        opacity: 0;
        transform: scale(1.55);
    }

    100% {
        opacity: 0;
        transform: scale(1.55);
    }

}


/* =========================================================
   SECOND PULSE
========================================================= */

@keyframes whatsappPulseSecond {

    0%,
    50% {
        opacity: 0;
        transform: scale(1);
    }

    56% {
        opacity: 0.45;
    }

    76% {
        opacity: 0;
        transform: scale(1.8);
    }

    100% {
        opacity: 0;
        transform: scale(1.8);
    }

}


/* =========================================================
   ICON ATTENTION MOTION
========================================================= */

@keyframes whatsappIcon {

    0%,
    42%,
    70%,
    100% {
        transform:
            rotate(0deg)
            scale(1);
    }

    48% {
        transform:
            rotate(-8deg)
            scale(1.08);
    }

    52% {
        transform:
            rotate(8deg)
            scale(1.12);
    }

    56% {
        transform:
            rotate(-6deg)
            scale(1.08);
    }

    60% {
        transform:
            rotate(5deg)
            scale(1.05);
    }

    64% {
        transform:
            rotate(0deg)
            scale(1);
    }

}


/* =========================================================
   HOVER
========================================================= */

.whatsapp-floating:hover {
    animation-play-state: paused;

    transform:
        translateY(-5px)
        scale(1.07);

    box-shadow:
        0 18px 50px
        rgba(37, 211, 102, 0.42);
}


.whatsapp-floating:hover::before,
.whatsapp-floating:hover::after,
.whatsapp-floating:hover i {
    animation-play-state: paused;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .whatsapp-floating,
    .whatsapp-floating::before,
    .whatsapp-floating::after,
    .whatsapp-floating i {
        animation: none !important;
    }

}
/* =========================================================
   COMPANY LOCATION
========================================================= */

.location-section {
    position: relative;

    padding:
        110px 0 90px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5faff 100%
        );

    overflow: hidden;
}


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

.location-header {
    max-width: 700px;

    margin:
        0 auto 45px;

    text-align: center;
}


.location-header .section-badge {
    justify-content: center;

    margin-bottom: 18px;
}


.location-header h2 {
    margin:
        0 0 18px;

    color:
        #07182b;

    font-size:
        clamp(34px, 4vw, 52px);

    font-weight: 800;

    line-height: 1.2;
}


.location-header h2 span {
    display: block;
}


.location-header p {
    max-width: 560px;

    margin:
        0 auto;

    color:
        #718096;

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   MAP WRAPPER
========================================================= */

.location-map-wrapper {
    position: relative;

    width: 100%;

    height: 500px;

    overflow: hidden;

    border-radius: 30px;

    border:
        1px solid
        rgba(8, 41, 70, 0.10);

    background:
        #eaf3f9;

    box-shadow:
        0 30px 80px
        rgba(5, 31, 54, 0.12);
}


/* =========================================================
   MAP
========================================================= */

.location-map {
    display: block;

    width: 100%;

    height: 100%;

    border: 0;

    filter:
        saturate(0.85)
        contrast(0.95);

    transition:
        filter 0.4s ease,
        transform 0.5s ease;
}


.location-map-wrapper:hover
.location-map {
    filter:
        saturate(1)
        contrast(1);
}


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

.map-location-card {
    position: absolute;

    left: 28px;
    bottom: 28px;

    z-index: 5;

    min-width: 260px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding:
        16px 20px;

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

    border-radius:
        18px;

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

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    box-shadow:
        0 15px 45px
        rgba(5, 31, 54, 0.16);
}


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

.map-location-icon {
    flex-shrink: 0;

    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    color: #061522;

    background:
        linear-gradient(
            135deg,
            #48d5ff,
            #28bdf4
        );

    box-shadow:
        0 10px 25px
        rgba(40, 189, 244, 0.25);
}


.map-location-icon i {
    font-size: 18px;
}


/* =========================================================
   LOCATION INFORMATION
========================================================= */

.map-location-info {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.map-location-info span {
    color: #159ed4;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.map-location-info strong {
    color: #07182b;

    font-size: 13px;

    font-weight: 700;
}


/* =========================================================
   RTL
========================================================= */

html[dir="rtl"]
.map-location-card {
    left: auto;
    right: 28px;
}


html[dir="rtl"]
.map-location-info {
    text-align: right;
}


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

@media (max-width: 768px) {

    .location-section {
        padding:
            75px 0 60px;
    }


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


    .location-map-wrapper {
        height:
            420px;

        border-radius:
            22px;
    }


    .map-location-card {
        left: 15px;
        right: 15px;
        bottom: 15px;

        min-width: 0;

        padding:
            13px 15px;
    }


    html[dir="rtl"]
    .map-location-card {
        left: 15px;
        right: 15px;
    }


    .map-location-icon {
        width: 43px;
        height: 43px;
    }

}
/* =========================================================
   FOOTER FONT SIZE IMPROVEMENT
========================================================= */

.footer-column h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
}

.footer-column a {
    font-size: 14px !important;
    line-height: 1.8 !important;
}

.footer-contact-item span {
    font-size: 14px !important;
    font-weight: 500 !important;
}

.footer-contact-item i {
    font-size: 15px !important;
}

.footer-description,
.footer-brand p {
    font-size: 14px !important;
    line-height: 1.9 !important;
}

.footer-bottom {
    font-size: 13px !important;
}

.footer-bottom p,
.footer-bottom span,
.footer-bottom a {
    font-size: 13px !important;
}
/* Keep phone numbers correctly ordered in RTL */
.phone-number {
    direction: ltr !important;
    unicode-bidi: isolate;
    display: inline-block;
}
/* =========================================================
   SERVICES CUSTOM SOLUTION TEXT SIZE
========================================================= */

.services-bottom-content strong {
    display: block;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-bottom: 7px;
}

.services-bottom-content > div:last-child > span {
    display: block;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
}
@media (max-width: 768px) {

    .services-bottom-content strong {
        font-size: 19px !important;
    }

    .services-bottom-content > div:last-child > span {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

}
/* =========================================================
   WHAT WE OFFER - END TO END SOLUTIONS TEXT
========================================================= */

/* عنوان حلول متكاملة */
.offer-bottom-text strong {
    display: block;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-bottom: 6px;
}

/* النص الموجود تحت العنوان */
.offer-bottom-text > div:last-child > span {
    display: block;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
}

/* Mobile */
@media (max-width: 768px) {

    .offer-bottom-text strong {
        font-size: 19px !important;
    }

    .offer-bottom-text > div:last-child > span {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

}
/* =========================================================
   WHAT WE OFFER - REMOVE CARD ARROWS
========================================================= */

.offer-card .offer-arrow {
    display: none !important;
}
/* =========================================================
   SERVICE POPUP IMAGE - PREMIUM STYLE
========================================================= */

.service-popup-image {
    display: none;
}

body > .service-card.service-popup-active .service-popup-image {
    display: block;

    width: 100%;
    height: 260px;

    margin: 24px 0 28px;

    overflow: hidden;

    border-radius: 20px;

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

    background: #07182b;

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

body > .service-card.service-popup-active .service-popup-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: inherit;

    transition:
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.4s ease;
}

body > .service-card.service-popup-active .service-popup-image:hover img {
    transform: scale(1.03);
}
@media (max-width: 768px) {

    .service-popup-image {
        display: block;
        width: 100%;
        height: 210px;
        margin: 18px 0 22px;
        overflow: hidden;
        border-radius: 16px;
    }

    .service-popup-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

}
/* =========================================================
   LOCATION TITLE - ONE LINE
========================================================= */

.location-header h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.location-header h2 span {
    display: inline-block !important;
}
html[dir="rtl"] .location-header h2 {
    flex-direction: row;
}
@media (max-width: 768px) {

    .location-header h2 {
        gap: 8px;
        font-size: clamp(27px, 7vw, 36px);
        flex-wrap: wrap;
    }

}