@font-face {
    font-display: swap;
    font-family: 'Outfit';
    src: url(../fonts/Outfit-VariableFont_wght.woff2) format(woff2)
}

@font-face {
    font-display: swap;
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 100;
    font-display: block;
    src: url(../fonts/fa-thin-100.woff2) format("woff2"), url(../fonts/fa-thin-100.ttf) format("truetype")
}
h1 span{
        color: #e76f51;
}
@font-face {
    font-display: swap;
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 100;
    font-display: block;
    src: url(../fonts/fa-thin-100.woff2) format("woff2"), url(../fonts/fa-thin-100.ttf) format("truetype")
}
.w-82{
    width: 82%;
}
.font-12{
font-size: 12px;
}
body {
    font-size: var(--f-fs-font-16);
    font-family: var(--f-ff-font-1);
    font-weight: var(--f-fw-normal);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover
}
.bg-accent1_rgb:hover {
    --tw-bg-opacity: 1;
    background-color: #ee5f38;
    color: #fff;
}
.fas,
.fa-classic,
.fa-solid,
.far,
.fa-regular,
.fal,
.fa-light,
.fat,
.fa-thin {
    font-family: 'Font Awesome 6 Pro'
}

.fa,
.fa-classic,
.fa-sharp,
.fas,
.fa-solid,
.far,
.fa-regular,
.fasr,
.fal,
.fa-light,
.fasl,
.fat,
.fa-thin,
.fad,
.fa-duotone,
.fass,
.fa-sharp-solid,
.fab,
.fa-brands {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto
}

.body1 {
    background-color: var(--vtc-bg-white);
    overflow-x: hidden
}

@media screen and (max-width:769px) {

    body.body,
    html {
        overflow-x: hidden !important
    }
}

.img100 img {
    width: 100%
}

@media screen and (min-width:769px) {
    body.body.body5 {
        overflow-x: initial !important
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 0
}

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

p {
    padding: 0;
    margin: 0
}

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

a,
a:hover,
a:focus {
    outline: none;
    text-decoration: none
}

.sp {
    padding: 100px 0
}

@media (max-width:768px) {
    .sp {
        padding: 50px 0
    }
}

@media (max-width:768px) {
    .sp {
        padding: 50px 0
    }
}

@media (max-width:767px) {
    .sp5 {
        padding-bottom: 50px
    }
}

.text-right {
    text-align: right
}

.w-full {
    width: 100%
}

.w-f {
    width: fit-content
}

@media (min-width:992px) {
    .w-lg-full {
        width: 100%
    }
}

.text-center {
    text-align: center
}

@media (min-width:992px) {
    .text-lg-center {
        text-align: center
    }
}

.text-left {
    text-align: left !important
}

.weight-400 {
    font-weight: 400 !important
}

.weight-500 {
    font-weight: 500 !important
}

.weight-600 {
    font-weight: 600 !important
}

.weight-700 {
    font-weight: 700 !important
}

.weight-800 {
    font-weight: 800 !important
}

.weight-900 {
    font-weight: 900 !important
}

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

.font-18 {
    font-size: 18px
}

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

.mr-2 {
    margin-right: 8px
}

@media (max-width:767px) {
    .mobile-hidden {
        display: none
    }
}

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

.mobile-sidebar .single-footer h3 {
    color: #fff
}

.mobile-sidebar .single-contact a {
    color: #fff
}

:root {
    --vtc-text-title1: #090B0E;
    --vtc-text-title2: #0B0314;
    --vtc-text-pera1: #3D4C5E;
    --vtc-text-white: #fff;
    --vtc-text-white80per: rgba(255, 255, 255, 0.8274509804);
    --vtc-bg-main3: #BD3F3D;
    --vtc-bg-main4: #155FFF;
    --vtc-bg-main5: #11819B;
    --vtc-bg-main6: #FD6543;
    --vtc-bg-main10: #2CBCA5;
    --vtc-bg-main11: #0587FF;
    --vtc-bg-main13: #3546A3;
    --vtc-bg-common-1: #F4F4F4;
    --vtc-bg-common-2: #232323;
    --vtc-bg-common-5: #F4F4F4;
    --vtc-bg-common-8: #F1F8FF;
    --vtc-bg-common-9: #E7F2F5;
    --vtc-bg-common-18: #EDF2FB;
    --vtc-bg-common-19: #F1F1F1;
    --vtc-bg-common-22: rgba(53, 69, 163, 0.0823529412);
    --vtc-bg-white: #ffffff;
    --vtc-bg-white10per: rgba(255, 255, 255, 0.1);
    --f-fw-normal: 400;
    --f-fw-medium: 500;
    --f-fw-semibold: 600;
    --f-fw-bold: 700;
    --f-ff-font-1: 'Outfit', sans-serif;
    --f-fs-font-16: 16px;
    --f-fs-font-18: 18px;
    --f-fs-font-20: 20px;
    --f-fs-font-24: 24px;
    --f-fs-font-26: 26px;
    --f-fs-font-28: 28px;
    --f-fs-font-30: 30px;
    --f-fs-font-32: 32px;
    --f-fs-font-38: 38px;
    --f-fs-font-40: 40px;
    --f-fs-font-44: 44px;
    --f-fs-font-48: 48px;
    --f-fs-font-52: 52px;
    --f-fs-font-56: 56px;
    --f-fs-font-60: 60px;
    --f-fs-font-64: 64px
}

.heading2 .sub-title {
    color: var(--vtc-bg-main4);
    font-size: var(--f-fs-font-18);
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-18);
    display: inline-block;
    margin-bottom: 16px
}

.heading2 .sub-title img {
    transform: translateY(-2px);
    margin-right: 3px
}

.heading2 h2 {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-44);
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-52)
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .heading2 h2 {
        font-size: var(--f-fs-font-32);
        line-height: var(--f-fs-font-40)
    }

    .about3-counters .flex {
        flex-wrap: wrap
    }

    .hero3 {
        background-image: url(../img/bg/bg.jpg) !important
    }

    .about3-images .image2 {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .chat {
        width: 705px !important
    }
}

@media (max-width:767px) {
    .chat {
        width: 705px !important
    }

    .heading2 h2 {
        font-size: var(--f-fs-font-32);
        line-height: var(--f-fs-font-40)
    }

    .hero3 {
        background-image: url(../img/bg/bg.jpg) !important
    }

    .about3-counters .flex {
        flex-wrap: wrap
    }

    a.button.button--bubble {
        padding: 20px !important;
        font-size: 17px !important
    }
}

.heading2 h3 {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-32);
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-38)
}

.heading2 h5 a {
    display: inline-block;
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-18);
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-18);
    transition: all 0.4s
}

.heading2 h5 a:hover {
    transition: all 0.4s;
    color: var(--vtc-bg-main4)
}

.heading2 h4 a {
    display: inline-block;
    color: var(--vtc-text-title1);
    font-size: 17px;
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-26);
    transition: all 0.4s
}

.heading2 h4 {
    display: inline-block;
    color: var(--vtc-text-title1);
    font-size: 17px;
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-26);
    transition: all 0.4s
}

.heading2 h4 a:hover {
    transition: all 0.4s;
    color: var(--vtc-bg-main4)
}

.heading2 h5 {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-24);
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-32)
}

.heading2 h5 a {
    display: inline-block;
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-24);
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-32)
}

.heading2 h5 a:hover {
    transition: all 0.4s;
    color: var(--vtc-bg-main4)
}

.heading2 p {
    color: var(--vtc-text-pera1);
    font-size: var(--f-fs-font-18);
    font-style: normal;
    font-weight: var(--f-fw-normal);
    line-height: var(--f-fs-font-26)
}

.heading3 .sub-title {
    color: var(--vtc-bg-main5);
    font-size: var(--f-fs-font-18);
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-18);
    display: inline-block;
    margin-bottom: 16px
}

.heading3 .sub-title img {
    transform: translateY(-2px);
    margin-right: 3px
}

.heading3 h2 {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-44);
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-52)
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .heading3 h2 {
        font-size: var(--f-fs-font-32);
        line-height: var(--f-fs-font-40)
    }
}

@media (max-width:767px) {
    .heading3 h2 {
        font-size: var(--f-fs-font-32);
        line-height: var(--f-fs-font-40)
    }
}

.heading3 h3 {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-32);
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-38)
}

.heading3 h3 a {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-24);
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-24);
    transition: all 0.4s
}

.heading3 h3 a:hover {
    transition: all 0.4s;
    color: var(--vtc-bg-main5)
}

.heading3 h5 a {
    display: inline-block;
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-18);
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-18);
    transition: all 0.4s
}

.heading3 h5 a:hover {
    transition: all 0.4s;
    color: var(--vtc-bg-main3)
}

.heading3 h4 a {
    display: inline-block;
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-20);
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-26);
    transition: all 0.4s
}

.heading3 h4 a:hover {
    transition: all 0.4s;
    color: var(--vtc-bg-main5)
}

.heading3 p {
    color: var(--vtc-text-pera1);
    font-size: var(--f-fs-font-18);
    font-style: normal;
    font-weight: var(--f-fw-normal);
    line-height: var(--f-fs-font-26)
}

.heading4 .sub-title {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-18);
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-18);
    display: inline-block;
    margin-bottom: 16px
}

.heading4 .sub-title img {
    transform: translateY(-2px);
    margin-right: 3px
}

.heading4 h2 {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-44);
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-52)
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .heading4 h2 {
        font-size: var(--f-fs-font-32);
        line-height: var(--f-fs-font-40)
    }
}

@media (max-width:767px) {
    .heading4 h2 {
        font-size: var(--f-fs-font-32);
        line-height: var(--f-fs-font-40)
    }
}

.heading4 h3 {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-32);
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-38)
}

.heading4 h3 a {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-32);
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-38);
    display: inline-block;
    transition: all 0.4s
}

.heading4 h3 a:hover {
    transition: all 0.4s;
    color: var(--vtc-bg-main6)
}

.heading4 h5 a {
    display: inline-block;
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-24);
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-32);
    transition: all 0.4s
}

.heading4 h5 a:hover {
    transition: all 0.4s;
    color: var(--vtc-bg-main6)
}

.heading4 h4 a {
    display: inline-block;
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-20);
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-26);
    transition: all 0.4s
}

.heading4 h4 {
    display: inline-block;
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-20);
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-26);
    transition: all 0.4s
}

.heading4 h4 a:hover {
    transition: all 0.4s;
    color: var(--vtc-bg-main6)
}

.heading4 h4:hover {
    transition: all 0.4s;
    color: var(--vtc-bg-main6)
}

.heading4 p {
    color: var(--vtc-text-pera1);
    font-size: var(--f-fs-font-18);
    font-style: normal;
    font-weight: var(--f-fw-normal);
    line-height: var(--f-fs-font-26);
    transition: all 0.4s
}

