:root {
    --soft-red: hsl(0, 93%, 68%);
    --desaturated-red: hsl(0, 36%, 70%);
    --dark-grayish-red: hsl(0, 6%, 24%);
    --gradient-start: hsl(0, 80%, 86%);
    --gradient-end: hsl(0, 74%, 74%);
    --font: "Josefin Sans", sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    font-size: 16px;
    background: linear-gradient(135deg, #fff, hsl(0, 100%, 98%));
    color: var(--dark-grayish-red);
    min-height: 100vh;
}

.container {
    display: flex;
    flex-direction: column-reverse;
}

.content {
    padding: 2rem;
    text-align: center;
    background-image: url("images/bg-pattern-desktop.svg");
    background-size: cover;
    background-position: center;
}

.logo {
    margin-bottom: 2rem;
}

h1 {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 2.5rem;
    letter-spacing: 8px;
    margin-bottom: 1rem;
}

h1 span {
    font-weight: 300;
    color: var(--desaturated-red);
}

p {
    color: var(--desaturated-red);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

form {
    position: relative;
}

.input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--desaturated-red);
    border-radius: 50px;
    overflow: hidden;
    padding: 0 1rem;
}

input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.75rem 0.5rem;
    font-size: 1rem;
    color: var(--dark-grayish-red);
}

input::placeholder {
    color: var(--desaturated-red);
}

button {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 50px;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

button:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.error-icon {
    display: none;
    width: 20px;
    margin-left: 0.5rem;
}

.error-text {
    display: none;
    color: var(--soft-red);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    text-align: left;
}

.input-wrapper.error {
    border: 2px solid var(--soft-red);
}
.hero {
    display: none;
}

.hero-mobile {
    flex: 13%;
    background-image: url("images/hero-mobile.jpg");
    background-size: cover;
    height: 30vh;
}

.content {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.call-to-action {
    margin-top: 70px;
    padding-left: 20px;
    padding-right: 20px;
}
button {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border: none;
    padding: 0.75rem 1.25rem;
    height: 55px;
    cursor: pointer;
    width: 77px;
    transition: box-shadow 0.3s ease;
}

.input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--desaturated-red);
    border-radius: 50px;
    overflow: hidden;
    padding: 0 1rem;
    padding-right: 0;
}
input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.75rem 0.5rem;
    font-size: 1rem;
    color: var(--dark-grayish-red);
    background: inherit;
}

@media (min-width: 768px) {
    .container {
        flex-direction: row;
        height: 100vh;
    }

    .content {
        flex: 51%;
        text-align: left;
        padding: 5rem;
    }

    .email-form button {
        border: none;
        background: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));
        padding: 1rem 1.5rem;
        border-radius: 50px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: box-shadow 0.3s ease;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    .content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: baseline;
        justify-content: center;
        height: 100%;
        width: 55%;
        padding-left: 100px;
    }

    .hero {
        display: block;
        flex: 13%;
        background-image: url("images/hero-desktop.jpg");
        background-size: cover;
        height: auto;
        background-repeat: no-repeat;
        min-width: 750px;
        max-width: 924px;
    }

    .hero-mobile {
        display: none;
    }

    .input-wrapper {
        display: flex;
        align-items: center;
        border: 1px solid var(--desaturated-red);
        border-radius: 50px;
        overflow: hidden;
        padding: 0 1rem;
        padding-right: 0;
    }

    h1 {
        font-size: 5rem;
        letter-spacing: 20px;
        line-height: 87px;
    }

    button {
        background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
        border: none;
        padding: 0.75rem 1.25rem;
        height: 55px;
        cursor: pointer;
        width: 103px;
        transition: box-shadow 0.3s ease;
    }

    input {
        flex: 1;
        border: none;
        outline: none;
        padding: 0.75rem 0.5rem;
        font-size: 1rem;
        color: var(--dark-grayish-red);
        background: inherit;
    }

    .call-to-action {
        width: 449px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        height: 100%;
        margin-top: 0;
    }
}