@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@300;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap');
body{margin: 0px; padding: 0px;}

h1,h2,h3,h4,h6{color:#3d404f; font-weight: 800; font-family: 'Open Sans', sans-serif !important;}
p, a, span, li, label{line-height: 1.5em; font-family: 'IBM Plex Sans', 'Spartan', sans-serif;}

h1{font-size: 34px;}
input, textarea{font-family: 'Spartan', sans-serif}
.container{width:80%; margin: auto; max-width: 1250px;}

header .top-navbar{position: absolute; width: 100%; background: transparent;}
header .fixed{position:fixed; width: 100%; background: #fff; z-index: 1;}
header .top-navbar .container{align-items: center; display: flex; justify-content: space-between;}
header .logo{width: 200px;}
header .logo img{width: 100%}
header .cta a{font-weight:800; padding: 15px 30px; border-radius: 4em; text-decoration: none; background-color:#4db9fe !important; color:white}

.intro{padding: 100px 0; background-image: url('./img/forma1.svg'); background-position: bottom; background-size: cover; background-repeat: no-repeat;}
.intro .container{display: flex; justify-content: space-between;}
.intro .text{width: 50%;}
.intro .text h1{font-size: 3.125em; font-weight: 800; color:#3d404f}
.intro .text p{color: #3d404f; line-height: 1.5em;}
.intro .ctas{display: flex; justify-content: space-around;}

.btn-verde{font-weight:800; padding: 15px 30px; border-radius: 4em; text-decoration: none; background-color:#70c599; color:white}
.btn-verde:hover{background-color: #5cb589;}
.btn-cinza{font-weight:800; padding: 15px 30px; border-radius: 4em; text-decoration: none; background-color:#bbb; color:#333}
.btn-cinza:hover{background-color: #aaa;}

.servicos{padding: 0 0 45px 0}
.servicos h1{text-align: center; font-size: 3.125em;}

.como-fazemos{padding: 100px 0; background-image: url('./img/forma2.svg'); background-position: bottom; background-size: cover; background-repeat: no-repeat;}
.como-fazemos .container{display: flex; justify-content: space-between;}
.como-fazemos .fa{color: #ffffff42;}
.como-fazemos .img{width: 49%;}
.como-fazemos .img img{width: 100%;}
.como-fazemos .texto{color:white; width: 49%;}
.como-fazemos .texto h2, .como-fazemos .texto h3{color:white}
.como-fazemos .texto h3{font-size: 14px;}
.como-fazemos .texto .itens{display: flex; flex-wrap: wrap;}
.como-fazemos .texto .itens .item{width: 28%; background:#053b57; margin: 5px; padding: 20px 5px; border-radius: 20px; text-align:center}
.como-fazemos .texto .itens .item img{width: 80%;}

.sobre{padding: 45px 0;}
.sobre .container{display: flex; justify-content: space-between;}
.sobre .container .texto, .sobre .container .img{width: 49%}


.contato{background: #eee; padding: 90px 0;}
.contato h1{text-align:center}
.contato .col-2{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 25px;}
.contato .col-2 .input-container{width: 47%;}
.contato .container .submit{background: #70c599; color:white; text-transform: uppercase; font-weight: bold; width: 100%; border: none !important; margin-top: 25px; cursor: pointer; border-radius: 4em; } 
.contato form{width: 80%; margin: auto}
/* .contato .container input{width: 45%; line-height: 1.5em; background: #fff; border:none; padding: 15px; border-radius: 25px; margin: 5px 0}
.contato .container input:focus, .contato .container textarea:focus{outline: none; border: 2px solid #70c599}
.contato .container textarea{width: 93%; line-height: 1.5em; background: #fff; border:none; padding: 15px; border-radius: 25px; margin: 5px 0;}*/

.clientes{padding: 45px 0;}
.clientes h1{text-align:center;}
.clientes .itens{display: flex; justify-content: space-between; flex-wrap:wrap ;}
.clientes .itens .item{width: 23%;}
.clientes .itens .item img{width: 100%;}


.fa{font-size: 50px !important; color:#00000042}

footer{background: #006D8B; padding: 40px 0; color: white;}

#contato_consultor {text-align: center;}


/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f7f8fa;
    text-align: center;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    padding: 30px 15px;
    font-family: 'Spartan', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #3d404f;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    border-bottom: 5px solid #4250b2
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  }
  .tabcontent > div{display: flex;     justify-content: space-between;  align-items: center;}
  .tabcontent .img, .tabcontent .text{width: 49%;}
  .tabcontent .img img{width: 100%;}

  footer .container{display: flex; justify-content: space-between;}
  footer p{font-size:16px}
  footer ul{display: flex;}
  footer ul a{margin:0 5px}
  footer ul .fa{color: white !important; font-size: 30px !important;}



  @media(max-width:600px){
    header .cta a{display: none;}
    header .logo{width: 100%; text-align: center;}
    header .logo img{width: 200px;}

    .intro{background-image: none;}
    .intro .container, .intro .ctas{flex-direction: column; text-align: center;}
    .intro .ctas a{margin: 10px;}
    .intro .text h1{font-size: 1.5em;}
    .intro .text, .intro .img, .intro img{width: 100%;}

    .servicos .tabcontent > div{flex-direction: column; padding-bottom: 15px;}
    .servicos .tabcontent .img, .servicos .tabcontent .text{width: 100%;}

    .como-fazemos .container{flex-direction: column;}
    .como-fazemos .img, .como-fazemos .texto{width: 100%;}
    .como-fazemos .texto .itens{justify-content: space-between;}
    .como-fazemos .texto .itens .item {width: 40%;}

    .sobre .container{flex-direction: column;}
    .sobre .container .img, .sobre .container .texto, .sobre .container img{width: 100%}
    .contato .container input{width: 95%}
    .contato .container .submit{width: 105%}

    .clientes .itens .item{width: 47%;}

    .tab button{font-size: 12px;}

    .contato form{width: 100%;}
    .contato .col-2{margin-bottom: 0px;}
    .contato .col-2 .input-container{width: 100%; margin-bottom: 25px;}

    footer p{font-size:12px}
    footer ul .fa{color: white !important; font-size: 24px !important;}

    



  }

  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    border: 1px solid #888;
    width: 80%;
    max-width: 400px; /* Could be more or less, depending on screen size */
  }
  .modal-content h1{color:#eee}
  .modal-content .modal-header{
    background-color: #5cb589;
    padding: 20px;
    height: 100px;
    text-align: center;
  }
  .modal-content .modal-body{
    padding: 20px;
    height: 150px;
  }
  
  /* The Close Button */
  .close {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  .input-container {
    position: relative;
  }

  input, textarea {
    border: 0;
    border-bottom: 2px solid #9e9e9e;
    outline: none;
    transition: .2s ease-in-out;
    box-sizing: border-box;
    background: #eee
  }
  
  label { top: 0; left: 0; right: 0; color: #616161; display: flex; align-items: center; position: absolute; font-size: 1rem;
    cursor: text; transition: .2s ease-in-out; box-sizing: border-box; }
  
  input, label, textarea {width: 100%; height: 3rem; font-size: 1rem;}
  
  /* Interation */
  input:valid, input:focus {border-bottom: 2px solid #26a69a;}
  
  input:valid + label,input:focus + label {color: #26a69a; font-size: .8rem; top: -30px; pointer-events: none;}