@font-face {
	font-family: 'Gotham Pro Regular';
	src: url('fonts/GothamPro.eot');
	src: url('fonts/GothamPro.eot?#iefix') format('embedded-opentype'),
	url('fonts/GothamPro.woff') format('woff'),
	url('fonts/GothamPro.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
/* Цветовая схема */

#podval{
	display: flex;
	flex-direction: column;
}

.oferta {
	display: flex;
	align-items: center;
	font-size: 0.8em;
	justify-content: space-between;
	text-align: center;
}
#oferta {
	margin-left: 15px;
}

:root {
--primary-color: #007BFF; /* Основной синий */
--primary-hover-color: #0056b3; /* Темно-синий для hover */
--accent-color: #FF8C42; /* Оранжевый для акцентов */
--accent-hover-color: #E67332; /* Темно-оранжевый для hover */
--text-color: #333333; /* Основной цвет текста */
--background-color: #FFFFFF; /* Цвет фона */
--footer-background-color: #1A2A4F; /* Новый цвет фона футера */
--footer-text-color: #FFFFFF; /* Цвет текста футера */
--menu-background-color: #2F3A5F; /* Цвет фона меню */
            --menu-text-color: #FFFFFF; /* Цвет текста меню */
}






/* Общие стили */

body {
    font-family: 'Gotham Pro Regular'; 
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
}
.conta {
  display: flex; /* Создаем гибкую структуру */
  flex-direction: column; /* Располагаем элементы вертикально */
  min-height: 100vh; /* Минимальная высота равна высоте вьюпорта */
}

a {
    text-decoration: none;
    color: var(--primary-color);
}

a:hover {
    color: var(--primary-hover-color);
}

.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Стили для шапки */

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left, .header-right {
    flex: 1;
    text-align: center;
    font-size: 0.9em;
}

.header-left p, .header-right p {
    margin: 0;
    color: var(--text-color);
}

.header-left {
	vertical-align: baseline;
	font-size: 2em;
    text-align: center;
}

.header-right {
    font-size: 1em;
    text-align: start;
    display: flex;
    gap: 20px; /* Расстояние между колонками */
}

.header-right .column {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Расстояние между элементами в колонке */
}

.header-right a {
    color: var(--primary-color);
    text-decoration: none;
}

.header-right a:hover {
    color: var(--primary-hover-color);
}

#phone {
	margin-top: 10px;
	margin-left: 20px;
    padding-right: 80px;
}
#podval {
	
}

.logo {
    width: 120px;
    height: 120px;
    margin: 0 40px;
        }

/* Адаптивность для шапки */

@media (max-width: 768px) {
    .header-content {
    flex-direction: column;
    text-align: center;
}

.header-left{
	margin-top: 10px;
}

.header-left, .header-right {
    text-align: center;
    margin-bottom: 10px;
    flex-direction: column;
    gap: 10px;
}

.header-right .column {
    align-items: center;
}

.logo {
    margin: 10px 0;
}
}

/* Навигация */

.menu-container {
    background-color: var(--menu-background-color); /* Цвет фона меню */
	padding: 20px 0;
}

nav {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
}

nav a {
    color: var(--menu-text-color); /* Цвет текста меню */
    font-size: 1.1em;
    transition: color 0.3s ease;
}

 nav a:hover {
    color: var(--accent-color); /* Цвет при наведении */
}

/* Бургер-меню для мобильных устройств */

.burger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    z-index: 1000;
}

