/* =========================================================
   Code Intelligence Main Style
   Requires: ci-variables.css
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.ci-page {
    margin: 0;
    background: var(--ci-bg-main);
    color: var(--ci-heading);
    font-family: var(--ci-font-rotger);
    overflow-x: clip;
}

body.background {
    background-image: url("../images/background.png");
}

.font-en {
    font-family: comfortaa;
}

.font-ar {
    font-family: "IBM Plex Sans Arabic", sans-serif;
}

html[lang^="ar"] {
    --ci-font-rotger: "IBM Plex Sans Arabic", sans-serif;
}

html[lang^="ar"] body {
    font-family: "IBM Plex Sans Arabic", sans-serif;
}

/* body.ci-ltr {
    font-family: Inter, Arial, sans-serif;
} */

.w-700 {
    max-width: 700px;
}
.fw-black {
    font-weight: 900;
}

.ci-section {
    padding-block: var(--ci-section-padding);
}

/* Shared home section rhythm; content can grow beyond the viewport. */
.ci-home-page {
    --ci-home-section-space: clamp(64px, 8svh, 96px);
}

.ci-home-page > .ci-section {
    padding-block: var(--ci-home-section-space) !important;
    scroll-margin-top: 90px;
}

.ci-home-page .ci-section-head {
    max-width: 700px;
}

.ci-home-page .ci-section-title {
    max-width: 700px;
    margin-top: 1.75rem !important;
    text-wrap: balance;
}

.ci-home-page .text-center .ci-section-title {
    margin-inline: auto;
}

.ci-home-page .ci-section-badge {
    min-height: 32px;
    padding: 0.4rem 1.4rem;
    border: 1px solid rgba(60, 33, 136, 0.35);
    /* background: rgba(60, 33, 136, 0.08); */
    color: var(--ci-primary);
    /* font-weight: 500; */
    background: linear-gradient(
        90deg,
        rgba(13, 204, 194, 0.1) 0%,
        rgba(61, 24, 132, 0.1) 100%
    );
    font-weight: 400;
}

.ci-home-page .ci-section-badge span {
    background: currentColor;
}

.ci-home-page .ci-section-badge-dark {
    color: #eee8ff;
    background: rgba(228, 222, 243, 0.12);
    border-color: rgba(228, 222, 243, 0.4);
}

.ci-home-page .ci-about-section {
    color: var(--ci-heading);
    background:
        linear-gradient(to bottom, rgba(246, 253, 252, 0) 0%, #fff 95%),
        url("../images/about-circuit-pattern.svg") repeat,
        #f6fdfc;
}

.ci-home-page .ci-about-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent,
        #a6eeea,
        #dcf8f6,
        transparent
    );
}

.ci-home-page .ci-about-section .ci-section-title {
    color: var(--ci-heading);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.5;
}

.ci-home-page .ci-about-paragraphs {
    margin-block: clamp(36px, 7svh, 72px) 40px;
    padding: 28px 40px;
    border: 1px solid #eeeeef;
    border-radius: 28px;
    background: #fff;
    color: #1e1e1e;
    font-size: 1rem;
    font-weight: 400;
    line-height: 2.5;
}

.ci-home-page .ci-about-paragraphs p {
    margin-bottom: 0.75rem;
}

.ci-home-page .ci-about-paragraphs > :last-child {
    margin-bottom: 0;
}

.ci-home-page .ci-about-cards {
    --bs-gutter-x: clamp(24px, 4vw, 64px);
}

