@import "font.css";
@import "root.css";
@import "reset.css";
@import "component.css";

body {
    overflow-x: hidden;
}

#main {
    margin: auto;
    box-shadow: 0 0 30px rgba(35,42,71, .08);
    overflow-x: hidden;
}


/* HEADER  START */
.header-main {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: var(--z-index-header);
    margin: auto;
    background-color: transparent;
    transition: 200ms background-color;
}

.header-main.header-scroll {
    background: rgba(248, 251, 255, .97);
}

.header-content {
    margin: auto;
    padding: 2rem 0;
    z-index: 1098;
}


.header-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-left-text {
    border-left: 1px solid rgba(64, 101, 150, .15);
    padding: 0.8rem 0 0.8rem 2.4rem;
    margin-left: 3.2rem;
}

.navbar-left-text span {
    font-size: 1.2rem;
}

.navbar-right {
    z-index: var(--z-index-modal);
}

.navbar-right ul {
    padding: 0;
}

.navbar-right ul li {
    margin-right: 1rem;
}

.navbar-right ul li:last-child {
    padding: 0;
    margin: 0;
}

.navbar-right ul li a {
    display: block;
    font-weight: 600;
    padding: 1rem 1.5rem;
    transition: 200ms color, 200ms border-color;
}

.navbar-right ul li form select {
    border: none;
    background: transparent;
    font-size: 1.6rem;
}

.menu-btn {
    position: relative;
    width: 3rem;
    height: 3rem;
    display: none;
}

.menu-btn img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    opacity: 0;
    transition: 0ms all;
}

.menu-btn img.active {
    opacity: 1;
    transition: opacity 400ms ease;
}
/* HEADER  END */

/* FOOTER START*/
.footer-main {
    margin: auto;
    padding: 4rem 0;
    background-color: #232A47;
}

.footer-content .footer-top {
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(248, 251, 255, 0.1);
}

.footer-content .footer-top .footer-links ul li {
    margin-right: 5rem;
}

.footer-content .footer-top .footer-links ul li:last-child {
    margin-right: 0;
}

.footer-content .footer-top .footer-links ul li a {
    transition: 200ms color ease-in-out;
}

.footer-content .footer-top .footer-links ul li a:hover {
    color: var(--color-turquoise)
}

.footer-content .footer-bottom {
    margin-top: 3.2rem;
}

.footer-content .footer-bottom .footer-copyright {
    color: #5B6486;
    font-size: 1.2rem;
}

.footer-content .footer-bottom .footer-socials ul li {
    margin-right: 1rem;
}

.footer-content .footer-bottom .footer-socials ul li:last-child {
    margin-right: 0;
}

.footer-content .footer-bottom .footer-socials ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-color: var(--color-white);
    color: var(--color-black);
    transition: 400ms transform, 200ms color;
}

.footer-content .footer-bottom .footer-socials ul li a:hover {
    color: var(--color-turquoise);
    transform: rotate(360deg);
}

.footer-upper {
    background: url("../img/footer-bg.png") no-repeat 100%;
    background-size: cover;
    text-align: center;
    padding: 3rem 0;
    margin: auto;
}

.footer-upper h4 {
    padding: 0 1rem;
}

.footer-upper .footer-upper-text a {
    color: var(--color-black-1);
}

.footer-upper .footer-upper-text a img {
    display: block;
    margin: 2rem auto 0;
    width: 2.5rem;
}
/* FOOTER AND*/

.scroll-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 3rem;
    bottom: 3rem;
    width: 8rem;
    height: 4rem;
    background: var(--color-turquoise);
    border-radius: 100rem 100rem 0 0;
    opacity: 0;
    visibility: hidden;
    transition: 200ms all;
    cursor: pointer;
    z-index: 1;
}

#black-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.75);
    z-index: var(--z-index-blackScreen);
    visibility: hidden;
}

#black-screen.active {
    visibility: visible;
}


.section-banner-img,
.section-banner{
    padding: 12rem 0 8rem 0;
    background: url(../img/banner-bg.png) no-repeat 100%;
    background-size: cover;
}
.section-banner-p-0 {
    background: url(../img/banner-bg.png) no-repeat 100%;
    background-size: cover;
}

.section-banner .banner-texts p {
    font-size: var(--text-medium);
    line-height: 20px;
}

.section-banner .col-lg-4 img {
    display: block;
    margin: 0 0 0 auto;
}


#home .home-banner {
    position: relative;
    padding: 24rem 0;
}

