/* be1ab8edbd */
/* Общий контейнер */

#contacts-header-banner {

    position: relative;

    width: 100%;

    height: 50vh; /* Уменьшенная высота */

    min-height: 300px; /* Минимальная высота */

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    margin: 0 !important;

    padding: 0 !important;

    z-index: 10;

    box-sizing: border-box;

}



/* Параллакс-фон с новой фотографией */

.parallax-background {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('https://ritual-uslugi31.ru/wp-content/uploads/2025/07/valleyi0b.jpg');

    background-size: cover;

    background-position: center;

    /* УДАЛЕНО: background-attachment: fixed - причина проблемы */

    z-index: 1;

}



/* Легкий градиентный оверлей */

.gradient-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to bottom, rgba(25, 42, 61, 0.6), rgba(25, 42, 61, 0.8));

    z-index: 2;

}



/* Контейнер для эффектов */

.floating-lights-container {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    overflow: hidden;

    z-index: 3;

}



/* Звезды */

.floating-star {

    position: absolute;

    background-color: rgba(255, 255, 255, 0.7);

    border-radius: 50%;

    opacity: 0;

    transform: scale(1);

}



/* Анимация мерцания звезд */

@keyframes twinkle {

    0%, 100% { 

        opacity: 0.2; 

        transform: scale(1); 

    }

    50% { 

        opacity: 0.8; 

        transform: scale(1.05); 

    }

}



/* Контент */

.content-wrapper {

    position: relative;

    z-index: 4;

    text-align: center;

    padding: 20px;

    max-width: 900px;

    width: 90%;

}



.text-content {

    opacity: 0;

    animation: textAppear 1.5s ease forwards;

    animation-delay: 0.3s;

}



.title {

    font-size: 2.8rem;

    font-weight: 700;

    color: #efcc4a;

    text-shadow: 0 2px 8px rgba(0,0,0,0.4);

    margin-bottom: 15px;

    line-height: 1.2;

}



.subtitle {

    font-size: 1.4rem;

    color: #fff;

    text-shadow: 0 1px 4px rgba(0,0,0,0.3);

    line-height: 1.5;

    opacity: 0.9;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}



/* Анимация появления текста */

@keyframes textAppear {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



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

@media (max-width: 1200px) {

    .title {

        font-size: 2.4rem;

    }

    .subtitle {

        font-size: 1.2rem;

    }

}



@media (max-width: 992px) {

    #contacts-header-banner {

        height: 40vh;

    }

    .title { 

        font-size: 2rem;

    }

    .subtitle { 

        font-size: 1.1rem;

    }

}



@media (max-width: 768px) {

    .title { 

        font-size: 1.8rem;

    }

    .subtitle { 

        font-size: 1rem;

    }

}



@media (max-width: 576px) {

    #contacts-header-banner {

        height: 35vh;

        min-height: 250px;

    }

    .title { 

        font-size: 1.6rem;

    }

    .subtitle { 

        font-size: 0.9rem;

    }

}