.ci-home-page .ci-about-card {
    display: flex;
    flex-direction: column;
    min-height: 200px;
    padding: 26px;
    border: 1px solid #eeeeef;
    border-radius: 26px;
    background: #fff;
    box-shadow: none;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.ci-home-page .ci-about-card h3 {
    color: #1e1e1e;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.ci-home-page .ci-about-card .description {
    color: #1e1e1e;
    font-weight: 300;
    line-height: 1.9;
    text-align: start;
    margin-block: 0.75rem 1.25rem;
}

.ci-home-page .ci-about-card .ci-card-line {
    width: 90px;
    max-width: 100%;
    margin-top: auto;
    margin-inline: 0 auto;
    background: linear-gradient(90deg, #16c9c3, #6035a5);
    transition: width 0.3s ease;
}

.ci-home-page .ci-about-card:hover {
    transform: none;
    background: #fff;
    border-color: #20d4ce;
    box-shadow: 0 5px 14px rgba(32, 212, 206, 0.12);
}

.ci-home-page .ci-about-card:hover .ci-card-line {
    width: 100%;
}

@media (min-width: 992px) {
    .ci-home-page > .ci-section {
        min-height: calc(100svh - 90px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ci-home-page .ci-about-card,
    .ci-home-page .ci-about-card .ci-card-line {
        transition: none;
    }
}

.ci-reveal {
    opacity: 0;
    transform: translateY(70px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.ci-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ci-title-highlight {
    background: var(--ci-gradient-title);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ci-section-head {
    max-width: 920px;
}

.ci-section-badge {
    min-height: 34px;
    padding: 0.35rem 1.25rem;
    border: 1px solid var(--ci-primary);
    border-radius: var(--ci-radius-pill);
    background: #e4def3;
    color: var(--ci-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-weight: 800;
    line-height: 1;
}

.ci-section-badge span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ci-primary);
    display: inline-block;
}

.ci-section-badge-dark {
    background: rgba(255, 255, 255, 0.1);
    color: #ded7ff;
    border-color: rgba(255, 255, 255, 0.5);
}

.ci-section-badge-dark span {
    background: #ded7ff;
}

.ci-section-title {
    font-size: clamp(2rem, 4vw, 2rem);
    line-height: 1.28;

    /* letter-spacing: -0.04em; */
}

.ci-section-title-light {
    color: var(--ci-white);
}

.ci-section-description {
    max-width: 700px;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--ci-heading);
    font-weight: 400;
}

.ci-small-gradient-btn {
    min-height: 40px;
    padding: 0.5rem 1rem;
    border-radius: var(--ci-radius-pill);
    color: var(--ci-white) !important;
    background: var(--ci-gradient-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: var(--ci-shadow-cyan);
}

/* =========================================================
   Logo
========================================================= */
.ci-logo-mark,
.ci-center-logo {
    position: relative;
    display: inline-block;
}

.ci-logo-mark {
    width: 42px;
    height: 42px;
}

.ci-logo-mark::before,
.ci-logo-mark::after,
.ci-center-logo::before,
.ci-center-logo::after {
    content: "";
    position: absolute;
    border-radius: 16px;
    transform-origin: center;
}

.ci-logo-mark::before,
.ci-logo-mark::after {
    width: 16px;
    height: 46px;
    left: 13px;
    top: -2px;
}

.ci-logo-mark::before,
.ci-center-logo::before {
    background: var(--ci-secondary);
    transform: rotate(42deg);
}

.ci-logo-mark::after,
.ci-center-logo::after {
    background: var(--ci-primary);
    transform: rotate(-42deg);
}

/* =========================================================
   Hero
========================================================= */
.ci-hero-section {
    min-height: 100vh;
    padding-top: 26px;
    padding-bottom: 80px;
}

.ci-home-hero {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    max-height: 100vh;
    max-height: 100svh;
    padding-block: clamp(18px, 3vh, 26px);
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.ci-home-hero-container {
    display: flex;
    align-items: center;
    min-height: 100%;
    padding-top: 0 !important;
}

.ci-home-hero-container > .row {
    width: 100%;
}
.ci-home-hero-container .shape {
    margin-bottom: 80px;
}
.ci-hero-botton {
    position: fixed;
    inset-inline: 0;
    bottom: 18px;
    width: 100%;
    overflow: visible;
    pointer-events: none;
}

.ci-hero-calculator-project,
.ci-hero-whatsapp {
    pointer-events: auto;
}

.ci-home-body {
    position: relative;
    isolation: isolate;
}

.ci-hero-section::before,
.ci-home-body::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/logo.png");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.15;
    filter: blur(27px);
    pointer-events: none;
    z-index: 0;
}

.ci-home-body::before {
    bottom: auto;
    height: 100vh;
    height: 100svh;
    z-index: -1;
}

.ci-home-body .ci-hero-section::before {
    content: none;
}

.ci-hero-section > * {
    position: relative;
    z-index: 1;
}

.ci-navbar-container {
    position: sticky !important;
    top: 20px;
    z-index: 1050 !important;
    max-width: 100%;
    transition: top 0.35s ease;
}

@media (min-width: 1400px) {
    .ci-navbar-container {
        max-width: 1320px;
    }
}

.ci-navbar-container.is-scrolled {
    top: 0;
    padding: 0;
}

.ci-navbar-container.is-scrolled .ci-navbar::before {
    width: 100vw;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 24px rgba(32, 24, 58, 0.12);
}

.ci-navbar {
    max-height: 75px;
    padding-inline: 0;
    border: 0;
    isolation: isolate;
}
.navbar-toggler-icon {
    background-image: url("../images/icon.png");
}
/* Expand only the background; the container keeps navigation content in place. */
.ci-navbar::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    top: 0;
    bottom: 0;
    left: 50%;
    width: calc(100% + var(--bs-gutter-x, 1.5rem));
    transform: translateX(-50%);
    border-radius: inherit;
    border: 1px solid var(--ci-border);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(2px);
    box-shadow: var(--ci-shadow-sm);
    transition:
        width 0.35s ease,
        border-radius 0.35s ease,
        background-color 0.35s ease,
        box-shadow 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ci-navbar-container,
    .ci-navbar::before {
        transition: none;
    }
}

.ci-brand-main,
.ci-brand-sub {
    color: var(--ci-primary);
}

.ci-brand-main {
    font-size: 0.875rem;
}

.ci-brand-sub {
    font-size: 0.8125rem;
}

.ci-nav-link {
    position: relative;
    color: var(--ci-heading);
    transition: color 0.25s ease;
    font-size: 1rem;
    font-weight: 400;
}

.ci-nav-link::after {
    content: "";
    position: absolute;
    inset-inline-start: 0.5rem;
    bottom: -0.35rem;
    width: 0;
    height: 3px;
    border-radius: var(--ci-radius-pill);
    background: var(--ci-gradient-brand);
    transition: width 0.25s ease;
}

.ci-nav-link:hover,
.ci-nav-link.active,
.ci-nav-link:focus {
    /* color: var(--ci-primary) !important;
    background: linear-gradient(
        90deg,
        rgba(13, 204, 194, 0.1) 0%,
        rgba(61, 24, 132, 0.1) 100%
    );
    border-radius: 50px; */
    font-weight: 700;
}

.ci-nav-link:hover::after,
.ci-nav-link.active::after,
.ci-nav-link:focus::after {
    width: calc(100% - 1rem);
}

.ci-lang-btn {
    min-height: 40px;
    border: 1px solid #a9a5b7;
    background: var(--ci-white);
    color: var(--ci-heading);
}

.ci-lang-btn:hover {
    background:
        linear-gradient(var(--ci-white), var(--ci-white)) padding-box,
        var(--ci-gradient-brand) border-box;
}

.ci-lang-btn:hover i,
.ci-lang-btn:hover span {
    display: inline-block;
    background: var(--ci-gradient-brand);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.ci-gradient-btn {
    height: 50px;

    padding: 12px 100px 20px 100px;
    color: var(--ci-white) !important;
    background: var(--ci-gradient-brand);
    box-shadow: 0 10px 30px rgba(60, 33, 136, 0.18);
    border: 0;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ci-gradient-btn:hover,
.ci-gradient-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(60, 33, 136, 0.24);
}

.ci-hero-title {
    font-size: clamp(2.6rem, 5vw, 3.3rem);
    /* line-height: 1.12; */
    letter-spacing: -0.04em;
    /* margin-bottom: 10px; */
}

.ci-hero-title span {
    background: linear-gradient(90deg, var(--ci-primary), var(--ci-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ci-hero-subtitle {
    font-size: clamp(1.55rem, 3vw, 1.4rem);
    line-height: 1.45;
    color: #16152a;
}

.ci-hero-description {
    color: var(--ci-body);
    max-width: 750px;
    font-size: 1.05rem;
    line-height: 1.85;

    font-weight: 700;
}

.ci-hero-btn {
    min-width: 205px;
    height: 50px;
    padding-top: 13px;
}
.contact-hero-title {
    font-size: 30px;
    font-weight: 600;
}
.contact-hero-description {
    font-size: 16px;
    font-weight: 400;
}
.ci-sidebar-contact-us {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 80;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    height: 100vh;
    overflow: hidden;
    z-index: 9999;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.4s ease,
        opacity 0.3s ease,
        visibility 0.4s ease;
    backdrop-filter: blur(3px);
}

.ci-sidebar-contact-us.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.ci-sidebar-contact-us .content-form {
    padding: 10px 30px;
    width: 50%;
    background: #fff;
    border-radius: 30px 0 0 30px;
    overflow-y: scroll;
    height: 100vh;
    max-height: 100vh;

    overflow-y: auto;
    overflow-x: hidden;
}
.close-modal {
    right: 46%;
    border: 2px solid #292d31;
    font-size: 35px;
    line-height: 0.2;
    outline: 0;
    padding: 0px;
    border-radius: 50%;
    top: 8px;
    width: 30px;
    height: 30px;
    text-align: center;
    padding-top: 2px;
}
.close-modal i {
    font-size: 20px;
}
.ci-sidebar-contact-us .ci-section-title {
    font-size: 1.6rem;
}
.ci-sidebar-contact-us .ci-section-description {
    font-size: 1rem;
}
.ci-hero-botton {
    z-index: 1080;
    position: fixed;
    overflow: visible;
    height: 124px;
}
.ci-hero-whatsapp {
    bottom: 0;
    border-color: green;
    color: green;
}
.ci-hero-calculator-project {
    top: 0;
    border-color: var(--ci-accent) !important;
    background: none;
}

.ci-hero-calculator-project,
.ci-hero-whatsapp {
    position: absolute;
    right: 24px;
    display: inline-flex;
    align-items: center;
    padding: 14px 18px;
    border-radius: 30px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid;
}

.ci-hero-whatsapp a {
    display: inline-flex;
    align-items: center;
    color: green;
    text-decoration: none;
    font-size: 18px;
    font-weight: 800;
}

.ci-hero-action-label {
    display: block;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 0;
    margin-inline-end: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-width 0.35s ease,
        margin-inline-end 0.35s ease,
        opacity 0.2s ease;
}

.ci-hero-calculator-project:hover .ci-hero-action-label,
.ci-hero-calculator-project:focus .ci-hero-action-label,
.ci-hero-whatsapp:hover .ci-hero-action-label,
.ci-hero-whatsapp:focus-within .ci-hero-action-label {
    max-width: 320px;
    margin-inline-end: 10px;
    opacity: 1;
    color: #fff;
}

.ci-hero-calculator-project .ci-hero-action-icon {
    flex-shrink: 0;
    margin: 0;
    line-height: 1;
}

.ci-hero-calculator-project:hover,
.ci-hero-calculator-project:focus {
    background: var(--ci-gradient-brand);
    -webkit-text-fill-color: initial;
    color: #fff;
}

.ci-hero-whatsapp:hover,
.ci-hero-whatsapp:focus-within {
    background-color: green;
}

.ci-hero-whatsapp:hover a,
.ci-hero-whatsapp:focus-within a {
    color: #fff;
}

.ci-hero-whatsapp i,
.ci-hero-calculator-project i {
    font-size: 20px;
    flex-shrink: 0;
    margin-right: 0;
    /* color: #fff; */
}

#openCalculator {
    width: 56px;
    height: 56px;
    padding: 0 17px;
    gap: 0;
    /* background: #fff; */
    color: var(--ci-primary);
    -webkit-text-fill-color: currentColor;
    transition:
        width 0.3s ease,
        background 0.3s ease;
}

#openCalculator,
.ci-hero-whatsapp,
.question_mark,
.exclamation_mark,
.faq-img {
    animation: ciHeroActionFloat 3s ease-in-out infinite;
}

#openCalculator:hover,
#openCalculator:focus-visible,
.ci-hero-whatsapp:hover,
.ci-hero-whatsapp:focus-within {
    animation-play-state: paused;
}

@keyframes ciHeroActionFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    #openCalculator,
    .ci-hero-whatsapp {
        animation: none;
    }
}

#openCalculator .ci-hero-action-label {
    flex: 0 0 0;
    width: 0;
    max-width: 0;
    margin: 0;
    visibility: hidden;
}

#openCalculator:hover,
#openCalculator:focus-visible {
    width: max-content;
    background: var(--ci-gradient-brand);
    color: #fff;
}

#openCalculator:hover .ci-hero-action-label,
#openCalculator:focus-visible .ci-hero-action-label {
    flex: 1 1 auto;
    width: auto;
    max-width: max-content;
    margin-inline-end: 10px;
    visibility: visible;
    opacity: 1;
}

.ci-outline-gradient-btn {
    height: 50px;
    color: var(--ci-primary) !important;
    padding-top: 12px;
    background:
        linear-gradient(var(--ci-white), var(--ci-white)) padding-box,
        var(--ci-gradient-brand) border-box;
    border: 2px solid transparent;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ci-outline-gradient-btn:hover,
.ci-outline-gradient-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(60, 33, 136, 0.12);
}

.actions_calculator {
    height: 40px;
    padding-top: 5px;
    font-weight: 700;
}

.actions_calculator .ci-calculator-label,
.start-project span,
.ci-hero-calculator-project .ci-hero-action-icon {
    display: inline-block;
    background: var(--ci-gradient-brand);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

#openCalculator:hover .ci-hero-action-icon {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
}

.ci-stats-card {
    max-width: 700px;

    border: 1px solid var(--ci-border-strong);
    border-radius: var(--ci-radius-md);
    /* background: rgba(246, 242, 251, 0.86); */
    background: #3d18840d;

    box-shadow: 0 20px 70px rgba(60, 33, 136, 0.12);
    overflow: hidden;
}

.ci-stat-cell:not(:last-child) {
    border-inline-end: 1px solid #b7aecb;
}

.ci-stat-value {
    color: var(--ci-primary);
    font-size: clamp(1.7rem, 2.3vw, 2rem);
}

.ci-stat-label {
    color: var(--ci-primary);
    font-size: 0.75rem;
    /* font-weight: 300; */
}

.ci-orbit-wrapper {
    position: relative;
    width: 100%;
    max-width: 780px;
    aspect-ratio: 1;
    margin-inline: auto;
}

.ci-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1.5px dashed rgba(60, 33, 136, 0.48);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.ci-orbit-1 {
    width: 51.9565%;
    height: 51.9565%;
    background: radial-gradient(
        circle,
        rgba(60, 33, 136, 0.08),
        transparent 70%
    );
}

.ci-orbit-2 {
    width: 70.8696%;
    height: 70.8696%;
}

.ci-orbit-3 {
    width: 86.9565%;
    height: 86.9565%;
}

.ci-center-circle {
    position: absolute;
    width: 31.9565%;
    height: 31.9565%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        #fff 0 34%,
        rgba(60, 33, 136, 0.18) 35% 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.ci-orbit-wrapper .ci-tech-card img {
    width: 48%;
    height: auto;
}

.ci-orbit-wrapper .ci-center-circle img {
    width: 25%;
    height: auto;
}

.ci-center-logo {
    width: 84px;
    height: 84px;
}

.ci-center-logo::before,
.ci-center-logo::after {
    width: 24px;
    height: 88px;
    left: 30px;
    top: -2px;
}

.ci-tech-card {
    position: absolute;
    width: 8.2609%;
    height: 8.2609%;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--ci-border);
    box-shadow: var(--ci-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--ci-primary);
}

.ci-orbit-wrapper .ci-tech-card,
.ci-orbit-wrapper .ci-orbit-dot {
    offset-path: circle(var(--ci-orbit-radius) at 50% 50%);
    offset-anchor: center;
    offset-rotate: 0deg;
    offset-distance: var(--ci-orbit-phase);
    animation: ciTechOrbit var(--ci-orbit-duration, 40s) linear infinite;
}

.ci-orbit-wrapper .ci-tech-card,
.ci-orbit-wrapper .ci-orbit-dot {
    inset: 0 auto auto 0;
}

@keyframes ciTechOrbit {
    from {
        offset-distance: var(--ci-orbit-phase);
    }
    to {
        offset-distance: calc(var(--ci-orbit-phase) + 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ci-orbit-wrapper .ci-tech-card,
    .ci-orbit-wrapper .ci-orbit-dot {
        animation: none;
    }
}

.ci-tech-aws {
    --ci-orbit-radius: 43.4783%;
    --ci-orbit-phase: 58%;
    --ci-orbit-duration: 48s;
    color: #222;
}

.ci-tech-flutter {
    --ci-orbit-radius: 25.9783%;
    --ci-orbit-phase: 68%;
    --ci-orbit-duration: 32s;
    color: #54b9de;
}

.ci-tech-python {
    --ci-orbit-radius: 43.4783%;
    --ci-orbit-phase: 78%;
    --ci-orbit-duration: 48s;
}

.ci-tech-html {
    --ci-orbit-radius: 35.4348%;
    --ci-orbit-phase: 88%;
    --ci-orbit-duration: 40s;
    color: #df5528;
}

.ci-tech-react {
    --ci-orbit-radius: 35.4348%;
    --ci-orbit-phase: 3%;
    --ci-orbit-duration: 40s;
    color: #69cde7;
}

.ci-tech-sql {
    --ci-orbit-radius: 25.9783%;
    --ci-orbit-phase: 15%;
    --ci-orbit-duration: 32s;

    color: #111;
    font-size: 0.9rem;
}

.ci-tech-js {
    --ci-orbit-radius: 43.4783%;
    --ci-orbit-phase: 28%;
    --ci-orbit-duration: 48s;
    color: #111;
    font-size: 0.95rem;
}

.ci-tech-swift {
    --ci-orbit-radius: 35.4348%;
    --ci-orbit-phase: 47%;
    --ci-orbit-duration: 40s;
    color: #f16c46;
}

.ci-orbit-dot {
    position: absolute;
    width: 1.6304%;
    height: 1.6304%;
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(60, 33, 136, 0.16);
}

.ci-dot-1 {
    --ci-orbit-radius: 43.4783%;
    --ci-orbit-phase: 64%;
    --ci-orbit-duration: 48s;

    background: #d6ad36;
}

.ci-dot-2 {
    --ci-orbit-radius: 25.9783%;
    --ci-orbit-phase: 48%;
    --ci-orbit-duration: 32s;
    background: #98c2df;
}

.ci-dot-3 {
    --ci-orbit-radius: 43.4783%;
    --ci-orbit-phase: 85%;
    --ci-orbit-duration: 48s;
    background: #b5a0ce;
}

.ci-dot-4 {
    --ci-orbit-radius: 35.4348%;
    --ci-orbit-phase: 96%;
    --ci-orbit-duration: 40s;
    background: #93c7dd;
}

.ci-dot-5 {
    --ci-orbit-radius: 43.4783%;
    --ci-orbit-phase: 32%;
    --ci-orbit-duration: 48s;
    background: var(--ci-primary);
}

.ci-dot-6 {
    --ci-orbit-radius: 25.9783%;
    --ci-orbit-phase: 82%;
    --ci-orbit-duration: 32s;
    background: #d2a52d;
}

/* =========================================================
   About
========================================================= */
.ci-about-section,
.ci-footer-section {
    /* background: var(--ci-gradient-dark); */
    color: var(--ci-white);
}

.ci-dark-pattern {
    position: absolute;
    pointer-events: none;
    opacity: 0.85;
}

/* .ci-dark-pattern::before,
.ci-dark-pattern::after {
    content: "";
    position: absolute;
    border: 2px dashed rgba(85, 200, 195, 0.55);
    border-radius: 80px;
    transform: rotate(-45deg);
} */

.ci-dark-pattern-start {
    width: 383px;
    /* height: 560px; */
    inset-inline-end: -16px;
    top: 6px;
}

.ci-dark-pattern-start::before {
    width: 130px;
    height: 520px;
    left: 130px;
    top: -20px;
}

.ci-dark-pattern-start::after {
    width: 130px;
    height: 420px;
    left: 210px;
    top: 170px;
    border-color: rgba(60, 33, 136, 0.7);
}

.ci-section-head-dark {
    max-width: 100%;
}

.ci-about-paragraphs {
    max-width: 100%;
    color: rgba(255, 255, 255, 0.82);
    line-height: 2.1;
    font-size: 1.25rem;
    font-weight: 700;
}

/* .ci-about-paragraphs p {
    color: rgba(255, 255, 255, 0.82);
    line-height: 2.1;
    font-size: 1.05rem;
    font-weight: 700;
} */

.ci-dark-divider {
    position: relative;
    width: 100%;
    height: 10px;
    background: transparent;
    overflow: hidden;
}

.ci-dark-divider::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 15%,
        rgba(255, 255, 255, 0.47) 50%,
        rgba(255, 255, 255, 0.25) 85%,
        transparent 100%
    );

    clip-path: polygon(
        0 50%,
        42% 38%,
        51% 12%,
        58% 38%,
        100% 50%,
        58% 62%,
        50% 60%,
        42% 62%
    );
}

.ci-about-card {
    min-height: 165px;
    padding: 2rem;
    border-radius: var(--ci-radius-lg);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 20px 60px rgba(0, 0, 0, 0.22);
    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.ci-about-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.18);
}

.ci-about-card h3 {
    color: var(--ci-white);
    font-size: 1.25rem;
    font-weight: 900;
}

.ci-about-card .description {
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.8;
    margin: 1rem 0 0;
    text-align: justify;
}

.ci-card-line {
    display: block;
    width: 95px;
    height: 2px;
    margin-top: 1.25rem;
    margin-inline-start: auto;
    background: var(--ci-gradient-brand);
}

/* =========================================================
   Process
========================================================= */
/* .ci-process-section,
.ci-services-section,
.ci-projects-section,
.ci-partners-section,
.ci-testimonials-section,
.ci-faq-section,
.ci-contact-section {
    background: var(--ci-gradient-soft);
} */

/* Browser frame */
.ci-showcase-block {
    position: relative;
    margin-bottom: 72px;
}

.ci-browser-frame {
    overflow: hidden;
    border-radius: 22px 22px 28px 28px;
    background: var(--ci-gradient-frame);
    box-shadow: var(--ci-shadow-lg);
}

.ci-browser-topbar {
    height: 27px;
    background: #3a3a3e;
    border-radius: 22px 22px 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-inline: 22px;
}

.ci-window-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.ci-dot-red {
    background: #ff5f57;
}

.ci-dot-yellow {
    background: #ffbd2e;
}

.ci-dot-green {
    background: #28c840;
}

.ci-browser-canvas {
    height: auto;
    /* min-height: 570px; */
    padding: 36px 40px;
    background: var(--ci-gradient-frame);
}

/* Image-based device frames used by the project card component. */
.ci-project-macbook {
    position: relative;
    width: 100%;
    aspect-ratio: 2098 / 1382;
    /* background: url("../images/MacBook Pro.png") center / 100% 100% no-repeat; */
}

.ci-project-row .ci-project-macbook {
    width: 88%;
    /* margin-inline: auto; */
}

.ci-project-macbook-screen {
    position: absolute;
    /* inset: 8% 9.5% 11.5%; */
    overflow: hidden;
    border-radius: 3% 3% 0 0;
}

.ci-project-macbook-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.ci-project-device-showcase {
    display: flex;
    justify-content: center;
}

.ci-project-device {
    position: relative;
    width: 181px;
    /* height: 328px; */
    /* max-width: 100%;
    aspect-ratio: 396 / 706;
    overflow: hidden; */
}

.ci-project-device-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Two screenshots for a primary mobile project, kept within the card column. */
.ci-project-device-pair {
    position: relative;
    display: block;
    width: min(100%, 540px);
    aspect-ratio: 540 / 620;
    margin-inline: auto;
    isolation: isolate;
    /* background: radial-gradient(
        ellipse at 50% 80%,
        rgba(60, 33, 136, 0.1),
        transparent 65%
    ); */
}

.ci-project-device-pair .ci-project-device {
    position: absolute;
    width: 49%;
    filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.1));
}

.ci-project-device-pair .ci-project-device:first-child {
    top: 6%;
    left: 7%;
    z-index: 2;
    transform: none;
}

.ci-project-device-pair .ci-project-device:last-child {
    top: 28%;
    right: 5%;
    z-index: 1;
    transform: none;
}

.ci-project-device-pair .ci-project-device-left {
    aspect-ratio: 488 / 858;
}

.ci-project-device-pair .ci-project-device-right {
    aspect-ratio: 544 / 868;
}
.ci-all-project {
    width: 270px;
}
/* App section */
.ci-app-section.ci-app-mobile {
    position: absolute;
    /* top: 31%;
    right: -25px; */
    top: 30%;
    right: 10px;
}

.ci-app-section.ci-app-mobile.ci-reserve-app-mobile {
    /* left: -25px;
    right: inherit; */
}

.ci-phone-showcase {
    position: relative;
    min-height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ci-phone-frame {
    position: relative;
    width: 197px;
    min-height: 370px;
    padding: 22px 12px 36px;
    border-radius: 28px;
    /* background: var(--ci-bg-phone); */
    box-shadow: 0 26px 55px rgba(0, 0, 0, 0.2);
    background-image: url(../images/Frame_phone.png);
    background-size: cover;
    overflow: hidden;

    background-position-x: center;
}

.ci-phone-frame img {
    display: block;
    width: 100%;
    min-height: 300px;
    object-fit: cover;
    border-radius: 5px;
}

.ci-contact-section {
    background: linear-gradient(
        0deg,
        rgba(248, 249, 255, 0) 0%,
        rgba(13, 204, 194, 0.05) 100%
    );
}
.ci-contact-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent,
        #a6eeea,
        #dcf8f6,
        transparent
    );
}
.ci-process-road {
    position: relative;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(var(--step-count, 6), minmax(0, 1fr));
    gap: clamp(16px, 2vw, 32px);
    margin-top: 3rem;
    padding: 24px 12px;
}

