@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

html,
body {
    height: 100%;
    width: 100%;
}

html::selection {
    color: white;
    background-color: black;
}

section {
    width: 100%;
    background-color: #FAF4EC;
    /* height: 100%; */
}

section nav {
    padding: 1rem 2rem;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    display: flex;
}

section nav .logo {
    width: 10vw;
    height: 100%;
}

nav .links {
    font-weight: 600;
    gap: 1.3rem;
    display: flex;
    /* gap: 1rem; */
    border-radius: .5rem;
    padding: .5rem .7rem;
    background-color: #FFFFFF;
}

nav .links a {
    color: black;
    border-radius: .4rem;
    padding: .5rem .55rem;
    /* background-color: red; */
    font-size: .9rem;
    text-decoration: none;
    transition: cubic-bezier(0.19, 1, 0.22, 1);
}

nav .links a:hover {
    color: #FAF4EC;
    background-color: black;
}

nav .button {
    border-radius: .7rem;
    background-color: #FCB8FA;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem;
    display: flex;
}

nav .button p {
    color: #161616;
    font-weight: 600;
}

nav .button .emoji {
    border-radius: .5rem;
    padding: .3rem .3rem;
    background-color: #FFFEF7;
}

section .hero-text {
    width: 100%;
    padding: 5rem 3rem 1.5rem 3rem;
}

section .hero-text h1 {
    line-height: 1;
    color: #161616;
    font-size: 6rem;
}

section .hero-text p {
    margin-top: 2rem;
    font-weight: 600;
    font-size: 1.5rem;
    color: #161616;
}

section .boxes {
    padding: 3rem 2rem 3rem 2rem;
    gap: 1rem;
    display: flex;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    width: 100%;
}

section .boxes .box {
    border-radius: 2.5rem;
    background-color: #FFFEF7;
    height: 25rem;
    width: 20rem;

}

section .boxes .box1 {
    background-color: #0D8DFF;
    rotate: 10deg;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
    align-items: flex-start;
    display: flex;
}

section .boxes .box1 h1 {
    letter-spacing: -3px;
    font-size: 4.5rem;
}

section .boxes .box1 .b-text {
    flex-direction: column;
    display: flex;
    gap: .2rem;
    width: 100%;
}

section .boxes .box3 .b-text {
    flex-direction: column;
    display: flex;
    /* flex-wrap: nowrap; */
    gap: .2rem;
    width: 100%;
}

section .boxes .box1,
.box3 .b-text h3 {
    font-size: 1.5rem;
    color: #161619;
}

section .boxes .box1,
.box3 .b-text p {
    color: #161616;
    font-weight: 600;
    font-size: 1rem;
}


section .boxes .box2 {
    rotate: -10deg;
}

section .boxes .box3 {
    rotate: 17deg;
    background-color: #33C791;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
    align-items: flex-start;
    display: flex;
}

section .boxes .box3 h1 {
    font-size: 4.5rem;
    letter-spacing: -3px;
}


section .boxes .box4 {
    rotate: 7deg;
}

section .boxes .box2 video {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

section .boxes .box4 video {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

section .con-text {
    padding: 2rem 2rem;
    /* background-color: red; */
    /* margin-left: ; */
    margin-top: 3rem;
    width: 90%;
}

section .con-text p {
    width: 70%;
    padding-left: 6.99rem;
    font-weight: 700;
    font-size: 3.5rem;
}

section .con-text .three {
    margin-top: 2rem;
    /* flex-direction: column; */
    width: 100%;
    /* background-color: red; */
    justify-content: space-between;
    align-items: flex-end;
    display: flex;
}

section .con-text .three .img {
    background-size: cover;
    background-position: center;
    background-image: url(assets/6894757aa6dd3f84f6e463a2_Anniek\ Bril.webp);
    /* background-color: rebeccapurple; */
    border-radius: 1.5rem;
    height: 21rem;
    width: 16rem;
}

section .con-text .three .txt {
    width: 50%;
    /* background-color: red; */
    justify-content: flex-start;
    gap: 3px;
    align-items: flex-start;
    flex-direction: column;
    display: flex;
}

section .con-text .three .txt button {
    width: fit-content;
}

section .con-text .three .txt p {
    line-height: normal;
    text-align: start;
    font-weight: 600;
    padding-left: 0;
    /* width: 100%; */
    font-size: 1.5rem;
}

section .con-text .three .txt button {
    margin-top: 1rem;
    color: #161616;
    font-weight: 700;
    background-color: #FAF4EC;
    border: 1px solid black;
    padding: .5rem .2rem .5rem .5rem;
    font-size: 1rem;

    /* background-color: red; */
    border-radius: .7rem;
}

section .con-text .three .txt button i {
    background-color: #161616;
    border-radius: .5rem;
    padding: .5rem;
    color: white;
}

section .three .btn {
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: .7rem;
    border: 1px solid black;
    padding: .66rem;
}

section .three .btn i {
    font-size: 1.2rem;
    font-weight: 900;
    color: #FA5525;
}

.sec2 {
    height: 100%;
    width: 100%;
    padding: 5rem;
}

#main {
    width: 100%;
    height: 100%;
    background-color: #FAF4EC;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
}

#main .card {
    position: absolute;
    /* background-color: red; */
    top: 100%;
    height: 85%;
    width: 90%;
    font-size: 5rem;
    border-radius: 2.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

#main .card .left {
    padding: 2.5rem 2.5rem;
    width: 50%;
    height: 100%;
    font-size: 1rem;
    /* background-color: hotpink; */
    flex-direction: column;
    justify-content: space-between;
    display: flex;
}

