@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap");

:root {
    --mainBG: #f1f1f1;
    --Bg2: #f5f6f8;
    --w: #fff;
    --black: #1d1d1d;
    --mainColor: #273a5b;
    --secondColor: #4381c2;
    --gray: #4d4d4d;
    --t-l: 500ms ease-in-out;
    --t-s: 250ms ease-in-out
}

*, :after, :before {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-size: 1rem
}

html:not([lang=ar]) {
    direction: ltr
}

html[lang=ar] {
    direction: rtl
}

body {
    margin: 0;
    min-height: 100dvh;
    padding: 0;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch
}

h1, h3, p {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word
}

h1, h3, p, ul {
    margin-block: 0
}

ul {
    list-style-type: none;
    padding-inline: 0
}

a {
    display: inline-block;
    text-decoration: none
}

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

button, input, select, textarea {
    background: transparent;
    font: inherit;
    line-height: inherit
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px
}

input {
    width: 100%
}

input[type=number] {
    -moz-appearance: textfield
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.container-full {
    max-width: 100%
}

.container, .container-full {
    margin: 0 auto;
    padding: 0 15px
}

.container {
    max-width: 1200px
}

.d-none {
    display: none
}

.d-flex {
    display: flex
}

.d-inline-block {
    display: inline-block
}

.d-grid {
    display: grid
}

.border-none {
    border-style: none
}

.round-2 {
    border-radius: 4px
}

.round-4 {
    border-radius: 8px
}

.round-6 {
    border-radius: 12px
}

.round-8 {
    border-radius: 16px
}

.round-12 {
    border-radius: 32px
}

.round-tl-12 {
    border-top-left-radius: 32px
}

.round-tr-12 {
    border-top-right-radius: 32px
}

.fs-14 {
    font-size: .875rem
}

.fs-16 {
    font-size: 1rem
}

.fs-18 {
    font-size: 1.125rem
}

.fs-20 {
    font-size: 1.25rem
}

.fs-24 {
    font-size: 1.5rem
}

.fs-30 {
    font-size: 1.875rem
}

.fs-48 {
    font-size: 3rem
}

.fw-500 {
    font-weight: 500
}

.fw-600 {
    font-weight: 600
}

.text-center {
    text-align: center
}

.line-relaxed {
    line-height: 1.625
}

.o-20 {
    opacity: .2
}

.p-10 {
    padding: 24px
}

.pt-4 {
    padding-top: 8px
}

.pt-5 {
    padding-top: 10px
}

.pt-6 {
    padding-top: 12px
}

.pt-7 {
    padding-top: 14px
}

.pt-10 {
    padding-top: 24px
}

.pb-2 {
    padding-bottom: 4px
}

.pb-6, .py-6 {
    padding-bottom: 12px
}

.py-6 {
    padding-top: 12px
}

.py-7 {
    padding-bottom: 14px;
    padding-top: 14px
}

.ps-5 {
    padding-inline-start: 10px
}

.pe-7 {
    padding-inline-end: 14px
}

.pe-8 {
    padding-inline-end: 16px
}

.pe-14 {
    padding-inline-end: 40px
}

.mt-6 {
    margin-top: 12px
}

.mb-7 {
    margin-bottom: 14px
}

.mb-8 {
    margin-bottom: 16px
}

.mr-auto {
    margin-right: auto
}

.my-5 {
    margin-bottom: 10px;
    margin-top: 10px
}

.my-6 {
    margin-bottom: 12px;
    margin-top: 12px
}

.my-10 {
    margin-bottom: 24px;
    margin-top: 24px
}

.ms-auto {
    margin-inline-start: auto
}

.gap-3 {
    gap: 6px
}

.gap-5 {
    gap: 10px
}

.gap-7 {
    gap: 14px
}

.gap-8 {
    gap: 16px
}

.gap-12 {
    gap: 32px
}

.gap-14 {
    gap: 40px
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.fixed {
    position: fixed
}

.static {
    position: static
}

.left-0 {
    left: 0
}

.top-0 {
    top: 0
}

.overflow-hidden {
    overflow: hidden
}

.w-8 {
    width: 16px
}

.w-22 {
    width: 44px
}

.w-30 {
    width: 60px
}

.w-34 {
    width: 68px
}

.w-180 {
    width: 360px
}

.w-8\/10 {
    width: 80%
}

.w-9\/10 {
    width: 90%
}

.w-full {
    width: 100%
}

.max-w-full {
    max-width: 100%
}

.h-22 {
    height: 44px
}

.h-24 {
    height: 48px
}

.h-28 {
    height: 56px
}

.h-36 {
    height: 72px
}

.h-40 {
    height: 80px
}

.h-60 {
    height: 120px
}

.h-1 {
    height: 1px
}

.h-full {
    height: 100%
}

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

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

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.items-start {
    align-items: start
}

.items-center {
    align-items: center
}

.img-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.btn {
    background: none;
    border: none;
    cursor: pointer;
    height: unset
}

.btn-skew {
    background-color: red;
    color: #fff;
    overflow: hidden;
    position: relative;
    z-index: 1
}

.btn-skew:before {
    background-color: green;
    content: "";
    height: 100%;
    left: -80%;
    position: absolute;
    top: 0;
    transform: skew(30deg);
    transform-origin: top left;
    transition: .5s ease-in-out;
    width: 0;
    z-index: -1
}

.btn-skew:hover:before {
    height: 100%;
    width: 200%
}

.btn-skew a {
    color: #fff
}

@media (max-width: 991px) {
    .lg-max\:d-none {
        display: none
    }

    .lg-max\:fs-18 {
        font-size: 1.125rem
    }

    .lg-max\:text-center {
        text-align: center
    }

    .lg-max\:pt-8 {
        padding-top: 16px
    }

    .lg-max\:ps-8 {
        padding-inline-start: 16px
    }

    .lg-max\:mt-5 {
        margin-top: 10px
    }

    .lg-max\:mb-10 {
        margin-bottom: 24px
    }

    .lg-max\:gap-10 {
        gap: 24px
    }

    .lg-max\:w-9\/10 {
        width: 90%
    }

    .lg-max\:w-full {
        width: 100%
    }

    .lg-max\:h-full {
        height: 100%
    }

    .lg-max\:flex-col {
        flex-direction: column
    }

    .lg-max\:row-s-1 {
        grid-row-start: 1
    }

    .lg-max\:row-e-auto {
        grid-row-end: auto
    }

    .lg-max\:items-start {
        align-items: start
    }
}

@media (max-width: 767px) {
    .container {
        padding: 0 15px
    }

    .md-max\:d-none {
        display: none
    }

    .md-max\:pe-0 {
        padding-inline-end: 0
    }
}

@media (max-width: 566px) {
    .sm-max\:fs-16 {
        font-size: 1rem
    }

    .sm-max\:fs-30 {
        font-size: 1.875rem
    }

    .sm-max\:px-0 {
        padding-left: 0;
        padding-right: 0
    }

    .sm-max\:w-9\/10 {
        width: 90%
    }
}

@media (min-width: 567px) {
    .container {
        max-width: 540px
    }

    .sm\:grid-col-2 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px
    }

    .md\:grid-col-2 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px
    }

    .lg\:d-none {
        display: none
    }

    .lg\:d-flex {
        display: flex
    }

    .lg\:p-0 {
        padding: 0
    }

    .lg\:m-0 {
        margin: 0
    }

    .lg\:relative {
        position: relative
    }

    .lg\:overflow-visible {
        overflow: visible
    }

    .lg\:grid-col-2 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .lg\:grid-col-3 {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }

    .lg\:grid-col-4 {
        grid-template-columns:repeat(4, minmax(0, 1fr))
    }

    .lg\:col-span-2 {
        grid-column: span 2/span 2
    }

    .lg\:bg-transparent {
        background-color: transparent
    }
}