.ci-process-wave {
    position: absolute;
    inset-inline: calc(50% / var(--step-count, 6));
    top: 60px;
    height: 150px;
    /* border-radius: 50%; */
    /* border-top: 16px solid transparent; */
    /* background:
        linear-gradient(90deg, rgba(85, 200, 195, .2), rgba(63, 136, 184, .2), rgba(60, 33, 136, .2)); */
    mask-image: url("../images/line.png");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("../images/line.png");
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
}

.ci-process-wave::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ci-gradient-process);
    background-size: 260% 100%;
    animation: ciProcessColor 4s ease-in-out infinite alternate;
}

.ci-process-step {
    position: relative;
    width: auto;
    text-align: center;
    z-index: 2;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ci-process-step h3 {
    font-size: 1.25rem;
    font-weight: 400;
}

.ci-process-step p {
    font-size: 1rem;
    font-weight: 300;
}

.ci-process-number {
    position: absolute;
    font-family: "comfortaa";
    /* inset-inline-end: 22px;
    top: -28px; */
    inset-inline-start: 0;
    top: 0;
    font-size: 7rem;
    font-weight: 900;
    color: rgba(20, 18, 37, 0.055);
    line-height: 1;
    z-index: -1;
}

/* .ci-process-step-1 .ci-process-number {
    top: 160px;
}

.ci-process-step-2 .ci-process-number {
    top: 50px;
}

.ci-process-step-3 .ci-process-number {
    top: 160px;
}

.ci-process-step-4 .ci-process-number {
    top: 50px;
}

.ci-process-step-5 .ci-process-number {
    top: 160px;
}


.ci-process-step-6 .ci-process-number {
    top: 50px;

} */

.ci-process-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--ci-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ci-accent);
    font-size: 1.65rem;
    box-shadow: var(--ci-shadow-md);
    animation: ciIconBounce 2.8s ease-in-out infinite;
    animation-delay: var(--delay);
    position: relative;
}

