/**************** ROOT ****************//**************** ROOT ****************//**************** ROOT ****************/

:root {
    --white: hsla(0,0%,100%,1);
    --black: hsla(0,0%,0%,1);    

    --grey-body-bg: hsla(217,29%,91%,1);
    --grey-text-light: hsla(218,4%,68%,1);
    --grey-main-bg: hsla(220,27%,98%,1);
    --grey-main-br: hsla(217,29%,91%,1);
    --red-main-br: hsla(3,81%,57%,1);

    --blue-dark: hsla(221,32%,21%,1);
    --yellow: hsla(45,100%,50%,1);
    --green-whatsapp: hsla(135,54%,42%,1);
}



/**************** BODY ****************//**************** BODY ****************//**************** BODY ****************/

body {min-width: 320px; font-family: 'IBM Plex Sans Hebrew', sans-serif; font-weight: 400; font-stretch: 100%; font-size: 14px; line-height: 1; color: var(--black); background-color: var(--grey-body-bg);}

.ccbox {width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center;}
.cwbox {width: 100%; max-width: 1440px; padding: 0px 36px;}
.cwbox.mini {max-width: 1080px;}

#page {width: 100%; height: auto; background-color: transparent; overflow: hidden; z-index: 1;}
#content {width: 100%; background-color: transparent; z-index: 10;}

@media screen and (max-width: 1300px) {
    .cwbox {padding: 0px 24px;}
}

@media screen and (max-width: 800px) {
    .cwbox {padding: 0px 18px;}
}



/**************** HEADER ****************//**************** HEADER ****************//**************** HEADER ****************/

#header {width: 100%; background-color: var(--white);}
#header .header-wrapper {justify-content: space-between; align-items: center; align-content: center; padding: 30px 0px;}
#header .logo {display: block; height: 48px; aspect-ratio: 432 / 84;}
#header .logo svg {display: block; width: 100%; height: 100%;}

#header .contacts {gap: 30px;}
#header .contacts :is(button, .button) {height: 48px; min-width: 200px; padding: 0px 30px; background-color: var(--white);}
#header .contacts :is(button, .button).phone {border-color: var(--yellow);}
#header .contacts :is(button, .button).phone > i {width: 16px;}
#header .contacts :is(button, .button).phone > i > svg {fill: var(--yellow);}
#header .contacts :is(button, .button).whatsapp {border-color: var(--green-whatsapp);}
#header .contacts :is(button, .button).whatsapp > i > svg {fill: var(--green-whatsapp);}


/*
@media screen and (max-width: 800px) {
    #header .header-wrapper {justify-content: center; padding: 18px 0px;}
    #header .logo {height: 42px;}
    #header .contacts {flex-wrap: nowrap; justify-content: center; gap: 18px; position: fixed; bottom: 0; left: 0; width: 100%; padding: 18px 0px; background-color: var(--blue-dark); z-index: 1000;}
    #header .contacts :is(button, .button) {gap: 9px; min-width: 150px; height: 42px; padding: 0px 18px;}
}
*/

@media screen and (max-width: 800px) {
    #header .header-wrapper {padding: 18px 0px;}
    #header .logo {height: 42px;}
    #header .contacts :is(button, .button) {gap: 9px; min-width: 150px; height: 42px; padding: 0px 24px;}
}

@media screen and (max-width: 600px) {
    #header .header-wrapper {justify-content: center; padding: 18px 0px;}
    #header .logo {height: 42px;}
    #header .contacts {flex-wrap: nowrap; justify-content: center; gap: 18px; position: fixed; bottom: 0; left: 0; width: 100%; padding: 18px 0px; background-color: var(--blue-dark); z-index: 10000;}
}

@media screen and (max-width: 350px) {
    #header .header-wrapper {padding: 12px 0px;}
    #header .contacts {gap: 12px;}
    #header .contacts :is(button, .button) {gap: 6px; padding: 0px 9px;}
}



/**************** FOOTER ****************//**************** FOOTER ****************//**************** FOOTER ****************/

