/**
  Нормализация блочной модели
 */
 *,
 ::before,
 ::after {
   box-sizing: border-box;
 }
 
 /**
   Убираем внутренние отступы слева тегам списков,
   у которых есть атрибут class
  */
 :where(ul, ol):where([class]) {
   padding-left: 0;
 }
 
 /**
   Убираем внешние отступы body и двум другим тегам,
   у которых есть атрибут class
  */
 body,
 :where(blockquote, figure):where([class]) {
   margin: 0;
 }
 
 /**
   Убираем внешние отступы вертикали нужным тегам,
   у которых есть атрибут class
  */
 :where(
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   p,
   ul,
   ol,
   dl
 ):where([class]) {
   margin-block: 0;
 }
 
 :where(dd[class]) {
   margin-left: 0;
 }
 
 :where(fieldset[class]) {
   margin-left: 0;
   padding: 0;
   border: none;
 }
 
 /**
   Убираем стандартный маркер маркированному списку,
   у которого есть атрибут class
  */
 :where(ul[class]) {
   list-style: none;
 }
 
 :where(address[class]) {
   font-style: normal;
 }
 
 /**
   Обнуляем вертикальные внешние отступы параграфа,
   объявляем локальную переменную для внешнего отступа вниз,
   чтобы избежать взаимодействие с более сложным селектором
  */
 p {
   --paragraphMarginBottom: 24px;
 
   margin-block: 0;
 }
 
 /**
   Внешний отступ вниз для параграфа без атрибута class,
   который расположен не последним среди своих соседних элементов
  */
 p:where(:not([class]):not(:last-child)) {
   margin-bottom: var(--paragraphMarginBottom);
 }
 
 
 /**
   Упрощаем работу с изображениями и видео
  */
 img,
 video {
   display: block;
   max-width: 100%;
   height: auto;
 }
 
 /**
   Наследуем свойства шрифт для полей ввода
  */
 input,
 textarea,
 select,
 button {
   font: inherit;
 }
 
 html {
   /**
     Пригодится в большинстве ситуаций
     (когда, например, нужно будет "прижать" футер к низу сайта)
    */
   height: 100%;
   /**
     Убираем скачок интерфейса по горизонтали
     при появлении / исчезновении скроллбара
    */
   scrollbar-gutter: stable;
 }
 
 /**
   Плавный скролл
  */
 html,
 :has(:target) {
   scroll-behavior: smooth;
 }
 a{
    color: bisque;
 }
 
 body {
   /**
     Пригодится в большинстве ситуаций
     (когда, например, нужно будет "прижать" футер к низу сайта)
    */
   min-height: 100%;
   /**
     Унифицированный интерлиньяж
    */
   line-height: 1.5;
 }
 
 /**
   Нормализация высоты элемента ссылки при его инспектировании в DevTools
  */
 a:where([class]) {
   display: inline-flex;
 }
 
 /**
   Курсор-рука при наведении на элемент
  */
 button,
 label {
   cursor: pointer;
 }
 
 /**
   Приводим к единому цвету svg-элементы
   (за исключением тех, у которых уже указан
   атрибут fill со значением 'none' или начинается с 'url')
  */
 :where([fill]:not(
   [fill="none"],
   [fill^="url"]
 )) {
   fill: currentColor;
 }
 
 /**
   Приводим к единому цвету svg-элементы
   (за исключением тех, у которых уже указан
   атрибут stroke со значением 'none')
  */
 :where([stroke]:not(
   [stroke="none"],
   [stroke^="url"]
 )) {
   stroke: currentColor;
 }
 
 /**
   Чиним баг задержки смены цвета при взаимодействии с svg-элементами
  */
 svg * {
   transition-property: fill, stroke;
 }
 
 /**
   Приведение рамок таблиц в классический 'collapse' вид
  */
 :where(table) {
   border-collapse: collapse;
   border-color: currentColor;
 }
 
 /**
   Удаляем все анимации и переходы для людей,
   которые предпочитают их не использовать
  */
 @media (prefers-reduced-motion: reduce) {
   *,
   ::before,
   ::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
 }

 *{
    list-style: none ;
    text-decoration: none;
    margin: 0;
    padding: 0;
 }
 



.header-content{
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding-block: 20px;
  padding-inline: 10px;
  
}

