* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
}

/*Custom Scrollbar*/
/* personalizar a barra em geral, aqui estou definindo 10px de largura para a barra vertical
e 10px de altura para a barra horizontal */
::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}

/* aqui é para personalizar o fundo da barra, neste caso estou colocando um fundo cinza escuro*/
::-webkit-scrollbar-track {
    background: var(--primary);
}

/* aqui é a alça da barra, que demonstra a altura que você está na página
estou colocando uma cor azul clara nela*/
::-webkit-scrollbar-thumb {
    background: var(--secundary);
}

/*End Custom Scrollbar*/

html, body {
    height: 100%;
}

:root {
    --primary: #00276e;
    --secundary: #003dad;
    --third: #0059ff;
    --four: #a3c3ff;
    --light: #ffffff;
    --dark: #000000;
}

.title {
    font-size: 35px;
    font-weight: 700;
}

.subtitle {
    font-size: 18px;
    font-weight: 300;
    font-style: italic;
}

/*Header*/

header {
    width: 100%;
    height: 100px;
    max-height: 100px;
    color: #000;
    background-color: transparent;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    transition: 1s;
}

header.fixed {
    background-color: var(--light) !important;
}

.logo {
    transition: 1s;
}

header.fixed a {
    color: var(--primary) !important;
}

header .brand {
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
}

header img {
    width: 150px;
    max-width: 100%;
    max-height: 100px;
    height: auto;
}

.navbar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-content: flex-end;
}

.navbar ul {
    display: flex;
    list-style: none;
    margin-top: 30px;    
}

.nav-item,
.nav-social {
    height: 100%;
    display: flex;
    align-items: center;
    align-content: center;
}
.nav-link {
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--light);
    text-transform: uppercase;
    padding: 5px 10px;
    transition: 250ms ease-in;
}

.nav-link i {
    display: none;
}

.nav-link:hover {
    color: var(--third);
    font-size: 17px;
    font-weight: 800;
    transition: 250ms ease-in;
}

.nav-icon {
    color: var(--light);
    padding: 5px;
    transition: 250ms ease-in;
}

.nav-icon i {
    font-size: 20px;
}

.toggle {
    display: none;
}

/*Banner Topo*/
.banner-topo {
    height: 100vh;
    background-image: url('../img/banner-3.jpg');
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    width: 100%;
}

#top-content {
    color: var(--light);
    padding: 50px 2%;
}

#top-content h1 {
    font-weight: 700;
}

#top-content p {
    font-size: 20px;
    font-weight: 500;
}

#top-content a {
    text-decoration: none;
    font-size: 22px;
    color: var(--dark);
    padding: 10px 30px;
    transition: 250ms ease-in;
    background-color: var(--light);
    font-weight: 700;
    letter-spacing: 1px;
}

#top-content a:hover {
    color: var(--dark);
    background-color: var(--light);
}

/*Section 1*/

.section-1 {
    padding: 50px 2%;
}

.section-1 p {
    font-weight: 600;
    color: var(--dark);
}

#section-1 span {
    padding: 10px;
}
#section-1 img {
    width: 100%;
    max-width: 100%;
}

/*Vantagens*/
.vantagens {
    padding: 50px 2%;
    background: var(--third);
    color: var(--light);
}

/*Card*/
.card {
    background-color: transparent;
    margin-top 10px;
    margin-bottom: 10px;
}

.card-icon {
    font-size: 25px;
}

.card-title {
    font-size: 30px;
    font-weight: 600;
}

.carad-text {
    font-size: 15px;
    font-weight: 500;
    font-style: italic;
}

.card-button {
    text-decoration: none;
    color: var(--light);
    background-color: var(--third);
    padding: 10px 0;
    font-size: 18px;
    font-weight: 500;
    transition: 250ms ease-in;
}

.card-button:hover {
    color: #ccc;
}
/*Banner 1*/
.banner-1 {
    padding: 100px 2%;
    background-image: url('../img/banner-4.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: black;
}

.produto-title {
    background-image: url("../img/banner-5.jpg") !important;
}

.quem-somos-title {
    background-image: url("../img/banner-6.jpg") !important;
}

.contato-title {
    background-image: url("../img/banner-7.jpg");
}

#maps {
    width: 100%;
    margin: 0;
    padding: 0;
}

#banner-1 {
    max-width: 900px;
}

#banner-1 h1 {
    color: var(--light);
    font-size: 35px;
    font-weight: 500;
}

#banner-1 a {
    text-decoration: none;
    color: var(--light);
    border: 1px solid var(--light);
    padding: 10px 50px;
    margin-top: 25px;
    font-size: 27px;
    font-weight: 600;
    transition: 250ms ease-in;
}

#banner-1 a:hover {
    color: var(--dark);
    background-color: var(--light);
}

/*Footer*/
footer {
    min-height: 100px;
    background-color: var(--third);
    padding-top: 20px;
}

