.banner_sobre {
  background-image: url(../img/banner/banner_sobre.png);
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;

  .site {
    .titulo_sobre {
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;

      h1 {
        font-size: 100px;
        color: white;
        font-weight: 500;
        letter-spacing: 20px;
      }
    }
  }
}


@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-20px);
  }
}

.missao_visao_valores {
  padding: 40px 0;

  .site {
    .container_missao_visao_valores {
      display: flex;
      justify-content: space-evenly;

      div {
        strong {
          font-size: 30px;
          font-weight: bold;
          cursor: pointer;

          &.selecionado_sobre {
            color: #C622E0;
            border-bottom: 5px solid #C622E0;
            border-radius: 5px;
            padding-bottom: 5px;
          }
        }
      }
    }

    .texto__missao_visao_valores {
      width: 100%;
      height: auto;
      border: 4px solid #C622E0;
      margin-top: 45px;
      padding: 20px;
      border-radius: 10px;

      p {
        font-weight: 300;
        line-height: 40px;
        font-size: 20px;
        opacity: 1;
        transition: opacity 0.3s ease-in-out;

        &.fade-out {
          animation: fadeSlideOut 0.3s forwards;
        }

        &.fade-in {
          animation: fadeSlideIn 0.3s forwards;
        }
      }
    }
  }
}


.fotos_produtos_sobre {
  .site {
    .lado_a_lado {
      display: flex;

      img {
        border-radius: 3px;
        object-fit: cover;
      }

      .roupa {
        margin-bottom: 15px;
        width: 70%;
      }

      .outras_roupas {
        width: 100%;
        margin-left: 45px;
        display: flex;
        flex-direction: column;

        .bolsa_cozinha_sobre {
          width: 90%;
          margin-top: 50px;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}


.compromisso_sobre {
  .site {
    .subtitulo {
      margin-top: 20px;
    }

    .lado_a_lado {
      justify-content: space-around;

      .caixa_compromisso {
        width: 300px;
        height: 190px;
        border-radius: 2px;
        box-shadow: 0px 0px 15px 2px rgba(198, 34, 224, 0.5);
        margin-bottom: 70px;
        display: flex;

        .texto_compromisso {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          p {
            text-align: center;
            margin-top: 14px;
            font-weight: 300;
            font-size: 15px;
            line-height: 20px;
          }

          h2 {
            margin-top: 11px;
            font-size: 20px;
            font-weight: 600;
          }
        }
      }
    }
  }
}


.imagem-destaque {
  .site {
    .lado_a_lado {
      .sobre-imagem-destaque {
        width: 60%;
        margin-bottom: 50px;
      }

      .texto-destaque {
        width: 40%;

        p {
          line-height: 40px;
          font-weight: bold;
        }
      }
    }
  }
}

.ceo {
  .site {
    padding: 40px 0;
    .lado_a_lado {
      justify-content: space-around;
      margin-bottom: 30px;
      align-items: end;

      .historia_ceo {
        width: 50%;

        p {
          line-height: 40px;
          font-weight: bold;
        }
      }
    }
  }
}

.emoji_feliz {
  .site {
    .container_emoji {
      display: flex;
      flex-direction: column;
      align-items: center;

    }

    .texto_emoji {
      margin: 60px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      a {
        width: 220px;
        height: 50px;
        border-radius: 5px;
        background-color: #FE46D570;
        color: white;
        font-weight: bold;
        padding: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .subtitulo {
        line-height: 60px;
      }
    }


  }
}

@media(max-width: 1024px) {

  .missao_visao_valores {
    & .site {
      .texto__missao_visao_valores {
        width: 95%;
        margin-left: 22px;
      }
    }
  }

  .fotos_produtos_sobre {
    & .site {
      & .lado_a_lado {
        .roupa {
          width: 75%;
          padding-left: 5px;
        }

        & .outras_roupas {

          .celular_sobre {
            width: 94%;
          }

          .bolsa_cozinha_sobre {
            img {
              width: 50%;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }

  .imagem-destaque {
    & .site {
      & .lado_a_lado {
        .sobre-imagem-destaque {
          width: 50%;
          margin-bottom: 50px;
          margin-right: 20px;
          padding-left: 10px;
        }

        .texto-destaque {
          width: 45%;
          text-align: center;

          .subtitulo {
            margin-bottom: 20px;
          }
        }
      }
    }
  }

  .ceo {
    padding-top: 50px;
  }
}


@media(max-width: 768px) {

  .compromisso_sobre {
    & .site {
      .lado_a_lado {
        flex-direction: column;
        align-items: center;
      }
    }
  }


  .sobre-imagem-destaque {
    display: flex;
    align-items: center;

    img {
      object-fit: contain;
    }
  }


  .ceo {
    & .site {
      .lado_a_lado {
        flex-direction: column;
        align-items: center;

        .historia_ceo {
          order: 1;
          margin-top: 30px;
        }
      }
    }
  }

}


@media(max-width: 480px) {

  .banner_sobre {
    & .site {
      & .titulo_sobre {
        h1 {
          font-size: 60px;
          text-align: center;
        }
      }
    }
  }


  .missao_visao_valores {
    & .site {
      .container_missao_visao_valores {
        flex-direction: column;
        align-items: center;

        div {
          margin: 20px 0;
        }
      }

      .texto__missao_visao_valores {
        margin-left: 8px;
      }
    }
  }




  .fotos_produtos_sobre {
    & .site {
      & .lado_a_lado {
        flex-direction: column;
        align-items: center;

        .roupa {
          width: 95%;
          padding-left: 0px;
        }

        .outras_roupas {
          margin-left: 0px;
          justify-content: center;

          .celular_sobre {
            width: 100%;
            padding: 0 10px;
          }

          .bolsa_cozinha_sobre {
            width: 100%;
            flex-direction: column;
            align-items: center;

            img {
              width: 80%;
              margin-right: 0;
              margin-bottom: 10px;
            }
          }
        }
      }
    }
  }

  .imagem-destaque {
    & .site {
      & .lado_a_lado {
        flex-direction: column;
        align-items: center;

        .sobre-imagem-destaque {
          width: 90%;
          margin-bottom: 50px;
          margin-right: 0px;
          padding-left: 0px;
        }

        .texto-destaque {
          width: 90%;
        }
      }
    }
  }

  .ceo {
    .site {
      .subtitulo {
        margin-bottom: 30px !important;
      }

      & .lado_a_lado {
        .historia_ceo {
          width: 90%;
        }


      }
    }


  }

  .emoji_feliz {
    & .site {
      & .texto_emoji {
      .subtitulo{
        font-size: 30px;
        width: 90%;
      }
      }
    }
  }


}