.heading8 .sub-title1 {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-18);
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-18);
    display: inline-block;
    margin-bottom: 16px;
    background-color: var(--vtc-bg-common-19);
    padding: 8px 12px 4px 12px;
    border-radius: 8px
}

.heading8 .sub-title1 img {
    transform: translateY(-2px);
    margin-right: 3px
}

.heading8 .sub-title2 {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-18);
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-18);
    display: inline-block;
    margin-bottom: 16px;
    background-color: var(--vtc-bg-white);
    padding: 8px 12px 4px 12px;
    border-radius: 8px
}

.heading8 .sub-title2 img {
    transform: translateY(-2px);
    margin-right: 3px
}

.heading8 h2 {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-44);
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-52)
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .heading8 h2 {
        font-size: var(--f-fs-font-32);
        line-height: var(--f-fs-font-40)
    }
}

@media (max-width:767px) {
    .heading8 h2 {
        font-size: var(--f-fs-font-32);
        line-height: var(--f-fs-font-40)
    }
}

.heading8 h3 {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-32);
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-38)
}

.heading8 h3 a {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-32);
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-38);
    transition: all 0.4s
}

.heading8 h3 a:hover {
    transition: all 0.4s;
    color: var(--vtc-bg-main10)
}

.heading8 h5 a {
    display: inline-block;
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-24);
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-32);
    transition: all 0.4s
}

.heading8 h5 a:hover {
    transition: all 0.4s;
    color: var(--vtc-bg-main10)
}

.heading8 h4 a {
    display: inline-block;
    color: var(--vtc-text-title1);
    font-size: 22px;
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-30);
    transition: all 0.4s
}

.heading8 h4 a:hover {
    transition: all 0.4s;
    color: var(--vtc-bg-main11)
}

.heading8 p {
    color: var(--vtc-text-pera1);
    font-size: var(--f-fs-font-18);
    font-style: normal;
    font-weight: var(--f-fw-normal);
    line-height: var(--f-fs-font-26);
    transition: all 0.4s
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0
    }
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0
    }
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0
    }
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0
    }
}

.theme-btn5 {
    display: inline-block;
    color: var(--vtc-text-white);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-20);
    padding: 17px 22px 17px 22px;
    border-radius: 52px;
    background-color: #926043;
    transition: all 0.4s;
    border: none;
    position: relative;
    z-index: 2;
    overflow: hidden
}

.theme-btn5::after {
    content: "";
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    height: 100%;
    width: 0%;
    background-color: var(--vtc-text-title1);
    border-radius: 25px;
    z-index: -1;
    transition: all 0.4s;
    animation-timing-function: linear
}

.theme-btn5:hover {
    color: var(--vtc-text-white);
    transition: all 0.4s;
    transform: translateY(-5px)
}

.theme-btn5:hover::after {
    transition: all 0.4s;
    width: 100%;
    left: 0;
    right: auto;
    animation-timing-function: linear
}

.text-start h4 {
    color: #13829c
}

.cta3 {
    padding: 20px 0;
    background-color: #f1f1f1
}

.cta3 .black {
    color: #2f2b2b !important;
    padding: 0 55px
}

.w-20 {
    width: 20%
}

.cta3-form {
    padding-top: 40px;
    padding-right: 120px;
    position: relative;
    margin-right: 80px
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .cta3-form {
        margin: 0 20px 0 0
    }
}

@media (max-width:767px) {
    .cta3-form {
        margin: 0 20px 0 0
    }
}

.cta3-form input {
    width: 100%;
    border: 1px solid var(--vtc-bg-white10per);
    border-radius: 111px;
    background-color: var(--vtc-bg-white10per);
    padding: 16px;
    color: var(--vtc-text-white);
    margin-right: 140px
}

.cta3-form input::-moz-placeholder {
    color: var(--vtc-text-white80per);
    font-size: var(--f-fs-font-16);
    font-style: normal;
    font-weight: var(--f-fw-normal);
    line-height: var(--f-fs-font-16)
}

.cta3-form input::placeholder {
    color: var(--vtc-text-white80per);
    font-size: var(--f-fs-font-16);
    font-style: normal;
    font-weight: var(--f-fw-normal);
    line-height: var(--f-fs-font-16)
}

.cta3-form input:focus {
    outline-color: var(--vtc-bg-main4);
    outline-width: 1px;
    outline-style: solid
}

.cta3-form input:focus::-moz-placeholder {
    opacity: 0
}

.cta3-form input:focus::placeholder {
    opacity: 0
}

.cta3-form .button {
    position: absolute;
    top: 40px;
    right: -20px
}

.hero3 {
    min-height: 910px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    background-image: url(../img/bg/5.jpg);
    background-repeat: no-repeat
}

.status-expert {
    background-color: #48cda0;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    margin-top: 121px;
    margin-left: -50px
}

.ml-22 {
    margin-left: 22px
}

.sp1::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 63%;
    top: -1px;
    background-image: url(../img/bg/7.png);
    opacity: .2;
    background-repeat: no-repeat;
    background-size: 21%
}

.hero3 .review-area-all {
    padding-top: 40px
}

.hero3 .review-area-all .award-area {
    display: flex;
    align-items: center
}

.hero3 .review-area-all .award-area .award-content {
    padding-left: 20px
}

.hero3 .review-area-all .award-area .award-content p {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-20);
    font-style: normal;
    font-weight: var(--f-fw-normal);
    line-height: var(--f-fs-font-32)
}

.hero3 .review-area-all .award-area .award-content h6 {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-20);
    font-style: normal;
    font-weight: var(--f-fw-normal);
    line-height: var(--f-fs-font-32)
}

.hero3 .review-area-all .award-area .award-content h6 span {
    color: var(--vtc-bg-main5);
    font-weight: var(--f-fw-semibold)
}

.hero3 .review-area-all .review-stars-area ul li {
    display: inline-block;
    color: #FFAD0F
}

.hero3 .review-area-all .review-stars-area p {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-20);
    font-style: normal;
    font-weight: var(--f-fw-normal);
    line-height: var(--f-fs-font-20);
    padding-top: 10px
}

.font-40 {
    font-size: 40px !important
}

.main-heading3 {
    padding-top: 0;
    padding-right: 0
}

.heading9 {
    height: 204px
}

@media (max-width:1700px) {
    .heading9 {
        height: 251px
    }

    .business-card {
        padding: 35px 26px !important;
        width: 93% !important
    }

    .cards-container {
        margin-left: -29px !important
    }
}

@media (max-width:1400px) {
    .heading9 {
        height: 251px !important
    }

    .cards {
        width: 98px !important
    }

    .cards-container {
        margin-left: -29px !important
    }

    .about3-images .image2 {
        right: -43px !important
    }

    .image2 img {
        width: 62% !important
    }

    label.radio-tile-label {
        font-size: 15px !important
    }

    .input-container {
        width: 150px !important
    }
}

@media (max-width:1216px) {
    .heading9 {
        height: 279px !important
    }
}

@media (max-width:1200px) {
    .about3-images .shape1 {
        top: 100px !important;
        left: 39px !important;
        width: 66% !important
    }
}

@media (max-width:1199px) {
    .service4-box {
        padding: 22px !important
    }

    .cards {
        width: 96px !important
    }

    .cards-container {
        margin-left: -29px !important
    }

    .form-check-label {
        font-size: 10px !important
    }

    .btn-white {
        font-size: 11px !important
    }

    label.radio-tile-label {
        font-size: 12px !important
    }

    .input-container {
        width: 119px !important
    }
}

@media (max-width:1024px) {
    label.radio-tile-label {
        font-size: 12px !important
    }

    .input-container {
        width: 119px !important
    }

    .business-card {
        padding: 35px 26px !important;
        width: 93% !important
    }

    .btn-white {
        font-size: 11px !important
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .main-heading3 {
        padding-top: 100px
    }

    .rightSide {
        padding-bottom: 100px
    }

    .image2 img {
        width: 59% !important
    }

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

    .hero3 .container .flex.align-items-center {
        flex-wrap: wrap;
        font-size: 12px
    }

    .business-card {
        width: 77% !important
    }

    .input-wrapper {
        flex-wrap: nowrap !important
    }

    .main-heading {
        padding: 70px 0 25px !important
    }
}

@media (max-width:991px) {
    .heading9 {
        height: 226px
    }

    .input-wrapper {
        flex-wrap: nowrap !important
    }

    .about3-images .shape1 {
        left: 155px !important
    }
}

@media (max-width:767px) {
    .main-heading3 {
        padding-top: 100px;
        padding-left: 10px
    }

    .rightSide {
        padding-bottom: 100px
    }

    .image2 img {
        width: 59% !important
    }

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

    .hero3 .container .flex.align-items-center {
        flex-wrap: wrap
    }

    .main-heading {
        padding: 70px 0 25px !important
    }

    .input-wrapper {
        flex-wrap: nowrap !important
    }
}

@media (max-width:750px) {
    .cards-container {
        margin-left: -32px !important
    }

    .cards {
        width: 97px !important
    }
}

@media (max-width:557px) {
    .cards-container {
        margin-left: -32px !important
    }

    .input-wrapper {
        flex-wrap: nowrap !important
    }

    .rightSide {
        padding-bottom: 100px
    }

    .about3-images .image2 {
        right: 13px !important
    }

    .rightSide::before {
        background-image: none !important
    }

    .image2 img {
        width: 59% !important
    }

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

    .hero3 .container .flex.align-items-center {
        flex-wrap: wrap
    }

    .main-heading {
        padding: 70px 0 25px !important
    }

    .about3-images .tes2-single-slider {
        width: 267px !important;
        top: 15rem !important;
        padding: 15px !important
    }

    .about3-images .image2 {
        bottom: 47% !important;
        justify-content: end !important
    }

    .about3-images .shape1 {
        top: 156px !important;
        left: 85px !important
    }

    .about3-images .shape1 img {
        max-width: 68% !important
    }

    .from-them:after {
        background: #f2f2f2 !important
    }

    .input-container {
        width:  141px !important;
         margin: 3px!important;
    }
    #theme-options {
    width: 82%!important;
    }
    #sendButton svg{
        width: 16px;
    }
    .radio-tile {
    padding: 6px!important;
    }
        label.radio-tile-label {
        font-size: 11px !important;
    }

    .input-wrapper.w-100.flex.gap-10.align-items-center{
        gap: 4px;
    }
    .gender-form {
    padding: 0!important;
    }
    .radio-tile {
    gap: 7px!important;
    }
        .chat {
        width: 100% !important;
    }
}
@media (max-width:480px){
  .input-container {
        width:  111px !important;
         margin: 3px!important;
    }
    #theme-options {
    width: 82%!important;
    }
    #sendButton svg{
        width: 16px;
    }
    .radio-tile {
    padding: 6px!important;
    }
         label.radio-tile-label {
        font-size: 9px !important;
    }
    .bike-icon svg{
        width: 17px!important;
    }