#footer img {
    width: 250px;
}

#footer p {
    color: var(--light);
    font-size: 13px;
    font-weight: 500;
}

#social ul {
    list-style: none;
    text-align: right;
}

#social ul li {
    display: inline-block;
    margin: 0 5px;
}

#social ul li a {
    text-decoration: none;
    color: var(--light);
    font-size: 25px;
    transition: 250ms ease-in;
}

#social ul li a:hover {
    color: #ccc;
}

.page-title {
    height: 350px;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    align-content: center;
    display: flex;
}

.page-title h1 {
    color: var(--light);
    font-size: 35px;
    font-weight: 800;
    text-transform: uppercase;
}

.page-title p {
    font-size: 20px;
    font-style: italic;
    font-weight: 500;
    color: var(--light);
    border-bottom: 1px solid var(--light);
    padding: 5px;
    max-width: 700px;
    margin: 0 auto;
}

.produtos {
    padding: 50px 2%;
}

.right {
    text-align: right !important;
}

.produtos .card {
    padding: 25px;
}
.produtos .card-icon {
    font-size: 45px;
    color: var(--third);
}

.produtos .card-title {
    color: var(--third);
}

#duvidas {
    padding: 50px 2%;
    max-width: 750px;
    margin: 0 auto;
}

#duvidas a {
    text-decoration: none;
    text-align: center;
    color: var(--light);
    background-color: var(--third);
    padding: 10px 30px;
    font-size: 20px;
    width: 100%;
    transition: 250ms ease-in;
}

#duvidas a:hover {
    color: var(--four);
}


/*Quem somos?*/
.quem-somos {
    padding: 50px 0;
}

.quem-somos p {
    font-weight: 600;
}
#empresa {
    padding: 20px;
}
#empresa img {
    max-width: 100%;
}

#valores .title {
    text-align: right;
    margin: 30px;
}

#valores .card-icon {
    color: var(--third);
}

#nossa-equipe img {
    max-width: 100%;
    height: 300px;
}

.social-icons a {
    text-decoration: none;
    color: var(--third);
    font-size: 60px;
    transition: 250ms ease-in;
}

.social-icons a:hover {
    color: var(--four);
}

/*Contato*/
.contato {
    padding-top: 50px;
}

#contato {
    max-width: 800px;
    margin: 0 auto;
}

.form-contato {
    display: flex;
    flex-direction: column;
}

.form-contato input {
    margin: 5px;
}

.form-contato input[type=text],
.form-contato input[type=tel],
.form-contato input[type=email] {
    padding: 10px;
    font-size: 21px;
    font-weight: 500;
}

.form-contato textarea {
    resize: vertical;
    min-height: 300px;
    margin: 5px;
}

.form-contato input[type=submit] {
    padding: 10px;
    font-size: 21px;
    color: var(--light);
    background-color: var(--third);
    border: none;
    outline: none;
    transition: 250ms ease-in;
}

.form-contato input[type=button]:hover {
    color: var(--four);
}

#whatsapp {
    padding: 20px;
}

#whatsapp a {
    text-decoration: none;
    color: var(--dark);
    background-color: var(--four);
    padding: 10px;
    font-size: 21px;
    transition: 250ms ease-in;
}

#whatsapp a:hover {
    color: var(--third);
}

#contato h1 img {
    max-width: 250px;
}

#map {
    height: 400px;
    /* The height is 400 pixels */
    width: 100%;
    /* The width is the width of the web page */
  }

  








@media screen and (max-width: 768px) {
    .navbar {
        background-color: var(--third);
        position: fixed;
        top: 100px;
        left: -160%;
        transition: 300ms ease-in;
        width: 250px;
        height: calc(100% - 100px);
        display: block;
    }

    .navbar.active {
        left: 0;
        transition: 300ms ease-in;
    }

    .navbar ul {
        width: 100%;
        flex-wrap: wrap;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link{
        color: var(--light);
        display: flex;
        width: 100%;
        flex-wrap: wrap;
    }
    
    .nav-link:hover {
        color: #ccc;
    }

    .nav-link i {
        display: flex;
        padding:2px 5px;
    }

    .nav-icon {
        color: var(--light);
    }

    .nav-social {
        margin-top: 200px;
    }

    .toggle {
        display: flex;
        position: fixed;
        width: 100%;
        height: 100px;
        top: 0;
        z-index: 99999;
        align-items: center;
        align-content: center;
    }

    .toggle span {
        width: 100%;
        text-align: right;
        color: var(--third);
    }

    .toggle span i {
        font-size: 18px;
        cursor: pointer;
    }

    .toggle span:hover {
        color: var(--secundary);
    }

    #top-content {
        text-align: center;
    }

    #footer {
        text-align: center;
    }

    #social ul {
        text-align: center;
    }
  }