/* GLOBALS */

:root {
    --background: #8156C4;
}

.podiapp__content p,
.podiapp__content span,
.podiapp__content h2,
.podiapp__content h3 {
    font-family: "Inter", sans-serif;
    color: var(--grey-dark);
}

.podiapp__content h3 {
    font-size: 2.734rem;
    line-height: 3.8rem;
}

.podiapp__content h2,
.simplify__text h3 {
    font-size: 4.272rem;
    line-height: 5.2rem;
}

@media (max-width: 900px) {
    .podiapp__content h2,
    .simplify__text h3 {
        font-size: 3.4rem;
        line-height: 4.2rem;
    }
}

@media (max-width: 500px) {
    .podiapp__content h2,
    .simplify__text h3 {
        font-size: 3rem;
        line-height: 4rem;
    }
}

.button {
    display: inline-block;
    background-color: var(--primary-green);
    padding: 1.5rem 3rem;
    border-radius: 3rem;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--white);
    font-size: 1.38rem;
}

.podiapp__content p {
    font-size: 1.75rem;
}

@media (max-width: 500px) {
    .podiapp__content p {
        font-size: 1.6rem;
    }
}

.header--text,
.podiapp__content h3 {
    margin-bottom: 3rem;
}

.header--text span {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 104.3%;
    letter-spacing: 0.385em;
    text-transform: uppercase;
}

.text--white {
    color: var(--white) !important;
}

.text--green {
    color: var(--primary-green) !important;
}

.text--strong {
    font-weight: 700;
}

.image--radius {
    max-width: 19.4rem;
    border-radius: 50%;
} 

@media (max-width: 560px) {
    .image--radius {
        max-width: 15rem;
    }
}

@media (max-width: 425px) {
    .image--radius {
        max-width: 12rem;
    }
}

.about__content,
.declaration,
.explanation,
.goals,
.simplify,
.webmania-declaration {
    display: flex;
    gap: 6.5rem;
    align-items: center;
    justify-content: center;
}

.banner-text__content p:first-of-type,
.explanation__text p:first-of-type,
.goals__text p:first-of-type,
.simplify__text p:first-of-type,
.simplify__text p:last-of-type {
    margin-bottom: 3rem;
}

/* HERO */

.hero {
    padding: 7rem 0 0;
    background-color: var(--background); 
    position: relative;
    height: 68.5rem;
}

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

.hero__text {
    display: flex;
    flex-direction: column;
    gap: 7.7rem;
    justify-content: center;
    max-width: 50rem;
    padding: 12.4rem 0;
}

.hero__text .header--text {
    margin-bottom: 0;
}

.hero__text span {
    display: block;
    margin-bottom: 6.6rem;
}

.hero__logo img {
    max-width: 43.2rem;
}

.hero__image {
    position: absolute;
    bottom: 0;
    right: -10rem;
    width: 55%;
}

.hero__image img {
    height: 67rem;
    width: auto;
}

