html {
    scroll-behavior: smooth;
}

body {
    scroll-behavior: smooth;

    margin: 0 auto;
    font-family: "Arial", serif;
    font-optical-sizing: auto;
    font-style: normal;
    background-color: #EEF0E6; /*--11--*/
}

* {
    box-sizing: border-box;
    font-family: inherit;
}

button {
    font-family: inherit;
    border: 0;
    text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

p {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

/* загальний клас для блоків під 1220px */
.content-container {
    max-width: 1220px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* !!! ---------- modal window ---------- */
.modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(51, 51, 51, 0.6); /* Напівпрозорий чорний фон */
}

.modal-content {
    background-color: #F5F5F8; /* Світло-сірий фон для вмісту */
    margin: 15% auto;
    padding: 40px 30px;
    width: 80%;
    max-width: 516px;
    text-align: center;
    position: relative;

    font-style: normal;
    font-size: 18px;
    line-height: 120%;
    color: #252622; /* Темно-сірий текст */
    border: none;
    border-radius: 20px; /* Закруглені краї */
}


/* ---------- end modal window ---------- */

/* start main */
main {
    width: 100%;
}
/* end main */

/* ---------------------------- start header-container ----------------------------*/
header {
    width: 100%;

    padding: 10px 0; /*--11--*/
    height: 73px; /*--11--*/
}

.header {
    box-sizing: border-box;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* !!! ------------- desktop header ------------- */
.desktopHeader {
    display: flex;
    justify-content: space-between; /*--11--*/
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.desktopLogoContainer {
    height: 100%; /*--11--*/
    width: 260px; /*--11--*/
}

.desktopLogoContainer a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;

    font-weight: 700;
    font-size: 25px;
    line-height: 140%;
    color: #27233A;
}

.desktopMenuContainer {
    display: flex;
    align-items: center;

    width: auto;
    gap: 45px; /*--11--*/
}

.headerLink {
    /*--11--*/
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: #27233A;
    /*--11--*/
}

.headerLink:hover {
    color: #4E937A; /*--11--*/
    text-decoration: underline;
}

.buttonForGetStart {
    width: max-content;

    /*--11--*/
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 32px;

    color: #EEF0E6;

    background: #3E7F68;
    border: 1px solid #57A287;
    border-radius: 12px;
    /*--11--*/
}

.buttonForGetStart:hover {
    background-color: #57A287; /*--11--*/
    color: #EEF0E6; /*--11--*/
}

/* ------------- end desktop header ------------- */

/* !!! ------------- mobile header ------------- */
/* Сховати іконку меню на великих екранах */
.mobileHeader {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;

    height: 62px; /*--11--*/
}

.mobileLogoContainer {
    height: 100%; /*--11--*/
}

.mobileLogoContainer a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;

    font-weight: 700;
    font-size: 25px;
    line-height: 140%;
    color: #27233A;
}

.mobileMenuBurger {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Стилі мобільного меню */
.mobileMenuContainer {
    position: fixed;
    top: 0;
    right: -100%; /* Початкове положення за межами екрану */
    width: 75%;
    max-width: 300px;
    height: 100vh;
    background-color: #EEF0E6; /*--11--*/
    display: flex;
    flex-direction: column;
    align-items: start; /*--11--*/
    padding: 20px;
    transition: right 0.5s ease; /*--11--*/
    z-index: 1000;
}

.mobileMenuClose {
    width: auto;
    height: 24px;
    display: flex;
    justify-content: flex-end;
}

.mobileNav {
    display: flex;
    flex-direction: column;
    gap: 30px; /*--11--*/
    margin-top: 20px;
    width: 100%;
    align-items: end; /*--11--*/
}

.mobileNav a {
    width: 100%;
    background: none;
    text-align: right;
    text-decoration: none;
    border: none;

    /*--11--*/
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #27233A;
    /*--11--*/
}

/* ------------- end mobile header ------------- */
/* ---------------------------- end header-container ----------------------------*/
/* ------------------------------------------------------------------------------------------ */
/* start blockWelcome */
.blockWelcome {

    height: 660px; /*--11--*/

    background-image: url('../images/bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.blockWelcomeContent {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 16px;
    align-items: center;
}

.blockWelcomeHeaders {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    gap: 25px; /*--11--*/

    width: 639px; /*--11--*/
}

.blockWelcomeHeader {
    width: 100%;

    /*--11--*/
    font-style: normal;
    font-weight: 900;
    font-size: 40px;
    line-height: 140%;

    color: #FFFFFF;
    text-shadow: 1px 1px 0px black, /* Тінь справа внизу */ -1px 1px 0px black, /* Тінь зліва внизу */ 1px -1px 0px black, /* Тінь справа вгорі */ -1px -1px 0px black; /* Тінь зліва вгорі */

    /*--11--*/
}

.blockWelcomePreHeader {
    /*--11--*/
    width: 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: #FFFFFF;
    text-shadow: 1px 1px 0px black, /* Тінь справа внизу */ -1px 1px 0px black, /* Тінь зліва внизу */ 1px -1px 0px black, /* Тінь справа вгорі */ -1px -1px 0px black; /* Тінь зліва вгорі */

    /*--11--*/
}
/* end blockWelcome */
/* ------------------------------------------------------------------------------------------ */
/* start jufkf22 */
.jufkf22 {
    width: 100%;
    padding: 50px 0;
}

.jufkf22Content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;

    width: 100%;
    height: 100%;
}

.jufkf22Headers {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative; /* Потрібно для абсолютного позиціювання псевдоелемента */
}


.jufkf22Header {
    font-style: normal;
    font-weight: 700;
    font-size: 35px;
    line-height: 120%;
    text-align: center;
    color: #57A287;
}

.jufkf22Cards {
    display: flex;
    justify-content: center;
    align-items: center;


    flex-wrap: wrap;
    gap: 30px;
    width: 100%;

}

.jufkf22Card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 275px;
    height: 250px;
    border: 5px solid #57A287;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    cursor: pointer; /* Індикатор, що блок клікабельний */
}

.jufkf22Card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease-in-out; /* Плавний перехід */
}

.jufkf22Card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0); /* Початково прозорий */
    transition: background 0.3s ease-in-out; /* Плавне затемнення */
    z-index: 1; /* Поверх зображення */
}