#footer {width: 100%; margin-top: 90px; padding-top: 42px; z-index: 10;}
#footer .footer-bg {width: 100%; background-color: var(--blue-dark); z-index: 1;}
#footer .footer-city-bg {position: absolute; bottom: calc(100% - 6px); left: 0px; width: 100%; height: 48px; background: url("../images/footer-city-bg.png") repeat center; background-size: contain; z-index: 5;}
#footer .footer-wrapper {padding: 60px 0px 120px 0px; justify-content: space-between; z-index: 10;}

#footer .copy-box {width: auto;}
#footer .copy-box .logo {display: block; height: 36px; aspect-ratio: 152 / 84;}
#footer .copy-box .logo svg {display: block; width: 100%; height: 100%;}
#footer .copy-box .data {margin: -2px 18px 0px 0px; font-weight: 400; font-size: 14px; color: var(--white);}
#footer .copy-box .data .text {margin: 0px 0px 10px 0px;}
#footer .copy-box .data .menu {gap: 9px;}
#footer .copy-box .data .menu a {display: block; color: var(--yellow);}
#footer .copy-box .data .menu span {display: block;}

#footer .footer-wrapper .pay-box {gap: 36px;}
#footer .footer-wrapper .pay-box img {display: block; height: 36px;}


@media screen and (max-width: 1000px) {
    #footer .footer-wrapper {flex-wrap: wrap; justify-content: center;}
    #footer .footer-wrapper .copy-box {order: 2; padding: 36px 0px 0px 0px;}
    #footer .footer-wrapper .pay-box {order: 1; justify-content: center; width: 100%;}
}

@media screen and (max-width: 500px) {
    #footer .footer-wrapper .copy-box {flex-wrap: wrap; justify-content: center;}
    #footer .copy-box .data {width: 100%; margin: 0px; text-align: center;}
    #footer .copy-box .data .text {width: 100%; margin: 18px 0px 18px 0px;}
    #footer .copy-box .data .menu {justify-content: center;}
}



/**************** INDEX HERO ****************//**************** INDEX HERO ****************//**************** INDEX HERO ****************/

.index-hero {width: 100%; background: url("../images/index/index-hero-bg.jpg") no-repeat top center; background-size: cover;}
.index-hero .hero-bg-fix {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: hsla(222,90%,9%,0.9); z-index: 1;}
.index-hero .hero-wrapper {flex-wrap: nowrap; align-items: center; align-content: center; padding: 60px 0px 60px 0px; z-index: 10;}

.index-hero .hero-content {flex: 1 1 auto; width: auto; min-width: 0px; max-width: 100%; padding: 0px 0px 0px 60px;}
.index-hero .hero-content .badge-box {width: 100%; padding: 0px 0px 24px 0px;}
.index-hero .hero-content .badge-box .badge {padding: 7px 30px 7px 18px; font-weight: 400; font-size: 14px; color: var(--white); background-color: var(--blue-dark); border: solid 1px hsla(222,30%,30%,1); border-radius: 999px;}
.index-hero .hero-content .badge-box .badge::before {content: ''; display: block; position: absolute; top: 50%; right: 12px; width: 6px; height: 6px; background-color: var(--yellow); border-radius: 100%; transform: translateY(-50%);}
.index-hero .hero-content .title {width: 100%; padding: 36px 0px 36px 0px; font-weight: 700; font-size: 60px; color: var(--white);}
.index-hero .hero-content .subtitle {width: 100%; padding: 0px 0px 48px 0px; font-weight: 700; font-size: 36px; line-height: 40px; color: var(--yellow);}
.index-hero .hero-content .subtitle b {font-weight: inherit; font-size: inherit; line-height: inherit; color: var(--white);}
.index-hero .hero-content .desc {width: 100%; max-width: 480px; font-weight: 400; font-size: 16px; line-height: 22px; color: var(--white);}

