/**
 * Newsletter Styles
 * 
 * Styling for the newsletter section and form
 */

.newsletter {
    &.offsetTop {
        margin-top: -5.6rem;
        @media (min-width: 992px) {
            margin-top: -9.6rem;
        }
    }
    .container {
        padding-right: 0;
        .newsletter-content {
            h2.newsletter-title  {
                text-wrap: wrap;
                word-wrap:break-word;
                white-space: normal;
                font-size: 3.2rem;
                line-height: 3.8rem;
                /* display: inline-block; */
                max-width: 75%;
                color: white;

                border-bottom: 2px solid var(--color-white);
                padding-bottom: 1.4rem;
                margin-bottom: 2.4rem;
                @media (min-width: 992px) {
                    font-size: 4.8rem;
                    line-height: 5.4rem;
                }
            }
            padding-top: var(--spacing-lg);
            padding-right: var(--spacing-lg);
            color: var(--color-white);
            padding-bottom: var(--spacing-lg);
            .newsletter-description {
                margin-bottom: var(--spacing-lg);
            }
        }
    }

    @media (min-width: 992px) {
        min-height: 46rem;
        display: flex;
        align-items: center;
        position: relative;
        .newsletter-content {
            position: relative;
            .h2.newsletter-title  {
                font-size: 4.8rem;
                line-height: 5.4rem;
            }
            .newsletter-header, .newsletter-form {
                max-width: 65%;
            }
        }
    }
        
    .newsletter-image {
        max-width: 14rem;
        position: relative;
        float: right;
        margin-top: -6rem;
        @media (min-width: 992px) {
            margin-top: -8rem;
            max-width: 42rem !important;
            float: none;
            position: absolute;
            right: 0;
            width: 100%;
        }
    }

    
}

/* Newsletter form */
#gform_fields_1 {
    row-gap: 2.4rem !important;
 }

#gform_fields_1 button.gform-button {
    font-family: var(--sans) !important;
    display: inline-block !important;
    border-radius: 100px !important;
    font-size: 1.6rem !important;
    line-height: 4.8rem !important;
    padding: 0 3rem 0 3rem !important;
    text-decoration: none !important;
    text-align: center !important;
    font-optical-sizing: auto !important;
    font-weight: 500 !important;
    font-style: normal !important;
    color: var(--color-white) !important;
    background-color: var(--color-garnet) !important;
    transition: background-color 0.3s, color 0.3s !important;
    position: relative !important;
    width: 100% !important;
    appearance: none !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease-out !important;
    &:hover, &:active {
        color: var(--color-white) !important;
        background-color: var(--color-garnet-hover) !important;
    }
    span {
            display: inline-block;
            position: relative;
            padding-right: 2.4rem;
            &::after {
                content: '\e000';
                font-family: "Font Awesome Kit";
                font-weight: 400;
                font-size: 2.1rem;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                margin-left: 0.4rem;
                position: absolute;
                transform: translateX(20%);
                transition: 0.15s ease-out;
            }
            &:hover {
                text-decoration: none !important;
                &::after {
                    transform: translateX(0.7rem);
                }
            }
        
    }
    @media (min-width: 992px) {
        display: inline-block !important;
        text-align: left !important;
        width: auto !important;
    }    
}

#gform_fields_1 input[type=email] {
    appearance: none !important;
    font-size: 1.6rem !important;
    line-height: 4.8rem !important;
    border: 1px solid var(--color-btn-white-active) !important;
    border-radius: 0.8rem !important;
    block-size: auto !important;
}