/* 1a734abc61 */
/* === ОБЩИЕ СТИЛИ === */

#coffins-header-banner {

    position: relative;

    width: 100%;

    height: 30vh;

    min-height: 250px;

    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/08/IMG_20250808_133701-1-scaled.jpg');

    background-size: cover;

    background-position: center;

    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); }

}



/* === СТИЛИ ОСНОВНОГО БЛОКА === */

.coffins-categories-section {

    padding: 80px 0;

    background: #ffffff;

    position: relative;

    overflow: hidden;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



.section-header {

    text-align: center;

    margin-bottom: 60px;

}



.section-title {

    font-size: 2.5rem;

    color: #192a3d;

    font-weight: 700;

    margin-bottom: 15px;

    position: relative;

    display: inline-block;

}



.section-title::after {

    content: "";

    position: absolute;

    bottom: -10px;

    left: 50%;

    transform: translateX(-50%);

    width: 100px;

    height: 4px;

    background: #efcc4a;

    border-radius: 2px;

}



.section-subtitle {

    font-size: 1.25rem;

    color: #4a5568;

    max-width: 800px;

    margin: 30px auto 0;

    line-height: 1.6;

}



/* СЕТКА КАТЕГОРИЙ */

.categories-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}



.category-card {

    background: white;

    border-radius: 16px;

    padding: 40px 30px;

    box-shadow: 0 10px 30px rgba(25, 42, 61, 0.08);

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

    position: relative;

    overflow: hidden;

    z-index: 1;

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.6s ease, transform 0.6s ease;

}



.card-decoration {

    position: absolute;

    top: -20px;

    right: -20px;

    z-index: -1;

}



.decoration-circle {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: #fce772;

    opacity: 0.15;

    position: absolute;

    transition: all 0.8s ease;

    transform: scale(0);

    opacity: 0;

}



.decoration-circle:first-child {

    top: 10px;

    right: 10px;

    width: 80px;

    height: 80px;

    background: #efcc4a;

    opacity: 0.1;

    transition-delay: 0.2s;

}



.card-icon {

    width: 70px;

    height: 70px;

    background: rgba(239, 204, 74, 0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    transition: all 0.4s ease;

}



.card-icon svg {

    width: 40px;

    height: 40px;

}



.card-content h3 {

    font-size: 1.6rem;

    color: #192a3d;

    margin-bottom: 15px;

    font-weight: 700;

    transition: color 0.3s ease;

}



.card-content p {

    font-size: 1.1rem;

    color: #4a5568;

    line-height: 1.6;

    margin: 0;

}



.category-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 40px rgba(25, 42, 61, 0.15);

}



.category-card:hover .card-icon {

    background: #efcc4a;

    transform: scale(1.1);

}



.category-card:hover .card-icon svg {

    fill: #192a3d;

}



.category-card:hover h3 {

    color: #efcc4a;

}



/* === ИСПРАВЛЕННЫЕ СТИЛИ СЛАЙДЕРА === */

.coffins-slider-section {

    padding: 80px 0;

    background: #f8f9fa;

    position: relative;

}



.coffins-slider-container {

    position: relative;

    max-width: 700px;

    height: 500px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 12px;

    touch-action: pan-y;

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

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.8s ease, transform 0.8s ease;

}



.coffins-slides-wrapper {

    width: 100%;

    height: 100%;

    position: relative;

    overflow: hidden;

}



.coffins-slides {

    display: grid;

    grid-auto-flow: column;

    grid-auto-columns: 100%;

    height: 100%;

    transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);

    will-change: transform;

    transform: translateX(0);

}



.coffins-slide {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    background: #f8f9fa;

    overflow: hidden;

}



.coffins-slide-content {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    padding: 20px;

    box-sizing: border-box;

}



.coffins-slide img {

    max-width: 100%;

    max-height: 100%;

    width: auto;

    height: auto;

    object-fit: contain;

    display: block;

    margin: 0 auto;

}



.coffins-slider-prev, 

.coffins-slider-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background-color: rgba(25, 42, 61, 0.7);

    color: white;

    border: none;

    cursor: pointer;

    padding: 15px;

    border-radius: 50%;

    z-index: 10;

    font-size: 20px;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 50px;

    height: 50px;

}



.coffins-slider-prev:hover, 

.coffins-slider-next:hover {

    background-color: rgba(239, 204, 74, 0.9);

    color: #192a3d;

}



.coffins-slider-prev {

    left: 15px;

}



.coffins-slider-next {

    right: 15px;

}



.coffins-slider-dots {

    position: absolute;

    bottom: 20px;

    width: 100%;

    display: flex;

    justify-content: center;

    z-index: 10;

}



.coffins-dot {

    cursor: pointer;

    height: 12px;

    width: 12px;

    margin: 0 6px;

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

    border-radius: 50%;

    display: inline-block;

    transition: background-color 0.3s ease;

}



.coffins-dot.active, 

.coffins-dot:hover {

    background-color: #efcc4a;

}



/* БЛОК ПРЕИМУЩЕСТВ */

.coffins-benefits-section {

    padding: 80px 0;

    background: #ffffff;

    position: relative;

}



.benefits-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

}