.chat-footer {
    padding: 11px 7px!important;

}
    .input-wrapper.w-100.flex.gap-10.align-items-center{
        gap: 4px;
    }
    .gender-form {
    padding: 0!important;
    }
    .radio-tile {
    gap: 7px!important;
    }
        .chat {
        width: 100% !important;
    }
}
.shape-bg1 {
    height: 79px;
    width: 83px;
    position: absolute;
    z-index: -1;
    bottom: 34.5%;
    right: 31.4%
}

.main-heading3 span.sub-title {
    display: inline-block;
    color: var(--vtc-bg-main5);
    font-size: var(--f-fs-font-18);
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-18);
    margin-bottom: 16px
}

.main-heading3 h1 {
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-56);
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-64);
    position: relative;
    z-index: 2
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .main-heading3 h1 {
        font-size: var(--f-fs-font-40);
        line-height: var(--f-fs-font-48)
    }
}

@media (max-width:767px) {
    .main-heading3 h1 {
        font-size: var(--f-fs-font-40);
        line-height: var(--f-fs-font-48)
    }
}

.main-heading3 p {
    color: var(--vtc-text-pera1);
    font-size: var(--f-fs-font-18);
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-28);
    position: relative
}

.main-heading3 p img {
    position: absolute;
    right: -40px;
    z-index: 0;
    bottom: 145px
}

.fa-star::before {
    content: "\f005"
}

.main-heading3 .buttons {
    display: flex;
    align-items: center
}

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

    100% {
        transform: translatex(-100%)
    }
}

@keyframes marquee-2 {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translatex(0)
    }
}

.preloader9 #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
    transition: transform 0.5s ease-in-out
}

.preloader9 .progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--vtc-bg-main5);
    animation: progress 2.5s ease-in-out forwards;
    border-radius: 8px
}

@keyframes progress {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

.preloader9 .title-logo img {
    width: 120px;
    height: auto;
    animation: rotate 12s linear infinite
}

.preloader9 .preloader-exit .title-logo {
    transform: scale(0);
    transition: all 0.9s;
    animation-timing-function: ease-in-out;
    opacity: 0
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.preloader9 .loading-text {
    margin-top: 20px;
    font-size: 18px;
    color: #fff
}

.preloader9 .loading-text span {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #fff;
    animation: typing 2s steps(10, end) infinite
}

@keyframes typing {
    0% {
        width: 0
    }

    50% {
        width: 100%
    }

    100% {
        width: 0
    }
}

.preloader9 .preloader-exit {
    transform: translateY(-100%)
}

.sec-bg3 {
    background-color: var(--vtc-bg-common-5)
}

.sec-bg6 {
    background-color: var(--vtc-text-title1)
}

@keyframes round-circle {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(1000deg)
    }
}

@keyframes round-circle2 {
    0% {
        transform: rotate(-20deg)
    }

    100% {
        transform: rotate(20deg)
    }
}

@keyframes animate1 {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-20px)
    }
}

@keyframes animate2 {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(20px)
    }
}

@keyframes animate3 {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(15px)
    }
}

@keyframes animate4 {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-25px)
    }
}

@keyframes animate5 {
    0% {
        transform: scale(.5)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes animate6 {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.1)
    }
}

@keyframes animate7 {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-70px)
    }
}

@keyframes animate8 {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(70px)
    }
}

.round-circle {
    position: relative;
    animation-name: round-circle;
    animation-duration: 72s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear
}

.animate1 {
    position: relative;
    animation-name: animate1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}

.animate2 {
    position: relative;
    animation-name: animate2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}

.animate3 {
    position: relative;
    animation-name: animate3;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}

.animate4 {
    position: relative;
    animation-name: animate4;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}

.animate5 {
    position: relative;
    animation-name: animate5;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}

.animate6 {
    position: relative;
    animation-name: animate6;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}

.animate7 {
    position: relative;
    animation-name: animate7;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}

.animate8 {
    position: relative;
    animation-name: animate8;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}

.round-circle2 {
    position: relative;
    animation-name: round-circle2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}

.image-anime {
    overflow: hidden
}

.image-anime:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgb(255 255 255 / .3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1
}

.image-anime:hover:after {
    height: 250%;
    transition: all 600ms linear;
    background-color: #fff0
}

.blok:nth-of-type(odd) {
    background-color: #fff
}

.blok:nth-of-type(even) {
    background-color: #000
}

.progress-wrap {
    position: fixed;
    right: 27px;
    bottom: 168px;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgb(0 0 0 / .1);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 200ms linear
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 999
}

.progress-wrap::after {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    color: var(--vtc-text-title1);
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 1;
    transition: all 200ms linear
}

.progress-wrap:hover::after {
    opacity: 0
}

.progress-wrap::before {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    opacity: 0;
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 2;
    transition: all 200ms linear
}

.progress-wrap:hover::before {
    opacity: 1
}

.progress-wrap svg path {
    fill: none
}

.progress-wrap svg.progress-circle path {
    stroke: var(--vtc-text-title1);
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear
}

.sidebar-area {
    position: sticky;
    top: 140px;
    left: 0
}

.header-tranperent {
    position: absolute;
    top: 0;
    z-index: 999;
    width: 100%
}

.header-contact-wedget {
    text-align: end
}

.vlfadeInDown {
    animation: vlfadeInDown 1s ease-out forwards
}

@keyframes vlfadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.about10-icon-box {
    cursor: pointer
}

form::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-right: 42px solid #fff0;
    border-top: 25px solid #d7e1ea;
    bottom: -18px;
    transform: rotate(66deg);
    z-index: -6;
    right: 65px
}

.about3-images {
    position: relative;
    height: 509px;
    z-index: 2
}

.about3-images .image1 {
    position: absolute;
    left: 0;
    top: 0
}

.about3-images .image2 {
    position: absolute;
    right: 0;
    bottom: 0
}

.about3-images .shape1 {
    top: 100px;
    left: 110px;
    z-index: -1;
    width: 47%
}

.about3-counters {
    margin-top: 20px
}

.about3-counters .shape-bg1 {
    height: 75px;
    width: 88px;
    position: absolute;
    top: -13px;
    left: -24px;
    z-index: -1
}

.about3-counters .shape-bg1 .stop-color2 {
    stop-color: var(--vtc-bg-common-9)
}

.about3-counters .shape-bg1 .stop-color1 {
    stop-color: var(--vtc-bg-common-9)
}

.about3-counters .single-counter {
    position: relative;
    margin-top: 30px
}

.about3-counters .single-counter h3 {
    color: #e76f51;
    font-size: 30px;
    font-style: normal;
    font-weight: var(--f-fw-semibold);
    line-height: var(--f-fs-font-60)
}

.expertise {
    color: #727272
}

.mt-35 {
    margin-top: 35px
}

.about3-counters .single-counter p {
    color: var(--vtc-text-pera1);
    font-size: 13px;
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-28);
    padding-top: 6px
}

.about10-icon-box {
    background-color: var(--vtc-bg-common-22);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    margin-top: 30px;
    transition: all 0.4s
}

.about10-icon-box .icon {
    height: 20px;
    width: 20px;
    line-height: 20px;
    text-align: center;
    background-color: var(--vtc-bg-main13);
    border-radius: 50%;
    font-size: 12px;
    color: var(--vtc-text-white)
}

.w-57 {
    width: 57%
}

.about10-icon-box1 .icon {
    height: 20px;
    width: 20px;
    line-height: 20px;
    text-align: center;
    background-color: var(--vtc-bg-main13);
    border-radius: 50%;
    font-size: 12px;
    color: var(--vtc-text-white)
}

.about10-icon-box .text {
    display: flex;
    align-items: center;
    gap: 7px
}

.about10-icon-box1 .text {
    display: flex;
    align-items: center;
    gap: 7px
}

.about10-icon-box .text p {
    color: var(--vtc-text-title2);
    font-size: 15px;
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-16);
    margin-bottom: 0
}

.about10-icon-box1 .text p {
    color: var(--vtc-text-title2);
    font-size: 13px;
    font-style: normal;
    font-weight: var(--f-fw-medium);
    line-height: var(--f-fs-font-16);
    margin-bottom: 0
}

.gap-7p {
    gap: 7px
}

.gap-1r {
    gap: 1rem
}

.gap-10p {
    gap: 10px
}

.about10-icon-box:hover {
    transition: all 0.4s;
    transform: translateY(-5px)
}

.about10-icon-box1:hover {
    transition: all 0.4s;
    transform: translateY(-5px)
}

@media (max-width:767px) {
    .award-items {
        display: block
    }

    .award-title {
        width: 100%
    }

    .slider-img:after {
        height: 300px;
        width: 300px;
        bottom: -150px
    }
}

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

    100% {
        transform: translatex(-100%)
    }
}

@keyframes marquee-2 {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translatex(0)
    }
}

.service4-box {
    padding: 31px;
    border-radius: 8px;
    background-color: var(--vtc-bg-white);
    transition: all 0.4s
}

