.text-main-color {
    color: rgb(54, 16, 132);
}

.text-second-color {
    color: rgb(31, 163, 221);
}

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

.text-purple {
    color: rgb(30, 161, 219);
}

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

.bg-main-color {
    background-color: rgb(54, 16, 132);
}

.bg-second-color {
    background-color: rgb(31, 163, 221);
}

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

* {
    margin: 0px;
    padding: 0px;
    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: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    overflow-x: hidden;
    position: relative;
    scroll-behavior: smooth;
}

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

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

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

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

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

input {
    border-radius: 10px !important;
}

input:focus {
       color: black !important; 
    
    box-shadow: rgb(0 0 0 / 5%) 3px 3px 6px inset, rgb(0 0 0 / 16%) 3px 3px 6px !important ;
}

.saCode {
    input {
       padding-inline-start:62px !important
    }

    span {
        position: absolute;
        top: 44%;
        z-index: 1;
        padding: 6px;
        background: #1b97d429;
        inset-inline-start: 12px;
        border-radius: 10px;
        height: 45px;
        align-content: center;
    }
}

.form {
     label {
        display: flex;
        align-items: center; 
        gap: 6px;
    }
}

.form .input-radio {
    box-shadow: 0px 0px 0px 1px #6d6d6d;
    font-size: 3em;
    width: 25px;
    height: 25px;
    margin-inline-end: 7px;

    border: 4px solid #fff;
    background-clip: border-box;
    border-radius: 50%;
    appearance: none;
    transition: background-color 0.3s, box-shadow 0.3s;

   

}
.card .form label {
    display: flex;
    margin: 10px 15px;
}

.form {
        display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.input-radio.on:checked {
    box-shadow: 0px 0px 0px 4px #00eb27;
    background-color: #51ff6e;
}
.input-radio.off:checked {
 box-shadow: 0px 0px 0px 4px #939393;
    background-color: #797979;
}


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

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

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
}

p {
    margin: 0px;
}

.sec-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, rgb(54, 16, 132), rgb(31, 163, 221));
    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, rgb(54, 16, 132), rgb(31, 163, 221)) text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.gradient-sec-title::after {
    display: none;
}

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

.btn-solid-main {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgb(255, 255, 255);
    background-color: rgb(75, 75, 75);
    border: none;
    border-radius: 6em;
    outline: none;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s ease-out;
}

.btn-solid-main:hover {
    background-color: rgb(31, 163, 221);
    color: rgb(255, 255, 255);
}

.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: rgb(255, 255, 255);
    opacity: 0.8;
    transition: 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: rgb(54, 16, 132);
    background-color: rgb(255, 255, 255);
    border-radius: 6em;
    outline: none;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s ease-out;
    border: 1px solid rgb(54, 16, 132) !important;
}

.btn-outline-main:hover {
    background-color: rgb(54, 16, 132);
    color: rgb(255, 255, 255);
}

.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: rgb(54, 16, 132);
    opacity: 0.8;
    transition: 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;
}

html[lang="ar"] {
    direction: rtl;
}

html[lang="en"] {
    direction: ltr;
}

html[lang="en"] #home .hero-img-container .badge-2 {
    right: 0px;
}

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: 0px;
    margin-left: auto;
    filter: hue-rotate(45deg) brightness(0.8);
}

#header .nav-link, .offcanvas .nav-link {
    color: rgb(67, 66, 66);
    position: relative;
    font-size: 19px;
    font-weight: 500;
}

#header .nav-link::after, .offcanvas .nav-link::after {
    content: "";
    position: absolute;
    background: center bottom rgb(28, 154, 214);
    display: block;
    width: 0%;
    height: 2px;
    right: 0px;
    bottom: 0px;
    transition: 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: fit-content;
    }
}

#header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 11;
}

#header .navbar-brand {
    width: 95px;
    color: rgb(45, 55, 72);
}

@media screen and (max-width: 992px) {
    #header .navbar .collapse {
        color: rgb(45, 55, 72);
    }
}

#header.scrolled {
    position: fixed;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px;
    transition: background-color 0.3s, box-shadow 0.3s;
}

#header.scrolled .navbar-brand {
    width: 72px;
    color: rgb(45, 55, 72);
}

#header.scrolled #langToggle {
    color: dimgray;
}

@media screen and (max-width: 992px) {
    #header.scrolled .navbar .collapse {
        color: rgb(45, 55, 72);
    }
}

#header.scrolled .nav-link {
    color: rgb(45, 55, 72);
}

#header.scrolled .fa-bars {
    color: rgb(45, 55, 72) !important;
}

