.center{
    display: block;
    margin: 0 auto 20px;
    text-align: center;
}
.breez {
    background-color: rgb(184, 220, 211);
    color: black;
    font-weight: 700;
}
.mb-38 {
    margin-bottom: calc(var(--spacing) * 38);;
}

.max-w-5xl form{
    margin: 30px auto 10px !important;
}
.form{
    display: block;
}

.hero .bg{
    background-image: url('../images/hero.jpg'); 
    /* background-position-x: 215px;  */
    z-index: 4; 
    /* background-position-y: -70px;  */
}

.hero-block{
    max-width: 595px;
    min-height: 300px;
}

#features .title-block{
    margin-bottom: 78px;
}

footer .menu div{
    min-width: 140px;
    text-align: center;
}
.category-list{
    margin: 0 auto 30px;
}
#menu-toggle.is-active svg {
     transform: rotate(90deg);
     transition: transform 0.3s ease;
  }
#menu-toggle svg {
    transition: transform 0.3s ease;
}
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10;
}
.page-transition {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.page-loaded {
  opacity: 1;
}
.text-red{
    color: red;
}
.line-through{
    text-decoration: line-through;
}

.text-green-600{
    color: green;
    font-weight: 600;
}
/* Подсветка поля */
input.border-red-400 {
    border-color: #f87171 !important; /* красный */
    background-color: #fef2f2;
}

input.border-green-500 {
    border-color: #22c55e !important; /* зелёный */
    background-color: #f0fdf4;
}

/* Сообщения */
#promo-message.text-red-600 {
    color: #dc2626;
}

#promo-message.text-green-600 {
    color: #16a34a;
}

.card-img{
    max-width: 350px;
}
.bg-primary-black {
      background-color: #000;
}
.offers .mb-38{
    right: 0px;
    top: 20px;
    position: absolute;
}
.about h1{
    margin-bottom: 20px;
}
.about p{
    margin: 0px 0px 15px;
}
.about img{
    border-radius: 5px;
}
.about .list-disc{
    list-style: disc;
    list-style-position: inside;
    margin-left: 20px;
    margin-bottom: 20px;
}
.about-img{
    max-width: 650px;
    width: 100%;
    display: block;
    margin: 10px auto 20px;
    border-radius: 5px;
}

 /* Кастомные линии для пагинации */
 .swiper-pagination {
     display: flex !important;
     justify-content: center !important;
     gap: 8px !important;
 }

 .swiper-pagination-bullet {
     width: 30px !important;
     height: 4px !important;
     border-radius: 2px !important;
     background: #ddd !important;
     opacity: 1 !important;
     transition: all 0.3s ease !important;
 }

 .swiper-pagination-bullet-active {
     background: #000 !important;
     width: 40px !important;
 }
@media (max-width:1200px){
    .hero .bg{
        background-position-y: 0px; 
    }
}
@media (max-width:1024px) and (min-width:600px){
    .hero-mob .bg-contain{
        background-position-y: -46px;
    }
}
@media (max-width:1024px){
    .hero{
        display: none;
    }
    
    .hero-mob{
        padding-bottom: 10px;
    }
    .hero-mob .bg-contain{
        background-size: cover;
        background-position-x: right;
    }
    .hero-mob .pb-12 {
        padding-bottom: calc(var(--spacing) * 0);
     }
    .hero-mob .backdrop-blur-sm{
        max-width: 350px;
        backdrop-filter: blur(0px);
        background:  none;
        border: none;
        box-shadow: none;
    }
    .text-base{
        background: #ffffffbf;
        padding: 10px;
        border-radius: 5px;
    }
    .row-2{
        margin-top: 30px !important;
    }
    #features .title-block{
        margin-bottom: 10px;
    }
    .mb-38{
        margin-bottom: calc(var(--spacing) * 33);
    }
   
    footer .flex{
        margin: 0 auto;
        display: flex;
        align-content: center;
        align-items: center;
        flex-direction: column;
    }
    footer .menu div{
        min-width: 70px;
        text-align: center;
        margin-bottom: 10px;
    }
}

@media (max-width:768px){
    section{
        padding-left:  10px;
        padding-right:  10px;
    }
    .hero-mob{
        padding: 0;
    }
    .card-img{
        width: 100%;
        max-width: 100%;
    }
}
@media (max-width:450px){
      .hero-mob .backdrop-blur-sm{
            max-width: 330px;
        }
      .hero-mob .px-6.z-20  {
        padding-inline: calc(var(--spacing) * 0);
     }
   
    .hero-mob .pb-24 {
        padding-bottom: calc(var(--spacing) * 0);
    }
}

@media (max-width:360px){
  .hero-mob .pb-24 {
    padding-bottom: calc(var(--spacing) * 0);
  }
}