body { scroll-behavior: smooth; }
.navbar-brand { letter-spacing: .5px; }

body {
    padding-bottom: 100px;
}

.back {
    background: url('/images/background.jpg') center/cover no-repeat;
    min-height: 320px; /* ????? ??? ???? ????? */
    border-radius: 1rem;
}
footer {
    height: 20px;
    padding: 0 !important;
    margin: 0;
    font-size: 0.8rem;
    line-height: 20px; /* ???????????? ?????? ?? ?????? */
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1; /* ????? ???????? ?????????? ???????? ??? ???????????? */
}

footer {
    height: 40px;
    padding: 0 !important;
    line-height: 20px;
    text-align: center;
    font-size: 0.8rem;
    background: #f8f9fa;
    border-top: 1px solid #ddd;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* ??????-?????? */
.btn-hero {
    background: #e53935;
    border: none;
    color: #fff;
    padding: .6rem 1.1rem;
    border-radius: .6rem;
    font-weight: 600;
}

    .btn-hero:hover {
        filter: brightness(0.95);
        color: #fff;
    }

/* ??????? hero */
.hero {
    background: url('/images/background2.jpg') center/cover no-repeat;
    height: 360px;
    color: #fff;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
}

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.35);
    }

    .hero .hero-content {
        position: relative;
        z-index: 1;
        text-shadow: 0 2px 6px rgba(0,0,0,.6);
    }

/* Hero ?? ?????????? ???????? ????? ?? ??????/?????? */
.contact-hero {
    background: url('/images/background.jpg') center/cover no-repeat;
    height: 360px;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    color: #fff;
}

    .contact-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.45);
    }

    .contact-hero .inner {
        position: relative;
        z-index: 1;
        text-shadow: 0 2px 6px rgba(0,0,0,.6);
    }

/* ????? ??? ?????????? ?? Contact */
.chips .chip {
    background: rgba(255,255,255,.9);
    color: #333;
    border-radius: 999px;
    padding: .35rem .8rem;
    font-weight: 600;
    margin-right: .5rem;
    margin-bottom: .5rem;
}

/* ???????? ????? */
.form-card {
    border: 0;
    box-shadow: 0 6px 28px rgba(0,0,0,.06);
    border-radius: 1rem;
}

.req {
    color: #e03131;
    margin-left: .25rem;
}

/* ????? «??????» ?????, ?? ?? ??????????? ??????? */
html, body {
    height: 100%;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
    padding: .75rem 0;
}

/* HERO-FOTO — ??? ?????? ???? */
.services-hero {
    position: relative;
    min-height: 380px;
    background-image: url('/images/background3.jpg');
    background-size: cover;
    border-radius: 1rem;
    overflow: hidden;
}

