/* ========================= */
/* :: 1.0 WEB FONTS  */
/* ========================= */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* ================================== */
/* :: 2.0 GLOBAL Variable Define CSS  */
/* ================================== */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
:root {
    /* Google Font */
    --roboto: 'Roboto', sans-serif;
    --inter-tight: 'Inter Tight', sans-serif;
    --plus-jakarta-sans: 'Plus Jakarta Sans', sans-serif;

    /* Color Palette */
    --white: #fff;
    --black: #000;
    --black-50: #e9e9ea;
    --black-500: #1d1f2c;
    --black-400: #4a4c56;
    --dark: #101d3b;
    --yellow: #ffb000;
    --red: #ff1c00;
    --purple: #450894;
    --dark-navy: #0d2237;
}

/* ========================= */
/* :: 3.0 COMMON CSS */
/* ========================= */
html,
body {
    height: 100%;
    scroll-behavior: smooth;
}
body {
    color: var(--black-500);
    font-size: 16px;
    font-family: var(--roboto);
    font-weight: 400;
    line-height: 1.8;
    background-color: var(--white);
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}
section,
.section {
    position: relative;
}
a,
button {
    outline: none;
    -webkit-box-shadow: none;
            box-shadow: none;
    text-decoration: none;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
button {
    padding: 0;
    border: none;
    background: unset;
}
ol,
ul {
    margin: 0;
    padding: 0;
}
ol li,
ul li {
    list-style: none;
}
img {
    height: auto;
    max-width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
input,
input:focus,
input:focus-visible,
input:active,
select,
.form-select,
.form-select:focus,
textarea {
    outline: none;
    -webkit-box-shadow: none;
            box-shadow: none;
}
* + address,
* + dl,
* + fieldset,
* + figure,
* + ol,
* + p,
* + pre,
* + ul {
    margin: 0;
    padding: 0;
}

::-moz-selection {
    background: var(--red);
    color: var(--white);
    text-shadow: none;
}
::selection {
    background: var(--red);
    color: var(--white);
    text-shadow: none;
}

/* ===== Common Style CSS Start */

/* ----- Typography CSS Start ----- */
.fs-1 {
    font-size: 32px !important;
    line-height: 1.2;
}
.fs-2 {
    font-size: 28px !important;
    line-height: 1.2;
}
.fs-3 {
    font-size: 24px !important;
    line-height: 1.2;
}
.fs-base {
    font-size: 16px;
    line-height: 1.8;
}
.fs-sm {
    font-size: 14px;
}

.body-font-18,
.body-font-20 {
    font-size: 16px;
}
.body-font-18 {
    line-height: 1.5;
}
.body-font-20 {
    line-height: 1.8;
}

.lh-1-8 {
    line-height: 1.8;
}

.ff-inter-tight {
    font-family: var(--inter-tight);
}
.ff-plus-jakarta-sans {
    font-family: var(--plus-jakarta-sans);
}

/* ----- Typography CSS End ----- */

/* ----- Color CSS Start ----- */
.text-gray {
    color: var(--black-400) !important;
}
.black-50 {
    color: var(--black-50);
}
.gradient-text {
    background: -webkit-gradient(
        linear,
        left top, right top,
        color-stop(7%, var(--yellow)),
        color-stop(32%, var(--red)),
        color-stop(59%, var(--purple)),
        color-stop(76%, var(--dark-navy))
    );
    background: -o-linear-gradient(
        left,
        var(--yellow) 7%,
        var(--red) 32%,
        var(--purple) 59%,
        var(--dark-navy) 76%
    );
    background: linear-gradient(
        to right,
        var(--yellow) 7%,
        var(--red) 32%,
        var(--purple) 59%,
        var(--dark-navy) 76%
    );
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
/* ----- Color CSS End ----- */

/* ----- Button CSS Start ----- */
.btn {
    padding: 10px 20px;
    height: 48px;
    color: var(--black-500);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    border: none;
    border-radius: 12px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: var(--white);
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.btn--gradient {
    background: rgba(255, 255, 255, 0.2);
}
.btn--gradient:hover,
.btn--white:hover {
    color: var(--white);
}
.btn--gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 12px;
    background: -o-linear-gradient(
        40deg,
        var(--yellow) 7%,
        var(--red) 30%,
        var(--purple) 59%,
        var(--dark-navy) 76%
    );
    background: linear-gradient(
        50deg,
        var(--yellow) 7%,
        var(--red) 30%,
        var(--purple) 59%,
        var(--dark-navy) 76%
    );
    background-size: 203% auto;
    background-position: 33% center;
    -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--white))) content-box,
        -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--white)));
    -webkit-mask: linear-gradient(var(--white) 0 0) content-box,
        linear-gradient(var(--white) 0 0);
    mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--white))) content-box,
        -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--white)));
    mask: linear-gradient(var(--white) 0 0) content-box,
        linear-gradient(var(--white) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.btn--gradient::after,
.btn--white::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: -o-linear-gradient(
        40deg,
        var(--yellow) 7%,
        var(--red) 30%,
        var(--purple) 59%,
        var(--dark-navy) 76%
    );
    background: linear-gradient(
        50deg,
        var(--yellow) 7%,
        var(--red) 30%,
        var(--purple) 59%,
        var(--dark-navy) 76%
    );
    background-size: 203% auto;
    background-position: 33% center;
    opacity: 0;
    z-index: -2;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.btn--gradient:hover::after,
.btn--white:hover::after {
    opacity: 1;
}
.btn__icon {
    width: 24px;
    height: 24px;
    overflow: hidden;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    overflow: hidden;
}
.btn__icon svg {
    width: 100%;
    height: 100%;
}
.btn:hover .arrow-right-anim {
    -webkit-animation: arrowRightTrough 0.6s ease-in-out forwards;
            animation: arrowRightTrough 0.6s ease-in-out forwards;
}
@-webkit-keyframes arrowRightTrough {
    0%,
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
    33% {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }
    50% {
        opacity: 0;
    }
    66% {
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
    }
}
@keyframes arrowRightTrough {
    0%,
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
    33% {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }
    50% {
        opacity: 0;
    }
    66% {
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
    }
}
/* ----- Button CSS End ----- */

/* ----- Random CSS Start ----- */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}
.transition-common {
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.section-padding {
    padding: 48px 0;
}
.pretitle {
    font-size: 16px;
}
/* ----- Random CSS End ----- */

/* ===== Common Style CSS End */

/* =============================== */
/* :: 4.0 Header Area CSS Start */
/* =============================== */
.header--area {
    padding: 20px 0;
}
.logo {
    max-width: 296px !important;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    padding: 3px 8px;
    /*background-color: var(--white);*/
}
.mobile-menu-open,
.mobile-menu-close {
    color: var(--white);
    font-size: 22px;
    line-height: 1;
}
.mobile-menu .offcanvas {
    background-color: rgba(4, 16, 25, 0.75);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
.mobile-menu__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.mobile-menu__item:has(.mobile-menu__collapse[aria-expanded='true']) {
    background-color: rgba(255, 255, 255, 0.05);
}
.mobile-menu__link {
    padding: 14px 0;
    color: var(--white);
}
.mobile-menu__item:hover .mobile-menu__link {
    color: var(--yellow);
}
.mobile-menu__item:has(.mobile-menu__collapse[aria-expanded='true'])
    .mobile-menu__collapse {
    padding: 14px 20px;
    color: var(--yellow);
}
.mobile-menu__collapse::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    background: url('../imgs/icons-objs/chevron-down.svg') no-repeat center /
        cover;
    width: 24px;
    height: 24px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.mobile-menu__collapse[aria-expanded='true']::after {
    -webkit-transform: translateY(-50%) rotate(-180deg);
        -ms-transform: translateY(-50%) rotate(-180deg);
            transform: translateY(-50%) rotate(-180deg);
}
.mobile-menu__collapse__link {
    color: var(--white);
    font-size: 15px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.mobile-menu__collapse__item:hover .mobile-menu__collapse__link {
    color: var(--yellow);
}
.top-contact__title {
    font-size: 24px;
    text-decoration: underline;
    text-underline-offset: 8px;
}
.top-contact__item .icon {
    width: 20px;
    height: 20px;
}
.top-contact__item .icon svg {
    width: 100%;
    height: 100%;
    color: var(--black);
}
.top-contact__link {
    color: var(--black);
    font-size: 16px;
    font-weight: bold;
}
.top-contact__link:hover {
    color: var(--yellow);
}

/* ----- Header Navigation for Desktop Start */
.nav__wrap {
    gap: 24px;
}
.nav__link .text {
    position: relative;
    display: inline-block;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background: -webkit-gradient(linear, left top, right top, from(#000), to(#000));
    background: -o-linear-gradient(left, #000, #000);
    background: linear-gradient(to right, #000, #000);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.nav__link .text::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: -webkit-gradient(linear, left top, right top, from(var(--yellow)), to(var(--red)));
    background: -o-linear-gradient(left, var(--yellow) 0%, var(--red) 100%);
    background: linear-gradient(to right, var(--yellow) 0%, var(--red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.nav__item:hover .nav__link .text::after {
    opacity: 1;
}
.custom-chevron-icon {
    width: 24px;
    height: 24px;
    display: block;
    position: relative;
}
.custom-chevron-icon .path-white {
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.custom-chevron-icon .path-gradient {
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.nav__link:hover .path-white {
    opacity: 0;
}
.nav__link:hover .path-gradient {
    opacity: 1;
}
/* ----- Header Navigation for Desktop End */
/* =============================== */
/* :: 4.0 Header Area CSS End */
/* =============================== */

/* =============================== */
/* :: 5.0 Hero Section CSS Start */
/* =============================== */
.hero--section {
    padding: 114px 0 48px;
}
.hero--section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(13, 36, 52, 0)), to(#041019));
    background: -o-linear-gradient(bottom, rgba(13, 36, 52, 0) 0%, #041019 100%);
    background: linear-gradient(to top, rgba(13, 36, 52, 0) 0%, #041019 100%);
    */
    
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(13, 36, 52, 0)), to(#fff));
    background: -o-linear-gradient(bottom, rgba(13, 36, 52, 0) 0%, #fff 100%);
    background: linear-gradient(to top, rgba(13, 36, 52, 0) 0%, #fff 100%);
    z-index: -1;
}
.hero--section::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 50.5%;
    height: 63%;
    background-color: #041018;
    z-index: -1;
    border-radius: 50%;
    -webkit-filter: blur(400px);
            filter: blur(400px);
}
.hero__wrapper {
    padding-top: 20px;
}
.main__title {
    color: var(--white);
}
.main__title .gradient-text {
    background: -webkit-gradient(linear, left top, right top, from(var(--yellow)), to(var(--red)));
    background: -o-linear-gradient(left, var(--yellow) 0%, var(--red) 100%);
    background: linear-gradient(to right, var(--yellow) 0%, var(--red) 100%);
}
.hero__para {
    max-width: 744px;
}
.hero__button__item .btn--gradient {
    color: var(--white);
}
.hero__scroll {
    margin-top: 48px;
}
.hero__scroll__btn {
    color: var(--white);
    font-size: 14px;
}
.hero__scroll__btn .icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--white);
    background-color: rgba(16, 15, 15, 0.5);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}
.hero__scroll__btn .icon svg {
    max-width: 8px;
    margin-top: -2px;
}
/* =============================== */
/* :: 5.0 Hero Section CSS End */
/* =============================== */

/* =============================== */
/* :: 6.0 About Section CSS Start */
/* =============================== */
.about--section {
    background-color: #f7f7f7;
}
.about__content {
    gap: 24px;
}
.about__thumb {
    max-width: 400px;
}
.about__thumb__box {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 3px;
    background: -o-linear-gradient(
        358deg,
        var(--yellow) 7%,
        var(--red) 32%,
        var(--purple) 59%,
        var(--dark-navy) 76%
    );
    background: linear-gradient(
        92deg,
        var(--yellow) 7%,
        var(--red) 32%,
        var(--purple) 59%,
        var(--dark-navy) 76%
    );
    background-size: 275% auto;
    border-radius: 12px;
}
.about__thumb__image {
    border-radius: 8px;
}
.list__wrap,
.list__item {
    gap: 10px;
}
.list__item .icon {
    width: 20px;
    height: 20px;
}
.list__item .icon svg {
    width: 100%;
    height: 100px;
}
.statistics__number {
    font-size: 32px;
    background-size: 200% auto;
}
/* =============================== */
/* :: 6.0 About Section CSS End */
/* =============================== */

/* =============================== */
/* :: 7.0 Choose Section CSS Start */
/* =============================== */
.choose--section {
    background-color: #fcf8f5;
}
.choose__item {
    width: 100%;
    padding: 20px 0;
}
.choose__item {
    gap: 20px;
}
.choose__item__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    padding: 10px;
    border: 1px dashed var(--black-500);
    background-color: #e0efea;
}
.choose__item--two .choose__item__icon {
    background-color: #f6f0e5;
}
.choose__item--three .choose__item__icon {
    background-color: #f5e7e7;
}
.choose__item--four .choose__item__icon {
    background-color: #e6e1f0;
}
.choose__item__icon__image {
    width: 28px;
}
.choose__item__title {
    font-size: 20px;
}
/* =============================== */
/* :: 7.0 Choose Section CSS End */
/* =============================== */

/* =============================== */
/* :: 8.0 Product Section CSS Start */
/* =============================== */
.product--section .section__para {
    max-width: 668px;
}
.card {
    height: 100%;
    padding: 16px 16px 24px;
    border: none;
    border-radius: 16px;
    background-color: var(--white);
    -webkit-box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.1);
}
.card--bottomGradient {
    position: relative;
    z-index: 1;
}
.card--bottomGradient::before,
.card--bottomGradient::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: -o-linear-gradient(
        13deg,
        var(--yellow) 7%,
        var(--red) 32%,
        var(--purple) 59%,
        var(--dark-navy) 76%
    );
    background: linear-gradient(
        77deg,
        var(--yellow) 7%,
        var(--red) 32%,
        var(--purple) 59%,
        var(--dark-navy) 76%
    );
    z-index: -1;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.card--bottomGradient::after {
    opacity: 1;
    background: var(--white);
}
.card--bottomGradient:hover::before {
    opacity: 1;
}
.card--bottomGradient:hover::after {
    height: calc(100% - 5px);
}
.card__thumb {
    width: 100%;
    height: 212px;
    border-radius: 12px;
}
.card__content__text {
    padding: 18px 0;
}
.card__title {
    font-size: 20px;
    margin-bottom: 2px;
}
/* =============================== */
/* :: 8.0 Product Section CSS End */
/* =============================== */

/* =============================== */
/* :: 9.0 Solution Section CSS Start */
/* =============================== */
.solution--section {
    background: -o-linear-gradient(
        210deg,
        #ff4b68 0%,
        rgba(125, 43, 139, 0.97) 47%,
        rgba(68, 86, 221, 0.93) 100%
    );
    background: linear-gradient(
        -120deg,
        #ff4b68 0%,
        rgba(125, 43, 139, 0.97) 47%,
        rgba(68, 86, 221, 0.93) 100%
    );
}
.solution__button .btn {
    color: var(--white);
}
.solution__button .btn--gradient::after {
    opacity: 1;
}
.solution__thumb__box {
    width: 100%;
    aspect-ratio: 1 / 0.98;
    border: 2px solid var(--white);
    border-radius: 16px;
}
/* =============================== */
/* :: 9.0 Solution Section CSS End */
/* =============================== */

/* =============================== */
/* :: 10.0 Contact Section CSS Start */
/* =============================== */
.contact--section {
    background-color: #f1f7fd;
}
.contact__item {
    gap: 8px;
}
.contact__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 4px;
    background: -o-linear-gradient(
        341deg,
        var(--yellow) 7%,
        var(--red) 32%,
        var(--purple) 59%,
        var(--dark-navy) 76%
    );
    background: linear-gradient(
        109deg,
        var(--yellow) 7%,
        var(--red) 32%,
        var(--purple) 59%,
        var(--dark-navy) 76%
    );
    background-size: 175% auto;
    color: var(--white);
}
.contact__icon svg,
.contact__icon img {
    width: 20px;
}
.contact__item__link {
    color: var(--black-400);
}
.contact__item__link:hover {
    color: var(--red);
}
.form--contact {
    padding: 24px 16px;
    border-radius: 12px;
    -webkit-box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.1);
}
.form__input,
.nice-select {
    width: 100%;
    height: 44px;
    padding: 8px 14px;
    color: var(--black-500);
    font-size: 16px;
    line-height: 1.5;
    border-radius: 8px;
    border: 1px solid rgba(8, 14, 30, 0.2);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.form__input--pl {
    padding-left: 42px;
}
.form__input--textarea {
    height: 200px !important;
    resize: vertical;
}
.form__input:focus,
.form__input:not(:placeholder-shown),
.nice-select.open,
.nice-select.active {
    border-color: #080e1e;
}
*::-webkit-input-placeholder {
    color: var(--black-400);
    font-size: 16px;
    opacity: 1;
}
*::-moz-placeholder {
    color: var(--black-400);
    font-size: 16px;
    opacity: 1;
}
*:-ms-input-placeholder {
    color: var(--black-400);
    font-size: 16px;
    opacity: 1;
}
*::-ms-input-placeholder {
    color: var(--black-400);
    font-size: 16px;
    opacity: 1;
}
*::placeholder {
    color: var(--black-400);
    font-size: 16px;
    opacity: 1;
}
.form__input__icon {
    width: 20px;
    height: 20px;
    color: var(--black-400);
    position: absolute;
    left: 14px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.form__input:focus ~ .form__input__icon,
.form__input:not(:placeholder-shown) ~ .form__input__icon {
    color: var(--black-500);
}
.form__input__icon svg {
    width: 100%;
    height: 100%;
}
.form__item--submit .btn {
    color: var(--white);
}
.form__item--submit .btn--gradient::after {
    opacity: 1;
}
.form__item--submit .btn:hover.btn--gradient::after {
    background-position: center center;
}
.nice-select {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.nice-select .current {
    color: var(--black-400);
}
.nice-select.active .current {
    color: var(--black-500);
}
.nice-select .list {
    width: 100%;
    z-index: 3;
}
.nice-select::after {
    border: none;
    width: 24px;
    height: 24px;
    background: url('../imgs/icons-objs/chevron-down-blck-400.svg') no-repeat
        center / cover;
    background-size: 24px;
    right: 14px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    margin-top: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.nice-select.open::after {
    -webkit-transform: translateY(-50%) rotate(-180deg);
        -ms-transform: translateY(-50%) rotate(-180deg);
            transform: translateY(-50%) rotate(-180deg);
}
/* =============================== */
/* :: 10.0 Contact Section CSS End */
/* =============================== */

/* =============================== */
/* :: 11.0 CTA Section CSS Start */
/* =============================== */
.cta--section::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #f1f7fd;
    z-index: -1;
}
.cta__banner {
    padding: 24px 20px;
    background: -o-linear-gradient(
        30deg,
        var(--yellow) 7%,
        var(--red) 32%,
        var(--purple) 59%,
        var(--dark-navy) 76%
    );
    background: linear-gradient(
        60deg,
        var(--yellow) 7%,
        var(--red) 32%,
        var(--purple) 59%,
        var(--dark-navy) 76%
    );
    background-size: 175% auto;
    border-radius: 16px;
    margin-bottom: -100px;
}
.cta__content {
    max-width: 440px;
}
.cta__button .btn {
    border-radius: 100px;
}
.cta__thumb {
    max-width: 112px;
    width: 100%;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}
/* =============================== */
/* :: 11.0 CTA Section CSS End */
/* =============================== */

/* =============================== */
/* :: 12.0 Footer Area CSS Start */
/* =============================== */
.footer--area {
    padding: 48px 0 32px;
    background-color: var(--dark);
}
.footer--topSpace {
    padding-top: 148px;
}
.footer__content {
    gap: 48px;
    padding-bottom: 26px;
}
.logo.logo--footer {
    max-width: 150px;
}
.footer__widgets {
    gap: 32px;
}
.widget__title {
    font-size: 20px;
}
.nav--footer .nav__link {
    font-size: 16px;
}
.footer__contact .contact__item__link {
    color: var(--white);
}
.footer__contact .contact__item__link:hover {
    color: var(--red);
}
.footer__contact .contact__item {
    gap: 10px;
}
.footer__contact .contact__icon {
    width: 36px;
    height: 36px;
}
.footer__contact .contact__icon svg {
    width: 16px;
}
.footer__copyright {
    padding-top: 20px;
    border-top: 1px solid #e9eff7;
}
.leagal-link {
    color: var(--white);
}
.leagal-link:hover {
    color: var(--red);
}
/* =============================== */
/* :: 12.0 Footer Area CSS End */
/* =============================== */


footer a {
    font-size: 16px;
    line-height: 1.8;
    color: #fff;
}

footer a:hover {
    color: var(--red);
}