@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

a{
    text-decoration: none;
}

*{

    margin: 0;
    padding: 0;
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: "Open Sans", serif;
    min-width: 100vw;
    width: 100vw;
    overflow-x: hidden;
    justify-content: center;
    align-items: center;
    
}

#inicio{
    top: -1px;
    left: 1px;
    position: absolute;
}

nav{
    z-index: 20;
    position: fixed;
    display: grid;
    grid-template-columns: 10% 90%;
    width: 95vw;
    height: 40px;
    top: 5px;
    left: 50%;
    transform: translatex(-50%);
    backdrop-filter: blur(5px);
    background-color: #f3f3f3c0;
    border-radius: 30px;
    align-items: center;
    box-shadow: black 0px 0px 3px;
}

.logo{
    align-content: center;
}

.logo img{
    padding-left: 20px;
    height: 40px;
}

nav ul{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: right;
    align-items: center ;
}

nav li{
    list-style: none;
    margin-left: 25px;
    margin-right: 25px;
}

nav a{
    font-weight: 500;
    font-size: 1.23rem;
    color: #0083b7;
}

nav a:hover{
    color: rgb(0, 65, 90);
    transition: .5s;
}

/*----------------------------------------*/

.btn-whatsapp{
    display: flex;
    position: fixed;
    right: 10px;
    bottom: 35px;
    align-items: center;
    z-index: 19;

    cursor: pointer;
    color: #0083b7;
    height: auto;
    width: auto;
}