.jufkf22Card:hover::before {
    background: rgba(0, 0, 0, 0.5); /* Затемнення при наведенні */
}

.jufkf22Card .play-text {
    position: absolute;
    color: #FFFFFF;
    font-size: 22px;
    transform: translate(-50%, -50%);

    background-color: #57A287;
    border-radius: 20px;
    width: 70%;
    padding: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    opacity: 0; /* Невидимий текст */
    transition: opacity 0.3s ease-in-out; /* Плавний перехід видимості */
    z-index: 2; /* Поверх затемнення */
}

.jufkf22Card:hover .play-text {
    opacity: 1; /* З'являється при наведенні */
}

/* end jufkf22 */
/* ------------------------------------------------------------------------------------------ */
/* start kiidje334 */
.kiidje334 {
    width: 100%;
    padding: 50px 0;
}

.kiidje334Content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 20px; /*--11--*/
}

.kiidje334Headers {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 20px; /*--11--*/
    width: 100%; /*--11--*/
}

.kiidje334Header {
    /*--11--*/
    font-style: normal;
    font-weight: 900;
    font-size: 33px;
    line-height: 140%;
    text-align: center;
    color: #4E937A;
    /*--11--*/
}

.kiidje334Main {
    width: 100%;
    display: flex;
    gap: 0; /*--11--*/
    justify-content: center;
}

.kiidje334Cards {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /*--11--*/
    gap: 20px; /*--11--*/
}

.kiidje334Card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /*--11--*/
    box-sizing: border-box;
    padding: 20px;
    gap: 15px;
    width: 350px;
    height: 346px;
    border-radius: 25px;
    border: 1px solid #4E937A;
    /*--11--*/
}

.kiidje334CardImg {
    width: auto; /*--11--*/
    height: 110px; /*--11--*/
}

.kiidje334CardImg img {
    width: auto; /*--11--*/
    height: 110px; /*--11--*/
}