.service4-box .icon {
    background-color: #fbeadf;
    height: 70px;
    width: 70px;
    text-align: center;
    line-height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.icon img {
    width: 55%
}

.service4-box .icon img {
    transition: all 0.4s
}

.service4-box .learn {
    display: inline-block;
    overflow: hidden;
    padding-top: 16px;
    color: var(--vtc-text-title1);
    font-size: var(--f-fs-font-16);
    font-style: normal;
    font-weight: var(--f-fw-bold);
    line-height: var(--f-fs-font-16);
    transition: all 0.4s
}

.service4-box .learn span {
    display: inline-block;
    transform: rotate(-45deg) translateX(0) translateY(1px);
    font-size: 17px;
    transition: all 0.4s
}

.service4-box .learn .arrow2 {
    transform: translateY(-8px) rotate(-45deg) translateX(-52px);
    transition: all 0.4s;
    opacity: 0
}

.service4-box .learn .arrow1 {
    transition: all 0.4s;
    opacity: 1
}

.service4-box .learn:hover {
    color: var(--vtc-bg-white);
    transition: all 0.4s
}

.service4-box .learn:hover .arrow2 {
    transform: translateY(-12px) rotate(-45deg) translateX(-18px);
    transition: all 0.4s;
    opacity: 1
}

.service4-box .learn:hover .arrow1 {
    transition: all 0.4s;
    transform: translateY(-7px) rotate(-45deg) translateX(45px);
    opacity: 0
}

.service4-box:hover {
    transition: all 0.4s;
    transform: translateY(-10px);
    background-color: #e76f51
}

.mt-30,
.my-30 {
    margin-top: 30px
}

.pr-10,
.px-10 {
    padding-right: 10px
}

.mt-20,
.my-20 {
    margin-top: 20px
}

.mt-12,
.my-12 {
    margin-top: 20px
}

.mt-70 {
    margin-top: 70px
}

.service4-box:hover .heading4 h4 a {
    color: var(--vtc-bg-white);
    transition: all 0.4s
}

.service4-box:hover .heading4 h4 {
    color: var(--vtc-bg-white);
    transition: all 0.4s
}

.service4-box:hover .heading4 p {
    color: var(--vtc-text-white80per);
    transition: all 0.4s
}

.sub-title a {
    color: #797979
}

.service4-box:hover .learn {
    color: var(--vtc-bg-white);
    transition: all 0.4s
}

.service4-box:hover .learn .arrow2 {
    transform: translateY(-12px) rotate(-45deg) translateX(-18px);
    transition: all 0.4s;
    opacity: 1
}

.service4-box:hover .learn .arrow1 {
    transition: all 0.4s;
    transform: translateY(-7px) rotate(-45deg) translateX(45px);
    opacity: 0
}

.service4-box:hover .icon img {
    transition: all 0.4s;
    transform: rotateY(180deg)
}

.tes2-slider {
    cursor: move
}

.tes2-single-slider {
    border: 1px solid #fbeadf;
    padding: 24px;
    border-radius: 8px;
    margin: 0 10px
}

.tes2-single-slider .qoute {
    height: 45px;
    width: 45px;
    text-align: center;
    background-color: #fbece2;
    text-align: center;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.qoute img {
    width: 45%
}

.tes2-single-slider .qoute img {
    display: inline-block
}

.tes2-single-slider .stars {
    display: inline-block;
    margin-left: 10px
}

.tes2-single-slider .stars ul li {
    display: inline-block
}

.tes2-single-slider .stars ul li.star {
    color: #FFA41C;
    margin-right: 4px;
    display: flex
}

.fas,
.fa-solid {
    font-weight: 900;
    font-size: 12px
}

.tes2-single-slider .stars ul li.rating-text {
    color: var(--vtc-text-title1);
    font-size: 15px;
    font-style: normal;
    font-weight: var(--f-fw-normal);
    line-height: var(--f-fs-font-16)
}

.tes2-single-slider .content {
    padding-top: 12px
}

.tes2-single-slider .content p {
    color: var(--vtc-text-title1);
    font-size: 15px;
    font-style: normal;
    font-weight: var(--f-fw-normal);
    line-height: var(--f-fs-font-28);
    opacity: .8
}

.tes2-single-slider .author-area {
    display: flex;
    align-items: center;
    padding-top: 12px
}

.work-prosses8-box {
    text-align: center;
    margin-top: 40px;
    transition: all 0.4s;
    position: relative
}

.work-prosses8-box .num {
    color: #0C0723;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 44px;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    background-color: var(--vtc-bg-common-18);
    margin: auto;
    transition: all 0.4s;
    position: relative
}

.work-prosses8-box .num::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border: 1px solid var(--vtc-bg-common-18);
    transform: scale(1.3);
    border-radius: 50%
}

.work-prosses8-box .content {
    background-color: var(--vtc-bg-common-18);
    padding: 40px 36px 36px 36px;
    text-align: center;
    border-radius: 8px;
    position: relative;
    z-index: 3;
    margin-top: 80px;
    transition: all 0.4s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start
}

.work-prosses8-box .content::after {
    content: "";
    position: absolute;
    top: -33px;
    left: 50%;
    height: 70px;
    width: 70px;
    background-color: var(--vtc-bg-common-18);
    transition: all 0.4s;
    border-radius: 8px;
    transform: rotate(-45deg);
    margin-left: -36px;
    z-index: -1;
    transition: all 0.4s
}

.work-prosses8-box:hover {
    transition: all 0.4s;
    transform: translateY(-10px)
}

.work-prosses8-box:hover .num {
    background-color: #e76f51;
    transition: all 0.4s;
    color: var(--vtc-text-white)
}

.work-prosses8-box:hover .num::after {
    border: 1px solid #e76f51;
    transition: all 0.4s;
    opacity: .5
}

.work-prosses8-box:hover .content {
    background-color: #e76f51;
    transition: all 0.4s
}

.work-prosses8-box:hover .content h4 a {
    color: var(--vtc-text-white);
    transition: all 0.4s
}

.work-prosses8-box:hover .content p {
    color: var(--vtc-text-white);
    transition: all 0.4s
}

.work-prosses8-box:hover .content::after {
    transition: all 0.4s;
    background-color: #e76f51
}

.work-prosses8-box.add-after::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 210px;
    height: 2px;
    width: 100%;
    background-image: url(../img/shapes/work8-line.png);
    z-index: -1
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .work-prosses8-box.add-after::after {
        display: none
    }

    .rightSide::before {
        background-image: none !important
    }

    .cards-container {
        margin-left: -30px !important
    }
}

@media (max-width:767px) {
    .work-prosses8-box.add-after::after {
        display: none
    }

    .rightSide::before {
        background-image: none !important
    }
}

.align-items-center {
    align-items: center
}

.gap-2r {
    gap: 2rem
}

.flex-column {
    flex-direction: column
}

.flex {
    display: flex
}

.gap-3 {
    gap: 1rem !important
}

.section-line {
    width: 80px;
    height: 2px;
    margin: 0 auto;
    background: #111
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important
}

.gap-2r {
    gap: 2rem
}

.w-full {
    width: 100%
}

.mb-0 {
    margin-bottom: 0 !important
}

.font-20 {
    font-size: 20px !important
}

.text-\[\#636363\] {
    --tw-text-opacity: 1;
    color: rgb(99 99 99 / var(--tw-text-opacity))
}

a {
    cursor: pointer
}

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

.grid {
    display: grid
}

.gap-\[30px\] {
    gap: 30px
}

.gap-5p {
    gap: 5px
}

.bg-\[\#ED5F38\] {
    --tw-bg-opacity: 1;
    background-color: #a7a7a7
}

.shadow-\[0_0_50px_0_rgba\(196\2c 206\2c 213\2c 0\.2\)\] {
    --tw-shadow: 0 0 50px 0 rgba(196, 206, 213, 0.2);
    border: 1px solid #ebeeeb;
    --tw-shadow-colored: 0 0 50px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    background: #fff
}

.px-\[30px\] {
    padding-left: 30px;
    padding-right: 30px
}

.pb-\[40px\] {
    padding-bottom: 40px
}

.md\:pt-\[40px\] {
    padding-top: 40px
}

.justify-center {
    justify-content: center
}

.bg-\[\#48CDA0\] {
    --tw-bg-opacity: 1;
    background-color: rgb(72 205 160 / var(--tw-bg-opacity))
}

.service-shape {
    position: relative
}

.disponibility {
    font-size: 13px;
    border-radius: 15px;
    height: 30px !important;
    width: min-content;
    padding: 0 10px;
    float: right;
    text-wrap: nowrap;
    margin-top: -26px
}

.rounded-btn {
    display: flex;
    padding: 7px;
    border-radius: 42px;
    display: flex;
    align-items: center
}

.before\:opacity-\[0\.16\]::before {
    content: var(--tw-content);
    opacity: .16
}

.service-shape::before {
    position: absolute;
    left: 16%;
    bottom: 70%;
    z-index: 0;
    height: 23px;
    width: 70%;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-content: '';
    content: var(--tw-content)
}

.before\:bg-\[\#79DAB9\]::before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color:#989999
}

.profile {
    display: flex;
    flex-direction: row;
    gap: .5rem;
    width: 100%;
    align-items: center
}

.img-profile a {
    position: relative
}

.img-profile img {
    height: 60px;
    width: 60px;
    border-radius: 50%
}

.font-bold {
    font-weight: 700
}

.black {
    color: #090b0e
}

.xl\:text-\[25px\] {
    font-size: 20px
}

.font-bold {
    font-weight: 700
}

small {
    font-size: 80%;
    color: #333
}

.mb-\[15px\] {
    margin-bottom: 6px
}

span.bg-accent1_rgb {
    background: #fff6e9;
    color: #57524a;
    font-size: 10px
}

.text-\[14px\] {
    font-size: 14px
}

.uppercase {
    text-transform: uppercase
}

.px-\[6px\] {
    padding-left: 6px;
    padding-right: 6px
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: 150ms
}

.py-1 {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important
}

.details {
    display: flex;
    flex-direction: row;
    justify-content: space-around
}

[dir="ltr"] .link-button {
    padding-left: 18px
}

.link-button {
    position: relative;
    display: inline-block;
    font-size: 14px;
    color: #777676;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 28px
}

.mt-\[10px\] {
    margin-top: 10px
}

[dir="ltr"] .link-button::before {
    content: "";
    left: 0
}

.link-button::before {
    position: absolute;
    top: 36%;
    height: 7px;
    width: 7px;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-content: '';
    content: var(--tw-content);
    left: -12px
}

.before\:bg-\[\#48CDA0\]::before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: #b1a7a7
}

.text-white {
    color: #fff !important
}

.h-\[40px\] {
    height: 40px
}

.w-\[40px\] {
    width: 40px
}

[hover-tooltip] {
    position: relative;
    cursor: pointer
}

.bg-accent1 {
    --tw-bg-opacity: 1;
    background-color: #e76f51;
    border: 1px solid #e76f51
}

.gap-4r {
    gap: 2rem
}

.h-\[50px\] {
    height: 40px
}

.gap-4r {
    gap: 4rem
}

.Footer_backgroundImage__bg_S_ {
    width: 7%
}

.Footer_crownWrapper__kjVKN {
    display: flex;
    align-items: center;
    justify-content: center
}

.Footer_backgroundImage__bg_S_ svg {
    color: #fff;
    fill: #fff;
    height: 40px
}

.Footer_icon__7yN_X {
    position: relative;
    width: 50px;
    height: 15px;
    left: calc(50% - 25px);
    top: 0
}

.Footer_icon__7yN_X svg {
    color: #fff
}

.Footer_title__7ywZX {
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: #1c1c1c;
    line-height: 17px
}

.about10-icon-box1 {
    background-color: rgb(99 98 98 / 10%);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    margin-top: 30px;
    transition: all 0.4s
}

.black {
    color: #000
}

.text b {
    color: #11819b
}

.Footer_title__7ywZX span {
    margin: 0;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    display: block
}

.image2 img {
    width: 67%;
    border-radius: 8px
}

.Footer_right__huLDa {
    width: 7%;
    transform: rotateY(180deg)
}

.Footer_right__huLDa SVG {
    color: #fff;
    height: 40px
}

.white {
    color: #fff
}

.w-\[50px\] {
    width: 40px
}

.consultations.block-1 {
    margin-top: 15px
}

.consultations {
    display: flex;
    justify-content: space-evenly
}

[hover-tooltip] {
    &:hover {
        &::before {
            content: attr(hover-tooltip);
            font-size: 12.5px;
            width: 161px;
            text-align: center;
            position: absolute;
            display: inline-block;
            text-transform: none;
            top: 40px;
            animation: fade-in 300ms ease;
            background: #5a5959;
            border-radius: 4px;
            padding: 4px 10px;
            color: #fff;
            z-index: 3
        }

        &::after {
            content: '';
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border: 1px solid #000;
            border-color: #5a5959 #fff0 #fff0 #fff0;
            border-width: 4px 6px 0;
            animation: fade-in 300ms ease;
            z-index: 1;
            transform: rotate(180deg);
            top: 36px
        }
    }
}

