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


:root{
    --light-grey: #efefef;
    --light-grey2: #f8f8f8;
    --grey: #898989;
    --white: #ffffff;
}



*{
    font-family: 'Montserrat', 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    transition: 0.3s ease;
    text-decoration: none;
    list-style: none;
    scroll-behavior: smooth;
}


a:visited, a:link{
    color: inherit;
}


html{
    font-size: 62.5%;
    scroll-padding-top: 9rem;
    scroll-behavior: smooth;
    background-color: var(--light-grey);
    overflow-x: hidden !important;
}

::-webkit-scrollbar {
    width: 0;
    background: transparent;
}



/* Header */

header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100dvw;
    overflow-x: hidden !important;
}


header .headerContainer{
    display: flex;
    background-color: rgba(255, 255, 255, .75);
    backdrop-filter: blur(calc(.2vw + .2vh + .2vmin));
    box-shadow: 2px 4px 16px #00000029;
    border-radius: calc(2vw + 2vh + 2vmin);
    justify-content: space-between;
    align-items: center;
    width: 75%;
    height: calc(4vw + 4vh + 1vmin);
    margin: calc(1.5vw + 1.5vh + 1vmin) auto;
    padding: 0rem calc(1.5vw + 1.5vh + 1vmin);
    z-index: 1000;
}

header .headerContainer .logo{
    display: flex;
}

header .headerContainer .logo img{
    width: calc(1.5vw + 1.5vh + 1vmin);
}


header .headerContainer .menu{
    cursor: pointer;
    width: calc(2vw + 2vh + 1vmin);
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: calc(.2vw + .2vh + .1vmin);
    justify-items: end;
}


header .headerContainer .menu .hamBars{
    border-radius: calc(2vw + 2vh + 1vmin);
    height: calc(.3vw + .3vh + .2vmin);
}

header .headerContainer .menu hr:nth-child(1){
    background-color: #178578;
}

header .headerContainer .menu hr:nth-child(2){
    background-color: #167578;
}

header .headerContainer .menu hr:nth-child(3){
    background-color: #156477;
}

.menuItems{
    position: fixed;
    display: flex;

    width: calc(15vw + 15vh);
    right: 20%;
    top: calc(5.5vw + 5.5vh + 2vmin);
    margin-left: auto;

    background-color: rgba(255, 255, 255, .75);
    backdrop-filter: blur(calc(.2vw + .2vh + .2vmin));
    border-radius: 0 0 calc(2vw + 2vh + 2vmin) calc(2vw + 2vh + 2vmin);
    box-shadow: inset 0px 4px 6px 0px rgba(0,0,0,0.2);

    transform: scaleY(0);
    transform-origin: top right;
    z-index: 10001;
}

.menuItems .items{
    position: relative;
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;
    padding: calc(.5vw + .5vh + 1vmin);

    font-size: calc(1vw + 1vh + .1vmin);
    text-align: left;
    font-weight: 300;
}

.menuItems .items > *{
    padding: 2% 0;
}

.menuItems .items .social{
    display: flex;
    flex-direction: row;
}

.menuItems .items .social a{
    padding: calc(1vw + 1vh + 1vmin) 5% 0 5%;
}

.menuItems hr {
    width: 80%;
    height: 0px;

    border: none;
    border-bottom: 1px solid black;
}


/* Main */