#main .card .left .top-text h3 {
    font-weight: 600;
    border-radius: .4rem;
    width: fit-content;
    padding: .3rem .4rem;
    background-color: #EAE4D8;
    font-size: 1.3rem;
}

#main .card .left .top-text h1 {
    color: #161616;
    text-wrap: nowrap;
    font-size: 5.5rem;
}

#main .card .left .bottom-text {
    gap: 1rem;
    flex-direction: column;
    display: flex;
}

#main .card .left .bottom-text h3 {
    font-size: 1.66rem;
    font-weight: 600;
}

#main .card .left .bottom-text p {
    width: 70%;
    font-size: 1.2rem;
}

#main .card .left .bottom-text button {
    font-size: .88rem;
    font-weight: 700;
    color: #FFFEF7;
    background-color: #FA5424;
    border: none;
    border-radius: .5rem;
    padding: .8rem .2rem 1rem .8rem;
    width: fit-content;
}

#main .card .left .bottom-text button i {
    border-radius: .6rem;
    padding: .6rem;
    color: black;
    background-color: #FFFEF7;
}

#main .card .right {
    /* background-color: yellow; */
    width: 50%;
    padding: 3rem 2.5rem;

    flex-direction: column;
    align-items: end;
    display: flex;
    /* text-align: end; */
    height: 100%;
}

#main .card .right h1 {
    font-size: 6rem;
    color: #EAE4D8;
}

#main .card .right .video {
    /* background-color: red; */
    rotate: 3deg;
    height: 52vh;
    width: 20vw;
    border-radius: 1.6rem;
    overflow: hidden;
}

#main .card1 .right .video {
    border: 7px solid #FA5424;
}

#main .card2 .right .video {
    border: 7px solid #FAF4EC;
}

#main .card3 .right .video {
    border: 7px solid #FAF4EC;
}

#main .card4 .right .video {
    border: 7px solid #FAF4EC;
}

#main .card .right .video video {
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
}

#main .card1 {
    background-color: #FFFFFF;
    /* z-index: 99; */
}

#main .card2 {
    background-color: #FCB8FA;
}

#main .card3 {
    background-color: #33C791;
}

#main .card4 {
    background-color: #0D8DFF;
}

@media (max-width:600px) {
    nav {
        /* background-color: red; */
        padding: 2rem .5rem;
        /* gap: 2rem; */
    }

    nav .logo {
        /* background-color: red; */
        /* width: ; */
    }

    nav svg {
        height: 100%;
        width: 6rem;
        /* background-color: red; */
    }

    nav .links {
        gap: .5rem;
        display: none;
        padding: .3rem .5rem;
    }

    nav .button {
        font-size: .77rem;
        /* display: none; */
    }

    section .hero-text h1 {
        font-size: 2.5rem;
    }

    section .hero-text p {
        font-size: 1.2rem;
    }

    section .boxes {
        padding: 1rem;
        overflow: hidden;
    }

    section .boxes .box2,
    .box4 {
        display: none;
    }

    section .boxes .box1 {
        width: 13rem;
        height: 20rem;
        rotate: 12deg;
    }

    section .boxes .box1 .b-text h3 {
        font-size: 1rem;
    }

    section .boxes .box1,
    .box3 .b-text p {
        font-size: .7em;
    }

    section .boxes .box3 .b-text h3 {
        font-size: .88rem;
    }

    section .boxes .box3 {
        height: 20rem;
        width: 13rem;
        rotate: -8deg;
    }

    section .con-text {
        width: 100%;
        /* background: cadetblue; */
    }

    section .con-text p {
        padding-left: 0;
        /* text-align: start; */
        /* background-color: red; */
        font-weight: 600;
        width: 100%;
        font-size: 1rem;
    }

    .con-text .three {
        width: 100%;
        flex-direction: column;
    }

    section .con-text .three .img {
        height: 12rem;
        width: 12rem;
        /* font-size: .3rem; */
    }

    section .con-text .three .txt {
        width: 100%;
    }

    section .con-text .three .txt p {
        width: 70%;
        font-weight: 400;
        margin-top: .6rem;
        /* background-color: red; */
        text-align: end;
        font-size: .78rem;
    }

    section .con-text .three .txt button {
        font-weight: 600;
        font-size: .8rem;
    }

    section .con-text .three .btn {
        border-radius: .5rem;
        padding: .3rem;
    }

    #main .card {
        top: 100%;
        flex-direction: column-reverse;
    }

    #main .card .left {
        width: 100%;
        /* background-color: red; */
        padding: 2rem 1rem;
    }

    #main .card .left .top-text h3 {
        font-size: .8rem;
    }

    #main .card .left .top-text h1 {
        font-size: 2rem;
    }

    #main .card .left .bottom-text {
        gap: .5rem;
    }

    #main .card .left .bottom-text h3 {
        font-size: 1rem;
    }

    #main .card .left .bottom-text p {
        font-size: .7rem;
    }

    #main .card .left .bottom-text button {
        font-size: .7rem;
        padding: .5rem .5rem;
        /* margin-left: 1rem; */
    }

    #main .card .left .bottom-text button i {
        margin-left: .3rem;
        padding: .3rem;
    }

    #main .card .right {
        padding: 2rem 2rem;
        /* background: cadetblue; */
        width: 100%;
    }

    #main .card .right h1 {
        font-size: 3rem;
    }

    #main .card .right .video {
        width: 40vw;
        height: 30vh;
    }

}