#home .home-banner .description {
    font-size: var(--text-big);
    max-width: 400px;
    margin: auto;
}

#home .our-benefits {
    padding: 0 0 12rem;
}

.home-banner .hb-img {
    position: absolute;
    bottom: 0;
    width: 30%;
}

.home-banner .hb-img.hb-left-img {
    left: 0;
}

.home-banner .hb-img.hb-right-img {
    right: 0;
}


#what-we-do .wwd-lists .wwd-banner {
    padding: 18rem 0;
}

#what-we-do .wwd-lists .wwd-list .wwd-list-title {
    font-weight: 500;
}

#what-we-do .wwd-lists .wwd-list .wwd-list__text-content {
    max-width: 380px;
}

#what-we-do .wwd-lists .wwd-list.wwd-banner .wwd-list-desc {
    color: var(--color-gray-2);
    max-width: 420px;
}

#what-we-do .wwd-lists .wwd-list:not(.wwd-banner) {
    background: var(--color-white);
}

#what-we-do .wwd-lists .wwd-list:nth-child(even) {
    background: #F8FBFF;
}

#what-we-do .wwd-lists .wwd-list:last-child {
    margin-bottom: 6rem;
}


/*#what-we-do .wwd-banner img {*/
/*    display: block;*/
/*    margin: 0 0 0 auto;*/
/*}*/

/*#what-we-do .wwd-lists .wwd-list {*/
/*    padding: 12rem 0 6rem;*/
/*}*/

/*#what-we-do .wwd-lists .wwd-list:last-child {*/
/*    padding: 12rem 0 8rem;*/
/*}*/

/*#what-we-do .wwd-lists .wwd-list.wwd-list-three {*/
/*    padding: 12rem 0;*/
/*}*/

/*#what-we-do .wwd-lists .wwd-list:nth-child(even) {*/
/*    background: #F8FBFF;*/
/*}*/
/*#what-we-do .wwd-lists .wwd-list:nth-child(even) img{*/
/*    margin: 0 auto 0 0;*/
/*}*/

/*#what-we-do .wwd-lists .wwd-list .wwd-texts {*/
/*    max-width: 48rem;*/
/*}*/

/*#what-we-do .wwd-lists .wwd-list .wwd-texts .mini-title {*/
/*    margin-bottom: 2.4rem;*/
/*    text-transform: uppercase;*/
/*    font-weight: 400 !important;*/
/*    letter-spacing: 0.8px;*/
/*}*/

/*#what-we-do .wwd-lists .wwd-list .wwd-texts .title {*/
/*    font-weight: 500;*/
/*    margin-bottom: 2.4rem;*/
/*}*/

/*#what-we-do .wwd-lists .wwd-list .wwd-texts .description {*/
/*    line-height: 2.4rem;*/
/*    margin-bottom: 4rem;*/
/*    font-size: var(--text-big);*/
/*}*/

/*#what-we-do .wwd-lists .wwd-list img {*/
/*    display: block;*/
/*    margin: 0 0 0 auto;*/
/*}*/
#contact-us .contactUs-banner {
    padding: 18rem 0;
}

#contact-us .contactUs-banner .contactUs-form button {
    background: var(--color-turquoise);
    text-transform: uppercase;
}

/*#contact-us .contactUs-banner .contactUs-form {*/
/*    max-width: 68rem;*/
/*}*/

/*#contact-us .contactUs-banner .contactUs-form .contactUs-form-description {*/
/*    color: var(--color-gray-2);*/
/*    line-height: 24px;*/
/*    font-size: var(--text-big);*/
/*}*/

/*#contact-us .contactUs-banner .contactUs-form input {*/
/*    border: none;*/
/*    width: 100%;*/
/*    padding: 1.5rem;*/
/*    font-size: var(--text-big);*/
/*}*/

/*#contact-us .contactUs-banner .contactUs-form button,*/
/*#contact-us .contactUs-banner .contactUs-form a{*/
/*    width: 100%;*/
/*    height: 5.6rem;*/
/*    background: var(--color-turquoise);*/
/*    border: none;*/
/*    font-size: var(--text-big);*/
/*    color: var(--color-black-1);*/
/*    font-weight: 600;*/
/*    text-transform: uppercase;*/
/*}*/

/*#contact-us .contactUs-banner .contactUs-form textarea {*/
/*    border: none;*/
/*    width: 100%;*/
/*    padding: 1.7rem 1.5rem;*/
/*    font-size: var(--text-big);*/
/*    height: 130px;*/
/*    resize: none;*/
/*}*/