.index-hero .hero-content .reviews {padding: 60px 0px 0px 0px; gap: 18px;}
.index-hero .hero-content .reviews .button-box {padding: 30px 0px 0px 0px;}
.index-hero .hero-content .reviews .button {height: 60px; padding: 0px 60px;}
.index-hero .hero-content .reviews .reviews-box {padding: 30px 0px 0px 0px; gap: 18px; flex-wrap: nowrap; align-items: center; align-content: center;}
.index-hero .hero-content .reviews .images {padding-right: 12px;}
.index-hero .hero-content .reviews .image {width: 60px; aspect-ratio: 1 / 1; margin-right: -12px; background-color: hsla(270,3%,24%,1); border-radius: 999px; overflow: hidden;}
.index-hero .hero-content .reviews .image img {display: block; width: 100%; height: 100%; object-fit: cover;}
.index-hero .hero-content .reviews .image .more {display: block; width: 100%; height: 100%; padding: 0px 2px 0px 0px; font-weight: 700; font-size: 16px; line-height: 60px; text-align: center; color: var(--white);}
.index-hero .hero-content .reviews .text {font-weight: 400; font-size: 16px; color: var(--white);}
.index-hero .hero-content .reviews .text .top {padding: 0px 0px 3px 0px; font-weight: 700;}
.index-hero .hero-content .reviews .text .sub {padding: 3px 0px 0px 0px;}

.index-hero .hero-form {width: 50%; max-width: 540px; min-width: 420px;}
.index-hero .hero-form .form-box {width: 100%;}
.index-hero .hero-form .form-box .field-box.floor {width: 20%;}
.index-hero .hero-form .form-box .field-box.options {width: 30%;}

.index-hero .hero-form .form-box .field-box.error-box {display: none; width: 100%; height: 36px;}
.index-hero .hero-form .form-box .field-box.error-box .flex-acenter {width: 100%; height: 100%;}
.index-hero .hero-form .form-box .field-box.error-box p {font-weight: 700; font-size: 16px; color: var(--red-main-br);}

.index-hero .hero-form .form-box .button-box {width: 100%; height: 48px;}
.index-hero .hero-form .form-box .button-box :is(button, .button) {width: 100%; height: 100%;}
.index-hero .hero-form .form-box .button-box :is(button, .button) .sync {
    position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0px 0px -18px; fill: var(--blue-dark);
    opacity: 0; pointer-events: none; transition: opacity linear 200ms; animation: iso-sync-rotate 2000ms linear infinite; z-index: 10;
}
.index-hero .hero-form .form-box .button-box .submit-message {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; pointer-events: none;}
.index-hero .hero-form .form-box .button-box .submit-message .flex-acenter {width: 100%; height: 100%;}
.index-hero .hero-form .form-box .button-box .submit-message p {font-weight: 700; font-size: 16px; color: var(--blue-dark);}

.index-hero .hero-form .form-box .button-box.sync :is(button, .button) > * {opacity: 0;}
.index-hero .hero-form .form-box .button-box.sync :is(button, .button) .sync {opacity: 1;}
.index-hero .hero-form .form-box .button-box.sync.submit :is(button, .button) {opacity: 0;}
.index-hero .hero-form .form-box .button-box.sync.submit .submit-message {opacity: 1;}


@media screen and (max-width: 1000px) {
    .index-hero .hero-wrapper {flex-wrap: wrap; justify-content: center;}
    .index-hero .hero-content {width: 100%; max-width: none; padding: 0px;}
    .index-hero .hero-form {width: 100%; max-width: 600px; min-width: 0px; margin-top: 60px;}
}

@media screen and (max-width: 500px) {
    .index-hero .hero-wrapper {padding: 48px 0px 48px 0px;}
    .index-hero .hero-content .badge-box {width: 100%; padding: 0px 0px 18px 0px;}
    .index-hero .hero-content .title {padding: 18px 0px 18px 0px; font-size: 48px;}
    .index-hero .hero-content .subtitle {padding: 0px 0px 30px 0px; font-size: 30px; line-height: 36px;}
    .index-hero .hero-content .reviews {padding: 12px 0px 0px 0px;}
    .index-hero .hero-content .reviews .button {height: 48px; padding: 0px 48px;}
    .index-hero .hero-form {margin-top: 48px;}
    .index-hero .hero-form .form-box .field-box.floor {width: 30%;}
    .index-hero .hero-form .form-box .field-box.options {width: 70%;}
}

