/* jumbotron */
.hero_section {
    background-image: url('/img/hero_mob.jpg');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 460px;
    padding-top: 40px;
}

.hero_text {
    max-width: 600px;
}

.ttl-hero {
    font: var(--param--ttl--first);
    margin-bottom: 12px;
    color: var(--b-c--black);
    max-width: 499px;
}

.ttl_sub-hero {
    font: var(--param--txt--main);
    color: var(--b-c--grey);
    margin-bottom: 28px;
}


/*  */
.vigoda_list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 28px;
}

.vigoda_list .vigoda_card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 48px 1fr;
    gap: 8px;
}

.vigoda_list .vigoda_card img {
    height: 100%;
    width: auto;
}

.vigoda_list .vigoda_ttl {
    font: var(--param--txt--main);
    color: var(--b-c--black);
}

.vigoda_list .vigoda_ttl span {
    font: var(--param--txt--main);
    color: var(--b-c--grey);
}
.production_section,
.advantages_section {
    width: 100%;
    padding: 60px var(--padding--side) 20px var(--padding--side);
    overflow: hidden;
}

.advantages_slide section {
    overflow: visible;
    padding: 0;
}
.advantages_section-slider {
    overflow: hidden;
    max-height: min-content;
}
.advantages_section-slider .swiper {
    margin-bottom: 30px;
    height: 363px;
}

.coutries_pic {
    width: auto !important;
    max-width: inherit;
}
.counties_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
	list-style-type: none; 
	counter-reset: num;
}

.counties_list .country {
    font: var(--param--txt--geography);
    color: var(--b-c--grey);
    margin-right: 12px;
}

.counties_list .country::before {
    font: var(--param--txt--geography);
	content: counter(num); 
	counter-increment: num;
	display: inline-block;
	color: var(--b-c--black);
	text-align: left;
    margin-right: 8px;
}

.advantages_CA {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.advantages_CA img:last-child {
    position: relative;
    left: -12px;
}
/* partnership_section */
.partnership_section {
    background-color: var(--b-c--Lgrey);
    background-image: url('/img/partnership/bgrd_mob.jpg');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    padding-bottom: 500px;
}
.partnership_list {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.partnership_item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.partnership_item::before {
    content: ' ';
    display: block;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='14.3999' width='32' height='3.2' rx='1.6' fill='%23FF3454'/%3E%3Crect x='14.4' y='32' width='32' height='3.2' rx='1.6' transform='rotate(-90 14.4 32)' fill='%23FF3454'/%3E%3C/svg%3E%0A");
}
.partnership_item p {
    font: var(--param--txt--main);
    color: var(--b-c--black);
}

.partnership_item p span {
    font: var(--param--txt--main);
    color: var(--b-c--grey);
}

/* production */
.production_slider {
    display: flex;
    gap: 80px;
    overflow: hidden;
}
.production_slider .slider_wrapper {
    display: flex;
    min-width: 100%;
}

.production_slide {
    display: flex!important;
    flex-direction: column;
    gap: 36px;
}

.prod_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}


.prod_grid img {
    border-radius: 12px;
    overflow: hidden;
}

.prod_grid img:first-child {
    grid-column: span 2;
}

/* assortment */
.assortment_section .ttl {
    text-align: center;
}
.ages_slider .swiper-wrapper,
.assortment_slider .swiper-wrapper {
    width: fit-content!important;
}
.assortment_slider {
    overflow: visible!important;;
}

.assortment_list-ages {
    display: grid!important;
    width: fit-content!important;
    grid-template-columns: repeat(5, 105px);
    gap: 12px;
    margin: 36px 0 60px 0;
}

.assortment_card-ages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.assortment_card-ages img {
    border-radius: 12px;
    overflow: hidden;
}

.assortment_ttl-ages {
    font: var(--param--ttl--ages);
    color: var(--b-c--red-txt);
}

.assortment_list-categories {
    display: grid!important;
    grid-template-columns: repeat(4, 230px);
    grid-template-rows: repeat(2, 230px);
    row-gap: 21px;
    column-gap: 12px;
    margin-top: 36px;
    margin-bottom: 60px;
    width: fit-content!important;
}

.assortment_card-categories {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height:fit-content;
}
.assortment_card-categories::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0; bottom: 0;
    left: 0; right: 0;
    width: 100%;
    height: 100%;
    background: var(--b-g--dark-gradient);
}

