@font-face {
    font-family: "Soviet";
    src: url("../../fonts/Old-Soviet.otf");

}
* {
    margin: 0;
    padding: 0;
    /*font-family: "Cormorant Infant", sans-serif;*/
    /*font-family: "Book Antiqua", sans-serif;*/
    /*font-family: "Alumni Sans Pinstripe", sans-serif;*/
    font-family: "Poiret One", sans-serif;


}

body {
    -webkit-text-size-adjust: 100%;
    /*background-color: #faf1eb;*/
    /*color: #8c673f;*/
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}
.hidden {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.hid {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 3s ease-out;
}
.desktop-message {
     display: none;
     text-align: center;
     margin-top: 150px;
 }
.watermark {
    content: "ya-invite";
    position: fixed;
    font-size: 80px;
    color: rgba(0, 0, 0, 0.08);
    transform: rotate(-25deg);
    pointer-events: none;
    z-index: 55555;
    white-space: nowrap;
    font-weight: 600; /* выглядит аккуратнее */
}

/* Три позиции */
body::before {
    content: "ya-invite";
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    font-size: 80px;
    color: rgba(0,0,0,0.08);
    pointer-events:none;
    z-index:5555555;
    white-space:nowrap;
}

body::after {
    content: "ya-invite";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    font-size: 80px;
    color: rgba(0,0,0,0.08);
    pointer-events:none;
    z-index:5555555;
    white-space:nowrap;
}

html::after {
    content: "ya-invite";
    position: fixed;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    font-size: 80px;
    color: rgba(0,0,0,0.08);
    pointer-events:none;
    z-index:555555;
    white-space:nowrap;
}
/*body > *:not(.loader) {*/
/*    opacity: 0;*/
/*    visibility: hidden;*/
/*    transition: opacity 1s ease-in-out;*/
/*}*/

/*#preloader {*/
/*    position: fixed;*/
/*    left: 0;*/
/*    top: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    z-index: 99999;*/
/*    background-color: #faf1eb;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/

#preloader-logo {
    width: 0;
    height: auto;
}

#preloader-quote {
    margin-top: 40px;
    width: 90%;
    text-align: center;
    font-size: 80px;
    color: #d6d6d6;
    max-width: 800px;
    opacity: .5;
    font-family: 'Great Vibes', Arial, sans-serif;
    letter-spacing: 1px;
    font-weight: 500;
}

#preloader-quote {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #000, #8c673f, #000);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
    0% {
        background-position: -300%;
    }
    100% {
        background-position: 300%;
    }
}




    .show {
        opacity: 1;
        transform: translateY(0);
    }




    .first-page {
        padding: 50px 0;

    }

    .first-page .container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }



    .invite-text {
        font-size: 30px;
        text-align: center;
    }

    .invite-name {
        font-size: 85px;
        text-align: center;
        font-family: "Soviet", sans-serif;
    }




    .invite-photo {
        width: 500px;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        margin: 15px 0;
    }

    .invite-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .main {
        background-color: #2c2c2c;
        color: white;
        padding: 100px 0;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;

    }

    .main .photo3 {
        max-height: 600px;
        width: 100%;
        margin-bottom: 100px;
        object-fit: cover;
        object-position: center;
    }


    .dear {
        font-size: 30px;
        text-align: center;
        margin-bottom: 50px;
    }


    .no-fonts {
        font-family: "Soviet", sans-serif;
        color: #4d4b4b;
        position: absolute;
        bottom: -32px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 160px;
        font-weight: bold;

    }


    .program, .presence, .location, .dresscode, .wishes {
        padding: 50px 0 0 0;
    }

    .location-title, .timout-title, .program-title, .dresscode-title, .wishes-title, .organizer-title,
    .presence-title {
        text-align: center;
        font-size: 85px;
        margin-bottom: 20px;
        font-family: "Soviet", sans-serif;
    }

    .program {
        overflow: hidden;
    }
    .program .container {
      max-width: none;
    }
    .program-title {
        margin-bottom: 50px;
    }
    .timeline {
       padding-left: 20px;
        padding-right: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 0;
        margin-bottom: 50px;
        margin-top: 30px;
    }

    .event {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 25px;
        gap: 0;

    }
    .event-info-one {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-weight: bold;
    }
    .event-info-one .name {
        white-space: nowrap;
    }
    .event-image svg{
        width: 100px;
        height: 100px;
    }
    .event .text {
        text-align: center;
    }


    .location {

        padding-bottom: 50px;

    }

    .location-info {
        text-align: center;
        font-size: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
.location-image {
    width: 500px;
    height: 500px;

    overflow: hidden;
    margin-bottom: 30px;
}

.location-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

    .location-address  {
        font-size: 30px;
        margin-bottom: 20px;
    }
    .location iframe {
        margin-top: 20px;
    }




    .dresscode .container {
        /*position: relative;*/

    }

    .dresscode {
        position: relative;
        padding-bottom: 100px;
        background-color: #2c2c2c;
        color: white;
    }

    .dresscode-people {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-top: 50px;
    }
    .dresscode-woman, .dresscode-man {
        background-color: white;
        color: #2c2c2c;
        width: 500px;
        height: 400px;
        padding: 20px;
    }
    .dresscode-info {
        text-align: center;
        font-size: 40px;
        display: flex;
        margin-top: 20px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .dresscode-info-blocks, .dresscode-info-blocks-two {
        margin-top: 25px;
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: center;

    }

    .man, .woman {
        font-weight: bold;
        margin-bottom: 20px;
    }
    .woman-text, .man-text {
        font-size: 28px;
    }

    .dresscode-info-block {

        width: 80px;
        height: 80px;
        border-radius: 50%;
        opacity: 0;
        transform: translateX(-20px);
        transition: opacity 0.8s ease-in-out, transform 1.5s ease-in-out;


    }

    .dresscode-info-block.one {

        background-color: #e3ecfa;
    }

    .dresscode-info-block.two {

        background-color: #d3b5ab;
    }

    .dresscode-info-block.three {

        background-color: #cfdaac;
    }

    .dresscode-info-block.four {

        background-color: #e3e2e2;
    }

    .dresscode-info-block.five {

        background-color: #868585;
    }

    .dresscode-info-block.six {

        background-color: #000000;
    }

    .dresscode-info-block.active {
        opacity: 1;
        transform: translateX(0);
    }


    /*.dresscode-info-blocks, .dresscode-info-blocks-two {*/
    /*    opacity: 0;*/
    /*    transform: translateX(-20px);*/
    /*    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;*/
    /*}*/

    /*.dresscode-info-block:nth-child(1) { transition-delay: 0.2s; }*/
    /*.dresscode-info-block:nth-child(2) { transition-delay: 0.4s; }*/
    /*.dresscode-info-block:nth-child(3) { transition-delay: 0.6s; }*/
    /*.dresscode-info-block:nth-child(4) { transition-delay: 0.8s; }*/
    /*.dresscode-info-block:nth-child(5) { transition-delay: 1s; }*/
    /*.dresscode-info-block:nth-child(6) { transition-delay: 1.2s; }*/

    /*.dresscode-info-blocks.active .dresscode-info-block {*/
    /*    opacity: 1;*/
    /*    transform: translateX(0);*/
    /*}*/

    .wishes .container {
        position: relative;

    }

    .wishes-wed {
        position: absolute;
        top: 40%;
        left: -22%;
        rotate: 270deg;
        font-family: "Book Antiqua", sans-serif;
        text-transform: uppercase;
        font-size: 85px;
        color: white;
    }

    .wishes-text {
        font-size: 40px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        text-align: left;
        margin-top: 20px;
    }

    .shoose, .konvert, .vino {
        background: #f8f8f8;
        padding: 15px;
        border-radius: 10px;
    }

    .vino {
        grid-column: span 2;
    / / Занимает две колонки text-align: center;
    }


    .presence {
        padding-bottom: 50px;
    }

    .presence .container {
        position: relative;

    }

    .presence-text {
        text-align: center;
        font-size: 40px;
        margin-bottom: 30px;
        margin-top: 20px;
    }

    .wedding-form * {
        box-sizing: border-box;
    }

    .wedding-form {
        max-width: 700px;
        margin: 0 auto;
        padding: 20px;
        font-size: 30px;
        font-family: "Cormorant Infant", sans-serif;

        fieldset {
            margin: 0 0 15px 0;
            padding: 0;
            border: none;
        }

        legend {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }

        label {
            display: block;
            margin: 5px 0;
        }

        input[type="text"],
        textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid black;
            border-radius: 5px;
            font-size: 16px;
            background-color: white;
        }

        .wedding-form input[type="radio"],
        .wedding-form input[type="checkbox"],
        textarea {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        textarea {
            min-height: 100px;
        }

        button {
            -webkit-appearance: none; /* Убирает дефолтные стили в Safari */
            -moz-appearance: none; /* Для Firefox */
            appearance: none; /* Общий сброс */
            background: white;
            width: 100%;
            padding: 10px;
            border: 1px solid black;
            color: black;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;

            &:hover {
                background: gray;
            }

            &:focus {
                outline: none; /* Убирает синюю рамку при фокусе */
            }
        }
    }

    @supports (-webkit-appearance: none) {
        .wedding-form {
            max-width: 700px;
            margin: 0 auto;
            padding: 20px;
            font-size: 30px;
            font-family: "Cormorant Infant", sans-serif;
        }

        fieldset {
            border: none !important;
            padding: 0;
        }

        legend {
            font-weight: bold;
            margin-bottom: 5px;
        }

        label {
            display: block;
            margin: 5px 0;
        }

        input[type="text"],
        textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid black;
            border-radius: 5px;
            font-size: 16px;
            background-color: white;
        }

        textarea {
            min-height: 100px;
        }

        button {
            -webkit-appearance: none; /* Убирает дефолтные стили в Safari */
            -moz-appearance: none; /* Для Firefox */
            appearance: none; /* Общий сброс */
            background: white;
            width: 100%;
            padding: 10px;
            border: 1px solid black;
            color: black;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;

            &:hover {
                background: gray;
            }

            &:focus {
                outline: none; /* Убирает синюю рамку при фокусе */
            }
        }
    }


    .timout {
        padding: 50px 0;
        background-color: #2c2c2c;
        color: white;
    }

    .timout-title {
        font-size: 60px;
        text-align: center;
        white-space: nowrap;
    }

    #countdown {
        display: flex;
        justify-content: center;
        gap: 0px;
    }

    .time-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15px;
        text-align: center;

    }

    .time-box span {
        font-size: 32px;
        font-weight: bold;
        line-height: 1;
    }

    .time-box p {
        margin: 5px 0 0;
        font-size: 14px;
        text-transform: uppercase;
        opacity: 0.8;
        font-weight: bold;
    }