.kiidje334CardHeader {
    /*--11--*/
    font-style: normal;
    font-weight: 900;
    font-size: 27px;
    line-height: 140%;
    text-align: center;
    color: #57A287;
    /*--11--*/
}

.kiidje334CardDescription {
    /*--11--*/
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    text-align: center;
    color: #27233A;
    /*--11--*/
}

.kiidje334Img {
    display: none; /*--11--*/
}

/* end kiidje334 */
/* ------------------------------------------------------------------------------------------ */
/* start blockContact */
.blockContact {
    width: 100%;
    padding: 50px 0;
    background-color: #616279;
}

.blockContactContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 20px; /*--11--*/
}

.blockContactHeader {
    /*--11--*/
    font-style: normal;
    font-weight: 900;
    font-size: 33px;
    line-height: 140%;
    text-align: center;
    color: #EEF0E6;
    /*--11--*/
}

.blockContactDescription {
    /*--11--*/
    width: 468px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    text-align: center;
    color: #EEF0E6;
    /*--11--*/
}

.blockContactFormContainer {
    display: flex;
    flex-direction: column;
    gap: 20px; /*--11--*/
}

.blockContactFormDiv {
    display: flex;
    flex-direction: column;
    gap: 20px; /*--11--*/
}

.blockContactInput, .blockContactButton {
    /*--11--*/
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 32px;
    width: 300px;
    border-radius: 12px;

    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: #000000;
    /*--11--*/
}

.blockContactInput:focus {
    /*--11--*/
    border-color: #57A287;
    color: #000000;
    /*--11--*/

    outline: none;
}

.blockContactSubmitEmail {
    cursor: pointer;

    /*--11--*/
    color: #000000;
    background-color: #4E937A;
    border: 1px solid #57A287;
    /*--11--*/
}

.blockContactSubmitEmail:hover {
    text-decoration: underline;
    color: #000000; /*--11--*/
    background-color: #57A287; /*--11--*/
}

.blockContactSubmitEmail:disabled {
    background-color: #ccc;
    border: none;
    color: #27233A;
    cursor: not-allowed;
}


/* end blockContact */
/* ------------------------------------------------------------------------------------------ */
/* start footer */
.footer {
    width: 100%;
    height: auto;
    background-color: #616279;
    padding: 50px 0 20px 0;
}

.blockFooterContent {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;

    gap: 30px; /*--11--*/

}

.blockFooterMainBlock {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px; /*--11--*/
}

.blockFooterLogoBlock {
    display: flex;
    align-items: center;
    justify-content: center;
}

.blockFooterLogoBlockLogo {
    height: 100%; /*--11--*/
}

.blockFooterLogoBlockLogo a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;

    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    line-height: 140%;
    color: #EEF0E6;
}