/* ?????? ?????????? ??? ????????? ?????? */
.services-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.services-hero-inner {
    position: relative;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* ?????? */
.btn-hero {
    background: #e63946;
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 0.6rem;
    padding: 0.65rem 1.3rem;
}

    .btn-hero:hover {
        background: #c92a37;
        color: #fff;
    }

/* ??????????? ? ?????????? */
.object-cover {
    object-fit: cover;
    max-height: 240px;
}

/* ===== ????????? ????? ===== */
.accordion {
    border: none;
}

.accordion-item {
    border: none;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
}

/* ????????? */
.accordion-button {
    background-color: #fff;
    color: #222;
    font-weight: 600;
    padding: 1rem 1.25rem;
    border: none;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

    /* ??? ????????? */
    .accordion-button:hover {
        background-color: #f9f9f9;
    }

    /* ??? ???????? */
    .accordion-button:not(.collapsed) {
        background-color: #ffe8e8; /* ?????-??????? ??????? */
        color: #b02128; /* ????????? ?????-??????? */
        box-shadow: inset 0 -2px 0 #e63946;
    }

    /* ?????? ??????? */
    .accordion-button::after {
        filter: invert(30%) sepia(50%) saturate(500%) hue-rotate(340deg);
        transition: transform 0.2s ease;
    }

    .accordion-button:not(.collapsed)::after {
        transform: rotate(-180deg);
    }

/* ???? */
.accordion-body {
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
    padding: 1.25rem;
}

    /* ????? + ???????? */
    .accordion-body ul {
        margin-bottom: 0;
        padding-left: 1.25rem;
    }

    .accordion-body li {
        margin-bottom: .4rem;
    }

    .accordion-body img {
        border-radius: .75rem;
        box-shadow: 0 2px 8px rgba(0,0,0,.1);
        transition: transform .3s ease;
    }

        .accordion-body img:hover {
            transform: scale(1.02);
        }
    /* ?????? ?????? ??? ???????? ?????? ?????????? */
    .accordion-body img {
        width: 100%;
        height: 220px; /* ????????????? ?????? */
        object-fit: cover; /* ????????? ???? ??? ????????? */
        border-radius: 0.75rem;
        box-shadow: 0 2px 8px rgba(0,0,0,.1);
        transition: transform .3s ease;
    }

        .accordion-body img:hover {
            transform: scale(1.02);
        }

    /* ????? ??????? ??????? ????????????? */
    .accordion-body .row {
        align-items: center;
    }

@media (max-width: 768px) {
    .accordion-body img {
        height: 180px; /* ?????? ?? ????????? */
        margin-top: 1rem;
    }
}

.btn-success {
    background-color: #25D366;
    border: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

    .btn-success:hover {
        background-color: #1ebe5d;
    }

.btn-danger {
    background-color: #e63946;
    border: none;
    font-weight: 600;
}

.navbar .bi-whatsapp {
    color: #25d366;
    transition: color 0.2s ease;
}

    .navbar .bi-whatsapp:hover {
        color: #1ebe57;
    }

.navbar .text-muted {
    font-size: 1rem;
}

.accordion-body .row {
    align-items: start !important;
}

.accordion-body img {
    height: auto; /* ?????????????? ?????? */
    max-height: 350px; /* ????? ????????? ?? 400 ???? ?????? ?????? ???? */
    width: 100%;
    object-fit: contain; /* ?????? cover — ?????? ?? ???????? */
    border-radius: 12px;
    background-color: #fff;
    padding: 4px;
}

.mt-4{
    margin-bottom:100px;!important;
}

/* ?????????? «????????» */
.timeline-item {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.timeline-dot {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: .35rem;
}

.object-cover {
    object-fit: cover;
    aspect-ratio: 16/9;
}

.btn-hero {
    background: #e94b54;
    color: #fff;
    border: none;
}

    .btn-hero:hover {
        background: #d63e47;
        color: #fff;
    }
.py-33 {
    padding-bottom: 60px !important;
    padding-top:20px !important;
}
/* ????-????: ?????? ?? ???????? ?? ?????????? */
.hero {
    overflow: hidden;
}

/* ??????-????? ?? ????????? */
.btn-hero {
    background: #e64951;
    border: none;
    color: #fff;
    box-shadow: 0 8px 18px rgba(230, 73, 81, .25);
}

/* ?? ????? ????? ??????? ?????? ????????? ?????? */
@media (max-width: 420px) {
    .btn-hero.btn-lg {
        font-size: 1rem; /* ???? ~1.125rem */
        padding: .6rem 1rem; /* ???? ?????? */
    }
}

/* ?? ???? ??????? ?? ???? ?????? «????????» ?? ???????? */
.btn-hero {
    max-width: 100%;
}


.service-box {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    padding: 24px;
    min-height: 160px; /* ????? ????? ???? ?????????? */
}

/* ??????? ?????? */
.btn-hero,
.btn-primary,
.btn {
    background-color: #d70000 !important;
    border-color: #d70000 !important;
}


/* ========== HERO RESPONSIVE FONT SIZES ========== */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 1.8rem; /* ???????? ? display-5 (~2.5rem) */
        line-height: 1.2;
    }

    .fs-5 {
        font-size: 0.8rem!important;       
    }
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 1.5rem;
        line-height: 1.15;
    }

    .hero  {
        font-size: 0.95rem;!important
    }

    .btn-hero {
        font-size: 1rem;
        padding: 0.6rem 1rem;
    }
}

.check-red {
    color: #d9534f; /* ??????? */
    font-weight: bold;
}

@media (max-width: 767px) {
    body, html {
        padding-bottom: 70px; /* ?????? ????? ??? ?????????? */
    }

    footer, .footer {
        padding-bottom: 30px; /* ?????????????? ????????? */
    }
    .small, small {
        font-size: 0.6em;
    }
}
@media (max-width: 767px) {
    .whatsapp-cta {
        margin-bottom: 60px !important;
    }
    .small, small {
        font-size: 0.6em;
    }
}

.google-review-link,
.google-review-link:visited,
.google-review-link:hover,
.google-review-link:active {
    color: white !important; /* ??? ??????, ???? ????? */
    text-decoration: none; /* ??????? ????????????? */
    font-weight: 600;
}
.google-review-btn {
    background: #d70000;
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
}

    .google-review-btn:hover {
        background: #b00000;
        color: #fff !important;
    }