.where-we-work {
    padding: 12rem 0;
}

.where-we-work .www-title {
    max-width: 440px;
    margin: 0 auto 4rem;
}

.where-we-work .www-circle .www-circle-bg {
    width: 100%;
    height: 100%;
}

.where-we-work .www-circle .www-circle-img {
    position: absolute;
    height: 100%;
    top: -1rem;
}

.where-we-work .www-circle .www-circle-texts {
    padding-top: 2rem;
    text-align: center;
}

.where-we-work .www-circle .www-circle-texts-2 {
    padding-bottom: 2rem;
    text-align: center;
}

/*.where-we-work .www-circle .www-circle-texts .title {*/
/*    margin-bottom: 1.6rem;*/
/*}*/

/*.where-we-work .www-circle .www-circle-texts .address {*/
/*    display: block;*/
/*    font-size: var(--text-big);*/
/*    font-weight: 400;*/
/*    color: var(--color-gray);*/
/*    margin-bottom: 2.4rem;*/
/*}*/

#ecosystem .ecosystem-banner {
    padding: 26rem 0 22rem;
}

#ecosystem .ecosystem-banner .ecosystem-banner-title {
    margin: 0;
}

.our-clients {
    padding: 11rem 0;
}

.our-clients .our-clients-text {
    max-width: 66rem;
    margin: 0 auto 6rem auto;
}

.our-clients .our-clients-text .title {
    margin-bottom: 1.6rem;
}
.our-clients .our-clients-text .description {
    font-size: var(--text-medium);
    color: var(--color-gray);
}

.our-clients-card {
    margin-bottom: 2.4rem;
    padding: 0 1.5rem;
}

.our-clients-card .card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
}

.our-clients-card .card-texts {
    padding: 3.2rem 2.5rem;
}

.our-clients-card .card-texts .card-title {
    margin-bottom: 1.6rem;
}

.our-clients-card .card-texts .card-subtitle {
    font-size: var(--text-medium);
    color: var(--color-gray);
}

.statistics {
    padding: 6.4rem 0;
    background: var(--color-black);
}

.statistics .statistic-content .statistic-number {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 1.6rem;
    line-height: 1;
}

.statistics .statistic-content .statistic-number span {
    font-size: 2.5rem;
    margin-left: 2px;
}

.statistics .statistic-content .statistic-description {
    max-width: 40rem;
    margin: auto;
    font-size: var(--text-big);
    color: var(--color-white);
    font-weight: 400;
    line-height: 24px;
}

.missions {
    padding: 12rem 0;
}

.missions .missions-texts {
    max-width: 65rem;
    margin: auto;
}

.missions .missions-texts .title {
    margin-bottom: 1.6rem;
}

.missions .missions-texts .description {
    font-size: var(--text-medium);
    color: var(--color-gray);
}

.missions .missions-content {
    margin-top: 12rem;
}

.missions .missions-content .missions-lists h3 {
    margin-bottom: 2.4rem;
}

.missions .missions-content .missions-lists ul li {
    margin-bottom: 3.2rem;
}

.hi-ottoo {
    padding: 12rem 0;
}

.hi-ottoo .hi-ottoo-content {
    margin-bottom: 12rem;
}

.hi-ottoo .hi-ottoo-content:last-child {
    margin-bottom: 0;
}

.hi-ottoo .hi-ottoo-content .hi-ottoo-texts .description {
}

#career .advert {
    background: var(--color-black-1);
    padding: 12rem 0;
    color: var(--color-white);
}

#career .advert .advert-texts {
    max-width: 76rem;
    margin: auto;
}

#career .advert .advert-texts .title {
    margin-bottom: 1.6rem;
}

#career .advert .advert-texts .description {
}

#career .advert .advert-lists {
    margin-top: 11rem;
}

#career .advert .advert-lists h5 {
}

#career .advert .advert-lists .advert-list {
    padding: 2.5rem 0 2.3rem;
    border-bottom: 1px solid #797F90;
}

#career .advert .advert-lists .advert-list .advert-position{
    color: var(--color-white);
    min-width: 38rem;
}

#career .advert .advert-lists .advert-list .advert-time {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-gray-2);
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-25%);
}

#career .advert .advert-lists .advert-list .advert-btn {
    color: var(--color-turquoise);
    padding: 0 3.6rem 0 0;
    cursor: pointer;
}

