@import url("galery.css");
/* Базовые сбросы стилей */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #333;
    line-height: 1.5;
    background-color: #f9f9f9;
}

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

.section-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 800;
    margin: 40px 0 25px;
    letter-spacing: 1px;
}










/* Хэдер */



/* .header { */
    /* background: #fff; */
    /* padding: 15px 0; */
    /* border-bottom: 1px solid #eee; */
    /* position: sticky; */
    /* top: 0; */
    /* z-index: 100; */
/* } */

/* .header__container { */
    /* display: flex; */
    /* justify-content: space-between; */
    /* align-items: center; */
/* } */

/* .logo { */
    /* display: flex; */
    /* flex-direction: column; */
/* } */

/* .logo__title { */
    /* font-weight: 800; */
    /* font-size: 1.4rem; */
    /* color: #111; */
/* } */

/* .logo__subtitle { */
    /* font-size: 0.65rem; */
    /* color: #777; */
    /* letter-spacing: 2px; */
/* } */

/* .header__contacts { */
    /* display: flex; */
    /* align-items: center; */
    /* gap: 20px; */
/* } */

/* .phone-icon { */
    /* font-size: 1.3rem; */
    /* text-decoration: none; */
    /* color: #333; */
/* } */

/* .burger-menu { */
    /* background: none; */
    /* border: none; */
    /* display: flex; */
    /* flex-direction: column; */
    /* gap: 5px; */
    /* cursor: pointer; */
/* } */

/* .burger-menu span { */
    /* width: 25px; */
    /* height: 3px; */
    /* background-color: #333; */
/* } */



















/* Шапка сайта */
.header {
    background: #fff;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 100;
}

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

/* Ограничиваем размер логотипа, чтобы он аккуратно встал */
.logo__img {
    height: 40px; /* Высоту можно подкрутить под ваш макет */
    width: auto;
    display: block;
}

.header__right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header__phone {
    font-weight: 700;
    font-size: 1.1rem;
    color: #111;
    text-decoration: none;
    transition: color 0.2s;
}

.header__phone:hover {
    color: #ff6b00;
}

/* Стили для маленьких круглых иконок-заглушек */
.header__socials {
    display: flex;
    gap: 8px;
}

.icons-over:hover {
    fill: #ff6b00;
}

.social-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    transition: transform 0.2s;
}

.social-icon:hover, .footer__icon:hover {
    transform: translateY(-2px);
}

/* Цвета брендов (в будущем можно заменить на SVG-иконки) */
.tg { background-color: #0088cc; }
.vb { background-color: #7360f2; }
.tt { background-color: #010101; }
.inst { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
























/* Главный экран
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('../img/main.jpg') center/cover no-repeat;
    color: #fff;
    padding: 60px 0;
    text-align: left;
}

.hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.hero__lead {
    font-size: 1.1rem;
    margin-bottom: 25px;
    max-width: 600px;
}

.hero__features {
    list-style: none;
}

.hero__features li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.hero__features span {
    color: #ff6b00;
}

 */







/* Главный экран с градиентом слева направо */
.hero {
    /* Градиент идет направо (to right) от белого к прозрачному */
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 255, 255, 0.9) 40%, 
        rgba(255, 255, 255, 0) 100%), 
        url('../img/main.jpg') center/cover no-repeat;
    color: #111; /* Делаем текст темным для читаемости на белом фоне */
    padding: 60px 0;
    text-align: left;
}

/* Ограничиваем контент по ширине, чтобы он не заходил на прозрачную (темную) часть картинки */
.hero__content {
    max-width: 550px; 
}

.hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: #000; /* И заголовок делаем чисто черным */
}

.hero__lead {
    font-size: 1.1rem;
    margin-bottom: 25px;
    color: #333; /* Цвет для подзаголовка */
}

.hero__features {
    list-style: none;
}

.hero__features li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #222; /* Цвет пунктов списка */
}

/* Оставляем галочки оранжевыми для акцента, как на макете */
.hero__features span {
    color: #ff6b00;
}

/* На больших экранах делаем отступы больше и текст крупнее */
@media (min-width: 768px) {
    .hero { 
        padding: 100px 0; 
    }
    .hero h1 { 
        font-size: 3.5rem; 
    }
    .hero__content {
        max-width: 650px; /* На десктопе можно дать чуть больше места */
    }
}



/*оформление трубки*/
.phone-link-mob{display:none;}
/* На мобильном экране */
@media (max-width: 768px) {
    .phone-link-mob { 
        display:block; 
    }
	.header__phone{display:none;}
}



@media (max-width: 768px) {
    .logo__img {height:30px;}

}






















/* Преимущества */
.advantages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1max));
    gap: 20px;
    padding: 40px 20px;
    background: #fff;
    margin-top: -20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.adv-item {
    text-align: center;
}

.adv-item__icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.adv-item h3 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.adv-item p {
    font-size: 0.85rem;
    color: #666;
}










/* Баннер Аренда */
/* .rent-banner { */
    /* background: #004d40; */
    /* color: #fff; */
    /* padding: 30px; */
    /* border-radius: 8px; */
    /* margin-top: 40px; */
/* } */

/* .rent-banner h2 { */
    /* font-size: 1.4rem; */
    /* text-align: center; */
    /* margin-bottom: 25px; */
/* } */

/* .rent-grid { */
    /* display: grid; */
    /* grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); */
    /* gap: 20px; */
/* } */

/* .rent-card { */
    /* background: rgba(255,255,255,0.1); */
    /* padding: 15px; */
    /* border-radius: 4px; */
/* } */

/* .rent-card span { */
    /* font-weight: 700; */
    /* display: block; */
    /* margin-bottom: 5px; */
/* } */

