@charset "UTF-8";

/* ================== Taleb Theme Colors (Matched to Logo) ================== */
:root{
    --main: #6058F1;        /* Logo Purple */
    --main-dark: #3E399C;   /* Deeper Purple for hover/shadows */
    --main-mid: #4C46C0;    /* Mid Purple for gradients */
    --second: #30ECE1;      /* Logo Teal */
    --second-dark: #21A59D; /* Teal for text/icons */
    --text-dark: #231F20;   /* Logo dark */
    --gray-50: #4B4B4B;
    --light: #F3F2FF;       /* Soft purple tint background */
    --white: #FFFFFF;
}

/* ================== Utility Colors ================== */
.text-main-color {
    color: var(--main);
}

.text-second-color {
    color: var(--second-dark);
}

.text-light-color {
    color: rgb(247, 250, 252);
}

.text-purple {
    color: var(--main);
}

.text-dark-50 {
    color: rgb(75, 75, 75);
}

.bg-main-color {
    background-color: var(--main);
}

.bg-second-color {
    background-color: var(--second);
}

.bg-light-color {
    background-color: var(--light);
}

/* ================== Base ================== */

* {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    box-sizing: border-box;
    scroll-behavior: smooth;
    /*overscroll-behavior: none;*/
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: "IBM Plex Sans Arabic", sans-serif;
    background-color: #fff;
    color: var(--text-dark);
    overflow-x: hidden;
    position: relative;
    scroll-behavior: smooth;
}

.sans {
    font-family: "misans", sans-serif;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

button {
    border: none;
    border: 0 !important;
    background-color: transparent;
}

input,
textarea {
    box-shadow: none;
    border: none;
    outline: none;
    background: none;
}

input {
    border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    -ms-border-radius: 10px !important;
    -o-border-radius: 10px !important;
}
input:focus {
    color: black !important;
    border-color: var(--second) !important;
    box-shadow: none !important;
}

.form-control {
    padding: 8px 0.75rem;
}

button:active,
button:focus {
    box-shadow: none !important;
}

img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    height: auto;
}

p {
    margin: 0;
}

/* ================== Section Titles ================== */
.sec-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, var(--main-dark), var(--main));
    border-radius: 2px;
}
@media (max-width: 575px) {
    .sec-title { font-size: 30px; }
}
@media (min-width: 576px) and (max-width: 767px) {
    .sec-title { font-size: 33px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .sec-title { font-size: 38px; }
}
@media (min-width: 991px) {
    .sec-title { font-size: 40px; }
}

.gradient-sec-title {
    background: linear-gradient(to right, var(--main-dark), var(--main));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.gradient-sec-title::after {
    display: none;
}

.button,
button:focus {
    box-shadow: none;
}

/* ================== Buttons ================== */
.btn-solid-main {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    background-color: var(--gray-50);
    border: none;
    border-radius: 6em;
    outline: none;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease-out;
}
.btn-solid-main:hover {
    background-color: var(--main);
    color: #fff;
}
.btn-solid-main::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ffffff;
    opacity: 0.8;
    transition: all 0.5s ease-out;
}
.btn-solid-main:hover::before {
    transform: translate(-50%, -50%) scale(20);
    opacity: 0;
}

.btn-outline-main {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--main);
    background-color: #fff;
    border: 1px solid var(--main) !important;
    border-radius: 6em;
    outline: none;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease-out;
}
.btn-outline-main:hover {
    background-color: var(--main);
    color: #fff;
}
.btn-outline-main::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--main);
    opacity: 0.8;
    transition: all 0.5s ease-out;
}
.btn-outline-main:hover::before {
    transform: translate(-50%, -50%) scale(20);
    opacity: 0;
}

.sec-header {
    font-size: clamp(1.7rem, 5vw, 2rem);
    font-weight: bold;
}

/********************* shared style  *********************/
/* ==================START HEADER==================== */
html[lang=ar] { direction: rtl; }

html[lang=en] { direction: ltr; }
html[lang=en] #home .hero-img-container .badge-2 { right: 0; }
html[lang=en] #home .hero-header { text-align: start; }
html[lang=en] #stats .counter { text-align: start !important; }
html[lang=en] #about .part-image-shape-wrapper__over-shape { left: -10px; }
html[lang=en] #faq .accordion-button::after {
    margin-right: 0;
    margin-left: auto;
    filter: hue-rotate(45deg) brightness(0.8);
}