.header-link{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.logo {
  height: 50px;
  width: auto;
 }
.yand {
 height: 50px;
}

.gis{
  height: 50px;
  width: auto;
}


.what{
  height: 55px;
  width: auto;
}


/* Стили для контейнера слайдера */
.splide {
  max-width: 1400px; /* Максимальная ширина слайдера */
  margin: 0 auto ; /* Центрирование слайдера */
  width: 100%; /* Занимает всю доступную ширину */
  margin-block: 20px;
}

/* Стили для изображений */
.splide__slide img {
  width: 100%; /* Занимает всю ширину слайда */
  aspect-ratio: 1000 / 500; /* Соотношение сторон (ширина / высота) */
  object-fit: cover; /* Сохраняет пропорции и обрезает изображение */
  border-radius: 8px; /* Скругление углов */
}

/* Центрирование слайдов */
.splide__slide {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease; /* Плавное масштабирование */
}

/* Увеличение центрального слайда */
.splide__slide.is-active {
  transform: none /* Увеличиваем центральный слайд */
}

/* Скрыть стрелки и пагинацию */
.splide__arrows,
.splide__pagination {
  display: none;
}



 body {
    font-family: "Manrope", serif;
    font-style: normal;
    color: black;
 }

 .catigories{

    padding-inline: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20PX;



 }
 .catigories-item {
  max-width: 1400px;
  margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 30px;
    flex-wrap: wrap;
    padding-inline: 3%;

    


 }

 .cat-text {
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    height: 50px;

 }



.cat-text a{
  font-size: 20px;
}

/* Стили для активной категории */
.active-category {
  background-color: bisque; /* Желтый фон */
  color: black; /* Черный текст */
  font-weight: bold; /* Жирный шрифт */
  border-radius: 15px; /* Скругленные углы */
  padding: 5px 10px; /* Отступы */
}

/* Стили для ссылок в категориях */
.cat {
  text-decoration: none; /* Убираем подчеркивание */
  color: inherit; /* Наследуем цвет текста */
}

.products{
  max-width: 1400px;
  margin: 0 auto;
  margin-top: 50px;
  display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: 30px;
 align-items: center;
 margin-bottom: 50px;
 


}

.products-card {
  align-items: center;
  column-gap: 20px;
  width: 200px;
  height: 300px;

}

.card-img {
  height: 200px;

}
.card-img img{
  border-radius: 10px;
  height: 100%;
  width: auto;
}


.card-text{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 15px;
}

h4{
  font-weight: 300;
  color: grey;
}

h3{
  font-weight: 400;
  font-size: 16px;
}


h2{
  font-weight: 500;
  font-size: 17px;
  line-height: 21px;
}

.card-info{
  height: 48px;
  overflow: hidden;
  margin-top: 10px;
}


/* Пример стилей для пагинации */
.pagination {
  text-align: center;
  margin: 20px 0;
}

.pagination .step-links {
  display: inline-block;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 30px;
}

.pagination a {
  color: SlateGrey;
  text-decoration: none;
  padding: 8px 12px;
  margin: 0 4px;
  font-size: 22px;
}

.pagination a:hover {
  background-color: SlateGrey;
  color: white;
  border-color: SlateGrey;
}

.pagination .current {
  padding: 8px 12px;
  margin: 0 4px;
  background-color: SlateGrey;
  color: white;
  border-radius: 30px;
}

h4 {
  text-align: center;
  font-size: 16px;
}




















 @media (max-width:850px){
    .cat-text {
        
        height: 30px;
     }

     .catigories{
        padding-inline: 8px;
     }
     .cat-text a{
      font-size: 16px;
    }
    
    
    
    

 }


 @media (max-width:500px){

  .header-content{

    padding-block: 0px;
    padding-inline: 10px;
    padding-top: 15px;
    
  }
  
  .header-link{
    gap: 20px;
  }
  
  .logo {
    height: 40px;
    width: auto;
   }
  .yand {
   height: 40px;
   width: auto;
  }
  
  .gis{
    height: 40px;
    width: auto;
  }
  .what{
    height: 45px;
    width: auto;
  }
  .products{
    margin-top: 20px;
    gap: 15px;
    margin-bottom: 25px;
  }
  .products-card {

    
    width: 176px;
    height: 264px;
  
  }
  .card-img {
    height: 176px;

  }
  .card-text{
    margin-top: 5px;
  }
  

  h3{

    font-size: 15px;
  }
  
  
  h2{

    font-size: 14px;
    line-height: 17px;
  }
  
  .card-info{
    height: 35px;

    margin-top: 8px;
  }
  


}


@media (max-width:400px) {

  .products-card {


    width: 167px;
    height: 251px;
  
  }
  .card-img {
    height: 167px;




  }
  .card-text{
    margin-top: 5px;
  }
  

  h3{

    font-size: 15px;
  }
  
  
  h2{

    font-size: 14px;
    line-height: 17px;
  }
  
  .card-info{
    height: 35px;

    margin-top: 8px;
  }
  


}