@import url(https: //fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap);

.blog-card-img, .discount, .financial-offer .img-container, .hero-section .container, .primary-custom-btn, .section-nav a, .slide-card, .slider-title, .sub-nav-tab .nav-link, .text-medium-24 {
    text-align: center
}

.about-hero, .colored-section, .contact-us, .hero-section-img, .regular-btn, .slide, .slider-content, .soon-part {
    overflow: hidden
}

.section-nav a, .slide-title, .soon-badge, button {
    white-space: nowrap
}

@font-face {
    font-family: "Expo Arabic";
    src: url("../font/Expo-Arabic-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Expo Arabic";
    src: url("../font/Expo-Arabic-Book.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Expo Arabic";
    src: url("../font/Expo-Arabic-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Expo Arabic";
    src: url("../font/Expo-Arabic-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

*, h1, h2, h3, h4, h5, h6, ol, p, ul {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: .3s ease-in-out
}

a {
    text-decoration: none
}

:root {
    --base-color: #0c2030;
    --white-color: #ffffff;
    --gray-7f-color: #7f7f7f;
    --gray-6f-color: #6f6f6f;
    --text-gray-color: #363d4f;
    --black-color: #000000;
    --text-black-color: #060b13;
    --primary-color: #397d86;
    --primary-color-alt: #28736e;
    --primary-base-color: #6bafb8;
    --orange-color: #ff6600;
    --bg-gredient-primary: linear-gradient(180deg, #6bafb8 0%, #397d86 100%)
}

body {
    font-weight: 400;
    background-color: var(--white-color);
    overflow-x: hidden
}

.big-text, .primary-custom-btn, .regular-btn, .text-medium-24, h1, h2, h4 {
    font-weight: 500
}

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

html[dir=ltr] body {
    direction: ltr;
    font-family: Onest,sans-serif
}

@media (min-width:1400px) {
    .container {
        max-width: 1200px;
        padding-inline: 0
    }

    .video-section .container + .position-absolute img {
        height: 640px
    }
}

:focus-visible {
    outline: 0
}

.animated-blog-card .blog-card:hover .outlined-gray-link, .animated-blog-card .blog-card:hover h3, .big-package .primary-custom-btn:hover, .bordered-text:hover h4, .colored, .packages-cards .package:nth-of-type(2) h5, .packages-cards .package:nth-of-type(3) h5, .services-text:hover p span, .srv-explain-row:hover .outlined-gray-link, .tool-card:hover .outlined-gray-link {
    color: var(--primary-color)
}

.colored-7f {
    color: var(--gray-7f-color);
    letter-spacing: -.3px;
    line-height: 150%
}

.text-blacked {
    color: var(--black-color);
    line-height: 160%
}

.colored-section {
    background-color: #075654;
    color: var(--white-color)
}

.orange {
    color: var(--orange-color)
}

.bg-gray-light {
    background: #f5f7f7;
    padding: 20px;
    border-radius: 32px
}

.bg-prim {
    background: rgba(107,175,184,.12);
    padding: 20px;
    border-radius: 12px
}

    .bg-prim:not(:last-child), .half-section-top .sub-heading, .mb-12, div .opacity-element:not(:last-of-type) {
        margin-bottom: 12px
    }

.grayed-bg {
    background: #f3f5f7
}

.bg-prim-alt {
    background: var(--primary-color-alt)
}

.main-content, .navbar, .service-department:hover .icon, .top-circle, .whatsapp-btn {
    background-color: var(--white-color)
}

.colored-section .sub-heading {
    color: #f7f7f7
}

.text-medium-24 {
    color: var(--black-color);
    letter-spacing: -.18px;
    line-height: 150%;
    font-size: 24px
}

.bordered-text {
    border: 1px solid #0000000f;
    background: var(--white-color);
    padding: 24px;
    border-radius: 22px;
    line-height: 150%;
    letter-spacing: -.3px
}

.big-heading {
    font-size: 58px;
    color: var(--text-black-color);
    line-height: 76.8px;
    margin-block: 15px 22px
}

    .big-heading.maxed {
        max-width: 450px
    }

.heading-56 {
    font-size: 56px;
    color: var(--black-color);
    line-height: 64px
}

.section-title {
    font-size: 40px;
    color: var(--black-color);
    line-height: 130%;
    letter-spacing: -1.5px
}

.section-description {
    font-size: 14px;
    color: var(--gray-6f-color);
    line-height: 150%
}

.colored-base, .more-link, .navbar-nav .nav-link:hover, .section-title span, .service-card:hover h3, .soon-badge, .sub-heading, .sub-heading-16, .sub-nav-tab .nav-link:hover {
    color: var(--primary-base-color)
}

.sub-heading {
    font-size: 20px
}

.sub-heading-16 {
    font-size: 16px;
    line-height: 23.8px
}

.grayed-text {
    color: var(--gray-6f-color)
}

.main-text {
    line-height: 32px;
    color: var(--text-gray-color);
    max-width: 1035px
}

.big-text, .hero-section h1, .service-card h3, .services-text p {
    color: var(--black-color)
}

.big-text {
    font-size: 36px;
    line-height: 160%
}

.text-sm-grayed {
    color: var(--gray-6f-color);
    font-size: 12px;
    line-height: 150%
}

.base-btn, .bg-gred-prim .more-link, .bg-prim-alt, .bg-prim:hover > *, .btn-base-primary, .colored-section .section-title, .primary-custom-btn, .service-department:hover h6, .service-department:hover > * {
    color: var(--white-color)
}

button {
    background: 0 0;
    border: unset
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 48px 12px 10px;
    z-index: 100;
    transition: padding .3s
}

    .navbar > * {
        font-size: 14px
    }

    .navbar .dropdown-menu .dropdown-item {
        padding-inline: 0;
        color: var(--white-color);
        font-size: 14px;
        line-height: 150%;
        padding-block: 8.5px;
        transition: .3s
    }

    .navbar .dropdown-menu li {
        border-bottom: 1px solid #f2f2f2
    }

    .navbar .btn-base-primary:hover {
        background: var(--primary-color)
    }

.main-content {
    margin-top: 132px
}

.btn-base-primary, .navbar-nav .nav-link.active::after, .primary-custom-btn {
    background-color: var(--primary-base-color)
}

.btn-base-primary {
    border: 1px solid #0000001a;
    padding: 12px;
    border-radius: 40px;
    line-height: 100%;
    height: 44px;
    transition: .2s ease-in-out
}

.primary-custom-btn {
    display: block;
    padding-block: 6px;
    border: 1px solid var(--primary-base-color);
    border-radius: 8px;
    line-height: 24px;
    font-size: 16px;
    transition: .2s ease-in-out
}

.py-80, footer {
    padding-block: 80px
}

    .mt-80, footer .row + p {
        margin-top: 80px
    }

.contact-form > div, .mb-32, .services-section .bordered-text:first-of-type {
    margin-bottom: 32px
}

.mb-40 {
    margin-bottom: 40px
}

.mb-24 {
    margin-bottom: 24px
}

.my-40 {
    margin-block: 40px
}

.blog-details .img-container.container, .stats-section {
    margin-block: 60px
}

.py-64 {
    padding-block: 64px
}

.blog-card-body > div, .blog-card-body > ul:not(:last-child), .mb-60 {
    margin-bottom: 60px
}

.mb-64 {
    margin-bottom: 64px
}

.py-40, .services-section {
    padding-block: 40px
}

.pt-40 {
    padding-top: 40px
}

.pb-40 {
    padding-bottom: 40px
}

.mb-48 {
    margin-bottom: 48px
}

.gap-12 {
    gap: 12px
}

.gap-10 {
    gap: 10px
}

.btns, .gap-16 {
    gap: 16px
}

.mt-60, .srv-explain-row {
    margin-top: 60px
}

    .srv-explain-row:hover .video-box {
        box-shadow: 0 0 0 1px #6bafb870
    }

.maxed-text, .services-section .section-description {
    max-width: 480px
}

.navbar-nav {
    gap: 28px
}

.navbar-expand-lg .navbar-nav .nav-link {
    color: #474747;
    line-height: 21px;
    padding: 0
}

.navbar-nav .nav-link.active {
    width: fit-content;
    position: relative;
    font-weight: 500;
    color: var(--primary-base-color)
}

    .navbar-nav .nav-link.active svg path, .navbar-nav .nav-link:hover svg path {
        stroke: var(--primary-base-color)
    }

    .navbar-nav .nav-link.active::after {
        position: absolute;
        content: " ";
        bottom: -4px;
        inset-inline-start: 0;
        height: 2px;
        width: 100%;
        border-radius: 20px
    }

.navbar-nav + div {
    gap: 22px
}

.dropdown-toggle:after {
    display: none
}

.dropdown-toggle svg, .whatsapp-btn svg {
    margin-inline-start: 10px
}

.navbar-toggler {
    height: 40px;
    width: 40px;
    padding: 0;
    border: 1px solid #f2f2f2;
    background: #f5f5f5;
    border-radius: 58px
}

.base-btn, footer {
    background-color: var(--base-color)
}

.navbar-toggler span {
    display: block;
    height: 20px
}

.form-check-input:focus, .form-control:focus, .navbar-toggler:focus {
    box-shadow: none
}

.regular-btn {
    font-size: 14px;
    border-radius: 40px;
    padding-block: 16.2px;
    line-height: 100%;
    transition: .4s cubic-bezier(.4, 0, .2, 1);
    position: relative
}

.base-btn {
    border: 1px solid #ffffff3d;
    padding-inline: 24px 20px;
    display: block;
    width: fit-content
}

    .base-btn.watch-link svg {
        margin-inline-end: 10px
    }

.base-outlined-btn {
    color: var(--base-color);
    border: 1px solid var(--base-color);
    padding-inline: 26px
}

.base-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,#6bafb8 0,var(--primary-color) 100%);
    transition: left .5s cubic-bezier(.4, 0, .2, 1);
    z-index: -1
}

.base-btn:hover::before {
    left: 0
}

.base-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgb(102 126 234 / 12%);
    border-color: var(--primary-base-color)
}

.base-btn svg {
    transition: transform .4s cubic-bezier(.4, 0, .2, 1)
}

.base-outlined-btn:hover {
    transform: translateY(-3px) scale(1.05);
    border-color: var(--primary-color);
    color: var(--primary-color)
}

.accordion-button:hover, .packages-cards .package:nth-of-type(4) .primary-custom-btn:hover, .section-nav a:hover {
    color: var(--primary-color-alt)
}

.hero-section .container {
    position: relative;
    z-index: 2;
    gap: 24px
}

.hero-section h1 {
    font-size: 54px;
    line-height: 64px
}

.hero-section-img {
    margin-top: -460px
}

.stats-section {
    padding-block: 64px;
    border-block: 1px solid #e7e9ed
}

.stats-card {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 24px;
    min-height: 120px;
    border-radius: 12px;
    font-weight: 350
}

    .stats-card p {
        font-size: 17px;
        line-height: 24px;
        letter-spacing: -.2px
    }

.counter-element span {
    font-size: 48px;
    line-height: 58px;
    letter-spacing: -1.8px;
    font-weight: 600;
    font-family: Onest,sans-serif
}

.counter-element small {
    letter-spacing: .2px
}

.section-title-description {
    padding-block: 16px 64px
}

html[dir=ltr] .section-title-description p {
    max-width: 500px
}

.more-link {
    font-size: 14.4px;
    line-height: 100%
}

    .more-link + a svg {
        margin-inline-start: 7.5px;
        transition: .2s ease-in-out
    }

@keyframes arrowBounce-ltr {
    0%,100% {
        transform: translateX(5px)
    }

    50% {
        transform: translateX(10px)
    }
}

@keyframes arrowBounce-rtl {
    0%,100% {
        transform: translateX(-5px)
    }

    50% {
        transform: translateX(-10px)
    }
}

html[dir=rtl] .base-btn:not(.watch-link):hover svg {
    animation: .6s ease-in-out infinite arrowBounce-rtl
}

html[dir=ltr] .base-btn:not(.watch-link):hover svg {
    animation: .6s ease-in-out infinite arrowBounce-ltr
}

.more-link:hover + a svg {
    transform: translateX(-5px)
}

html[dir=ltr] .more-link:hover + a svg {
    transform: translateX(5px)
}

@keyframes arrowBounce {
    0%,100% {
        transform: translateX(-5px)
    }

    50% {
        transform: translateX(-10px)
    }
}

.regular-btn:active {
    transform: translateY(-1px) scale(.98)
}

.services-text p {
    font-size: 19px;
    line-height: 160%;
    margin-bottom: 40px
}

    .services-text p span {
        font-size: 24px;
        color: #28736e;
        font-weight: 700
    }

.slider-content {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px
}

.slider-container {
    width: 100%
}

.slider-wrapper {
    position: relative;
    width: 100%;
    height: 413px;
    display: flex;
    justify-content: center;
    align-items: center
}

.financial-offer .img-container img, .slide {
    width: 55%
}

.slide {
    position: absolute;
    height: 90%;
    transition: .8s cubic-bezier(.4, 0, .2, 1);
    border-radius: 16px;
    opacity: 0;
    pointer-events: none;
    z-index: 1
}

.outlined-gray-link svg path, .section-nav a, .whatsapp-btn svg path {
    transition: .2s ease-in-out
}

.slide.active {
    width: 60%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%) scale(1);
    opacity: 1;
    z-index: 3
}

.slide.prev {
    left: 0;
    transform: translateX(-30%) scale(.85);
    opacity: .6;
    z-index: 2
}

.slide.next {
    right: 0;
    transform: translateX(30%) scale(.85);
    opacity: .6;
    z-index: 2
}

.slide img, .video-section .container + .position-absolute .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.provided-services {
    padding-block: 105px;
    background: #f3f5f7;
    overflow: hidden
}

    .provided-services .section-top {
        max-width: 865px
    }

.section-decoration {
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 192px
}

.service-card {
    padding: 20px;
    border-radius: 25.09px;
    background-color: var(--white-color);
    border: 1px solid #f2f2f2;
    min-height: 400px;
    max-height: 400px;
    border: 1px solid var(--white-color)
}

    .service-card:hover {
        border-color: var(--primary-base-color);
        transform: scale(1.05)
    }

.service-department:hover, .slider-item:hover, .video-box:hover svg {
    transform: translateY(-10px)
}

.service-card h3 {
    font-size: 24px;
    letter-spacing: -1.25px;
    line-height: 32.61px
}

.soon-badge {
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #6bafb833;
    border-radius: 59.09px;
    padding: 5px 15.76px;
    font-size: 18px;
    line-height: 39.39px
}

.blog-card-img, .our-values .img-container, .why-img {
    border-radius: 12px;
    overflow: hidden
}

.service-card:hover .soon-badge {
    background: var(--primary-base-color);
    color: var(--white-color)
}

.section-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.provided-services .row {
    --bs-gutter-y: 20px
}

.provided-services .section-top p {
    max-width: 88%;
    margin-inline: auto
}

.partners .logos-slide img.diwidth {
    width: 100px
}

.why-section .section-top {
    max-width: 932px
}

.benefits-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.outlined-gray-link, .whatsapp-btn {
    display: block;
    width: fit-content;
    transition: .2s ease-in-out
}

.why-section .benefits-list {
    gap: 24px
}

.benefits-list li, .promotion .section-top {
    gap: 32px
}

.benefit-icon {
    background-color: var(--primary-base-color);
    min-width: 50px;
    height: 50px
}

.benefits-list li:hover h3 {
    font-size: 25px
}

.why-img img {
    max-height: 460px
}

.benefits-list h3 {
    font-size: 24px;
    margin-bottom: 12px;
    line-height: 150%;
    color: #040815
}

.benefits-list p {
    color: #474747;
    line-height: 150%
}

.why-section .benefits-list p {
    max-width: 420px
}

.logo-track {
    gap: 34px
}

.blog-card .section-description {
    line-height: 21.8px;
    letter-spacing: -.09px
}

.blog-card-body .grayed-text {
    line-height: 30px
}

.blog-card-img {
    padding: 4px;
    background-color: rgba(255,255,255,0);
    box-shadow: 0 0 0 1px #e9ebf1
}

.blog-title {
    font-size: 22.13px;
    letter-spacing: -.47px;
    line-height: 28.8px;
    margin-block: 17px 32px;
    color: var(--text-black-color)
}

.outlined-gray-link {
    margin-top: 17px;
    background: linear-gradient(180deg,rgba(236,239,243,0) 0,rgba(236,239,243,.04) 100%);
    box-shadow: 0 0 0 1.5px #e9ebf1;
    font-size: 14px;
    line-height: 23.8px;
    color: #060b13;
    border-radius: 999px
}

    .outlined-gray-link svg {
        margin-inline-start: 4px
    }

.faq {
    margin-block: 40px 110px
}

.faq-card {
    background: #f5f7f7;
    padding: 40px;
    border-radius: 30px
}

.accordion .accordion-item {
    border: 1px solid #f2f2f2;
    border-radius: 15.15px
}

.accordion-body {
    padding: 0 40px 44px;
    font-size: 19.22px;
    line-height: 160%;
    color: var(--gray-6f-color)
}

.accordion-button.collapsed {
    border-radius: 15.15px
}

.accordion-item:first-of-type .accordion-button {
    border-top-right-radius: 15.15px;
    border-top-left-radius: 15.15px
}

.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-left-radius: 15.15px;
    border-bottom-right-radius: 15.15px
}

.accordion .accordion-item:not(:last-of-type) {
    margin-bottom: 20px
}

.accordion-button {
    justify-content: flex-end;
    gap: 31.25px;
    font-size: 22.73px;
    line-height: 100%;
    color: #474747;
    padding: 24px 40px
}

.whatsapp-btn, footer {
    font-size: 14px;
    line-height: 150%
}

.accordion-button:focus {
    box-shadow: unset
}

.accordion-item:has(.accordion-button:not(.collapsed)) {
    border: 1px solid #9bc1c2
}

.accordion-button:not(.collapsed) {
    color: var(--black-color);
    box-shadow: none;
    background-color: unset
}

.accordion-button::after {
    margin-right: unset;
    width: 37.8px;
    height: 37.8px;
    background-color: rgba(230,230,230,.42);
    border: .95px solid rgba(220,220,220,.41);
    border-radius: 50%;
    background-position: center;
    background-size: 16px
}

.contact-us {
    background: #075654;
    border-radius: 32px;
    padding-top: 120px;
    padding-inline-start: 72px;
    padding-bottom: 0;
    padding-inline-end: 0;
    gap: 46px;
    color: var(--white-color);
    margin-block: 110px 120px
}

.contact-text .bold-text {
    font-size: 38px;
    font-weight: 700;
    line-height: 140%;
    margin-block: 12px 20px;
    max-width: 590px
}

.contact-text p:not(.bold-text) {
    font-size: 21px;
    line-height: 150%;
    max-width: 560px
}

.whatsapp-btn {
    color: var(--black-color);
    font-weight: 500;
    padding: 12px 22px;
    border: 1px solid var(--white-color);
    border-radius: 30px
}

.service-department, .service-department > * {
    transition: .3s ease-in-out
}

.whatsapp-btn:hover {
    background-color: transparent;
    border-color: var(--white-color);
    color: var(--white-color)
}

    .whatsapp-btn:hover svg path {
        stroke: var(--white-color)
    }

.contact-us .whatsapp-btn {
    margin-top: 42px
}

.top-circle {
    top: -80px;
    width: 116px;
    height: 116px;
    inset-inline-start: 50%
}

.bottom-circle {
    bottom: 0;
    inset-inline-start: 0
}

footer {
    color: #eaedf6;
    margin-top: 120px
}

    footer ul li {
        list-style: none
    }

    footer h5 {
        font-size: 18px;
        line-height: 130%;
        margin-bottom: 15px
    }

    footer a {
        color: #eaedf6;
        transition: color .3s
    }

        footer a:hover {
            color: var(--primary-base-color);
            text-decoration: underline
        }

            footer a:hover svg path {
                fill: var(--primary-base-color)
            }

    .service-department.bg-gray-srv h6, footer ul li:not(:last-child) {
        margin-bottom: 16px
    }

    footer p:nth-of-type(2) {
        margin-block: 32px 16px
    }

.socials {
    gap: 32px;
    margin-top: 16px
}

.blog-details .section-top, .footer-upper-part {
    max-width: 800px
}

    .footer-upper-part p {
        max-width: 550px;
        font-size: 22px;
        line-height: 35.2px
    }

    .footer-upper-part h3 {
        margin-block: 20px 96px;
        font-size: 32px;
        line-height: 150%;
        letter-spacing: -.32px
    }

.play-icon {
    inset-inline-start: 50%;
    cursor: pointer
}

    .back-arrow:hover svg path, .play-icon:hover svg path {
        fill: var(--white-color)
    }

    .play-icon:hover svg rect {
        fill: var(--base-color)
    }

.about-hero {
    padding-block: 70px
}

    .about-hero .row {
        --bs-gutter-x: 0.5rem
    }

.half-section-top {
    margin-bottom: 50px
}

.section-nav, .sub-nav-tab {
    margin-bottom: 48px;
    border-radius: 12px
}

.bordered-text h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px
}

.package h5, .package small, .package-card > div > ul > li:not(:last-child) {
    margin-bottom: 8px
}

.bordered-text p {
    color: #474747
}

.services-section .bordered-text:nth-of-type(2) {
    flex: 1
}

.different .section-description {
    max-width: 830px
}

.service-department {
    padding: 42px 32px;
    min-height: 233px;
    border: 1px solid #0000000a;
    background: rgba(107,175,184,.08);
    border-radius: 12px
}

.service-departments .row {
    --bs-gutter-x: 12px
}

.service-department h6 {
    margin-block: 24px 12px;
    font-weight: 700;
    color: #060b13;
    line-height: 21px
}

.service-department .icon {
    width: 56px;
    min-height: 56px;
    border-radius: 50%;
    background: rgba(107,175,184,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto
}

.service-department p, html[dir=ltr] .navbar .dropdown-menu .dropdown-item {
    font-size: 12px
}

.service-department.bg-gray-srv {
    background: #f3f5f7;
    min-height: 220px;
    padding: 20px 24px
}

.service-department:hover {
    background-color: var(--primary-base-color);
    color: var(--white-color)
}

.plans {
    padding-block: 24px 64px
}

.grayed-box ul {
    padding-inline-start: 24px
}

.maxed-650, .plans + .service-explain .section-top {
    max-width: 650px
}

.service-explain .outlined-gray-link {
    padding: 8px 12px
}

.package-text {
    max-width: 655px
}

    .package-text .outlined-gray-link {
        min-width: 277px;
        text-align: center;
        font-weight: 500
    }

    .package-text .black-text {
        color: var(--black-color);
        font-size: 15px;
        font-weight: 700;
        margin-top: 24px
    }

.section-nav {
    background-color: #f6f6f6;
    width: fit-content
}

    .section-nav a {
        flex: 1;
        color: var(--black-color);
        font-size: 20px;
        line-height: 23.8px;
        padding: 22px
    }

        .section-nav a.active {
            background-color: #075654;
            border-radius: 12px;
            color: var(--white-color)
        }

.sub-nav-tab {
    box-shadow: 0 1px 2px 0 #00000033;
    padding: 4px;
    background-color: var(--white-color);
    width: fit-content;
    margin-inline: auto
}

    .bg-gred-prim, .sub-nav-tab .nav-link.active {
        background: var(--bg-gredient-primary);
        color: var(--white-color)
    }

    .sub-nav-tab .nav-link {
        font-size: 14px;
        min-width: 108px;
        color: var(--black-color);
        line-height: 20px;
        padding-block: 8px;
        border: none;
        transition: color .2s ease-in-out
    }

.bordered-text:hover, .form-check-input:checked, .services-text:hover {
    border-color: var(--primary-base-color)
}

.features-table td > *, .package-card .colored-base {
    line-height: 150%;
    display: block
}

.sub-nav-tab .nav-link.active {
    border-radius: 10px
}

.packages-cards {
    gap: 24px;
/*    flex-wrap: wrap;*/
    margin-bottom: 48px
}

.bg-prim-alt li, .slide-icon {
    align-items: center;
    display: flex
}

.package {
    border: 1px solid #0000000f;
    padding: 14px;
    border-radius: 11px;
    min-width: 213px;
    position: relative
}

    .package.package-orange {
        background: #fffcf7;
        color: #f60
    }

    .package h5 {
        font-size: 18px;
        line-height: 150%;
        font-weight: 400
    }

.packages-cards .package:nth-of-type(4) h5 {
    color: #28736e
}

.packages-cards .package:nth-of-type(4) .primary-custom-btn {
    background-color: #28736e
}

.bg-gred-prim .primary-custom-btn {
    background-color: var(--white-color);
    color: var(--black-color)
}

.package .primary-custom-btn {
    margin-top: 14.5px
}

.package > * {
    display: block
}

.discount, .package small, html[dir=ltr] .counter-element small {
    font-size: 10px
}

.package-price {
    font-size: 15px;
    font-weight: 500;
    line-height: 120%;
    margin-bottom: 11px
}

    .package-price strong {
        font-weight: 700;
        font-size: 23px;
        font-family: Onest,sans-serif
    }

.features-table {
    background: var(--white-color);
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none
}
.features-table .table {
    table-layout: fixed;
    width: 100%;
}
    .features-table tbody tr:nth-child(odd), .video-box {
        background-color: #f3f5f7
    }

    .features-table::-webkit-scrollbar {
        display: none
    }

    .features-table th {
        font-weight: 500;
        font-size: 16px;
        color: var(--primary-base-color);
        /*        padding: 0 0 40px;*/
/*        height: 85px;
        white-space: normal; 
        word-wrap: break-word;
        overflow-wrap: anywhere;
        vertical-align: top;*/
    }
    .features-table .primary-custom-btn {
        padding-block: 5px
    }

    .features-table td {
        padding: 16px;
        vertical-align: middle;
        font-size: 9px
    }

    .features-table .table-footer td {
        padding-top: 48px
    }

    .features-table td h5 {
        font-size: 18px;
        font-weight: 500;
        color: #020202
    }
    
    .features-table td span {
        max-width: 200px
    }

        .features-table td span.colored {
            font-weight: 500;
            font-size: 10px;
            margin-block: 1px
        }

    .features-table th:first-child {
        color: var(--black-color);
        font-size: 26px;
        line-height: 140%;
        font-weight: 500
    }

    .features-table td:first-child {
        font-weight: 500;
        color: #333;
        padding-inline-start: 24px
    }

.cell-details svg {
    min-width: 24px;
    margin-inline-end: 24px
}

.table > :not(caption) > * > * {
    background-color: unset;
    border-bottom-width: 0
}
/*.packages-details{
    position: relative;
    height: 100%;
}*/
    .packages-details .bg-prim-alt {
        /*    padding: 89px 16px;*/
        padding-inline: 16px;
        border-radius: 12px;
    }

.bg-prim-alt h4 {
    line-height: 180%;
    font-size: 20px
}

.bg-prim-alt p {
    font-size: 12px;
    margin-bottom: 14px;
    font-weight: 700
}

.bg-prim-alt li {
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.11);
    font-weight: 500;
    line-height: 180%;
    font-size: 14px;
    gap: 6px
}

    .bg-prim-alt li svg {
        min-width: 24px
    }

    .bg-prim-alt li:not(:last-child) {
        margin-bottom: 9px
    }
.big-package{
    position: relative;
    height: 100%;
}
.big-package h5 {
    color: var(--primary-color-alt);
    padding-bottom: 50px;
    padding-top: 10px
}

.big-package .primary-custom-btn {
    background-color: var(--primary-color-alt);
    padding-block: 5px;
    margin-top: 45px
}

.packages-cards .package:nth-of-type(4) .primary-custom-btn:hover, .primary-custom-btn:hover {
    background: var(--white-color);
    color: var(--primary-base-color);
    transform: translateY(-3px)
}

.video-box {
    border-radius: 12px;
    border: 4px solid var(--white-color);
    padding: 4px;
    height: 400px;
    box-shadow: 0 0 0 1px #e9ebf1
}

.package-card {
    border: 1px solid #6bafb866;
    padding: 14px;
    border-radius: 11px;
    background-color: var(--white-color);
    min-height: 388px;
    max-width: 588px
}

    .package-card.smaller-pck-card {
        min-height: 346px
    }

    .package-card .colored-base {
        margin-bottom: 8px;
        font-size: 14px
    }

    .package-card div > p {
        margin-top: 28px
    }

    .package-card .package-price + span {
        font-weight: 500;
        display: block;
        padding-block: 5px 8px
    }

    .package-card ul {
        font-size: 12px;
        max-width: 560px
    }

    .package-card > div > ul {
        padding-inline-start: 18px
    }

.inner-alpha-list {
    list-style-type: lower-alpha;
    padding-inline-start: 13px
}

.grayed-box {
    padding: 40px;
    gap: 32px;
    border-radius: 28px
}

    .grayed-box .outlined-gray-link {
        background: var(--white-color);
        font-size: 16px;
        font-weight: 500
    }

.promotion {
    padding-top: 58px;
    border-radius: 23px;
    margin-bottom: 64px
}

    .promotion + .service-explain .section-top p {
        max-width: 600px
    }

.contact-form {
    padding: 24px;
    border: 1px solid #0000000f;
    border-radius: 16px;
    max-width: 800px
}

.slider-container {
    margin: 0 auto;
    max-width: 100%;
    position: relative
}

.slide-item {
    padding: 0 15px;
    outline: 0
}

.slide-card {
    background: var(--white-color);
    border-radius: 12px;
    padding: 24px 44px;
    margin: 0 12px;
    min-width: 218px;
    max-width: 218px;
    transition: .3s;
    cursor: pointer;
    border: 1px solid #0000000f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px
}

.slide-icon {
    width: 44px;
    height: 44px;
    background: #f3f5f7;
    border-radius: 50%;
    justify-content: center
}

.slide-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
    color: var(--text-black-color)
}

.blog-details .section-top p {
    max-width: 604px
}

.blog-details .img-container.container img {
    max-height: 480px
}

.back-arrow:hover svg rect {
    fill: var(--primary-color)
}

.blog-card-body {
    max-width: 900px;
    margin-inline: auto
}

.contact-content {
    padding-bottom: 120px
}

.contact-form {
    font-size: 14px;
    color: #27253d
}

.form-label {
    color: var(--gray-6f-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 8px;
    letter-spacing: -.2px
}

.form-control {
    border: 1px solid #0000000d;
    color: #27253d;
    font-size: 14px;
    border-radius: 12px;
    height: 44px
}

    .form-control::placeholder {
        color: #27253d
    }

.form-check {
    padding-right: 26px
}

.form-check-input {
    border: 1px solid #a1a1a1;
    width: 16px;
    height: 16px;
    border-radius: 50%
}

.form-check .form-check-input {
    margin-right: -26px
}

.contact-form .primary-custom-btn {
    padding-block: 10px;
    border-radius: 999px
}

.form-check-input:checked {
    background-color: var(--primary-base-color)
}

.package-card.contact-pck {
    min-height: 307px;
    padding: 40px;
    max-width: 570px
}

.animated-blog-card .blog-card:hover .blog-card-img, .tool-card:hover .blog-card-img {
    box-shadow: 0 0 0 1px #6bafb87a
}

.blog-card:hover .outlined-gray-link svg path, .outlined-gray-link:hover svg path, .tool-card:hover .outlined-gray-link svg path {
    stroke: var(--primary-color-alt)
}

.bg-prim:hover {
    box-shadow: 0 12px 12px 0 #02214054;
    background: var(--primary-color)
}

.animated-img {
    overflow: hidden;
    border-radius: 12px;
    transition: .5s ease-in-out
}

    .animated-img:hover img {
        transform: scale(1.05)
    }

.tool-card .blog-card-img {
    margin-bottom: 24px;
    background-color: #f3f5f7;
    border: 4px solid var(--white-color)
}

    .tool-card .blog-card-img img {
        margin-bottom: -20px;
        margin-top: 14px
    }

.pricing-srv {
    padding-block: 40px 120px
}

.srv-price-hero .section-top {
    max-width: 980px
}

.srv-price-hero .btns {
    margin-top: 16px
}

.video-section .section-text {
    max-width: 614px
}

.section-text .base-btn {
    margin-top: 24px
}

.register-service-text .section-title, .service-details-text .section-title {
    margin-block: 12px 24px
}

.service-details-text .base-btn {
    margin-top: 48px
}

.opacity-element {
    background: #276c6a;
    padding: 13.1px;
    border-radius: 13.1px;
    font-size: 18px;
    font-weight: 500
}

    .opacity-element .icon {
        margin-inline-end: 45px
    }

.register-service-text .whatsapp-btn {
    padding: 12px 24px 12px 16px;
    margin-top: 48px
}

.decor-start-top {
    top: 15px;
    inset-inline-start: 21px
}

.decor-end-top {
    inset-inline-end: 26px
}

.decor-end-bottom {
    bottom: 57.8px
}

.inner-card {
    background-color: var(--white-color);
    padding: 40px;
    border-radius: 24px
}

.black-text-22 {
    font-size: 22px;
    color: var(--black-color);
    line-height: 160%
}

.inner-card p:not(.maxed-text) {
    max-width: 556px
}

.inner-card .row {
    --bs-gutter-x: 48px
}

.consulting-services {
    padding-block: 30px;
    border-top: 1px solid #e9ebf1;
    border-bottom: 1px solid #e9ebf1;
    color: var(--text-black-color)
}

    .consulting-services h6 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 12px;
        line-height: 23.8px
    }

    .consulting-services p {
        font-size: 14px;
        max-width: 340px
    }

.slider-absolute {
    width: 45%
}

    .slider-absolute .slider-wrapper {
        height: 570px
    }

.base-btn:not(.watch-link) svg {
    margin-inline-start: 13.5px
}

.slider-title {
    padding-top: 24px;
    font-size: 18px;
    color: var(--black-color);
    line-height: 32.61px
}

.back_to_top, .discount {
    border-radius: 50%;
    display: flex
}

.financial-offer .outlined-gray-link {
    font-size: 16px;
    box-shadow: none
}

.back_to_top {
    align-items: center;
    justify-content: center;
    background-color: var(--primary-base-color);
    position: fixed;
    bottom: 50px;
    inset-inline-end: 50px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    opacity: 0;
    transition: opacity .5s ease-in-out
}

    .back_to_top.show {
        opacity: 1
    }

    .back_to_top:hover {
        background-color: var(--primary-color);
        box-shadow: 0 9px 10.3px 0 #26507891
    }

    .back_to_top img {
        width: 14px;
        height: 14px
    }

.section-top + nav {
    margin-top: 32px
}

.slider-item {
    flex: 0 0 350px
}

.card-image, .discount {
    align-items: center;
    color: #fff
}

.discount {
    background: #63a7b0;
    margin-bottom: 10px;
    width: 58px;
    height: 58px;
    justify-content: center;
    position: absolute;
    top: 54px;
    inset-inline-end: 10px
}

.bg-gred-prim .discount {
    background: #ffffff40
}

.package-orange .discount {
    background: #f60
}

.contact-img img {
    max-height: 450px
}

html[dir=ltr] .btn-base-primary svg {
    margin-inline-end: 5px
}

html[dir=ltr] .navbar .dropdown-menu {
    left: 50%;
    transform: translate(-50%)
}

html[dir=ltr] .stats-card p {
    max-width: 180px
}

html[dir=ltr] .service-card p {
    margin-block: 12px;
    font-size: 14px
}

html[dir=ltr] .play-icon, html[dir=ltr] .top-circle {
    transform: translateX(-50%)
}

html[dir=ltr] .base-btn.watch-link {
    padding: 12px 24px 12px 16px
}

html[dir=ltr] .features-table tr:first-child td:first-child, html[dir=rtl] .features-table tr:first-child td:last-child {
    border-top-left-radius: 12px
}

html[dir=ltr] .features-table tr:first-child td:last-child, html[dir=rtl] .features-table tr:first-child td:first-child {
    border-top-right-radius: 12px
}

html[dir=ltr] .features-table tr:last-child td:first-child, html[dir=rtl] .features-table tr:last-child td:last-child {
    border-bottom-left-radius: 12px
}

html[dir=ltr] .features-table tr:last-child td:last-child, html[dir=rtl] .features-table tr:last-child td:first-child {
    border-bottom-right-radius: 12px
}

html[dir=ltr] .our-values .benefits-list h3 {
    margin-bottom: 6px
}

html[dir=ltr] .curved-card-start {
    border-radius: 63px 12px 12px
}

html[dir=ltr] .curved-card-end {
    border-radius: 12px 12px 46px
}

html[dir=ltr] .service-department {
    padding: 42px 16px;
    min-height: 252px
}

html[dir=ltr] .colored-7f, html[dir=ltr] .grayed-text, html[dir=ltr] .section-description {
    max-width: 760px
}

html[dir=ltr] .soon-badge {
    inset-inline-start: 50%;
    letter-spacing: 0
}

html[dir=ltr] .tool-card .blog-card-img img {
    margin-inline-end: -40px
}

html[dir=rtl] .soon-badge {
    inset-inline-end: 50%;
    font-size: 23.64px
}

html[dir=rtl] .btn-base-primary svg {
    margin-inline-start: 5px
}

html[dir=rtl] .hero-section {
    padding-top: 14px
}

    html[dir=rtl] .hero-section .container {
        max-width: 880px
    }

html[dir=rtl] .counter-element small {
    font-size: 18px
}

html[dir=rtl] .stats-card p {
    max-width: 140px
}

html[dir=rtl] .service-card p {
    margin-block: 18px
}

html[dir=rtl] .accordion-button {
    flex-direction: row-reverse
}

html[dir=rtl] .play-icon, html[dir=rtl] .top-circle {
    transform: translateX(50%)
}

html[dir=rtl] .curved-card-start {
    border-radius: 12px 63px 12px 12px
}

html[dir=rtl] .curved-card-end {
    border-radius: 12px 12px 12px 46px
}

html[dir=rtl] .base-btn.watch-link {
    padding: 12px 16px 12px 24px
}

html[dir=rtl] .maxed-img img {
    max-height: 476px
}

html[dir=rtl] .service-department.bg-gray-srv {
    max-height: 220px
}

html[dir=rtl] .package-price {
    padding-inline-end: 35px
}

html[dir=rtl] .tool-card .blog-card-img img {
    margin-inline-end: -25px
}

.maxedh-img img {
    max-height: 482px
}

.proposals-container {
    width: 100%;
    max-width: 1200px;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-base-color) #f5f7f7;
    scroll-behavior: smooth
}

    .proposals-container::-webkit-scrollbar {
        height: 8px
    }

    .proposals-container::-webkit-scrollbar-track {
        background: #f5f7f7;
        border-radius: 10px
    }

    .proposals-container::-webkit-scrollbar-thumb {
        background: var(--primary-base-color);
        border-radius: 10px;
        transition: background .3s
    }

        .proposals-container::-webkit-scrollbar-thumb:hover {
            background: var(--primary-color-alt)
        }