.hover\:bg-accent1:hover {
    --tw-bg-opacity: 1;
    background-color: #e76f51;
    color: #fff
}

.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

::-webkit-scrollbar {
    width: 7px
}

::-webkit-scrollbar-thumb {
    background: #0b404d
}

form {
    background-image: linear-gradient(rgb(255 255 255 / 47%), #d2dde6), url(../img/bg/bg-01.png);
    background-size: cover;
    border-radius: 59%;
    border: none;
    z-index: 4;
    position: relative;
    margin: 0;
    border: 1px solid #d4ddea;
    width: 23vh
}

.h-66 {
    height: 18vh
}

.op-9 {
    opacity: .9
}

.gap-32 {
    gap: 32px
}

.expertImg {
    border-radius: 100%;
    box-shadow: -2px 0 13px 0 rgb(0 0 0 / .13);
    width: 160px
}

.award-area {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center
}

.award-content p {
    color: #11819b
}

.award-content h6 {
    color: #11819b;
    font-weight: 700
}

.expert-name {
    color: #a8513b;
    font-size: 29px;
    font-weight: 600
}

.status {
    color: #48cda0;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    padding: 3px 5px;
    gap: 6px;
    right: 10%;
    font-size: 10px;
    bottom: 60%;
    font-weight: 500
}

.gap-11 {
    gap: 11px
}

.chat-container {
    margin-block-end: 0
}

.header-container {
    display: flex;
    align-items: center;
    flex-direction: row;
    border: none;
    color: #fff;
    background: rgb(0 0 0 / .12);
    box-shadow: 0 4px 30px rgb(0 0 0 / .1);
    backdrop-filter: blur(7.4px);
    padding: 12px 27px;
    position: sticky;
    top: 0;
    z-index: 9999;
    border-radius: 25px 25px 0 0;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding: 8px 16px;
    align-items: center;
    background: #FFF;
    border-bottom: 1px solid #E8E8E9;
    position: relative;
    box-shadow: 0 1px 5px 1px #f3f3f3
}

.chat {
    background-image: url(../img/bg/bg-01.png);
    border-radius: 28px 28px 0;
    border: none;
    background-color: #fff;
    z-index: 4;
    position: relative;
    margin: 0;
    box-shadow: 0 0 30px 0 #5b5b5b;
    width: 100%
}

.chat-header {
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding: 8px 16px;
    align-items: center;
    background: #FFF;
    border-bottom: 1px solid #E8E8E9;
    position: relative;
    box-shadow: 0 1px 5px 1px #f3f3f3;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    position: sticky;
    top: 0;
    z-index: 9999
}

#gender-options {
    width: 100%;
    z-index: 1
}

.gender-form {
    padding: 7px;
    border-radius: .375rem;
    display: flex;
    gap: 0
}

.gender-form label {
    display: flex;
    align-items: center
}

input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #9ca3af;
    margin: 3px 3px 0 5px;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1)
}

.last-seen {
    font-size: 13px;
    color: #3c7160
}

.user-details {
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    overflow: hidden
}

.avatar.avatar-lg {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1rem
}

.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #FFF;
    font-weight: 500
}

.avatar.online::before {
    background-color: #0CC68C;
    content: "";
    width: 14px;
    height: 14px;
    position: absolute;
    content: "";
    border-radius: 50%;
    inset-inline-end: 2px;
    inset-block-end: 0;
    border: 2px solid #FFF !important;
    z-index: 1
}

#sendButton {
    background-color: #585ea7;
    border-color: #585ea7;
    background-color: #6d5587;
    border-color: #6d5587;
    padding: 10px 8.5px;
    display: flex
}

.user {
    font-size: 11px;
    text-transform: capitalize
}

.form-control {
    border: 1px solid #ededed;
    border-radius: .375rem;
    color: #212529;
    font-size: 16px;
    font-weight: 400;
    line-height: 0;
    padding: 9px;
    width: 100%;
    height: 47px;
    background-color: #ffffff !important;
    display: flex;
    justify-content: center;
    align-items: center
}

.ms-2 h6 {
    color: #090b0e;
    font-size: 17px
}

.chat::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-right: 42px solid #fff0;
    border-top: 25px solid #fff;
    bottom: -19px;
    transform: rotate(66deg);
    z-index: -6;
    right: -14px
}

.fade-out {
    animation: fadeOut 0.6s forwards
}

.vl-copyright3._dv-top {
    border-top: 1px solid var(--vtc-bg-common-8)
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: scale(.95)
    }
}

.vl-copyright3 {
    padding: 10px 0
}

.vl-copyright3 .copyright-text p,
.vl-copyright3 .copyright-text a {
    display: inline-block;
    color: var(--vtc-text-pera1);
    font-size: 15px;
    font-style: normal;
    font-weight: var(--f-fw-normal);
    line-height: var(--f-fs-font-18);
    position: relative
}

.vl-copyright3 .copyright-text a {
    transition: all 0.4s
}

.vl-copyright3 .copyright-text p,
.vl-copyright3 .copyright-text a {
    display: inline-block;
    color: var(--vtc-text-pera1);
    font-size: 15px;
    font-style: normal;
    font-weight: var(--f-fw-normal);
    line-height: var(--f-fs-font-18);
    position: relative
}

.vl-copyright3 .copyright-text a:hover {
    color: var(--vtc-bg-main5);
    transition: 0.4s
}

.vl-copyright3 .copyright-text p.add-before,
.vl-copyright3 .copyright-text a.add-before {
    padding-left: 40px
}

.move-inside {
    animation: moveInside 1s ease forwards
}

@keyframes moveInside {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-40px) scale(.9);
        opacity: .8
    }
}

.open-chat {
    animation: openChat 1s ease forwards
}

@keyframes openChat {
    0% {
        transform: scale(.8);
        opacity: 0
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.slide-out {
    animation: slideOut 0.8s ease forwards
}

@keyframes slideOut {
    to {
        transform: translateY(-50px);
        opacity: 0
    }
}

.fade-in-diagonal {
    animation-name: fadeInDiagonal
}

@keyframes fadeInDiagonal {
    0% {
        opacity: 0;
        transform: translate(-50px, -50px) scale(.95);
        filter: blur(4px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter: blur(0)
    }
}

.hidden {
    display: none !important
}

.mt-16 {
    margin-top: 16px
}

.message {
    background-color: #F7F8FA;
    border-radius: 16px 16px 16px 0;
    padding: 16px;
    font-size: 15px;
    width: 100%
}

.user-response {
    margin-left: auto;
    text-align: right
}

.user-message-content .message {
    background-color: #585ea7;
    background-color: #6d5587;
    border-radius: 16px 16px 0 16px;
    color: #fff
}

.gap-9 {
    gap: 9px
}

.user-right {
    color: #585ea7;
    color: #6d5587;
    font-weight: 500;
    text-transform: capitalize
}

.UserName svg {
    border: 1px dashed #585ea7;
    border: 1px dashed #6d5587;
    border-radius: 50%
}

.profile-expert img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid #e6866f
}

#chat {
    height: 84vh;
    overflow: auto;
    padding-bottom: 0
}

.chat-container1 {
    padding: 27px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    overflow-x: hidden
}

.d-flex.align-items-end {
    margin-bottom: 21px
}

.work-prosses8 {
    position: relative
}

.asur {
    overflow: hidden
}

@keyframes marqueeAnimation {
    100% {
        transform: translateX(-380px)
    }
}

.profile-expert {
    padding-right: 8px;
    display: flex;
    display: -webkit-flex;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    flex-shrink: 0
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(21, 1fr);
    z-index: 999;
    margin-top: 52px;
    margin-left: 18px;
    margin-bottom: 228px;
    position: relative
}

.cards {
    flex: 0 0 auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgb(0 0 0 / .15);
    overflow: hidden;
    transition: transform 0.3s ease;
    position: absolute;
    cursor: pointer;
    width: 110px
}

.card1.active {
    --e-con-transform-rotateZ: 0deg;
    left: 4%;
    opacity: 1
}

.card2.active {
    --e-con-transform-rotateZ: 0deg;
    left: 9%;
    opacity: 1
}

.card3.active {
    --e-con-transform-rotateZ: 0deg;
    left: 13%;
    opacity: 1
}

.card4.active {
    --e-con-transform-rotateZ: 0deg;
    left: 17%;
    opacity: 1
}

.card5 {
    --e-con-transform-rotateZ: 0deg;
    opacity: 1
}

.card5.active {
    --e-con-transform-rotateZ: 0deg;
    left: 21%;
    opacity: 1
}

.card6.active {
    --e-con-transform-rotateZ: 0deg;
    left: 25%;
    opacity: 1
}

.card7.active {
    --e-con-transform-rotateZ: 0deg;
    left: 29%;
    opacity: 1
}

.card8.active {
    --e-con-transform-rotateZ: 0deg;
    left: 33%;
    opacity: 1
}

.card9.active {
    --e-con-transform-rotateZ: 0deg;
    left: 37%;
    opacity: 1
}

.card10.active {
    --e-con-transform-rotateZ: 0deg;
    left: 41%;
    opacity: 1
}

.card11.active {
    --e-con-transform-rotateZ: 0deg;
    left: 45%;
    opacity: 1
}

.card12.active {
    --e-con-transform-rotateZ: 0deg;
    left: 49%;
    opacity: 1
}

.card13.active {
    --e-con-transform-rotateZ: 0deg;
    left: 53%;
    opacity: 1
}

.card14.active {
    --e-con-transform-rotateZ: 0deg;
    left: 57%;
    opacity: 1
}

.card15.active {
    --e-con-transform-rotateZ: 0deg;
    left: 61%;
    opacity: 1
}

.card16.active {
    --e-con-transform-rotateZ: 0deg;
    left: 65%;
    opacity: 1
}

.card17.active {
    --e-con-transform-rotateZ: 0deg;
    left: 69%;
    opacity: 1
}

.card18.active {
    --e-con-transform-rotateZ: 0deg;
    left: 73%;
    opacity: 1
}

.card19.active {
    --e-con-transform-rotateZ: 0deg;
    left: 77%;
    opacity: 1
}

.card20.active {
    --e-con-transform-rotateZ: 0deg;
    left: 81%;
    opacity: 1
}

.card21.active {
    --e-con-transform-rotateZ: 0deg;
    left: 85%;
    opacity: 1
}

.card22.active {
    --e-con-transform-rotateZ: 0deg;
    left: -72.5%;
    opacity: 1
}

.card4.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card3.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card2.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card1.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card5.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card6.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card7.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card8.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card9.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card10.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card11.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card12.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card13.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card14.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card15.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card16.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card17.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card18.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card19.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card20.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

.card21.-selected {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .9s cubic-bezier(.89, -.72, .65, 1)
}

img.attachment-large.size-large.wp-image-104 {
    width: 110px;
    transition-duration: 0.5s;
    box-shadow: 0 0 30px 0 rgb(0 0 0 / .2);
    vertical-align: middle;
    display: inline-block;
    border: none;
    border-radius: 0
}

.cards.active:hover {
    transform: scale(1.025) translateY(-24px) translateX(-3px);
    transition: transform .5s ease-out, opacity .5s ease-out, left 2s ease-out
}

@keyframes mercuryTypingAnimation {
    0% {
        transform: translateY(0);
        background-color: gray
    }

    28% {
        transform: translateY(-7px);
        background-color: gray
    }

    44% {
        transform: translateY(0);
        background-color: gray
    }
}

.typing .dot:nth-child(1) {
    animation-delay: 200ms;
    margin-left: 7px
}

.typing {
    font-size: 11px;
    color: #b06e20
}

.typing .dot {
    animation: mercuryTypingAnimation 1.8s infinite ease-in-out;
    background-color: #b06e20;
    border-radius: 50%;
    height: 5px;
    margin-right: 4px;
    vertical-align: middle;
    width: 5px;
    display: inline-block
}

.gap-2r {
    gap: 2rem
}

.dots-spinner {
    width: 3.6rem;
    height: 3.4rem;
    position: absolute;
    animation: spin 2s linear infinite;
    top: 60px;
    left: 46%;
    z-index: 9999
}

.opacity {
    opacity: .6
}

.dots-spinner>span {
    display: block;
    --size: 1.2rem;
    height: var(--size);
    width: var(--size);
    background-color: #11819b;
    border-radius: 50%;
    position: absolute;
    animation: pulse 3s ease-out infinite var(--delay), colorChange 4s linear infinite
}

input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #585ea7
}