.assortment_card-categories::after {
    content: "";
    position: absolute;
    border-radius: 100%;
    overflow: hidden;
    right: 16px;
    bottom: 16px;
    background-color: var(--b-c--white);
    background-image: url("data:image/svg+xml,%3Csvg width='54' height='54' viewBox='0 0 54 54' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_9327_404)'%3E%3Crect x='3' y='2' width='48' height='48' rx='24' fill='white' shape-rendering='crispEdges'/%3E%3Cpath d='M28 32L34 26M34 26L28 20M34 26L21 26' stroke='%23202020' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_9327_404' x='0.2' y='0.2' width='53.6' height='53.6' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_9327_404'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_9327_404' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: cover;
    width: 40px;
    height: 40px;
    z-index: 2;
}

.assortment_ttl-categories {
    font: var(--param--ttl--categories);
    color: var(--b-c--white);
    position: absolute;
    bottom: 29px;
    left: 16px;
    z-index: 2;
}

.assortment_card-categories img {
    width: 100%;
    height: auto;
}

.assortment_boots {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding-bottom: 60px;
}

/* partners */
.partners_section .ttl {
    text-align: center;
}

.partners_col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.partners_row {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
}

/* iphone */
.reviews_section .ttl {
    color: var(--b-c--red-txt);
    text-align: center;
}


/* choose section */
.choose_section .ttl {
    text-align: center;
}

.choose_table {
    padding: 36px 20px;
    background-color: var(--b-c--VLgrey);
    border-radius: 12px;
}

.choose_table .table_body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.table_header {
    font: var(--param--txt--main);
    color: var(--b-c--black);
    text-align: center;
}
.table_header,
.table_body li {
    padding-bottom: 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
}

.table_body li {
    border-bottom: 1px solid var(--b-c--Lgrey);
}

.table_body img {
    margin: auto;
}

.table_body span {
    grid-column: span 2;
    font: var(--param--txt--main);
    color: var(--b-c--grey);
    max-width: 300px;
}
/* feedback */
.feedback_section .ttl {
    text-align: center;
}

.feedback_form {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

/*contacts */
.contacts_section {
    background-color: var(--b-c--VLgrey);
    padding: 40px 0;
}

.contacts_section .contacts_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
}

.contacts_section .contacts_container a {
    margin: auto;
}
.contacts_section .header_contact {
    font: var(--param--txt--main);
}

.contacts_section .contacts_socials {
    margin: auto;
    display: flex;
    gap: 28px;
}
.contacts_section .contacts_socials a,
.contacts_section .contacts_socials svg {
    width: 32px;
    height: 32px;
}

/* FAQ */
.faq_section .container {
    display: flex;
    flex-direction: column;
}
.faq_section .ttl {
    text-align: center;
    max-width: 250px;
    margin: 0 auto 40px auto ;
}
.faq_col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gal_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: -1px;
}
.popup-gallery {
    position: relative;
}

.popup-gallery .popup_btn-close {
    background-color: var(--b-c--white);
    position: fixed;
}

.reviews_section .container:first-child {
    background-color: var(--b-c--VLgrey);
    padding: var(--padding--side) var(--padding--side) 0 var(--padding--side);
}

.iphone {
    position: relative;
    max-width: 480px;
    max-height: 730px;
    margin: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
}

.iphone::before {
    position: absolute;
    top: 0;
    left: 0; right: 0;
    z-index: 1;
    content: 'Отзывы Wildberries';
    color: var(--b-c--white);
    background-color: #4F0C8A;
    text-align: center;
    padding: 90px 0 20px 0;
    border-radius: 50px 50px 0 0;
    margin: 3% 4% 0 4%;
}