.blockFooterWithoutHeader {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.blockFooterMenu {
    display: flex;
    flex-direction: column;
    gap: 25px; /*--11--*/

    /*--11--*/
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: #EEF0E6;
    /*--11--*/
}

.blockFooterMenuItem {
    /*--11--*/
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: #EEF0E6;
    /*--11--*/
}

.blockFooterMenuItem:hover {
    text-decoration: underline;
}

.blockFooterText {
    display: flex;
    flex-direction: column;
    gap: 20px; /*--11--*/

    /*--11--*/
    width: 800px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: #EEF0E6;
    /*--11--*/
}

.blockFooterText h3 {
    font-style: normal;
    font-weight: 900;
    font-size: 22px;
    line-height: 140%;
    color: #EEF0E6;
}

.blockFooterBottom {
    text-align: center;
    /*--11--*/
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: #EEF0E6;
    /*--11--*/
}

/* end footer */
/* ------------------------------------------------------------------------------------------ */

@media (max-width: 768px) {
    .content-container {
        width: 100%;
        padding: 0 20px;
    }

    /* ------------------------------------- */
    /* start header */
    header {
        width: 100%;
        padding: 10px 0; /*--11--*/
        height: 62px; /*--11--*/
    }

    .desktopHeader {
        display: none;
    }

    .mobileHeader {
        display: flex;
    }

    /* end header */
    /* ------------------------------------- */
    /* start blockWelcome*/
    .blockWelcome {
        padding: 50px 0;
        background-image: url("../images/bg2.png");
    }

    .blockWelcomeContent {
        flex-direction: column; /*--11--*/
        justify-content: center;
        gap: 16px; /*--11--*/
    }

    .blockWelcomeHeaders {
        display: flex;
        flex-direction: column;
        justify-content: center;

        height: auto;
        width: 100%;
        gap: 20px; /*--11--*/
        order: 2; /*--11--*/
    }

    .blockWelcomeHeader {
        font-size: 34px; /*--11--*/
    }

    .blockWelcomePreHeader {
        font-size: 16px; /*--11--*/
    }

    /* start це є в стилях хедера */
    .buttonForGetStart{
        width: 100%;
    }
    /* end це є в стилях хедера */
    /* end blockWelcome */
    /* ------------------------------------- */
    /* start jufkf22*/
    .jufkf22 {
        width: 100%;
        padding: 50px 0;

        height: auto;
    }

    .jufkf22Content {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .jufkf22Headers {
        gap: 20px;
    }

    .jufkf22Header {
        font-size: 30px;
    }

    .jufkf22Cards {
        gap: 20px;
    }

    .jufkf22Card {
        width: 100%;
        height: 320px;
    }

    .jufkf22Card img {
        width: 100%;
        height: 100%;
    }
    /* end jufkf22 */
    /* ------------------------------------- */
    /* start kiidje334 */
    .kiidje334 {
        height: auto;
        padding: 50px 0;
    }

    .kiidje334Content {
        flex-direction: column;
        align-items: center;
        gap: 20px; /*--11--*/
    }

    .kiidje334Headers {
        width: 100%; /*--11--*/
    }

    .kiidje334Header {
        font-size: 28px; /*--11--*/
    }

    .kiidje334Cards {
        gap: 20px; /*--11--*/
    }

    .kiidje334Card {
        width: 100%;
        height: auto;
    }

    .kiidje334CardHeader {
        font-size: 23px; /*--11--*/
    }

    .kiidje334CardDescription {
        font-size: 16px; /*--11--*/
    }

    /* end kiidje334 */
    /* ------------------------------------- */
    /* start blockContact */
    .blockContact {
        width: 100%;
        height: auto;
        padding: 50px 0;
    }

    .blockContactContainer {
        gap: 20px; /*--11--*/
    }

    .blockContactHeader {
        font-size: 28px; /*--11--*/
    }

    .blockContactDescription {
        width: 100%;
        font-size: 16px; /*--11--*/
    }

    .blockContactFormContainer {
        width: 100%;
        gap: 20px; /*--11--*/
    }

    .blockContactFormDiv {
        flex-direction: column;
    }

    .blockContactInput, .blockContactButton {
        width: 100%;
        font-size: 16px; /*--11--*/
    }

    /* end blockContact */
    /* ------------------------------------- */
    /* start footer */
    .footer {
        padding: 50px 0 20px 0;
    }

    .blockFooterContent {
        gap: 30px; /*--11--*/
    }

    .blockFooterMainBlock {
        gap: 30px; /*--11--*/
    }

    .blockFooterLogoBlock {
        width: 100%;
    }

    .blockFooterLogoBlockLogo {
        height: 100%; /*--11--*/
    }

    .blockFooterLogoBlockLogo a img {
        width: auto; /*--11--*/
        height: 100%; /*--11--*/
    }

    .blockFooterWithoutHeader {
        gap: 40px;
        flex-direction: column;
    }

    .blockFooterMenu {
        gap: 25px; /*--11--*/
        font-size: 16px; /*--11--*/
    }

    .blockFooterMenuItem {
        font-size: 16px; /*--11--*/
    }

    .blockFooterText {
        gap: 15px; /*--11--*/

        width: 100%;
        font-size: 16px; /*--11--*/
    }

    .blockFooterText h3 {
        font-size: 19px; /*--11--*/
    }

    .blockFooterBottom {
        font-size: 16px; /*--11--*/
    }

    /* end footer */
    /* ------------------------------------- */
}