/* Общие стили */
body {
    font-family: 'Roboto', sans-serif;
	font-size: 18px;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6;
    background-color: #f8f9fa; /* Светло-серый фон, как на изображении background-color: #f0f0f0; */
}

.bggrey
{
	background-color: #f0f0f0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

h1, h2, h3, h4 {
    margin-bottom: 20px;
}

h1 {
    font-size: 2.5em;
    color: #000; /* Темно-синий цвет, как на изображении 9d5924*/
    line-height: 1.2;
}

h2 {
    font-size: 2em;
    text-align: left;
    color: #9d5924;
}

h3 {
	text-align: left;
    font-size: 1.5em;
	color: #9d5924;
}

h4 {
	text-align: left;	
    font-size: 1.2em;
    margin-top: 10px;
    margin-bottom: 10px;
	color: #9d5924;
}

p {
    margin-bottom: 20px;
}

a {
    text-decoration: none;
    color: #9d5924;
}

.btn {
    display: inline-block;
    background-color: #9d5924;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #0056b3;
}

img {
    max-width: 100%;
    height: auto;
}

/* Шапка сайта */
.site-header {
    background-color: #ffffff; /* Белый фон для шапки */
    padding: 10px 0;
    border-bottom: 1px solid #e9ecef;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Выравнивание по вертикали для всех элементов шапки */
}

.logo {
    display: flex;
    align-items: center; /* Выравнивание по вертикали для логотипа и текста */
}

.logo img {
    height: 50px; /* Высота логотипа */
    margin-right: 10px; /* Отступ между логотипом и текстом */
}

.company-full-name {
    font-size: 0.9em; /* Размер шрифта для названия компании */
    color: #666; /* Цвет текста названия компании */
    white-space: nowrap; /* Предотвращает перенос текста */
}

.main-nav .nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.main-nav .nav-list li {
    margin-left: 20px;
}

.main-nav .nav-list li a {
    color: #333; /* Цвет ссылок */
    font-weight: normal; /* Не жирный */
    padding: 10px 0;
    transition: color 0.3s ease;
    text-transform: uppercase; /* Заглавные буквы, как на изображении */
    font-size: 0.9em; /* Чуть меньший размер шрифта */
}

.main-nav .nav-list li a:hover {
    color: #9d5924;
}

.lang-icons {
    display: flex;
    align-items: center;
    margin-left: 20px; /* Отступ от навигации */
}

.lang-icon {
    height: 20px; /* Размер иконок флагов */
    margin-left: 10px;
}

.menu-toggle {
    display: none; /* Скрыто по умолчанию на больших экранах */
    background: none;
    border: none;
    font-size: 2em;
    cursor: pointer;
    color: #333;
    margin-left: 20px; /* Отступ от иконок языков */
}

/* Главный блок (Hero) */
.hero-section {
    background: url('/images/banner.jpg') no-repeat center center/cover; /* Замените на изображение с кораблем */
    color: #fff;
    text-align: left; /* Выравнивание текста по левому краю, как на изображении */
    padding: 100px 0 200px; /* Увеличим нижний отступ, чтобы текст был выше */
    position: relative;
    min-height: 400px; /* Минимальная высота секции */
}

.hero-section-port {
    background: url('/images/banner-port.jpg') no-repeat center center/cover; /* Замените на изображение с кораблем */
    color: #fff;
    text-align: left; /* Выравнивание текста по левому краю, как на изображении */
    padding: 100px 0 200px; /* Увеличим нижний отступ, чтобы текст был выше */
    position: relative;
    min-height: 400px; /* Минимальная высота секции */
}

.hero-section-port h1{
 color:#fff;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Более светлый полупрозрачный темный слой */
}

.hero-section .container {
    position: relative;
    z-index: 1;
    padding-top: 50px; /* Отступ сверху для заголовка */
}

.hero-section h1 {
    font-size: 3.5em;
    margin-bottom: 0; /* Нет отступа снизу, так как нет других элементов */
    color: #fff; /* Белый цвет текста для контраста с фоном */
    max-width: 800px; /* Ограничим ширину заголовка */
}

/* Блок "О нас" */

/* Блок "Услуги" */
.services-section1 {
    text-align: left;
    padding: 60px 0;
}

.services-section h2 {
	margin-top:0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.mosaic
{
	margin-bottom:20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	background-color: #f0f0f0;
	padding:10px;
}

.service-item {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.service-item:hover {
    transform: translateY(-5px);
}

.service-item img {
    margin-bottom: 10px;
}


.advantages-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: left;
	padding: 30px;
}

.advantages-item img {
    width: 30%;
    max-height: 200px; /* Фиксированная высота изображения */
    object-fit: cover; /* Обрезка изображения для заполнения */
}


/* Блок "Продукция" */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.product-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
	padding: 6px;
}

.product-item img {
    width: 100%;
    height: 200px; /* Фиксированная высота изображения */
    object-fit: cover; /* Обрезка изображения для заполнения */
}

.product-item h4, .product-item p {
    padding: 0 15px;
}

.product-item h4 {
    margin-top: 15px;
}

.product-item p {
    font-size: 0.9em;
    color: #666;
	text-align: left;
}

/* Блок "Логистика" */
.logistics-section {
    text-align: left;
}

.logistics-section ul {
    list-style: none;
    padding: 0;
    margin: 20px auto;
    text-align: left;
}

.logistics-section ul li {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.one-third ul li {
    background-color: #fff;
    margin: 10px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

/* Блок "Отзывы" */
.reviews-section {
    background-color: #f8f9fa;
    padding: 60px 0;
    text-align: left;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 30px;
}

.review-item {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: left;
}

.review-item p {
    font-style: italic;
    color: #555;
}

.review-item span {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    color: #333;
}

/* Блок "Контакты" */
.contact-section {
    text-align: center;
    padding: 60px 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-form .btn {
    width: auto;
}

/* Футер */
.site-footer {
    background-color: #343a40;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

/* Адаптивность */
@media (max-width: 768px) {
    .header-container {
        flex-wrap: wrap; /* Позволяет элементам переноситься */
        justify-content: space-between; /* Распределяем элементы */
    }

    .logo {
        order: 1; /* Логотип первым */
        flex-grow: 1; /* Позволяет логотипу занимать доступное место */
    }

    .company-full-name {
        display: none; /* Скрываем полное название компании на мобильных */
    }

    .main-nav {
        width: 100%;
        order: 4; /* Размещаем меню ниже логотипа и кнопки */
        display: none; /* Скрываем меню по умолчанию */
        flex-direction: column;
        text-align: center;
        background-color: #ffffff;
        padding-top: 10px;
        border-top: 1px solid #eee;
    }

    .main-nav.active {
        display: flex; /* Показываем меню при активации */
    }

    .main-nav .nav-list {
        flex-direction: column;
        width: 100%;
    }

    .main-nav .nav-list li {
        margin: 0;
        border-bottom: 1px solid #e9ecef;
    }

    .main-nav .nav-list li:last-child {
        border-bottom: none;
    }

    .main-nav .nav-list li a {
        padding: 15px 0;
        display: block; /* Делаем ссылку блочным элементом для лучшего клика */
    }

    .lang-icons {
        order: 2; /* Иконки языков после логотипа */
        margin-left: auto; /* Прижимаем к правому краю */
    }

    .menu-toggle {
        display: block; /* Показываем кнопку меню на мобильных */
        order: 3; /* Кнопка гамбургера после иконок языков */
        margin-left: 10px; /* Отступ от иконок */
    }

    .hero-section h1 {
        font-size: 2.5em;
        text-align: center;
    }

    .services-grid, .products-grid, .reviews-grid {
        grid-template-columns: 1fr; /* В одну колонку на мобильных */
    }
}




.flex-container {
    display: flex; /* Активируем Flexbox для контейнера */
    width: 100%; /* Контейнер занимает всю доступную ширину */
    max-width: 1200px; /* Ограничиваем максимальную ширину для лучшей читаемости */
    margin: 0 auto; /* Центрируем контейнер */
    n-border: 1px solid #ccc;
    n-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    n-background-color: #fff;
}

.flex-item {
    n-padding: 20px;
    box-sizing: border-box; /* Важно для корректного расчета ширины с padding */
}

.one-third {
    flex: 1; /* Занимает 1 часть из 3 (1/3) */
    n-background-color: #e0f7fa; /* Светло-голубой фон */
    n-border-right: 1px solid #ccc; /* Разделительная линия */
}

.two-thirds {
    flex: 2; /* Занимает 2 части из 3 (2/3) */
    n-background-color: #e8f5e9; /* Светло-зеленый фон */
}


/* Адаптивность: на маленьких экранах блоки располагаются друг под другом */
@media (max-width: 768px) {
    .flex-container {
        flex-direction: column; /* Изменяем направление на вертикальное */
    }

    .one-third {
        border-right: none; /* Убираем вертикальную разделительную линию */
        n-border-bottom: 1px solid #ccc; /* Добавляем горизонтальную разделительную линию */
    }
}


.flex-img
{
	width: 90%; 
}


/* Стили для списка меню */
.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-item {
    display: flex; /* Используем flexbox для выравнивания текста и стрелки */
    justify-content: space-between; /* Размещает элементы по краям */
    align-items: center; /* Выравнивает по центру по вертикали */
    padding: 15px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s ease, font-weight 0.3s ease;
}

.menu-item:last-child {
    border-bottom: none; /* Убираем нижнюю границу у последнего элемента */
}

.menu-item:hover {
    background-color: #f0f0f0;
}

.menu-item.active {
    n-background-color: #d1e7dd; /* Более насыщенный фон для активного элемента */
    font-weight: bold;
    color: #9d5924;
}

.arrow {
    font-size: 0.8em;
    color: #888;
    transition: transform 0.3s ease, color 0.3s ease;
    transform: rotate(90deg); /* Поворачиваем стрелку для активного элемента */
}

.menu-item.active .arrow {
    color: #9d5924;
    transform: rotate(0deg); /* Поворачиваем стрелку для активного элемента */
}

/* Стили для блока описания */
.description-wrapper {
    /* Если нужно, чтобы описания накладывались друг на друга, можно использовать position: relative/absolute */
    /* Для простоты, пока просто контейнер */
}

.description-content {
    display: none; /* По умолчанию все описания скрыты */
    padding: 0 10px; /* Небольшой отступ внутри описания */
}

.description-content.active {
    display: block; /* Активное описание становится видимым */
}



.description-content p {
    line-height: 1.8;
    color: #555;
}



        .accordion {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
        }

        .accordion-item {
            border-bottom: 1px solid #eee;
        }

        .accordion-item:last-child {
            border-bottom: none;
        }

		/* f8f9fa f0f0f0; */
        .accordion-header {
            background-color: #f0f0f0;
            color: #333;
            padding: 15px 20px;
            cursor: pointer;
            font-size: 1.1em;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.3s ease;
        }

        .accordion-header:hover {
            color: #9d5924;
        }

        .accordion-header .icon {
            font-size: 1.2em;
            transition: transform 0.3s ease;
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease-out;
            padding: 0 20px;
            background-color: #f9f9f9;
        }

        .accordion-content p {
            margin: 0;
            padding: 15px 0;
            line-height: 1.6;
            color: #555;
        }

        /* Стиль для открытого элемента */
        .accordion-item.active .accordion-header {
           color: #9d5924;
        }

        .accordion-item.active .accordion-header .icon {
            transform: rotate(180deg);
        }

        .accordion-item.active .accordion-content {
            max-height: 100%; /* Установите максимальную высоту, достаточную для вашего контента */
            padding: 15px 20px;
        }





        /* Контейнер Наши услуги */
        .text-five-reasons {
            margin: 0 auto;
            max-width: 1920px;
        }

        .five-reasons h3 {
            font-size: 24px;
            font-weight: normal;
        }

        .tile-row {
            display: flex;
        }

        .tile-row > * {
            flex: 1;
        }

        .tile-row > * + * {
            margin-left: 1em;
        }

        .tile {
            background-color: #fff;
            border: 1px solid #d2d1d1;
            padding: 24px;
        }

        .tile {
            text-align: center;
        }

        .tile > p {
            font-size: 18px;
            font-weight: 700;
            margin: 0;
        }
		
		
		



/* Стили для блока контактов */
.contact-section {
    padding: 60px 0;
    background-color: #ffffff; /* Белый фон для блока контактов */
    border-bottom: 1px solid #e9ecef;
}

.contact-info-wrapper {
    display: flex;
    flex-wrap: wrap; /* Позволяет элементам переноситься на новую строку */
    justify-content: center; /* Центрирует элементы, если они не заполняют всю ширину */
    gap: 10px; /* Расстояние между элементами */
    max-width: 800px; /* Ограничиваем ширину для лучшей читаемости */
    margin: 0 auto; /* Центрируем блок */
}

.contact-item {
    display: flex;
    align-items: center; /* Выравнивание иконки и текста по вертикали */
    flex: 1 1 300px; /* Элемент может расти, сжиматься и имеет базовую ширину 300px */
    n-background-color: #f8f9fa; /* Светлый фон для каждого блока контакта */
    n-padding: 20px;
    n-border-radius: 8px;
    n-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    n-transition: transform 0.3s ease;
}

.n-contact-item:hover {
    transform: translateY(-5px); /* Легкий эффект при наведении */
}

.contact-icon {
    font-size: 2em; /* Размер иконки */
    color: #9d5924; /* Цвет иконки */
    margin-right: 15px; /* Отступ справа от иконки */
    flex-shrink: 0; /* Иконка не должна сжиматься */
}

.contact-details {
    display: flex;
    flex-direction: column; /* Располагаем метку и значение друг под другом */
}

.contact-label {
    font-weight: bold;
    color: #555; /* Цвет метки */
    margin-bottom: 5px;
    font-size: 0.9em;
}

.contact-value {
    font-size: 1.1em;
    color: #333; /* Цвет значения */
}



/* Стили для формы (если решите добавить) */
.contact-form {
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contact-form h3 {
    font-size: 1.8em;
    margin-bottom: 30px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-form .btn {
    width: auto;
    padding: 12px 30px;
    font-size: 1.1em;
}