body {
     /*Отступ/odstęp*/
    margin:0;
     /*Шрифт/Czcionka*/
     font-family: 'Montserrat', sans-serif;
     /*Размер текста/Rozmiar tekstu*/
    font-size: 15px;
    /*Межстрочный отстсуп/Wcięcie*/
    line-height: 1.6;
    color: #333;
    box-sizing: border-box;
   
}

/*Плавный скролл/Gładki skroll*/
html
{
 scroll-behavior: smooth;
}

*,
*:before
*:after 

{
 /*Размер блока/Rozmiar bloku*/
box-sizing: border-box;
}
 /*Всем заголовкам задает margin 0/nagłowki margin 0*/
h1, h2, h3, h4, h5, h6
{
  margin: 0;
}

/*контейнер*/
.container 
{
     /*Ширина/szerokość*/
   width: 100%;
   max-width: 1200px;
    /*Выравнивает по центру/Równamy po środku*/
   margin: 0 auto;
}

/*Первый*/
.first
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
     /*Высота*/
    height : 100vh;
     /*Вставляет фото по центру и без повторений/zdjęcie cwnter i bez powtórek*/
    background: url("../images/11.jpg")
     center
     no-repeat;
      /*Занимает всю площадь экрана/Cała szerokość ekranu*/
     background-size: cover;
}

.first__inner
{
  width: 100%;
  max-width: 1000px;
  /*Выравнивает по центру/wyrównamy po środku*/
  margin: 0 auto;
  text-align: center;
}

.first__title
{
  font-size: 70px;
  font-weight: 700;
  border-radius: 10px;
  background-color: rgb(88, 40, 0);
  /*Прозрачность фона/Przezroczystość tła*/
  opacity: 0.7;
  /*Выравнивает на странице/Wyrówna na stronie*/
  margin-bottom: 80px;
  /*Выравнивает текст в блоке/Wyrówna tekst w blokie*/
  padding-bottom: 37px;
  padding-top: 30px;
  margin-left: 40px;
  margin-right: 40px;
   
  text-align: center;
 /*Межстрочный отстсуп/Wcięcie*/
  line-height: 1;

  color: #fff ;
  
}

 /*Вставляет псевдо элемент/Wstawia pseudoelement*/
.first__title:after
{
     /*Полосочка/pasek*/
  content:"";
  width: 60px;
  height: 3px;

  background-color: #fff;
  /*Выравнивает по центру с отступами слева и справа/Wyrównuje do środka z lewą i prawą wyściółką*/
  margin: 60px auto 80px ;
}

.first__subtitle
{
    padding-left: 7%;
    margin-bottom: 20px;
    font-size: 30px;
    color: #fff;
    /*Выравнивает текст по центру*/
    text-align: center;
    
}

/* Класс для шапки*/
.header
{
    width: 100%;
    /*Делает эллемент невидимым для других эллементов/Element jest ignorowany*/
    position: absolute;
    /*Координаты обьекта/koordynaty*/
    top: 0;
    left: 0;
    right: 0;
    /*Переносит обьект поверх всего/Umieszcza obiekt na wierzchu wszystkiego*/
    z-index: 1000;
}

/* Растягивает эллементы по всей странице
лого слева а кнопки справа/Umieszcza czapkę*/
.header__inner
{
    /*Добавляет границу отступа вокруг элемента(сверху)/odstęp na górze*/
    padding-top: 10px;
    /*Растягивает элементы вдоль страницы/Rozciąga elementy wzdłuż strony*/
    display: flex;
    /*Определяет пространство между и вокруг эллементов/Definiuje przestrzeń pomiędzy i wokół elementów*/
    justify-content: space-between;
    /* Выравнивает как justify но сверху и снизу
    /Wyrównuje jako justify, ale do góry i do dołu*/
    align-items: center;
}

.header.new {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: top 0.3s ease; /* Добавляем анимацию для плавного изменения top */
    background-color: #fff; /* Задаем цвет фона шапки */
    z-index: 1000; /* Устанавливаем высокий z-index, чтобы шапка находилась поверх других элементов */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    width: 100%;
    background-color: #ef7d1a;
  }