/* УДАЛЕНО: Ненужный медиа-запрос для отключения параллакса *//* d4bf3c3a9e */
/* Основные */

        .contact-section {

            background: #f8f9fa;

            padding: 80px 0;

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            color: #333;

        }

        .contact-section .container {

            max-width: 1200px;

            margin: 0 auto;

            padding: 0 20px;

        }

        .contact-section .section-header {

            text-align: center;

            max-width: 800px;

            margin: 0 auto 50px;

        }

        .contact-section .section-header h2 {

            color: #192a3d;

            font-size: 36px;

            margin-bottom: 15px;

            position: relative;

            display: inline-block;

        }

        .contact-section .section-header h2:after {

            content: '';

            position: absolute;

            bottom: -10px;

            left: 50%;

            transform: translateX(-50%);

            width: 100px;

            height: 3px;

            background: #efcc4a;

        }

        .contact-section .section-header p {

            color: #555;

            font-size: 20px;

            line-height: 1.6;

        }

        /* Экстренный контакт */

        .contact-section .contact-highlight {

            background: linear-gradient(135deg, #192a3d, #2c3e50);

            border-radius: 15px;

            padding: 40px;

            margin-bottom: 50px;

            box-shadow: 0 10px 30px rgba(0,0,0,0.15);

        }

        .contact-section .emergency-contact {

            display: flex;

            align-items: center;

            max-width: 1000px;

            margin: 0 auto;

        }

        .contact-section .emergency-icon {

            font-size: 3.5rem;

            margin-right: 30px;

            color: #efcc4a;

            flex-shrink: 0;

        }

        .contact-section .emergency-content {

            flex-grow: 1;

        }

        .contact-section .emergency-content h3 {

            font-size: 1.8rem;

            color: #fff;

            margin-bottom: 10px;

        }

        .contact-section .emergency-content p {

            font-size: 1.1rem;

            color: #e0e0e0;

            margin-bottom: 20px;

        }

        .contact-section .emergency-phones {

            display: flex;

            flex-wrap: wrap;

            gap: 15px;

        }

        .contact-section .emergency-phone {

            display: inline-block;

            font-size: 1.4rem;

            font-weight: 700;

            color: #192a3d !important;

            background: #efcc4a;

            padding: 12px 25px;

            border-radius: 50px;

            text-decoration: none;

            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

            position: relative;

            overflow: hidden;

            box-shadow: 

                0 5px 15px rgba(239, 204, 74, 0.4),

                0 0 0 0 rgba(239, 204, 74, 0.7);

            animation: pulse 2s infinite;

            z-index: 1;

            text-align: center;

            flex-grow: 1;

        }

        .contact-section .emergency-phone:hover {

            transform: translateY(-3px);

            box-shadow: 0 10px 20px rgba(0,0,0,0.2);

        }

        @keyframes pulse {

            0% {

                box-shadow: 

                    0 5px 15px rgba(239, 204, 74, 0.4),

                    0 0 0 0 rgba(239, 204, 74, 0.7);

            }

            70% {

                box-shadow: 

                    0 5px 15px rgba(239, 204, 74, 0.4),

                    0 0 0 12px rgba(239, 204, 74, 0);

            }

            100% {

                box-shadow: 

                    0 5px 15px rgba(239, 204, 74, 0.4),

                    0 0 0 0 rgba(239, 204, 74, 0);

            }

        }

        /* Контактные карточки */

        .contact-section .contact-cards {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

            gap: 30px;

            margin-bottom: 50px;

        }

        .contact-section .contact-card {

            background: #fff;

            border-radius: 15px;

            overflow: hidden;

            box-shadow: 0 8px 25px rgba(0,0,0,0.08);

            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

            display: flex;

            flex-direction: column;

            height: 100%;

            border: 1px solid #eee;

        }

        .contact-section .contact-card:hover {

            transform: translateY(-10px);

            box-shadow: 0 15px 35px rgba(0,0,0,0.15);

        }

        .contact-section .card-header {

            display: flex;

            align-items: center;

            padding: 25px;

            background: #f8f8f8;

            border-bottom: 1px solid #eee;

        }

        .contact-section .card-icon {

            font-size: 2.5rem;

            margin-right: 20px;

            color: #192a3d;

        }

        .contact-section .card-header h3 {

            font-size: 1.4rem;

            color: #192a3d;

            margin: 0;

        }

        .contact-section .card-body {

            padding: 25px;

            flex-grow: 1;

        }

        .contact-section .card-body p {

            margin-bottom: 15px;

            font-size: 1.1rem;

            line-height: 1.6;

        }

        .contact-section .card-body a {

            color: #192a3d;

            text-decoration: none;

            transition: color 0.3s;

            position: relative;

        }

        .contact-section .card-body a:after {

            content: '';

            position: absolute;

            bottom: -2px;

            left: 0;

            width: 0;

            height: 1px;

            background: #efcc4a;

            transition: width 0.4s ease;

        }

        .contact-section .card-body a:hover {

            color: #efcc4a;

        }

        .contact-section .card-body a:hover:after {

            width: 100%;

        }

        .contact-section .card-map {

            height: 250px;

            border-top: 1px solid #eee;

        }

        .contact-section .card-map iframe {

            width: 100%;

            height: 100%;

            border: none;

        }

        /* Блок социальных сетей */

        .contact-section .social-section {

            background: #fff;

            border-radius: 15px;

            padding: 40px;

            box-shadow: 0 8px 25px rgba(0,0,0,0.08);

            text-align: center;

        }

        .contact-section .social-section h3 {

            font-size: 1.8rem;

            color: #192a3d;

            margin-bottom: 15px;

        }

        .contact-section .social-section p {

            font-size: 1.1rem;

            color: #666;

            max-width: 600px;

            margin: 0 auto 30px;

            line-height: 1.6;

        }

        .contact-section .social-links {

            display: flex;

            justify-content: center;

            gap: 20px;

            flex-wrap: wrap;

        }

        .contact-section .social-link {

            display: flex;

            align-items: center;

            width: 200px;

            padding: 20px;

            background: #f8f8f8;

            border-radius: 12px;

            text-decoration: none;

            transition: all 0.3s ease;

            box-shadow: 0 3px 10px rgba(0,0,0,0.08);

            border: 1px solid #eee;

        }

        .contact-section .social-link:hover {

            transform: translateY(-5px);

            box-shadow: 0 5px 15px rgba(0,0,0,0.1);

        }

        

        /* ИКОНКИ СОЦСЕТЕЙ */

        .contact-section .social-icon {

            display: flex;

            align-items: center;

            justify-content: center;

            width: 60px;

            height: 60px;

            margin-right: 15px;

            transition: all 0.3s;

            border-radius: 12px;

        }

        

        /* Текстовый логотип VK */

        .contact-section .vk-link .social-icon {

            background: #45619d;

            color: white;

            font-weight: bold;

        }

        .contact-section .text-logo {

            font-size: 1.8rem;

            font-weight: 800;

            line-height: 1;

        }

        

        /* SVG иконка WhatsApp */

        .contact-section .whatsapp-link .social-icon {

            background: #25D366;

            padding: 10px;

        }

        .contact-section .whatsapp-link .social-icon svg {

            width: 100%;

            height: 100%;

        }

        

        /* Текст */

        .contact-section .social-name {

            font-size: 1.2rem;

            font-weight: 600;

            color: #192a3d;

            transition: color 0.3s;

        }

        

        /* Стили при наведении */

        .contact-section .vk-link:hover {

            background: #f0f6ff;

        }

        .contact-section .vk-link:hover .social-name {

            color: #45619d;

        }

        

        .contact-section .whatsapp-link:hover {

            background: #f0fff4;

        }

        .contact-section .whatsapp-link:hover .social-name {

            color: #25D366;

        }



        /* Эффекты блеска */

        .shimmer-badge {

            position: relative;

            overflow: hidden;

        }

        .shimmer-badge::after {

            content: '';

            position: absolute;

            top: -50%;

            left: -50%;

            width: 200%;

            height: 200%;

            background: linear-gradient(

                135deg,

                transparent 25%,

                rgba(255, 255, 255, 0.2) 50%,

                transparent 75%

            );

            opacity: 0.7;

            animation: diagonal-shimmer 4s ease-in-out infinite;

            transform: rotate(45deg);

        }

        @keyframes diagonal-shimmer {

            0% {

                transform: translate(-100%, -100%) rotate(45deg);

            }

            100% {

                transform: translate(100%, 100%) rotate(45deg);

            }

        }

        /* Адаптивность - УВЕЛИЧЕННЫЕ РАЗМЕРЫ ДЛЯ МОБИЛЬНЫХ */

        @media (max-width: 992px) {

            .contact-section .contact-cards {

                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            }

            .contact-section .emergency-contact {

                flex-direction: column;

                text-align: center;

            }

            .contact-section .emergency-icon {

                margin-right: 0;

                margin-bottom: 20px;

            }

            .contact-section .emergency-phone {

                font-size: 1.3rem;

            }

        }

        @media (max-width: 768px) {

            .contact-section {

                padding: 50px 0;

            }

            .contact-section .contact-highlight {

                padding: 20px 15px;

                border-radius: 12px;

            }

            .contact-section .emergency-content h3 {

                font-size: 1.5rem;

            }

            .contact-section .emergency-content p {

                font-size: 1rem;

            }

            .contact-section .emergency-phones {

                flex-direction: column;

            }

            .contact-section .contact-cards {

                grid-template-columns: 1fr;

                gap: 20px;

            }

            .contact-section .card-header {

                padding: 20px;

            }

            .contact-section .social-section {

                padding: 30px 20px;

            }

            .contact-section .social-link {

                width: 100%;

                max-width: 300px;

            }

        }

        @media (max-width: 480px) {

            .contact-section .section-header h2 {

                font-size: 28px;

            }

            .contact-section .emergency-phone {

                font-size: 1.2rem;

                padding: 10px 20px;

            }

            .contact-section .card-map {

                height: 200px;

            }

            .contact-section .social-link {

                flex-direction: column;

                text-align: center;

            }

            .contact-section .social-icon {

                margin-right: 0;

                margin-bottom: 15px;

                width: 80px;

                height: 80px;

            }

            .contact-section .text-logo {

                font-size: 2.5rem; /* Больше на мобильных */

            }

            .contact-section .social-name {

                font-size: 1.4rem; /* Больше на мобильных */

                font-weight: 700;

            }

            

            /* Увеличение SVG иконки */

            .contact-section .whatsapp-link .social-icon svg {

                min-width: 50px;

                min-height: 50px;

            }

        }