@media screen and (min-width: 1024px) {
    html {
        font-size: calc(1rem + .2vw)
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px
    }
}

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

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important
    }
}

@media print {
    * {
        background: transparent !important;
        box-shadow: none !important;
        color: #000 !important;
        text-shadow: none !important
    }

    a[href]:after {
        content: " (" attr(href) ")"
    }

    img {
        max-height: 100vh;
        page-break-inside: avoid
    }

    h3, p {
        orphans: 3;
        widows: 3
    }

    h3 {
        page-break-after: avoid
    }
}

@media (min-width: 992px) {
    header .list {
        inset: auto
    }
}

@media (max-width: 991px) {
    header .list {
        background-color: var(--Bg2);
        height: 100dvh;
        inset: auto;
        opacity: 0;
        transition: translate .3s ease-out, opacity .3s ease-in-out, display allow-discrete .3s ease-out, overlay allow-discrete .3s ease-out;
        translate: 240px 0;
        width: min(100%, 240px);

        &::backdrop {
            -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
            background-color: rgba(0, 0, 0, .5);
            opacity: 0;
            transition: opacity .3s ease-in-out
        }

        &:popover-open {
            opacity: 1;
            translate: 0 0;

            &::backdrop {
                opacity: 1
            }
        }
    }
}

@starting-style {
    header .list:popover-open {
        opacity: 0;
        translate: 250px 0
    }

    header .list:popover-open::backdrop {
        opacity: 0
    }

    .accordion-body.show {
        display: none;
        min-height: 0;
        opacity: 0
    }
}

