@import url("https://use.typekit.net/dcj7wkv.css");

:root {
    --background-color: #281F3D;
    --font-color: #fff7e9;
    --font-color2: #111c19;
    --font-principal:"komet", sans-serif;
}

*{
    margin: 0;
    padding: 0;
}

.destaque-roxo{
    color: #B89CF0;
}

.destaque-verde{
    color: #bed35a;
}

.menu-toggle {
    display: none;
    font-size: 2.5rem;
    color: var(--font-color);
    cursor: pointer;
    padding: 1rem;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
  }

.header-a{
    background-color: var(--background-color);
    font-family: var(--font-principal);
    color: var(--font-color);
    font-size: 1.25rem;
    font-weight: 500;
    text-decoration: none;
}

.header-a:hover{
    color: #B89CF0;
    transition: 0.5s;
}

nav{
    display: flex;
    justify-content: center;
}

.lista-nav{
    display: flex;
    justify-content: center;
    padding: 4%;
    margin-top: 1%;
    gap: 6%;
    list-style: none;
}

.item1-lista{
    background: none;
    border: #efb9db;
    white-space: nowrap;
    padding: 2%;
    border-radius: 100px;
    border-width: 2px;
    border-style: solid;
}

.item2-lista{
    background: none;
    border: #bed35a;
    white-space: nowrap;
    padding: 2%;
    border-radius: 100px;
    border-width: 2px;
    border-style: solid;
}

.item3-lista{
    background: none;
    border: #b89cf0;
    padding: 2%;
    border-radius: 100px;
    border-width: 2px;
    border-style: solid;
}

.item4-lista{
    background: none;
    border: #efb9db;
    padding: 2%;
    border-radius: 100px;
    border-width: 2px;
    border-style: solid;
}

.item5-lista{
    background: none;
    border: #bed35a;
    padding: 2%;
    border-radius: 100px;
    border-width: 2px;
    border-style: solid;
}

.item6-lista{
    background: none;
    border: #b89cf0;
    padding: 2%;
    border-radius: 100px;
    border-width: 2px;
    border-style: solid;
}

.texto-bold{
    font-weight: 600;
}

body{
    background-color: var(--background-color);
    background-image: url("../Assets/background-home.png");
    background-repeat: no-repeat;
    background-size: 200vh;
}

.inicio{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh
}

.logo-principal{
    width: 30%;
    margin-bottom: 10%;
}