.ci-process-step h3 {
    font-size: 1.05rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.ci-process-step p {
    margin: 0;
    color: #505064;
    font-size: 0.9rem;
    line-height: 1.55;
    font-weight: 600;
}

/* =========================================================
   Services
========================================================= */
.ci-service-card {
    min-height: 280px;
    padding: 2.15rem;
    border: 1px solid rgba(85, 200, 195, 0.28);
    border-radius: var(--ci-radius-md);
    /* background: linear-gradient(135deg, rgba(235, 252, 251, 0.78), rgba(250, 247, 255, 0.82)); */
    background-color: #fff;
    box-shadow: var(--ci-shadow-sm);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.ci-service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--ci-shadow-lg);
}

.ci-service-top-line {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 8px;
    background: var(--ci-gradient-brand);
}

.ci-service-purple .ci-service-top-line {
    background: linear-gradient(90deg, var(--ci-purple), var(--ci-primary));
}

.ci-service-green .ci-service-top-line {
    background: linear-gradient(90deg, var(--ci-secondary), var(--ci-green));
}

.ci-service-cyan .ci-service-top-line {
    background: linear-gradient(90deg, var(--ci-secondary), var(--ci-accent));
}

.ci-service-icon {
    width: 44px;
    height: 44px;
    border-radius: 17.5px;
    color: #fff;
    background: var(--ci-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ci-service-hover-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 5px;
}

.ci-service-teal .ci-service-hover-icon {
    background: var(--ci-service-teal);
}

.ci-service-purple .ci-service-hover-icon {
    background: var(--ci-service-purple);
}

.ci-service-green .ci-service-hover-icon {
    background: var(--ci-service-green);
}

.ci-service-blue .ci-service-hover-icon {
    background: var(--ci-service-blue);
}

.ci-service-cyan .ci-service-hover-icon {
    background: var(--ci-service-cyan);
}

.ci-service-teal .ci-service-icon {
    color: var(--ci-service-teal);
    background: var(--ci-service-light-teal);
}

.ci-service-blue .ci-service-icon {
    color: var(--ci-service-blue);
    background: var(--ci-service-light-blue);
}

.ci-service-blue.ci-service-card .ci-service-hover-text {
    color: var(--ci-service-blue);
}

.ci-service-teal.ci-service-card .ci-service-hover-text {
    color: var(--ci-service-teal);
}

.ci-service-purple .ci-service-icon {
    color: var(--ci-service-purple);
    background: var(--ci-service-light-purple);
}

.ci-service-purple.ci-service-card .ci-service-hover-text {
    color: var(--ci-service-purple);
}

.ci-service-green .ci-service-icon {
    color: var(--ci-service-green);
    background: var(--ci-service-light-green);
}

.ci-service-green.ci-service-card .ci-service-hover-text {
    color: var(--ci-service-green);
}

.ci-service-cyan .ci-service-icon {
    color: var(--ci-service-cyan);
    background: var(--ci-service-light-cyan);
}

.ci-service-cyan.ci-service-card .ci-service-hover-text {
    color: var(--ci-service-cyan);
}

.ci-service-card h3 {
    font-size: 1.25rem;
    font-weight: bold;
}

/* .ci-service-cyan .ci-service-card h3{
    color: var(--ci-service-cyan); */
/* } */

.ci-service-card .ci-service-desc {
    font-size: 1.25rem;
    color: var(--ci-muted);
    font-weight: 300;
    line-height: 1.6;
    font-size: 1rem;
    text-align: justify;
}

.ci-service-summary {
    color: var(--ci-muted);
    font-weight: 700;
    line-height: 1.6;
}

.ci-service-list li {
    color: #5c6175;
    font-size: 0.86rem;
    line-height: 1.7;
    font-weight: 700;
}

.ci-service-list li span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ci-accent);
    display: inline-block;
    margin-inline-end: 0.55rem;
}

