* {
    margin: 0;
    padding: 0;
    font-family: Judson;
    color: #652237;
}

html {
   scroll-behavior: smooth;
}

header {
    position: fixed;
    width: 100%;
    height: auto;
    top: 0;
    display: flex;
    justify-content: center;
    background-color: #fff;
    box-shadow: 0 4px 4px 0 #6522372f;
    z-index: 1;
}

.nav-bar {
    width: 80%;
    display: flex;
    justify-content: space-between;
    height: 70px;
}

.nav-botao-menu {
   display: none;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-ul {
    display: flex;
    gap: 14px;
}

.nav-li {
    list-style: none;
    background-color: #FCDEE7;
    padding: 3% 2% 3% 2%;
    border-radius: 6px;
}

.nav-li a {
    text-decoration: none;
    color: #B85272;
    font-size: 24px;
    font-weight: 700;
}

.nav-menu {
   display: none;
}

#inicioId {
    display: flex;
    justify-content: center;
    margin-top: 90px;
    width: 100%;
    margin-bottom: 1%;
 }

 .container-inicio {
    display: flex;
    flex-direction: column;
    width: 80%;
 }

 .titulo-inicio h1 {
    font-size: 50px;
    width: 40%;
    font-weight: 700;
 }
 
 .subtitulo-inicio h2 {
    font-size: 36px;
    font-weight: 700;
    width: 60%;
 }
 
 #sobreId {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FCDEE7;
    width: 100%;
    padding: 2% 0 2% 0;
 }

 .container-sobre {
    width: 80%;
 }

 .texto-sobre {
    display: flex;
    flex-direction: column;
    gap: 10px;
 }

 .subtitulos {
    font-size: 32px;
    font-weight: 700;
}

 .paragrafos {
    font-size: 24px;
    font-weight: 500;
 }

 #objetivoId {
    display: flex;
    justify-content: center;
    padding: 4% 0 4% 0;
 }
 
 .container-objetivo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
 }

 .texto-objetivo {
    width: 60%;
 }

 #feedbacksId {
   background-image: url(assets/Logo.png);
   background-repeat: no-repeat;
   background-position: 90%;
   background-size: 22%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   background-color: #FCDEE7;
   width: 100%;
   padding: 2% 0 2% 0;
}

.container-feedbacks{
   display: flex;
   gap: 30%;
}

.feedbacks {
   width: 65%;
}

 .conteudo-feedback {
   align-items: center;
   display: flex;
}

.carrossel {
   display: flex;
   justify-content: center;
   overflow: hidden;
   width: 100%;
   margin: 10px 0;
   border-radius: 20px;
   box-shadow: 0px 4px 4px 0px rgba(29, 29, 29, 0.411);
}

.slide {
   width: 80vw;
   display: flex;
   background-color: #fff;
   justify-content: space-between;
   align-items: center;
   text-align: center;
   padding: 2%;
   position: relative;
}

.slide.active {
   animation: slideInLeft 0.6s ease-in-out;
}

@keyframes slideInLeft {
   from {
      opacity: 0.4;
   }
   to {
      opacity: 1;
   }
}

.slide img {
   margin-bottom: 10px;
}

.slide p {
   font-size: 32px;
   width: 80%;
}

.conteudo-feedback button {
   border: 0;
   background: transparent;
   cursor: pointer;
   display: flex;
}

.controles {
   display: flex;
   justify-content: center;
   gap: 10px;
}

.radio input[type="radio"]{
   display: none;
}

.radio span {
   height: 10px;
   width: 10px;
   border-radius: 50%;
   background-color: #F592B1;
   display: flex;
   cursor: pointer;
}

.radio span:after {
   content: "";
   height: 10px;
   width: 10px;
   border-radius: 50%;
   background-color: #652237;
   transform: translate(0) scale(0);
}

.radio input[type="radio"]:checked ~ span:after {
   transform: translate(0) scale(1);
}


/* Botão pedidos */

.botao-pedidos {
    display: flex;    
    position: fixed;
    right: 50px;
    bottom: 124px;
    border-radius: 20px;
    box-shadow: 2px 2px 3px 2px #6522373a;
}