#header.scrolled #langToggle {
    color: rgb(31, 163, 221) !important;
}

.offcanvas.offcanvas-end {
    width: 270px;
}

.offcanvas .btn-main {
    background-color: rgb(31, 163, 221);
    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 0px;
    }

    .offcanvas .btn-main {
        font-size: 1rem;
        padding: 10px;
    }
}

#home {
    height: 102vh;
    background: url("../assets/sqaure_shape.png") rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

@media (max-width: 991.5px) {
    #home {
        height: auto;
        padding-block: 144px; }
}

#home .home-bg {
    width: 100%;
    position: absolute;
    bottom: 0px;
    opacity: 0.04;
    right: 0px;
    transform: scaleX(-1);
}

@media (max-width: 991.5px) {
    #home .hero-desc {
        width: 100% !important;
    }
}

#home .hero-img-container {
    position: relative;
    box-shadow: 6px 6px 22px #00000015;
    border-radius: 12px;
    overflow: hidden; 
}

#home .hero-img-container .badge {
    position: absolute;
    background: rgb(255, 255, 255);
    padding: 10px 15px;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 5px 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    transition: 0.3s;
}

#home .hero-img-container .badge i {
    color: rgb(57, 15, 134);
}

#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: rgba(57, 15, 134, 0.15) 0px 8px 24px;
    background: linear-gradient(90deg, rgb(251, 229, 171) 0%, rgb(255, 255, 255) 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: 1px solid rgb(183, 183, 183);
    border-radius: 50px;
    box-sizing: border-box;
    margin-bottom: 16px;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.3s;
    animation: 1.2s cubic-bezier(0.4, 0.8, 0.4, 1) 0s 1 normal none running scrolldown-entry;
}

#home .scrolldown::before {
    content: "";
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: rgb(222, 222, 222);
    border-radius: 100%;
    animation: 2s ease 0s infinite normal none running scrolldown-anim;
    box-sizing: border-box;
    box-shadow: rgba(42, 84, 112, 0.4) 0px -5px 3px 1px;
}

#home .scrolldown .chevrons {
    padding-top: 6px;
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#home .scrolldown .chevrondown {
    margin-top: -6px;
    border-style: solid;
    border-color: rgb(143, 143, 143);
    border-image: initial;
    border-width: 0px 3px 3px 0px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
}

#home .scrolldown .chevrondown:nth-child(2n+1) {
    animation: 500ms ease 0s infinite alternate none running pulse54012;
}

#home .scrolldown .chevrondown:nth-child(2n) {
    animation: 500ms ease 250ms infinite alternate none running pulse54012;
}

@keyframes scrolldown-entry {
    0% {
        opacity: 0;
        transform: translate(-50%, 700px);
    }

    80% {
        opacity: 1;
        transform: translate(-50%, -10px);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0px);
    }
}

@keyframes scrolldown-anim {
    0% {
        opacity: 0;
        height: 6px;
    }

    40% {
        opacity: 1;
        height: 10px;
    }

    80% {
        transform: translate(0px, 20px);
        height: 10px;
        opacity: 0;
    }

    100% {
        height: 3px;
        opacity: 0;
    }
}

@keyframes pulse54012 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.5;
    }
}

#stats {
    max-width: 90%;
    margin-inline: auto; position: relative;
    border-radius: 20px;
}

@media (max-width: 400px) {
    #stats {
        max-width: 95%;
    }
}

#stats .state {
    transition: 0.3s ease-in-out;
}

#stats .state .icon-circle {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

#stats .state:hover {
    transform: translateY(-10px);
    & .icon-circle {
        transform: scale(1.1);
    }
}

#about {
    background-color: rgba(18, 107, 180, 0.07);
}

#about .container {
    max-width: 93%;
    height: 567px;
    background-color: rgb(255, 255, 255);
    padding: 50px;
    border-radius: 200px;
    transform: skew(3deg, 1deg);
}

@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 {
        left: 50%;
        transform: translateX(-50%);
        right: auto !important;
    }
}

#about .container .about-content {
    transform: skew(-3deg, -1deg);
}

@media (max-width: 992px) {
    #about .container .about-content {
        transform: skew(0deg);
    }
}

@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: rgb(238, 245, 250);
}

@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;
    }
}

#overview {
    min-height: 50vh;
}

#overview .nav-link {
    color: rgba(45, 55, 72, 0.8);
    padding: 1rem 1.8rem;
    min-width: max-content;
    margin: 4px;
    border: 1px solid rgb(230, 230, 230) !important;
    border-radius: 26px !important;
}