.scroll-container {
    display: flex;
    gap: 20px;
    width: max-content;
    padding-bottom: 40px
}

.slider-item .slider-card.large {
    min-width: 300px;
    overflow: hidden
}

.card-image {
    width: fit-content;
    background: linear-gradient(135deg,#667eea 0,#764ba2 100%);
    display: flex;
    justify-content: center;
    font-size: 48px
}

    .card-image img {
        height: 464px
    }

.controls {
    position: absolute;
    top: -50px;
    right: 0;
    display: flex;
    gap: 10px
}

.control-btn {
    padding: 8px 16px;
    background: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    transition: .3s
}

    .control-btn:hover {
        background: rgba(255,255,255,.9);
        transform: translateY(-2px)
    }

@keyframes slide {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

@keyframes slide-rtl {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(50%)
    }
}

.logos, .slider-no-controls {
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    display: flex;
    margin: 0
}

.slider-no-controls {
    padding: 40px 0
}

.logos {
    background: #fff;
    padding: 10px 0;
    width: 100%
}

.logos-slide, .slide-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    animation: 20s linear infinite slide
}

    .logos-slide img {
        all: unset;
        display: inline-block;
        width: 90px;
        max-height: 90px;
        margin: 0 40px;
        object-fit: contain;
        flex-shrink: 0;
        transition: transform .3s;
        user-select: none
    }

        .logos-slide img:hover {
            transform: scale(1.3)
        }