@media screen and (max-width: 400px) {
    .index-hero .hero-content .reviews .images {padding-right: 9px;}
    .index-hero .hero-content .reviews .image {width: 48px; margin-right: -9px;}
    .index-hero .hero-content .reviews .image .more {padding: 0px 2px 0px 0px; font-size: 14px; line-height: 48px;}
    .index-hero .hero-content .reviews .text {font-size: 14px;}
    .index-hero .hero-content .reviews .text .top {padding: 0px 0px 3px 0px;}
    .index-hero .hero-content .reviews .text .sub {padding: 3px 0px 0px 0px;}
}



/**************** INDEX ADVANTAGES ****************//**************** INDEX ADVANTAGES ****************//**************** INDEX ADVANTAGES ****************/

.index-advantages {width: 100%; background-color: var(--white);}
.index-advantages .advantages-wrapper {flex-wrap: nowrap; align-items: center; align-content: center; padding: 30px 0px 90px 0px;}
.index-advantages .truck {width: 50%; padding: 0px 0px 0px 60px;}
.index-advantages .truck img {display: block; width: 120%; aspect-ratio: 914 / 640; object-fit: contain;}
.index-advantages .advantages-list {width: 50%; padding: 0px 60px 0px 0px; gap: 30px;}
.index-advantages .advantage {align-items: center; align-content: center; width: calc(50% - 15px); padding: 24px; background-color: var(--grey-main-bg); border: solid 1px var(--grey-main-br); border-radius: 18px;}
.index-advantages .advantage .icon {width: 66px; height: 60px;}
.index-advantages .advantage .icon img {display: block; width: 100%; height: 100%;}
.index-advantages .advantage .text {padding: 0px 18px 0px 0px; font-weight: 700; font-size: 16px; line-height: 22px; color: var(--blue-dark);}


@media screen and (max-width: 1500px) {
    .index-advantages .advantages-list {width: 50%; padding: 0px 0px 0px 0px;}
}

@media screen and (max-width: 1300px) {
    .index-advantages .advantages-wrapper {padding: 60px 0px 120px 0px;}
    .index-advantages .truck {width: 45%; padding: 0px 0px 0px 45px;}
    .index-advantages .advantages-list {width: 55%; gap: 24px;}
}

@media screen and (max-width: 1000px) {
    .index-advantages .advantages-wrapper {flex-wrap: wrap; padding: 0px 0px 120px 0px;}
    .index-advantages .truck {width: 100%; padding: 12px 0px 0px 0px;}
    .index-advantages .truck img {width: 100%; height: auto;}
    .index-advantages .advantages-list {width: 100%;}
}

@media screen and (max-width: 500px) {
    .index-advantages .truck {padding: 18px 0px 12px 0px;}
    .index-advantages .advantages-list {gap: 18px;}
    .index-advantages .advantage {width: 100%; padding: 18px;}
}



/**************** INDEX SERVICES ****************//**************** INDEX SERVICES ****************//**************** INDEX SERVICES ****************/

.index-services {width: 100%; padding: 60px 0px; background: url("../images/index/index-services-bg.jpg") no-repeat top center; background-size: cover;}
.index-services .services-bg-fix {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: hsla(222,90%,9%,0.9); z-index: 1;}
.index-services .services-city-bg {position: absolute; bottom: calc(100% - 3px); left: 0px; width: 100%; height: 66px; background-image: url("../images/index/index-services-city-bg.png"); background-repeat: repeat-x; background-position: center bottom; background-size: auto 66px; z-index: 1;}
.index-services .services-wrapper {z-index: 10;}

