@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@300;600&family=Ubuntu:wght@400;500;700&display=swap');

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

:root {
    /* PRIMARY COLORS */
    --light-red-cta: hsl(356, 100%, 66%);
    --very-light-red-cta: hsl(355, 100%, 74%);
    --very-dark-blue: hsl(208, 49%, 24%);

    /* NEUTRAL COLORS */
    --white: hsl(0, 0%, 100%);
    --grayish-blue: hsl(240, 2%, 79%);
    --very-dark-grayish-blue: hsl(207, 13%, 34%);
    --very-dark-black-blue: hsl(240, 10%, 16%);

    /* GRADIENT COLORS */
    --very-light-red: hsl(13, 100%, 72%);
    --light-red: hsl(353, 100%, 62%);
    --very-dark-gray-blue: hsl(237, 17%, 21%);
    --very-dark-desaturated-blue: hsl(237, 23%, 32%);

    --fs-default: 16px;
}

body {
    min-height: 100vh;
    font-size: var(--fs-default);
    overflow-x: hidden;
}

/* HEADER STYLING */

header {
    background: url("./images/bg-pattern-intro-desktop.svg"), linear-gradient(to right, var(--very-light-red), var(--light-red));
    background-position: 25% 50%;
    background-repeat: no-repeat;
    background-size: auto;
    
    border-bottom-left-radius: 5rem;
    color: var(--white);
    font-family: "Overpass", sans-serif;
    padding: 4rem 10rem;
    text-align: center
}

header p,
header a {
    color: var(--white);
    text-decoration: none;
}

header p:hover,
header a:hover {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.header__navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__nav-menus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    width: 40%;
}

.header__tab {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.3rem;
}

.header__tab-arrow {
    width: 10px;
    height: 7px;

    transform: rotate(0deg);
    transition: transform 250ms ease;
}

.header__tab-arrow.show {
    transform: rotate(180deg);
    transition: transform 250ms ease;
}

.header__dropdown {
    display: none;
}

.header__dropdown.show {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 0.5rem;
   
    position: absolute;
    background-color: var(--white);
    border-radius: 0.5rem;
    padding: 1rem;
    min-width: 8rem;
    margin-top: 1rem;
    z-index: 1;
}

.header__dropdown a {
    color: var(--very-dark-blue);
    font-family: "Overpass", sans-serif;
}

.header__dropdown a:hover {
    font-weight: bold;
    text-decoration: none;
}

.header__nav-buttons {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.header__sign-up-button,
.header__start-button,
.header__learn-button {
    border-radius: 1.5rem;
    padding: 0.6rem 1.5rem;
    font-family: "Overpass", sans-serif;
    font-weight: 600;
    transition: 0.5s;
}

.header__sign-up-button {
    background-color: var(--white);
    color: var(--very-light-red-cta);
    border: none;
}

.header__sign-up-button:hover {
    cursor: pointer;
    background-color: var(--very-light-red-cta);
    color: var(--white);
}

.header__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem;
}

.header__info h1 {
    font-size: 3rem;
}

.header__info-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.header__start-button {
    background-color: var(--white);
    color: var(--very-light-red-cta);
    border: none;
}

.header__start-button:hover {
    cursor: pointer;
    background-color: var(--very-light-red-cta);
    color: var(--white);
}

.header__learn-button {
    background-color: var(--light-red-cta);
    color: var(--white);
    border: 1px solid var(--white);
}

.header__learn-button:hover {
    cursor: pointer;
    border: 1px solid var(--white);
    background-color: var(--white);
    color: var(--very-light-red-cta);
}

.header__hamburger-button {
    display: none;
}

.header__close-button {
    display: none;
}

.header__mobile-menu {
    display: none;
}

.header__mobile-menu.show {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    position: absolute;
    background-color: var(--white);
    padding: 1rem;
    border-radius: 0.5rem;
    right: 2rem;
    margin-top: 2rem;
}

.header__mobile-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.3rem;
}

.header__mobile-tab-text {
    color: var(--very-dark-blue);
    font-weight: bold;
}

.header__mobile-tab-text.show {
    opacity: 0.7;
}

.header__mobile-arrow {
    width: 10px;
    height: 7px;

    transform: rotate(0deg);
    transition: transform 250ms ease;
}

.header__mobile-arrow.show {
    transform: rotate(180deg);
    transition: transform 250ms ease;
}

.header__mobile-submenu {
    display: none;
}

