@media screen and (min-width: 1280px){
    header .container img.logo{
        width: 12rem;
    }
    header .container .main nav.desktop{
        display: flex;
    }
    header .container .main img.mobile-button{
        display: none;
    }
    header .container nav.mobile{
        display: none;
    }
    


    section.home{
        display: flex;
        position: relative;
        height: 80vh;
        margin: 25vh 10vw 0;
    }
    section.home .text{
        width: 40%;
    }
    section.home .text img{
        display: block;
    }
    section.home .text h1{
        font-size: 3rem;
        text-align: left;
    }
    section.home .text p.subtitle{
        text-align: left;
        margin-top: 2rem;
    }
    section.home .text a.button{
        font-size: 1rem;
        margin: 2rem 0 0;
    }
    section.home img.main{
        position: absolute;
        margin-top: 0;
        width: 45vw;
        top: 0;
        right: 0;
        transform: translateX(0);
        z-index: -1;
    }



    section.video{
        height: 100vh;
    }
    section.video img.bg-object{
        display: block;
    }
    section.video iframe{
        width: 80%;
        height: 80%;
        position: relative;
    }



    section.services .row{
        flex-direction: row;
        margin-bottom: 8rem;
        justify-content: center;
        gap: 2rem;
    }
    section.services .row .card{
        width: 18%;
        margin: 0;
    }
    section.services .row .card .text{
        bottom: -6rem;
    }
    section.services .row .card .text p.title{
        height: 6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    section.services .row .card .text p.description{
        height: 5rem;
    }
    section.services .wrapper{
        width: fit-content;
        flex-direction: row;
        border-radius: 100px;
        justify-content: space-between;
        padding: 0 0 0 5rem;
        justify-content: center;
        align-items: center;
        gap: 5rem;
    }
    section.services .wrapper a{
        padding-inline: 5rem;
    }



    section.courses h2{
        font-size: 3rem;
    }
    section.courses .row{
        flex-direction: row;
        justify-content: center;
    }
    section.courses .portfolio{
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 4rem;
    }



    section.about{
        flex-direction: row;
    }
    section.about img.main{
        order: 0;
        width: 30%;
        height: 100%;  
    }
    section.about .text{
        width: 30%;
    }
    section.about .text h2{
        text-align: left;
    }



    section.card{
        height: 60vh;
        position: relative;
    }
    section.card h2{
        font-size: 6rem;
    }
    section.card h3{
        font-size: 3.9rem;
    }
    section.card p.paragraph{
        font-size: 1.2rem;
        text-align: left;
        width: 80%;
        margin: 2rem auto 0;
    }
    section.card p.bold{
        margin-top: 0;
    }
    section.card .wrapper{
        position: absolute;
        bottom: -2rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 4rem;
        padding: 1rem 0 1rem 4rem;
        margin-inline: auto;
        width: 80%;

        background-color: #FFFFFF;
    }
    section.card .wrapper p{
        text-align: left;
        width: 40%;
        text-align: justify;
        font-size: 1.3rem;
    }
    section.card .wrapper img{
        width: 20vw;
        right: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}





@media screen and (min-width: 1920px){
    section.home .text h1{
        font-size: 4rem;
    }



    section.card p.paragraph{
        margin: 4rem auto 0;
        width: 53%;
    }
    section.card p.bold{
        margin-top: 0;
    }
    section.card .wrapper{
        justify-content: center;
    }
    section.card .wrapper p{
        width: 100%;
        margin:  0 30vw 0 8vw;
    }
}





@media screen and (max-width: 1280px){
    section.forms .wrapper{
        padding: 1rem;
        flex-direction: column;
        border-radius: 20px;
        height: fit-content;
    }
    section.forms .wrapper .text{
        width: 100%;
    }
    section.forms .wrapper .text h2{
        font-size: 2rem;
    }
    section.forms .wrapper .text p.subtitle{
        margin-block: 1rem;
    }
    section.forms form{
        width: 100%;
    }



    footer .wrapper{
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
    footer nav{
        width: 100%;
        margin-top: 2rem;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        text-align: center;
    }
}



@media (max-width: 768px) {
    section.home img.main {
        transform: none;
    }
}