.index-services .services-list {width: 50%; padding: 0px 0px 0px 30px; gap: 30px;}
.index-services .service {width: 100%; padding: 24px; background-color: transparent; border: solid 1px var(--white); border-radius: 18px;}
.index-services .service .title {padding: 0px 0px 12px 0px; font-weight: 700; font-size: 30px; line-height: 36px; color: var(--yellow);}
.index-services .service .subtitle {font-weight: 400; font-size: 20px; line-height: 28px; color: var(--white);}
.index-services .service .text {padding: 24px 0px 0px 0px; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--white);}
.index-services .service .text .pp {padding: 0px 0px 6px 0px;}
.index-services .service .text .pp:last-child {padding: 0px;}
.index-services .service .text .li {position: relative; padding: 0px 15px 0px 0px; margin: 0px 0px 6px 0px;}
.index-services .service .text .li::before {content: ''; display: block; position: absolute; top: 50%; right: 0px; width: 4px; height: 4px; background-color: var(--white); border-radius: 100%; transform: translateY(-50%);}
.index-services .service .text .li:last-child {margin: 0px;}
.index-services .service .price-swiper {position: absolute; bottom: 24px; left: 24px; width: 180px; height: 60px; padding: 7px 0px 7px 0px; font-weight: 700; font-size: 16px; line-height: 22px; color: var(--blue-dark); background-color: var(--yellow); border-radius: 9px; overflow: hidden; z-index: 3;}
.index-services .service .price-swiper .swiper {width: 100%; height: 100%;}
.index-services .service .price-swiper .top {font-weight: 700; font-size: 20px; line-height: 26px; text-align: center;}
.index-services .service .price-swiper .bottom {font-weight: 400; font-size: 14px; line-height: 20px; text-align: center;}

.index-services .gallery {position: absolute; top: 0px; left: 0px; width: 50%; height: 100%; padding: 0px 30px 0px 0px; gap: 24px;}
.index-services .gallery .image {border-radius: 18px; box-shadow: 0px 3px 12px hsla(0,0%,0%,0.3); overflow: hidden;}
.index-services .gallery .image img {display: block; width: 100%; height: 100%; object-fit: cover;}
.index-services .gallery .image.i1 {width: calc(40% - 12px); height: calc(40% - 12px);}
.index-services .gallery .image.i2 {width: calc(60% - 12px); height: calc(40% - 12px);}
.index-services .gallery .image.i3 {width: 100%; height: calc(20% - 24px);}
.index-services .gallery .image.i4 {width: calc(60% - 12px); height: calc(40% - 12px);}
.index-services .gallery .image.i5 {width: calc(40% - 12px); height: calc(40% - 12px);}

.index-services .gallery .image.i1 img {filter: grayscale(84%) brightness(84%);}
.index-services .gallery .image.i2 img {filter: brightness(84%);}
.index-services .gallery .image.i3 img {filter: brightness(84%);}
.index-services .gallery .image.i4 img {filter: brightness(84%);}
.index-services .gallery .image.i5 img {filter: grayscale(84%) brightness(84%);}


/*** FAQ LIST ***/

.index-services .faq-wrapper {width: 100%; padding: 90px 0px 0px 0px; z-index: 10;}
.index-services .faq-wrapper .faq-title {width: 100%; padding: 0px 0px 24px 0px; font-weight: 700; font-size: 30px; line-height: 36px; text-align: center; color: var(--yellow);}
.index-services .faq-wrapper .faq-list {width: 100%; gap: 30px;}
.index-services .faq-wrapper .faq-list .faq {width: calc(50% - 15px); padding: 24px; background-color: var(--white); border: solid 1px var(--white); border-radius: 18px;}
.index-services .faq-wrapper .faq-list .faq .question {padding: 9px 12px 9px 39px; font-weight: 700; font-size: 16px; line-height: 24px; color: var(--blue-dark); cursor: pointer;}
.index-services .faq-wrapper .faq-list .faq .question .plus {display: block; position: absolute; top: 50%; left: 12px; width: 18px; height: 18px; margin-top: -9px;}
.index-services .faq-wrapper .faq-list .faq .question .plus i {display: block; position: absolute; background-color: var(--yellow); border-radius: 999px;}
.index-services .faq-wrapper .faq-list .faq .question .plus i:first-child {top: 7px; left: 0px; width: 18px; height: 4px;}
.index-services .faq-wrapper .faq-list .faq .question .plus i:last-child {top: 0px; left: 7px; width: 4px; height: 18px; opacity: 1; transition: opacity linear 240ms, transform linear 240ms;}
.index-services .faq-wrapper .faq-list .faq.open {background-color: hsla(45,100%,96%,1); border: solid 1px var(--yellow);}
.index-services .faq-wrapper .faq-list .faq.open .question .plus i:last-child {opacity: 0; transform: translate(0px,18px);}
.index-services .faq-wrapper .faq-list .faq .answer {display: none; width: 100%; padding: 6px 12px 6px 12px; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--black);}
.index-services .faq-wrapper .faq-list .faq .answer p {width: 100%; padding-bottom: 6px;}
.index-services .faq-wrapper .faq-list .faq .answer p:last-child {padding-bottom: 0px;}
.index-services .faq-wrapper .faq-list .faq .answer li {width: 100%; padding: 0px 12px 6px 0px; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--black);}
.index-services .faq-wrapper .faq-list .faq .answer li::after {content: ''; display: block; position: absolute; top: 50%; right: 0px; transform: translateY(-50%); width: 4px; height: 4px; background-color: var(--black); border-radius: 100%;} 
.index-services .faq-wrapper .faq-list .faq .answer li:last-child {padding: 0px;}


