/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
}

/* Set default font family */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
}

/* Header */
.header {
    width: 100%;
    height: 8%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container img {
    width: 30%; /* например, задаем ширину логотипа в 20% от ширины экрана */
    height: auto; /* сохраняем пропорции изображения */
margin: 0 20px;

}

.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.nav a {
    color: white;
    text-decoration: none;
    margin: 0 20px;
}

/* Для ширины экрана меньше или равной 1280px */
@media only screen and (max-width: 1280px) {
    .header, {
        width: 100%;
    }
}

/* Для ширины экрана меньше или равной 768px */
@media only screen and (max-width: 768px) {
    .header, {
        height: auto;
    }

    .nav {
        flex-direction: row;
    }

    .nav a {
        color: white;
    text-decoration: none;
    margin: 0 20px;
    }
}

.nav a:hover {
    color: #c29234;
}

/* Hero section styling */
.hero {
    height: 100%;
  width: auto;
  display: flex;
  justify-content: center;
}

.hero img {
  object-fit: contain;
  object-position: center;
  max-width: 100%;
  max-height: 100%;
}

/* Other section styling */
.intro, .services, .team, .contact, .why, .how-it-works {
    width: 1280px;
    margin: 0px auto;
 text-align: center;
 padding: 40px 0;
 margin: 0 auto;
}

.services p {
 max-width: 800px;
  margin: 0 auto;
 color: #b6e3bb;
text-align: left;
}
.services h1 {
 max-width: 800px;
  margin: 0 auto;
margin-bottom: 10px;
 color: #b6e3bb;
font-size: 7;
}

.intro h3 {
  max-width: 500px;
  margin: 0 auto;
color: #4b3727
}

.intro, .team, .how-it-works {
    background-color: #c29234;
scroll-margin-top: 80px;
}

.team h1 {
  max-width: 500px;
  margin: 0 auto;
color: #4b3727

}

.team-member {
  display: inline-block;
  width: 33%;
  vertical-align: top;
  padding: 0 20px;
  box-sizing: border-box;

}

#showMoreBtn {
    background-color: #4b3727;
    color: #c29234;
    font-size: 1.3em; /* Размер H3, примерно 18px на 16px базового размера */
font-family: 'Montserrat', sans-serif;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 20px;
}

.more {
  display: inline-block;
  width: 33%;
  vertical-align: top;
  padding: 0 20px;
  box-sizing: border-box;

}


.services, .why {
    background-color: #194f0b;
}


.why {
     display: flex;
     flex-direction: column;
    align-items: center; /* Центрируем по горизонтали */
}

.why-block {
    display: flex;
    align-items: flex-start; /* Выравниваем элементы по верхнему краю */
    margin-bottom: 50px;
margin-right: 20px;
    margin-left: 20px;
text-align: justify;
}

.why-block img {
    max-width: 200px;
    margin-right: 20px;
    margin-left: 20px;
}


.why-block p {
    text-align: left;
 color: #b6e3bb;
max-width: 600px;
}


.why-block h1 {
 max-width: 800px;
  margin-bottom: 10px;
 color: #b6e3bb;
font-size: 7;
}

@media (max-width: 768px) {
    .why-block {
        flex-direction: column;
        align-items: center;
    }

    .why-block img {
        width: 100%; /* Make images responsive */
        margin-right: 0; /* Remove margin for mobile view */
        margin-bottom: 10px; /* Add space between image and text */
    }
}

/* Flexbox styles for how-it-works section */


.how-it-works h3 {
margin-bottom: 20px;
color: #4b3727
text-align: left;

}

.how-it-works .block h3 {
color: #4b3727

}
.how-it-works .title {
    font-size: 24px;
    margin-bottom: 20px;
color: #4b3727
}

.how-it-works .blocks {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.how-it-works .block {
    width: calc(50% - 20px);
    margin-bottom: 40px;
    padding: 0 20px;
box-sizing: border-box;

}

.how-it-works .block img {
    display: block;
    margin: 0 auto;
    width: 100px; /* adjust image width as needed */
    height: auto;
    margin-bottom: 10px;
}

.how-it-works .block p {
    text-align: left;
color: #4b3727

}

}
/* Для мобильных устройств - блоки занимают 100% ширины */
@media only screen and (max-width: 768px) {
    .how-it-works .how-it-works-block {
        width: calc(100% - 20px);
    }
}

.contact {
    background-color: #433e34;
}
/* Скрытая часть контента по умолчанию скрыта */
.hidden-content {
    display: none;
    margin-top: 10px; /* Добавляем отступ сверху для разделения контента */
}

/* Стили для кнопки showMoreBtn */
.showMoreBtn {
  background-color: #4b3727;
    color: #c29234;
    font-size: 1.3em;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 20px;
}

/* Медиа-запрос для мобильных устройств */
@media only screen and (max-width: 768px) {
    .team-member {
        width: 100%; /* Блоки идут на всю ширину */
    }
    
    /* Скрываем горизонтальное расположение блоков и выравниваем по вертикали */
    .team-member img,
    .team-member p {
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    /* Показываем скрытую часть контента при активации */
    .show-content.active + .hidden-content {
        display: block;
    }
}

.signup-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #c29234;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
}

.signup-btn:hover {
    background-color: #4b3727;
}

.contact {
    text-align: center;
    padding: 40px 0;
    background-color: #736D23;
    color: white;
}

.contact-text {
    font-size: 24px;
    margin-bottom: 20px;
}

.social-links {
    margin-bottom: 20px;
}

.social-links img {
    width: 50px; /* Размеры изображений можно настроить под ваш дизайн */
    margin: 0 10px; /* Добавляем небольшие отступы между изображениями */
}

/* Footer styling */
.footer {
    background-color: black;
    color: white;
    padding: 20px 0;
} 

/* Общие стили для мобильных устройств */
@media only screen and (max-width: 768px) {
    /* Уменьшаем ширину контейнеров и делаем их блочными */
    .intro, .services, .team, .how-it-works, .why, .contact {
        width: 100%;
        padding: 20px; /* Добавляем отступы для разделения блоков */
        box-sizing: border-box; /* Добавляем box-sizing для корректного расчета размеров */
    }

    /* Убираем лишние отступы и выравниваем текст по центру */
    .intro h3, .team h1, .block h3, .why-block h1, .why-block p {
        text-align: center;
    }

    /* Стили для изображений */
    .hero img,
    .why-block img,
    .block img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* Дополнительные стили для компактного отображения */
    .team-member,
    .why-block,
    .block {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }


.how-it-works .block {
        width: 100%; /* Блоки занимают 100% ширины на мобильных устройствах */
        padding: 0; /* Убираем отступы */
        margin-bottom: 20px; /* Уменьшаем отступ между блоками */
        float: none; /* Отменяем float для вертикального расположения */
    }

    /* Стили для кнопки "Подробнее о нас" */
    #showMoreBtn {
        margin: 20px auto; /* Центрируем кнопку */
    }

    /* Дополнительные стили для формата текста и заголовков */
    .services h1, .why-block h1, .how-it-works h3 {
        font-size: 24px; /* Уменьшаем размер шрифта */
    }
}