.promo-banner {
    width: 100vw;
    height: var(--bannerH);
    background-color: var(--Primary_10);
    position: relative
}

.bubbles {
    position: relative;
    display: flex;
    justify-content: center;
}

.bubbles span {
    position: relative;
    min-width: 30px;
    height: 30px;
    background: var(--Secondary_6);
    box-shadow: 0 0 0 10px rgba(79, 195, 220, .2666666667), 0 0 50px var(--Secondary_6), 0 0 100px var(--Secondary_6);
    margin: 0 4px;
    border-radius: 50%;
    animation-name: bubblesup;
    animation-iteration-count: infinite;
    animation-duration: 15s;
    animation-duration: calc(75s/var(--i));
    animation-timing-function: linear;
}

html {
    height: 100%;
}

@keyframes bubblesup {
    0% {
        transform: scale(0);
        -webkit-transform: scale(0);
        top: 40px
    }

    95% {
        transform: scale(1);
        -webkit-transform: scale(1);
        top: -80px
    }

    to {
        transform: scale(0);
        -webkit-transform: scale(0);
        top: -80px
    }
}

.bubbles span:nth-child(2n) {
    background: #ff7d00;
    box-shadow: 0 0 0 10px rgb(255 45 117 / 27%), 0 0 50px #ff7d00, 0 0 100px #ff7d00;
}

.promo-banner p {
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    padding: 13px 0;
    font-size: 18px;
}

.text-color-grey1 {
    color: var(--Grey_1) !important;
}

.promo-banner a {
    text-decoration: underline !important;
    color: #fff;
}

.v-application a {
    color: #fff;
}

.v-application a {
    cursor: pointer;
}

a {
    background-color: transparent;
}

.p1-med,
.p1-reg {
    font-size: 16px;
    line-height: 1.6;
    color: var(--Grey_10);
    margin: 0 !important;
}

.p1-reg {
    font-weight: 400;
    font-family: Roboto, sans-serif;
}

.site-header .v-toolbar__content {
    padding: 0;
}

.v-toolbar__content,
.v-toolbar__extension {
    align-items: center;
    display: flex;
    position: relative;
    z-index: 0;
}

header {
    margin-top: 0px;
    transform: translateY(0px);
    left: 0px;
    right: 0px;
    position: absolute;
    top: 54px;
    height: 116px;
    background-color: transparent;
}

.toolbar {
    align-items: center;
    /* display: flex; */
    /* position: relative; */
    z-index: 0;

}

.container {
    /* width: 100%; */
    max-width: 1152px;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background-color: transparent;
    padding: 0 24px;
}