#header .nav-link,
.offcanvas .nav-link {
    color: dimgray;
    position: relative;
}
#header .nav-link::after,
.offcanvas .nav-link::after {
    content: "";
    position: absolute;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="8"><path d="M0 4 Q 5 0, 10 4 T 20 4 T 30 4 T 40 4 T 50 4 T 60 4 T 70 4 T 80 4 T 90 4 T 100 4" stroke="%2330ECE1" fill="transparent" stroke-width="2"/></svg>') repeat-x;
    background-position: bottom;
    display: block;
    width: 0%;
    height: 100%;
    right: 0;
    top: 4px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
}
#header .nav-link:hover::after, #header .nav-link.active::after,
.offcanvas .nav-link:hover::after,
.offcanvas .nav-link.active::after {
    width: 100%;
}
@media (max-width: 991px) {
    #header .nav-link,
    .offcanvas .nav-link {
        width: -moz-fit-content;
        width: fit-content;
    }
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 11;
}
#header .navbar-brand {
    width: 165px;
    color: #2d3748;
}
@media screen and (max-width: 992px) {
    #header .navbar .collapse {
        color: #2d3748;
    }
}
#header.scrolled {
    position: fixed;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#header.scrolled .navbar-brand {
    width: 165px;
    color: #2d3748;
}
#header.scrolled #langToggle { color: dimgray; }
@media screen and (max-width: 992px) {
    #header.scrolled .navbar .collapse { color: #2d3748; }
}
#header.scrolled .nav-link { color: #2d3748; }
#header.scrolled .fa-bars { color: #2d3748 !important; }
#header.scrolled #langToggle { color: var(--main) !important; }

/* ==================END HEADER==================== */
.offcanvas.offcanvas-end { width: 270px; }
.offcanvas .btn-main {
    background-color: var(--main);
    color: white;
    border-radius: 30px;
    padding: 8px 18px;
    transition: 0.3s;
    font-size: 0.95rem;
}
@media (max-width: 991px) {
    .offcanvas .navbar-brand { font-size: 1.5rem; }
    .offcanvas .navbar-toggler { padding: 0.25rem 0.5rem; }
    .offcanvas .offcanvas-body .nav-link { font-size: 1.1rem; padding: 8px 0; }
    .offcanvas .btn-main { font-size: 1rem; padding: 10px; }
}