#career .advert .advert-lists .advert-list .advert-btn::before {
    display: none;
}

#career .advert-modal {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    min-width: 50vw;
    background: #F8FBFF;
    transform: translateX(100%);
    z-index: var(--z-index-modal);
}

#career .advert-modal.active {
    transform: translateX(0);
}

#career .advert-modal.animation-active {
    transition: 800ms transform ease-in-out;
}

#career .advert-modal .advert-modal__container {
    padding: 40px 100px 60px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#career .advert-modal .advert-modal__container .advert-close {
    position: absolute;
    right: 4rem;
    top: 4rem;
    cursor: pointer;
}

#career .advert-modal .advert-modal__header {
    text-align: center;
    margin-bottom: 2.4rem;
}

#career .advert-modal .advert-modal__header .advert-logo {
    width: 215px;
    display: block;
    margin: 0 auto 3rem;
}

#career .advert-modal .advert-modal__form .form-group {
    margin-bottom: 1rem;
    position: relative;
}

#career .advert-modal .advert-modal__form input,
#career .advert-modal .advert-modal__form textarea {
    padding: 16px 24px;
    border: none;
    font-size: var(--text-medium);
    font-weight: 400;
    color: var(--color-black);
}

#career .advert-modal .advert-modal__form input::placeholder {
    color: #797F90;
}

#career .advert-modal .advert-modal__form .file-area {
    color: #797F90;
    text-align: center;
}

#career .advert-modal .advert-modal__form .file-area input[type="file"]{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

#career .advert-modal .advert-modal__form .file-area input[type="file"]:invalid ~ .file-dummy{
    border-color: rgba(255,0,0,.25);
}


#career .advert-modal .advert-modal__form .file-area input[type="file"]:valid ~ .file-dummy {
    border-color: rgba(0,255,0,.25);
}

#career .advert-modal .advert-modal__form .file-area input[type="file"]:valid ~ .file-dummy .success {
    display: block;
}

#career .advert-modal .advert-modal__form .file-area input[type="file"]:valid ~ .file-dummy .default {
    display: none;
}

#career .advert-modal .advert-modal__form .file-area .file-dummy {
    padding: 16px;
    text-align: center;
    background: #fff;
    border: 1px dashed #e5e5e5;
}

#career .advert-modal .advert-modal__form .file-area .file-dummy .success {
    display: none;
}

#career .advert-modal .advert-modal__form .file-area .file-dummy .default img {
    margin-bottom: 1.6rem;
}

#career .advert-modal .advert-modal__form button {
    width: 100%;
    padding: 16px 0;
    text-align: center;
    font-size: var(--text-big);
    color: var(--color-black);
    background: var(--color-turquoise);
    font-weight: 500;
}


#who-are-we .waw-lists {
    margin: 12rem 0 10rem;
}

#who-are-we .waw-lists .waw-lists-title {
    text-align: center;
    max-width: 65rem;
    margin: 0 auto 8rem auto;
}

#who-are-we .waw-lists .waw-lists-title .title {
    margin-bottom: 1.6rem;
}

#who-are-we .waw-lists .waw-list {
    margin-bottom: 8rem;
}

#who-are-we .waw-lists .waw-list:last-child {
    margin-bottom: 0;
}

#who-are-we .waw-lists .waw-list .waw-texts {
    max-width: 48rem;
}

#who-are-we .waw-lists .waw-list .waw-texts .title {
    font-size: 2.6rem;
    font-weight: 500;
    max-width: 28rem;
    margin-bottom: 2.4rem;
}

#who-are-we .waw-lists .waw-list .waw-texts .description {
    font-size: var(--text-medium);
}

#who-are-we .our-values {
    background: var(--color-black-1);
    color: var(--color-white);
    padding: 16rem 0 10rem;
}

#who-are-we .our-values .title {
    margin-bottom: 5rem;
}

#who-are-we .our-values .our-values-cards {
    flex-wrap: wrap;
}

#who-are-we .our-values .our-values-cards .our-values-card {
    margin-bottom: 6rem;
    padding: 0 2.5rem;
}

#who-are-we .our-values .our-values-cards .our-values-card .ov-card-title {
    text-align: center;
    position: relative;
    padding-bottom: 1rem;
    color: rgba(248, 251, 255, .5);
    transition: 400ms color;
}

#who-are-we .our-values .our-values-cards .our-values-card .ov-card-title:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: rgba(248, 251, 255, .5);
    transition: 400ms background;

}