@media (max-width: 1888px) {
    .hero__image img {
        height: auto;
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .hero__content {
        align-items: center;
    }

    .hero__image {
        bottom: initial;
    }
}

@media (max-width: 900px) {
    .hero {
        height: auto;
    }

    .hero__content {
        justify-content: center;
    }

    .hero__image {
        display: none;
    }

    .hero__text {
        text-align: center;
        width: 75%;
    }
}

@media (max-width: 500px) {
    .hero__text {
        width: 100%;
    }
}

/* ABOUT */

.about__banner {
    display: block;
    margin: 8.8rem 0 10rem;
}

.about__content img {
    width: 45%;
    height: 449px;
    object-fit: cover;
}

.about--texts p {
    margin-bottom: 2.5rem;
}

@media (max-width: 768px) {
    .about__content {
        flex-direction: column-reverse;
    }

    .about__text {
        text-align: center;
        width: 75%;
    }

    .about__content img {
        width: 58%;
        height: auto;
    }
}

@media (max-width: 500px) {
    .about__text {
        width: 100%;
    }
}

/* DECLARATION */

.declaration {
    padding: 8.8rem 0 11.2rem;
    justify-content: space-between;
}

.declaration__text {
    width: 38%;
}

.declaration__image {
    display: flex;
    align-items: center;
    position: relative;
    width: 45%;
}

.declaration__image .small--image {
    position: absolute;
    left: -13rem;
    border: 0.8rem solid var(--white);
}

@media (max-width: 777px) {
    .declaration__text {
        width: 45%;
    }

    .declaration__image .small--image {
        left: -10rem;
    }
}

@media (max-width: 768px) {
    .declaration {
        flex-direction: column;
    }

    .declaration__text {
        width: 75%;
        text-align: center;
    }

    .declaration__image {
        width: 58%;
        right: -3rem;
    }
}

@media (max-width: 500px) {
    .declaration__text {
        width: 100%;
    }
}

@media (max-width: 475px) {
    .big--image {
        width: 115%;
    }
}

/* BANNER TEXT */

.banner-text {
    padding: 0 0 14.6rem;
}

.banner-text__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner-text__content p {
    text-align: center;
    width: 100%;
}

.banner-text__content .text-first-banner:first-of-type {
    max-width: 90rem;
}

.banner-text__content .text-second-banner:first-of-type {
    max-width: 67rem;
}

.banner-text__content p:last-of-type {
    font-size: 2.734rem;
    max-width: 80rem;
}

@media (max-width: 768px) {
    .banner-text__content {
        width: 75%;
        margin: 0 auto;
    }

    .banner-text__content p:last-of-type {
        font-size: 2.2rem;
    }
}

@media (max-width: 500px) {
    .banner-text__content{
        width: 100%;
    }
}

/* EXPLANATION */

.explanation, 
.simplify {
    padding: 0 0 16.6rem;
}

.explanation__text {
    width: 40%;
}

.explanation__text h3 {
    max-width: 26rem;
}

@media (max-width: 635px) {
    .explanation__text h3 {
        max-width: 100%;
    }
}

/* GOALS */

.goals {
    padding: 0 0 21rem;
}

.goals__text {
    width: 45%;
}

.goals__image img {
    height: 490px;
    object-fit: cover;
}

@media (max-width: 900px) {
    .goals {
        flex-direction: column;
        padding: 0 0 15rem;
    }

    .goals__text, 
    .goals__image {
        text-align: center;
    }

    .goals__image img {
        height: auto;
        width: 80%;
    }
}

/* SIMPLIFY */

.simplify__text {
    width: 33%;
}

.simplify__text p:first-of-type {
    width: 97%;
}

.explanation__image img,
.simplify__image img {
    height: 400px;
    object-fit: cover;
}

@media (max-width: 900px) {
    .explanation__text,
    .goals__text,
    .simplify__text {
        width: 75%;
    }

    .simplify__text p:first-of-type {
        width: 100%;
    }

    .simplify__image,
    .explanation__image {
        height: auto;
        margin-left: -20rem;
    }

    .simplify__image img,
    .explanation__image img {
        height: auto;
    }
}

@media (max-width: 635px) {
    .simplify__image,
    .explanation__image {
        margin-left: 0;
        text-align: center;
    }

    .explanation__image img,
    .simplify__image img,
    .about__content img {
        width: 80%;
    }
}

@media (max-width: 500px) {
    .explanation__text,
    .goals__text,
    .simplify__text {
        width: 100%;
    }
}

/* WEBMANIA DECLARATION */

.webmania-declaration {
    padding: 0 0 15.3rem;
    justify-content: center;
    align-items: flex-end;
}

.webmania-declaration__first-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 3.6rem;
    width: 39%;
}

.webmania-declaration__second-column {
    width: 42%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 48rem;
}

.webmania-declaration__second-column .text--green {
    font-size: 3.418rem;
    line-height: normal !important;
    margin-bottom: 3rem;
}

@media (max-width: 900px) {
    .webmania-declaration__second-column .text--green {
        font-size: 2.6rem;
    }

    .webmania-declaration__first-column {
        width: 42%;
    }
}

@media (max-width: 635px) {
    .explanation,
    .simplify,
    .webmania-declaration {
        flex-direction: column-reverse;
    }

    .webmania-declaration__second-column {
        height: auto;
    }

    .explanation__text,
    .simplify__text,
    .webmania-declaration__first-column,
    .webmania-declaration__second-column {
        text-align: center;
        align-items: center;
    }

    .webmania-declaration__first-column,
    .webmania-declaration__second-column {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 475px) {
    .webmania-declaration__second-column .text--green {
        font-size: 2.4rem;
    }
}