/* ==================START HOME==================== */
#home {
    height: 102vh;
    background: linear-gradient(to right, var(--light), var(--light));
    clip-path: ellipse(100% 97% at 50% 0%);
    overflow: hidden;
}
@media (max-width: 991.5px) {
    #home { height: auto; padding-block: 70px; padding-bottom: 135px; }
}
#home .home-bg {
    width: 100%;
    position: absolute;
    bottom: 0;
    opacity: 0.04;
    right: 0;
    transform: scaleX(-1);
}
@media (max-width: 991.5px) {
    #home .hero-desc { width: 100% !important; }
}
#home .hero-img-container { position: relative; }
#home .hero-img-container .badge {
    position: absolute;
    background: #fff;
    padding: 10px 15px;
    border-radius: 15px;
    box-shadow: 0 5px 11px rgba(0, 0, 0, 0.24);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    transition: all 0.3s ease;
}
#home .hero-img-container .badge i { color: var(--main-dark); }
#home .hero-img-container .badge-1 { top: 20%; left: 5%; }
#home .hero-img-container .badge-2 { top: 43%; right: -8%; }
@media screen and (max-width: 576px) {
    #home .hero-img-container .badge-2 { right: 8%; }
}
#home .hero-img-container .badge-3 { bottom: 10%; left: 10%; }
#home .hero-img-container .badge:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(96, 88, 241, 0.18);
    background: linear-gradient(90deg, rgba(48,236,225,0.20) 0%, #fff 100%);
}
#home .hero-img-container .man-img {
    position: absolute;
    bottom: 19px;
    left: 50%;
    transform: translateX(-50%);
    width: 377px;
}
@media (max-width: 600px) { #home .hero-img-container .man-img { bottom: 17px; } }
@media (min-width: 450px) and (max-width: 497px) { #home .hero-img-container .man-img { bottom: 14px; } }
@media (min-width: 992px) and (max-width: 1094px) { #home .hero-img-container .man-img { bottom: 12px; } }
@media (min-width: 1094px) and (max-width: 1300px) { #home .hero-img-container .man-img { bottom: 13px; } }

#home .scrolldown {
    --sizeX: 30px;
    --sizeY: 50px;
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: var(--sizeX);
    height: var(--sizeY);
    border: calc(var(--sizeX) / 10) solid var(--main);
    border-radius: 50px;
    box-sizing: border-box;
    margin-bottom: 16px;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.3s ease;
    animation: scrolldown-entry 1.2s cubic-bezier(0.4, 0.8, 0.4, 1) 0s 1;
}
#home .scrolldown::before {
    content: "";
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: var(--main);
    border-radius: 100%;
    animation: scrolldown-anim 2s infinite;
    box-sizing: border-box;
    box-shadow: 0px -5px 3px 1px rgba(96, 88, 241, 0.25);
}
#home .scrolldown .chevrons {
    padding-top: 6px;
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#home .scrolldown .chevrondown {
    margin-top: -6px;
    border: solid var(--main);
    border-width: 0 3px 3px 0;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
}
#home .scrolldown .chevrondown:nth-child(odd) { animation: pulse54012 500ms ease infinite alternate; }
#home .scrolldown .chevrondown:nth-child(even) { animation: pulse54012 500ms ease infinite alternate 250ms; }

/* (الأنيميشنز زي ما هي) */
@keyframes scrolldown-entry {
    0% { opacity: 0; transform: translate(-50%, 700px); }
    80% { opacity: 1; transform: translate(-50%, -10px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes scrolldown-anim {
    0% { opacity: 0; height: 6px; }
    40% { opacity: 1; height: 10px; }
    80% { transform: translate(0, 20px); height: 10px; opacity: 0; }
    100% { height: 3px; opacity: 0; }
}
@keyframes pulse54012 {
    from { opacity: 0; }
    to { opacity: 0.5; }
}

/* ==================END HOME==================== */

/* ==================START STATS==================== */
#stats {
    max-width: 90%;
    margin-inline: auto;
    position: relative;
    border-radius: 20px;
}
@media (max-width: 400px) { #stats { max-width: 95%; } }
#stats .state .icon-circle {
    background-color: #fff;
    color: var(--main);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(96, 88, 241, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#stats .state:hover .icon-circle {
    box-shadow: 0 8px 20px rgba(96, 88, 241, 0.35);
}
/* ==================END STATS==================== */

/* ==================START ABOUT==================== */
#about { background-color: #fff; }
#about .container {
    max-width: 93%;
    height: 567px;
    background-color: var(--light);
    padding: 50px;
    transform: skew(3deg, 1deg);
    border-radius: 200px;
}
@media (max-width: 576px) { #about .container .about-content h2 { font-size: 1.5rem; } }
#about .container .sec-title::after { display: none; }
@media (max-width: 992px) {
    #about .container .about-image { margin-bottom: 30px; text-align: center; }
    #about .container .about-image svg { max-width: 100%; height: auto; }
    #about .container .about-image .part-image-shape-wrapper__over-shape {
        right: auto !important;
        left: 50%;
        transform: translateX(-50%);
    }
}
#about .container .about-content {
    transform: skew(-3deg, -1deg);
}
@media (max-width: 992px) { #about .container .about-content { transform: skew(0); } }
@media (max-width: 991.5px) { #about .container .about-content { text-align: center; } }
#about .container .about-content .icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 13px;
    background-color: var(--main);
}
@media (max-width: 992px) {
    #about .container {
        height: auto;
        padding: 30px 20px;
        border-radius: 50px;
        transform: none;
    }
}
@media (max-width: 576px) {
    #about .container { padding: 20px; border-radius: 20px; }
}
/* ==================END ABOUT==================== */

/* ==================START OVERVIEW==================== */
#overview { min-height: 50vh; }
#overview .nav-link { color: rgba(45, 55, 72, 0.8); padding: 1rem 1rem; }
#overview .nav-link.active {
    color: #2d3748;
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid var(--main) !important;
    font-weight: 500;
}
#overview .tab-pane { border-radius: 30px; overflow: hidden; }
/* ==================END OVERVIEW==================== */

.image-box img {
    max-width: 100%;
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: opacity 0.4s ease-in-out;
}

/* ================== ACCORDION ================== */
.custom-accordion {
    background: #f8f9fa;
    border-radius: 18px;
    padding: 18px 12px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
}
@media (max-width: 767px) { .custom-accordion { padding: 8px; } }
.custom-accordion-item { border: none; background: none; }

.custom-accordion-btn {
    width: 100%;
    background: #fff;
    border: none;
    outline: none;
    text-align: right;
    padding: 18px 20px;
    font-size: 1.15rem;
    font-weight: bold;
    color: black;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
    position: relative;
}
.custom-accordion-btn.collapsed { border-radius: 12px; }
.custom-accordion-btn.collapsed .arrow { transform: rotate(-90deg); }
.custom-accordion-btn:not(.collapsed) { border-radius: 12px 12px 0 0; }
.custom-accordion-btn .arrow {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 7l3 3 3-3' stroke='%2321A59D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform 0.3s, filter 0.3s;
}
@media (max-width: 767px) {
    .custom-accordion-btn { font-size: 1rem; padding: 14px 12px; }
}
.custom-accordion-body {
    background: #fff;
    border-radius: 0 0 12px 12px;
    padding: 16px 22px;
    color: #444;
    font-size: 1rem;
    margin-top: -4px;
    border-radius: 12px;
}
@media (max-width: 767px) { .custom-accordion-body { padding: 12px 10px; } }

/* ==================START TESTIMONIAL SECTION ==================== */
#testimonials .testimonials-container {
    display: flex;
    gap: 32px;
    max-width: 1200px;
    margin-inline: auto;
    height: 500px;
    width: 100%;
    padding: 24px;
}
#testimonials .column {
    height: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
