.example {
  display: grid;
  transition: all .5s;
  user-select: none;
  background: linear-gradient(to bottom, white, black);
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;800&display=swap');

* {
  margin: 0;
  padding:0;
}

body {
  font-family: 'Open Sans', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Устанавливаем минимальную высоту равной 100% высоты видимой области устройства */
  
}
.footer {
margin-top: auto; /* Это прижмет футер к низу контейнера */
}

/* NAVIGATION */
.navbar-nav>li>a{

  text-transform: uppercase;
  font-size: 16px;
  margin-right:20px;
  color: #fff;

}
.navbar-nav a:after {
  display: block; /*превращаем его в блочный элемент*/
  content: ""; /*контента в данном блоке не будет поэтому в кавычках ничего не ставим*/
  height: 3px; /*задаём высоту линии*/
  width: 0%; /*задаём начальную ширину элемента (линии)*/
  background-color: #CC060C; /*цвет фона элемента*/
  transition: width 0.4s ease-in-out; /*данное свойство отвечает за плавное изменение ширины. Здесь можно задать время анимации в секундах (в данном случае задано 0.4 секунды)*/
  } 
  .navbar-nav a:hover:after,
  .navbar-nav a:focus:after {
  width: 100%;
  } 


.activete {
background-color:  #CC060C !important;
}


.spoilers-main-card .btn-dark:focus {
box-shadow: none;
}

.navbar-brand img {
  width: 80%;
}



.navbar-toggler {
    padding: .20rem .50rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid white;

    }

    .nav-link{

      color: #fff !important;
    }


.wrapper{
      width: 100%;
    position: absolute;
    height: 100%;
    background-color: #000;
    clip-path: polygon(81% 0, 100% 0, 100% 50%, 100% 100%, 71% 100%);
    transition: 1s all;
}

.navbar-brand{

  color:#fff;
  font-family: 'Allerta Stencil', sans-serif;
  margin-bottom: 4px;
  font-size: 27px;
}

.navbar-red:hover .wrapper{

  clip-path: polygon(81% 0, 100% 0, 100% 50%, 100% 100%, 65% 100%);

}

.navbar-brand:hover{

  color:#fff;
  
}

.navbar-red{

  background-color: #282828;
  color: #fff;

}

.all-show{

  z-index: 10;
}

/* NAV END */

/* BANNER */
.banner {
  background-color: #fff;
  width: 100%;
  padding: 2em 0;
}
.banner-img {
  text-align: right;
}
.banner-img img {
  width: 70%;
}

.banner h1 {
  font-weight:800;
}
.banner-text p {
  font-size: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-weight: 500;
}

.row {
  align-items: center;
}

.btn {
  font-weight: 400;
  border-radius: 4px;
  font-size: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 5px;
  border: none;
  letter-spacing: .02rem;
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease;
  position: relative;
  -webkit-transform: skew(-21deg);
  -ms-transform: skew(-21deg);
  transform: skew(-21deg);
  /* Un-skew the text */
}
/* Dark */
.btn-dark {
  background-color: #393e46;
  color: #fff;
}

.btn-dark:hover, .btn-dark:focus {
  background-color: #505762;
  color: #fff;
}

@media screen and (max-width: 567px) {
  .banner {
    text-align: center;
  }
}

/* MINI-CATALOG */
.mini-catalog {
background-color: #efefef;
padding-top: 80px;
padding-bottom: 80px;
}
.mini-catalog h2 {
  font-weight: bold;
  padding-top: 20px;
  padding-bottom: 20px;
}
.mini-catalog p {
  font-size: 20px;
  padding-bottom: 20px;
}
.mini-flex {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
justify-content: space-between;
}
.mini-flex img {
width: 350px;
}
.cards-element {
position: relative;
margin-right: 20px;
margin-left: 20px;
border-top: 1.5px solid #f4f4f4;
  box-shadow: 0 1px 1px #0000000d, 0 2px 2px #0000000d, 0 4px 4px #0000000d, 0 8px 8px #0000000d, 0 16px 16px #0000000d;
}
.content-hover {
display: flex;
flex-direction: column;
}
.content-hover h3{
font-size: 2rem;
font-weight: 500;
padding-bottom: 20px;
color: #fff;
}
.content-hover a {
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 10px 20px 10px 20px;
}

.content-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(71, 70, 70, 0.8);
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.3s ease;
}