#theme-options {
    width: 100%
}
#transition-options {
    width: 100%
}
#transition_oui_type-options {
    width: 100%
}
#transition_non_type-options {
    width: 100%
}
#pression-options {
    width: 100%
}
#pression_oui_type-options {
    width: 100%
}
#pression_non_type-options {
    width: 100%
}


#situation-options {
    width: 100%
}

.wait-title {
    color: #5c4224;
    font-size: 25px
}

.w-100 {
    width: 100%
}

.orange {
    color: #b06e20;
    font-size: 11px
}

#soundwave {
    display: flex;
    flex-direction: row;
    height: 15px;
    gap: 2px;
    align-items: center
}

#soundwave div {
    display: block;
    background: #b06e20;
    width: 3px;
    height: 100%;
    border-radius: 35%
}

#soundwave div:first-child,
#soundwave div:nth-child(4) {
    height: 30%
}

#soundwave div:nth-child(3) {
    height: 60%
}

@keyframes waveAnimation {
    0% {
        height: 75%
    }

    25% {
        height: 45%
    }

    50% {
        height: 100%
    }

    75% {
        height: 60%
    }

    100% {
        height: 30%
    }
}

#soundwave div:nth-child(1) {
    animation: waveAnimation 1s infinite
}

#soundwave div:nth-child(2) {
    animation: waveAnimation 1.2s infinite
}

#soundwave div:nth-child(3) {
    animation: waveAnimation 1.4s infinite
}

#soundwave div:nth-child(4) {
    animation: waveAnimation 1.6s infinite
}

.audio-message {
    display: flex;
    align-items: center;
    background-color: #f1f1f1;
    border-radius: 18px;
    padding: 8px 12px;
    max-width: 250px
}

.play-pause-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: 8px;
    color: #000
}

.waveform {
    display: flex;
    align-items: flex-end;
    height: 9px;
    flex-grow: 1;
    margin: 0 8px
}

.wave-bar {
    width: 2px;
    background-color: #666;
    margin: 0 1px;
    transition: height 0.2s ease
}

.business-card {
    overflow: hidden;
    position: relative;
    padding: 35px 40px;
    border-radius: 6px;
    box-shadow: 0 5px 15px -5px rgb(0 0 0 / .4);
    align-items: center;
    background-image: linear-gradient(rgb(191 191 191 / 56%), rgb(65 55 37 / 76%)), url(../img/bg/1.jpg);
    background-position: center;
    background-size: cover;
    width: 80%
}

.gap-9p {
    gap: 25px
}

.top {
    display: grid;
    grid-column: 1 / 3;
    grid-row: 1;
    align-content: start;
    grid-gap: 1vmin;
    animation: inLeft;
    animation-duration: 1s
}

.gap-20 {
    gap: 20px
}

.name {
    font-size: 26px;
    font-weight: 600;
    color: #9d7149;
    line-height: 1
}

.HighlightedExpert_status {
    display: flex;
    color: #6a6a6a;
    font-size: 14px;
    padding: 7px 22px;
    background: #0cc68c;
    border-radius: 20px
}

.gap-2p {
    gap: 4px
}

.PsychicStatus_helperText__eVvlO {
    color: #fff;
    font-weight: 400;
    font-size: 13px
}

.profession {
    font-size: 13px;
    color: #fff;
    font-weight: 400;
    border-radius: 14px;
    padding: 2px 8px;
    border: 1px solid #fff
}

.HighlightedExpert {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px
}

.bottom {
    display: grid;
    grid-column: 1 / 3;
    grid-row: 3;
    grid-gap: 12px
}

.bottom {
    .left {
        font-weight: 700;
        font-size: .9em;
        grid-column: 1;
        animation: inLeft;
        animation-duration: 1s;
        display: flex;
        flex-direction: column;
        gap: 6px
    }
}

.gap-15 {
    gap: 15px
}

.consultations {
    display: flex
}

.gap-8p {
    gap: 8px
}

.btn-white {
    color: #9d7149;
    background: #fff
}

.btn-white:hover {
    color: #fff;
    background-color: #e3846e;
    border-color: #e3846e
}

#terms-options {
    width: 100%;
    z-index: 1;
    border-radius: .375rem;
    display: flex;
    flex-direction: column;
    gap: 0
}

.form-check-label {
    font-weight: 400;
    font-size: 12px;
    display: flex;
    align-items: start
}

.form-check-input {
    height: 1.3em;
    width: 1.3em;
    cursor: pointer;
    margin-right: 10px
}

.dot-1 {
    top: 0;
    left: calc(50% - (var(--size) / 2));
    --delay: 2s
}

.dot-2 {
    bottom: 0;
    left: 0;
    --delay: 1s
}

.dot-3 {
    bottom: 0;
    right: 0;
    --delay: 0s
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes colorChange {
    0% {
        background-color: #e76f51
    }

    33.33% {
        background-color: #e76f51
    }

    66.66% {
        background-color: #e76f51
    }

    100% {
        background-color: #e76f51
    }
}

@keyframes spin {
    100% {
        transform: rotate(360deg)
    }
}

.typing .dot:nth-child(2) {
    animation-delay: 300ms
}

.typing .dot:last-child {
    margin-right: 0
}

.typing .dot:nth-child(3) {
    animation-delay: 400ms
}

.typing-indicator {
    padding: 10px
}

.chat-body::-webkit-scrollbar {
    width: 7px
}

.m-15 {
    height: 270px
}
.w-120{
    width: 120px;
}
.form-check-input:checked {
    background-color: #585ea7 !important;
    border-color: #585ea7 !important
}

.chat-body::-webkit-scrollbar-thumb {
    background: #0b404d42
}

.form-control::placeholder {
    font-size: 14px;
    color: #bebebe
}

.main-heading {
    padding: 0 0 61px;
    display: flex;
    flex-direction: column;
    gap: 70px
}

.main-heading0 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative
}

.rightSide::before {
    content: "";
    position: absolute;
    width: 80%;
    height: 68%;
    background-image: url(../img/bg/bg4.png);
    background-repeat: no-repeat;
    opacity: .4;
    z-index: -1;
    animation-name: animate3;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    background-size: 32%;
    top: 19%;
    left: 60%
}

.chat-footer {
    background-color: #ebe6f0;
    border-top: 1px solid #ada0bb;
    padding: 11px 16px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-bottom-left-radius: 28px
}

a.about10-icon-box {
    border: 1px solid #E76F51;
    background-color: #E76F51
}

a.about10-icon-box .text p {
    color: #fff
}

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

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

.about3-counters {
    display: flex;
    gap: 0;
    margin-top: 35px
}

.subtitle-section {
    color: #e76f51
}

.about4-counters {
    display: flex;
    animation: scroll 25s linear infinite;
    gap: 0;
    margin-top: 0
}

footer.vl-footer-area3 {
    background: #f6f8fa
}

p.text-center.black {
    font-size: 14px;
    padding-top: 14px
}

.service4 {
    position: relative
}