.benefit {

    background: white;

    border-radius: 16px;

    padding: 40px 25px;

    text-align: center;

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

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

    border: 2px solid transparent;

    position: relative;

    overflow: hidden;

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.6s ease, transform 0.6s ease;

}



.benefit::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: #192a3d;

    transform: translateY(-100%);

    transition: transform 0.4s ease;

}



.benefit:hover {

    transform: translateY(-10px);

    border-color: #efcc4a;

}



.benefit:hover::before {

    transform: translateY(0);

}



.benefit-number {

    width: 60px;

    height: 60px;

    background: #192a3d;

    color: #efcc4a;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    font-size: 1.8rem;

    margin: 0 auto 25px;

    transition: all 0.4s ease;

    position: relative;

    z-index: 2;

}



.benefit:hover .benefit-number {

    background: #efcc4a;

    color: #192a3d;

    transform: scale(1.1);

}



.benefit h3 {

    font-size: 1.4rem;

    color: #192a3d;

    margin-bottom: 15px;

    font-weight: 700;

    transition: color 0.3s ease;

}



.benefit:hover h3 {

    color: #efcc4a;

}



.benefit p {

    font-size: 1.05rem;

    color: #4a5568;

    line-height: 1.6;

    margin: 0;

}



/* БЛОК КОНСУЛЬТАЦИИ */

.consultation-section {

    padding: 80px 0;

    background: #192a3d;

    text-align: center;

    position: relative;

    margin: 0;

}



.cta-content {

    position: relative;

    z-index: 2;

    max-width: 700px;

    margin: 0 auto;

    padding: 0 20px;

}



.consultation-section h2 {

    font-size: 2.5rem;

    color: #fff;

    margin-bottom: 15px;

}



.consultation-section p {

    font-size: 1.2rem;

    color: rgba(255,255,255,0.9);

    margin-bottom: 30px;

}



.cta-button {

    display: inline-block;

    padding: 15px 40px;

    background: #efcc4a;

    color: #192a3d !important;

    text-decoration: none;

    font-size: 1.2rem;

    font-weight: 600;

    border-radius: 6px;

    transition: all 0.3s ease;

    border: 2px solid #efcc4a;

}



.cta-button:hover {

    background: #fce772;

    transform: translateY(-3px);

    box-shadow: 0 5px 15px rgba(239, 204, 74, 0.3);

}



/* УБРАТЬ БЕЛЫЙ ПРОБЕЛ ПЕРЕД ПОДВАЛОМ */

body {

    background-color: #192a3d;

}



.coffins-categories-section,

.coffins-benefits-section {

    background: #fff;

}



/* ВОССТАНОВЛЕНИЕ ОРИГИНАЛЬНОГО РАЗДЕЛИТЕЛЯ ПОДВАЛА */

.footer {

    margin-top: 0 !important;

    padding-top: 60px !important;

}



/* СКРЫТЬ МЕШАЮЩИЙ КОНТЕЙНЕР */

.ct-container-full {

    display: none !important;

}



/* АДАПТИВНОСТЬ */

@media (max-width: 1200px) {

    .categories-grid, 

    .benefits-grid { 

        grid-template-columns: repeat(2, 1fr); 

    }

    .title { font-size: 2.4rem; }

    .subtitle { font-size: 1.2rem; }

    .section-title { font-size: 2.2rem; }

    .consultation-section h2 { font-size: 2.2rem; }

    .coffins-slider-container { height: 400px; }

}



@media (max-width: 992px) {

    #coffins-header-banner { height: 25vh; }

    .title { font-size: 2rem; }

    .subtitle { font-size: 1.1rem; }

    .coffins-slider-container { height: 350px; }

    .footer { padding-top: 40px !important; }

}



@media (max-width: 768px) {

    .title { font-size: 1.8rem; }

    .subtitle { font-size: 1rem; }

    .section-title { font-size: 1.8rem; }

    .section-subtitle { font-size: 1.15rem; }

    .consultation-section { padding: 60px 0; }

    .consultation-section h2 { font-size: 2rem; }

    .category-card { padding: 30px 20px; }

    .coffins-slider-container { height: 300px; }

    .footer { padding-top: 30px !important; }

}



@media (max-width: 576px) {

    #coffins-header-banner { 

        height: 20vh; 

        min-height: 200px;

    }

    .categories-grid,

    .benefits-grid { 

        grid-template-columns: 1fr; 

    }

    .title { font-size: 1.6rem; }

    .consultation-section { padding: 40px 0; }

    .consultation-section h2 { font-size: 1.8rem; }

    .consultation-section p { font-size: 1.1rem; }

    .cta-button { padding: 12px 30px; font-size: 1.1rem; }

    .benefit { padding: 30px 15px; }

    .coffins-slider-container { 

        height: 250px;

        max-width: 95%;

    }

    .coffins-slide-content {

        padding: 10px;

    }

    .coffins-slide img {

        max-height: 90%;

        max-width: 90%;

    }

    .coffins-slider-prev, .coffins-slider-next {

        width: 40px;

        height: 40px;

        padding: 10px;

        font-size: 16px;

    }

    .footer { padding-top: 20px !important; }

}