@media screen and (max-width: 1500px) {
    .index-services .services-list {padding: 0px 0px 0px 15px;}
    .index-services .gallery {padding: 0px 15px 0px 0px;}
}

@media screen and (max-width: 1000px) {
    .index-services .services-list {width: 100%; padding: 0px 0px 60px 0px;}
    .index-services .gallery {position: relative; width: 100%; height: auto; aspect-ratio: 1 / 2; padding: 0px 0px 0px 0px;}
    .index-services .faq-wrapper .faq-list .faq {width: 100%;}
}

@media screen and (max-width: 500px) {
    .index-services {width: 100%; padding: 48px 0px;}
    .index-services .services-list {width: 100%; padding: 0px 0px 48px 0px; gap: 24px;}
    .index-services .service .price-swiper {position: relative; bottom: auto; left: auto; width: 100%; margin: 24px 0px 0px 0px;}
    .index-services .faq-wrapper {padding: 60px 0px 0px 0px;}
    .index-services .faq-wrapper .faq-list {width: 100%; gap: 24px;}
    .index-services .faq-wrapper .faq-list .faq {padding: 12px;}
}



/**************** INDEX REVIEWS ****************//**************** INDEX REVIEWS ****************//**************** INDEX REVIEWS ****************/

.index-reviews {width: 100%; padding: 120px 0px 60px 0px;}
.index-reviews .reviews-title {width: 100%; padding: 0px 0px 12px 0px; font-weight: 700; font-size: 36px; line-height: 40px; color: var(--blue-dark);}
.index-reviews .reviews-subtitle {width: 100%; padding: 0px 0px 48px 0px; font-weight: 400; font-size: 16px; line-height: 22px; color: var(--blue-dark);}

.index-reviews .reviews-swiper {width: 100%; height: auto;}
.index-reviews .reviews-swiper .swiper {width: 100%; height: auto; padding: 0px 0px 39px 0px;}
.index-reviews .reviews-swiper .swiper .swiper-pagination {position: absolute; bottom: 0px; left: 0px; width: 100%; flex-wrap: nowrap; gap: 6px;}
.index-reviews .reviews-swiper .swiper .swiper-pagination .swiper-pagination-bullet {width: 9px; height: 9px; background-color: var(--blue-dark); border-radius: 100%; opacity: 1;}
.index-reviews .reviews-swiper .swiper .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--yellow);}

.index-reviews .review {padding: 24px; background-color: var(--white); border: solid 1px var(--yellow); border-radius: 18px;}
.index-reviews .review .stars {width: 100%; padding: 0px 0px 18px 0px; gap: 6px;}
.index-reviews .review .stars svg {display: block; width: 18px; height: 18px; fill: var(--grey-body-bg);}
.index-reviews .review .stars[data-rating="1"] svg:nth-child(-n+1) {fill: var(--yellow);}
.index-reviews .review .stars[data-rating="2"] svg:nth-child(-n+2) {fill: var(--yellow);}
.index-reviews .review .stars[data-rating="3"] svg:nth-child(-n+3) {fill: var(--yellow);}
.index-reviews .review .stars[data-rating="4"] svg:nth-child(-n+4) {fill: var(--yellow);}
.index-reviews .review .stars[data-rating="5"] svg:nth-child(-n+5) {fill: var(--yellow);}
.index-reviews .review .text {font-weight: 400; font-size: 14px; line-height: 20px; color: var(--blue-dark);}

