/*
Theme Name: 18BYTES
Template: astra
Description: Дочерняя тема для темы astra
Author: 18bytes
Author URI: https://18bytes.ru/
Version: 1.0
 */

:root {
    --main-light: #f5e9e6;
    --main-dark: #1b1a20;
    --orange: #f85834;
}
.site-content {background-color: var(--main-light);}
.site-content > .ast-container {background-color: #fff;}
a:focus {
    outline: unset;
}
header .list-items-wrapper,
footer .list-items-wrapper {
    display: flex;
    justify-content: end;
}
header .list-items-wrapper li,
footer .list-items-wrapper li {
    margin-left: 20px;
    padding: 0!important;
}
.astra-widget-list-icons li:last-child .icon svg {
    width: 35px!important;
    height: 35px!important;
}
.main-banner {
    width: 100%;
    height: 100vh;
    background-color: var(--main-dark);
}
.banner-img {position: relative;}
.banner-back {
    width: 100%;
    height: 100%;
    background: url("./images/main-banner.webp") no-repeat center;
    background-size: cover;
}
.banner-back-over {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.banner-back-over img {
    width: 102%;
    height: 102%;
    object-fit: cover;
    transition: all 0.1s ease;
}
.banner-content {
    position: absolute;
    top: 150px;
    width: 100%;
    text-align: center;
}
.main-banner h1 {
    font-size: 96px;
    line-height: 96px;
    font-weight: 700;
    color: var(--orange);
}
.main-banner h1 span {color: #fff;}
.main-banner p {
    color: #ffffff;
    font-size: 18px;
    line-height: 27px;
    font-weight: 500;
}
.banner-back-desc {
    position: absolute;
    top: 60%;
    width: 100%;
    max-width: 1240px;
    height: 30%;
    margin: 0 auto;
}
.banner-desc {
    display: flex;
    justify-content: center;
    border-radius: inherit;
}
.banner-desc-box {
    position: relative;
    transition: all 0.1s ease;
}
.banner-desc-icon {
    width: 60px;
    height: 60px;
    color: #ffffff;
    background-color: var(--orange);
    border-color: transparent;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
    border-radius: 50em;
}
.banner-desc-text {
    display: none;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
.banner-desc-icon:hover + div {display: block;}
.banner-desc-01 .banner-desc-text,
.banner-desc-02 .banner-desc-text,
.banner-desc-03 .banner-desc-text {left: 80px;}
.banner-desc-04 .banner-desc-text {left: -270px;}
.banner-desc-01,
.banner-desc-02 {padding-right: 200px;}
.banner-desc-03,
.banner-desc-04 {padding-left: 200px;}
.banner-desc-text > div {
    color: #fff;
    background-color: #754646;
    border-radius: 10px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
    width: 250px;
    padding: 15px;
}

.ideal {
    background-color: var(--main-dark);
    position: relative;
    padding-top: 80px;
    padding-bottom: 100px;
}
.ideal_back {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    background: url(images/back-ideal.webp) no-repeat center;
    background-size: cover;
}
.ideal h2 {color: #fff;}
.ideal_text {
    color: #fff;
    margin: 10px 0;
    font-weight: 500;
}

.pro {
    background-color: var(--main-light);
    padding-top: 80px;
    padding-bottom: 100px;
}
.swiper-main {height: 430px;}
.swiper-main img {
    border-radius: 20px;
}
.swiper-button-next, .swiper-button-prev {
    color: var(--orange);
}
.swiper-pagination-bullet-active {
    background: var(--orange);
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 20px;
    font-weight: 500;
}
.swiper-button-prev, .swiper-button-next {
    border-radius: 50em;
    border: 1px solid var(--orange);
    width: 35px;
    height: 35px;
    background: linear-gradient(45deg, #F5E9E6D0, #F5E9E6D0);
}

.before-after {
    background-color: #1B1A20;
    padding-top: 80px;
    padding-bottom: 100px;
}
.before-after img {
    border-radius: 20px;
    margin-bottom: 20px;
}
.before-after .row > section:first-child,
.before-after .row > section:first-child h2 {
    color: #A5A5A5;
}
.before-after .row > section:last-child,
.before-after .row > section:last-child h2 {
    color: #FFF;
}
.video {
    background-color: var(--main-light);
    padding-top: 80px;
    padding-bottom: 100px;
}
.why {
    background-color: var(--main-dark);
    padding-top: 80px;
    padding-bottom: 100px;
    color: #FFF;
}
.why h2 {color: #FFF;}
.why img {border-radius: 20px;}
.why .big-num {
    color: var(--orange);
    font-size: 36px;
    line-height: 1.00;
    font-weight: 600;
}
.why .small-text {
    font-size: 16px;
    line-height: 1.20;
    font-weight: 400;
}
.process {
    background-color: var(--main-light);
    padding-top: 80px;
    padding-bottom: 100px;
}
.process ul {list-style: none;}
.process_list-num {
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background-color: #FFF;
    color: var(--orange);
    font-size: 55px;
    line-height: 1.00;
    font-weight: 500;
    border-radius: 50em;
}
.process_list-header{
    font-size: 32px;
    line-height: 1.00;
    font-weight: 500;
}
.process_list-text {
    font-size: 16px;
    line-height: 1.50;
    font-weight: 400;
}
.process li:first-child:after,
.process li:nth-child(2):after {
    position: absolute;
    content: "";
    width: 150px;
    height: 50px;
    top: 25px;
    right: -75px;
    background: url(images/arrow.svg) no-repeat center;
    background-size: contain;
}
.main-page .price {
    position: relative;
    background-color: var(--main-light);
    padding-top: 80px;
    padding-bottom: 80px;
}
.price_back {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    background: url(images/meat-back.webp) no-repeat center;
    background-size: cover;
}
.main-form {
    background-color: var(--main-dark);
    padding-top: 80px;
    padding-bottom: 80px;
}
.main-form section {
    background-color: #FFF;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.main-form_image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.main-form_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-form h2 {
    color: var(--orange);
    font-size: 57px;
    line-height: 1;
    font-weight: 700;
}
@media (max-width: 1399px) {
    .main-banner h1 {
        font-size: 76px;
        line-height: 76px;
    }
}
@media (max-width: 1199px) {
    .astra-widget-list-icons .link-text {display: none;}
    .swiper-main {
        height: auto;
        padding-bottom: 40px;
    }
}
@media (max-width: 991px) {
    .process li:after {display: none!important;}
    .process {padding-bottom: 20px;}
    .main-form {padding-top: 0;}
    .main-form section {border-radius: 20px;}
    .wpcf7-form label {width: 100%;}
    .wpcf7-submit {
        width: 100%;
        margin: 20px 0;
    }
    .wpcf7-spinner {
        opacity: 0.5;
        position: absolute;
        right: 0;
        bottom: 35px;
    }
    .banner-back-over {
        top: auto;
        bottom: 0;
    }
    .banner-back-over img {
        width: 100%;
        height: 100%;
    }
    .pro li img {width: 60px;}
    .swiper-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {bottom: 0;}
}
@media (max-width: 767px) {
    .main-btn .send-request {width: 100%;}
    .main-btn .ast-custom-button {
        text-transform: uppercase;
        text-align: center;
    }
    .main-banner {
        position: relative;
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .banner-back-desc {position: relative;}
    .banner-img {
        position: unset;
        order: 2;
    }
    .banner-content {
        position: unset;
        margin-top: 150px;
        z-index: 1;
    }
    .main-banner h1 {
        font-size: 40px;
        line-height: 40px;
    }
    .banner-back {
        position: absolute;
        bottom: 0;
    }
    .banner-back-desc {
        flex-direction: column;
        height: auto;
    }
    .banner-desc-box {
        position: unset;
        display: flex;
        align-items: center;
    }
    .banner-desc-text {
        display: block;
        position: relative;
        top: auto;
        transform: unset;
        padding-left: 20px;
    }
    .banner-desc-text > div {
        width: 320px;
        padding: 20px;
    }
    .banner-desc-01,
    .banner-desc-02,
    .banner-desc-03,
    .banner-desc-04 {padding: 15px 0;}
    .banner-desc-01 .banner-desc-text,
    .banner-desc-02 .banner-desc-text,
    .banner-desc-03 .banner-desc-text,
    .banner-desc-04 .banner-desc-text {left: auto;}
    .why .big-num {font-size: 50px;}
    .why .small-text {font-size: 18px;}
    .video iframe {height: 400px;}
}
@media (max-width: 600px) {
    .video iframe {height: 300px;}
}
@media (max-width: 575px) {
    .banner-desc-box {
        width: 100%;
        padding: 0 20px;
    }
    .banner-desc-text {width: calc(100% - 60px);}
    .banner-desc-text > div {width: 100%;}
    .pro ul {margin: 0;}
    .video iframe {height: 220px;}
    .process_list-header {font-size: 28px;}
    .main-form h2 {font-size: 34px;}
    header .list-items-wrapper, footer .list-items-wrapper {justify-content: center;}
}
.astra-shop-summary-wrap {
	height: 100%;
    display: flex;
    flex-direction: column;
}
.woocommerce-js ul.products li.product .button {
	text-align: center;
	margin-top: auto;
}