.iphone:has(.iphone_slider.swiper-slide-active:nth-child(1))::before {
    content: 'Отзывы Lamoda';
    color: var(--b-c--white);
    background-color: var(--b-c--black);
}

.iphone:has(.iphone_slider.swiper-slide-active:nth-child(2))::before {
    content: 'Отзывы Ozon';
    color: var(--b-c--white);
    background-color: #074af0;
}

.iphone:has(.iphone_slider.swiper-slide-active:nth-child(3))::before {
    content: 'Отзывы Яндекс.Маркет';
    color: var(--b-c--black);
    background-color: #f9df00;
}

.iphone:has(.iphone_slider.swiper-slide-active:nth-child(4))::before {
    content: 'Отзывы Wildberries';
    color: var(--b-c--white);
    background-color: #4F0C8A;
}

.iphone_content {
    background-color: var(--b-c--white);
    position: absolute; 
    z-index: 3;
    margin: 5%;
    padding: 20px;
    top: 120px;
    left: 0;
    right: 0;
    overflow: hidden;
}

.iphone_slider {
    overflow: hidden;
    width: 100%!important;
}

.iphone_lent {
    display: flex;
    flex-direction: column;
}

.iphone_review {
    display: grid!important;
    grid-template-columns: 88px 1fr;
    height: fit-content!important;
    gap: 22px;
}

.iphone_review img {
    object-fit: cover;
}

