header .text-wrapper h1 {
    font-size: 65px;
    text-shadow: 0px 24px 24px rgba(0, 0, 0, 0.45);

    opacity: 0;
    transform: translateY(-10%);
    transition: all .8s;
}

header .text-wrapper h1[data-scroll="in"] {
    opacity: 1;
    transform: translateY(0);
}

header .text-wrapper p {
    width: 55%;

    opacity: 0;
    transform: translateY(-10%);
    transition: all .8s;
}

header .text-wrapper p[data-scroll="in"] {
    opacity: 1;
    transform: translateY(0);
}

header .buttons-wrapper {
    opacity: 0;
    transform: translateY(-10%);
    transition: all .8s;
}

header .buttons-wrapper[data-scroll="in"] {
    opacity: 1;
    transform: translateY(0);
}

header .buttons-wrapper a:hover {
    transform: translateY(-3px);
    box-shadow: 0px 50px 70px -30px rgba(0, 0, 0, 0.5);
}

.first {
    padding:30px 10px 110px;
    display: flex;
    flex-direction: column;
    gap: 100px;

    opacity: 0;
    transform: translateX(-10%);
    transition: all .8s;
}

.first[data-scroll="in"] {
    opacity: 1;
    transform: translateX(0);
}

.first > div {
    width: 45%;
    margin: 0 auto;
}

section.first .brand-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

section.first .brand-link div:last-of-type {
    width: 60%;
}

section.first .brand-link div:first-of-type {
    position: relative;
}

section.first .brand-link .icon-wrapper {
    width: 220px;
    height: 268px;
}

section.first .brand-link .brand-img {
    position: absolute;
}

section.first div:nth-of-type(1) .brand-link .brand-img {
    top: -15%;
    left: 50%;
    transform: translateX(-57%);
    width: 200px;
}

section.first div:nth-of-type(2) .brand-link .brand-img {
    width: 143px;
    top: -15%;
    left: 50%;
    transform: translatex(-50%);
}

section.first div:nth-of-type(3) .brand-link .brand-img {
    width: 284px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
}

section.first div:nth-of-type(4) .brand-link .brand-img {
    width: 248px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

section.first div:nth-of-type(5) .brand-link .brand-img {
    width: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -53%);
}

section.first div:nth-of-type(6) .brand-link .brand-img {
    width: 250px;
    top: 50%;
    left: 50%;
    transform: translate(-58%, -58%);
}

.first > div > .card h3 {
    font-weight: 700;
    font-size: 30px;
    line-height: 44px;
    color:white;
}
.first > div > .card p {
    margin-top: 5px;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color:white;
}

/*.first > div {
    max-width:var(--page-width);
    position:relative;
    margin: auto;
}
.first > div > .card {
    position:relative;
    padding:28px 50px 28px 350px;
    max-width:810px;
    min-height:300px;
    margin:0 auto 70px;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.first > div > .card .icon-wrapper {
    position:absolute;
    left:0;
    top:50%;
    width:300px;height:324px;
    transform:translate(0, -50%);
}
.first > div > .card .cure-mushrooms {
    position:absolute;
    left:0;
    top:50%;
    width:200px;height:260px;
    transform:translate(17%, -70%);
}
.first > div > .card .cygnet {
    position:absolute;
    left:0;
    top:50%;
    width:143px;height:275px;
    transform:translate(60%, -70%);
}
.first > div > .card .qubes {
    position:absolute;
    left:0;
    top:50%;
    width:390px;height:407px;
    transform:translate(-10%, -50%);
}
.first > div > .card .vitamedica {
    position:absolute;
    left:0;
    top:50%;
    width:248px;height:208px;
    transform:translate(10%, -60%);
}
.first > div > .card .moonwlkr {
    position:absolute;
    left:0;
    top:50%;
    width:241px;height:264px;
    transform:translate(10%, -65%);
}

.first > div > .card h3 {
    font-weight: 700;
    font-size: 30px;
    line-height: 44px;
    color:white;
}
.first > div > .card p {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color:white;
}*/

@media screen and (max-width: 1440px) {
    .first > div {
        width: 55%;
    }
}

@media screen and (max-width: 1024px) {

    .first {
        gap: 130px;
    }

    section.first .brand-link {
        flex-direction: column;
        gap: 30px;
    }

    section.first .brand-link div:last-of-type {
        width: 80%;
        text-align: center;
    }

    section.huge-button .big-button {
        width:90%;
    }
}

@media screen and (max-width:900px) {
    .first {
        padding-bottom: 150px;
    }
}

@media screen and (max-width: 600px) {
    header {
        height: 110%;
    }

    main {
        padding-top: 60px;
    }

    .first {
        padding-bottom: 0;
        gap: 100px;
    }

    .first > div {
        width: 90%;
    }

    section.first .brand-link .icon-wrapper {
        width: 180px;
    }

    section.first .brand-link {
        gap: 0;
    }

    section.first div:nth-of-type(1) .brand-link .brand-img {
        width: 150px;
        top: 5%;
    }

    section.first div:nth-of-type(2) .brand-link .brand-img {
        width: 110px;
    }

    section.first div:nth-of-type(3) .brand-link .brand-img {
        width: 200px;
        top: 50%;
    }

    section.first div:nth-of-type(4) .brand-link .brand-img {
        top: 50%;
        width: 180px;
    }

    section.first div:nth-of-type(5) .brand-link .brand-img {
        top: 50%;
        width: 120px;
    }

    section.first div:nth-of-type(6) .brand-link .brand-img {
        top: 50%;
        width: 180px;
    }

    section.huge-button {
        padding: 110px 10px;
    }

    section.huge-button .big-button {
        min-height: 100%;
        padding: 50px;
    }

    section.huge-button .big-button h2 {
        font-size: 40px;
        line-height: 60px;
    }

    .button.button-terciary {
        width: 100%;
    }
}

@media screen and (max-width: 414px) {

    header {
        height: 95%;
    }

    header .text-wrapper p {
        width: 90%;
    }

    .first > div > .card p {
        margin-top: 10px;
    }

    section.huge-button .big-button h2 {
        font-size: 35px;
    }

    .first > div > .card.card {
        gap: 20px;
    }
}