.header.new .header__inner {
  /* Добавляет границу отступа вокруг элемента(сверху)*/
  padding-top: 5px;
  padding-bottom: 5px;
  /* Дает эллементам гибкость*/
  display: flex;
  /* Определяет пространство между и вокруг эллементов*/
  justify-content: space-between;
  /* Выравнивает как justify но сверху и снизу*/
  align-items: center;
}
/* Класс для лого*/
.header__logo
{
    text-decoration: none;
    font-size: 30px;
    /*Насыщенность шрифта/Nasycenie czcionki*/
    font-weight: 700;
    color: #fff;
}
/* Класс для навигации*/
.nav
{
    font-size: 14px;
    /* Шрифт capslock*/
    text-transform: uppercase;
}
/* Класс для кнопок навигации*/
.nav__link 
{
    /* Назначает свойства дисплею/bloki ale wdłuż*/
    display: inline-block;
    /* Вертикально выравнивает элементы внутри класса/wyrówna po wertykali*/
    vertical-align: top;
    /* отступ между эллементами верх и низ 0 и между 15/odstęp między elementami*/
    margin: 0 15px;
    /* Положение эллемента устанавливается в зависимости
    от исходного места/Posicja zależy od miejsca standartowego*/
    position: relative;
   color: #fff;
   /* Убирает подчеркивание ссылок/Usuwamy standardowe podkreślenie linków */
   text-decoration: none;
   /* Длительность подсвечивания иконок/czas świecenia knopek*/
   transition: color  .1s linear;
}
/* класс при наводе мышкой на навигацию*/
.nav__link::after
{
  /* Генерирует содержимое/Pasek*/
  content: "";
  /* Делает элемент блочным (увеличивает зону работы 
  навода ссылки/Powiększa pracę linków robi ja blokiem*/
  display: block;
  width: 100%;
  height: 3px;
  /*Убирает автоматическое подсвечивание полос под кнопками
  /Pasków nie widać dopóki nie rozpoczniemy z nimi pracować*/
  display: none;

  background-color: #fce38a;
   /*элемент не виден для других/element jest ignorowany*/
  position: absolute;
  top: 100%;
  left: 0;
  /*Устанавливет слой обьекта/Ustawia warstwę obiektu tutaj w tle*/
  z-index: 1;
  /*Плавный переход/Płynne przejście*/
  transition: opacity .1s linear;


}
/* Добававляет изменение цвета при наведении на кнопку
/Dodaje zmianę koloru po najechaniu na przycisk*/
.nav__link:hover
{
color: #fce38a
}
.nav__link:hover:after
{
    display: block;
}
.button
{
    display: inline-block;
    /* Выравнивает по вертикали/Wyrównuje pionowo*/
    vertical-align: top;
    padding: 8px 30px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: 3px solid #fff;
    /* Капс лок шрифт/capslock*/
    text-transform: uppercase;
    text-decoration: none;
    /*Плавный переход/Płynne przejście*/
    transition: color .1s linear;
}
.button:hover
{
    background-color: #fff;
    color: #333;
}

.section
{
    padding: 80px 0px;
}

.section__header
{
    width: 100%;
    /*Ширина*/
    max-width: 950px;
    /*Выравнивает по центру*/
    margin: 0 auto;
    margin-bottom: 40px ;
}

.section__title
{
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
    /*Толщина текста*/
    font-weight: 600;
    color: #333;
    text-align: center;
    /*Капс/CapsLock*/
    text-transform: uppercase;
}
.section__text
{
    
color: rgb(58, 58, 58);
font-size: 35px;
text-align: center;

}

/*Псевдо элемент*/
.section__title:after
{
    /*Создает полосочку/Pasek*/
    content: "";
    /*Блочную*/
    display: block;
    width: 60px;
    height: 3px;
    margin: 25px auto 0px;
    background-color: #f38181;
}    

.about {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Обертка для больших экранов */
}

.about__item {
    width: 380px;
    margin-bottom: 20px; /* Добавляем отступ между элементами */
    background-color: #ffffff; /* Белый фон для элементов */
    border-radius: 8px; /* Скругленные углы */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Легкая тень */
    overflow: hidden; /* Обрезаем содержимое, выходящее за рамки */
}