.about .icon:before, .fqs .accordion-item .accordion-header:before, .hero .containe figure:before, .hero:before, .mainHeading p:before, .scooter figure:before, .services .serCard:before, footer .footerMeta h3:before, header .list li a:before {
    content: "";
    position: absolute;
    transition: var(--t-s)
}

.about .icon:before, .hero:before, .scooter figcaption, header .list li a:before {
    left: 50%;
    transform: translateX(-50%)
}

.mainHeading p:before {
    top: 50%;
    transform: translateY(-50%)
}

.services .serCard:before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

body {
    font-family: IBM Plex Sans Arabic, serif
}

a {
    color: var(--black);
    transition: var(--t-s)
}

a.white {
    color: var(--w)
}

a.mainColor {
    color: var(--mainColor);
    position: relative
}

.btn-skew {
    background-color: var(--mainColor);
    border-radius: 6px
}

.btn-skew.isBorder {
    background-color: transparent;
    border: 1px solid var(--mainColor)
}

.btn-skew.isBorder a, .btn-skew.isBorder span, .btn-skew.isBorder:not(:has(a)) {
    color: var(--mainColor);
    transition: var(--t-s)
}

.btn-skew.isBorder.btn-icon img {
    filter: invert(0)
}

.btn-skew.isBorder.btn-icon:hover img {
    filter: invert(1);
    transition: var(--t-s)
}

.btn-skew.isBorder:hover {
    border-color: var(--secondColor)
}

.btn-skew.isBorder:hover a, .btn-skew.isBorder:hover span, .btn-skew.isBorder:hover:not(:has(a)) {
    color: var(--w)
}

.btn-skew:before {
    background-color: var(--secondColor)
}

.btn-skew:has(a), .btn-skew:has(span), .btn-skew:not(:has(a)) {
    font-size: 1rem;
    padding: 8px 20px
}

.btn-skew.btn-icon {
    padding: 8px 10px
}

.btn-skew.btn-icon img {
    filter: invert(1);
    scale: 1.3;
    width: 23px
}

menu li {
    list-style-type: none
}

h1, h3 {
    color: var(--black)
}

p {
    color: var(--gray)
}

figure {
    margin-block: 0;
    margin-inline: 0
}

.tag {
    border: 1px solid var(--secondColor);
    border-radius: 999px;
    padding: 8px 20px
}

