* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.element {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.element .div {
    width: 100%;
    max-width: 1440px;
    height: auto;
    margin: 0 auto;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: clamp(1rem, 2vw, 1.25rem) clamp(0.2rem, 1.5vw, 0.5rem); /* Further reduced side padding to ~3.2px–8px */
}

/* --- Шапка --- */
.header {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.2rem, 1.5vw, 0.5rem); /* Further reduced side padding to ~3.2px–8px */
    background-color: transparent;
    z-index: 1000;
    flex-wrap: wrap;
    gap: 1rem;
}

.text-wrapper {
    font-family: "Montserrat-Bold", Helvetica;
    font-weight: 700;
    font-size: clamp(1rem, 1.3vw, 1.1875rem);
    color: var(--black);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.navbar {
    display: flex;
    align-items: center;
    gap: 2.375rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.text-wrapper-2, .text-wrapper-3 {
    font-family: "Montserrat-Regular", Helvetica;
    font-weight: 400;
    color: var(--black);
    font-size: clamp(0.875rem, 1.125vw, 1.125rem);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.text-wrapper-3 {
    font-family: var(--mont-poit-font-family);
    font-weight: var(--mont-poit-font-weight);
    color: var(--gray);
    font-size: var(--mont-poit-font-size);
    letter-spacing: var(--mont-poit-letter-spacing);
    line-height: var(--mont-poit-line-height);
    font-style: var(--mont-poit-font-style);
}

/* --- Геройская секция --- */
.hero-section-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 2.5rem 0rem; /* Side padding reduced to 0px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2.5rem;
}

.main-title {
    flex: 1;
    min-width: 45%;
    max-width: 630px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5625rem;
    text-align: left;
    order: 1;
}

.p {
    align-self: stretch;
    font-family: var(--mont-h1-font-family);
    font-weight: var(--mont-h1-font-weight);
    color: var(--black);
    font-size: var(--mont-h1-font-size);
    line-height: var(--mont-h1-line-height);
    letter-spacing: var(--mont-h1-letter-spacing);
    font-style: var(--mont-h1-font-style);
    word-break: break-word;
}

.text-wrapper-4 {
    width: 100%;
    max-width: 616px;
    font-family: var(--mont-regul-font-family);
    font-weight: var(--mont-regul-font-weight);
    color: var(--black);
    font-size: var(--mont-regul-font-size);
    line-height: var(--mont-regul-line-height);
    letter-spacing: var(--mont-regul-letter-spacing);
    font-style: var(--mont-regul-font-style);
}

.button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    max-width: 18.5625rem;
    height: 3.375rem;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    background-color: var(--darkblue);
    border-radius: 1.75rem;
    box-shadow: 0px 0.125rem 2.5rem #00000024;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

.text-wrapper-5 {
    font-family: var(--mont-button-font-family);
    font-weight: var(--mont-button-font-weight);
    color: var(--white);
    font-size: var(--mont-button-font-size);
    letter-spacing: var(--mont-button-letter-spacing);
    line-height: var(--mont-button-line-height);
    white-space: nowrap;
    font-style: var(--mont-button-font-style);
}

.output {
    flex: 1;
    min-width: 45%;
    max-width: 32.3125rem;
    height: auto;
    object-fit: cover;
    order: 2;
}

/* --- Секция "Театр для всех и каждого" --- */
.frame {
    width: 100%;
    max-width: 1171px;
    margin: 0 auto;
    padding: 2.5rem 0rem; /* Side padding reduced to 0px */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.6875rem;
}

.text-wrapper-6 {
    align-self: stretch;
    font-family: var(--mont-h2-font-family);
    font-weight: var(--mont-h2-font-weight);
    color: var(--black);
    font-size: var(--mont-h2-font-size);
    text-align: center;
    line-height: var(--mont-h2-line-height);
    letter-spacing: var(--mont-h2-letter-spacing);
    font-style: var(--mont-h2-font-style);
    word-break: break-word;
}

.frame-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
}

.frame-2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; /* Center the content */
    gap: 2.5rem;
    width: 100%;
}

/* Изображение */
.image {
    width: 100%;
    max-width: 36.625rem;
    height: auto;
    object-fit: cover;
    display: block;
    flex: 1 1 45%;
    min-width: 300px;
}

/* Блок с текстом */
.frame-3 {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 34.0625rem;
    flex: 1 1 45%;
    min-width: 300px;
    align-items: flex-start;
    gap: 1.25rem;
}

.text-wrapper-7,
.text-wrapper-8 {
    align-self: stretch;
    font-family: var(--mont-regul-font-family);
    font-weight: var(--mont-regul-font-weight);
    color: var(--black);
    font-size: var(--mont-regul-font-size);
    line-height: var(--mont-regul-line-height);
    letter-spacing: var(--mont-regul-letter-spacing);
    font-style: var(--mont-regul-font-style);
    text-align: left;
}

/* --- Секция "Что такое онлайн-спектакли?" --- */
.frame-8 {
    width: 100%;
    max-width: 1281px;
    margin: 0 auto;
    padding: 2.5rem 0rem; /* Side padding reduced to 0px */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the container */
    justify-content: center; /* Center the content vertically */
    gap: 7.8125rem;
}

.frame-9 {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center children horizontally */
    justify-content: center; /* Center children vertically */
    gap: 4.6875rem;
    width: 100%;
}

.frame-10 {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center; /* Center the cards group */
    gap: 1.3125rem;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--darkblue) var(--lightgray);
}

