/*
Theme Name: NAD Skin Landing Page
*/

:root {
    --font-primary: "Montserrat", sans-serif;
    --font-heading: "Rothen", sans-serif;
    --background-gradient: linear-gradient(180deg, #92B9BC 0%, #3B6D70 100%);
    --text-primary: #1D110D;
    --text-secondary: #7D6F6C;
    --nskin-blue: #92B9BC;
    --nskin-white: #FFFFFF;
    --error-red: #b60606;
}

body {
    font-family: var(--font-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

h1 {
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-primary);
    font-size: 30px;
    @media screen and (min-width: 768px) {
        font-size: 50px;
    }
}

h2 {
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    text-align: center;
    color: var(--text-primary);
    font-size: 20px;
    @media screen and (min-width: 768px) {
        font-size: 40px;
    }
}

h3 {
    font-size: 18px;
    @media screen and (min-width: 768px) {
        font-size: 20px;
    }
}

.product-price {
    font-size: 14px;
    color: var(--text-secondary);
    @media screen and (min-width: 768px) {
        font-size: 15px;
    }
}

.description {
    color: var(--text-secondary);
    text-align: center;
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    @media screen and (min-width: 768px) {
        font-size: 20px;
    }
    a {
        font-weight: 600;
        color: var(--text-secondary);
        text-decoration: none;
        font-style: italic;
    }
}

p.attribution {
    color: var(--text-secondary);
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    a {
        color: var(--text-secondary);
        font-weight: 600;
        text-decoration: none;
    }
}

main.landing-page {
    position: relative;
    background: var(--background-gradient);
    overflow: hidden;

    .waves-top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;

        @media screen and (min-width: 768px) {
            top: -200px;
        }

        @media screen and (min-width: 1200px) {
            width: 40%;
            top: 0;
        }
    }
    
    .waves-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;    
        z-index: 1;

        @media screen and (min-width: 768px) {
            bottom: -150px;
        }

        @media screen and (min-width: 1200px) {
            width: 40%;
            bottom: 0;
        }
    }

    .mobile {
        display: flex;
        position: relative;
        z-index: 2;
        @media screen and (min-width: 1200px) {
            display: none;
        }
    }

    .desktop {
        display: none;
        @media screen and (min-width: 1200px) {
            display: flex;
        }
    }

    .top-section.mobile {
        padding: 55px 0 50px 0;
    }

    .bottom-section.mobile {
        padding: 40px 0 75px 0;
    }

    .split {
        display: grid;
        align-items: center;
        
        @media screen and (min-width: 1200px) {
            grid-template-columns: 2fr 3fr;
            height: 100vh;
        }
        .left-feature {
            position: relative;
            height: 100%;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            @media screen and (min-width: 1200px) {
                display: flex;
            }
        }
        .main-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: #F5F1EB;
            width: 90%;
            max-width: 644px;
            margin: 0 auto;
            border-radius: 10px;
            padding: 36px;
            box-sizing: border-box;
            @media screen and (min-width: 1200px) {
                width: 100%;
                max-width: unset;
                height: 100%;
                border-radius: 0;
            }
            .container {
                max-width: 420px;
                margin: 0 auto;
            }
            .form-container {
                form {
                    margin-bottom: 50px;
                    .gform_fields {
                        display: flex;
                        flex-direction: column;
                        gap: 14px;
                        margin-bottom: 30px;
                    }
                    .gfield {
                        display: flex;
                        flex-direction: column;
                        gap: 6px;
                        label {
                            color: var(--text-primary);
                            font-size: 15px;
                            font-weight: 400;
                            line-height: normal;
                            .gfield_required {
                                display: none;
                            }
                        }
                        input {
                            display: flex;
                            padding: 15px;
                            align-items: center;
                            gap: 10px;
                            align-self: stretch;
                            border-radius: 3px;
                            background: var(--nskin-white);
                            border: none;
                            width: 100%;
                            height: 48px;
                            box-sizing: border-box;
                            &::placeholder {
                                color: #A2A4AB;
                                font-size: 15px;
                                font-style: normal;
                                font-weight: 400;
                                line-height: normal;
                            }
                        }
                    }
                    .gform_footer {
                        margin: 0;
                        .gform_button {
                            display: flex;
                            padding: 17px 24px;
                            justify-content: center;
                            align-items: center;
                            gap: 16px;
                            align-self: stretch;
                            border-radius: 100px;
                            background: #92B9BC;
                            border: none;
                            color: #FFF;
                            font-size: 15px;
                            font-style: normal;
                            font-weight: 700;
                            line-height: normal;
                            width: 100%;
                            transition: 0.3s;
                            cursor: pointer;
                            &:hover {
                                background: #3B6D70;
                            }
                        }
                    }
                }
            }
        }
    }

    .nad-advertisement {
        display: flex;
        flex-direction: column;
        margin: 26px 0;
        @media screen and (min-width: 1200px) {
            margin: 40px 0;
        }
        @media screen and (min-width: 1200px) {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            gap: 24px;
        }
        .left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 26px;
            .btn {
                margin: 0 auto;
            }
            svg {
                width: 172px;
                max-width: 60%;
            }
        }
        .right {
            width: 100%;
            margin-top: 40px;
            @media screen and (min-width: 1200px) {
                width: 50%;
            }
            .glide__slide {
                display: flex;
                flex-direction: column;
                text-decoration: none;
                color: inherit;
                .product-image {
                    aspect-ratio: 240 / 213;
                    width: 100%;
                    border-radius: 10px;
                    margin-bottom: 18px;
                    object-fit: cover;
                }
                h3, p {
                    margin: 0;
                    margin-bottom: 4px;
                }
            }
        }

        .glide__bullets {
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 13px;
            height: 10px;
            margin-top: 16px;
            @media screen and (min-width: 768px) {
                margin-top: 26px;
            }
            .glide__bullet {
                width: 7px;
                height: 7px;
                padding: 0;
                border-radius: 100px;
                border: none;
                background-color: var(--nskin-blue);
                opacity: .5;
                transition: all 0.3s ease;
                &.glide__bullet--active {
                    width: 10px;
                    height: 10px;
                    opacity: 1;
                }
            }
        }
    }

    .btn {
        display: flex;
        padding: 14px 16px;
        justify-content: center;
        align-items: center;
        gap: 16px;
        align-self: stretch;
        border-radius: 100px;
        background: #92B9BC;
        border: none;
        color: #FFF;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-decoration: none;
        width: fit-content;
        transition: 0.3s;
        cursor: pointer;
        &:hover {
            background: #3B6D70;
        }
    }

    .text-content {
        width: 226px;
        margin: 0 auto;
        @media screen and (max-width: 768px) {
            img {
                width: 100%;
            }
        }
        @media screen and (min-width: 768px) {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 500px;
        }
        @media screen and (min-width: 1200px) {
            width: 326px;
        }
        .title {
            color: #FFF;
            text-align: center;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
            text-transform: uppercase;
            margin: 24px 0 40px 0;
            font-size: 18px;
            letter-spacing: 4.24px;
            @media screen and (min-width: 768px) {
                letter-spacing: 6.24px;
                font-size: 24px;
            }
        }
        .coming-soon {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            align-self: stretch;
            color: #FFF;
            text-align: center;
            font-family: Rothen;
            font-style: normal;
            font-weight: 300;
            line-height: normal;
            border-radius: 8px;
            border: 1px solid #FFF;
            margin: 0;
            margin: 0 auto;
            font-size: 28px;
            padding: 14px 18px;
            @media screen and (min-width: 768px) {
                padding: 25px 42px 20px 41px;
                width: fit-content;
                font-size: 40px;
            }
            @media screen and (min-width: 1200px) {
                margin: 0 auto;
                width: 100%;
                box-sizing: border-box;
                margin-bottom: 40px;
            }
        }
    }

    .advertisement-container {
        max-width: 280px;
        width: 90%;
        margin: 0 auto;
        @media screen and (min-width: 1200px) {
            max-width: 525px;
        }
    }

    .copyright {
        color: #FFF;
        text-align: center;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin: 0 auto;
    }

    .gform_validation_errors {
        padding: 4px 10px;
        background-color: #ff00002b;
        border-radius: 7px;
        border: 1px solid var(--error-red);
        margin-bottom: 14px;
        .gform_submission_error {
            font-size: 16px;
            color: var(--error-red);
        }
    }

    input[aria-invalid="true"] {
        outline: 1px solid var(--error-red) !important;
    }

    .gfield_validation_message {
        font-size: 14px;
        color: var(--error-red);
    }

}