[dir=rtl] .logos-slide, [dir=rtl] .slide-item {
    animation: 20s linear infinite slide-rtl
}

@media (min-width:992px) {
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        min-width: 900px
    }
    html[dir="ltr"] .features-table td h5 {
        font-size: 15px;
        font-weight: 700;
    }
    .package{
        min-height: 225px;
    }
    .features-table th {
        height: 85px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: anywhere;
        vertical-align: top;
    }
    .packages-details .bg-prim-alt {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        min-width: 278px;
        height: calc(100% - 195px);
    }
    .navbar .dropdown-menu .dropdown-item:hover {
        background-color: unset;
        color: #ffffffa3
    }

    .en-list {
        padding-bottom: 12px
    }

    .benefits-list.en-list h3 + p, html[dir=ltr] .bg-prim p {
        font-size: 15px
    }

    .benefits-list.en-list h3 {
        font-size: 19px
    }

    html[dir=rtl] .services-text p {
        font-size: 27px
    }

        html[dir=rtl] .services-text p span {
            font-size: 32px
        }

    html[dir=ltr] .bordered-text {
        padding-block: 20px;
        font-size: 14px
    }

    html[dir=ltr] .outlined-gray-link {
        padding: 8px 12px 8px 24px
    }

    html[dir=rtl] .outlined-gray-link {
        padding: 8px 24px 8px 12px
    }

    html[dir=ltr] .big-package .primary-custom-btn {
        margin-top: 46px
    }

    html[dir=rtl] .features-table th:nth-child(3), html[dir=rtl] .features-table th:nth-child(4) {
        padding-inline-start: 12px
    }

    .services-row {
        --bs-gutter-x: 3rem
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu > div {
        min-width: 100%;
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #f2f2f217
    }

    .navbar .dropdown-menu {
        padding: 24px;
        border: 1px solid #00000030;
        box-shadow: 0 4px 11.8px 0 #0000002b;
        background: linear-gradient(90deg,#397d86 0,#6bb8b6 100%);
        top: 200%
    }

        .navbar .dropdown-menu div > li {
            flex: 1;
            padding-bottom: 16px;
            border: none !important
        }

    .section-nav {
        min-width: 870px
    }

    .main-content:not(.home-content), .main-content:not(.srv-content) {
        padding-top: 40px
    }

    .main-content.home-content {
        padding-top: 14px
    }

    .video-section {
        height: 645px
    }

    .blog-card {
        margin-bottom: 27px
    }

    .our-blog .row + span {
        margin-top: 38px
    }

    .services-text {
        border: 1px solid #f2f2f2;
        border-radius: 16px;
        padding: 24px 24px 36px;
        height: 100%
    }

    .col-lg-6 .service-card {
        min-height: 430px
    }

    .col-lg-6 .soon-part {
        height: 244px
    }

    .why-img {
        margin-inline-start: 50px
    }

    .about-hero .main-text {
        max-width: 537px
    }

    .master-hero-about, .slider-img {
        height: 384px
    }

    html[dir=ltr] .global-decor {
        right: -250px
    }

    html[dir=ltr] .about-hero .main-text {
        max-width: 524px
    }

    html[dir=ltr] .service-department, html[dir=ltr] .service-department.bg-gray-srv {
        min-height: 290px
    }

    html[dir=ltr] .packages-details .bg-prim-alt {
        width: 280px
    }

    html[dir=ltr] .discount {
        top: 68px
    }

    html[dir=ltr] .packages-cards {
        gap: 15px
    }

    html[dir=rtl] .navbar .dropdown-menu {
        margin-inline-start: -250px
    }

    .etimad-img {
        width: -webkit-fill-available;
        max-width: 608px
    }

    .main-content.srv-content {
        padding-top: 0
    }

    .service-explain .outlined-gray-link {
        margin-top: 0
    }

    .features-table tbody td:nth-child(2), .features-table tbody td:nth-child(3), .features-table tbody td:nth-child(4) {
        padding-inline-start: 36px
    }

    .features-table td:first-child {
        width: 30%
    }
}

@media (min-width:767px) {
    .section-top {
        margin-inline: auto;
        max-width: 100%
    }

    .promotion .img-container {
        max-width: 90%;
        margin-inline: auto;
        margin-top: 40px
    }
}

@media (min-width:767px) and (max-width:991px) {
    .package {
        width: 48%
    }
}

@media (max-width:991px) {
    .contact-text span, .slide-card, .slide-title {
        font-size: 12px
    }

    .navbar-collapse {
        position: relative;
        top: 100%;
        width: 100%;
        background-color: var(--white-color);
        border: 1px solid #00000030;
        box-shadow: 0 4px 11.8px 0 #0000002b;
        border-radius: 6px;
        padding: 24px
    }

    .notify-list {
        padding-bottom: 80px
    }

    .outlined-gray-link {
        padding: 5px 18px 5px 12px;
        font-size: 12px
    }

    .navbar-toggler[aria-expanded=false] .close-icon, .navbar-toggler[aria-expanded=true] .burger-icon {
        display: none
    }

    .partners .logo-item img {
        width: 58px
    }

    .pricing-srv {
        padding-bottom: 46px
    }

    .our-blog .blog-card, .service-details .img-container, .slider-content, .tool-card {
        margin-bottom: 32px
    }

    .inner-card .img-container, .navbar-nav, .packages-details.row > div:first-child, .register-service .whatsapp-btn, .services-row .slider-content {
        margin-bottom: 24px
    }

    .tool-card .blog-card-img {
        margin-bottom: 16px;
        max-height: 250px
    }

    .register-service > span svg {
        width: 38px;
        height: 38px
    }

    .features-table td h5, .opacity-element, .section-nav a, body, html[dir=ltr] .grayed-box .outlined-gray-link {
        font-size: 14px
    }

    .slider-no-controls {
        padding-block: 30px
    }

    .slide-item {
        padding: 0 6px
    }

    .about-hero > img {
        height: 165px
    }

    .about-hero .img-container img, .package, .video-section .container + .position-absolute img {
        width: 100%
    }

    .opacity-element .icon {
        margin-inline-end: 20px
    }

        .opacity-element .icon svg {
            width: 45px;
            height: 45px
        }

    .promotion {
        padding-top: 38px;
        border-radius: 0
    }

    .py-64 {
        padding-block: 32px
    }

    .package-text {
        gap: 32px
    }

    .heading-56 {
        font-size: 26px;
        line-height: 38px
    }

    .section-nav {
        flex-direction: column;
        width: 100%
    }

        .section-nav a {
            width: 100%;
            padding: 18px;
            border-radius: 5.69px
        }

    .py-40 {
        padding-block: 20px
    }

    .package-card div > p {
        margin-bottom: 43px
    }

    .grayed-box {
        padding: 16px;
        border-radius: 28px;
        font-size: 13px
    }

    .slider-title {
        font-size: 12px;
        line-height: 14px;
        padding-top: 10px
    }

    .services-section .bordered-text:first-of-type, .srv-content .benefits-list {
        margin-top: 32px
    }

    .about-hero .img-container, .contact-img, .mt-80, footer {
        margin-top: 40px
    }

    .navbar-nav > li:first-of-type, .stats-section .row > :not(:last-child), div:not(:last-child) .service-department.bg-gray-srv {
        margin-bottom: 12px
    }

    .video-player img {
        height: 289px
    }

    .video-section .container + .position-absolute {
        position: relative !important;
        margin-top: 24px;
        padding-inline: 16px
    }

    .video-section .container .row {
        height: unset !important
    }

    .blog-details .section-top .d-flex {
        gap: 14px
    }

    .main-content {
        padding-top: 32px;
        margin-top: 64px
    }

    .blog-details {
        padding-top: 9px
    }

    .different .row {
        --bs-gutter-y: 12px
    }

    .our-values.our-values .img-container img {
        width: 100%;
        margin-top: 12px
    }

    .blog-card-body > ul li {
        margin-inline-start: 24px
    }

    .benefits-list li, .navbar-nav {
        gap: 12px
    }

        .navbar-nav h6 {
            font-weight: 700;
            color: var(--black-color)
        }

    .navbar .dropdown-menu {
        position: relative;
        border: 0
    }

        .navbar .dropdown-menu .dropdown-item {
            white-space: normal;
            color: #a1a1a1
        }

    .mb-60, .why-img {
        margin-bottom: 40px
    }

    .benefits-list h3, html[dir=ltr] .bg-prim-alt h4 {
        font-size: 18px
    }

    .logo-track {
        gap: 2px
    }

    .my-40 {
        margin-block: 20px
    }

    .py-80 {
        padding-block: 40px
    }

    .faq-card {
        padding: 24px 12px;
        border-radius: 10px
    }

    .accordion-button {
        white-space: normal;
        gap: 16px;
        font-size: 15px;
        padding: 12px;
        line-height: 140%
    }

        .accordion-button::after {
            height: 24px;
            width: 24px;
            min-width: 24px;
            background-size: 10px
        }

    .accordion-body {
        font-size: 14px;
        padding: 10px 12px 12px
    }

    .accordion-item:first-of-type .accordion-button {
        border-top-right-radius: 12px;
        border-top-left-radius: 12px
    }

    .accordion-button.collapsed {
        border-radius: 12px
    }

    .contact-us {
        padding-inline: 31px 0;
        margin-block: 48px 40px;
        padding-top: 52px;
        border-radius: 9.15px
    }

    .contact-text {
        padding-inline-end: 12px
    }

    .faq {
        margin-block: 40px
    }

    footer {
        padding-block: 80px 40px
    }

    .footer-upper-part p {
        font-size: 18px;
        padding-top: 50px
    }

    .footer-upper-part h3 {
        margin-top: 20px;
        margin-bottom: 56px;
        font-size: 26px;
        line-height: 150%;
        letter-spacing: -.32px
    }

    .socials {
        gap: 18px;
        margin-block: 16px 32px
    }

        .socials svg {
            width: 24px
        }

    footer .row + p {
        margin-top: 90px
    }

    .contact-us .whatsapp-btn {
        margin-top: 18px;
        font-size: 10px;
        padding: 10px 16px
    }

    .whatsapp-btn svg {
        width: 18px
    }

    .contact-text .bold-text {
        font-size: 20px;
        margin-block: 6px 8px
    }

    .contact-text p:not(.bold-text), .services-text p span {
        font-size: 16px
    }

    .blog-title {
        font-size: 19px;
        line-height: 26px;
        margin-block: 17px
    }

    .provided-services {
        padding-block: 80px
    }

    .section-title-description h2 {
        padding-bottom: 12px
    }

    .section-title-description {
        padding-block: 8px 32px
    }

    .main-text {
        line-height: 21px
    }

    .big-heading {
        font-size: 32px;
        line-height: 44px
    }

    .img-container.mt-60 {
        margin-top: 24px
    }

    .benefit-icon {
        min-width: 36px;
        height: 36px
    }

    .about-hero {
        padding-top: 47px;
        padding-bottom: 137px
    }

    .benefit-icon svg {
        width: 17px
    }

    .slider-absolute .slider-wrapper, .slider-wrapper {
        height: 300px
    }

    .back_to_top, .bottom-circle svg, .top-circle {
        width: 34px;
        height: 34px
    }

    .navbar {
        padding-top: 24px
    }

    .hero-section h1, html[dir=rtl] .about-content .big-heading {
        font-size: 40px;
        line-height: 56px
    }

    .hero-section-img {
        margin-top: -260px;
        margin-bottom: 26px
    }

    .stats-card {
        min-height: 80px;
        padding: 10px 24px
    }

    .section-title {
        font-size: 26px
    }

    .services-text p {
        font-size: 16px;
        margin-bottom: 20px
    }

    .contact-content .section-title {
        font-size: 32px;
        line-height: 120%
    }

    .contact-form {
        padding: 16px
    }

    .stats-card p {
        font-size: 13px;
        line-height: 20px
    }

    .counter-element span {
        font-size: 32px;
        line-height: 20px
    }

    .counter-element small {
        display: block;
        font-size: 11px;
        line-height: 14px;
        text-align: end
    }

    .service-card h3 {
        font-size: 18px;
        line-height: 29.13px
    }

    .service-card p {
        margin-block: 12px !important
    }

    .service-card {
        min-height: 380px;
        max-height: 380px
    }

    .top-circle {
        top: -18px
    }

    .inner-card {
        border-radius: 12px;
        padding: 12px
    }

    .big-text {
        font-size: 24px
    }

    .financial-offer .row > div:not(:last-child) {
        margin-bottom: 30px
    }

    .features-table .primary-custom-btn {
        width: 100%;
        min-width: 162px
    }

    html[dir=ltr] .hero-section h1 {
        font-size: 30px;
        line-height: 40px
    }

    html[dir=ltr] .counter-element span {
        font-size: 25px;
        line-height: 21px
    }

    html[dir=ltr] .global-decor {
        left: -50px
    }

    html[dir=rtl] .hero-section .container {
        max-width: 655px
    }
}

@media (max-width:767px) {
    .table > :not(caption) > * > * {
        max-width: 50px
    }

    .logos-slide img {
        height: 60px;
        margin: 0 15px;
        width: 60px
    }

    .partners .logos-slide img.diwidth {
        width: 60px
    }

    .mb-64 {
        margin-bottom: 34px
    }

    .stats-section {
        padding-block: 26px;
        margin-block: 12px
    }

    .outlined-gray-link svg {
        width: 16px
    }

    .service-department, html[dir=ltr] .service-department {
        padding-block: 24px
    }

    .video-box {
        height: 300px
    }

    .regular-btn {
        font-size: 11px;
        padding-block: 14px
    }

    .base-btn:not(.watch-link) svg {
        margin-inline-start: 12px;
        width: 14px
    }

    .base-btn {
        padding-inline: 16px;
        min-width: 117px
    }

    html[dir=rtl] .base-btn.watch-link {
        padding: 6px 14px 6px 12px
    }

    html[dir=ltr] .base-btn.watch-link {
        padding: 6px 12px 6px 14px
    }

    .service-explain .outlined-gray-link {
        padding: 5px 12px
    }

    .base-btn.watch-link svg {
        margin-inline-end: 5px;
        width: 16px
    }

    .hero-section-img {
        margin-top: -80px
    }
    .features-table table {
        table-layout: fixed;
        width: 100%;
    }
    .features-table th {
        font-size: 12px;
        padding-bottom: 16px
    }

        .features-table th:first-child {
            font-size: 18px
        }

    .features-table td, .packages-details .bg-prim-alt {
        padding: 12px
    }

    .table-responsive.features-table {
        overflow: hidden
    }

    .features-table .table-footer td {
        padding-inline: 2px !important;
        text-align: center;
        padding-top: 24px
    }

    .features-table .primary-custom-btn {
        min-width: unset;
        font-size: 10px;
        max-width: 70px
    }

    .features-table td:first-child {
        padding-inline-start: 8px;
        min-width: 120px
    }

    td .cell-details {
        flex-direction: column;
        gap: 8px;
        font-size: 9px
    }

    .bg-prim-alt li, .features-table td h5 {
        font-size: 12px
    }

    .big-package .primary-custom-btn {
        margin-top: 21px
    }

    .package-text .outlined-gray-link, .pricing-srv .outlined-gray-link {
        width: 100%
    }

    .promotion .img-container {
        margin-top: 30px
    }

    .service-card {
        min-height: unset;
        max-height: unset
    }

    .soon-part {
        margin-top: 20px
    }

    .consulting-services .row > div:not(:last-child) {
        margin-bottom: 60px
    }

    .contact-content {
        padding-bottom: 64px
    }

    footer .row .row > div:last-child {
        margin-top: 75px
    }

    .slider-item .slider-card.large {
        min-width: 150px
    }

    .slide-card {
        padding: 16px;
        gap: 16px;
        min-height: 126px;
        min-width: 120px
    }

        .slide-card .slide-title {
            white-space: normal;
            line-height: 16px
        }

    .bg-gray-light {
        padding: 12px;
        border-radius: 12px
    }

    .black-text-22 {
        font-size: 15px
    }

    .big-package h5 {
        padding-bottom: 24px;
        font-size: 18px
    }
}

@media (min-width:540px) and (max-width:991px) {
    .slider-absolute {
        width: 80%;
        margin-inline: auto
    }

    .slider-item {
        flex: 0 0 280px
    }
}

@media (max-width:540px) {
    .navbar {
        padding-inline: 0
    }

    .container {
        padding-inline: 16px
    }

    .slider-absolute {
        width: 100%
    }

    .slider-item {
        flex: 0 0 140px
    }

    .financial-offer .img-container img {
        width: 132px
    }
}

@media (min-width:992px) and (max-width:1280px) {
    .stats-card p {
        font-size: 13px;
        line-height: 19px
    }

    .counter-element span {
        font-size: 36px;
        line-height: 48px
    }

    .counter-element small {
        font-size: 15px
    }

    .video-section .container + .position-absolute {
        max-width: 50%
    }
}

@media (min-width:992px) and (max-width:1024px) {
    .hero-section-img {
        margin-top: -270px
    }

    .video-section .section-text {
        max-width: 440px
    }

    .big-heading {
        font-size: 36px;
        line-height: 50px
    }

    .slider-absolute .slider-wrapper, .video-section {
        height: 500px
    }
}

@media (min-width:1025px) and (max-width:1280px) {
    .hero-section-img {
        margin-top: -330px
    }

    .big-heading {
        font-size: 46px;
        line-height: 61px
    }

    .video-section .section-text {
        max-width: 500px
    }
}

@media (min-width:1281px) {
    html[dir=ltr] .big-heading {
        font-size: 53px;
        line-height: 62px
    }
}

@media (max-width:340px) {
    .hero-section h1, html[dir=rtl] .about-content .big-heading {
        font-size: 32px;
        line-height: 48px
    }

    .soon-badge {
        font-size: 14px
    }

    .big-heading {
        font-size: 28px;
        line-height: 41px
    }

    .section-title {
        font-size: 21px
    }

    .sub-heading {
        font-size: 16px
    }

    .section-description {
        font-size: 12px
    }

    .gap-16 {
        gap: 12px
    }

    .sub-nav-tab .nav-link {
        min-width: unset
    }
}
@media(max-width: 1250px){
    .packages-cards{
        flex-wrap: wrap;
    }
}