.div-wrapper {
    flex: 0 0 auto;
    width: 22.5rem;
    min-height: 21.25rem;
    background-color: var(--white);
    border-radius: 1.5625rem;
    box-shadow: 0px 0.125rem 2.5rem #00000024;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.frame-11 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 2.1875rem 1.875rem;
    width: 100%;
    flex-grow: 1;
}

.text-wrapper-13 {
    align-self: stretch;
    font-family: var(--mont-h3-font-family);
    font-weight: var(--mont-h3-font-weight);
    color: var(--darkblue);
    font-size: var(--mont-h3-font-size);
    letter-spacing: var(--mont-h3-letter-spacing);
    line-height: var(--mont-h3-line-height);
    font-style: var(--mont-h3-font-style);
    word-break: break-word;
}

.text-wrapper-14 {
    width: 100%;
    font-family: var(--mont-regul-font-family);
    font-weight: var(--mont-regul-font-weight);
    color: var(--black);
    font-size: var(--mont-regul-font-size);
    line-height: var(--mont-regul-line-height);
    letter-spacing: var(--mont-regul-letter-spacing);
    font-style: var(--mont-regul-font-style);
}

/* --- Секция "Ваши любимые постановки" - Карточки спектаклей --- */
.frame-12 {
    width: 100%;
    max-width: 1281px;
    margin: 0 auto;
    padding: 2.5rem 0rem; /* Side padding reduced to 0px */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the container */
    justify-content: center; /* Center the content vertically */
    gap: 2.5rem;
}

.frame-12 .content-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center; /* Center the cards group */
    gap: 2.5rem;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--darkblue) var(--lightgray);
}

.frame-12::-webkit-scrollbar {
    height: 8px;
}

.frame-12::-webkit-scrollbar-track {
    background: var(--lightgray);
    border-radius: 10px;
}

.frame-12::-webkit-scrollbar-thumb {
    background-color: var(--darkblue);
    border-radius: 10px;
}

.div-2, .div-3, .div-4 {
    flex: 0 0 auto;
    width: 21.25rem;
    height: auto;
    background-color: var(--white);
    border-radius: 1.5625rem;
    box-shadow: 0px 0.125rem 1.99375rem rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.frame-13 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5625rem;
    padding: 1.25rem;
    width: 100%;
    flex-grow: 1;
    justify-content: space-between;
    text-align: center;
}

.text-wrapper-15 {
    align-self: stretch;
    font-family: var(--mont-reg-semibold-font-family);
    font-weight: var(--mont-reg-semibold-font-weight);
    color: var(--black);
    font-size: var(--mont-reg-semibold-font-size);
    line-height: var(--mont-reg-semibold-line-height);
    letter-spacing: var(--mont-reg-semibold-letter-spacing);
}

.button-variant {
    all: unset;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    max-width: 18.75rem;
    height: 3.125rem;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    background-color: var(--darkblue);
    border-radius: 1.5625rem;
    box-shadow: 0px 0.125rem 2.5rem #00000024;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: auto;
}