#testimonials .column .card { padding: 19px 40px; border-radius: 67px; height: 200px; }
@media only screen and (max-width: 992px) {
    #testimonials .column .card { padding: 19px 30px; height: auto; }
}
#testimonials .testimonials {
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
#testimonials .column:hover .testimonials { animation-play-state: paused; }
#testimonials .card {
    background: #fff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
#testimonials .card .profile img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
#testimonials .card .profile { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
#testimonials .card .profile .name { font-weight: 600; color: #1a1a1a; }
#testimonials .card .profile .role { font-size: 14px; color: #666; }
#testimonials .card .content { color: #444; line-height: 1.5; }

#testimonials .column:nth-child(1) .testimonials { animation-name: scrollUp; animation-duration: 23s; }
#testimonials .column:nth-child(2) .testimonials { animation-name: scrollDown; animation-duration: 50s; }
#testimonials .column:nth-child(3) .testimonials { animation-name: scrollUp; animation-duration: 30s; }

@media (max-width: 768px) {
    #testimonials .testimonials-container { gap: 16px; padding: 16px; }
    #testimonials .column:nth-child(3) { display: none; }
    #testimonials .column:hover .testimonials { animation-play-state: running; }
}
@media (max-width: 640px) {
    #testimonials .column { display: none; }
    #testimonials .column:first-child { display: block; }
}
@keyframes scrollUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes scrollDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
/* ==================END TESTIMONIAL SECTION ==================== */

/* ==================START WHAT WE OFFER==================== */
#what-we-offer .spiral-images { position: relative; min-height: 400px; }
#what-we-offer .spiral-images .spiral-img { position: absolute; z-index: 2; transition: transform 0.4s; }
#what-we-offer .spiral-images .spiral-img.spiral-img-1 { top: 40px; left: 30px; width: 200px; }
#what-we-offer .spiral-images .spiral-img.spiral-img-2 { top: 22px; right: 0; width: 286px; }
#what-we-offer .spiral-images .spiral-img.spiral-img-3 { bottom: 49px; left: -37px; width: 120px; }
#what-we-offer .spiral-images .spiral-img.spiral-img-4 { bottom: 30px; right: 80px; width: 90px; }
#what-we-offer .spiral-images .spiral-svg {
    position: absolute;
    width: 1000px;
    z-index: 1;
    right: -548px;
    bottom: -96px;
    opacity: 0.22;
}
#what-we-offer .spiral-images .spiral-svg path { stroke: var(--second); stroke-width: 3; fill: none; }

#what-we-offer .spiral-text-wrapper { position: relative; min-height: 400px; }
#what-we-offer .spiral-text-wrapper .icon-circle {
    background-color: var(--main);
    width: 40px;
    height: 40px;
    border-radius: 8px;
}
#what-we-offer .spiral-text-wrapper .spiral-text {
    position: absolute;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 18px 22px;
}
#what-we-offer .spiral-text-wrapper .spiral-text.spiral-text-1 { top: 30px; right: 0; width: 70%; }
#what-we-offer .spiral-text-wrapper .spiral-text.spiral-text-2 { top: 120px; left: 0; width: 80%; }
#what-we-offer .spiral-text-wrapper .spiral-text.spiral-text-3 { bottom: 113px; right: 0; width: 75%; }
#what-we-offer .spiral-text-wrapper .spiral-text.spiral-text-4 { bottom: 5px; left: 0; width: 70%; }
@media (max-width: 991px) {
    #what-we-offer .spiral-images,
    #what-we-offer .spiral-text-wrapper { min-height: 300px; }
    #what-we-offer .spiral-text-wrapper .spiral-text {
        position: static !important;
        width: 100% !important;
        margin-bottom: 18px;
    }
}
/* ==================END WHAT WE OFFER==================== */