#who-are-we .our-values .our-values-cards .our-values-card:hover .ov-card-title {
    color: var(--color-turquoise);
}

#who-are-we .our-values .our-values-cards .our-values-card:hover .ov-card-title:before {
    background: var(--color-turquoise);
}

#who-are-we .our-values .our-values-cards .our-values-card .ov-card-img {
    min-height: 200px;
    display: flex;
    align-items: center;
}

#who-are-we .done-is-better {
    padding: 22rem 0;
}

#who-are-we .done-is-better .dis-content {
    max-width: 660px;
}

.our-container {
    padding: 12rem 0;
}

.our-container .our-title {
    margin-bottom: 6rem;
}

.our-container .our-navbar nav ul  {
    margin-bottom: 8rem;
    padding: 0;
}

.our-container .our-navbar nav ul li a {
    color: var(--color-black-1);
    border-bottom: 2px solid var(--color-black-1);
    display: block;
    padding: 0 2rem 1rem;
    text-align: center;
    cursor: pointer;
    opacity: .5;
    font-weight: 600;
    font-size: 1.5rem;
}

.our-container .our-navbar nav ul li a.home-navbar-button:hover {
    opacity: .75;
}

.our-container .our-navbar nav ul li a.home-navbar-buttons {
    font-size: var(--text-big);
    opacity: .8;
}

.our-container .our-navbar nav ul li a.home-navbar-buttons:hover {
    color: var(--color-turquoise);
    border-color: var(--color-turquoise);
}

.our-container .our-navbar nav ul li a.active {
    opacity: 1;
}

.our-container .our-content .our-texts .description {
    font-size: var(--text-medium);
    font-weight: 400;
}

.our-container .our-content .our-texts ul li {
    font-size: var(--text-small);
}

.our-container .our-content .our-texts ul li:last-child {
    margin-bottom: 0;
}

.our-container .our-content .waw-navbar-page {
    display: none;
}

.our-container .our-content .waw-navbar-page.active {
    display: flex;
}

.our-container .swiper-waw-our {
    cursor: e-resize;
    position: relative;
}

.our-container .swiper-waw-our .swiper-wrapper {
    transition-timing-function: linear;
    color: #fff;
}

.our-container .swiper-waw-our .swiper-wrapper img {
    display: block;
    height: 200px;
    margin: auto;
}

.our-container .swiper-waw-our .swiper-wrapper .our-card .our-card-title {
    max-width: 250px;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-turquoise);
    color: var(--color-turquoise);
    font-weight: 500;
    font-size: var(--text-big);
    text-align: center;
    margin: auto;
}

.our-container .swiper-waw-our .swiper-wrapper .our-card p {
    font-size: var(--text-medium);
}

#who-are-we .team {
    background: var(--color-black-1);
    padding: 12rem 0;
}

#who-are-we .team .team-contents {
    max-width: 660px;
    margin: 0 auto;
}

.team .main-title {
    margin-bottom: 6rem;
}

.team .team-content {
    width: 100%;
    max-width: 160rem;
}

.team .team-content .team-texts {
    max-width: 520px;
}


.team .team-content .team-texts .title {
    margin-bottom: 3.2rem;
}

.team .team-content .team-texts .description {
    margin-bottom: 0;
    line-height: 18px;
}

.team .team-content .team-swiper {
    padding-bottom: 4rem;
    cursor: e-resize;
}

.team .team-content .team-swiper .swiper-wrapper .swiper-slide .main-img {
    width: 100%;
}

.team .team-content .team-swiper .swiper-wrapper .swiper-slide .swiper-card .swiper-card-shadow {
    position: absolute;
    left: 0;
    border: 0;
    width: 100%;
}

.team-swiper .swiper-wrapper .swiper-slide .swiper-card .swiper-card-person {
    padding: 0 3rem;
    position: absolute;
    bottom: 2.5rem;
    display: flex;
    width: 100%;
    align-items: flex-end;
    justify-content: space-between;    
}

.swiper-card .swiper-card-person .swiper-card-info .swiper-card-name {
    color: var(--color-white);
    margin-bottom: .5rem;
}

.swiper-card .swiper-card-person .swiper-card-info .swiper-card-position {
    font-weight: 300;
    font-size: var(--text-medium);
}

.team .team-content .team-swiper .swiper-article {
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    padding: 0 8rem;
}

.team .team-content .team-swiper .swiper-article .swiper-pagination-team {
    width: auto;
    margin-right: 3rem;
    font-weight: 600;
}