.button-variant:hover {
    background-color: #0056b3;
}

/* --- Футер --- */
.footer {
    width: 100%;
    margin-top: 80px; /* From previous request */
    background-color: transparent;
    border-top: 2px solid var(--light-gray);
    padding: 0;
    display: flex;
    align-items: flex-end;
}

.footer-content-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: clamp(1rem, 2vw, 1.25rem);
    width: 100%;
    flex-wrap: wrap;
    padding: clamp(1rem, 2vw, 1.25rem) clamp(0.2rem, 1.5vw, 0.5rem); /* Further reduced side padding to ~3.2px–8px */
}

.footer-left-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 28.9375rem;
    align-items: flex-start;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    flex-grow: 1;
}

.footer-logo {
    align-self: stretch;
    font-family: "Montserrat-Bold", Helvetica;
    font-weight: 700;
    color: var(--black);
    font-size: var(--num-font-size);
    letter-spacing: 0;
    line-height: normal;
    word-break: break-word;
}

.footer-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2.9375rem);
    width: 100%;
    flex-wrap: wrap;
}

.text-wrapper-10 {
    font-family: var(--mont-poit-font-family);
    font-weight: var(--mont-poit-font-weight);
    color: var(--gray);
    font-size: var(--mont-poit-font-size);
    letter-spacing: var(--mont-poit-letter-spacing);
    line-height: var(--mont-poit-line-height);
    white-space: nowrap;
}

.footer-right-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.social-icons-group {
    width: auto;
    height: 1.625rem;
    display: flex;
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
    align-items: center;
    justify-content: flex-start;
}

.VK, .telegram, .you-tube {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.you-tube {
    width: 1.625rem;
    height: 1.625rem;
}

.copyright-text {
    font-family: var(--mont-poit-font-family);
    font-weight: var(--mont-poit-font-weight);
    color: var(--gray);
    font-size: var(--mont-poit-font-size);
    letter-spacing: var(--mont-poit-letter-spacing);
    line-height: var(--mont-poit-line-height);
    white-space: nowrap;
}

.text-wrapper-12 {
    font-family: "Montserrat-Regular", Helvetica;
    font-weight: 400;
    color: var(--gray);
    font-size: var(--mont-poit-font-size);
    letter-spacing: 0;
    line-height: 1.75rem;
    white-space: nowrap;
}

/* --- Медиа-запросы --- */
@media (max-width: 1024px) {
    .hero-section-container {
        gap: 1.5rem;
    }
    
    .div-wrapper {
        width: 20rem;
        min-height: 19rem;
    }
    
    .div-2, .div-3, .div-4 {
        width: 19rem;
    }
}

@media (max-width: 768px) {
    .hero-section-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem 0rem; /* Side padding reduced to 0px */
    }
    
    .main-title {
        order: 2;
        align-items: center;
        text-align: center;
        min-width: 100%;
    }
    
    .output {
        order: 1;
        min-width: 100%;
    }
    
    .frame-10, .frame-12 .content-wrapper {
        gap: 1rem;
    }
    
    .div-wrapper {
        width: 18rem;
        min-height: 17rem;
    }
    
    .div-2, .div-3, .div-4 {
        width: 17rem;
    }
}

@media (max-width: 480px) {
    .hero-section-container {
        padding: 1.5rem 0rem; /* Side padding reduced to 0px */
        gap: 1rem;
    }
    
    .div-wrapper {
        width: 16rem;
        min-height: 15rem;
    }
    
    .div-2, .div-3, .div-4 {
        width: 15rem;
    }
    
    .frame-11 {
        padding: 1.5rem;
    }
}

/* Стили для скролла (Chrome, Safari, Edge) */
.frame-10::-webkit-scrollbar {
    height: 8px;
}

.frame-10::-webkit-scrollbar-track {
    background: var(--lightgray);
    border-radius: 10px;
}

.frame-10::-webkit-scrollbar-thumb {
    background-color: var(--darkblue);
    border-radius: 10px;
}

.frame-12 .content-wrapper::-webkit-scrollbar {
    height: 8px;
}

.frame-12 .content-wrapper::-webkit-scrollbar-track {
    background: var(--lightgray);
    border-radius: 10px;
}

.frame-12 .content-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--darkblue);
    border-radius: 10px;
}