/* ==================START SERVICES==================== */
#services .custom-swiper-pagination .swiper-pagination-bullet {
    width: 18px;
    height: 6px;
    border-radius: 8px;
    background: var(--main);
    margin: 0 6px !important;
    opacity: 0.5;
    transition: background 0.3s, transform 0.3s, opacity 0.3s;
}
#services .custom-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--main-mid);
    opacity: 1;
    transform: scale(1.3);
}
#services .swiper { height: 430px; padding: 10px; }
#services .swiper .swiper-slide {
    width: 412px;
    margin-left: 30px;
    height: 400px;
    display: flex;
    align-items: center;
}
#services .serviceBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 28px;
    background: linear-gradient(120deg, rgba(96,88,241,0.08) 0%, #fff 100%);
    border-radius: 32px;
    position: relative;
    z-index: 1;
    height: 320px;
    box-shadow: 0 8px 10px rgba(96, 88, 241, 0.08);
    transition: box-shadow 0.3s, transform 0.3s;
}
#services .serviceBox:hover {
    box-shadow: 0 4px 8px rgba(96, 88, 241, 0.18);
    transform: translateY(-8px) scale(1.03);
}
#services .serviceBox::before {
    content: "";
    background: linear-gradient(135deg, var(--main-dark) 0%, var(--main) 100%);
    opacity: 0.07;
    border-radius: inherit;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: -1;
}
#services .serviceBox .service-icon {
    font-size: 30px;
    color: #fff;
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--main-dark), var(--main));
    border-radius: 50%;
    padding: 12px;
    box-shadow: 0 4px 16px rgba(45, 55, 72, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}
#services .serviceBox .title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    font-family: "IBM Plex Sans Arabic", sans-serif;
}
#services .serviceBox .description {
    font-size: 1.05rem;
    color: dimgray;
    line-height: 1.7;
}
@media only screen and (max-width: 990px) {
    #services .serviceBox { margin: 0 0 30px; }
}
/* ==================END SERVICES==================== */

/* ==================START READY==================== */
#ready-to-learn .ready-bg { position: absolute; width: 584px; opacity: 0.06; }
#ready-to-learn .ready-bg.ready-bg-1 { bottom: -11px; }
#ready-to-learn .ready-bg.ready-bg-2 { bottom: -11px; left: 0; }
#ready-to-learn .btn-outline-main { border: 1px solid var(--main); }
#ready-to-learn .btn-outline-main:hover { background-color: var(--main-mid); }
#ready-to-learn .btn-outline-main::before { background-color: var(--main-mid); }
/* ==================END READY==================== */

/* ==================START FAQ==================== */
#faq {
    padding: 40px 0;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(48, 236, 225, 0.10);
}
#faq .faq-title {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 32px;
}
#faq .accordion-item {
    border: none;
    margin-bottom: 18px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(96, 88, 241, 0.10);
    overflow: hidden;
    transition: box-shadow 0.3s;
}
#faq .accordion-item:hover {
    box-shadow: 0 4px 24px rgba(96, 88, 241, 0.16);
}
#faq .accordion-button {
    color: rgb(72, 72, 72);
    font-size: 17px;
    font-weight: 500;
    border-radius: 16px 16px 0 0;
    box-shadow: none;
    padding: 18px 24px;
    transition: background 0.2s, color 0.2s;
}
#faq .accordion-button::after {
    margin-right: auto;
    margin-left: 0;
    filter: hue-rotate(45deg) brightness(0.9);
}
#faq .accordion-button:not(.collapsed) {
    background-color: #fff;
    color: var(--main);
    box-shadow: none;
}
#faq .accordion-body {
    border-radius: 0 0 16px 16px;
    font-size: 1.05rem;
    color: #444;
    padding: 0px 1.25rem 14px;
}
@media (max-width: 768px) {
    #faq { padding: 24px 0; }
    #faq .faq-title { font-size: 1.3rem; margin-bottom: 20px; }
    #faq .accordion-button,
    #faq .accordion-body { padding: 14px 12px; font-size: 1rem; }
    #faq .accordion-item { border-radius: 10px; }
}
/* ==================END FAQ==================== */