.divisor{
    height: 42vh;
    background-image: url(../Assets/divisor.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 8%;
    background-color: #fff7e9;
}

.container2{
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
    height: 50vh;
    padding: 2em;
    text-align: center;
    background-color: #fff7e9;
}

.titulo-porque{
    color: var(--font-color2);
    text-align: left;
    font-size: 5rem;
    font-weight: 400;
    font-family: var(--font-principal);
    margin-left: 20%;
    line-height: 100%;
}

.descricao-porque{
    padding: 50px 280px 0 280px;
    text-align: left;
    font-family: var(--font-principal);
    font-weight: 400;
    font-size: 2rem;
    color: var(--font-color2);
}

.botao{
    margin-top: 5%;
    display: flex;
    justify-content: center;
  padding: 10px;
  background-color: #B89CF0;
  color: var(--font-color);
  text-decoration: none;
  border-radius: 100px;
  font-weight: bold;
}
.botao:hover{
    color: #111c19;
    background-color: #aa90dd;
    transition: 0.4s;
}

.depoimentos{
    font-family: var(--font-principal);
    background-image: url(../Assets/background-depoimentos.png);
    background-size: contain;
    background-repeat: no-repeat;
    color: #281f3d;
    text-align: justify;
    font-size: 1.5rem;
    padding: 2.2em;
    height: 120vh;
    background-color: #fff7e9;
  }

.estrelas{
    color: #efb9db;
}

.titulo-depoimentos{
    margin: 0 0 5% 8%;
    font-weight: 400;
    font-family: var(--font-principal);
    font-size: 4rem;
}

  .depoimentos-grid{
    display: grid;
    grid-template-columns: 50% 50%;
  }

  .depoimento{
    margin:0 19% 0 14%;
    padding: 1em;
  }

  .orcamento {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
    padding: 2em;
    height: 94vh;
    background: linear-gradient(to right, #2d2b4e 50%, #f2c4f4 50%);
  }
  
.titulo-orcamento{
    font-family: var(--font-principal);
    color: var(--font-color);
    font-size: 5rem;
    font-weight: 400;
    line-height: 100%;
    margin: 0 0 5% 10%;
}

.texto-orcamento{
    font-family: var(--font-principal);
    text-align: justify;
    font-weight: 400;
    color: var(--font-color);
    font-size: 1.5rem;
    line-height: 150%;
    margin: 0 15% 0 10%;
}

.contato {
    flex: 1 1 300px;
    padding: 1em;
    color: var(--font-color);
    text-align: center;
  }

  .contato-texto{
    font-family: var(--font-principal);
    color: #281f3d;
    font-weight: 400;
    font-size: 4rem;
  }
  
  .icons img {
    width: 10%;
    margin: 2% 1%;
  }

  @media (max-width: 1068px) {

    body{
        background-image: none;
    }

    .menu-toggle {
        display: block;
      }
    
      nav {
        flex-direction: column;
        align-items: flex-start;
      }
    
      .lista-nav {
        display: none;
        align-items: center;
        flex-direction: column;
        gap: 50px;
        background-color: var(--background-color);
        width: 100%;
        padding: 0 12rem 7rem 12rem;
        position: absolute;
        top: 120px;
        left: -190px;
        z-index: 100;
      }

      .lista-nav li {
        background: none !important;
        border: none !important;
      }

      .lista-nav a {
        color: var(--font-color);
        text-decoration: none;
        font-size: 1.4rem;
        font-weight: 500;
        font-family: var(--font-principal);
      }

      .lista-nav a:hover {
        color: #B89CF0;
      }
    
      .lista-nav.active {
        display: flex;
      }
  
  
    .inicio {
      height: 85vh;
      padding: 2em;
      text-align: center;

    }
  
    .logo-principal {
      width: 80%;
      margin: 0 auto;
    }
  
    .container2 {
      grid-template-columns: 1fr;
      height: auto;
      padding: 2em 1em;
    }
  
    .titulo-porque {
      font-size: 3rem;
      line-height: 100%;
      margin: 10% 0 10% 0;
      text-align: center;
    }
  
    .descricao-porque {
      font-size: 1.2rem;
      margin: 0 0 10% 10%;
      text-align: justify;
      width: 80%;
      padding: 0;
    }
  
    .botao {
      width: 94%;
      font-size: 1.2rem;
    }
  
    .divisor {
      height: 20vh;
      background-size: cover;
      padding: 2em;
    }
  
    .depoimentos {
      font-size: 1rem;
      padding: 1.5em;
      height: auto;
      background-color: #fff7e9;
      background-image: none;
    }
  
    .titulo-depoimentos {
      font-size: 3.5rem;
      line-height: 100%;
      margin: 0 0 2em 0;
      text-align: center;
    }
  
    .depoimentos-grid {
      grid-template-columns: 1fr;
      gap: 2em;
    }
  
    .depoimento {
      margin: 0;
      padding: 1em;
    }
  
    .orcamento {
      grid-template-columns: 1fr;
      height: 100vh;
      background: linear-gradient(to bottom, #2d2b4e 50%, #f2c4f4 50%);
    }
  
    .titulo-orcamento, .texto-orcamento {
      margin-left: 0;
      text-align: center;
    }
  
    .titulo-orcamento {
      font-size: 3rem;
      margin: 0 0 10% 0;
    }
  
    .texto-orcamento {
      font-size: 1rem;
      text-align: justify;
      margin: 0 0 10% 2%
    }
  
    .contato{
        height: 40vh;
    }

    .contato-texto {
        padding: 10% 0 5% 0;
        line-height: 100%;
      font-size: 4.5rem;
    }
  
    .icons img {
      width: 20%;
    }
  }