#overview .nav-link.active {
    color: rgb(255, 255, 255);
    background-color: rgb(27, 147, 208);
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    border-image: initial;
    font-weight: 500;
    border-radius: 10px;
    border-bottom: 2px solid rgba(45, 55, 72, 0) !important;
}

#overview .tab-pane {
    border-radius: 30px;
    overflow: hidden;
    justify-self: center;

    img {
        height: 400px;
    }
}

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

.custom-accordion {
    background: rgb(248, 249, 250);
    border-radius: 18px;
    padding: 18px 12px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 4px 18px;
}

@media (max-width: 767px) {
    .custom-accordion {
        padding: 8px;
    }
}

.custom-accordion-item {
    border: none;
    background: none;
}

.custom-accordion-btn {
    width: 100%;
    background: rgb(255, 255, 255);
    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: 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 0px 0px;
}

.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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center 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: rgb(255, 255, 255);
    padding: 16px 22px;
    color: rgb(68, 68, 68);
    font-size: 1rem;
    margin-top: -4px;
    border-radius: 12px;
}

@media (max-width: 767px) {
    .custom-accordion-body {
        padding: 12px 10px;
    }
}

#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;
    mask-image: linear-gradient(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: rgb(255, 255, 255);
    padding: 24px;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px;
}

#testimonials .card .profile img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

#testimonials .card .profile {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

#testimonials .card .profile .name {
    font-weight: 600;
    color: rgb(26, 26, 26);
}

#testimonials .card .profile .role {
    font-size: 14px;
    color: rgb(102, 102, 102);
}

#testimonials .card .content {
    color: rgb(68, 68, 68);
    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 {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-50%);
    }
}

@keyframes scrollDown {
    0% {
        transform: translateY(-50%);
    }

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

#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: 0px;
    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.2;
}

#what-we-offer .spiral-images .spiral-svg path {
    stroke: rgb(251, 229, 171);
    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: rgb(155, 62, 143);
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

#what-we-offer .spiral-text-wrapper .spiral-text {
    position: absolute;
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 12px;
    padding: 18px 22px;
}

#what-we-offer .spiral-text-wrapper .spiral-text.spiral-text-1 {
    top: 30px;
    right: 0px;
    width: 70%;
}

#what-we-offer .spiral-text-wrapper .spiral-text.spiral-text-2 {
    top: 120px;
    left: 0px;
    width: 80%;
}

#what-we-offer .spiral-text-wrapper .spiral-text.spiral-text-3 {
    bottom: 113px;
    right: 0px;
    width: 75%;
}

#what-we-offer .spiral-text-wrapper .spiral-text.spiral-text-4 {
    bottom: 5px;
    left: 0px;
    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 {
        margin-bottom: 18px;
        position: static !important;
        width: 100% !important;
    }
}

#services .custom-swiper-pagination .swiper-pagination-bullet {
    width: 18px;
    height: 6px;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.063) 2px 2px 2px inset, rgba(0, 0, 0, 0.063) 2px 2px 2px;
    background: transparent;
    opacity: 0.5;
    transition: background 0.3s, transform 0.3s, opacity 0.3s;
    margin: 0px 6px !important;
}

#services .custom-swiper-pagination .swiper-pagination-bullet-active {
    background: rgb(31, 163, 221);
    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, rgb(245, 247, 255) 0%, rgb(255, 255, 255) 100%);
    border-radius: 32px;
    position: relative;
    z-index: 1;
    height: 320px;
    box-shadow: rgba(54, 16, 132, 0.08) 0px 8px 10px;
    transition: box-shadow 0.3s, transform 0.3s;
}

#services .serviceBox:hover {
    box-shadow: rgba(54, 16, 132, 0.15) 0px 4px 8px;
    transform: translateY(-8px) scale(1.03);
}

#services .serviceBox::before {
    content: "";
    background: linear-gradient(135deg, rgb(54, 16, 132) 0%, rgb(31, 163, 221) 100%);
    opacity: 0.07;
    border-radius: inherit;
    position: absolute;
    inset: 0px;
    z-index: -1;
}

#services .serviceBox .service-icon {
    font-size: 30px;
    color: rgb(255, 255, 255);
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgb(54, 16, 132), rgb(31, 163, 221));
    border-radius: 50%;
    padding: 12px;
    box-shadow: rgba(45, 55, 72, 0.08) 0px 4px 16px;
    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: 0px 0px 30px;
    }
}

#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: 0px;
}

#ready-to-learn .btn-outline-main {
    border: 1px solid rgb(54, 16, 132);
}

#ready-to-learn .btn-outline-main:hover {
    background-color: rgb(31, 163, 221);
}