/* ==================START platform-showcase==================== */
#platform-showcase {
    position: relative;
    background: linear-gradient(135deg, rgba(243, 242, 255, 0.25) 0%, white 100%);
    overflow: hidden;
    padding: 80px 0;
}
#platform-showcase .container { position: relative; z-index: 1; }
#platform-showcase .showcase-img {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transform: perspective(1000px) rotateY(-5deg);
    transition: all 0.4s ease;
    border: 1px solid rgba(96, 88, 241, 0.14);
    height: 380px;
}
@media screen and (max-width: 768px) { #platform-showcase .showcase-img { height: auto; } }
#platform-showcase .showcase-img:hover {
    transform: perspective(1000px) rotateY(0deg);
    box-shadow: 0 25px 50px rgba(96, 88, 241, 0.18);
}
#platform-showcase .showcase-img img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}
#platform-showcase .showcase-img .badge {
    font-size: 0.85rem;
    padding: 8px 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 2;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}
#platform-showcase .showcase-img .badge i { margin-left: 5px; }
#platform-showcase .showcase-img .badge.badge-1 { transform: translate(-20px, 20px); }
#platform-showcase .showcase-img .badge.badge-1:hover { transform: translate(-20px, 15px); }
#platform-showcase .showcase-img .badge.badge-2 { transform: translate(20px, -20px); }
#platform-showcase .showcase-img .badge.badge-2:hover { transform: translate(20px, -15px); }

#platform-showcase .showcase-features li {
    padding: 20px;
    border-radius: 10px;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}
#platform-showcase .showcase-features li:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 25px rgba(96, 88, 241, 0.12);
    border-left-color: var(--main);
}
#platform-showcase .showcase-features li .icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(96, 88, 241, 0.20);
    background-color: var(--main);
}
#platform-showcase .showcase-features li h5 { font-size: 1.2rem; transition: color 0.3s ease; }
#platform-showcase .showcase-features li p { color: dimgray; line-height: 1.6; }
#platform-showcase .showcase-features li:hover .icon-circle {
    transform: scale(1.1);
    background: linear-gradient(135deg, var(--main-dark), var(--main));
}
#platform-showcase .showcase-features li:hover h5 { color: var(--main); }

@media (max-width: 992px) {
    #platform-showcase .showcase-img { transform: none; margin-bottom: 40px; }
    #platform-showcase .showcase-img:hover { transform: none; }
    #platform-showcase .showcase-img .badge.badge-1,
    #platform-showcase .showcase-img .badge.badge-2 {
        transform: none !important;
        position: relative !important;
        margin-bottom: 15px;
        display: inline-block;
    }
    #platform-showcase .showcase-features li:hover { transform: none; }
}
/* ==================END platform-showcase==================== */

/* ==================START HOW IT WORKS==================== */
#how-it-works {
    position: relative;
    background: linear-gradient(135deg, rgba(96, 88, 241, 0.18) 0%, white 100%);
    padding-block: 80px;
}
#how-it-works::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="%23F3F2FF" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 0;
}