.review_text {
    background-color: var(--b-c--VLgrey);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.review_header {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    justify-content: space-between;
    vertical-align: middle;

}

.reviews_links {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 8px;
    justify-content: center;
}
/* .reviews_links img {display: flex;} */
.reviews_links button {
    width: 40px;
    height: 40px;
    border-radius: 100%;
}
.reviews_conlink {
    position: relative;
}

.reviews_links[data-cur-index="0"] .review_btn[data-slide-index="0"],
.reviews_links[data-cur-index="1"] .review_btn[data-slide-index="1"],
.reviews_links[data-cur-index="2"] .review_btn[data-slide-index="2"],
.reviews_links[data-cur-index="3"] .review_btn[data-slide-index="3"] {
    border: 1px solid var(--b-c--black);
    padding: 2px;
}

@media (max-width: 768px) {
    .production_slide.swiper-slide,
    .advantages_slide.swiper-slide {
        height: auto!important;
        margin-bottom: 80px;
    }
    
    .countries_slider,
    .advantages_section-slider {
        overflow: visible!important;
    }
    /* .assortment_slider .swiper-wrapper, */
    .countries_slider .swiper-wrapper {
        width: fit-content;
    }
    .production_slider .swiper-wrapper,
    .advantages_lent.swiper-wrapper {
        flex-direction: column;
    }
}
@media (min-width: 768px) {
    /* jumbotron */
    .hero_section {
        background-image: url('/img/hero_desk.jpg');
        background-position: 10% bottom;
        /* background-size: cover; */
        padding-bottom: 178px;
        padding-top: 178px;
    }

    .ttl-hero {
        margin-bottom: 20px;
        letter-spacing: -2px;
    }

    .ttl_sub-hero {
        margin-bottom: 48px;
    }

    .vigoda_list {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 28px;
        row-gap: 40px;
    }

    .vigoda_list .vigoda_card {
        grid-template-columns: 1fr;
        grid-template-rows: 80px 1fr;
        gap: 12px;
    }

    .coutries_pic {
        height: 100%;
        width: auto!important;
        margin: auto;
    }

    .counties_list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style-type: none; 
        counter-reset: num;
    }
    .advanages_section-slide .ttl {
        margin-bottom: 60px;
    }
    .advantages_section {
        padding: var(--padding--side);
    }
    .advanages_section-slide {
        max-height: 600px;
    }
    .advantages_CA {
        display: grid;
        column-gap: 310px;
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: repeat(6, 1fr);
        row-gap: 0;
    }

    .advantages_CA img:first-child {grid-area: 2 / 2 / 6 / 3;}
    .advantages_CA img:last-child {grid-area: 1 / 1 / 7 / 2; left: 0;}

    /* partnership_section */
    .partnership_section {
        background-image: url('/img/partnership/bgrd_desk.jpg');
        background-position: right bottom;
        padding-bottom: 0;
    }
    .partnership_list {
        gap: 40px;
    }
    .partnership_list,
    .partnership_section .ttl {
        width: 583px;
    }
    .partnership_item {
        display: grid;
        grid-template-columns: 40px 1fr;
        gap: 26px;
    }

    /* production */
    .production_slider .slider_wrapper {
        display: flex;
        /* flex-direction: column; */
        gap: 0;
    }

    .production_slide {
        flex-direction: row;
        gap: 77px;
        /* min-width: 100%; */
        max-height: 600px;
    }

    .production_slide .txt-big {
        max-width: 683px;
    }

    .prod_video {
        max-width: 381px;
        margin-left: 58px;
        height: fit-content;
    }

    .prod_grid {
        min-width: 586px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 12px;
    }
    
    .prod_grid img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .prod_grid img:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }

    .assortment_list-categories {
        display: grid;
        grid-template-columns: repeat(8, 380px);
        grid-template-rows: repeat(1, 380px);
        /* row-gap: 21px; */
        column-gap: 28px;
        margin-top: 140px;
        margin-bottom: 140px;
    }

    .assortment_list-ages {
        /* display: grid; */
        grid-template-columns: repeat(5, minmax(0%, 1fr));
        gap: 27px;
        max-width: 100%;
    }
    .assortment_card-ages {
        gap: 16px;
    }

    .assortment_boots {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
        padding-bottom: 0px;
    }
    .assortment_boots .txt-big {
        padding-right: 40px;
    }

    /* partners */
    .partners_section .ttl {
        text-align: center;
    }
    
    .partners_col {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 40px;
    }
    
    .partners_row {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 22px;
    }


    /* choose section */
    .choose_table {
        padding: 40px;
    }
    
    .table_header {
        margin-bottom: 58px;
    }
    .table_header,
    .table_body li {
        padding-bottom: 0;
        grid-template-columns: 3fr 1fr 1fr;
        row-gap: 20px;
    }
    
    .table_header span:first-child {
        grid-area: 1 / 2 / 2 / 3;
    }
    .table_header span:last-child {
        grid-area: 1 / 3 / 2 / 4;
    }
    .table_body span {
        grid-column: span 1;
        max-width: inherit;
    }
    
    /* feedback */
    .feedback_section .container {
        max-width: 790px;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 60px;
    }
    .feedback_section .ttl  {
        max-width: 594px;
        margin: auto;
    }
    .feedback_section .ttl br {
        display: none;
    }

    .feedback_form {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
        column-gap: 28px
    }

    /*contacts */
    .contacts_section {
        padding: 80px 0;
    }

    .contacts_section .contacts_container {
        flex-direction: row;
        gap: 80px;
        margin: auto;
        max-width: fit-content;
    }

    .contacts_section .contacts_socials a,
    .contacts_section .contacts_socials svg {
        width: 52px;
        height: 52px;
    }
    
    .contacts_section .header_contact::before {
        width: 52px;
        height: 52px;
    }

    /* faq */
    .faq_section .ttl {
        text-align: left;
        max-width: inherit;
        margin: 0 auto 60px auto ;
    }

    .faq_col {
        gap: 20px;
    }

    .gal_grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .reviews_links {
        flex-direction: column;
        width: fit-content;
        position: absolute;
        bottom: 120px;
        left: min(10vw, 325px);
    }
    .reviews_links button {
        width: 48px;
        height: 48px;
    }
}


@media (min-width: 769px) {
    .popup-gallery {
        padding: 0 var(--padding--side);
    }
    .popup-gallery .popup_btn-close {
        width: 42px;
        height: 42px;
        right: 42px;
    }
}