body {
    font-family: 'DM Sans', sans-serif;
    color: #212529;
}
/* Category cards on the left column */
.category-card {
    position: relative;
    height: 250px;
    color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
}

    .category-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1;
    }

.category-title {
    position: relative;
    z-index: 2;
    font-size: 2rem;
    font-weight: 700;
}

.category-buttons {
    position: relative;
    z-index: 2;
}
/* Advantages icons */
.icon-circle {
    background: #eaf3ee;
    color: #2b6f3e;
    border-radius: 50%;
    /* Increased size for advantage icons */
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
/* Responsive adjustments */
@media (max-width: 767.98px) {
    .category-card {
        height: 200px;
    }
}

/* Primary navigation links (top bar) */
.primary-nav-link {
    /* Navigation links are large but spaced more compactly.  Horizontal padding
           has been reduced to bring the links about 50% closer together. */
    font-size: 1.3rem;
    padding: 0.8rem 1rem;
    color: #212529;
    font-weight: 600;
}

    .primary-nav-link:hover,
    .primary-nav-link:focus {
        color: #2b6f3e;
        text-decoration: none;
    }

/* Header contact info and social icons */
.header-contacts .contact-info i {
    font-size: 1.5rem;
    color: #2b6f3e;
}

.header-contacts .contact-info a,
.header-contacts .contact-info span {
    font-size: 1.2rem;
}

.header-contacts .social-icons i {
    /* We no longer use inline icon fonts for social links; instead
           coloured PNG/SVG icons can be used.  The .social-icon class
           controls their size. */
}

.social-icon {
    width: 32px;
    height: 32px;
    display: inline-block;
}

.header-contacts .social-icons a + a {
    margin-left: 0.0rem;
}

/* Custom category buttons: uniform size and interactive states */
.category-buttons {
    display: flex;
    gap: 0.5rem;
}

    .category-buttons .category-btn {
        flex: 1;
        text-align: center;
        padding: 0.6rem 0;
        border-radius: 4px;
        border: 2px solid #c4a038;
        background-color: rgba(0, 0, 0, 0.6);
        color: #ffffff;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s ease;
    }

        .category-buttons .category-btn:hover,
        .category-buttons .category-btn:focus {
            background-color: #c4a038;
            color: #ffffff;
            border-color: #c4a038;
        }

        .category-buttons .category-btn:active {
            transform: translateY(2px);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
        }

/* Footer contacts: larger text */
.footer-contacts i {
    font-size: 1.5rem;
    color: #2b6f3e;
}

.footer-contacts a,
.footer-contacts span {
    font-size: 1.2rem;
}

/* Centre contact list inside the contact column by treating the list as an inline block.
         The list itself will be centred via text-align on the parent. */

/* Center the main navigation horizontally between the logo and contact area */
header .nav {
    flex-grow: 1;
    justify-content: center;
    align-items: center;
}

    /* Reduce horizontal spacing between navigation items */
    header .nav .nav-item + .nav-item {
        margin-left: 0.5rem;
    }
/* Push the contact area to the far right */
header .header-contacts {
    margin-left: auto;
}

/* Make images inside advantage icons fit nicely within the circular badge */
.icon-circle img {
    /* Make images fill more of the circular badge */
    width: 70%;
    height: 70%;
    object-fit: contain;
}

/* Mobile menu overlay */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    overflow-y: auto;
    z-index: 1200;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

    .mobile-menu.active {
        transform: translateX(0);
        opacity: 1;
    }

.mobile-menu-header {
    border-bottom: 1px solid #e9ecef;
}

.mobile-nav-link {
    font-size: 1.5rem;
    font-weight: 600;
    color: #212529;
    text-decoration: none;
}

    .mobile-nav-link:hover {
        color: #2b6f3e;
    }

/* Adjust category buttons on small screens */
@media (max-width: 767.98px) {
    .category-buttons {
        gap: 0.3rem;
    }

        .category-buttons .category-btn {
            padding: 0.45rem 0;
            font-size: 0.85rem;
        }
}

/* Preloader overlay */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

    #preloader.hidden {
        opacity: 0;
        visibility: hidden;
    }
/* Simple spinner used in the preloader */
.spinner {
    width: 80px;
    height: 80px;
    border: 8px solid rgba(255, 255, 255, 0.2);
    border-top-color: #c4a038;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Animation classes for puzzle-like reveal */
.animate-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

    .animate-in.in-view {
        opacity: 1;
        transform: translateY(0);
    }
.form-group{
    width:500px;
    margin-bottom:20px;
}
.gh-mobile-icons {
    display: none;
}

@media (max-width: 767.98px) {
    .gh-mobile-icons {
        display: flex;
    }
}
/* Скрывать на десктопе, показывать на мобилке */
.gh-mobile-contact {
    display: none;
}

@media (max-width: 767.98px) {
    .gh-mobile-contact {
        display: flex;
    }
}
.gh-mobile-contact {
    display: none;
}

@media (max-width: 767.98px) {
    .gh-mobile-contact {
        display: flex;
    }

        .gh-mobile-contact .social-icon {
            width: 35px;
            height: 35px;
            display: block;
        }

    .gh-mobile-phone {
        font-size: 20px;
        line-height: 1.1;
    }
}
@media (max-width:576px) {
    .lead-wrap {
        position: sticky;
        bottom: 0;
        z-index: 20;
        border-radius: 18px 18px 0 0;
    }
}