.cards-element:hover .content-hover {
opacity: 1;
}


.mini-catalog button {
margin-top: 50px;
}
/* ABOUT US */

.about-us {
padding-top: 80px;
padding-bottom: 80px;
}

.about-us h3 {
font-weight: 500;
padding-bottom: 20px;
}

.about-us p {
font-size: 20px;
}

/* COMPAY-LOGOS */
.compay-logos {
padding-top: 80px;
padding-bottom: 80px;
}

.row-up {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: stretch;
}

.col-up {
position: relative;
width: 200px;
text-align: center;
/* Другие общие стили для .col-up */
}

.col-up img {
padding-bottom: 20px;
height: 100%;
object-fit: cover;
border-radius: 10px;
/* Другие стили для изображения */
}

.col-up a {
text-decoration: none;
color: #000;
font-size: 20px;
display: inline-block;
position: relative;
}

/* Новый класс для создания hover-эффекта */
.col-up a::after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 2px;
background-color: #282828;
transition: width 0.4s ease-in-out;
}

.col-up a:hover::after {
width: 100%;
}


/* PRODUCTION */

.production {
padding-top: 80px;
padding-bottom: 80px;
}
.production h3 {
padding-bottom: 80px;
}

.prod-img {
flex: 0 0 33.333333%; /* Устанавливаем ширину блока на 33.33% экрана */
  max-width: 33.333333%; /* Устанавливаем максимальную ширину */
  padding-right: 15px; /* Создаем интервал между блоками */
  padding-left: 15px; /* Создаем интервал между блоками */
  margin-bottom: 30px; /* Добавляем отступ снизу для создания интервала между рядами */
  display: flex;
  align-items: stretch; /* Выравниваем по высоте */

}
.prod-img img {
width: 100%; /* Сохраняем картинку внутри блока и устанавливаем одинаковую ширину для всех изображений */
height: auto; /* Позволяем высоте подстраиваться автоматически, сохраняя пропорции изображения */
}


/* FOOTER */


.footer {
background: #282828;
padding-bottom: 80px;
padding-top: 80px;
color: #fff;
font-size: 20px;
text-align: center;
}
.footer-flex {
display: flex;
flex-direction: column;
}

.footer a {
padding-bottom: 20px;
text-decoration: none;
display: inline-block;
color: #fff;
}

.footer-tel {
font-size: 28px;
font-weight: 500;
}

.footer-row {
align-items: center;
justify-content: space-between;
}
.social {
display: flex;
justify-content: space-around;
}
.social img {
width: 80px;
}



/* CATALOG */

.catalog-main {
padding-top: 80px;
padding-bottom: 80px;
}
.block-link {
display: block;
}
.products {
padding-top: 80px;
padding-bottom: 80px;
display: grid;
grid-template-columns: repeat(3, 1fr); /* Создаем 3 колонки одинаковой ширины */
    gap: 20px; /* Добавляем промежутки между карточками */
}
@media (max-width: 800px) {
.products {
  grid-template-columns: repeat(2, 1fr); /* При уменьшении ширины экрана, используем 2 колонки */
}
}

@media (max-width: 500px) {
.products {
  grid-template-columns: 1fr; /* При еще более узком экране используем только 1 колонку */
}
}

.card {
position: relative;
border-top: 1.5px solid #f4f4f4;
  box-shadow: 0 1px 1px #0000000d, 0 2px 2px #0000000d, 0 4px 4px #0000000d, 0 8px 8px #0000000d, 0 16px 16px #0000000d;
}
.content-hover-main {
display: flex;
flex-direction: column;
}
.content-hover-main h3{
text-transform: uppercase;
font-size: 2rem;
font-weight: 500;
padding-bottom: 20px;
color: #fff;
text-align: center;
}
.content-hover-main h4{
text-transform: uppercase;
font-size: 1rem;
font-weight: 500;
padding-bottom: 20px;
color: #fff;
text-align: center;
}
.content-hover-main a {
text-decoration: none;
color: #fff;
border: 2px solid #fff;
padding: 15px 50px 15px 50px;
}

.content-hover-main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(71, 70, 70, 0.8);
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.3s ease;
}

.card:hover .content-hover-main {
opacity: 1;
}