.burger-menu span {
    width: 25px;
    height: 3px;
    background-color: var(--menu-text-color); /* Цвет полосок бургера */
    margin: 4px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.burger-menu p{
	display: block;
	font-size: 1.2em;
	color: #ffffff ;
}

.burger-menu p hover{
	color: color: #FF8C42 ;
}

.burger-menu active > p{
	color: #FF8C42;
}
.page-title{
    color: var(--text-color);
    text-align: center;
    margin-top: 0;
	background-color: #F5F5F5;
}
.page-title h2{
    margin: 0;
	padding: 20px 0;
}

/* Стили для мобильного меню */

@media (max-width: 768px) {
	
.container {
    padding: 0 0;	
	flex-direction: column;
}

.header-content{
}

.header-left{
	font-size: 1.3em;
	margin-top: 15px;
}

.header-right{
	font-size: 0.7em;
	flex-direction: row;
}

.logo{
	margin: 0;
}

.header-content > a > img{
	object-fit: cover;
	height: 75px;
}

.menu-container {
    position: relative;
    padding: 10px 0;
    background-color: var(--menu-background-color); /* Цвет фона меню */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Легкая граница */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Тень для выделения */
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav {
    display: none;
    flex-direction: column;
    gap: 10px;
    background-color: var(--menu-background-color);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

nav.active {
    display: flex;
    transform: translateX(0);
	border-top: 5px solid #E67332;
}

nav a {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Разделители между пунктами меню */
    color: var(--menu-text-color);
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

 nav a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Подсветка при наведении */
}

.burger-menu {
    display: flex;
}

.burger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger-menu.active span:nth-child(2) {
    opacity: 0;
}

.burger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}
}

/* Секция "Рекомендуемые товары" */

.featured-products {
    padding: 20px 20px;
    background-color: #F5F5F5;
}

.featured-products h2 {
    font-size: 1.5em;
    color: var(--text-color);
    text-align: center;
	margin-top: 0;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.product-card {
	
	
	
    background-color: var(--background-color);
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    padding: 20px;
    width: calc(33.333% - 40px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    box-sizing: border-box;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.product-card img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
        }

.product-card h3 {
    font-size: 1.2em;
    color: var(--text-color);
    margin: 0;
}
.price{
	font-size: 1.2em;
    color: var(--primary-color);
    font-weight: bold;
    margin: 10px 0;
}

/* Кнопка "Подробнее" */

.product-card .btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: var(--accent-color);
    color: var(--background-color);
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.product-card .btn:hover {
    background-color: var(--accent-hover-color);
}

/* Подвал */


 footer {
    background: linear-gradient(135deg, var(--footer-background-color), #2F3A5F); /* Градиентный фон */
    color: var(--footer-text-color);
    text-align: center;
    padding: 20px 20px;
    border-top: 4px solid var(--accent-color); /* Оранжевая полоса сверху */
	 margin-top: auto;
}

footer h3 {
    font-size: 1.5em;
    margin-bottom: 20px;
    color: var(--accent-color); /* Оранжевый цвет для заголовка */
}

footer p {
    margin: 10px 0;
    color: var(--footer-text-color);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    color: var(--footer-text-color);
    font-size: 1.5em;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--accent-color); /* Оранжевый цвет при наведении */
}

/* Адаптивность */

@media (max-width: 768px) {
.product-card {
    width: calc(50% - 20px);
}

.featured-products h3 {
    font-size: 1.2em;
}
}

@media (max-width: 480px) {
.product-card {
    width: 100%;
}


.logo {
    width: 120px;
    height: 120px;
}

nav a {
    font-size: 1em;
}
}

     /* Заголовок страницы */
        h1 {
			font-size: 0.9em;
    color: var(--text-color);
    text-align: center;
	margin: 0;
	
	
	
	
}

        /* Карточка товара */
        .product-detail {
            display: flex;
            gap: 20px;
            align-items: flex-start;
			background-color: #F5F5F5;
        }

        .product-images {
            flex: 1;
        }

        .main-image {
            max-width: 100%;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .main-image:hover {
            transform: scale(1.02);
        }

        .thumbnails {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .thumbnail {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: border-color 0.3s ease;
        }

        .thumbnail:hover {
            border-color: #007BFF;
        }

        .thumbnail.active {
            border-color: #007BFF;
        }

        /* Модальное окно для увеличенного изображения */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            justify-content: center;
            align-items: center;
        }

        .modal img {
            max-width: 90%;
            max-height: 90%;
            border-radius: 8px;
        }

        .close-modal {
            position: absolute;
            top: 20px;
            right: 20px;
            color: white;
            font-size: 2em;
            cursor: pointer;
        }

        /* Блок цены */
        .price-block {
            flex: 1;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 5px;
            background-color: #fff;
            box-sizing: border-box;
        }

        .price-header {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .price-value {
            font-size: 1.5em;
            font-weight: bold;
        }

        .price-unit {
            font-size: 1em;
            color: #777;
            margin-left: 5px;
        }

        .cubic-meter-price {
            color: #007BFF;
        }

        .square-meter-price {
            color: #333;
        }

        .approximate {
            font-size: 0.8em;
            color: #555;
            margin-left: 5px;
        }

        .price-calculator {
            margin-top: 15px;
        }

        .price-calculator label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .price-calculator input[type="number"],
        .price-calculator select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 1em;
        }

        .total-price {
            margin-top: 15px;
            font-size: 1.2em;
            font-weight: bold;
        }

        .error-message {
            color: red;
            font-size: 0.9em;
            margin-top: 5px;
        }

        .explanation {
            font-size: 0.9em;
            color: #555;
            margin-top: 5px;
        }

        /* Предупреждение */
        .warning {
            padding: 15px;
            background-color: #fff3cd;
            border: 1px solid #ffeeba;
            border-radius: 5px;
            color: #856404;
			border-bottom: 25px solid #F5F5F5;
        }

        .warning h3 {
            font-size: 1.2em;
        }

        .warning p {
            margin: 0;
        }

        /* SEO-описание */
        .seo-description {
            padding: 20px;
            background-color: #F5F5F5;
            border-radius: 8px;
        }

        .seo-description h3 {
            font-size: 1.5em;
            color: #333333;
            margin-bottom: 10px;
        }

        .seo-description p {
            font-size: 1em;
            color: #555555;
            line-height: 1.6;
        }

        /* Подвал */
        footer {
            background-color: #333333;
            color: #FFFFFF;
            text-align: center;
            padding: 20px 20px;
        }

        footer h3 {
            font-size: 1.5em;
            margin-bottom: 20px;
        }

        footer p {
            margin: 10px 0;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        .social-links a {
            color: #FFFFFF;
            font-size: 1.5em;
            transition: color 0.3s ease;
        }

        .social-links a:hover {
            color: #007BFF;
        }

        /* Адаптивность */
        @media (max-width: 768px) {
            .product-detail {
                flex-direction: column;
				padding: 0 10px;
            }

            .product-images img {
                max-width: 100%;
            }

            .price-block {
                width: 100%;
            }
        }
		
		/* Секция "Контакты" */
 
.contact-info {
    background-color: #F5F5F5;
    padding: 40px 20px;
    border-radius: 8px;
}

.contact-info h2 {
    font-size: 2em;
    color: var(--text-color);
    margin-bottom: 20px;
}

.contact-info p {
    font-size: 1.1em;
    color: var(--text-color);
    line-height: 1.8;
}

/* Секция "Вопросы и предложения" */

.questions-section {
    background-color: var(--background-color);
    padding: 40px 20px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
 }

.questions-section h2 {
    font-size: 2em;
    color: var(--text-color);
    margin-bottom: 20px;
}

.questions-section p {
    font-size: 1.1em;
    color: var(--text-color);
    line-height: 1.8;
}

.questions-section a {
     color: var(--primary-color);
     font-weight: bold;
}

.questions-section a:hover {
    color: var(--primary-hover-color);
}
/* Секция "Доставка" */
 
.delivery-info {
    background-color: #F5F5F5;
    padding: 78px 20px;
    border-radius: 8px;
}
.delivery-info h2 {
    font-size: 2em;
    color: var(--text-color);
    margin-bottom: 20px;
}

.delivery-info p {
    font-size: 1.1em;
    color: var(--text-color);
    line-height: 1.8;
}

.delivery-info ul {
    list-style-type: disc;
    margin-left: 20px;
}

.delivery-info ul li {
    margin-bottom: 10px;
}
/* Секция "Контакты" */
 
.contact-info {
    background-color: #F5F5F5;
    padding: 85px 20px;
    border-radius: 8px;
}

.contact-info h2 {
    font-size: 2em;
    color: var(--text-color);
    margin-bottom: 20px;
}

.contact-info p {
    font-size: 1.1em;
    color: var(--text-color);
    line-height: 1.8;
}

/* Секция "Вопросы и предложения" */

.questions-section {
    background-color: var(--background-color);
    padding: 0px 20px;
    border-radius: 8px;
    text-align: center;
	background-color: #F5F5F5;
	
 }

.questions-section h2 {
    font-size: 2em;
    color: var(--text-color);
    margin-bottom: 20px;
}

.questions-section p {
    font-size: 1.1em;
    color: var(--text-color);
    line-height: 1.8;
	margin-block-start: 0em;
	margin-block-end: 0em;
}
#mail{
	color: #0000ff;
}
.questions-section a {
     color: var(--primary-color);
     font-weight: bold;
}

.questions-section a:hover {
    color: var(--primary-hover-color);
}



 /* Карта */
 
.map-container {
}

.map-container iframe {
    width: 100%;
    height: 400px;
    border: none;
    border-radius: 8px;
 }