.botao-pedidos a {
    text-decoration: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1%;
    align-items: center;
    justify-content: center;
    background-color: #652237;
    width: 163px;
    height: 74px;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    border-radius: 20px;
    padding: 1% 1% 1% 1%;
}
 
 footer {
    bottom: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 4px 0px 4px 0px rgba(101, 34, 55, 0.28);
    height: 119px;
    display: flex;
    justify-content: center;
 }

.container-footer{
   width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nome-footer h1 {
   font-family: Berkshire Swash;
   font-size: 32px;
   font-weight: 400;
}

.link-intagram-footer {
    display: flex;
}

.endereco {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.endereco p {
   font-size: 15px;
   font-weight: 600;
}

.instagram a {
   display: flex;
   gap: 2%;
   text-decoration: none;
}

.informacoes-footer {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.instagram h2 {
   font-size: 24px;
   font-weight: 600;
}

.info-criadores h3 {
   font-size: 15px;
}

 
/* Catálogo */


.nav-sobre {
   display: flex;
   align-items: center;
}

.nav-sobre a {
   text-decoration: none;
   background-color: #FCDEE7;
   color: #B85272;
   padding: 8px 11px 8px 11px;
   font-size: 24px;
   font-weight: 700;
   border-radius: 6px;
}

#inicio-pagina {
   display: flex;
   justify-content: center;
   margin-top: 100px;
   width: 100%;
   margin-bottom: 1%;
}

.titulo-catalogo{
   display: flex;
   width: 80%;
   flex-direction: column;
   margin-bottom: 4%;
}

.titulo-catalogo h1 {
   font-size: 50px;
   font-weight: 700;
   padding-bottom: 1%;
}

.titulo-catalogo h2 {
   font-size: 32px;
   font-weight: 700;
}

/*Catalogo*/


.container-catalogo-rosa {
   display: flex;
   flex-direction: column;
   text-align: center;
   background-color: #FCDEE7;
   width: 100%;
   padding: 2% 0 2% 0;
   gap: 20px;
}

.container-catalogo-branco {
   display: flex;
   flex-direction: column;
   text-align: center;
   width: 100%;
   padding: 2% 0 2% 0;
   gap: 20px;
}


.container-carrossel-catalogo {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
}

.container-carrossel-catalogo button {
   border: none;
   background-color: transparent;
   cursor: pointer;
}

.carrossel-catalogo {
   display: flex;
   overflow: hidden;
   width: 80%;
   border-radius: 20px;
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.slider1 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: #fff;
   width: 100%;
   padding: 2% 0 2% 0;
}

.slider1 p {
   display: flex;
   font-size: 30px;
   font-weight: 700px;
   width: 50%;
   text-align: left;
   padding-right: 2%;
}

.slider1 img {
   width: 35%;
   padding-left: 2%;
}

.slider2 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: #FCDEE7;
   width: 100%;
   padding: 2% 0 2% 0;
   border-radius: 20px;
}

.slider2 p {
   display: flex;
   font-size: 30px;
   font-weight: 700px;
   width: 50%;
   text-align: left;
   padding-right: 2%;
}

.slider2 img {
   width: 35%;
   padding-left: 2%;
}

.slider3 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: #fff;
   width: 100%;
   padding: 2% 0 2% 0;
   border-radius: 20px;
}

.slider3 p {
   display: flex;
   font-size: 30px;
   font-weight: 700px;
   width: 50%;
   text-align: left;
   padding-right: 2%;
}

.slider3 img {
   width: 35%;
   padding-left: 2%;
}

.slider4 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: #FCDEE7;
   width: 100%;
   padding: 2% 0 2% 0;
   border-radius: 20px;
}

.slider4 p {
   display: flex;
   font-size: 30px;
   font-weight: 700px;
   width: 50%;
   text-align: left;
   padding-right: 2%;
}

.slider4 img {
   width: 35%;
   padding-left: 2%;
}

.slider1.active {
   animation: slideInLeft 0.6s ease-in-out;
}