@media screen and (max-width: 767px) {
  
    .pa-0 .h1 {
        font-size: 32px !important;
    }

    .promo-banner>p {
        font-size: 14px;
    }

    .toolbar .title {
        visibility: hidden;
    }

    .toolbar .bottom .bt_right {
        visibility: hidden;
    }

    .container {
        max-width: 720px !important;
    }

    .container .product,
    .success,
    .res,
    .about {
        display: none;
    }

    .container .pa-0 .h4,
    .h3 {
        font-size: 16px !important;
    }

    .pa-1 .btn_1,
    .btn_2 {
        /* padding: 0.8rem 1.5rem!important; */
        border-radius: 4px !important;
        font-family: inherit;
        font-size: 16px !important;
        font-weight: 500 !important;
        text-transform: capitalize !important;
        height: 48px !important;
        line-height: 1 !important;
        padding: var(--padding-l);
    }

    .pa-1 {
        margin: 32px 0 40px !important;
    }

    .home-top-logo .top_logo {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        display: flex;
        flex-direction: column;
    }

    /* .home-top-logo .top_logo>img{
        flex-grow: 1;
    } */
    .home-top-logo .top_logo>.p1-reg {
        width: 100%;
        /* flex-grow: 4; */
        text-align: center;
        margin-bottom: 8px !important;
    }

    .home-solution-tabs {
        padding-top: 60px !important;
        padding-bottom: 0px !important ;
    }

    .home-solution-tabs .container .title {
        font-size: 20px;
        margin-bottom: 24px !important;
    }

    .home-solution-tabs .v-tabs {
        width: 400px !important;
    }
   .container .top_logo img{
    width: 40% !important;
    height: 52px !important;
   }
    .v-window {
        display: flex;
        flex-direction: column;
        padding-bottom: 60px !important;
    }

    .v-window .txt-order {
        width: auto !important;
        padding: 0 12px !important;
        margin-bottom: 24px !important;
    }

    .v-window .txt-order p {
        margin-block-start: 0em !important;
        margin-block-end: 0em !important;
    }

    .try-yoov {
        padding: 60px 0 66px !important;
    }

    .try-yoov .txt {
        font-size: 24px !important;
    }

    .story .say_story:nth-child(2) {
        display: none;
    }

    .say_story img {
        width: 140px !important;
        height: auto !important;
    }

    .say_story .box-slide {
        height: 100% !important;
    }

    .home-compontent .content {
        display: flex;
        flex-direction: column !important;
    }

    .content {
        margin-bottom: 80px !important;
    }

    .content .content_img {
        width: 303px !important;
    }

    .content>.content_text {
        margin-bottom: 0 !important;
        padding: 0 12px !important;

    }

    .content .content_img>img {
        width: 100%;
        height: auto;
    }

    .client {
        background-image: url('/img/Clients_partners_mobile.e92f2f2f.png') !important;
        width: 316px !important;
        height: 440px !important;
    }

    .row.awards {
        /* max-width: 720px !important; */
        display: flex;
        flex-direction: column;
        height: auto !important;
        padding: 16px;
        text-align: center;
        margin: 0 auto -226px !important;
    }

    .row.awards img {
        width: 70% !important;
        height: auto !important;
        margin: 18px 0 !important;
    }

    .last_content {
        padding: 260px 0 60px !important;
    }
    
    .postion-a{
         width: 100%;
        /* background-color: #000; */
        height: 235px !important;
        position: relative;
        /* overflow: hidden; */
    }
    .sols-box{
        width: 2500px !important;
        position: absolute;
    }
    .sols-box .box-item:nth-child(3n) {
        margin: 0 24px 24px 0 !important;
    }
  
    
    .last_content .last-title{
         font-size: 24px !important;
    }
   .custom-footer .footer_content{
    display: flex;
    flex-direction: column;
   }
   .footer_bottom{
    display: flex;
    flex-direction: column;
    font-size: 12px;
   }
    .footer_bottom>div>span{
        display: block;
        padding: 0 4px;
        height: 24px;
        text-align: center;
    }
    .footer_bottom>div>span:first-child{
       margin-top: 16px;
    }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
    header .toolbar .container{
        max-width: 720px !important;
    }
    /* .pa-0 .h1 {
        font-size: 32px !important;
    } */

    .promo-banner>p {
        font-size: 14px;
    }

    .toolbar .title {
        visibility: hidden;
    }

    .toolbar .bottom .bt_right {
        /* visibility: hidden; */
    }

    .container {
        max-width: 720px !important;
    }

    .container .product,
    .success,
    .res,
    .about {
        display: none;
    }

    /* .container .pa-0 .h4,
    .h3 {
        font-size: 16px !important;
    } */

    .pa-1 .btn_1,
    .btn_2 {
        /* padding: 0.8rem 1.5rem!important; */
        /* border-radius: 4px !important;
        font-family: inherit;
        font-size: 16px !important;
        font-weight: 500 !important;
        text-transform: capitalize !important;
        height: 48px !important;
        line-height: 1 !important;
        padding: var(--padding-l); */
    }

    .pa-1 {
        margin: 32px 0 40px !important;
    }

    .home-top-logo .top_logo {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        display: flex;
        flex-direction: column;
    }

    /* .home-top-logo .top_logo>img{
        flex-grow: 1;
    } */
    .home-top-logo .top_logo>.p1-reg {
        width: 100%;
        /* flex-grow: 4; */
        text-align: center;
        margin-bottom: 8px !important;
    }

    .home-solution-tabs{
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }

    .home-solution-tabs .container .title {
        /* font-size: 20px;
        margin-bottom: 24px !important; */
    }

    .home-solution-tabs .v-tabs {
        width: 100% !important;
    }
   .container .top_logo img{
    width: 40% !important;
    height: 52px !important;
   }
    .v-window {
        display: flex;
        flex-direction: column;
        /* padding-bottom: 60px !important; */
    }

    .v-window .txt-order {
        width: auto !important;
        padding: 0 12px !important;
        margin-bottom: 24px !important;
    }

    .v-window .txt-order p {
        margin-block-start: 0em !important;
        margin-block-end: 0em !important;
    }

    .try-yoov {
        padding: 60px 0 66px !important;
    }

    .try-yoov .txt {
        /* font-size: 24px !important; */
    }

    .story .say_story:nth-child(2) {
        display: none;
    }

    .say_story img {
        width: 140px !important;
        height: auto !important;
    }
    .story .say_story{
        width: 100% !important;
    }

    .say_story .box-slide {
        height: 100% !important;
    }

    .home-compontent .content {
        display: flex;
        flex-direction: column !important;
    }

    .content {
        margin-bottom: 80px !important;
    }

    .content .content_img {
        width: 303px !important;
    }

    .content>.content_text {
        margin-bottom: 0 !important;
        padding: 0 12px !important;

    }
     .content .content_img{
        display: flex;
        justify-content: center;
        align-items: center;
     }
    .content .content_img>img {
        width: 632px;
        height: auto;
    }

    .client {
            width: 665px !important;
            height: 212px !important;
    }

     .row.awards {
        max-width: 720px !important;
        display: flex;
        height: auto !important;
        padding: 16px;
        text-align: center;
        margin: 0 auto -226px !important;
       
    }

    .row.awards img {
        width: 70% !important;
        height: auto !important;
        margin: 18px 0 !important;
    }

    .last_content {
        padding: 260px 0 60px !important;
    }
    .sols-box .box-item{
     margin: 0 12px 24px 0 !important;
        
    }
    .sols-box .box-item:nth-child(3n) {
        margin: 0 12px 24px 0 !important;
    }
    
    .last_content .last-title{
         font-size: 24px !important;
    }
   .custom-footer .footer_content{
    display: flex;
    flex-direction: column;
   }
   .footer_bottom{
    display: flex;
    flex-direction: column;
    font-size: 12px;
   }
    .footer_bottom>div>span{
        display: block;
        padding: 0 4px;
        height: 24px;
        text-align: center;
    }
    .footer_bottom>div>span:first-child{
       margin-top: 16px;
    }
}
.container .top {
    display: flex;
    justify-content: flex-end;
    height: 44px;
    padding-top: 10px;
}

