@font-face {
    font-family: 'GT Sectra';
    src:
        url('../fonts/GT Sectra/GT-Sectra-Book.woff2') format('woff2'),
        url('../fonts/GT Sectra/GT-Sectra-Book.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: var(--color-brown);
}

.container {
    width: 85%;
    margin: auto;
}

.apply-texture-bg {
    position: relative;
    background-image: url('../images/bg-texture.webp');
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    background-position: center;
    background-attachment: fixed;

    @media (hover: none) and (pointer: coarse) {
        background-image: none;
        isolation: isolate;

        &::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100lvh;
            z-index: -1;
            pointer-events: none;
            background: url('../images/bg-texture.webp') center / 100% 100% no-repeat;
        }
    }
}

.floating-elements {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.floating-element {
    display: none;
    position: absolute;
    height: auto;
    pointer-events: none;
    opacity: 0.5;

    @media (min-width: 960px) {
        display: block;
    }
}

.bg-sash {
    content: '';
    position: absolute;
    top: 0;
    left: 96%;
    width: 340%;
    height: 320px;
    z-index: 0;
    transform: translate(-50%, -14%) rotate(-45deg);

    &.bg-sash-brown {
        background-color: var(--color-brown);
    }

    &.bg-sash-red {
        background-color: var(--color-red);
    }
}

.gform_wrapper {
    form {
        .gform_body {
            .gform_fields {
                row-gap: 40px;
                .gfield {
                    label,
                    .gfield_label,
                    .gform-field-label__text {
                        font-family: var(--font-lapture);
                        font-weight: 400;
                        font-size: 1.125rem;
                        line-height: 1.4;
                        color: var(--color-yellow);

                        @media (min-width: 960px) {
                            font-size: 1.25rem;
                        }
                    }

                    .ginput_container {
                        width: 100%;
                    }

                    input,
                    select,
                    textarea {
                        appearance: none !important;
                        border-radius: 0 !important;
                        background-color: var(--color-brown);
                        border: 1px solid var(--color-olive);
                        color: var(--color-yellow);
                        font-size: 1.25rem;
                        height: auto;
                        font-family: var(--font-lapture);
                        padding: 12px!important;

                        &:focus {
                            outline-color: var(--color-olive);
                        }

                        &::placeholder {
                            color: var(--color-yellow);
                            font-size: 1.5rem;
                        }
                    }

                    .gform_drop_area {
                        background-color: var(--color-brown);
                        border: 1px solid var(--color-olive);
                        border-style: dashed;

                        &:before {
                            color: var(--color-yellow);
                        }

                        .gform_button_select_files {
                            border-radius: 0;
                            background-color: var(--color-yellow);
                            color: var(--color-brown);

                            &:focus {
                                outline: var(--color-red);
                            }
                        }
                    }

                    input,
                    select {
                        height: 56px;
                        align-items: center;
                    }

                    select {
                        background-image: url(../images/select-arrow.svg);
                        background-size: 22px;
                        background-repeat: no-repeat;
                        background-position: right 20px center;
                    }

                    .gfield_description {
                        color: var(--color-yellow);
                        font-size: 1rem;
                    }

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

                        input {
                            width: 44px;
                            height: 44px;
                            position: relative;

                            &:checked {
                                &:before,
                                &:after {
                                    content: '';
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    width: 26px;
                                    height: 3px;
                                    background-color: var(--color-yellow);
                                }

                                &:before {
                                    transform: translate(-50%, -50%)
                                        rotate(45deg);
                                }

                                &:after {
                                    transform: translate(-50%, -50%)
                                        rotate(-45deg);
                                }
                            }
                        }
                    }
                }
            }

            .validation_message {
                font-weight: bold !important;
            }
        }
        .gform-footer {
            margin-left: 0;

            .gform_button {
                font-family: 'trade-gothic-next', sans-serif !important;
                font-weight: 800 !important;
                font-style: normal !important;
                background-color: transparent !important;
                border-radius: 0 !important;
                font-size: 1.25rem !important;
                text-transform: uppercase !important;
                color: var(--color-red) !important;
                padding: 0 !important;
                margin: 0 !important;
                border: none!important;

                &:hover {
                    text-decoration: underline !important;
                    text-decoration-thickness: 3px !important;
                    text-underline-offset: 4px !important;
                }
            }
        }
    }

    .gform_validation_errors {
        background-color: white !important;
        border-radius: 0 !important;
    }
}

.mark {
    font-size: 0.4em;
    vertical-align: super; 
    line-height: 0;   
}