#ready-to-learn .btn-outline-main::before {
    background-color: rgb(31, 163, 221);
}

#faq {
    padding: 40px 0px;
    border-radius: 24px;
}

#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: rgba(54, 16, 132, 0.08) 0px 2px 12px;
    overflow: hidden;
    transition: box-shadow 0.3s;
}

#faq .accordion-item:hover {
    box-shadow: rgba(54, 16, 132, 0.15) 0px 4px 24px;
}

#faq .accordion-button {
    color: rgb(72, 72, 72);
    font-size: 17px;
    font-weight: 500;
    border-radius: 16px 16px 0px 0px;
    box-shadow: none;
    padding: 28px 24px;
    transition: background 0.2s, color 0.2s;
}

#faq .accordion-button::after {
    margin-right: auto;
    margin-left: 0px;
    filter: hue-rotate(45deg) brightness(0.8);
}

#faq .accordion-button:not(.collapsed) {
    background-color: rgb(255, 255, 255);
    color: rgb(155, 62, 143);
    box-shadow: none;
}

#faq .accordion-body {
    border-radius: 0px 0px 16px 16px;
    font-size: 1.05rem;
    color: rgb(68, 68, 68);
    text-align: start;
    padding: 0px 1.25rem 14px;
}

@media (max-width: 768px) {
    #faq {
        padding: 24px 0px;
    }

    #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;
    }
}

#platform-showcase {
    position: relative;
    background: linear-gradient(135deg, rgba(244, 243, 253, 0.05) 0%, white 100%);
    overflow: hidden;
    padding: 80px 0px;
}

#platform-showcase .container {
    position: relative;
    z-index: 1;
}

#platform-showcase .showcase-img {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 40px;
    transform: perspective(1000px) rotateY(-5deg);
    transition: 0.4s;
    border: 1px solid rgba(54, 16, 132, 0.1);
    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: rgba(54, 16, 132, 0.15) 0px 25px 50px;
}

#platform-showcase .showcase-img img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s;
}

#platform-showcase .showcase-img .badge {
    font-size: 0.85rem;
    padding: 8px 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
    z-index: 2;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: 0.3s;
}

#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: rgba(0, 0, 0, 0.03) 0px 5px 15px;
    transition: 0.3s;
    border-left: 3px solid transparent;
}

#platform-showcase .showcase-features li:hover {
    transform: translateX(10px);
    box-shadow: rgba(54, 16, 132, 0.1) 0px 10px 25px;
    border-left-color: rgb(54, 16, 132);
}

#platform-showcase .showcase-features li .icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: 0.3s;
    box-shadow: rgba(54, 16, 132, 0.2) 0px 5px 15px;
    background-color: rgb(31, 163, 221);
}

#platform-showcase .showcase-features li h5 {
    font-size: 1.2rem;
    transition: color 0.3s;
}

#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, rgb(54, 16, 132), rgb(31, 163, 221));
}

#platform-showcase .showcase-features li:hover h5 {
    color: rgb(31, 163, 221);
}

@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 {
        margin-bottom: 15px;
        display: inline-block;
        transform: none !important;
        position: relative !important;
        inset: auto !important;
    }

    #platform-showcase .showcase-features li:hover {
        transform: none;
    }
}

#how-it-works {
    position: relative;
    background: linear-gradient(135deg, rgba(29, 156, 216, 0.13) 0%, white 100%);
    padding-block: 80px; }

#how-it-works::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: 0;
}

#how-it-works .container {
    position: relative;
    z-index: 1;
}

#how-it-works .section-heading .sec-title {
    background: linear-gradient(to right, rgb(54, 16, 132), rgb(31, 163, 221)) 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 0px;
}

#how-it-works .timeline-path .timeline-progress {
    position: absolute;
    top: 50%;
    left: 0px;
    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: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgb(54, 16, 132), rgb(31, 163, 221));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 2s;
    animation: 4s ease 0s 1 normal forwards running timelineProgress;
}

#how-it-works .steps-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

#how-it-works .step-card {
    width: 32%;
    background: white;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 30px;
    padding: 50px 30px 20px;
    position: relative;
    transition: 0.3s;
    border: 1px solid rgba(54, 16, 132, 0.1);
    text-align: center;
}

#how-it-works .step-card:hover {
    transform: translateY(-15px);
    box-shadow: rgba(54, 16, 132, 0.15) 0px 15px 40px;
}

#how-it-works .step-card .step-header {
    position: absolute;
    margin-bottom: 20px;
}

#how-it-works .step-card .step-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: rgba(40, 103, 185, 0.14);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.9rem;
    transform: rotate(45deg);
    position: absolute;
    top: -60px;
    inset-inline-end: -31px;
}