#how-it-works .container {
  position: relative;
  z-index: 1;
}
#how-it-works .bg-main-gradient {
  background: linear-gradient(135deg, #361084, rgb(72.6081081081, 21.5135135135, 177.4864864865));
}
#how-it-works .bg-second-gradient {
  background: linear-gradient(135deg, rgb(111, 66, 193), rgb(247.1074380165, 195.805785124, 71.8925619835));
}
#how-it-works .section-heading .sec-title {
  background: linear-gradient(to right, #361084, rgb(111, 66, 193));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
#how-it-works .section-heading .sec-title::after {
  display: none;
}
#how-it-works .timeline-path {
  position: relative;
  padding: 60px 0;
}
#how-it-works .timeline-path .timeline-progress {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(54, 16, 132, 0.1);
  transform: translateY(-50%);
  z-index: 1;
}
#how-it-works .timeline-path .timeline-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #361084, rgb(111, 66, 193));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 2s ease;
  animation: timelineProgress 4s forwards;
}
#how-it-works .steps-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
#how-it-works .step-card {
  width: 23%;
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  padding: 30px 20px;
  position: relative;
  transition: all 0.3s ease;
  border: 1px solid rgba(54, 16, 132, 0.1);
  text-align: center;
}
#how-it-works .step-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 15px 40px rgba(54, 16, 132, 0.15);
}
#how-it-works .step-card .step-header {
  position: relative;
  margin-bottom: 20px;
}
#how-it-works .step-card .step-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 1.2rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
#how-it-works .step-card .step-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #361084;
  box-shadow: 0 5px 20px rgba(54, 16, 132, 0.1);
  border: 2px solid rgba(54, 16, 132, 0.1);
  display: none;
}
#how-it-works .step-card .step-title {
  font-size: 1.3rem;
  margin-bottom: 15px;
  font-weight: 700;
}
#how-it-works .step-card .step-desc {
  color: rgb(111, 66, 193);
  line-height: 1.6;
}
#how-it-works .step-card .step-arrow {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid white;
  filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.1));
}
#how-it-works .step-card:last-child .step-arrow {
  display: none;
}
@media (max-width: 992px) {
  #how-it-works .steps-container {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  #how-it-works .step-card {
    width: 100%;
    max-width: 400px;
  }
  #how-it-works .step-card .step-arrow {
    right: 50%;
    top: auto;
    bottom: -20px;
    transform: translateX(50%) rotate(90deg);
  }
  #how-it-works .timeline-progress {
    top: 0 !important;
    left: 50% !important;
    width: 4px !important;
    height: 100% !important;
    transform: translateX(-50%) !important;
  }
}
@keyframes timelineProgress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ==================END HOW IT WORKS==================== */
/* ==================START SUBSCRIBE==================== */
#subscribe-plans {
  position: relative;
  background: linear-gradient(135deg, rgba(244, 243, 253, 0.05) 0%, white 100%);
  padding: 80px 0;
  overflow: hidden;
}
#subscribe-plans::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23f5f7ff" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0.5;
}
#subscribe-plans .container {
  position: relative;
  z-index: 1;
}
#subscribe-plans .pricing-card {
  border-radius: 12px;
  overflow: hidden;
  border: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  z-index: 1;
  background: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
#subscribe-plans .pricing-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%);
  z-index: -1;
}
#subscribe-plans .pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(54, 16, 132, 0.15);
}
#subscribe-plans .pricing-card .card-header {
  padding: 20px;
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
#subscribe-plans .pricing-card .card-header::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}
#subscribe-plans .pricing-card .card-header h4 {
  font-size: 1.4rem;
  position: relative;
  z-index: 1;
}
#subscribe-plans .pricing-card .card-body {
  padding: 30px;
}
#subscribe-plans .pricing-card .card-body h2 {
  font-size: 2.2rem;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
#subscribe-plans .pricing-card .card-body h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: currentColor;
  opacity: 0.3;
}
#subscribe-plans .pricing-card .card-body ul {
  text-align: right;
  margin-bottom: 30px;
}
#subscribe-plans .pricing-card .card-body ul li {
  padding: 8px 0;
  position: relative;
  transition: all 0.3s ease;
}
#subscribe-plans .pricing-card .card-body ul li i {
  margin-left: 8px;
}
#subscribe-plans .pricing-card.border-main-color .card-header {
  background: linear-gradient(135deg, #361084, rgb(35.3918918919, 10.4864864865, 86.5135135135));
}
#subscribe-plans .pricing-card.border-second-color .card-header {
  background: linear-gradient(135deg, rgb(111, 66, 193), rgb(208.0330578512, 149.7479338843, 8.9669421488));
}
#subscribe-plans .pricing-card.border-purple .card-header {
  background: linear-gradient(135deg, #361084, rgb(35.3918918919, 10.4864864865, 86.5135135135));
}
#subscribe-plans .col-md-4:nth-child(2) .pricing-card {
  transform: scale(1.05);
  z-index: 2;
}
#subscribe-plans .col-md-4:nth-child(2) .pricing-card:hover {
  transform: scale(1.05) translateY(-10px);
}
#subscribe-plans .col-md-4:nth-child(2) .pricing-card .card-header::before {
  content: "الأكثر اختياراً";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  background: rgb(111, 66, 193);
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  box-shadow: 0 5px 15px rgba(245, 180, 23, 0.3);
}
@media (max-width: 992px) {
  #subscribe-plans .col-md-4:nth-child(2) .pricing-card {
    transform: none;
  }
  #subscribe-plans .col-md-4:nth-child(2) .pricing-card:hover {
    transform: translateY(-10px);
  }
  #subscribe-plans .pricing-card {
    margin-bottom: 30px;
  }
}

/* ==================END SUBSCRIBE==================== */
/* ==================START flexibility==================== */
#flexibility .sec-title::after {
  display: none;
}
@media only screen and (max-width: 600px) {
  #flexibility .flexibility-img-container {
    width: auto !important;
  }
}