.index-reviews .review .author {align-items: center; align-content: center; padding: 18px 0px 0px 0px;}
.index-reviews .review .author .avatar {width: 54px; height: 54px; border-radius: 999px; overflow: hidden;}
.index-reviews .review .author .avatar img {display: block; width: 100%; height: 100%; object-fit: cover;}
.index-reviews .review .author .data {padding: 0px 12px 0px 0px;}
.index-reviews .review .author .data .name {padding: 0px 0px 3px 0px; font-weight: 700; font-size: 16px; color: var(--blue-dark);}
.index-reviews .review .author .data .location {padding: 3px 0px 0px 0px; font-weight: 400; font-size: 14px; color: var(--grey-text-light);}


@media screen and (max-width: 500px) {
    .index-reviews {width: 100%; padding: 60px 0px 30px 0px;}
    .index-reviews .reviews-title {padding: 0px 0px 12px 0px; font-size: 30px; line-height: 36px;}
    .index-reviews .reviews-subtitle {width: 100%; padding: 0px 0px 30px 0px;}
}



/**************** FOOTER CONTACTS ****************//**************** FOOTER CONTACTS ****************//**************** FOOTER CONTACTS ****************/

.footer-contacts {width: 100%; padding: 60px 0px;}
.footer-contacts .contacts-wrapper {padding: 60px; background-color: var(--yellow); border-radius: 24px; flex-wrap: nowrap; align-items: center; align-content: center;}
.footer-contacts .contacts-content {width: 540px; padding: 0px 0px 0px 60px;}
.footer-contacts .contacts-content .title {max-width: 360px; padding: 0px 0px 18px 0px; font-weight: 700; font-size: 36px; line-height: 40px; color: var(--blue-dark);}
.footer-contacts .contacts-content .subtitle {font-weight: 400; font-size: 16px; line-height: 22px; color: var(--blue-dark);}
.footer-contacts .contacts-content .contacts {padding: 60px 0px 0px 0px; gap: 30px;}
.footer-contacts .contacts-content .contacts :is(button, .button) {height: 48px; min-width: 200px; padding: 0px 30px; background-color: var(--white);}
.footer-contacts .contacts-content .contacts :is(button, .button).phone > i {width: 14px;}
.footer-contacts .contacts-content .contacts :is(button, .button).phone > i > svg {fill: var(--yellow);}
.footer-contacts .contacts-content .contacts :is(button, .button).whatsapp > i > svg {fill: var(--green-whatsapp);}

.footer-contacts .contacts-form {width: auto;}
.footer-contacts .contacts-form form {width: 100%;}
.footer-contacts .contacts-form .form-box {width: 100%; min-width: 300px; max-width: 480px;}

.footer-contacts .contacts-form .form-box .field-box.error-box {display: none; width: 100%; height: 36px;}
.footer-contacts .contacts-form .form-box .field-box.error-box .flex-acenter {width: 100%; height: 100%;}
.footer-contacts .contacts-form .form-box .field-box.error-box p {font-weight: 700; font-size: 16px; color: var(--red-main-br);}

.footer-contacts .contacts-form .form-box .button-box {width: 100%; height: 48px;}
.footer-contacts .contacts-form .form-box .button-box :is(button, .button) {width: 100%; height: 100%; color: var(--yellow); background-color: var(--blue-dark);}
.footer-contacts .contacts-form .form-box .button-box :is(button, .button) .sync {
    position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0px 0px -18px; fill: var(--yellow);
    opacity: 0; pointer-events: none; transition: opacity linear 200ms; animation: iso-sync-rotate 2000ms linear infinite; z-index: 10;
}
.footer-contacts .contacts-form .form-box .button-box .submit-message {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; pointer-events: none;}
.footer-contacts .contacts-form .form-box .button-box .submit-message .flex-acenter {width: 100%; height: 100%;}
.footer-contacts .contacts-form .form-box .button-box .submit-message p {font-weight: 700; font-size: 16px; color: var(--blue-dark);}