.ci-service-hover-box {
    position: absolute;
    inset: 9px 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(
        135deg,
        rgba(235, 252, 251, 1),
        rgba(250, 247, 255, 1)
    );
    display: flex;
    align-items: safe center;
    justify-content: center;
    padding: 1.4rem;
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
    color: var(--ci-muted);
    text-align: center;
    direction: rtl;
}

.ci-service-card:hover .ci-service-hover-box {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ci-service-hover-inner i {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* background: rgba(255, 255, 255, .2); */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* margin-bottom: 1rem; */
    font-size: 1.2rem;
    color: #fff;
}

.ci-service-hover-inner h4 {
    font-weight: 900;
    margin-bottom: 0.7rem;
}

.ci-service-hover-inner {
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.86);
    font-weight: 700;
    line-height: 1.8;
}

/* =========================================================
   Projects
========================================================= */

.ci-projects-section .show-image {
    border-radius: 15px;
}

.ci-projects-section .count-project {
    width: 123px;
    border-radius: 15px;
    background: linear-gradient(
        85deg,
        rgba(85, 200, 195, 0.7),
        rgba(60, 33, 136, 0.7)
    );
    /* background: var(--ci-gradient-brand); */
    /* background: linear-gradient(
        90deg,
        rgba(13, 204, 194, 0.25) 0%,
        rgba(61, 24, 132, 0.25) 100%
    ); */

    height: 123px;
    position: absolute;
    bottom: -50px;
    left: -43px;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--ci-primary);
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
}

.ci-projects-section .count-project::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: -1;
    border-radius: 15px;
}

.ci-section-project-badge {
    background: #fff;
    direction: rtl;
    position: absolute;
    border-radius: 15px;
    right: -70px;
    padding: 14px;
    top: 28px;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.05);
    font-weight: 300;
    display: flex;
}

.ci-projects-section .count-project .number {
    font-size: 40px;
    font-weight: 700;
}

.ci-project-tabs {
    margin-top: 160px;
}

.ci-project-tabs .nav-link,
#faq[data-faq-page] .ci-faq-filters .btn {
    background: #ded7ee;
    color: var(--ci-primary);
    min-width: 90px;
    font-weight: 400;
    font-size: 16px;
    padding: 0.45rem 1rem;
    padding: 5px 30px;
}

.ci-project-tabs .nav-link.active,
#faq[data-faq-page] .ci-faq-filters .btn.active,
#faq[data-faq-page] .ci-faq-filters .btn:hover {
    background: var(--ci-gradient-brand);
    color: #fff;
}

.ci-project-row {
    padding-block: 70px;
}