/* ==================END flexibility==================== */
/* ==================START best-course-builder==================== */
#best-course-builder .sec-title::after {
  display: none;
}
#best-course-builder .btn-outline-main {
  border: 1px solid #361084 !important;
}
#best-course-builder .btn-outline-main.active {
  background-color: #361084;
  color: #fff;
}

/* ==================END best-course-builder==================== */
/* ==================START digital-products==================== */
#digital-products .icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fbe5ab;
  display: flex;
  align-items: center;
  justify-content: center;
}
#digital-products .icon-circle i {
  color: #6f42c1;
}

/* ==================END digital-products==================== */
#footer {
  background-color: #fafbff;
}
#footer .container {
  padding: 30px;
  border-radius: 50px;
  max-width: 91%;
}
#footer .container a {
  transition: all 0.4s;
}
.footer-logo img {
    width: 100px;
    margin-bottom: 18px;
}
#footer .container a.footer-logo:hover {
  color: inherit;
}
#footer .container a:hover {
  color: #9b3e8f;
}/*# sourceMappingURL=style.css.map */


.contact-section {
    position: relative;
    padding: 30px;
    z-index: 1;
}

.link-box .btn-large.contact-us {
    display: block;
}

.contact-info {
    position: relative;
    z-index: 1;
}

.contact-info .info-block {
    position: relative;
    display: block;
    margin-bottom: 30px;
    border-radius: 10px;
}

.medium-container {
    position: relative;
    max-width: 850px;
    padding: 0px 15px;
    margin: 0px auto;
}

.auto-container {
    position: static;
    max-width: 1290px;
    padding: 0px 15px;
    margin: 0px auto;
}

.default-form .form-group input[type="text"], .default-form .form-group input[type="email"] ,  .default-form .form-group input[type="number"]  {
    position: relative;
    display: block;
    width: 100%;
    box-shadow: rgb(0 0 0 / 11%) 3px 3px 6px inset, rgb(0 0 0 / 7%) 3px 3px 6px;
    height: 50px;
    border-radius: 66px;
    font-size: 16px;
    color: rgb(16, 26, 48);
    background: rgb(255, 255, 255);
    padding: 10px 20px;
    transition: 500ms;
}

.default-form .form-group label {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: rgb(0, 0, 0);
    margin-bottom: 10px;
}

.default-form .form-group textarea {
    position: relative;
    display: block;
    width: 100%;
    height: 170px;
    box-shadow: rgba(0, 0, 0, 0.035) 3px 3px 6px inset, rgba(0, 0, 0, 0.024) 3px 3px 6px;
    border-radius: 20px;
    background: rgb(255, 255, 255);
    padding: 20px;
}

.default-form .form-group {
    position: relative;
    padding: 0px 10px;
    margin-bottom: 20px;
}

.contact-info .info-block .inner-box {
    position: relative;
    display: block;
    padding: 54px 0px 54px 122px;
    line-height: 24px;
    font-size: 14px;
    color: rgb(112, 112, 112);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 30px 100px;
    border-radius: 10px;
}

.contact-info .info-block .inner-box h4 {
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 22px;
    color: rgb(0, 0, 0);
}

.contact-info .info-block .inner-box .icon-box {
    position: absolute;
    left: 40px;
    top: 55px;
    text-align: center;
    width: 60px;
    height: 60px;
    line-height: 64px;
    background: rgb(248, 241, 255);
    font-size: 25px;
    border-radius: 50%;
}

.contact-info .info-block .inner-box .icon-box span {
    background: linear-gradient(rgb(190, 55, 255) 0%, rgb(106, 47, 255) 61.11%) text;
    -webkit-text-fill-color: transparent;
    transition: 500ms;
}

.contact-info .info-block .inner-box .text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    margin-bottom: 0px;
    color: rgb(0, 0, 0);
}

.contact-shape-image {
    position: relative;
}

.contact-shape-image img {
      position: absolute;
    display: inline-block;
    top: -154px;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    z-index: -2;
    opacity: 0.4;
}

.default-form .form-group {
    position: relative;
    padding: 0px 10px;
    margin-bottom: 20px;
}

.heading_title {
    font-size: 48px;
    line-height: 56px;
    font-weight: 600;
    font-family: var(--title-font);
    color: var(--title-color);
    margin-bottom: 35px;
}

.sec-title.text-center .heading_title {
    margin-bottom: 35px;
}