/*========== IMPORT ==========*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500&display=swap');

/*========== RESET ==========*/
* {padding: 0; margin: 0; border: none; outline: none; box-sizing: border-box; font-family: 'Inter', sans-serif; color: #222;}
html {scroll-behavior: smooth;}

/*========== CONTAINER ==========*/
.margem {position: relative; float: left; width: 100%; padding: 115px 30px;}
.acima-titulo {position: relative; float: left; width: 100%; text-align: center; font-weight: 400; font-size: 20px;}
.titulo {position: relative; float: left; width: 100%; text-align: center; font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 52px; color: #005b80;}

/*========== TOPO ==========*/
header {position: fixed; width: 100%; background-color: rgba(10, 10, 10, 0.9); box-shadow: 0px 3px 10px #111; z-index: 999 !important;}
.nav-bar {display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0.6rem 2rem;}
.logo {display: flex; align-items: center;}
.nav-list {display: none;}
.nav-list ul {display: flex; justify-content: center; list-style: none;}
.nav-item {margin: 0 15px;}
.nav-link {text-decoration: none; font-size: 1.15rem; color: #fff; font-weight: 400;}
.login-button {display: none;}
.login-button button {border: none; background-color: #55cf61; padding: 18px 30px; border-radius: 5px; cursor: pointer; transition: 0.3s ease-out;}
.login-button button:hover {background-color: #5fd46d;}
.login-button button a {text-decoration: none; color: #fff; font-weight: 500; font-size: 1.1rem;}
.mobile-menu-icon {display: flex; align-items: center;}
.mobile-menu-icon button {background-color: transparent; border: none; cursor: pointer;}
.mobile-menu {display: none;}
.mobile-menu ul {display: flex; flex-direction: column; text-align: center; padding-bottom: 1rem;}
.mobile-menu .nav-item {display: block; padding-top: 1.2rem;}
.mobile-menu .login-button {display: block; padding: 1rem 2rem;}
.mobile-menu .login-button button {width: 100%;}
.open {display: block;}

/*========== BANNER ==========*/
.banner {position: relative; width: 100%; height: 800px; padding: 30px; background-image: url("../img/banner.jpg"); background-color: #cccccc; background-size: cover; background-position: center; top: 0; z-index: 99;}
.banner h1 {position: relative; text-align: center; padding-top: 210px; font-family: 'Oswald', sans-serif; color: #fff; font-size: 25px; font-weight: 400;}
.banner h2 {position: relative; text-align: center;	padding-top: 25px; font-family: 'Oswald', sans-serif; color: #fff; font-size: 60px;}
.banner p {position: relative; text-align: center; padding-top: 40px; padding-bottom: 40px; color: #fff; font-size: 18px; font-weight: 300;}
.banner a {text-decoration: none;}
.btn-banner {position: relative; width: 200px; padding: 18px 30px; border-radius: 5px; background-color: #005b80; color: #fff; text-align: center; font-weight: 500; margin: 0 auto; cursor: pointer; transition: 0.3s ease-out;}
.btn-banner:hover {background-color: #fff; color: #005b80;}

/*========== SERVIÇOS ==========*/
#servicos {position: relative; float: left; width: 100%; background-color: #fff;}
.servicos-base {position: relative; float: left; width: 340px; left: 50%; margin-left: -170px;}
.servico-item {position: relative; float: left; width: 320px; padding: 60px 25px; margin: 10px; box-sizing: border-box; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05); transition: 0.3s ease-out;}
.servico-item:hover {box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);}
.servico-img {position: relative; float: left; width: 50px; height: 45px; margin-top: 5px; text-align: center;}
.servico-img i {font-size: 40px; color: #005b80;}
.servico-nome {position: relative; float: left; width: 205px; margin-bottom: 15px; margin-left: 15px; font-family: 'Oswald', sans-serif; font-size: 22px; color: #005b80;}
.servico-desc {position: relative; float: left; width: 205px; margin-left: 65px; font-size: 18px; font-weight: 300;}

/*========== PORTFOLIO ==========*/
#portfolio {position: relative; float: left; width: 100%; background-color: #f8f8f8;}
.portfolio-base {position: relative; float: left; width: 340px; left: 50%; margin-left: -170px;}
.portfolio-item {position: relative; float: left; width: 320px; height: 240px; margin: 10px;}
.portfolio-img {position: relative; float: left; width: 320px; height: 168px; background-color: #000; transition: 0.3s ease-out; margin-bottom: 10px;}
.portfolio-item img {position: relative; float: left; width: 100%; background-color: #000; transition: 0.3s ease-out;}
.portfolio-nome {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center;}
.portfolio-nome a {text-decoration: none; font-weight: 700; color: #005b80;}
.portfolio-item img:hover {width: 100%; opacity: 0.8; transition: 0.3s ease-out;}

/*========== CONTATO ==========*/
#contato {position: relative; float: left; width: 100%; text-align: center; font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 300; background-color: #fff;}
#contato h1 {margin-bottom: 50px;}
.botoes-contato {position: relative; float: left; width: 200px; left: 50%; margin-left: -100px; margin-top: 30px;}
.botao {position: relative; float: left; width: 70px; height: 70px; margin-left: 20px;}
.formulario {position: relative; float: left; width: 100%; margin-top: 20px; line-height: 26px;}
input, select {width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #005b80;}
.enviar input {width: 240px; padding: 14px; color: #fff; font-size: 18px; font-weight: 500; background-color: #005b80; text-transform: uppercase; cursor: pointer; transition: 0.3s ease-out;}
.enviar input:hover {color: #ffffff; background-color: #0072a0;}
.celular {position: relative; float: left; width: 100%; margin-bottom: 17px;}

/*========== RODAPÉ ==========*/
footer {position: relative; float: left; box-sizing: border-box; width: 100%; padding: 30px 10px; color: #fff; text-align: center; background-color: #005b80;}

/* SMALL DEVICES - TABLETS */
@media screen and (min-width: 768px) {
.margem {width: 600px; left: 50%; margin-left: -300px; padding: 115px 30px;}

.servicos-base, .portfolio-base {width: 380px; margin-left: -190px; padding-top: 30px;}
.servico-item {width: 360px;}

.portfolio-item {width: 360px; height: 253px;}
.portfolio-img {width: 360px; height: 189px;}
}

/* MEDIUM DEVICES - TABLETS & DESKTOPS */
@media screen and (min-width: 960px) {
.margem {width: 820px; margin-left: -410px;}
.formulario {width: 600px; left: 50%; margin-left: -300px;}

.nav-bar {padding: 5px 30px;}
.logo {display: flex; align-items: center;}
.nav-item {margin: 0 15px;}
.nav-list {display: flex; align-items: center;}
.nav-link {text-decoration: none; font-size: 1.15rem; color: #fff; font-weight: 400;}
.login-button {display: flex; align-items: center;}
.login-button button {border: none; background-color: #55cf61; padding: 18px 30px; border-radius: 5px; cursor: pointer; transition: 0.3s ease-out;}
.login-button button:hover {background-color: #5fd46d;}
.login-button button a {text-decoration: none; color: #fff; font-weight: 500; font-size: 1.1rem;}
.mobile-menu-icon {display: none;}
.mobile-menu {display: none;}
}

/* LARGE DEVICES - WIDE SCREENS */
@media screen and (min-width: 1280px) {
.margem {width: 1200px; margin-left: -600px;}
.banner h1 {padding-top: 230px; font-size: 32px;}
.banner h2 {font-size: 80px;}
.servicos-base, .portfolio-base {width: 100%; padding-top: 30px; left: 0; margin-left: 0;}
}

/* UXGA */
@media screen and (min-width: 1600px) {
}