* {
    box-sizing: border-box;
    
}
html {
   font-size: clamp(18px, 2vw, 20px); 
   scroll-behavior: smooth;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Jost", sans-serif;
    overflow-x: hidden;
    background-color: #FFF8ED;

}
@font-face {
    font-family: "Jost";
    src: url("font/Jost-VariableFont_wght.ttf") format("truetype");
    font-weight: 100-900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Jura";
    src: url("font1/Jura-VariableFont_wght.ttf") format("truetype");
    font-weight: 100-900;
    font-style: normal;
    font-display: swap;
}
.centration {
    display: flex;
    justify-content: center;
}
.mainh {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px auto 0 auto;
    max-width: 1180px;
    width: 83vw;
}
p, h1, h2, h3 {
    margin: 0;
    padding: 0;
}
.mainglob {
    width: 100vw;
    max-width: 1440px;
}
.main1 {
    width: 352px; height: 29px; justify-content: space-between; align-items: center; display: flex
}
.main2 {
    color: #662E1C; font-size: 1rem; font-family: 'Jost'; font-weight: 400; word-wrap: break-word; text-decoration: none;
}
.main3 {
    color: #794736; font-size: 1rem; font-family: 'Jost'; font-weight: 400; word-wrap: break-word
}
.main67 {
    color: #794736; font-size: 1rem; font-family: 'Jost'; font-weight: 400; word-wrap: break-word
}
.otstup {
    width: 100vw;
    height: 50px;
    max-width: 1440px;
}
.main4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main5 {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.main68 {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.main6 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.main7 {
    text-decoration: none; padding-top: 10px; padding-bottom: 10px; background: #CB6041; border-radius: 8px; border: 2px solid #CB6041; transition: background-color 1s; width: 210px;
}
.main7:hover {
    background-color: #C38672;
}
.main8 {
    color: #FFF8ED; font-size: 20px; font-family: 'Jost'; font-weight: 400; word-wrap: break-word; text-align: center;
}
.main9 {
    color: #662E1C; font-size: clamp(35px, 3.75vw, 50px); font-family: 'Jost'; font-weight: 600; word-wrap: break-word
}
.main10 {
    color: #AD6953; font-size: 1rem; font-family: 'Jost'; font-weight: 400; word-wrap: break-word
}
.otstup2 {
    width: 100vw;
    height: 150px;
    max-width: 1440px;
}
.main12 {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.main13 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main15 {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.name {
    color: #662E1C; font-size: 25px; font-family: 'Jost'; font-weight: 600; word-wrap: break-word
}
.price {
    color: #DE7151; font-size: 25px; font-family: 'Jost'; font-weight: 600; word-wrap: break-word
}
.main18 {
    color: #CB6041; font-size: clamp(20px, 3vw, 30px); font-family: 'Jost'; font-weight: 600; word-wrap: break-word
}

.main20 {
    justify-content: center; align-items: center; gap: 20px; display: flex; width: 105px; margin: 0 auto
}


.main21 {
    color: #AF4425; font-size: clamp(20px, 3vw, 25px); font-family: 'Jost'; font-weight: 400; word-wrap: break-word; transition: color 3s;
}


.main25 {
    width: 100vw;
    position: relative; 
    max-width: 1440px;
    background-color: #FBEDC6;
    display: flex;
    align-items: center;
    gap: 10px;
}

.main27 {
    color: #CB6041; font-size: clamp(20px, 3vw, 30px); font-family: 'Jost'; font-weight: 600; word-wrap: break-word
}
.main28 {
    width: clamp(300px, 41vw, 580px); color: #C38672; font-size: 1rem; font-family: 'Jost'; font-weight: 400; word-wrap: break-word
}
.main29 {
    padding-left: 53px; padding-right: 53px; padding-top: 10px; padding-bottom: 10px; background: linear-gradient(90deg, #CB6041 0%, #CB6041 100%); border-radius: 8px; justify-content: center; align-items: center; display: flex; text-decoration: none; transition: background-color 1s;
}
.main29:hover {
    background-color: #C38672;
}
.main30 {
    color: #FFF8ED; font-size: 1rem; font-family: 'Jost'; font-weight: 400; word-wrap: break-word
}
.main33 {
    width: 100vw;
    max-width: 2000px;
    background: transparent;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 48px;
    overflow-x: visible;
    margin: 0 auto;
}

.main36 {
    width: 1800px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    margin-left: clamp(0px, 8.5vw, 130px);
    margin-right: clamp(0px, 8.5vw, 130px);
}
.main181 {
    color: #CB6041; font-size: clamp(20px, 3vw, 30px); font-family: 'Jost'; font-weight: 600; word-wrap: break-word; margin-left: clamp(0px, 8.5vw, 130px);
}
.main37 {
    width: 280px; height: 233px; padding-top: 20px; background: #CB6041; border-radius: 15px; border: 2px #662E1C solid; justify-content: center; align-items: flex-start; display: flex; 
}
.main38 {
    color: #FBEDC7; font-size: 1rem; font-family: 'Jost'; font-weight: 500; word-wrap: break-word
}
.main40 {
    width: 223px;
    height: 143px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
}
.main35 {
    width: 100%;
    overflow-x: scroll;
}

.main35::-webkit-scrollbar {
    display: none;
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    max-width: 1440px;
    padding: 50px 0px 50px 0px;
    background-color: #FBEDC6;
}

.main46 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    flex-direction: column;
}
.main49 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
}

.main48 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    flex-direction: column;
}
.main50 {
    color: #CB6041; font-size: clamp(20px, 3vw, 30px); font-family: 'Jost'; font-weight: 600; word-wrap: break-word
}
.new1 {
    width: 82px;
    height: 39px;
    background: #FF693D; 
    border-radius: 5px; 
    justify-content: center; 
    align-items: center;
    position: absolute;
    bottom: 20px;
    right: 10px;
    padding-left: 20px; padding-right: 20px; padding-top: 5px; padding-bottom: 5px;
}
.neww {
    color: white; font-size: 20px; font-family: 'Jost'; font-weight: 600; word-wrap: break-word
}
.mainfoto {
    position: relative;
}
.main52 {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.main53 {
    color: #662E1C; font-size: 18px; font-family: 'Jost'; font-weight: 400; word-wrap: break-word
}
.main54 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.main57 {
    text-decoration: none; cursor: pointer; width: 100%; padding-top: 10px; padding-bottom: 10px; background: #CB6041; border-radius: 8px; border: 2px solid #CB6041; transition: background-color 1s;
}
.main57:hover {
    background-color: #C38672;
}
.main31 {
    width: clamp(443px, 55.4vw, 597px);
    position: absolute;
    z-index: 5;
}

.main212 {
    color: #CB6041; font-size: 1rem; font-family: 'Jost'; font-weight: 400; word-wrap: break-word; text-decoration: none;
}
@media screen and (min-width: 1300px) {
    .main58 {
        display: none;
    }
    .main22 {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    .main24 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        width: 580px;
    }
    .main14 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
    }
    .main141 {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 20px;
        width: 83vw;
        max-width: 1180px;
        margin: 0 auto;
    }
    .main151 {
        display: none;
    }
    .main17 {
        width: 380px;
        height: 36px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .main171 {
        height: 36px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .main26 {
        margin: 50px 0px 50px 0px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 30px; display: flex; margin-left: clamp(0px, 8.5vw, 130px);
    }
    .main45 {
        max-width: 1213px;
        width: 83vw;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .main111 {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 30px;
        flex-direction: column;
    }
    .main211 {
        display: none;
    }
    .main55 {
        width: 280px;
        height: 40px;
        background: #FFF3D3; 
        border-radius: 5px; 
        border: 2px #662E1C solid
    }
    .main56 {
        width: 280px;
        height: 130px;
        background: #FFF3D3; 
        border-radius: 5px; 
        border: 2px #662E1C solid
    }
    .dsnon {
        display: none;
    }
}
@media screen and (max-width: 1300px) {
    
    .main1, .main3 {
        display: none;
    }
    .main22 {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-direction: column;
    }
    .main23 {
        width: 83vw;
    }
    .main24 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        width: 83vw;
    }
    
    .main14 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        width: 83vw;
    }
    
    .main151 {
        display: flex;
        flex-direction: column;
        gap: 20px
    }
    
    
    
    .main211 {
        color: #CB6041; font-size: 1rem; font-family: 'Jost'; font-weight: 400; word-wrap: break-word; text-decoration: none;
    }
    
}
@media screen and (max-width: 833px) {
    .main111 {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 30px;
        flex-direction: column;
    }
    .main44 {
        width: 100%;
    }
    .main4 {
        flex-direction: column;
        gap: 20px;
    }
    .notmob {
        display: none;
    }
    .main9, .main10 {
        text-align: center;
    }
    
    .main5 {
        width: 83vw;
        align-items: center;
    }
    .main11 {
        width: 100vw;
        max-width: 407px;
        overflow: hidden;
    }
    .main19 {
        text-decoration: none; width: 141px; padding-top: 10px; padding-bottom: 10px; background: linear-gradient(90deg, #CB6041 0%, rgba(203, 96, 65, 0) 0%); border-radius: 8px; overflow: hidden; border: 2px #AF4425 solid; justify-content: flex-start; align-items: center; display: flex; 
    }
    .svgstr path {
        fill: #AF4425;
        stroke: #AF4425;
        stroke-width: 0.1;
        width: 25px;
    }
    .main231 {
        width: calc((83vw - 20px) / 2);
    }
    .main16 {
        width: 83vw;
    }
    .main17 {
        height: 36px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .main51 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        flex-direction: column;
    }
    .main55 {
        width: 83vw;
        height: 40px;
        background: #FFF3D3; 
        border-radius: 5px; 
        border: 2px #662E1C solid
    }
    .main56 {
        width: 83vw;
        height: 130px;
        background: #FFF3D3; 
        border-radius: 5px; 
        border: 2px #662E1C solid
    }
    .main45 {
        max-width: 1213px;
        width: 83vw;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 50px;
    }
    .main26 {
        flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 30px; display: flex; margin: 20px auto 320px auto;
    }
    .main31 {
        bottom: 20px;
        overflow: hidden
    }
    .main25 {
        justify-content: center;
        overflow: hidden;
    }
}
@media screen and (min-width: 834px) {
    .main44 {
        width: 100%;
        padding-left: 8.5vw;
    }
    .main19 {
        text-decoration: none; width: 180px; padding-top: 10px; padding-bottom: 10px; background: linear-gradient(90deg, #CB6041 0%, rgba(203, 96, 65, 0) 0%); border-radius: 8px; overflow: hidden; border: 2px #AF4425 solid; justify-content: flex-start; align-items: center; display: flex; position: relative
    }
    .main19:hover .main20 .main21 {
        color: #FFF8ED;
    }
    
    .main19::before {
        content: '';
        position: absolute;
        width: 0px;
        height: 56px;
        border-radius: 8px;
        background: linear-gradient(90deg, #CB6041 100%, rgba(202.94, 96.07, 65.11, 0) 100%);
        transition: width 2s ease;
        z-index: -1;
        left: -4px;
        
    }
    .main19:hover::before {
        width: 181px;
        overflow: hidden;
    
    }
    .svgstr path {
        fill: #AF4425;
        stroke: #AF4425;
        stroke-width: 1;
        transition: fill 3s, stroke 3s;
    }
    
    
    .main19:hover .main20 .svgstr path {
        fill: #FFF8ED;
        stroke: #FFFFFF;
    }
    .main51 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
    }
    .main31 {
        right: clamp(0px, 4.5vw, 130px);
    }
}
.main1622 {
    width: calc((83vw - 40px) / 3);
    max-width: 370px;
}
#trial {
    position: absolute;
    animation: ttt 0.7s forwards;
}
.rel {
    position: relative;
    display: flex;
    justify-content: center;
    
}
@keyframes ttt {
    0% {
        margin-left: 100vw
    }
    100% {
        margin-left: 0px;
    }
}
@media screen and (min-width: 834px) and (max-width: 1300px) {
    .main11 {
        width: 48.8vw;
        min-width: 407px;
        overflow: hidden;
    }
    .main231, .main16 {
        width: calc((83vw - 20px) / 2);
    }
    .main17 {
        width: calc((83vw - 20px) / 2);
        height: 36px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .main55 {
        width: calc((83vw - 20px) / 2);
        height: 40px;
        background: #FFF3D3; 
        border-radius: 5px; 
        border: 2px #662E1C solid
    }
    .main56 {
        width: calc((83vw - 20px) / 2);
        height: 130px;
        background: #FFF3D3; 
        border-radius: 5px; 
        border: 2px #662E1C solid
    }
    .main111 {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 30px;
    }
    .main45 {
        max-width: 1213px;
        width: 83vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 50px;
    }
    .main26 {
        margin: 20px 0px 20px 0px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 30px; display: flex; margin-left: clamp(0px, 8.5vw, 130px);
    }
}
.sect1 {
    width: 100vw;
    position: relative;
    max-width: 1440px;
    background-color: #CB6041;
    display: flex;
    align-items: center;
}
.sect2 {
    width: 83vw;
    margin: 20px auto 20px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1180px;
}
.ai {
    text-decoration: none;
}
.main182 {
    color: #5F3F36; font-size: clamp(20px, 3vw, 30px); font-family: 'Jost'; font-weight: 600; word-wrap: break-word
}
.main1821 {
    color: #FFFFFF; font-size: clamp(20px, 3vw, 30px); font-family: 'Jost'; font-weight: 600; word-wrap: break-word
}
.contacts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    max-width: 1180px;
    width: 83vw;
}
.main61 {
    color: #794736; font-size: 1.25rem; font-family: 'Jost'; font-weight: 600; word-wrap: break-word
}
.main62 {
    width: 40vw; max-width: 580px; color: #662E1C; font-size: 1.25rem; font-family: 'Jura'; font-weight: 700; word-wrap: break-word
}
.main64 {
    width: 40vw; max-width: 580px;
}
.main65 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 83vw;
}
.main70 {
    width: 83vw;
    max-width: 1180px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    height: 100%;
    flex-wrap: wrap;
    margin: 0 auto;
}
.main71 {
    margin-left: calc(50% - 92px);
    margin-right: calc(50% - 92px);
    margin-top: 130px;
    position: absolute;
    z-index: 122;
    width: 13vw;
    height: 163vw;
    max-width: 184px;
    max-height: 2351px;
}
.main73 {
    color: #662E1C; max-width: 480px; text-align: right; font-family: 'Jura'; font-size: 1.25rem; font-weight: 700; word-break: break-word; width: 33vw;
}
.main74 {
    width: 42vw; max-width: 600px
}
.main75 {
    color: #662E1C; max-width: 480px; text-align: left; font-family: 'Jura'; font-size: 1.25rem; font-weight: 700; word-break: break-word; width: 33vw;
}
.main76 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    margin-top: clamp(430px, 20vw, 500px);
}
.main77 {
    color: #662E1C; max-width: 980px; text-align: center; font-family: 'Jura'; font-size: 1.1rem; font-weight: 700; word-break: break-word; width: 68vw
}
.main78 {
    width: 49.9vw;
    max-width: 719px;
}