@import url('https://fonts.cdnfonts.com/css/steppe-trial');
@media(min-width:1920px) {
    html {
        font-size: 1px;
    }
}

* {
    box-sizing: border-box;
}

html {
    font-size: 0.052084vw;
    scroll-behavior: smooth;
    margin: 0 auto;
    padding: 0;
}

body {
    font-size: 16rem;
    font-family: 'Steppe Trial', sans-serif;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    --global-color-akcent: #F25B2C;
    --global-color: #06001C;
}
td, th{
    padding: 10rem 15rem;
}
a,
p {
    font-size: 16rem;
    font-weight: 400;
    line-height: 120%;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
input[type="text"], input[type="email"], input[type="tel"], select{
    padding: 10rem;
    height: 42rem;
    border:1rem solid var(--global-color-akcent);
    width: 100%;
    font-size: 16rem;
    font-family: 'Steppe Trial';
    border-radius: 12rem;
}

input[type="submit"]{
    color: #FFF;
    text-align: center;
    font-family: Steppe Trial;
    font-size: 16rem;
    font-weight: 500;
    padding: 16rem 80rem;
    background-color: var(--global-color-akcent);
    border: 2rem solid var(--global-color-akcent);
    border-radius: 5rem;
    transition: background-color ease .5s;
    cursor: pointer;
}
input[type="submit"]:hover{
    background-color: #fff;
    color: var(--global-color-akcent);
}
textarea{
    width: 100%;
    border:1rem solid var(--global-color-akcent);
    border-radius:0;
    height: 120rem;
    padding: 10rem;
}
button{
    cursor: pointer;
}
.row{
    width: 100%;
}
.column{
    width: 1360rem;
    margin: 0 auto;
}
header{
    border-bottom: 1rem solid #7D7D7D;
}
.no-scroll{
    overflow: hidden;
}
.header{
    display: flex;
    justify-content: space-between;
    height: 100rem;
    align-items: center;
}
.header .logo img{
    height: 50rem;
    object-fit: contain;
}
.header .menu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap:30rem;
}
.header .menu ul a{
    color: var(--global-color);
    font-size: 18rem;
    font-weight: 400;
}
.header .menu ul a:hover {
  text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
}
.header .menu .current-menu-item a{
    font-weight: 600;
}
.headerButton a{
    display: block;
    height: 42rem;
    padding: 6rem 27rem;
    border-radius: 6rem;
    border: 2rem solid var(--global-color-akcent);
    text-align: center;
    background-color: var(--global-color-akcent);
    color: #FFF;
    font-size: 18rem;
    font-weight: 400;
    transition: background-color ease .5s;
    line-height: 150%;
}
.headerButton a:hover{
    background-color: #fff;
    color: var(--global-color-akcent);
}
.header .whatsapp{
    font-size: 18rem;
    font-weight: 600;
    display: flex;
    gap: 10rem;
    align-items: center;
    line-height: 100%;
    color: var(--global-color);
}
.header .whatsapp img{
    height: 42rem;
}
.footerTop{
    background-color: var(--global-color-akcent);
}
.footerTopBox{
    height: 150rem;
    display: flex;
    justify-content: center;
    gap:40rem;
    align-items: center;
}
.footerTopBoxText{
    color: #FFF;
    font-size: 32rem;
    font-weight: 700;
    line-height: 44rem;
}
.footerTopBoxButton a{
    display: block;
    color: var(--global-color);
    font-size: 18rem;
    padding: 20rem 27rem;
    font-weight: 400;
    border-radius: 6rem;
    border: 2rem solid #FFF;
    background: #FFF;
    transition: background ease .5s;
}
.footerTopBoxButton a:hover{
    color:#fff;
    background: var(--global-color-akcent);
}
.footer{
    background-color: var(--global-color);
}
.footer .block{
    display: flex;
    justify-content: space-between;
    padding: 60rem 0;
    border-bottom: 1rem solid #7D7D7D;
}
.boxLogo{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:20rem;
    width: 420rem;
    color: #FFF;
    font-size: 20rem;
    font-weight: 400;
    line-height: 32rem;
}
.boxLogo img{
    height: 70rem;
}
.footer .boxMenu{
    display: flex;
    gap:150rem;
}
.boxMenuCategory, .boxMenuInfo{
    width: 230rem;
}
.titleMenuFooter{
    color: #FFF;
    font-size: 16rem;
    font-weight: 600;
    margin-bottom: 20rem;
}
.boxMenu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap:20rem;
}
.boxMenu ul a{
    color: #7D7D7D;
    font-size: 16rem;
    font-weight: 400;
    line-height: 24rem;
}
.copyright{
    height: 90rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.copyright a{
    color: #7D7D7D;
    font-size: 16rem;
    font-weight: 400;
    line-height: 24rem;
}
.home .welcome{
    padding: 80rem 0;
}
.home:nth-child(1){
    border-bottom: 1rem solid #7D7D7D;
}
.welcome .slide{
    padding: 80rem 90rem;
    height: 400rem;
}
.welcome .slide hr{
    width: 300rem;
    border-color: var(--global-color-akcent);
    margin: 0 0 40rem 0;
}
.welcome .slide .slideInfo{
    width: 360rem;
}
.welcome .slideInfo .titleSlide{
    color: #FFF;
    font-size: 24rem;
    font-weight: 700;
    margin-bottom: 15rem;
}
.welcome .slideInfo .subtitleSlide{
    color: #D2D2D2;
    font-size: 16rem;
    font-weight: 400;
    line-height: 24rem;
    margin-bottom: 50rem;
}
.welcome .slideInfo .buttonSlide a{
    display: inline-block;
    padding: 14rem 27rem;
    font-size: 18px;
    color:#fff;
    font-weight: 400;
    border-radius: 6rem;
    border: 2rem solid var(--global-color-akcent);
    background: var(--global-color-akcent);
    transition: background ease .5s;
}
.welcome .slideInfo .buttonSlide a:hover{
    background: #f25b2c00;
    color:var(--global-color-akcent);
}
.welcome .slide .slideControl{
    position: absolute;
    top:20rem;
    right: 20rem;
    display: flex;
    gap:10rem;
}
.welcome .slide .slideControl>div{
    cursor: pointer;
}
.welcome .title{
    color: #06001C;
    text-align: center;
    font-size: 76rem;
    font-weight: 700;
    line-height: 80rem;
    width: 1120rem;
}
.welcome .subtitle{
    color: #7D7D7D;
    text-align: center;
    font-size: 24rem;
    font-weight: 400;
    line-height: 36rem;
    width: 980rem;
}
.welcomeInfo{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 44rem;
    margin-bottom: 80rem;
}
.welcome .blockButton .lefts{
    padding: 20rem 16rem;
    color: #06001C;
    text-align: center;
    font-size: 18rem;
    font-weight: 400;
    border-radius: 6rem;
    border: 2rem solid #7D7D7D;
}
.welcome .blockButton{
    display: flex;
    gap:20rem;
}
.welcome .blockButton .rights{
    position: relative;
    padding: 20rem 27rem 20rem 60rem;
    border-radius: 6rem;
    text-align: center;
    font-size: 18rem;
    font-weight: 400;
    color: #fff;
    border: 2rem solid var(--global-color-akcent);
    background-color: var(--global-color-akcent);
}
.welcome .blockButton .rights:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 25rem;
    width: 22rem;
    height: 22rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-50%);
}
.advant{
    margin-top: 80rem;
}
.advant .items{
    display: flex;
    justify-content: center;
    gap:150rem;
}
.advant .item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:20rem;
    width: 270rem;
}
.advant .itemTitle{
    color: var(--global-color-akcent);
    text-align: center;
    font-size: 48rem;
    font-weight: 700;
    line-height: 58rem;
}
.advant .itemSubtitle{
    color: #7D7D7D;
    text-align: center;
    font-size: 20rem;
    font-weight: 400;
    line-height: 32rem;
}
.home .assort{
    padding: 80rem 0;
}
.assortment{
    display: flex;
    gap:80rem;
}
.blockLeft{
    width: 540rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.blockLeftInfo{
    display: flex;
    flex-direction: column;
    gap:30rem;
}
.blockLeftInfoTitle{
    color: var(--global-color);
    font-size: 48rem;
    font-weight: 500;
    line-height: 56rem;
}
.blockLeftInfoText p{
    color: var(--global-color);
    font-size: 16rem;
    font-weight: 400;
    line-height: 24rem;
    margin-bottom: 30rem;
}
.blockLeftButton{
    width: 300rem;
    display: flex;
    flex-direction: column;
    gap:30rem;
}
.blockLeftButtonText{
    color: var(--global-color);
    font-size: 24rem;
    font-weight: 400;
    line-height: 32rem;
}
.blockLeftButtonClick a{
    display: inline-block;
    padding: 20rem 27rem;
    color:#fff;
    border-radius: 6rem;
    border: 2rem solid var(--global-color-akcent);
    background: var(--global-color-akcent);
}
.blockRight{
    display: flex;
    flex-wrap: wrap;
    gap: 20rem 40rem;
    width: 740rem;
}
.blockRightItem{
    border-radius: 10rem;
    background-color: #F4F7FA;
    padding: 35rem 45rem;
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 350rem;
    height: 400rem;
}
.blockRightItemTitle{
    color: var(--global-color);
    font-size: 24rem;
    font-weight: 500;
    line-height: 34rem;
}
.blockRightItemSubtitle{
    color: #161C2D;
    font-size: 16rem;
    font-weight: 400;
    line-height: 24rem;
    opacity: 0.7;
}
.blockProducts{
    position: relative;
}
.blockProductImg{
    width: 100%;
    height: 300rem;
    border-radius: 10rem;
    background: #F4F7FA;
    padding: 20rem;
}
.blockProductImg img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.blockProductPrice{
    margin: 24rem 0 12rem 0;
    display: flex;
    justify-content: center;
    gap:15rem;
    align-items: center;
}
.starayaPrice{
    color: #8a8a8a;
    font-size: 16rem;
    font-weight: 700;
    line-height: 24rem;
    text-decoration:line-through;
}
.skidkaPrice{
    color: #46E370;
    font-size: 20rem;
    font-weight: 700;
    line-height: 24rem; 
}
.blockProductItemTitle{
    color: #161C2D;
    text-align: center;
    font-size: 20rem;
    font-weight: 400;
    line-height: 27rem;
}
.blockProductButton{
    margin-top: 20rem;
}
.blockProductButton a{
    display: block;
    text-align: center;
    color: #F4F7FA;
    padding: 15rem;
    border-radius: 6rem;
    background: #06001C;
    font-size: 16rem;
}
.blockProductTitle{
    margin-bottom: 50rem;
    color: var(--global-color);
    font-size: 48rem;
    font-weight: 500;
    line-height: 56rem;
}
.blockProductControl{
    display: flex;
    gap:10rem;
    position: absolute;
    right: 0;
    top: 0;
}
.blockProductControl>div{
    cursor: pointer;
}
.blockProductItem{
    display: flex!important;
    flex-direction: column;
    justify-content: space-between;
}
.prodViz{
    padding: 80rem 0;
}
.titleSdZakaz{
    color: var(--global-color);
    text-align: center;
    font-size: 48rem;
    font-weight: 500;
    line-height: 48rem; 
}
.subtitleSdZakaz{
    width: 600rem;
    color: #7D7D7D;
    text-align: center;
    font-size: 20rem;
    font-weight: 400;
    line-height: 32rem;
    margin: 20rem auto 60rem;
}
.sdZakazBlock{
    display: flex;
    gap:190rem;
}
.sdZakazBlockImg{
    width: 660rem;
}
.sdZakazBlockImg img{
    width: 100%;
    object-fit: contain;
}
.sdZakazBlockInfo{
    padding-top: 80rem;
    width: 550rem;
    display: flex;
    flex-direction: column;
    gap:50rem;
}
.sdZakazItem{
    display: flex;
    gap:20rem;
}
.sdZakazItemNumb{
    color: #FFF;
    display: flex;
    background-color: var(--global-color-akcent);
    width: 40rem;
    height: 33rem;
    border-radius: 50rem;
    align-items: center;
    justify-content: center;
}
.sdZakazItemTitle{
    color: var(--global-color);
    font-size: 21rem;
    font-weight: 400;
    line-height: 32rem;
    margin-bottom: 10rem;
}
.sdZakazItemSubtitle{
    color: #7D7D7D;
    font-size: 16rem;
    font-weight: 400;
    line-height: 24rem; 
    opacity: 0.7;
}
.sdZakaz{
    padding: 80rem 0;
}
.contBlock{
    padding: 120rem 0 200rem 0;
    width:640rem;
    margin: 0 auto;
}
.contBlockTitle{
    text-align: center;
    color: var(--global-color);
    font-size: 48rem;
    font-weight: 500;
    line-height: 56rem;
    margin-bottom: 50rem;
}
.contBlockTime{
    color: var(--global-color-akcent);
    text-align: center;
    font-size: 24rem;
    font-weight: 700;
    line-height: 120%;
    margin-bottom: 22rem;
}
.contBlockText{
    color: #7D7D7D;
    text-align: center;
    font-size: 20rem;
    font-weight: 400;
    line-height: 140%; 
}
.contBlockItems{
    margin-top: 40rem;
    display: flex;
    gap:60rem;
    flex-direction: column;
    align-items: center;
}
.contBlockPoyas{
    color: var(--global-color);
    text-align: center;
    font-size: 14rem;
    font-weight: 400;
    line-height: 140%; 
    text-transform: uppercase;
}
.contBlockInfo a{
    color: var(--global-color);
    text-align: center;
    font-size: 32rem;
    font-weight: 700;
    line-height: 120%;
}
.listingProduct .blockProductItem{
    width: calc(20% - 32rem);
}
.listingProduct{
    display: flex;
    flex-wrap: wrap;
    gap:40rem;
    justify-content: center;
}
.arhiveProduct{
    padding: 80rem 0;
}
.arhiveProductTitle{
    color: var(--global-color);
    font-size: 48rem;
    font-weight: 500;
    line-height: 56rem;
    margin-bottom: 50rem;
}
.arhiveProductFilter{
    padding: 40rem 130rem;
    border-radius: 20rem;
    background: #F4F7FA;
    margin-bottom: 60rem;
}
.poleVibora{
    display: flex;
    gap: 20rem;
}
.poleVibora button, #ajax-pagination button{
    width: 250rem;
    background-color: #f25b2c;
    color: #fff;
    border-radius: 6rem;
    height: 42rem;
}
#search-form{
    margin-top: 30rem;
}
.singleProduct{
    padding: 80rem 0;
}
.singleProductTitle{
    color: var(--global-color);
    font-size: 36rem;
    font-weight: 500;
    line-height: 50rem;
    margin-bottom: 50rem;
}
.singleProductContent{
    display: flex;
    gap:40rem;
}
.singleProductImg{
    width: 660rem;
    padding: 50rem 40rem;
    background: var(--white, #FFF);
    box-shadow: 0px 0px 6.7px 0px rgba(0, 0, 0, 0.15);
}
.singleProductImg img{
    width: 100%;
}
.singleProductInfo{
    width: 660rem;
}
.singleProductCategory{
    color: #7D7D7D;
    font-size: 16rem;
    font-weight: 400;
    line-height: 24rem;
    margin-bottom: 30rem;
}
.singleProductDesc{
    color: var(--global-color);
    font-size: 16rem;
    font-weight: 400;
    line-height: 24rem;
    margin-bottom: 30rem;
}
.singleProductPrice{
    display: flex;
    gap:20rem;
    align-items: center;
}
.priceNorm{
    color: #8a8a8a;
    font-size: 18rem;
    font-weight: 700;
    line-height: 24rem;
    text-decoration: line-through;
}
.priceSale{
    color: #46E370;
    font-size: 32rem;
    font-weight: 700;
    line-height: 38rem;
}
.singleProductButton a{
    margin-top:50rem ;
    display: inline-block;
    padding: 15rem 50rem;
    border-radius: 6rem;
    background: var(--global-color);
    color: #FFF;
    font-size: 20rem;
    font-weight: 400;
}
.aboutBlock{
    width: 920rem;
    margin: 0 auto;
}
.about{
    padding: 80rem 0;
}
.aboutTitle{
    color: var(--global-color);
    text-align: center;
    font-size: 48rem;
    font-weight: 500;
    line-height: 56rem; 
    margin-bottom: 30rem;
}
.aboutContent{
    color: var(--global-color);
    text-align: center;
    font-size: 16rem;
    font-weight: 400;
    line-height: 24rem;
}
.hiddenMobile{
    display: block;
}
.hiddenDesktop{
    display: none;
}
.overlayMenu {
    display: none; /* Скрыт по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 290; /* Меньше, чем у всплывающего окна */
}

.overlayMenu.active {
    display: block;
}
#mobile-menu {
    position: fixed;
	padding:20rem;
    left: -100%; /* Скрыто по умолчанию */
    top: 0;
    width: 100%; /* Или любую другую ширину */
    height: 100%;
    background: #FFF;
    z-index: 390;
    transition: left 0.3s;
    overflow-y: auto; /* Для прокрутки, если содержимое больше высоты экрана */
}
#mobile-menu.active {
    left: 0; /* Показывает попап, когда добавлен класс active */
}
.mobileMenuItems{
    position: relative;
}
.mobileMenuItems ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap:15rem;
}
.mobileMenuItems ul a{
    font-size: 18rem;
    font-weight: 600;
    color:#000;
}
.closeMenu{
    position: absolute;
    right: 10rem;
    top:10rem;
}
.mobileMenuItemTitle{
    font-size: 36rem;
    margin-bottom: 40rem;
}
.descriptionTovar{
    padding: 60rem 0;
}
@media(max-width:600px){
    html {
        font-size: 0.16666666vw;
    }
    .hiddenMobile{
        display: none;
    }
    .column{
        width: 100%;
        padding: 0 24rem;
    }
    .welcome .title{
        width: 100%;
        font-size: 44rem;
        line-height: 48rem;
    }
    .welcome .subtitle{
        width: 100%;
        font-size: 20rem;
        line-height: 30rem;
    }
    .hiddenDesktop{
        display: block;
    }
    .mobile-menu{
        height: 42rem;
    }
    .mobile-menu img{
        width: 42rem;
    }
    .welcome .slide{
        background-position: 30%;
    }
    .advant .items{
        flex-wrap: wrap;
        gap: 40rem;
    }
    .advant .item{
        width: calc(50% - 20rem);
    }
    .home .welcome{
        padding: 40rem 0;
    }
    .home .assort{
        padding: 40rem 0;
    }
    .assortment{
        gap:40rem;
        flex-direction: column;
    }
    .blockRight{
        width: 100%;
    }
    .blockRightItem{
        width: calc(50% - 20rem);
    }
    .prodViz{
        padding: 40rem 24rem;
    }
    .subtitleSdZakaz{
        width: 100%;
    }
    .sdZakazBlock{
        gap:40rem;
        flex-direction: column-reverse;
    }
    .sdZakazBlockImg{
        width: 100%;
    }
    .sdZakazBlockInfo{
        width: 100%;
    }
    .sdZakazBlockInfo{
        padding: 0;
    }
    .sdZakaz{
        padding: 40rem 0;
    }
    .contBlock{
        padding: 60rem 0 80rem 0;
        width: 100%;
    }
    .footerTopBox{
        flex-direction: column;
        gap:0;
    }
    .footer .block{
        flex-direction: column;
        gap:30rem;
    }
    .copyright{
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .arhiveProduct{
        padding: 40rem 0;
    }
    .arhiveProductFilter{
        padding: 20rem 30rem;
    }
    .listingProduct .blockProductItem{
        width: calc(50% - 20rem);
    }
    #ajax-pagination{
        width: 100%;
        text-align: center;
    }
    .singleProductContent{
        flex-direction: column;
    }
    .singleProductImg{
        width: 100%;
    }
    .singleProductInfo{
        width: 100%;
    }
    .aboutBlock{
        width: 100%;
    }
}