.ci-project-label {
    color: var(--ci-heading);
    font-weight: 400;
    font-size: 1rem;
}

.ci-project-content h3 {
    max-width: 620px;
    margin: 1rem 0;
    color: #101020;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    line-height: 1.28;
}

.ci-project-divider {
    display: block;
    width: 100%;
    max-width: 520px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--ci-primary),
        transparent
    );
    margin-block: 1.25rem;
}

.ci-project-content .ci-project-content-description {
    max-width: 513px;
    color: #55536b;
    line-height: 1.9;
    font-weight: 400;
    font-size: 16px;
}

.ci-tech-tag {
    min-width: 70px;
    padding: 0.25rem 0.8rem;
    border-radius: var(--ci-radius-pill);
    background: #e5def4;
    color: var(--ci-primary);
    border: 1px solid rgba(60, 33, 136, 0.24);
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
}

.ci-device-showcase {
    position: relative;
    min-height: 360px;
}

.ci-browser-window {
    width: 86%;
    max-width: 560px;
    height: 320px;
    border-radius: 20px 20px 10px 10px;
    background: #2d2d32;
    padding-top: 28px;
    box-shadow: var(--ci-shadow-cyan);
    position: relative;
}

.ci-window-dots,
.ci-window-dots::before,
.ci-window-dots::after {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    top: 10px;
    background: #ff6868;
}

.ci-window-dots {
    left: 18px;
}

.ci-window-dots::before {
    content: "";
    left: 18px;
    background: #f5be3d;
    top: 0;
}

.ci-window-dots::after {
    content: "";
    left: 36px;
    background: #5bd16f;
    top: 0;
}

.ci-browser-content {
    height: 100%;
    background: linear-gradient(135deg, #e9fafa, #f3edff);
    padding: 26px;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 18px;
}

.ci-side-menu,
.ci-chart-area,
.ci-card-grid,
.ci-mobile-preview,
.ci-phone {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
}

.ci-side-menu {
    height: 100%;
}

.ci-chart-area {
    height: 130px;
    background: linear-gradient(135deg, #fff, #8b68e7);
}

.ci-card-grid {
    height: 95px;
    margin-top: 18px;
    background: repeating-linear-gradient(
        90deg,
        rgba(85, 200, 195, 0.45) 0 18px,
        rgba(60, 33, 136, 0.14) 18px 36px
    );
}

.ci-mobile-preview {
    position: absolute;
    right: 14%;
    bottom: 0;
    width: 145px;
    height: 280px;
    border: 16px solid #3a3a3d;
    box-shadow: var(--ci-shadow-md);
    padding: 26px 12px;
    text-align: center;
}

.ci-mobile-preview span,
.ci-phone span {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ci-gradient-brand);
    display: block;
    margin: 0 auto 1rem;
}

.ci-mobile-preview strong,
.ci-phone strong {
    display: block;
    font-size: 0.9rem;
}

.ci-mobile-preview small,
.ci-phone small {
    color: var(--ci-muted);
}

.ci-phone {
    position: absolute;
    width: 150px;
    height: 285px;
    border: 14px solid #333;
    border-radius: 22px;
    box-shadow: var(--ci-shadow-md);
    padding: 34px 14px;
    text-align: center;
}

.ci-phone-1 {
    left: 10%;
    bottom: 0;
}

.ci-phone-2 {
    left: 38%;
    top: 0;
}

.ci-phone-3 {
    right: 10%;
    bottom: 18px;
}

@media (max-width: 1000px) {
    .ci-section-project-badge {
        right: 0;
    }
    .ci-projects-section .count-project {
        left: 0;
    }
}

/* =========================================================
   Partners
========================================================= */
.ci-logo-marquee {
    width: 100%;
    overflow: hidden;
}

.ci-logo-track {
    display: flex;
    width: max-content;
    gap: 26px;
}

.ci-logo-marquee-forward .ci-logo-track {
    animation: ciMarqueeForward 28s linear infinite;
}

.ci-logo-marquee-reverse .ci-logo-track {
    animation: ciMarqueeReverse 28s linear infinite;
}

.ci-logo-marquee:hover .ci-logo-track {
    animation-play-state: paused;
}

.ci-partner-logo {
    width: 285px;
    height: 92px;
    border-radius: 16px;
    border: 1px solid var(--ci-border-strong);
    padding: 17px;
    background-color: #fff;
    box-shadow: var(--ci-shadow-sm);
    /* gap: 0.75rem;
    color: #2f3d8a;
    font-weight: 900; */
    /* overflow: hidden; */
    /* background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.92),
        rgba(245, 241, 251, 0.9)
    ); */
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

/* .ci-partner-logo img {
    max-width: 100%;
    width: 100%;
} */

.ci-partner-logo i {
    color: #d7a533;
    font-size: 1.5rem;
}

/* =========================================================
   Testimonials
========================================================= */
.ci-testimonial-carousel {
    padding-inline: 75px;
}

.ci-testimonial-card {
    min-height: 410px;
    padding: 2rem;
    border-radius: var(--ci-radius-md);
    border: 1px solid var(--ci-border-strong);
    background: #ebe7f4;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

/* .ci-testimonial-card:hover {
    transform: translateY(-10px);
    color: var(--ci-white);
    background:
        radial-gradient(circle at 0% 20%, rgba(255, 255, 255, .25), transparent 32%),
        radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .22), transparent 30%),
        var(--ci-gradient-card-hover);
} */

.ci-quote-line,
.ci-quote-box {
    border-radius: 12px;
    padding: 1rem 1.25rem;
    line-height: 1.9;
    font-weight: 700;
}

.ci-quote-line {
    background: rgba(255, 255, 255, 0.8);
    color: #5f5c73;
    margin-bottom: 1.15rem;
}

.ci-quote-box {
    background: var(--ci-white);
    color: #454057;
    min-height: 140px;
    margin-bottom: 1.15rem;
}

/* .ci-testimonial-card:hover .ci-quote-line,
.ci-testimonial-card:hover .ci-quote-box {
    background: rgba(255, 255, 255, .18);
    color: var(--ci-white);
} */

.ci-testimonial-card h3 {
    font-size: 1.1rem;
    font-weight: 900;
}

.ci-testimonial-card p {
    color: var(--ci-muted);
    font-weight: 700;
    margin: 0;
}

.ci-testimonial-card hr {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--ci-primary),
        transparent
    );
    margin-block: 1.25rem;
    margin-top: 15px;
}

.ci-carousel-arrow {
    top: 50%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ci-gradient-brand);
    opacity: 1;
    transform: translateY(-50%);
}

.ci-carousel-arrow i {
    font-size: 1.4rem;
}

.ci-testimonials-wrapper {
    position: relative;
}

/* Swiper نفسه */
.ci-testimonials-swiper {
    padding: 10px 0 20px;
}

.ci-testimonials-swiper .swiper-slide {
    height: auto;
}