.service4::before {
    content: "";
    position: absolute;
    background-image: url(https://i.pinimg.com/736x/27/a0/82/27a082fff963379450cc7558356cf948.jpg);
    width: 100%;
    height: 100%;
    opacity: .15;
    z-index: 10
}

html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate {
    z-index: 11
}

span.sub-title.aos-init.aos-animate {
    color: var(--vtc-text-title1);
    text-transform: uppercase
}

[data-aos][data-aos][data-aos-delay="200"],
body[data-aos-delay="200"] [data-aos] {
    transition-delay: 0s
}

[data-aos][data-aos][data-aos-delay="200"].aos-animate,
body[data-aos-delay="200"] [data-aos].aos-animate {
    transition-delay: .2s
}

[data-aos][data-aos][data-aos-delay="300"],
body[data-aos-delay="300"] [data-aos] {
    transition-delay: 0s
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s
}

[data-aos][data-aos][data-aos-delay="400"],
body[data-aos-delay="400"] [data-aos] {
    transition-delay: 0s
}

[data-aos][data-aos][data-aos-duration="800"],
body[data-aos-duration="800"] [data-aos] {
    transition-duration: .8s
}

[data-aos][data-aos][data-aos-duration="900"],
body[data-aos-duration="900"] [data-aos] {
    transition-duration: .9s
}

[data-aos][data-aos][data-aos-duration="1000"],
body[data-aos-duration="1000"] [data-aos] {
    transition-duration: 1s
}

[data-aos][data-aos][data-aos-duration="1100"],
body[data-aos-duration="1100"] [data-aos] {
    transition-duration: 1.1s
}

[data-aos][data-aos][data-aos-duration="1200"],
body[data-aos-duration="1200"] [data-aos] {
    transition-duration: 1.2s
}

[data-aos] {
    pointer-events: none
}

[data-aos].aos-animate {
    pointer-events: auto
}

[data-aos][data-aos][data-aos-easing=ease-in-out],
body[data-aos-easing=ease-in-out] [data-aos] {
    transition-timing-function: ease-in-out
}

@media screen {
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }

    html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

    html:not(.no-js) [data-aos=fade-up] {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0)
    }

    html:not(.no-js) [data-aos=fade-down] {
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0)
    }

    html:not(.no-js) [data-aos=fade-right] {
        -webkit-transform: translate3d(-100px, 0, 0);
        transform: translate3d(-100px, 0, 0)
    }

    html:not(.no-js) [data-aos=fade-left] {
        -webkit-transform: translate3d(100px, 0, 0);
        transform: translate3d(100px, 0, 0)
    }

    html:not(.no-js) [data-aos=fade-up-right] {
        -webkit-transform: translate3d(-100px, 100px, 0);
        transform: translate3d(-100px, 100px, 0)
    }

    html:not(.no-js) [data-aos=fade-up-left] {
        -webkit-transform: translate3d(100px, 100px, 0);
        transform: translate3d(100px, 100px, 0)
    }

    html:not(.no-js) [data-aos=fade-down-right] {
        -webkit-transform: translate3d(-100px, -100px, 0);
        transform: translate3d(-100px, -100px, 0)
    }

    html:not(.no-js) [data-aos=fade-down-left] {
        -webkit-transform: translate3d(100px, -100px, 0);
        transform: translate3d(100px, -100px, 0)
    }

    html:not(.no-js) [data-aos^=zoom][data-aos^=zoom] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }

    html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate {
        opacity: 1;
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1)
    }

    html:not(.no-js) [data-aos=zoom-in] {
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }

    html:not(.no-js) [data-aos=zoom-in-up] {
        -webkit-transform: translate3d(0, 100px, 0) scale(.6);
        transform: translate3d(0, 100px, 0) scale(.6)
    }

    html:not(.no-js) [data-aos=zoom-in-down] {
        -webkit-transform: translate3d(0, -100px, 0) scale(.6);
        transform: translate3d(0, -100px, 0) scale(.6)
    }

    html:not(.no-js) [data-aos=zoom-in-right] {
        -webkit-transform: translate3d(-100px, 0, 0) scale(.6);
        transform: translate3d(-100px, 0, 0) scale(.6)
    }

    html:not(.no-js) [data-aos=zoom-in-left] {
        -webkit-transform: translate3d(100px, 0, 0) scale(.6);
        transform: translate3d(100px, 0, 0) scale(.6)
    }

    html:not(.no-js) [data-aos=zoom-out] {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    html:not(.no-js) [data-aos=zoom-out-up] {
        -webkit-transform: translate3d(0, 100px, 0) scale(1.2);
        transform: translate3d(0, 100px, 0) scale(1.2)
    }

    html:not(.no-js) [data-aos=zoom-out-down] {
        -webkit-transform: translate3d(0, -100px, 0) scale(1.2);
        transform: translate3d(0, -100px, 0) scale(1.2)
    }

    html:not(.no-js) [data-aos=zoom-out-right] {
        -webkit-transform: translate3d(-100px, 0, 0) scale(1.2);
        transform: translate3d(-100px, 0, 0) scale(1.2)
    }

    html:not(.no-js) [data-aos=zoom-out-left] {
        -webkit-transform: translate3d(100px, 0, 0) scale(1.2);
        transform: translate3d(100px, 0, 0) scale(1.2)
    }

    html:not(.no-js) [data-aos^=slide][data-aos^=slide] {
        transition-property: -webkit-transform;
        transition-property: transform;
        transition-property: transform, -webkit-transform;
        visibility: hidden
    }

    html:not(.no-js) [data-aos^=slide][data-aos^=slide].aos-animate {
        visibility: visible;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    html:not(.no-js) [data-aos=slide-up] {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    html:not(.no-js) [data-aos=slide-down] {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    html:not(.no-js) [data-aos=slide-right] {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    html:not(.no-js) [data-aos=slide-left] {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    html:not(.no-js) [data-aos^=flip][data-aos^=flip] {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transition-property: -webkit-transform;
        transition-property: transform;
        transition-property: transform, -webkit-transform
    }

    html:not(.no-js) [data-aos=flip-left] {
        -webkit-transform: perspective(2500px) rotateY(-100deg);
        transform: perspective(2500px) rotateY(-100deg)
    }

    html:not(.no-js) [data-aos=flip-left].aos-animate {
        -webkit-transform: perspective(2500px) rotateY(0);
        transform: perspective(2500px) rotateY(0)
    }

    html:not(.no-js) [data-aos=flip-right] {
        -webkit-transform: perspective(2500px) rotateY(100deg);
        transform: perspective(2500px) rotateY(100deg)
    }

    html:not(.no-js) [data-aos=flip-right].aos-animate {
        -webkit-transform: perspective(2500px) rotateY(0);
        transform: perspective(2500px) rotateY(0)
    }

    html:not(.no-js) [data-aos=flip-up] {
        -webkit-transform: perspective(2500px) rotateX(-100deg);
        transform: perspective(2500px) rotateX(-100deg)
    }

    html:not(.no-js) [data-aos=flip-up].aos-animate {
        -webkit-transform: perspective(2500px) rotateX(0);
        transform: perspective(2500px) rotateX(0)
    }

    html:not(.no-js) [data-aos=flip-down] {
        -webkit-transform: perspective(2500px) rotateX(100deg);
        transform: perspective(2500px) rotateX(100deg)
    }

    html:not(.no-js) [data-aos=flip-down].aos-animate {
        -webkit-transform: perspective(2500px) rotateX(0);
        transform: perspective(2500px) rotateX(0)
    }
}

@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(../fonts/fa-solid-900.woff2) format("woff2")
}

.fas,
.fa-solid {
    font-weight: 900
}

:root,
:host {
    --fa-style-family-classic: 'Font Awesome 6 Pro';
    --fa-font-thin: normal 100 1em/1 'Font Awesome 6 Pro'
}

@font-face {
    font-family: 'FontAwesome';
    font-display: block;
    src: url(../fonts/fa-solid-900.woff2) format("woff2")
}

@font-face {
    font-family: 'FontAwesome';
    font-display: block;
    src: url(../fonts/fa-brands-400.woff2) format("woff2")
}

@font-face {
    font-family: 'FontAwesome';
    font-display: block;
    src: url(../fonts/fa-regular-400.woff2) format("woff2");
    unicode-range: U+F003, U+F006, U+F014, U+F016-F017, U+F01A-F01B, U+F01D, U+F022, U+F03E, U+F044, U+F046, U+F05C-F05D, U+F06E, U+F070, U+F087-F088, U+F08A, U+F094, U+F096-F097, U+F09D, U+F0A0, U+F0A2, U+F0A4-F0A7, U+F0C5, U+F0C7, U+F0E5-F0E6, U+F0EB, U+F0F6-F0F8, U+F10C, U+F114-F115, U+F118-F11A, U+F11C-F11D, U+F133, U+F147, U+F14E, U+F150-F152, U+F185-F186, U+F18E, U+F190-F192, U+F196, U+F1C1-F1C9, U+F1D9, U+F1DB, U+F1E3, U+F1EA, U+F1F7, U+F1F9, U+F20A, U+F247-F248, U+F24A, U+F24D, U+F255-F25B, U+F25D, U+F271-F274, U+F278, U+F27B, U+F28C, U+F28E, U+F29C, U+F2B5, U+F2B7, U+F2BA, U+F2BC, U+F2BE, U+F2C0-F2C1, U+F2C3, U+F2D0, U+F2D2, U+F2D4, U+F2DC
}

@font-face {
    font-family: 'FontAwesome';
    font-display: block;
    src: url(../fonts/fa-v4compatibility.woff2) format("woff2");
    unicode-range: U+F041, U+F047, U+F065-F066, U+F07D-F07E, U+F080, U+F08B, U+F08E, U+F090, U+F09A, U+F0AC, U+F0AE, U+F0B2, U+F0D0, U+F0D6, U+F0E4, U+F0EC, U+F10A-F10B, U+F123, U+F13E, U+F148-F149, U+F14C, U+F156, U+F15E, U+F160-F161, U+F163, U+F175-F178, U+F195, U+F1F8, U+F219, U+F27A
}

.gap-10 {
    gap: 10px
}

.about3-images .image2 {
    bottom: 37%
}

.about3-images .tes2-single-slider {
    width: 363px;
    position: absolute;
    top: 18rem;
    background: #fff
}

.time {
    padding-left: 29px;
    font-weight: 700
}

.theme-btn6 {
    background-color: #db6a4e
}

.button {
    -webkit-font-smoothing: antialiased;
    background-color: #db6a4e;
    border: none;
    color: #fff;
    display: inline-block;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #fff;
    transition: all 0.1s ease-out
}

.button:hover {
    background-color: #db6a4e;
    color: #fff
}

.button--bubble {
    position: relative;
    z-index: 2;
    color: #fff;
    background: none
}

.button--bubble:hover {
    background: none
}

.button--bubble:hover+.button--bubble__effect-container .circle {
    background: #db6a4e
}

.button--bubble:hover+.button--bubble__effect-container .button {
    background: #db6a4e
}

.button--bubble:active+.button--bubble__effect-container {
    -webkit-transform: scale(.95);
    transform: scale(.95)
}

.button--bubble__container {
    position: relative;
    display: inline-block
}

.button--bubble__container .effect-button {
    position: absolute;
    width: 50%;
    height: 25%;
    top: 50%;
    left: 25%;
    z-index: 1;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background: #db6a4e;
    transition: #db6a4e 0.1s ease-out;
    border-radius: 11px
}

.button--bubble__effect-container {
    position: absolute;
    display: block;
    width: 200%;
    height: 400%;
    top: -150%;
    left: -50%;
    -webkit-filter: url("#goo");
    filter: url("#goo");
    transition: all 0.1s ease-out;
    pointer-events: none
}

.button--bubble__effect-container .circle {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 15px;
    background: #db6a4e;
    transition: #db6a4e 0.1s ease-out
}

.button--bubble__effect-container .circle.top-left {
    top: 40%;
    left: 27%
}

.button--bubble__effect-container .circle.bottom-right {
    bottom: 40%;
    right: 27%
}

.goo {
    position: absolute;
    visibility: hidden;
    width: 1px;
    height: 1px
}

.button--bubble__container {
    top: 50%;
    margin-top: -25px;
    background: #db6a4e;
    border-radius: 11px
}

@-webkit-keyframes hue-rotate {
    from {
        -webkit-filter: hue-rotate(0);
        -moz-filter: hue-rotate(0);
        -ms-filter: hue-rotate(0);
        filter: hue-rotate(0)
    }

    to {
        -webkit-filter: hue-rotate(360deg);
        -moz-filter: hue-rotate(360deg);
        -ms-filter: hue-rotate(360deg);
        filter: hue-rotate(360deg)
    }
}

@keyframes hue-rotate {
    from {
        -webkit-filter: hue-rotate(0);
        -moz-filter: hue-rotate(0);
        -ms-filter: hue-rotate(0);
        filter: hue-rotate(0)
    }

    to {
        -webkit-filter: hue-rotate(360deg);
        -moz-filter: hue-rotate(360deg);
        -ms-filter: hue-rotate(360deg);
        filter: hue-rotate(360deg)
    }
}

.from-them {
    background: #d0e8d7;
    color: #4e6d57;
    position: relative;
    padding: 6px 16px;
    border-radius: 10px;
    margin-left: 10px;
    margin-top: 20px
}

.from-them:before {
    content: "";
    position: absolute;
    bottom: 23px;
    height: 20px;
    left: -5px;
    border-left: 20px solid #d0e8d7;
    border-bottom-right-radius: 16px 14px;
    transform: rotate(90deg)
}

.from-them:after {
    content: "";
    position: absolute;
    bottom: 36px;
    height: 20px;
    left: -7px;
    border-left: 20px solid #fff0;
    left: -2px;
    width: 0;
    background: #eeeae6;
    border-bottom-right-radius: 10px;
    transform: translate(-24px, -2px);
    transform: rotate(90deg)
}

a.button.button--bubble {
    padding: 20px 54px;
    border-radius: 11px;
    background: #db6a4e;
    font-size: 18PX
}

a.button.button--bubble:hover {
    background: #e76f51;
    color: #fff
}

.input-container {
    position: relative;
    height: 49px;
    margin: .5rem
}

.radio-button {
    opacity: 0;
    position: absolute !important;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 100% !important;
    margin: 0;
    cursor: pointer
}

.radio-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cdc2da;
    border-radius: 42px;
    padding: 12px;
    transition: transform 300ms ease;
    gap: 10px;
    background: #ded7e6
}

label.radio-tile-label {
    font-size: 17px;
    color: #585ea7;
    color: #6d5587
}

.input-container .radio-button:checked+.radio-tile {
    background-color: #585ea7;
    border: 2px solid #585ea7;
    background-color: #6d5587;
    border: 2px solid #6d5587;
    color: #fff
}

.input-container .radio-button:checked+.radio-tile .radio-tile-label {
    color: #fff
}

.input-container .radio-button:checked+.radio-tile .icon svg path {
    fill: white !important
}

.input-container .radio-button:checked+.radio-tile .icon svg {
    fill: white !important
}

    .modal-backdrop1 {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 100vw;
    height: 100vh;
    background-color: #2727272e;
}.spinner-container {
    position: fixed;
    z-index: 99999;
    top: 50%;
    left: 50%;
}.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -.125em;
    border: .25em solid currentColor;
    border-right-color: #fff0;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite spinner-border;
    animation: .75s linear infinite spinner-border;
}
@keyframes spinner-border{
100% {
    transform: rotate(360deg);
}
}

.available{
      --tw-bg-opacity: 1;
    background-color: rgb(72 205 160 / var(--tw-bg-opacity))!important;
}
.available::before{
      --tw-bg-opacity: 1;
    background-color: rgb(121 218 185 / var(--tw-bg-opacity));
}

.orange::before{
  --tw-bg-opacity: 1;
    background-color:rgb(230 188 19 / var(--tw-bg-opacity))
}
.gray{
      background-color: #a7a7a7;
}
.gray::before{
      --tw-bg-opacity: 1;
    background-color: #a7a7a7;
}
.gap-8p{
    gap:8px
}.my-6 {
        margin-top: 6rem !important;
    margin-bottom: 6rem !important;
}
#couple-options{
    width: 100%;
}
.shield-badge-container {
     position: relative;
    width: 114px;
}

.shield-svg {
    width: 100%;
    transform: scale(1);
}

.shield-border {
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  animation: drawShield 3s ease-in-out infinite;
}

@keyframes drawShield {
  0% {
    stroke-dashoffset: 650;
  }
  80% {
    stroke-dashoffset: 0;
  }
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 650;
  }
}