.about__img {
    transition: transform .1s linear;
}

.about__item:hover .about__img {
    transform: translate3d(-10px, -10px, 0px);
}

.about__item:hover .about__img img {
    opacity: .7;
}

.about__img img {
    display: block;
    width: 100%; /* Устанавливаем ширину изображения в 100% контейнера */
    height: auto; /* Автоматическая высота для сохранения пропорций */
    transition: opacity .1s linear;
}

.about__text {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    padding: 10px; /* Добавляем отступ внутри элемента текста */
}

/* Медиа-запросы для экранов меньше 768px */

.section::after
{
    content: "";
    display: block;
    width: 950px;
    height: 3px;
    margin: 25px auto 0px;

    background-color: #f38181;
    
}
.fff
{
    text-align: center;

    
}
.asasas
{
    font-size: 30px;
    display: block;
  margin: 0 auto;
  text-align: center;
  
}
.asasas__vvvv
{
    font-size: 30px;
    display: block;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 30px;
}

.menu-toggle {
    display: none;
    cursor: pointer;
    margin-left: 20px;
}




@media (max-width: 1200px) {

    .first__subtitle {
        font-size: 40px;
    }

    .first__title {
        font-size: 55px;
    }

    /* Section */
    .section__header {
        margin-bottom: 50px;
    }

    .section__subtitle {
        font-size: 20px;
    }

    .section__title {
        font-size: 24px;
    }

    .section__title:after {
        margin: 20px auto;
    }

    .about__item {
        flex: 0 0 auto; /* Элементы не растягиваются и не сжимаются, занимают свою ширину */
        width: 100%; /* Фиксированная ширина для каждого элемента */
        max-width: 380px; /* Максимальная ширина элемента */
        margin-right: 10px; 
        margin: 0 auto;
        margin-bottom: 15px;
        /* Отступ между элементами */
    }

    .about__img img {
        width: 100%; /* Устанавливаем ширину изображения в 100% контейнера */
        height: auto; /* Автоматическая высота для сохранения пропорций */
    }

}
@media (max-width: 990px) {

    /* Intro */
    .first__subtitle {
        font-size: 30px;
    }

    .first__title {
        font-size: 45px;
    }

    /* Section */
    .section__header {
        margin-bottom: 50px;
    }

    .section__subtitle {
        font-size: 20px;
    }

    .section__title {
        font-size: 24px;
    }

    .section__title:after {
        margin: 20px auto;
    }

    .section::after {
        width: 300px;
    }
    
}
@media (max-width: 770px) {


    .header.new {
        display: none;
        
    }
    
    .header__logo {
        display: none;
    }

    .nav {
        flex-direction: column;
        display: none;
    }

    .nav.active {
        font-size: 3vw;
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 35vw;
        transition: top 0.3s ease; /* Добавляем анимацию для плавного изменения top */
        background-color: #fff; /* Задаем цвет фона шапки */
        z-index: 100; /* Устанавливаем высокий z-index, чтобы шапка находилась поверх других элементов */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
        background-color: #ef7d1a;
        
    }


    .nav__link {
        display: block;
        margin: 0;
        padding: 8px 20px;
    }

    .nav-toggle {
        display: block;
    }

    .menu-toggle {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        max-width: 50px;
        font-size: 50px;
        transition: top 0.3s ease; /* Добавляем анимацию для плавного изменения top */
        margin-right: 10px;
        z-index: 1001; /* Устанавливаем высокий z-index, чтобы шапка находилась поверх других элементов */
    }


    /* Section */
    .section {
        padding: 40px 0;
    }

    .fffimg {
       display: none;
    }
}
@media (max-width: 575px) {


    /* Intro */
    .first__subtitle {
        font-size: 22px;
    }

    .first__title {
        font-size: 30px;
    }

    /* Section */
    .section__header {
        margin-bottom: 50px;
    }

    .section__subtitle {
        font-size: 20px;
    }

    .section__title {
        font-size: 24px;
    }

    .section__title:after {
        margin: 20px auto;
    }
    

    .nav {
        font-size: 10px;
    }

    
}