@keyframes imgRightLeft {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
        transform: translateX(-5%)
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes imgLeftRight {
    0% {
        clip-path: inset(0 0 0 100%);
        opacity: 0;
        transform: translateX(5%)
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes upDown {
    0% {
        clip-path: inset(100% 0 0 0);
        opacity: 0;
        transform: translateY(5%)
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes DownUp {
    0% {
        clip-path: inset(0 0 100% 0);
        opacity: 0;
        transform: translateY(5%)
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateY(0)
    }
}

[data-aos=imgLeft] {
    opacity: 0
}

[data-aos=imgLeft].aos-animate {
    animation: imgLeftRight 1.3s cubic-bezier(.645, .045, .355, 1) .4s forwards
}

[data-aos=imgUp] {
    opacity: 0
}

[data-aos=imgUp].aos-animate {
    animation: upDown 1.3s cubic-bezier(.645, .045, .355, 1) .4s forwards
}

[data-aos=imgDown] {
    opacity: 0
}

[data-aos=imgDown].aos-animate {
    animation: DownUp 1.3s cubic-bezier(.645, .045, .355, 1) .4s forwards
}

.mainHeading.center {
    text-align: center
}

.mainHeading p {
    color: var(--secondColor);
    padding-inline-start: 14px
}

.mainHeading p:before {
    aspect-ratio: 1;
    background-image: url(../assets/svg/icon-heading.svg);
    background-repeat: no-repeat;
    background-size: cover;
    inset-inline-start: -10px;
    width: 16px
}

header {
    background-color: var(--w);
    z-index: 999
}

header .list li a:before {
    background-color: var(--secondColor);
    bottom: -4px;
    height: 2px;
    width: 0
}

header .list li a.active, header .list li a:hover {
    color: var(--secondColor);
    letter-spacing: .0125rem
}

header .list li a.active:before, header .list li a:hover:before {
    width: 100%
}

.hero {
    scroll-margin-top: 100px
}

.hero .containe {
    background-color: var(--Bg2);
    margin: 0 auto;
    max-height: 800px;
    padding: 80px;
    width: min(100% - 20px, 1800px)
}

.hero .containe figure {
    z-index: 3
}

.hero .containe figure:before {
    background-color: var(--w);
    border-end-start-radius: 300px;
    border-start-start-radius: 300px;
    height: 70%;
    inset-inline-end: -80px;
    top: 20%;
    width: 60%;
    z-index: -1
}

@media (max-width: 600px) {
    .hero .containe {
        padding: 80px 0
    }
}

.hero:before {
    aspect-ratio: 1;
    background-color: var(--secondColor);
    border-radius: 50%;
    bottom: 40px;
    filter: blur(100px);
    left: 55%;
    opacity: .2;
    width: 300px
}

body {
    padding-top: 104px
}

.about {
    padding-block: 10dvh 5dvh;
    scroll-margin-top: 100px
}

.about .icon {
    aspect-ratio: 1;
    /*background-color: var(--secondColor);*/
    border-radius: 50%;
    opacity: .1;
    top: 0;
    width: 100px;
    z-index: -1;
    display : flex;
    align-items: center;
    justify-content: center;
    background-color:  #05274d;
}
.about .icon .image-icon{
    display: block;
    height: 30px;
    max-width: 100%;
}
.about .btn-skew {
    margin-top: 7dvh
}

.about .leftSide figure {
    width: 100%
}

.about .leftSide figure:nth-child(2) {
    border-block-start: 10px solid var(--w);
    border-inline-start: 10px solid var(--w);
    bottom: -30px;
    inset-inline-end: -10px;
    position: absolute;
    width: 40%
}

.services {
    background-color: var(--Bg2);
    padding-block: 10dvh 5dvh;
    scroll-margin-top: 100px
}

.services .mainHeading {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 5dvh
}

.services .serCard {
    background-color: var(--w);
    position: relative;
    z-index: 2
}

.services .serCard:before {
    background-color: var(--secondColor);
    border-radius: 12px;
    height: 0;
    transition: var(--t-s);
    width: 0;
    z-index: -1
}

.services .serCard .btn-skew {
    margin-top: 6px
}

.services .serCard .btn-skew img {
    filter: invert(1);
    transform: rotate(45deg);
    transition: var(--t-s)
}

.services .serCard .btn-skew:hover img {
    transform: rotate(90deg)
}

.services .serCard:hover:before {
    height: 100%;
    width: 100%
}

.services .serCard:hover h3, .services .serCard:hover p {
    color: var(--w)
}

.scooter {
    padding-block: 10dvh 5dvh;
    scroll-margin-top: 100px
}

.scooter .mainHeading {
    display: flex;
    flex-direction: column;
    margin-bottom: 4dvh;
    place-items: center
}

.scooter figure {
    height: 500px;
    position: relative
}

.scooter figure:before {
    background-color: rgba(0, 0, 0, .4);
    border-radius: 12px;
    height: 100%;
    width: 100%
}

.scooter figcaption {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: var(--w);
    position: absolute;
    top: 20px
}

.why {
    background-color: var(--Bg2);
    padding-block: 10dvh 5dvh;
    scroll-margin-top: 100px
}

.why .mainHeading {
    display: flex;
    flex-direction: column;
    margin-bottom: 7dvh;
    place-items: center
}

.why .invert img {
    filter: invert(1)
}

.why h3 {
    font-size: 1.5rem;
    padding-block: 12px
}

.why .box {
    margin-bottom: 3dvh
}

.why .middel figure {
    aspect-ratio: 1/1.3;
    margin-inline: auto;
    width: 350px
}

.why .middel figure img {
    border-radius: 999px
}

.fqs {
    padding-block: 10dvh 8dvh;
    scroll-margin-top: 100px
}

.fqs .title {
    padding-bottom: 4dvh
}

.fqs .title .mainHeading {
    padding-bottom: 2.5dvh
}

.fqs .accordion-item {
    margin-bottom: 3dvh
}

.fqs .accordion-item .accordion-header {
    border-bottom: 1px solid #e5e5e5;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 12px 0;
    position: relative;
    text-align: start;
    width: 100%
}

.fqs .accordion-item .accordion-header:before {
    background-image: url(../../../assets/svg/angle.svg);
    background-repeat: no-repeat;
    background-size: contain;
    height: 20px;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 20px
}

.fqs .accordion-item .accordion-header.show:before {
    transform: translateY(-50%) rotate(180deg)
}

.fqs .accordion-item .accordion-body {
    height: 0;
    overflow: hidden;
    padding-top: 2dvh;
    transition: var(--t-s)
}

.fqs .leftSide img {
    scale: 1 1.2
}

.contact {
    padding-block: 5dvh;
    scroll-margin-block-start: 100px
}

.contact .formGroup input, .contact .formGroup textarea {
    border: 1px solid #d0d0d0;
    transition: var(--t-s)
}

.contact .formGroup input::-moz-placeholder, .contact .formGroup textarea::-moz-placeholder {
    font-size: .9rem
}

.contact .formGroup input::placeholder, .contact .formGroup textarea::placeholder {
    font-size: .9rem
}

.contact .formGroup input:focus, .contact .formGroup textarea:focus {
    border-color: var(--secondColor);
    outline: none
}

.contact .contactLayout {
    background-color: var(--w);
    border-radius: 24px;
    box-shadow: 0 0 20px hsla(0, 0%, 42%, .17);
    margin-inline: auto;
    padding: 1.4rem 2rem;
    width: min(1000px, 100%)
}

.contact .contactLayout form {
    padding-top: 5dvh
}

.contact .contactLayout .mainHeading {
    display: flex;
    flex-direction: column;
    place-items: center
}

.contact .contactLayout .btn-skew {
    display: flex;
    margin-inline: auto;
    place-items: center
}

footer {
    background-color: var(--Bg2);
    padding-top: 80px
}

footer .container {
    grid-template-rows:1fr 100px
}

footer .footerMeta h3 {
    display: inline-block;
    font-size: 1.25rem;
    position: relative
}

footer .footerMeta h3:before {
    background-color: var(--secondColor);
    bottom: -8px;
    height: 2px;
    inset-inline-start: 0;
    width: 90%
}

footer .footerMeta ul {
    margin-top: 16px
}

footer .footerMeta ul li {
    padding-bottom: 10px
}

footer .footerMeta ul li a {
    color: var(--gray)
}
 .footer-bottom {
     display : flex ;
     align-items: center;
     gap: 12px;
 }
.wrapper-social{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
 .social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #ffffff;
    color: #05274d;
    border: 1px solid #05274d;
    border-radius: 50%;
    margin-left: 10px;
    font-size: 18px;
}
  .social-icons a:hover {
    background: #05274d;
    color: #ffffff;
}
 .footer-bottom span {
    color: #05274d;
    font-weight: 600;
}/*# sourceMappingURL=style.css.map */