.footer-contacts .contacts-form .form-box .button-box.sync :is(button, .button) > * {opacity: 0;}
.footer-contacts .contacts-form .form-box .button-box.sync :is(button, .button) .sync {opacity: 1;}
.footer-contacts .contacts-form .form-box .button-box.sync.submit :is(button, .button) {opacity: 0;}
.footer-contacts .contacts-form .form-box .button-box.sync.submit .submit-message {opacity: 1;}


@media screen and (max-width: 1300px) {
    .footer-contacts .contacts-wrapper {padding: 48px;}
    .footer-contacts .contacts-content {width: 500px; padding: 0px 0px 0px 48px;}
}

@media screen and (max-width: 1000px) {
    .footer-contacts .contacts-wrapper {flex-wrap: wrap;}
    .footer-contacts .contacts-content {width: 100%; padding: 0px 0px 48px 0px;}
    .footer-contacts .contacts-content .title {max-width: 100%;}
    .footer-contacts .contacts-content .contacts {justify-content: center; padding: 24px 0px 0px 0px;}
}

/*
@media screen and (max-width: 800px) {
    .footer-contacts .contacts-content .contacts {display: none;}
}
*/

@media screen and (max-width: 500px) {
    .footer-contacts {padding: 30px 0px 0px 0px;}
    .footer-contacts .contacts-wrapper {padding: 30px;}
    .footer-contacts .contacts-content {padding: 0px 0px 30px 0px;}
    .footer-contacts .contacts-content .title {padding: 0px 0px 12px 0px; font-size: 30px; line-height: 36px;}
    .footer-contacts .contacts-form .form-box {min-width: 240px;}
}



/**************** TEXT PAGE ****************//**************** TEXT PAGE ****************//**************** TEXT PAGE ****************/

.text-page-box {width: 100%; padding: 60px 0px;}
.text-page-box .page-wrapper {width: 100%; padding: 60px; background-color: var(--white); border-radius: 24px;}
.text-page-box .page-title {width: 100%; padding: 0px 0px 48px 0px; font-weight: 700; font-size: 36px; line-height: 40px; text-align: center; color: var(--blue-dark);}
.text-page-box .page-content {width: 100%; padding: 0px 0px 0px 0px; font-weight: 400; font-size: 16px; line-height: 22px; color: var(--black);}
.text-page-box .page-content h3 {width: 100%; padding: 12px 0px 18px 0px; font-weight: 700; font-size: 18px; line-height: 24px;}
.text-page-box .page-content p {width: 100%; padding: 0px 0px 18px 0px;}
.text-page-box .page-content p:last-child {padding: 0px;}
.text-page-box .page-content b {font-weight: 700;}
.text-page-box .page-content a {color: hsla(222,100%,50%,1);}
.text-page-box .page-content ol, .text-page-box .page-content ul {display: block; position: relative; padding: 0px 0px 6px 0px;}
.text-page-box .page-content li {margin-bottom: 12px; padding: 0px 18px 0px 0px;}
.text-page-box .page-content li::after {content: ''; display: block; position: absolute; top: 10px; right: 0px; width: 4px; height: 4px; background-color: var(--black); border-radius: 100%;}
.text-page-box .page-content li:last-child {margin-bottom: 0px;}
.text-page-box .page-content .nobull li {padding: 0px 0px 0px 0px;}
.text-page-box .page-content .nobull li:after {display: none;}


@media screen and (max-width: 500px) {
    .text-page-box {width: 100%; padding: 48px 0px;}
    .text-page-box .page-wrapper {padding: 24px;}
    .text-page-box .page-title {padding: 0px 0px 18px 0px; font-weight: 700; font-size: 30px; line-height: 36px;}
}