.team .team-content .team-swiper .swiper-article .swiper-next-pagination.swiper-button-disabled,
.team .team-content .team-swiper .swiper-article .swiper-prev-pagination.swiper-button-disabled{
    opacity: .5;
}


.our-benefits {
    position: relative;
    background: var(--color-black-1);
}

#home .our-benefits .workflow {
    margin-bottom: 6rem;
}

#home .our-benefits .workflow img {
    width: 100%;
}

.our-benefits .oc-img {
    width: 40%;
    left: calc(50% - 20%);
    /*transform: translateX(-50%);*/
    top: 0;
    position: relative;
    margin-bottom: 6rem;
}

.our-container.our-benefits .our-navbar nav ul li a {
    color: var(--color-gray-2);
    border-color: var(--color-gray-2);
    transition: 200ms ease;
}

.our-container.our-benefits .our-navbar nav ul li a.active {
    color: var(--color-turquoise);
    border-color: var(--color-turquoise);
}

.our-benefits .our-content .home-navbar-page {
    display: none;
}

.our-benefits .our-content .home-navbar-page.active {
    display: flex;
}

.our-container.our-benefits .our-content .our-texts ul li p {
    line-height: 18px;
}

.how-we-work {
    padding: 12rem 0;
}

.how-we-work .hww-text {
    margin-bottom: 5rem;
}

.how-we-work .hww-text .description {
    color: var(--color-gray-2);
}

.how-we-work .hww-content .hww-card {
    background: var(--color-black-1);
    position: relative;
}

.how-we-work .hww-content .hww-card .hww-card-text {
    position: absolute;
    width: 100%;
    bottom: 2rem;
    color: var(--color-white);
    text-align: center;
}

.how-we-work .hww-content .hww-card .hww-card-text .hww-card-title {
    font-size: 2rem;
    margin-bottom: .5rem;
    font-weight: 600;
}

.how-we-work .hww-content .hww-card .hww-card-text .hww-card-description {
    font-size: 1.2rem;
    font-weight: 400;
}

.how-we-work .hww-content .hww-card img {
    width: 100%;
    height: 100%;
}

.home-text-banner {
    padding: 18rem 0;
    background: var(--color-white);
}

.home-text-banner .main-text {
    margin-bottom: 4rem;
}

#home .hi-ottoo .hi-ottoo-main-texts {
    margin-bottom: 5rem;
}

#home .hi-ottoo .hi-ottoo-main-texts .title {
    margin-bottom: 1.4rem;
}

#home .hi-ottoo .hi-ottoo-main-texts .description {
    max-width: 65rem;
    margin: 0 auto;
}

#who-are-we .waw-banner {
    padding: 18rem 0;
}

#login .login-banner {
    min-height: 100vh;
}

#login .login-banner form {
    max-width: 40rem;
}

#login .login-banner input {
    border: none;
    padding: 1.7rem 1.5rem;
    font-size: var(--text-big);
}

#login .login-banner input,
#login .login-banner button {
    width: 100%;
}

#login .login-banner button {
    width: 100%;
    height: 4.6rem;
    background: var(--color-turquoise);
    border: none;
    font-size: var(--text-big);
    color: var(--color-black-1);
    font-weight: 600;
    text-transform: uppercase;
}

.home-bgs {
    background: url("../img/home.png");
}

#login .login-banner a {
    color: var(--color-black-1);
}

#main, .header-main, .footer-upper, .footer-main {
    max-width: var(--max-screen);
}

#notFound .nf-banner {
    position: relative;
    padding: 24rem 0;
}

#notFound .nf-banner .title .page-status__code {
    font-size: var(--fz-title-big);
}

#notFound .nf-banner .title .page-status__description {
    font-size: var(--fz-title-medium);
}

#notFound .nf-banner .nf-img.nf-left-img {
    left: 0;
}

#notFound .nf-banner .nf-img.nf-right-img {
    right: 0;
}

#notFound .nf-banner .nf-img {
    position: absolute;
    bottom: 0;
    width: 30%;
}

#notFound .nf-banner .description {
    font-size: var(--text-big);
    max-width: 400px;
    margin: auto;
    color: #535764;
}

#notFound .our-benefits {
    padding: 0 0 12rem;
}


.animate__fadeInUpCustom {
    animation: fadeInUpCustom;
    animation-duration: 800ms;
}

@keyframes fadeInUpCustom {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-40px,20,0);
        transform: translate3d(-40px,0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}