#how-it-works .step-card .step-icon {
    width: 70px;
    height: 70px;
    margin: 0px auto 20px;
    background: white;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: rgb(54, 16, 132);
    box-shadow: rgba(54, 16, 132, 0.1) 0px 5px 20px;
    border: 2px solid rgba(54, 16, 132, 0.1);
    display: none;
}

#how-it-works .step-card .step-title {
    font-weight: 700;
    line-height: 33px;
    text-align: start;
}

#how-it-works .step-card .step-desc {
    color: rgb(31, 163, 221);
    line-height: 1.6;
}

#how-it-works .step-card .step-arrow {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid white;
    filter: drop-shadow(rgba(0, 0, 0, 0.1) 2px 0px 2px);
}

#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: 0px !important;
        left: 50% !important;
        width: 4px !important;
        height: 100% !important;
        transform: translateX(-50%) !important;
    }
}

@keyframes timelineProgress {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}

#subscribe-plans {
    position: relative;
    background: linear-gradient(135deg, rgba(244, 243, 253, 0.05) 0%, white 100%);
    padding: 80px 0px;
    overflow: hidden;
}

#subscribe-plans::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    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>") center bottom / cover 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: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
    background: white;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 30px;
}

#subscribe-plans .pricing-card::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    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: rgba(54, 16, 132, 0.15) 0px 15px 40px;
}

#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: 0px;
    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 0px;
    position: relative;
    transition: 0.3s;
}

#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, rgb(54, 16, 132), rgb(35, 10, 87));
}

#subscribe-plans .pricing-card.border-second-color .card-header {
    background: linear-gradient(135deg, rgb(31, 163, 221), rgb(208, 150, 9));
}

#subscribe-plans .pricing-card.border-purple .card-header {
    background: linear-gradient(135deg, rgb(54, 16, 132), rgb(35, 10, 87));
}

#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(31, 163, 221);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: rgba(245, 180, 23, 0.3) 0px 5px 15px;
}

@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;
    }
}

#flexibility .sec-title::after {
    display: none;
}

@media only screen and (max-width: 600px) {
    #flexibility .flexibility-img-container {
        width: auto !important;
    }
}

#best-course-builder .sec-title::after {
    display: none;
}

#best-course-builder .btn-outline-main {
    border: 1px solid rgb(233, 233, 233) !important;
}

#best-course-builder .btn-outline-main.active {
    background-color: rgb(54, 16, 132);
    color: rgb(255, 255, 255);
}

#digital-products .icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgb(251, 229, 171);
    display: flex;
    align-items: center;
    justify-content: center;
}

#digital-products .icon-circle i {
    color: rgb(111, 66, 193);
}

#footer {
    background-color: rgb(255, 255, 255);
}

#footer .container {
    padding: 49px;
    border-radius: 50px;
    max-width: 91%;
}

#footer .container a {
    transition: 0.4s;
}


.privacy {
 padding-top: 170px;
        .card {
            background: #ffffff;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #0d6efd;
        }

        h2 {
            color: #0d6efd;
            margin-bottom: 15px;
            font-size: 22px;
        }

        h3 {
            margin-top: 20px;
            font-size: 18px;
            color: #333;
        }

        p {
            line-height: 1.9;
            margin-bottom: 10px;
        }

        ul {
            padding-right: 20px;
        }

        ul li {
            margin-bottom: 8px;
            line-height: 1.8;
        }

        .footer {
            text-align: center;
            font-size: 14px;
            color: #6c757d;
            margin-top: 40px;
        }

        .divider {
            height: 1px;
            background: #e9ecef;
            margin: 40px 0;
        }
}

#overviewTab {
    display: flex;
    flex-wrap: nowrap;
    border: transparent;
    padding: 10px;
    margin-bottom: 50px;
    scrollbar-width: none;
    overflow-x: auto;
}

.counterItem {
    box-shadow: rgba(0, 0, 0, 0.063) 6px 6px 6px inset, rgba(0, 0, 0, 0.063) 6px 6px 6px;
    border-radius: 25px;
    padding: 8px;
    display: flex;
    gap: 0 !important;
    flex-direction: column;
    align-items: center !important;
}

.footer-logo img {
    width: 100px;
    margin-bottom: 18px;
}

#footer .container a.footer-logo:hover {
    color: inherit;
}

#footer .container a:hover {
    color: rgb(155, 62, 143);
}

.contact-section {
    position: relative;
    margin: 120px 0px 0px;
    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: 28%;
    object-fit: contain;
    z-index: -2;
}

.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;
}