/* Adjusted content inside shield */
.shield-badge-content {
 position: absolute;
    top: 13px;
    left: 16px;
    padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Segoe UI', sans-serif;
  color: #2e7d32;
  text-align: center;
  pointer-events: none;
  line-height: 1.4;
  max-width: 160px;
  margin: 0 auto;
}

.secure-icon {
  font-size: 22px;
  margin-bottom: 4px;
}

.secure-top {
  font-size: 12px;
  font-weight: 600;
}

.secure-sub {
  font-size: 10px;
  opacity: 0.7;
}
[hover-tooltip1] {
    &:hover {
                &::before {
            content: attr(hover-tooltip1);
            font-size: 12.5px;
            width: 401px;
            text-align: center;
            position: absolute;
            display: inline-block;
            text-transform: none;
            top: 106px;
            animation: fade-in 300ms ease;
            background: #5a5959;
            border-radius: 4px;
            padding: 4px 10px;
            color: #fff;
            z-index: 3;
            right: -146px;
        }
                &::after {
           content: '';
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border: 1px solid #000;
            border-color: #5a5959 #fff0 #fff0 #fff0;
            border-width: 4px 6px 0;
            animation: fade-in 300ms ease;
            z-index: 1;
            transform: rotate(180deg);
            top: 102px;
            left: 53px;
        }
    }
}

.badge-icon, 
.badge-text{
  padding:1.5rem;
  float:left;
  -webkit-box-flex:1;
  flex:1
}

.badge{
    display: flex;
    border-radius: 5px;
    background-color: #214fe0;
}

.badge-icon{
   background: url(../images/European_stars.svg) #214fe0 no-repeat center center;
    background-size: 85%;
    max-width: calc(var(--badge-size) / 5);
}

.badge-text{
  font: normal small-caps normal 16px/1.5 Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  line-height: 1;
  text-align: left;
}

.badge[data-color=""] .badge-text,
.badge[data-color="default"] .badge-text{
    color: #f4f4f4;
    background-color: #214fe0;
    padding: 3px 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.badge-text span b {
        color: white;
    font-size: 16px;
}
.badge-text span {
        color: white;
    font-size: 11px;
}
.badge[data-color="light"] .badge-text{
    color: var(--color-dark);
    background-color: var(--color-light);
}
.badge[data-color="dark"] .badge-text{
    color: var(--color-light);
    background-color: var(--color-dark);
}


/*The body of the lock*/
.lock {
     display: block;
    width: 22px;
    height: 16px;
    top: 64%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    border-radius: 5px;
    position: relative;
    transition: all 0.1s ease-in-out;
}
/*The keyhole*/
.lock:after {
     content: "";
    display: block;
    background: #fff;
    width: 2px;
    height: calc(2.5px * 3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.1s ease-in-out;
}
/*The arm of the lock*/
.lock:before {
 content: "";
    display: block;
    width: calc(27px / 2);
    height: calc(30px / 3);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 2.5px solid #fff;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom: 0;
}
.comment{
    font-size: 12px;
    background: #f7f7f7;
    padding: 7px;
    border-radius: 6px;
}
.gap-10p{
    gap: 10px;
}

.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:py-\[60px\] {
    padding-top: 90px;
}
.gap-2r {
    gap: 2rem;
}
@media (max-width: 991px) {
   
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0px, 1fr));
    }
}
.section-title {
    color: rgb(99, 55, 44);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0px 0px 15px -4px;
    letter-spacing: 2px;
    font-size: 26px !important;
}.text-center {
    text-align: center !important;
}.section-line {
    width: 80px;
    height: 2px;
    margin: 0px auto;
    background: rgb(17, 17, 17);
}.grid {
    display: grid;
}.pricing-block {
    box-shadow: rgb(223, 223, 223) 0px 0px 14px 0px;
    background: rgb(255, 255, 255);
    padding: 20px;
    border-radius: 0px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}span.u-icon.u-icon-circle.u-palette-5-light-2.u-spacing-18.u-icon-1 {
    height: 60px;
    width: 60px;
    padding: 14px;
    background-color: rgb(245, 208, 140);
    border-radius: 50%;
    color: rgb(85, 92, 102) !important;
}h4.u-text.u-text-2 {
    font-size: 1.5rem;
    text-transform: none;
    margin: 0px;
    color: rgb(0, 0, 0);
    padding-top: 15px;
    padding-bottom: 15px;
}.black {
    color: black !important;
}.gap-1r {
    gap: 1rem;
}.gap-0-5r {
    gap: 0.5rem;
}.font-14 {
    font-size: 14px !important;
}.mb-0 {
    margin-bottom: 0px !important;
}

.w-33{
    width: 33px;
}
.pb-50{
    padding-bottom: 50px;
     padding-top: 50px;
}



.faq-area .video {
    position: relative;
    z-index: 1;
}

.faq-area .video a {
    left: 50%;
    margin-top: -22px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.video-play-button:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    background: var(--white) repeat scroll 0 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: pulse-border 1500ms ease-out infinite;
    animation: pulse-border 1500ms ease-out infinite;
}

.video-play-button i {
    display: block;
    position: relative;
    z-index: 3;
}

.faq-area .video a i {
    color: var(--color-primary);
    font-size: 30px;
    left: 50%;
    padding-left: 5px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.fa-play:before {
    content: "\f04b";
}

i::before {
    line-height: inherit !important;
}

.video-play-button:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    background: var(--white) repeat scroll 0 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    transition: all 200ms;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
}

.acd-items.acd-arrow {
    background: white;
    box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 33%);
    margin-left: -25%;
    position: relative;
    z-index: 1;
    margin-top: 80px;
}

.acd-items.acd-arrow .accordion-item {
    border: none;
}

.accordion-item:first-of-type {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.accordion-header {
    margin-bottom: 0;
}

.acd-items.acd-arrow .accordion-header .accordion-button {
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid #e7e7e7!important;
    color: #04000b;
    padding: 25px 40px;
    font-size: 20px;
    position: relative;
    align-items: center;
    width: 100%;
    text-align: left;
    background-color: #fff;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;
}

.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}

.acd-items.acd-arrow .accordion-header .accordion-button span {
    display: inline-block;
    height: 40px;
    width: 40px;
    min-width: 40px;
    line-height: 40px;
    background: black;
    text-align: center;
    border-radius: 50%;
    color: white;
    margin-right: 15px;
}

.acd-items.acd-arrow .accordion-item .accordion-body {
    padding: 40px;
    padding-bottom: 0;
}
.skrollable {
    background-attachment: fixed;
    background-position: 50% 0, 50% -8.01802vh;
    background-image: linear-gradient(rgb(0 0 0 / .4), rgb(0 0 0 / .4)), url(../images/cta.webp);
}.overlay-dark1 {
    background-color: rgb(0 0 0 / .5);
}.lg\:py-\[60px\] {
    padding-top: 60px;
    padding-bottom: 60px;
}.md\:text-center.text {
    text-align: center;
}.w-70 {
    width: 71%;
}.as_font17 {
    font-size: 17px;
    color: #fff;
    z-index: 2;
    text-align: justify;
}.btn-primary {
    background-color: #ee5f38;
    padding: 10px 28px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: #ee5f38;
    border-radius: 50px;
    margin: 0;
}.white {
    color: white !important;
}
.btn_info{    
    text-decoration: underline;
}