.last_content .last-title {
    text-align: center;
    margin-bottom: 24px !important;
    line-height: 1.2;
    font-weight: 600;
    color: var(--Grey_10);
    font-size: 32px;
}

.container .top .title {
    font-size: 12px;
    color: #fff;
}

.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;


    font-size: 16px;

}

.bottom .bt_left {
    display: flex;
    justify-content: center;
    align-items: center;


}

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

.bottom .bt_right .login {
    padding: 0 28px;
    color: #fff;
}

.bottom .bt_right .call {
    width: 104px;
    height: 48px;
    background-color: #f2f3f5;
    color: #000;
    text-align: center;
    line-height: 48px;
    border-radius: 6px;
}

.bottom .bt_left .logo {
    width: 93px;
    height: 50px;
    margin-right: 9px;
}

.bottom .bt_left .product,
.success,
.res,
.about {
    padding: 16px 24px;
    box-sizing: border-box;
    color: #fff;
    font-weight: 500;
    font-family: Roboto, sans-serif;
}


.v-application .text-center {
    text-align: center !important;
}

.v-application .white--text {
    color: #fff !important;
    caret-color: #fff !important;
}

.home {
    width: 100%;
    height: auto;
}

.hero-banne {
    background: linear-gradient(180deg, #294460, #294561 6.67%, #2b4864 13.33%, #2d4e69 20%, #315771 26.67%, #35617a 33.33%, #3b6e85 40%, #407c92 46.67%, #478a9e 53.33%, #4c98ab 60%, #52a5b6 66.67%, #56afbf 73.33%, #5ab8c7 80%, #5cbecc 86.67%, #5ec1cf 93.33%, #5ec2d0);
    padding-top: 130px;
    overflow: hidden;
    height: auto;
}


.pa-0 .h1,
.h4 {
    color: #fff;
    text-align: center;
    margin-bottom: 16px;
}

.pa-0 .h1 {
    text-align: center;
    font-size: 60px;
}

.pa-0 .h4 {
    text-align: center;
    font-size: 32px;
}

.pa-0 .h3 {
    text-align: center;
    color: #fff;
    font-size: 24px;
}

.h3 .manage {
    margin: 15px;
    color: var(--Secondary_3) !important;
}

.pa-1 {
    height: 56px;
    margin: 40px 0 60px;
    text-align: center;
}

.pa-1 .btn_1,
.btn_2 {
    margin-right: 16px;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
    padding: var(--padding-xl);
    border-radius: 4px;
    display: inline-block;
    color: #fff;
    border: none;
}

.pa-1 .btn_1 {
    background-color: var(--Secondary_6);
}

.pa-1 .btn_2 {
    background-color: transparent;
    border: 1px solid #fff;
}

.swiper {
    /* height: 500px; */
    /* background-color: #000; */
}

@media screen and (min-width: 992px) {
    
}

@media screen and (min-width: 1440px) {
    .home-top-logo-row .logo-desktop {
        display: block;
    }
}

.container {
    max-width: 1152px;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

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

.container .top_logo .p1-img {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.container .top_logo img {
    width: 12.6666%;
    margin: 0 5px;
}

.container .top_logo {
    padding: 40px 0;
}

.container .p1-reg {
    margin-left: 24px;
    margin-right: 13px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;

    color: var(--Grey_10);
}

@media screen and (min-width: 992px) {
   
}

.home-solution-tabs{
    padding-top: 120px;
    padding-bottom: 120px;
}
body {
    /* width: 100%; */
    /* height: auto; */
    background-color: #f7f8fa;
    font-family: Prompt, Noto Sans TC, sans-serif !important;
}

.home-solution-tabs .title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    font-weight: bolder;
    line-height: 1.2;
    color: var(--Grey_10);
    margin-bottom: 40px !important;
}

.home-solution-tabs .v-tabs {
    background-color: var(--Grey_2);
    border-radius: 30px;
    padding-left: 6px;
    padding-right: 6px;
    overflow: visible;
    width: 50%;
    margin: 0 auto 48px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-solution-tabs .v-tabs .v-slide-group {
    display: flex;
    flex: 1 0 auto;
    position: relative;
    transition: .3s cubic-bezier(.25, .8, .5, 1);
    white-space: nowrap;
    justify-content: space-around;
    align-items: center;
    margin: auto 0;

}

.home-solution-tabs .v-tabs .v-slide-group .item {
    width: 13%;
    height: 48px;
    padding: 0 16px;
    /* background-color: var(--Grey_1)!important; */


    text-align: center;
    line-height: 48px;
}

.home-solution-tabs .v-tabs .v-slide-group .item.active {
    background-color: #fff;
    border-radius: 99px !important;
    border: 1px solid var(--Grey_3);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%);
    height: 48px;
}

.home-solution-tabs .v-window {
    /* height: 500px; */
    display: flex;
    align-items: center;
    padding: 0 8px;
    /* padding-bottom:120px!important; */
    /* background-color: #006463; */
}

.v-window .txt-order {
    width: 405px;
    padding-right: 48px !important;
    margin-bottom: 48px!important;

}


.v-window .txt-order .txt {
        font-size: 32px;
    line-height: 1.6;
    font-weight: 600;
    color: var(--Grey_10);
    margin: 0 0 8px;
}

.v-window .txt-order .txt-box {
    display: flex;
    margin-bottom: 16px;

}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.v-window .txt-order .txt-box>div {
    color: inherit !important;
    text-shadow: inherit !important;
    padding: 4px 8px;
    font-weight: 400;
    font-size: 12px;
    line-height: 140%;
    background-color: var(--Grey_2);
    margin: 4px 8px 4px 0;

}

.v-window .txt-order p {
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
}

.v-window .txt-order p b {
    font-weight: 500;
    color: var(--Secondary_7);
}

.v-window .txt-order .detail p {
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
}

.home .try-yoov {
    padding: 84px 0;
    background-color: var(--Secondary_6);
    position: relative;
}

.try-yoov .txt {
    color: var(--Grey_1) !important;
    margin-bottom: 24px !important;
    font-size: 32px;
    text-align: center;
    font-weight: 600;
}

.try-yoov .btn_box {
    text-align: center;
}

.try-yoov .btn_box .btn {
    padding: 12px 20px;
    border: none;
    background-color: var(--Primary_6);
    border-radius: 4px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    display: inline-block;
    transition: all .2s linear;
    text-transform: capitalize;
    color: #fff;
}

.home-solution-tabs .story {
    display: flex;
    margin: 0 auto;


}

.story .say_story {
    width: 526px;
    background-color: #fff;
    padding: 24px 24px 24px 60px;
    position: relative;
    border-radius: 6px;
    margin: 0 15px;

}

.say_story span {
    font-weight: 500;
    font-size: 16px;
    line-height: 160%;
}

.say_story h5 {
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
}

.say_story .box-slide {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    width: 45px;
    height: 200px;
    background: url('/img/sader.png') no-repeat;
    /* background-size: 600px; */
    object-fit: fill;
}


.sols-box {
    margin-top: 40px;
    display: flex;

    flex-flow: row wrap;
}

.sols-box .box-item {
    width: calc(1152px/3.8);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    background-color: var(--Grey_1);
    border-radius: 8px;
    position: relative;
    transition: all .2s linear;
    margin: 0 24px 24px 0;

}

.sols-box .box-item:nth-child(3n) {
    margin: 0 0px 24px 0;
}

.sols-box .box-item::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-bottom: 1px solid var(--Grey_8);
    border-right: 1px solid var(--Grey_8);
    transform: rotate(-45deg) translateY(-50%);
}

.sols-box .icon_hold {
    margin-right: 20px;
}

.sols-box .box-item:hover {
    box-shadow: 0 10px 14px rgb(0 0 0 / 10%);
}

@media screen and (min-width: 992px) {
    .content {
        margin-bottom: 160px !important;

    }

    .home-component {
        padding: 0 8px;
    }
}

@media screen and (min-width: 992px) {
    .content .content_text {
        padding-left: 48px !important;
    }
}

.content {
    display: flex;
    flex-flow: row-reverse;
    align-items: center;

}

.content .content_text {
    margin-bottom: 24px !important;
}

.content_text p {
    color: var(--Grey_9) !important;
    font-weight: 400;
}

.content_text p b {
    font-weight: 500;
    color: var(--Secondary_7);
}

.client {
    margin: 0 auto;
    background-size: cover;
    width: 858px;
    height: 272px;
    /* background-color: #3ca0ae; */
    background-image: url('/img/Clients_partners_desktop_tablet.27ac93d1.png');
    background-position-x: 0;
    background-position-y: center;
    margin-bottom: 60px;
}

.row.awards {
    margin: 0 auto -66px;
    height: 128px;
    background: var(--Grey_1);
    box-shadow: 0 0 25px -5px rgb(0 0 0 / 10%), 0 0 10px -5px rgb(0 0 0 / 4%);
    border-radius: 8px;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.row>div>img {
    width: 100%;
}

.last_content {
    background-color: var(--Grey_1);
    padding: 194px 0 120px;
}

.last_content .btn3 {
    padding: 12px 20px;
    border: none;
    background-color: var(--Secondary_6);
    border-radius: 4px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    display: inline-block;
    transition: all .2s linear;
    text-transform: capitalize;
    color: #fff;
}

.custom-footer {
    font-size: 14px;
    padding: 60px 0 0 !important;
    color: #fff !important;
    background-color: #294460 !important;
    border-color: #294460 !important;
}

.logo_other {}

.content_item .item {
    margin: 8px 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
}

.content_item .item:hover {}

.content_title {
    color: var(--Secondary_6) !important;
}

.content_item .worker_change {
    margin: 24px 0 0;
}

.footer_content {
    display: flex;
}

.footer_content .content_item {
    width: 25%;
}

.content_item .item:hover {
    color: var(--Secondary_6) !important;
}

.footer_bottom {
    margin: 40px 0px 0px;
    padding: 40px 0px 60px;
    border-top: 1px solid #436280;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

:root {
    --Primary_1: #e8f6ff;
    --Primary_2: #b7cedf;
    --Primary_3: #8ba7bf;
    --Primary_4: #65839e;
    --Primary_5: #45617e;
    --Primary_6: #2b425e;
    --Primary_7: #1f375a;
    --Primary_8: #132d55;
    --Primary_9: #092251;
    --Primary_10: #001855;
    --Secondary_1: #e8fffd;
    --Secondary_2: #c9f5f3;
    --Secondary_3: #acebea;
    --Secondary_4: #91e0e2;
    --Secondary_5: #77d3d8;
    --Secondary_6: #5fc5ce;
    --Secondary_7: #3ca0ae;
    --Secondary_8: #217d8d;
    --Secondary_9: #0d5b6d;
    --Secondary_10: #003c4d;
    --Grey_1: #fff;
    --Grey_2: #f7f8fa;
    --Grey_3: #f2f3f5;
    --Grey_4: #e5e6eb;
    --Grey_5: #c9cdd4;
    --Grey_6: #a9aeb8;
    --Grey_7: #86909c;
    --Grey_8: #6b7785;
    --Grey_9: #4e5969;
    --Grey_10: #272e3b;
    --Grey_11: #1d2129;
    --Grey_12: #000;
    --Magenta_1: #ffe8eb;
    --Magenta_2: #f8c7ce;
    --Magenta_3: #f0a7b5;
    --Magenta_4: #e9899e;
    --Magenta_5: #e16d8a;
    --Magenta_6: #da5278;
    --Magenta_7: #b7345d;
    --Magenta_8: #931c46;
    --Magenta_9: #700b31;
    --Magenta_10: #4d0020;
    --Purple_1: #ffe8fd;
    --Purple_2: #eac5e8;
    --Purple_3: #d4a4d4;
    --Purple_4: #bd86bf;
    --Purple_5: #a56ca9;
    --Purple_6: #8e5494;
    --Purple_7: #783782;
    --Purple_8: #632070;
    --Purple_9: #4e0d5e;
    --Purple_10: #3b004d;
    --Blue_1: #e8f7ff;
    --Blue_2: #c3e7fe;
    --Blue_3: #9fd4fd;
    --Blue_4: #7bc0fc;
    --Blue_5: #57a9fb;
    --Blue_6: #3491fa;
    --Blue_7: #206ccf;
    --Blue_8: #114ba3;
    --Blue_9: #063078;
    --Blue_10: #001a4d;
    --Cyan_1: #e8fff8;
    --Cyan_2: #aeeede;
    --Cyan_3: #79dec8;
    --Cyan_4: #4bcdb5;
    --Cyan_5: #22bda5;
    --Cyan_6: #00ac97;
    --Cyan_7: #009488;
    --Cyan_8: #007c76;
    --Cyan_9: #006463;
    --Cyan_10: #004b4d;
    --Green_1: #f7ffe8;
    --Green_2: #ddf0bf;
    --Green_3: #c3e199;
    --Green_4: #a9d277;
    --Green_5: #8fc358;
    --Green_6: #76b43d;
    --Green_7: #5b9a27;
    --Green_8: #428016;
    --Green_9: #2d6609;
    --Green_10: #1b4d00;
    --Red_1: #ffece8;
    --Red_2: #fdcdc5;
    --Red_3: #fbaca3;
    --Red_4: #f98981;
    --Red_5: #f76560;
    --Red_6: #f53f3f;
    --Red_7: #cb272d;
    --Red_8: #a1151e;
    --Red_9: #770813;
    --Red_10: #4d000a;
    --Orange_1: #fff4e8;
    --Orange_2: #fce0c4;
    --Orange_3: #f9caa1;
    --Orange_4: #f6b27e;
    --Orange_5: #f3995d;
    --Orange_6: #f07f3c;
    --Orange_7: #c75b25;
    --Orange_8: #9e3d14;
    --Orange_9: #752507;
    --Orange_10: #4d1200;
    --Gold_1: #fff8e8;
    --Gold_2: #fdedca;
    --Gold_3: #fbdfac;
    --Gold_4: #fad08e;
    --Gold_5: #f8c071;
    --Gold_6: #f6ae54;
    --Gold_7: #cc8234;
    --Gold_8: #a15c1c;
    --Gold_9: #773b0a;
    --Gold_10: #4d2000;
    --Yellow_1: #fffce8;
    --Yellow_2: #fff6cd;
    --Yellow_3: #fbdfac;
    --Yellow_4: #fee697;
    --Yellow_5: #fedb7c;
    --Yellow_6: #fed061;
    --Yellow_7: #d2a03c;
    --Yellow_8: #a57420;
    --Yellow_9: #794d0c;
    --Yellow_10: #4d2b00;
    --Black-1: rgba(0, 0, 0, 0.5019607843137255);
    --shadow-1: rgba(0, 0, 0, 0.10196078431372549);
    --shadow-2: rgba(0, 0, 0, 0.08235294117647059);
    --padding-xl: 16px 24px;
    --padding-l: 12px 20px;
    --padding-med: 7px 16px;
    --padding-sm: 5px 8px;
    --padding-xsm: 3.5px 8px;
    --bannerH: 54px;
    --bannerHOnViewport: 54px;
    --vh: 435px;

}