.btn-whatsapp img{
    width: 50px;
    margin: 10px;
    transition: .5s ease;
    filter: drop-shadow(#25d366 0px 0px 3px);
}

.btn-whatsapp{
    padding: 30px;
}

.btn-whatsapp img:hover{
    transform: scale(1.2);
}


/*-------------------------------------------------------------*/

#section1{

    height: 100%;
    width: 100vw;
    background-image: url(https://images.pexels.com/photos/442150/pexels-photo-442150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
    background-size: cover;

}

.subsection1{
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #0083b7;
    height: 100%;
    width: 100vw;
    display: grid;
    grid-template-columns: 3fr 1fr;
}

.subsection1-title{
    grid-column: span 2;
    height: 80px;
    margin: 50px auto;
    align-content: center;
}

.subsection1-title h1{
    color: white;
    font-size: 2.5rem;
    font-weight: 100;
}

.subsection1-subtitle{
    height: 100%;
    width: 100%;
    align-content: center; /*vertical*/
    justify-items: right; /*horizontal*/
    margin: 0 auto;
    text-align: center;

}

.subsection1-subtitle p{
    color: white;
    width: 550px;
    font-size: 1.2rem;
    text-align: justify;
    margin: 50px;
}

.subsection1-img{
    margin: 50px;
    text-align: left;
    height: 100%;
    align-content: center;
    width: 33vw;
    
}

.subsection1 img{
    width: 20vw;
}


/*----------------------------------*/



.subsection2{
    height: 360px;
    width: 100%;
    display: flex;
    justify-content: center;


}

.sss{
    border-radius: 10px;
    background-color: white;
    height: 220px;
    width: 340px;
    margin: auto;
    box-shadow: black 0 0 8px;
}


.sst{
    width: 100%;
    background-color: #0083b7;
    border-radius: 10px 10px 0 0;
    color: white;
    text-align: center;
    margin-bottom: 15px;
}

.sss p{
    text-align: center;
    color: #0083b7;
    height: 100%;
}


/*-----------------------------------------*/


#section2{
    height: 100%;
    background: linear-gradient(90deg, #006187, #0083b7, #0083b7);
    width: 100vw;
    text-align: center;
    justify-items: center;
    justify-content: center;
    margin: 0 auto;
}

.section2-title{
    height: 150px;
    width: 100vw;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-left: -160px;
}

.section2-title img{
    width: 160px;
}

.section2-title > h1{
    color: white;
    font-size: 2.5rem;
    font-weight: 500;
    padding-top: 2vh;
}

.services-section{
    margin: 0 auto;
    padding-bottom: 15px;
    width: 95vw;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.service{
    color: white;
    margin: 35px;
    width: 340px; 
    height: 340px;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    align-content: center;
    background-size: cover;
    transition: .5s;
}

.service:hover{
    transform: scale(1.15);

}

.service h1{
    font-weight: 400;
    text-shadow: black 0 0 5px, black 0 0 5px, black 0 0 5px, black 0 0 5px;
    height: 80px;
    padding-top: 40px;
}

.service p{
    margin: 0 auto;
    width: 95%;
    height: 120px;
    font-size: .8rem;
    font-weight: 700;
    text-shadow: black 0 0 15px,  black 0 0 15px,  black 0 0 15px,  black 0 0 15px,  black 0 0 15px;
}

.service button{
    border: none;
    background-color: #0083b7;
    border-radius: 11px;
    width: 100px;
    height: 30px;
}

.service button:hover{
    background-color: #005678;
}

.service a{
    width: 100px;
    height: 30px;
    color: white;
}


.service1{
    background-image: url(https://images.pexels.com/photos/4280696/pexels-photo-4280696.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);

}

.service2{
    background-image: url(https://images.pexels.com/photos/5474285/pexels-photo-5474285.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);

}

.service3{
    background-image: url(https://images.pexels.com/photos/1181354/pexels-photo-1181354.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);

}

.service4{
    background-image: url(https://images.pexels.com/photos/60504/security-protection-anti-virus-software-60504.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);

}

.service5{
    background-image: url(https://images.pexels.com/photos/7504896/pexels-photo-7504896.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);

}

.service6{
    background-image: url(https://images.pexels.com/photos/2977547/pexels-photo-2977547.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);

}

.service7{
    background-image: url(https://images.pexels.com/photos/19506332/pexels-photo-19506332/free-photo-of-os-telefones-ip-com-tecnologia-vo-ip-sao-excelentes-em-uso-internacional.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);

}

.service8{
    background-image: url(https://images.pexels.com/photos/12899151/pexels-photo-12899151.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);

}

.service9{
    background-image: url(https://images.pexels.com/photos/4373997/pexels-photo-4373997.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);

}


/*-----------------------------------------*/


#section3{
    height: auto;
    width: 100vw;
    justify-items: center;
    padding-top: 90px;

}

.contacts{
    height: auto;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: center; /*vertical*/
    justify-items: center; /*horizontal*/
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.contacts1{
    justify-items: center;
    text-align: center;
    justify-content: center;
    height: 700px;
    width: 500px;

}

.contacts1 h1{
    color:#0083b7;
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.contacts1 p{
    color: #0083b7;
    margin-bottom: 30px;
}

.sub-contacts1{

    width: 100%;
    text-align: center;
    margin: 0 auto;
    align-content: center;
    justify-items: center;
    color: #0083b7;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.sub-contacts1 a{
    color: #0083b7;
    font-size: 1rem;
    transition: .5s;
}

.sub-contacts1 a:hover{
    color: #005678;
}

.sub-contacts1 img{
    width: 25px;
    margin: 15px;
}

.location{
    grid-column: span 2;
    justify-content: center;
}

.map iframe{
    height: 200px;
    margin-bottom: 30px;
    margin-top: 30px;
    width: 350px;
    max-width: 650px;
}

.contacts1-footer{
    width: auto;
    height: 90px;
    color: white;
    background-color: #0083b7;
    border-radius: 20px;
    text-align: center;
    align-content: center;
    justify-items: center;
    
}


.contacts1-footer p{
    padding: 20px;
    color: white;
    height: 100%;    
}

.cell, .email, .location{
    width: 100%;
    display: flex;
    align-items: center; /*vertical*/
    align-items:  center;
    text-align: center;

    

}





/*-----------------------------------------*/
.contacts2{
    justify-items: center;
    text-align: center;
    justify-content: center;
    height: auto;
    width: 600px;

}

.contacts2 h1{
    color: #0083b7;
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.form-contacts2{
    width: 500px;
    height: 480px;
    background-color: #0083b7;
    text-align: left;
    border-radius: 10px;
}

.h31{
    padding-top: 10px;
}

.form-contacts2 h3, .form-contacts2 textarea, .form-contacts2 input{
    margin-left: 25px;
}

.form-contacts2 h3{
    font-size: 1.5rem;
    color: white;
    font-weight: 400;
    
}

.form-contacts2 #ipt{
    width: 85%;
    height: 50px;
    border-radius: 10px;
    outline: none;
    border: none;
    padding-left: 15px;
    font-size: 1.1rem;
    margin-bottom: 20px;
    transition: .4s;
}

.form-contacts2 #ipt-msg{
    width: 85%;
    height: 100px;
    border-radius: 10px;
    outline: none;
    border: none;
    padding-left: 15px;
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding-top: 5px;
    resize: none;
    transition: .4s;
}

.form-contacts2 #ipt-msg:hover, #ipt:hover, #ipt-msg:focus, #ipt:focus{
    background-color: rgb(214, 214, 214);
}

.contacts-btn{
    width: 100%;
    text-align: center;
}

.form-contacts2 button{

    width: 140px;
    height: 50px;
    border: none;
    background-color: #0083b7;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;

    transition: .5s;
}

.form-contacts2 button:hover{
    background-color: #005678;
    transform: scale(1.05);
    
}



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

    .services-section{
        grid-template-columns: 1fr 1fr;
    }

    .contacts{
        display: inline-block;
    }

    .contacts2, .contacts1{
        margin-top: 50px; 
        width: 90vw;
        max-width: 650px;
    }

    .form-contacts2{
        width: 90vw;
        max-width: 650px;
    }
}

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

    nav{
        width: 95vw;

    }

    .subsection1-img{
        justify-items: center;
        width: 28vw;
    }

    .subsection1-subtitle{
        justify-items: center;
    }

    .subsection1-subtitle p{

        justify-items: center;
    }

}


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

        .subsection1{
            display: inline-block;
            margin:  auto;
            justify-content: center;
        }

        .subsection1-img{
            margin: 10px auto;
            width: 100vw;
            text-align: center;
        }

        .subsection1-subtitle{
            margin: inherit auto;
            justify-content: center;
            justify-items: center;
        }

        .subsection1-subtitle p{
            margin: 10px auto;
        }

        .subsection1-img img{
            width: 200px;
            margin: 0 auto;
        }

        .section2-title{
            display: inline-block;
            width: 100vw;
            text-align: center;
            justify-content: center;
            margin: 0 auto;
        }

        .service{
            width: 300px; 
            height: 300px;
        }

        .service:hover{
            transform: scale(1);
        
        }
        
        .service h1{
            font-weight: 400;
            text-shadow: black 0 0 5px, black 0 0 5px, black 0 0 5px, black 0 0 5px;
        }
        
        .service p{
            font-size: .7rem;
            font-weight: 700;
            text-shadow: black 0 0 15px,  black 0 0 15px,  black 0 0 15px,  black 0 0 15px,  black 0 0 15px;
        }
        
        .service button:hover{
            background-color: #0083b7;
        }

        
        .contacts{
            margin: 0 auto;
            justify-content: center;
        }

        .contacts1{
            margin: 25px auto;
            justify-content: center;
        }

        .contacts2{
            margin: 25px auto;
            justify-content: center;
        }

}

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

    .service{
        width: 260px; 
        height: 280px;
        margin: 20px;
    }



    nav a{
        font-size: 1rem;
    }

    .sss{
        margin: auto 5vw;
    }
}

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

    .services-section{
        display: inline-block;
        justify-content: center;
    }

    .sss{
        margin: 35px auto;
    }

    .service{
        width: 300px; 
        height: 300px;
        margin: 20px;
        margin: 30px auto;
    }

    .section2-title{
        display: inline-block;
        margin-left: 0;
    }

    .section2-title img{
        margin-top: 25px;
    }
    
    .subsection1-subtitle p{
        width: 90vw;
    }

    .subsection2{
        display: inline-block;
        height: auto;
        justify-content: center;
        margin: inherit auto;
    }

    .contacts{
        margin: 0 auto;
        justify-content: center;
    }

    .contacts1{
        margin: 25px auto;
        justify-content: center;
    }

    .contacts2{
        margin: 25px auto;
        justify-content: center;
    }

    .cell a{
        font-size: .8rem;
    }

}

@media screen and (max-width:450px) {
    nav{
        display: none;
    }
    
}