@keyframes appear{
    0%{
        transform: scale(0.5);
        opacity: 0;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes appear1{
    0%{
        transform: scale(0.5) translate(-50dvw, -10dvh);
        opacity: 0;
    }
    100%{
        transform: scale(1) translate(0rem, 0rem);
        opacity: 1;
    }
}

body{
    max-width: 100vw;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--light-grey);
}

main{
    width: 100dvw;
    height: 100%;
    margin-top: 10dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main .heroSection{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100dvw;
    height: 90dvh;
}

main .heroSection .heroContainer{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 50%;
    margin: auto;
}

main .heroSection .heroContainer h1{
    text-align: center;
    font-size: calc(1.5vw + 1.5vh + 2vmin);
    inline-size: auto;
}

main .heroSection .heroContainer p{
    font-size: calc(1vw + 1vh + .1vmin);
    letter-spacing: -.05rem;
    text-align: center;
    margin: 2% auto;
    font-weight: 300;
}


main .heroSection .heroContainer a{
    text-align: center;
    margin: 2% auto;
    z-index: 3;
}

main .heroSection .heroContainer .button{
    font-size: calc(1vw + 1vh + .1vmin);
    font-weight: 600;
    background-color: var(--white);
    border: .2rem solid var(--grey);
    border-radius: 5rem;
    padding: calc(.5vw + .5vh + .2vmin) calc(3vw + 3vh + 2vmin);
}




main .heroSection .heroContainer i{
    cursor: pointer;
    text-align: center;
    font-size: calc(3vw + 3vh + .1vmin);
    font-weight: 200;
    z-index: 3;
}



main .boxes {
    position: absolute;
    top: 30dvh;
    left: 0;
    display: flex;
    width: 100dvw;
    height: 70dvh;
}

main .boxes .boxSvg{
    position: absolute;
    left: 0;
    bottom: 0;
    min-width: 100%;
    max-width: 110%;
    height: calc(30vw + 10vh);
    z-index: 1;
    background-image: url('../images/box.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
}

main .boxes .cover{
    position: absolute;
    left: 0;    
    bottom: 0;
    width: 100%;
    height: 30%;
    background: rgb(239,239,239);
    background: linear-gradient(180deg, rgba(239,239,239,1) 0%, rgba(137,137,137,1) 50%, rgba(0,0,0,1) 100%);
    filter: opacity(.2);
    z-index: 1;
}







main .tutorialSection{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(6vw + 4vh + 1vmin);
    width: 100dvw;
    height: 100%;
    z-index: 2;
}

main .tutorialSection .tutorialContainer{
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 100%;
    text-align: center;
    font-size: calc(.8vw + 1.5vh + .1vmin);
    font-weight: 600;
}

main .tutorialSection .tutorialContainer .row1{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-content: center;
    align-items: center;
    padding: calc(1vw + 1vh + 1vmin) 0;
    margin: auto;
    gap: 2rem;
    width: 100%;
    height: 100%;
}

main .tutorialSection .tutorialContainer .row1 .col{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: calc(1vw + 1vh + 1vmin) calc(1vw + 1vh + 1vmin);
    margin: auto 0;
    height: 100%;
    background-color: var(--white);
    border-radius: calc(1vw + 1vh + 1vmin);

    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
    transform-origin: bottom left;
}

main .tutorialSection .tutorialContainer .row1 .frame{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    padding-bottom: calc(1vw + 1vh + 1vmin);
    aspect-ratio: 1;
    width: 80%;
}

main .tutorialSection .tutorialContainer .row1 iframe{
    aspect-ratio: 1;
    width: 100%;
}

main .tutorialSection .tutorialContainer .row2{
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--white);
    border-radius: calc(1vw + 1vh + 1vmin);

    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

main .tutorialSection .tutorialContainer .row2 p{
    padding: calc(1vw + 1vh + 1vmin) 0;
}

main .tutorialSection .tutorialContainer .row2 .left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: calc(1vw + 1vh + 1vmin);

    background-image: url('../images/confetti.png');
    background-repeat: no-repeat;
    background-position: left;
    background-size: cover;
}

main .tutorialSection .tutorialContainer .row2 .right{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-image: url('../images/confetti1.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
    border-radius: calc(1vw + 1vh + 1vmin);
}





main .faqSection{
    margin-top: calc(6vw + 6vh + 3vmin);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100dvw;
    height: 100%;
}

main .faqSection .faqContainer{
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    gap: calc(1vw + 1vh + 1vmin);
    width: 80%;
    height: 100%;
    text-align: center;
    font-size: calc(1vw + 1vh + .1vmin);

}

main .faqSection .faqContainer .question{
    position: relative;
    z-index: 2;
    border-radius: calc(2vw + 2vh + 1vmin);

    cursor: pointer;

    animation: appear1 linear;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;

    transition: all .6s ease;
}

main .faqContainer .questionContent{
    background-color: var(--white);
    
    border-radius: calc(2vw + 2vh + 1vmin);

    text-align: left;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: calc(1.2vw + 1.2vh + .1vmin) calc(1.5vw + 1.5vh + .1vmin);

    z-index: 4;

}
 

main .faqSection .faqContainer .answer{
    text-align: left;
    text-indent: 2dvw;
    color: rgba(0, 0, 0, .5);

    background-color: rgba(248, 248, 248, 1);
    border-radius: 0 0 calc(2vw + 2vh + 1vmin) calc(2vw + 2vh + 1vmin);

    padding: calc(2vw + 2vh + .1vmin) calc(2vw + 2vh + 1vmin) calc(1.2vw + 1.2vh + .1vmin) calc(2vw + 2vh + 1vmin);
    line-height: 1.6;
    letter-spacing: calc(-.5vw -.5vh - .5vmin);
    z-index: -1;

    transform-origin: top;
    transition: font-size .1s ease, transform .6s ease;
}



main .faqSection .faqContainer .active{
    transform: scaleY(1);
    font-size: calc(1vw + 1vh + .1vmin);
    top: calc(-1.2vw - 1.2vh - 1vmin);
    position: relative;
}

main .faqSection .faqContainer .deactive{
    transform: scaleY(0);
    font-size: 0;
    top: calc(2vw + 2vh + 1vmin);
    position: absolute;
}









main .contactSection{
    margin-top: calc(5vw + 10vh + 5vmin);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 2;
}

main .contactSection .contactContainer{
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: calc(1vw + 1vh + .1vmin);
    width: 80%;
    height: 100%;
    text-align: center;
    font-size: calc(1vw + 1vh + .1vmin);
    font-weight: 400;
    line-height: 1;
}

main .contactSection .contactContainer .mailContainer{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: auto;
    width: 100%;
    height: 100%;
    font-size: calc(2vw + 2vh + .5vmin);
}

main .contactSection .contactContainer .mailContainer input{
    width: 100%;
    height: calc(3vw + 3vh + 2vmin);
    padding: calc(1.2vw + 1.2vh + .1vmin) calc(.9vw + .9vh + .1vmin);
    border-radius: calc(1.2vw + 1.2vh + .1vmin);
    font-size: calc(.9vw + .9vh + .1vmin);
    font-weight: 400;
    text-indent: calc(1.5vw + 1.5vh + .1vmin);
    margin-right: calc(.9vw + .9vh + .1vmin);
}

main .contactSection .contactContainer .mailContainer i{
    cursor: pointer;
    background-color: var(--white);
    padding: calc(.8vw + .8vh + .1vmin) calc(1.2vw + 1.2vh + .1vmin);
    border-radius: calc(1.2vw + 1.2vh + .1vmin);
    font-weight: 900;
    /* cursor: pointer; */
}

main .contactSection .contactContainer .mailContainer .error{
    color: #eb0000;
}



main .contactSection .contactContainer p{
    width: 100%;
    margin: calc(.8vw + .8vh + .1vmin) auto;
    padding-left: calc(1.5vw + 1.5vh + .1vmin);
    text-align: left;
    font-size: calc(.9vw + .9vh + .1vmin);
    font-weight: 700;
}


main .contactSection .contactContainer p span{
    font-size: calc(.8vw + .8vh + .1vmin);
    font-weight: 200;
}


/* Footer */


footer{
    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 1000;
    bottom: 0;
    margin-top: calc(4vw + 4vh + 2vmin);;
    width: 100%;
    padding: calc(1vw + 1vh + 1vmin);
    background-color: var(--white);

    border-radius: calc(1vw + 1vh + 1vmin) calc(1vw + 1vh + 1vmin) 0 0;
}

footer .footerContainer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    height: 100%;
    font-size: calc(.6vw + .6vh + 1vmin);
}

footer .footerContainer .social{
    font-size: calc(1.2vw + 1.2vh + 1vmin);
}

footer .footerContainer .logo img{
    width: calc(1.8vw + 1.8vh + 1vmin);    
}



/* 800 */

/* Media Queries */

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

    main .tutorialSection .tutorialContainer .row1{
        grid-template-columns: none;
        grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
    }

}