/* main-card-element-page */
.ul-all-pages {
align-items: normal;
}
.ul-blocks {
flex: 1;
}
.main-carard-pad {
padding-top: 80px;
padding-bottom: 80px;
}
.main-carard-pad h3 {
padding-bottom: 80px;
}
.main-card-page-text-block {
padding-bottom: 80px;
}
.main-card-page-text-block h1 {
font-size: 5rem;
padding-bottom: 20px;
}
.main-card-page-text-block p {
font-size: 20px;
padding-bottom: 60px;
}
.main-card-page-text-button-buy-link {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.main-card-page-text-button-buy-link .btn-wb {
background: linear-gradient(45deg, #E313BF, #E313BF); /* Wildberries градиент */
border: none;
color: #fff;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-weight: bold;
transition: background 0.3s, transform 0.2s;
}
.main-card-page-text-button-buy-link .btn-wb:hover {
background: linear-gradient(45deg, #D800DB, #D800DB); /* Измененный Wildberries градиент при наведении */
transform: scale(1.05);
color: #fff;
}


.main-card-page-text-button-buy-link .btn-oz {
background: linear-gradient(45deg, #3B82F6, #2563EB); /* Ozon градиент */
border: none;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-weight: bold;
transition: background 0.3s, transform 0.2s;
}

.main-card-page-text-button-buy-link .btn-oz:hover {
background: linear-gradient(45deg, #2563EB, #1E40AF); /* Измененный Ozon градиент при наведении */
transform: scale(1.05);
}
.main-card-page-text-button-buy-link .btn-ya {
background: linear-gradient(45deg, #ffcc00, #fff838); /* Яндекс градиент */
border: none;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-weight: bold;
transition: background 0.3s, transform 0.2s;
}

.main-card-page-text-button-buy-link .btn-ya:hover {
background: linear-gradient(45deg, #ffcc00, #fff838); /* Измененный Яндекс градиент при наведении */
transform: scale(1.05);
}

.main-carard-pad p {
font-size: 20px;
}

.accordion-button {
background: #393E46 !important;
color: #fff !important;
font-weight: bold;
}

.big-main-card-button-buy .btn-wb {
background: linear-gradient(45deg, #E313BF, #E313BF); /* Wildberries градиент */
border: none;
color: #fff;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-weight: bold;
transition: background 0.3s, transform 0.2s;
}
.big-main-card-button-buy .btn-wb:hover {
background: linear-gradient(45deg, #D800DB, #D800DB); /* Измененный Wildberries градиент при наведении */
transform: scale(1.05);
color: #fff;
}

.big-main-card-button-buy .btn-oz {
background: linear-gradient(45deg, #3B82F6, #2563EB); /* Ozon градиент */
border: none;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-weight: bold;
transition: background 0.3s, transform 0.2s;
}

.big-main-card-button-buy .btn-oz:hover {
background: linear-gradient(45deg, #2563EB, #1E40AF); /* Измененный Ozon градиент при наведении */
transform: scale(1.05);
}
.big-main-card-button-buy .btn-ya {
background: linear-gradient(45deg, #ffcc00, #ffc100); /* Я.Ма градиент */
border: none;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-weight: bold;
transition: background 0.3s, transform 0.2s;
}

.big-main-card-button-buy .btn-ya:hover {
background: linear-gradient(45deg, #ffcc00, #ffc100); /* Измененный Ozon градиент при наведении */
transform: scale(1.05);
}

.big-main-card-button-buy {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.big-main-card-button-buy a {
font-size: 2.0rem;
}


/* Делаем таблицу адаптивной */
.table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
background-color: transparent;
}

.table th, 
.table td {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;
}

/* Делаем таблицу адаптивной */
.table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
background-color: transparent;
}

.table th, 
.table td {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;
}

/* Делаем таблицу адаптивной на устройствах с маленьким экраном */
@media screen and (max-width: 767px) {
.table {
  border: 0;
}
.table thead {
  display: none;
}
.table caption {
  font-size: 1.5em;
}
.table tr {
  display: block;
  margin-bottom: 0.5rem;
  border-bottom: 2px solid #dee2e6;
}
.table td {
  display: block;
}
.table td::before {
  content: attr(data-label);
  float: left;
  font-weight: bold;
}
}

.where-buy {
padding-top: 80px;
padding-bottom: 80px;
}
.where-buy h1 {
padding-bottom: 80px;
}
.where-buy p {
font-size: 20px;
}


.contacnts-main {
padding-top: 80px;
padding-bottom: 150px;
}
.contacnts-main h1 {
padding-bottom: 80px;
}

.contacnts-main h3 {
padding-bottom: 20px;
}
.contacnts-main a {
font-size: 32px;
text-decoration: none;
color: #000;
}
.contacnts-main p {
font-size: 32px;
}

/* Центрирование содержимого по центру на мобильных устройствах */
@media (max-width: 767px) {
.banner-text,
.banner-img {
  text-align: center;
}

.banner-img img {
  margin: 0 auto; /* Центрирование изображения */
}

.banner-text .btn {
  margin-top: 10px; /* Добавляем отступ сверху для кнопки */
  margin-bottom: 20px; /* Добавляем отступ снизу для кнопки */
}
}
.banner-text  {
margin-top: 20px;
padding-left: 40px;
margin-bottom: 20px;
}

/* Для мобильной версии (экраны до 767px) */
@media (max-width: 767px) {
.mini-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* Расстояние между карточками */
}

.cards-element {
  flex: 0 0 calc(50% - 20px); /* Равномерное распределение на две колонки с учетом отступа между карточками */
  margin-bottom: 20px; /* Отступ снизу для карточек */
}
}/* Для мобильной версии (экраны до 767px) */
@media (max-width: 767px) {
.row-up {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px; /* Расстояние между колонками (картинками и кнопками) */
}

.col-up {
  text-align: center;
  flex: 0 0 calc(100% - 20px); /* Каждый элемент в одном столбце, учитывая отступы */
  margin-bottom: 50px; /* Отступ снизу для элементов */
}

.col-up img {
  max-width: 100%; /* Автоматическое уменьшение картинок по ширине */
}

.col-up a {
  display: block;
  margin-top: 10px; /* Отступ сверху для кнопки "Подробнее" */
}
.col-up a::after {
  background: none;
}
}

/* Для мобильной версии (экраны до 767px) */
@media (max-width: 767px) {
.about-text,
.about-img {
  text-align: center;
}

.about-img img {
  max-width: 100%; /* Автоматическое уменьшение изображения по ширине */
  height: auto; /* Сохранение пропорций изображения */
  margin-bottom: 20px; /* Отступ снизу от изображения */
}
}


/* PRODUCTION */



/* Новые стили для мобильной версии */
@media (max-width: 767px) {
.prod-img {
  width: 100%;
  max-width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-bottom: 15px;
  display: block;
  align-items: stretch;
  margin: 0 auto; /* Центрирование изображений */
}
.production {
  padding-top: 80px;
  padding-bottom: 80px;
}

.production h3 {
  padding-bottom: 80px;
}

/* Обнуляем стили для .prod-img в десктопной версии */
.prod-img {
  flex: 0 0 auto;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
  margin-bottom: 10px;
  display: block;
}

.production .row {
  margin: 0;
}
.footer .row {
  justify-content: center;
}
}
/* Добавляем стили для мобильной версии (экраны до 767px) */
@media (max-width: 767px) {
.main-carard-pad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.big-main-card-button-buy {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Расстояние между кнопками */
}

.big-main-card-button-buy a {
  flex: 1 1 auto; /* Равномерно распределяем кнопки по ширине */
  text-align: center; /* Выравнивание текста по центру */
}
.contacnts-main {
  text-align: center;
}
.banner-text {
  padding-left: 10px;
}
}

/* Добавляем стили для мобильной версии (экраны до 767px) */
@media (max-width: 767px) {
.main-card-page-text-block h1 {
  font-size: 2rem; /* Устанавливаем размер текста, который вам подходит */
}
.main-card-page-text-block {
  text-align: center;
}
}

/* Добавляем стили для мобильной версии (экраны до 767px) */
@media (max-width: 767px) {
.main-card-page-text-button-buy-link {
  display: inline;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* Расстояние между кнопками */
}

.main-card-page-text-button-buy-link a {
  width: 100%; /* Кнопки занимают всю доступную ширину */
}
.btn.collapsed {
  font-size: 14px; /* Устанавливаем желаемый размер текста для свернутой кнопки */
}
}


/* Добавляем стили для мобильной версии (экраны до 767px) */
@media (max-width: 767px) {
.big-main-card-button-buy a {
  font-size: 14px; /* Устанавливаем желаемый размер текста для кнопок */
  padding: 8px 15px; /* Задаем внутренние отступы для кнопок */
}
}


@media (max-width: 767px) {
    .banner-text {
        order: 2;
    }

    .banner-img {
        order: 1;
    }
}