/* .rent-card p { */
    /* font-size: 0.85rem; */
    /* opacity: 0.9; */
/* } */


/* Баннер Аренда с эффектом прозрачности */
/* Внешняя секция аренды задает только вертикальные отступы */
.rent-banner {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Сама плашка баннера с закруглением, градиентом и фоном */
.rent-banner__wrapper {
    background-image: 
        linear-gradient(to right, 
            rgba(0, 77, 64, 1) 0%, 
            rgba(0, 77, 64, 0.95) 55%, 
            rgba(0, 77, 64, 0) 100%), 
        url('../img/rent.jpg');
    
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    
    color: #fff;
    padding: 40px 20px;
    border-radius: 8px; /* Красивые скругленные углы баннера */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* На мобильных экранах контент занимает всю ширину баннера */
.rent-banner__content {
    width: 100%;
}

.rent-banner h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 25px;
    text-align: left;
    line-height: 1.3;
}

/* Сетка для пунктов */
.rent-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

/* Стили карточек преимуществ */
.rent-card {
    background: rgba(255, 255, 255, 0.06);
    padding: 15px;
    border-left: 4px solid #ff6b00;
    border-radius: 0 6px 6px 0;
    transition: background 0.3s;
}

.rent-card:hover {
    background: rgba(255, 255, 255, 0.12);
}

.rent-card__title {
    font-weight: 700;
    font-size: 1.05rem;
    display: block;
    margin-bottom: 5px;
}

.rent-card p {
    font-size: 0.85rem;
    opacity: 0.85;
    line-height: 1.4;
}

/* Адаптивность для больших экранов */
@media (min-width: 992px) {
    .rent-banner__wrapper {
        padding: 60px 40px; /* Больше внутренних отступов на десктопе */
    }

    /* Контент занимает ровно 2/3 ширины плашки */
    .rent-banner__content {
        max-width: 65%; 
    }

    /* Карточки выстраиваются в сетку 2х2 */
    .rent-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}





.navintah{
	background-image:       url('../img/sigma.jpg');    
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}





















/* Системы опалубки */
.systems__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.system-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.placeholder-img {
    background: #ddd;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-weight: bold;
    background-size: cover;
    background-position: center;
}

.system-card__content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.system-card h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.system-card__desc {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 15px;
}

.system-card__list {
    list-style: none;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.system-card__list li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
}

.system-card__list li::before {
    content: "•";
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

.orange-bullet li::before { color: #ff6b00; }
.blue-bullet li::before { color: #004d40; }

.btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    margin-top: auto;
    transition: background 0.3s;
}

.btn--orange { background: #ff6b00; color: #fff; }
.btn--orange:hover { background: #e05e00; }
.btn--dark { background: #111; color: #fff; }
.btn--dark:hover { background: #333; }

/* Варианты применения */
.usage__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.usage-item {
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    text-align: center;
}

.usage-item .placeholder-img {
    height: 140px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.usage-item h4 {
    margin-bottom: 5px;
    font-size: 1rem;
}

.usage-item p {
    font-size: 0.8rem;
    color: #666;
}

/* Реализованные объекты */
.gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

.gallery__item {
    height: 200px;
    border-radius: 6px;
}

/* Футер */





/* .footer { */
    /* background: #111; */
    /* color: #fff; */
    /* padding: 30px 0; */
    /* margin-top: 50px; */
/* } */

/* .footer__container { */
    /* display: flex; */
    /* justify-content: space-between; */
    /* align-items: center; */
    /* gap: 20px; */
/* } */

/* .footer__text h3 { */
    /* font-size: 1.2rem; */
    /* margin-bottom: 5px; */
/* } */

/* .footer__text p { */
    /* font-size: 0.85rem; */
    /* opacity: 0.8; */
/* } */

/* .footer__btn { */
    /* background: #fff; */
    /* border: none; */
    /* width: 50px; */
    /* height: 50px; */
    /* border-radius: 50%; */
    /* font-size: 1.5rem; */
    /* cursor: pointer; */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
/* } */












/* Подвал / Футер */
.footer {
    background: #111;
    color: #fff;
    padding: 40px 0 0 0; /* Снизу 0, так как там будет полоса копирайта */
    margin-top: 50px;
}

.footer__container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-bottom: 30px;
}

.footer__info h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: #fff;
}

.footer__info p {
    font-size: 0.9rem;
    opacity: 0.8;
    max-width: 600px;
}

.footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer__link {
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.2s;
}

.footer__phone {
    font-weight: 700;
}

.footer__link:hover {
    color: #ff6b00;
}

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

.footer__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Нижняя полоска с копирайтом */
.footer__bottom {
    background-color: #0a0a0a;
    padding: 15px 0;
    margin-top: 20px;
    border-top: 1px solid #222;
    text-align: center;
    font-size: 0.85rem;
    color: #777;
}

/* Адаптивность для десктопов */
@media (min-width: 768px) {
    .footer__container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    .footer__contacts {
        align-items: flex-end;
        text-align: right;
    }
}




























/* Модальное окно */
.modal {
    position: fixed;
    top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
    z-index: 1000;
}

.modal.active {
    opacity: 1;
    pointer-events: auto;
}

.modal__content {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    position: relative;
}

.modal__close {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 1.5rem; background: none; border: none; cursor: pointer;
}

.modal__form {
    display: flex; flex-direction: column; gap: 15px; margin-top: 20px;
}

.modal__form input {
    padding: 10px; border: 1px solid #ccc; border-radius: 4px;
}

/* Адаптивность для больших экранов */
@media (min-width: 768px) {
    .hero { padding: 100px 0; }
    .hero h1 { font-size: 3.5rem; }
    .advantages { grid-template-columns: repeat(5, 1fr); }
}