/* Buttons */
.ci-swiper-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;

    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;

    background: var(--ci-white, #ffffff);
    color: var(--ci-primary, #3c2188);

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

    box-shadow: 0 14px 35px rgba(20, 18, 37, 0.14);
    transition: 0.25s ease;
}

.ci-swiper-arrow:hover {
    background: var(--ci-primary, #3c2188);
    color: #fff;
}

/* خارج الكونتينر يمين ويسار */
.ci-swiper-prev {
    left: 35px;
}

.ci-swiper-next {
    right: 35px;
}

/* =========================================================
   FAQ
========================================================= */
.ci-faq-illustration {
    position: relative;
    width: 330px;
    max-width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ci-faq-illustration::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        rgba(20, 18, 37, 0.1) 2px,
        transparent 2px
    );
    background-size: 22px 22px;
}

.ci-faq-illustration span {
    position: relative;
    font-size: 6.5rem;
    font-weight: 900;
    color: rgba(60, 33, 136, 0.16);
}

.ci-faq-illustration strong {
    position: absolute;
    right: 0;
    bottom: 10px;
    font-size: 8rem;
    line-height: 1;
    background: var(--ci-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ci-faq-item {
    margin-bottom: 1rem;
    border: 0;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(20, 18, 37, 0.08);
}

.ci-faq-item .accordion-button {
    min-height: 70px;
    padding: 1.25rem 1.5rem;
    background: var(--ci-white);
    color: #070611;
    font-size: 1.15rem;
    font-weight: 400;
    box-shadow: none;
}

.ci-faq-item .accordion-button:not(.collapsed) {
    background: var(--ci-gradient-brand);
    color: var(--ci-white);
}

.ci-faq-item .accordion-body {
    padding: 1.5rem;
    color: #333142;
    line-height: 1.8;
    font-weight: 400;
    background: var(--ci-white);
}

.ci-faq-accordion .faq-btn {
    height: 50px;
    padding: 12px 100px 20px 100px;
}
/* =========================================================
   Calculator CTA
========================================================= */
/* .ci-calculator-cta-section {
    background: var(--ci-white);
} */

.ci-calculator-card {
    margin-inline: auto;
    min-height: 420px;
    padding: 4.5rem 2rem;
    border-radius: 110px 110px 70px 70px;
    background-image: url("../images/rectangle.png");
    color: var(--ci-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    isolation: isolate;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.ci-calculator-card h2 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: #1e1e1e;
}

.ci-calculator-card p {
    max-width: 560px;
    color: #1e1e1e;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 700;
}

.ci-dark-pattern-card {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
}

/*
.ci-dark-pattern-card::before {
    width: 120px;
    height: 360px;
    left: 8%;
    top: 0;
}

.ci-dark-pattern-card::after {
    width: 120px;
    height: 360px;
    right: 8%;
    top: 0;
    border-color: rgba(60, 33, 136, 0.8);
} */

.ci-calculator-cta-img-left {
    width: 262px;
    position: absolute;
    left: 0;
    top: 0;
}

.ci-calculator-cta-img-right {
    width: 260px;
    position: absolute;
    right: 0px;
    top: 0;
}

.ci-white-btn {
    min-width: 280px;
    min-height: 58px;
    background: #fff;
    color: var(--ci-primary) !important;
}

.ci-white-btn:hover {
    min-width: 280px;
    min-height: 58px;
    background: #fff;
    color: var(--ci-primary) !important;
    border: var(--ci-primary);
}

.ci-calculator-shape {
    position: relative;
    width: min(96%, 1800px);
    min-height: 430px;
    margin: 0 auto;
    background: #0d0a20;
    color: #fff;
    overflow: hidden;

    clip-path: url(#ciRoundedShape);
    -webkit-clip-path: url(#ciRoundedShape);
}

/* =========================================================
   Contact
========================================================= */
.ci-booking-card {
    padding: 2.2rem;
    border: 1px solid rgba(20, 18, 37, 0.08);
    border-radius: var(--ci-radius-lg);
    background: #fff;
    box-shadow: 0 20px 60px rgba(20, 18, 37, 0.07);
}

.ci-round-nav {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--ci-gradient-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ci-booking-card h3,
.ci-form-subtitle {
    font-weight: 400;
    font-size: 1.3rem;
}

.ci-form-subtitle small {
    color: var(--ci-muted);
}

.ci-days-grid,
.ci-time-grid {
    display: grid;
    gap: 1rem;
}

.ci-days-grid {
    grid-template-columns: repeat(6, 1fr);
}

.ci-time-grid {
    grid-template-columns: repeat(5, 1fr);
}

.ci-time-grid .ci-time-option:last-child {
    grid-column: 1 / -1;
}

.ci-day-option,
.ci-time-option {
    min-height: 74px;
    border: 1px solid var(--ci-border);
    border-radius: 10px;
    background: #f7f7fb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ci-heading);
    font-weight: 800;
}

.ci-day-option input,
.ci-time-option input {
    display: none;
}

.ci-day-option.active {
    color: #fff;
    background: var(--ci-gradient-brand);
    box-shadow: var(--ci-shadow-cyan);
    border: none;
}

.ci-time-option.active {
    color: var(--ci-purple);
    border: 1px solid var(--ci-purple);
}

.ci-day-option.disabled,
.ci-time-option.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ci-time-option {
    min-height: 48px;
    font-size: 0.9rem;
    font-weight: 400;
}

.ci-field-label {
    display: block;
    margin-bottom: 0.55rem;
    font-weight: 400;
    font-size: 16px;
}

.ci-input-wrap {
    height: 40px;
    border: 1px solid var(--ci-border);
    border-radius: 8px;
    background: #f8f8fc;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-inline: 0.9rem;
}

.ci-input-wrap i {
    color: #b5a7dc;
}

.ci-input-wrap input,
.ci-textarea {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-weight: 300;
}

.ci-textarea {
    height: 100px;
    border: 1px solid var(--ci-border);
    border-radius: 8px;
    background: #f8f8fc;
    padding: 0.9rem;
}

.ci-contact-card {
    min-height: 340px;
    padding: 2.8rem;
    border-radius: var(--ci-radius-lg);
    color: #fff;
    background:
        radial-gradient(
            circle at 0 60%,
            rgba(255, 255, 255, 0.14),
            transparent 24%
        ),
        var(--ci-gradient-brand);
    overflow: hidden;
    position: relative;
}

.ci-contact-card .ci-contact-image {
    width: 142px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.info-text {
    font-size: 12px;
    margin-bottom: 6px;
    font-weight: 400;
}
.info-value {
    font-size: 16px;
    font-weight: 400;
}
.ci-days-grid {
    grid-template-columns: repeat(7, 1fr);
}

/* .ci-contact-card::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 90px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    left: -60px;
    top: 120px;
    transform: rotate(-45deg);
} */

.ci-contact-card h3 {
    position: relative;
    font-weight: 900;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

.ci-contact-card p {
    position: relative;
    color: rgba(255, 255, 255, 0.83);
    line-height: 1.8;
    font-weight: 400;
}

.ci-contact-card li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.3rem;
    font-weight: 800;
}

.ci-contact-card li i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ci-secondary);
}

.ci-map-placeholder {
    height: 400px;
    border-radius: 22px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(85, 200, 195, 0.35) 20%,
            transparent 20% 22%,
            rgba(60, 33, 136, 0.08) 22% 24%,
            transparent 24%
        ),
        repeating-linear-gradient(0deg, #ece8da 0 1px, #f8f3e8 1px 38px),
        repeating-linear-gradient(
            90deg,
            transparent 0 48px,
            rgba(191, 140, 76, 0.25) 48px 50px
        );
    display: flex;
    align-items: center;
    justify-content: center;
    color: #765a28;
    font-weight: 900;
}

.ci-map-placeholder iframe {
    width: 100%;
    max-width: 100%;
    height: 100%;
}

/* =========================================================
   Footer
========================================================= */
.ci-footer-section {
    padding-block: 80px 60px;
}

.ci-footer-section.ci-footer-light {
    padding-block: 36px 44px;
    /* background: #fff; */
    color: #333;
}

.ci-footer-light .ci-footer-top {
    display: flex;
    align-items: center;
    gap: clamp(40px, 7vw, 112px);
    min-height: 176px;
    padding: 36px clamp(28px, 5vw, 80px);
    border: 1px solid #8ae8e7;
    border-radius: 23px;
    background: linear-gradient(110deg, #fcfefe, #f2fbfa);
}

.ci-footer-light .ci-footer-brand {
    display: block;
    flex: 0 0 auto;
}

.ci-footer-light .ci-footer-brand img {
    display: block;
    width: clamp(220px, 20vw, 260px);
    max-width: 100%;
    height: auto;
}

.ci-footer-light .ci-footer-navigation {
    flex: 1;
    min-width: 0;
}

.ci-footer-light .ci-footer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ci-footer-light .ci-footer-nav a {
    color: #333;
    font-size: 1.05rem;
    font-weight: 600;
}

.ci-footer-light .ci-footer-nav a:hover {
    color: var(--ci-primary);
}

.ci-footer-light .ci-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 50px;
}

.ci-footer-light .ci-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 2.5vw, 42px);
    direction: ltr;
}

.ci-footer-light .ci-social-links a {
    width: 46px;
    height: 46px;
    border: 1px solid #e6e5ee;
    border-radius: 17px;
    background: #f7f7fa;
    color: #777298;
    font-size: 1.4rem;
}

.ci-footer-light .ci-social-links a:hover {
    background: #eeeaf7;
    color: var(--ci-primary);
    transform: translateY(-3px);
}

.ci-footer-light a:focus-visible {
    outline: 2px solid var(--ci-primary);
    outline-offset: 5px;
}

.ci-footer-light .ci-footer-copyright {
    margin: 0;
    color: #666;
    font-size: 1rem;
    font-weight: 400;
    unicode-bidi: plaintext;
}

@media (max-width: 991.98px) {
    .ci-footer-light .ci-footer-top {
        flex-direction: column;
        gap: 32px;
    }

    .ci-footer-light .ci-footer-navigation {
        width: 100%;
    }

    .ci-footer-light .ci-footer-bottom {
        flex-direction: column;
        margin-top: 32px;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .ci-footer-light .ci-footer-top {
        padding: 28px 20px;
    }

    .ci-footer-light .ci-footer-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        text-align: center;
    }

    .ci-footer-light .ci-social-links {
        justify-content: center;
        gap: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ci-footer-light .ci-social-links a {
        transition: none;
    }
}

.ci-dark-pattern-footer {
    width: 320px;
    height: 521px;
    inset-inline-end: -2px;
    top: -43px;
}

.ci-dark-pattern-footer img {
    max-width: 100%;
}

/* .ci-dark-pattern-footer::before {
    width: 120px;
    height: 500px;
    left: 140px;
    top: -10px;
}

.ci-dark-pattern-footer::after {
    width: 120px;
    height: 390px;
    left: 210px;
    top: 185px;
    border-color: rgba(60, 33, 136, 0.8);
} */

.ci-footer-brand {
    color: var(--ci-white);
    text-decoration: none;
}

.ci-footer-brand strong {
    font-size: 1.45rem;
}

.ci-footer-brand span span {
    font-size: 1.15rem;
}

.ci-footer-nav a {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.1rem;
    font-weight: 900;
    text-decoration: none;
    transition: color 0.25s ease;
}

.ci-footer-nav a:hover {
    color: var(--ci-secondary);
}

.ci-footer-line {
    height: 1px;
    background: rgba(255, 255, 255, 0.14);
}

.ci-footer-section p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    font-weight: 700;
}

.ci-social-links a {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    background: var(--ci-primary-light);
    color: rgba(107, 104, 145, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        color 0.25s ease,
        background 0.25s ease;
    border: 1px solid rgba(107, 104, 145, 1);
}

.ci-social-links a:hover {
    transform: translateY(-5px);
    color: #fff;
    background: var(--ci-gradient-brand);
}

/* .ci-social-links i {
    color: rgba(107, 104, 145, 1);
    font-size: 18px;

} */

/* =========================================================
   Animations
========================================================= */
@keyframes ciFloat {
    0%,
    100% {
        transform: translateY(0);
    }

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

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

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

@keyframes ciProcessColor {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

@keyframes ciMarqueeForward {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes ciMarqueeReverse {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

.loading-time {
    font-size: 14px;
    font-weight: normal;
    height: 80px;
}

.consultation-submit-btn {
    height: 50px;
    width: 250px;
}
.ci-booking-days.ci-days-grid {
    grid-template-columns: repeat(7, minmax(64px, 1fr));
    overflow-x: auto;
}
.ci-booking-days .ci-day-option > span {
    font-size: 16px;
    font-weight: 400;
}
.ci-round-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.ci-booking-week-enter-active {
    transition:
        opacity 180ms ease-out,
        transform 180ms ease-out;
}
.ci-booking-week-leave-active {
    transition:
        opacity 100ms ease-in,
        transform 100ms ease-in;
}
.ci-booking-week-enter-from {
    opacity: 0;
    transform: translateY(6px);
}
.ci-booking-week-leave-to {
    opacity: 0;
    transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
    .ci-booking-week-enter-active,
    .ci-booking-week-leave-active {
        transition: none;
    }
    .ci-booking-week-enter-from,
    .ci-booking-week-leave-to {
        transform: none;
    }
}

@media (min-width: 1200px) {
    .ci-process-road {
        --wave-top: 100px;
        --wave-height: clamp(160px, 14vw, 220px);
        --process-icon-size: clamp(72px, 5.5vw, 96px);
        grid-template-columns: repeat(100, minmax(0, 1fr));
        gap: 0;
        padding: 0 0 24px;
    }

    .ci-process-road .ci-process-wave {
        inset-inline: 0;
        top: var(--wave-top);
        height: var(--wave-height);
    }

    .ci-process-road > .ci-process-step {
        --icon-center: calc(
            var(--wave-top) + var(--wave-height) * var(--wave-point)
        );
        grid-row: 1;
        margin: 0;
        padding-top: calc(
            var(--icon-center) + var(--process-icon-size) / 2 + 18px
        );
    }

    .ci-process-road > .ci-process-step:nth-of-type(odd) {
        padding-top: calc(
            var(--icon-center) - var(--process-icon-size) / 2 - 18px
        );
    }

    .ci-process-road .ci-process-copy {
        position: relative;
    }

    .ci-process-road > .ci-process-step:nth-of-type(odd) .ci-process-copy {
        transform: translateY(-152%);
    }

    .ci-process-road .ci-process-icon {
        position: absolute;
        top: calc(var(--icon-center) - var(--process-icon-size) / 2);
        inset-inline-start: calc(50% - var(--process-icon-size) / 2);
        width: var(--process-icon-size);
        height: var(--process-icon-size);
        margin: 0;
    }

    .ci-process-road .ci-process-icon img {
        width: 45%;
        height: auto;
    }

    .ci-process-road .ci-process-step-1 > .ci-process-icon {
        inset-inline-start: calc(100% - var(--process-icon-size) / 2);
        top: calc(
            var(--wave-top) + var(--wave-height) * 0.37 -
                var(--process-icon-size) / 2
        );
        animation: ciIconBounce 2.8s ease-in-out infinite;
    }

    .ci-process-road .ci-process-number {
        inset-inline-start: auto;
        inset-inline-end: 0;
        top: -24px;
        font-size: clamp(6rem, 8vw, 9rem);
    }

    .ci-process-step-1 {
        grid-column: 89 / 101;
        --wave-point: 0.62;
    }
    .ci-process-step-2 {
        grid-column: 74 / 88;
        --wave-point: 0.92;
    }
    .ci-process-step-3 {
        grid-column: 58 / 72;
        --wave-point: 0.37;
    }
    .ci-process-step-4 {
        grid-column: 40 / 54;
        --wave-point: 0.94;
    }
    .ci-process-step-5 {
        grid-column: 21 / 35;
        --wave-point: 0.055;
    }
    .ci-process-step-6 {
        grid-column: 5 / 19;
        --wave-point: 0.85;
    }

    .ci-process-road {
        direction: ltr;
    }

    /* .ci-process-road .ci-process-copy {
        direction: rtl;
    } */

    .ci-ltr .ci-process-road {
        direction: rtl;
    }

    .ci-ltr .ci-process-road .ci-process-copy {
        /* direction: ltr; */
    }
}