:root{

    --main-color:#0084FF;
    --second-color:#033764;
    --third-color:#FFF;

    scroll-behavior: smooth;
}

*{
    box-sizing: border-box; border:none; outline:none;
    font-family: sans-serif; bottom: 0;margin: 0;right: 0;left: 0; padding: 0; font-family:'tommy', sans-serif; position:relative;
}
button{
    cursor:pointer;
}
img{
    max-width:100%;
}
ul{
    list-style:none;
}
a{
    text-decoration: none;
    color:var(--second-color);
}
@font-face {
    font-family: 'tommy';
    src: url(font_family/tommyR.otf);
}

@font-face {
    font-family: 'tommyL';
    src: url(font_family/tommyL.otf);
}
/*CABEÇALHO*/

header{
    margin-bottom: 4em;
}
.nav-menu{
    display:flex;
    justify-content: space-between;
    background-color: rgba(255,255,255,.255);
    backdrop-filter:blur(10px);
    box-shadow: 0px 2px 4px rgba(0,0,0,0.08);
    height:80px;
    width:100%;
    position: sticky;
    top: 0;
    z-index: 1;
}

.nav-menu .logo-text{
    display:inline-flex;
}
.logo-text img{
    width:109px;
    height:109px;
    top:-17px;
}

.logo-text .text{
    margin-left: -29px;
    display:flex;
    top:1.5rem;
    color:var(--second-color);
}

.menu-options{
    display:flex;
    top:2rem;
    margin-right: 20px;
}


.menu-options span{
    color:var(--second-color);
    margin-left: 28px;
}

.menubutton,.side-menu{
    display:none;
}

.menuclosebutton{
    display:none;
}

/*HEADER*/

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

.box .welcome-text{
    top:200px;
    left:250px;
}

.welcome-text .highlight{
    color:var(--second-color);
}

.welcome-text .above-text{
    color:var(--second-color);
    font-family:'tommyL';
}


.welcome-text h1{
    font-size:3rem;
    color:var(--main-color);
}

.circle{
    position:absolute;
    left: -269px;
    top: 80px;
    width: 438px;
    height: 438px;
    background: linear-gradient(135deg, #45ffcd 0%, #0084ff 100%);
    border-radius: 100%;
}

.device-img{
    top:130px;
    margin-right: 40px;
}


.device-img img{
    width:626px;
    height:359,4px;
}


/*O QUE VOCÊ PROCURA*/

.services-option{
    top:10rem;
}

.services-option .title,
.title{
    top:5em;
    margin-bottom: 15rem;
    display:flex;
    justify-content: center;
    color:var(--second-color);
    font-family: 'tommyL';
}

.grid .square,
.square{
    width: 300px;
    height: 335px;
    border-radius: 20px;
    background: #ffffff;
    background-blend-mode: normal;
    box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
}

.squarelist1,.squarelist2{
    display:flex;
    justify-content: space-evenly;
    margin-bottom: 5rem;
}

.grid{
    display:block;
}

.square{
    padding:13px;
}

.square-title{
    color:var(--second-color);
    font-family:'tommyL';
    font-size:20px;
    font-weight:300;
}

.square img{
bottom: -9rem;
left:10rem;
width:44px;
height:44px;
}

#last-img{
    bottom: -12rem;
}

/* SOBRE NÓS */

.sobrenos .title{
    top:15rem;
    margin-bottom: 20em;
}

.sobrenos .text-about p{
    color:var(--second-color);
    font-family:'tommyL';
    font-size:22px;
}

.sobrenos .box{
    display:flex;
    justify-content:space-evenly;
}

.sobrenos .brand-img img{
    top:-70px;
    width:300px;
    height:300px;
}

/* FOOTER */

footer{
    margin-top: 15em;
    padding:30px;
    border-top:1px solid #D8D8D8 ;
}

footer .block-title{
    display: block;
}


footer .block-title .title{
    font-family:'tommy';
    margin-bottom: 5rem;
}

.block-title .subtitle{
    letter-spacing:10px;
    font-weight:100;
}

.block-title .social-icons{
    top: 5em;
    display:flex;
    justify-content: center;
}

.block-title .social-icons img{
    margin-left: 20px;
    width: 34px;
    height: 34px;
}

footer .footer-options{
    top: 10em;
}

.footer-options div{
    padding:18px;
    border-top:1px solid #D8D8D8;
}

.footer-options div{
    display:flex;
}

.footer-options div img{
    left:1090px;
}

.footer-options .opc3 img{
    left:1080px;
}

.footer-options div img:hover{
    transition:1s;
    transform:translateX(13px);
}


.footer-options div h3{
    color:var(--second-color);
    font-family:'tommyL';
}

/*MOBILE*/

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

    .menu-options,.device-img,.menuclosebutton{
        display: none;
    }

    .menubutton{
        display:flex;
    }

    .menubutton,.menuclosebutton{
        background:transparent;
        border: none;
        outline:none;
        cursor: pointer;
        width: 44px;
        height: 44px;
        margin: 1rem 2rem auto auto;
    }
   
    .side-menu{
        height: 40px;
        min-width:fit-content;
        background-color: var(--second-color);
        display: flex;
        justify-content: center;
        z-index: 1;
        position: fixed;
        border-bottom-left-radius: 2rem;
        border-bottom-right-radius: 2rem;
        margin-bottom: 0;
        top: 10%;
    }

    .side-menu ul li{
        display: inline-flex;
        color: var(--third-color);
        margin: 8px auto;
        font-size: 16px;
   }

   .side-menu{
       opacity: 0;
   }
    
   

   /*HEADER*/

   .box .welcome-text{
    top:190px;
    left:75px;
}


.welcome-text h1{
    font-size:1.80rem;
    color:var(--main-color);
}

.circle{
    left: -373px;
    top: 70px;

}

/*O QUE VOCE PROCURA*/

.services-option .title,
.title{
    top:7em;
    margin-bottom: 18rem;
}

.grid .square,
.square{
    width: 260px;
    height: 300px;
    margin: 0 auto 1.50rem auto;
}

.squarelist1,.squarelist2{
    display:block;
    margin-bottom: 5rem;
}


/*SOBRE NÓS*/

.sobrenos .title{
    top:15rem;
    margin-bottom: 15em;
}

.sobrenos .text-about p{
    font-size:18px;
    margin: auto 2rem;
    text-align: left;
}

.sobrenos .box{
    display:block;
}

.sobrenos .brand-img img{
    top:-70px;
    width:300px;
    height:300px;
    display: flex;
    margin: 0 auto;
}

/*FOOTER*/

footer{
    margin-top: 4em;
    padding:20px;
    border-top:1px solid #D8D8D8 ;
}

footer .block-title{
    display: block;
}


footer .block-title .title{
    font-family:'tommy';
    margin-bottom: 6rem;
}

.block-title .subtitle{
    letter-spacing:5px;
    font-weight:100;
    margin-top: 110px;
}

.block-title .social-icons{
    top: 3em;
    display:flex;
    justify-content: center;
}

.block-title .social-icons img{
    margin-left: 15px;
}

footer .footer-options{
    top: 10em;
}

.footer-options div{
    padding:18px;
    border-top:1px solid #D8D8D8;
}

.footer-options div{
    display:flex;
}

.footer-options div img{
    left:58px;
}
.footer-options .opc1 img{
    left:67px;
}
.footer-options .opc3 img{
    left:46px;
}

.footer-options div img:hover{
    transition:1s;
    transform:translateX(13px);
}


.footer-options div h3{
    color:var(--second-color);
    font-family:'tommyL';
}

}