.header__mobile-submenu.show {
    display: flex;
    flex-direction: column;
    gap: 0.5em;

    background-color: var(--grayish-blue);
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.header__mobile-submenu a {
    color: var(--very-dark-blue);
    font-weight: bold;
    opacity: 0.7;
}

.header__mobile-menu hr {
    color: var(--grayish-blue);
    width: 10rem;
}

.header__nav-mobile-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.header__nav-mobile-buttons a {
    color: var(--very-dark-blue);
    font-weight: bold;
}

.header__nav-mobile-buttons button {
    background: linear-gradient(to right, var(--very-light-red), var(--light-red));
    border: none;
    border-radius: 1.5rem;
    color: var(--white);

    cursor: pointer;
    padding: 0.6rem 1.5rem;
    font-family: "Overpass", sans-serif;
    font-weight: 600;
    width: 6rem;
}

@media screen and (max-width: 845px) {
    header {
        padding: 4rem 2rem;
    }

    .header__tab {
        display: none;
    }

    .header__nav-buttons {
        display: none;
    }

    .header__hamburger-button {
        display: block;
        cursor: pointer;
    }

    .header__hamburger-button.hide {
        display: none;
    }

    .header__close-button.show {
        display: block;
        cursor: pointer;
    }
}

/* ARTICLE ONE STYLING */

#article-one {
    background-color: var(--white);
    color: var(--very-dark-grayish-blue);
    font-family: "Overpass", sans-serif;

    padding: 8rem;
    margin-top: 4rem;
    margin-bottom: 10rem;
    line-height: 2rem;
}

#article-one h2 {
    text-align: center;
    margin-bottom: 5rem;
    font-size: 2rem;
}

#article-one h2,
#article-one h3 {
    color: var(--very-dark-blue);
}

#article-one section h3 {
    margin-bottom: 2rem;
    font-size: 1.5rem;
}

.article-one__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.article-one__image {
    position: absolute;
    right: -250px;
}

.article-one__article-text {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    width: 50%;
}

@media screen and (max-width: 1250px) {
    #article-one {
        margin: 0;
        margin-bottom: 15rem;
        padding: 4rem 2rem; 
    }

    #article-one h2 {
        margin-bottom: 2rem;
    }

    .article-one__container {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .article-one__image {
        position: static;
    }

    .article-one section h3 {
        margin-bottom: 1rem;
    }

    .article-one__article-text {
        text-align: center;
        gap: 2rem;
        width: auto;
    }
}

/* ARTICLE TWO STYLING */

#article-two {
    background: url("./images/bg-pattern-circles.svg"), linear-gradient(to right, var(--very-dark-gray-blue), var(--very-dark-desaturated-blue));
    background-repeat: no-repeat;
    background-position: -30% 85%;
    background-size: auto;
    color: var(--white);
    font-family: "Overpass", sans-serif;

    padding: 6rem 8rem;
    line-height: 2rem;
    border-top-right-radius: 5rem;
    border-bottom-left-radius: 5rem;
}

.article-two__container {
    display: flex;
    align-items: center;
}

#article-two img {
    position: absolute;
    left: 50px;
}

#article-two section {
    margin-left: auto;
    width: 50%;
}

#article-two h2 {
    margin-bottom: 2rem;
    font-size: 2rem;
}

@media screen and (max-width: 1250px) {
    #article-two {
        position: relative;
        padding: 8rem 2rem;
        background-position: 50% 100%;
    }

    .article-two__container {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        margin-top: 10rem;
    }

    #article-two img {    
        position: absolute;
        left: initial;
        top: -250px;
    }

    #article-two section {
        margin: 0;
        width: auto;
    }
}

/* ARTICLE THREE STYLING */

#article-three {
    background-color: var(--white);
    color: var(--very-dark-grayish-blue);
    font-family: "Overpass", sans-serif;

    padding: 8rem;
    line-height: 2rem;
    margin-top: 10rem;
    margin-bottom: 10rem;
}

#article-three h3 {
    color: var(--very-dark-blue);
    margin-bottom: 2rem;
    font-size: 1.5rem;
}

.article-three__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.article-three__image {
    position: absolute;
    left: -280px;
}

.article-three__article-text {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    width: 50%;
    margin-left: auto;
}

@media screen and (max-width: 1250px) {
    #article-three {
        padding: 4rem 2rem;
        margin: 0;
    }

    #article-three h3 {
        margin-bottom: 1rem;
    }

    .article-three__container {
        flex-direction: column;
        justify-content: flex-start;
    }

    .article-three__image {
        position: static;
    }

    .article-three__article-text {
        gap: 2rem;
        width: auto;
        margin: 0;
        text-align: center;
    }
}

/* FOOTER STYLING */

footer {
    background-color: var(--very-dark-black-blue);
    color: var(--white);
    font-family: "Overpass", sans-serif;
    border-top-right-radius: 5rem;

    padding: 5rem 20rem 5rem 10rem;
}

footer a {
    text-decoration: none;
    color: var(--white);
}

footer a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.footer__navbar {
    display: flex;
    justify-content: space-between;
}

footer img {
    width: 101px;
    height: 40px;
}

.footer__links p {
    font-weight: bold;
    margin-bottom: 1rem;
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media screen and (max-width: 845px) {
    footer {
        padding: 4rem;
    }

    .footer__navbar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4rem;
    }
}