@font-face {
    font-family: '"Open Sans"';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-display: swap;
}

html {
    scroll-behavior: smooth;
}

body {
    scroll-behavior: smooth;
    margin: 0 auto;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    background-color: #F7F0F5; /* Білий колір для порожніх ділянок */
    background-image: url("../images/freepik__expand__35818-gigapix.webp"); /* Шлях до вашого зображення */
    background-repeat: no-repeat; /* Забороняє повторювати зображення */
    background-position: center top; /* Вирівнює зображення по горизонталі (по центру), зверху */
    background-size: contain; /* Використовує оригінальні розміри зображення */
}

    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Burada 0.5 tündlük dərəcəsidir */
        z-index: -1;
    }

* {
    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: 20px 0;
    height: 68px;
}

.header {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.desktopLogoContainer {
    height: 100%;
}

    .desktopLogoContainer a {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        font-style: normal;
        font-weight: 700;
        font-size: 23px;
        line-height: 120%;
        background: linear-gradient(90deg, #FFFFFF -26.43%, #D1819F 51.43%, #FFFFFF 123.31%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.desktopMenuContainer {
    display: flex;
    align-items: center;
    width: auto;
    gap: 60px;
}

.headerLink {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: #FFFFFF;
}

    .headerLink:hover {
        color: #E08DAC;
    }

.buttonForGetStart {
    width: max-content;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 33px;
    gap: 5px;
    background: linear-gradient(89.86deg, #D1819F 1.8%, #E9A4BE 47.4%, #D1819F 99.86%);
    border: 1px solid rgba(255, 255, 255, 0.79);
    box-shadow: inset 0px 0px 4.1px #000000, inset 0px 2px 15.3px -5px rgba(255, 255, 255, 0.83);
    border-radius: 10px;
    color: #FBF5F3;
}

    .buttonForGetStart:hover {
        background: radial-gradient(65.99% 183.02% at 19.39% 55.66%, #D1819F 0%, #E9A4BE 46.5%, #D1819F 100%);
        border: 1px solid #FFFFFF;
        box-shadow: 0px 4px 4.5px rgba(7, 83, 138, 0.23), inset 0px 2px 15.3px -5px rgba(255, 255, 255, 0.83);
    }

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

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

.mobileLogoContainer {
    height: 100%;
}

    .mobileLogoContainer a {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        font-style: normal;
        font-weight: 700;
        font-size: 23px;
        line-height: 120%;
        background: linear-gradient(90deg, #FFFFFF -26.43%, #D1819F 51.43%, #FFFFFF 123.31%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

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

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

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

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

    .mobileNav a {
        width: 100%;
        background: none;
        text-align: right;
        text-decoration: none;
        border: none;
        font-weight: 400;
        font-size: 16px;
        line-height: 140%;
        color: #FBF5F3;
    }

/* ------------- end mobile header ------------- */
/* ---------------------------- end header-container ----------------------------*/
/* ------------------------------------------------------------------------------------------ */
/* start blockStart */
.blockStart {
    height: 800px;
}

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

.blockStartHeaders {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    gap: 30px;
    width: 842px;
}

.blockStartHeader {
    width: 100%;
    font-size: 44px;
    line-height: 120%;
    color: #FFFFFF;
    mix-blend-mode: normal;
    text-shadow: 1px 1px 0px black, /* Тінь справа внизу */ -1px 1px 0px black, /* Тінь зліва внизу */ 1px -1px 0px black, /* Тінь справа вгорі */ -1px -1px 0px black; /* Тінь зліва вгорі */
}

.blockStartPreHeader {
    width: 100%;
    font-size: 35px;
    line-height: 120%;
    color: #003459;
    text-shadow: 1px 1px 0px white, /* Тінь справа внизу */ -1px 1px 0px white, /* Тінь зліва внизу */ 1px -1px 0px white, /* Тінь справа вгорі */ -1px -1px 0px white; /* Тінь зліва вгорі */
}

.blockStartFormHeader {
    font-style: normal;
    font-weight: 700;
    font-size: 23px;
    line-height: 120%;
    color: #FFFFFF;
    text-shadow: 0.5px 0.5px 0px #E08DAC, /* Тінь справа внизу */ -0.5px 0.5px 0px #E08DAC, /* Тінь зліва внизу */ 0.5px -0.5px 0px #E08DAC, /* Тінь справа вгорі */ -0.5px -0.5px 0px #E08DAC; /* Тінь зліва вгорі */
}

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

.blockContactFormDiv {
    display: flex;
    gap: 30px;
}

.blockContactInput, .blockContactButton {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    gap: 10px;
    width: 320px;
    background: rgba(224, 141, 172, 0.9);
    border: 2px solid #E08DAC;
    backdrop-filter: blur(12.3px);
    border-radius: 10px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: #FFFFFF;
    opacity: 0.8;
}

    .blockContactInput:focus {
        color: #FFFFFF;
        opacity: 1;
        outline: none;
    }

.blockContactSubmitEmail {
    width: max-content;
    opacity: 1;
    cursor: pointer;
    background: linear-gradient(89.86deg, #D1819F 1.8%, #E9A4BE 47.4%, #D1819F 99.86%);
    border: 1px solid rgba(255, 255, 255, 0.79);
    box-shadow: inset 0px 0px 4.1px #000000, inset 0px 2px 15.3px -5px rgba(255, 255, 255, 0.83);
    border-radius: 10px;
    color: #FBF5F3;
}

    .blockContactSubmitEmail:hover {
        background: radial-gradient(65.99% 183.02% at 19.39% 55.66%, #D1819F 0%, #E9A4BE 46.5%, #D1819F 100%);
        border: 1px solid #FFFFFF;
        box-shadow: 0px 4px 4.5px rgba(7, 83, 138, 0.23), inset 0px 2px 15.3px -5px rgba(255, 255, 255, 0.83);
    }

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

/* end blockStart */
/* ------------------------------------------------------------------------------------------ */
/* start blockJustCards */
.blockJustCards {
    width: 100%;
    padding: 50px 0;
    background: linear-gradient(180deg, #0a1f2f, #17496d, #0d2231);
}

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

.blockJustCardsHeaders {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    width: 100%;
}

.blockJustCardsHeader {
    width: 820px;
    font-style: normal;
    font-weight: 700;
    font-size: 35px;
    line-height: 120%;
    text-align: center;
    color: #FFFFFF;
}

.blockJustCardsDescription {
    font-style: normal;
    font-weight: 900;
    font-size: 27px;
    line-height: 140%;
    text-align: center;
    color: #616279;
}

.blockJustCardsMain {
    width: 100%;
    display: flex;
    gap: 0;
}

.blockJustCardsCards {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 50px 20px;
    gap: 40px;
    background: rgba(0, 52, 89, 0.65);
    border-radius: 26px;
    width: 100%;
}

.blockJustCardsCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 50px 40px;
    gap: 10px;
    width: 360px;
    height: 288px;
    background: linear-gradient(90deg, #003459 -13.19%, #07538A 49.9%, #003459 110.28%);
    border: 2px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
}

.blockJustCardsCardHeader {
    font-style: normal;
    font-weight: 700;
    font-size: 23px;
    line-height: 120%;
    text-align: center;
    color: #E08DAC;
}

.blockJustCardsCardDescription {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    text-align: center;
    color: #FFFFFF;
}

.blockJustCardsImg {
    display: none;
}

/* end blockJustCards */
/* ------------------------------------------------------------------------------------------ */
/* start blockTextAndImg */
.blockTextAndImg {
    background: linear-gradient(180deg, #0a1f2f, #17496d, #0d2231);
    padding: 50px 0;
}

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

.blockTextAndImgHeaders {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    gap: 20px;
    width: 568px;
}

.blockTextAndImgHeader {
    width: 100%;
    font-style: normal;
    font-weight: 700;
    font-size: 35px;
    line-height: 120%;
    color: #FFFFFF;
}

.blockTextAndImgPreHeader {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: #FFFFFF;
}

.blockTextAndImgImg {
    height: auto;
    flex: 1;
}

    .blockTextAndImgImg img {
        width: 100%;
    }

/* ------------------------------------------------------------------------------------------ */
/* start wtCarousel */
.wtCarousel {
    width: 100%;
    background: linear-gradient(180deg, #0a1f2f, #17496d, #0d2231);
    padding: 50px 0;
}

.wtCarouselContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 25px;
}

.wtCarouselHeaders {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 20px;
    width: 100%;
}

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

.wtCarouselMain {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0;
}

.wtCarouselCards {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}

.wtCarouselCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 50px 40px;
    gap: 10px;
    width: 360px;
    height: 563px;
    background: linear-gradient(90deg, #003459 -13.19%, #0C619E 49.9%, #003459 110.28%);
    border: 2px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
}

.wtCarouselCardImg {
    width: 140px;
    height: 140px;
}

    .wtCarouselCardImg img {
        width: 140px;
        height: 140px;
    }

.wtCarouselCardHeader {
    font-style: normal;
    font-weight: 700;
    font-size: 23px;
    line-height: 120%;
    text-align: center;
    color: #E08DAC;
}

.wtCarouselCardDescription {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    text-align: center;
    color: #FFFFFF;
}

/* end wtCarousel */
/* ------------------------------------------------------------------------------------------ */
/* start footer */
.footer {
    width: 100%;
    height: auto;
    background: linear-gradient(180deg, #0a1f2f, #17496d, #0d2231);
    padding: 50px 0 20px 0;
}

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

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

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

.blockFooterLogoBlockLogo {
    height: 100%;
}

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

        font-style: normal;
        font-weight: 700;
        font-size: 31.2294px;
        line-height: 120%;
        background: linear-gradient(90deg, #FFFFFF -26.43%, #D1819F 51.43%, #FFFFFF 123.31%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

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

.blockFooterMenu {
    display: flex;
    flex-direction: column;
    gap: 40px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: #FFFFFF;
}

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

    .blockFooterMenuItem:hover {
        color: #E08DAC;
    }

.blockFooterText {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 969px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: #FFFFFF;
}

    .blockFooterText h3 {
        font-style: normal;
        font-weight: 700;
        font-size: 23px;
        line-height: 120%;
        color: #FFFFFF;
    }

.blockFooterAddMenu {
    display: flex;
    gap: 50px;
    justify-content: center;
}

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

/* end footer */
/* ------------------------------------------------------------------------------------------ */
@media (max-width: 768px) {
    body {
        background-position: -1100px -130px; /* Зсуває зображення вліво */
    }

    .content-container {
        width: 100%;
        padding: 0 20px;
    }

    /* ------------------------------------- */
    /* start header */
    header {
        width: 100%;
        padding: 12px 0;
        height: 56px;
    }

    .desktopHeader {
        display: none;
    }

    .mobileHeader {
        display: flex;
    }

    /* end header */
    /* ------------------------------------- */
    /* start blockStart*/
    .blockStart {
        height: 675px;
        padding: 50px 0;
    }

    .blockStartContent {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }

    .blockStartHeaders {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: auto;
        width: 100%;
        gap: 20px;
        order: 2;
    }

    .blockStartHeader {
        font-size: 34px;
    }

    .blockStartPreHeader {
        font-size: 16px;
    }

    .blockContactFormContainer {
        width: 100%;
        gap: 20px;
    }

    .blockContactFormDiv {
        flex-direction: column;
    }

    .blockContactInput, .blockContactButton {
        width: 100%;
        font-size: 16px;
        display: flex;
        justify-content: center;
    }

    /* end blockStart */
    /* ------------------------------------- */
    /* start blockJustCards */
    .blockJustCards {
        height: auto;
        padding: 50px 0;
    }

    .blockJustCardsContent {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .blockJustCardsHeaders {
        width: 100%;
    }

    .blockJustCardsHeader {
        width: 100%;
        font-size: 28px;
    }

    .blockJustCardsCards {
        gap: 20px;
    }

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

    .blockJustCardsCardHeader {
        font-size: 19px;
    }

    .blockJustCardsCardDescription {
        font-size: 16px;
    }

    /* end blockJustCards */
    /* ------------------------------------- */
    /* start blockTextAndImg*/
    .blockTextAndImg {
        height: auto;
        padding: 50px 0;
    }

    .blockTextAndImgContent {
        flex-direction: column;
        gap: 16px;
    }

    .blockTextAndImgHeaders {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: auto;
        width: 100%;
        gap: 20px;
        order: 2;
    }

    .blockTextAndImgHeader {
        font-size: 28px;
    }

    .blockTextAndImgPreHeader {
        font-size: 16px;
    }

    .blockTextAndImgImg {
        height: auto;
        width: 100%;
        order: 1;
    }

    /* end blockTextAndImg */
    /* ------------------------------------- */
    /* start wtCarousel */
    .wtCarousel {
        height: auto;
        padding: 50px 0;
    }

    .wtCarouselContent {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .wtCarouselHeaders {
        width: 100%;
    }

    .wtCarouselHeader {
        font-size: 28px;
    }

    .wtCarouselCards {
        gap: 20px;
    }

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

    .wtCarouselCardHeader {
        font-size: 19px;
    }

    .wtCarouselCardDescription {
        font-size: 16px;
    }

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

    .blockFooterContent {
        gap: 30px;
    }

    .blockFooterMainBlock {
        gap: 30px;
    }

    .blockFooterLogoBlock {
        width: 100%;
    }

    .blockFooterLogoBlockLogo {
        height: 100%;
    }

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

    .blockFooterMenu {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        font-size: 16px;
    }

    .blockFooterMenuItem {
        font-size: 16px;
    }

    .blockFooterText {
        gap: 15px;
        width: 100%;
        font-size: 16px;
    }

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

    .blockFooterAddMenu {
        flex-direction: column;
        align-items: center;
    }

    .blockFooterBottom {
        font-size: 16px;
    }

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