.slider2.active {
   animation: slideInLeft 0.6s ease-in-out;
}

.slider3.active {
   animation: slideInLeft 0.6s ease-in-out;
}

.slider4.active {
   animation: slideInLeft 0.6s ease-in-out;
}





/* Mobile */

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

   header {
      display: flex;
      align-items: center;
   }

   .nav-bar {
      display: flex;
      justify-content: space-between;
      height: 50px;
   }

   .nav-links {
      display: none;
   }

   .nav-logo {
      display: flex;
   }


   header {
      display: flex;
      flex-direction: column;
   }

   .nav-logo img {
      height: 50px;
   }

   .nav-botao-menu {
         display: block;
         display: flex;
         align-items: center;
   }

   .nav-botao-menu button {
      border: none;
      background-color: transparent;
      cursor: pointer;
   }

   .nav-menu ul {
      display: flex;
      flex-direction: column;
      text-align: center;
      padding-bottom: 10px;
   }

   .nav-menu .nav-links {
      display: block;
      padding-top: 0.8rem;
   }

   .nav-ul {
      list-style: none;
      display: flex;
      gap: 16px;
      text-decoration: none;
   }
   
   .nav-links a {
      text-decoration: none;
      color: #B85272;
      font-size: 20px;
   }

   .nav-links a {
      font-size: 16px;
      
   }

   .open {
      display: block;
   }

   .container-inicio h1 {
      font-size: 24px;
      width: 80%;
   }
   
   .container-inicio h2 {
      font-size: 19px;
      font-weight: 600;
      width: 70%;
   }

   .subtitulos {
      font-size: 16px;
   }
   
   .paragrafos {
      font-size: 12px;
   }

   .slide {
      justify-content: space-around;
   }

   .slide p {
      font-size: 10px;
   }

   .slide img {
      width: 50%;
      padding-top: 4%;
   }

   .conteudo-feedback button img {
      width: 25px ;
   }

   .container-objetivo {
      display: flex;
      flex-direction: column;
      gap: 1rem;
   }
   .texto-objetivo{
      width: auto;
   }
   
   .img-objetivo img {
      width: 50%;
      height: 100%;
   }

   .img-objetivo {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
   }

   .conteudo-feedback {
      margin: 0;
   }

   .nome-footer h1 {
      font-size: 16px;
      text-align:left;
   }

   .container-footer{
      width: 90%;
   }

   .endereco p {
      font-size: 10px;
   }

   .link-intagram-footer h2 {
      font-size: 18px;
   }

   .info-criadores h3 {
      font-size: 12px;
      font-weight: 600;
   }

   .botao-pedidos {
      right: 20px;
      bottom: 124px;
  }
  
  .botao-pedidos a {
      width: 110px;
      height: 60px;
      font-size: 16px;
  }

  .botao-pedidos a img {
   width: 18%;
}

  .link-intagram-footer img {
   width: 10%;
  }

  .container-footer {
   width: 90%;
  }

  .radio span {
      height: 7px;
      width: 7px;
   }

   .radio span:after {
      height: 7px;
      width: 7px;
   }

  footer {
   align-items: center;
   display: flex;
   justify-content: center;
  }

  .informacoes-footer {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
  }

  /*Catalogo*/

  .nav-sobre a {
   text-decoration: none;
   background-color: #FCDEE7;
   color: #B85272;
   padding: 6px 9px 6px 9px;
   font-size: 22px;
   font-weight: 700;
   border-radius: 6px;
   }

   .titulo-catalogo h1 {
      font-size: 24px;
      font-weight: 700;
      padding-bottom: 1%;
   }
   
   .titulo-catalogo h2 {
      font-size: 19px;
      font-weight: 600;
   }

   .slider1 p {
      font-size: 12px;
   }

   .slider2 p {
      font-size: 12px;
   }

   .slider3 p {
      font-size: 12px;
   }

   .slider4 p {
      font-size: 12px;
   }

   .container-carrossel-catalogo button img {
      width: 25px;
   }

   .container-catalogo-rosa {
      gap: 10px;
   }

   .container-catalogo-branco {
      gap: 10px;
   }
}