:root {
  --red: #d63a25;
  --white: #fff;
  --dark: #3b3b51;
  --background: #f2f8ff;
  --background2: #d2e7ff;
  --secondary: #3e8eec;
  --secondary2: #3FA3FF;
  --orange: #f3ab32;
  --gray: #e8e8e8;
}

@media (max-width: 1530px){
  .contact{
    top: 120px;
  }
  .navbar{
    padding: 24px;
  }

  .faq-card{
    max-width: none;
    padding: 16px 24px;
    width: 45%;
  }

}

@media (max-width: 1365px) {
  .home-content {
    padding-right: 24px;
    padding-left: 24px;

    justify-content: center;
  }

  .home-texts {
    margin-right: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .how-it-works-container{
    padding: 0px 24px;
  }

  .contact{
    top: 80px;
  }
  .mascot-lori{
    margin-top: 20px;
  }

  .about-content{
    padding: 0px 24px;
  }

  .about-app-content{
    gap: 24px;
    padding: 0px 24px;
  }
  

}

@media (max-width: 1187px){
  .home-texts{
    text-align: center;
    align-items: center;

  }

}

@media (max-width: 1096px){
  .comunication-autonomy-container{
    display: flex;
    flex-direction: column;
  }

  .comunication-autonomy-content{
    max-width: none;
  }
}

@media (max-width: 996px){
  .nav-content ul{
    gap: 4rem;
  }
}

@media (max-width: 968px) {
  .about-app .about-app-content {
    justify-content: center;
  }

  .about-app-content {
    padding: 0 24px;
    flex-wrap: wrap-reverse;
    justify-content: center;
    align-items: center;
    gap: 0px;
  }
}

@media (max-width: 865px) {
  

  .img-container-oldman{
    height: 420px;
  }

  .home-button-container{
    width: 264px;
  }

  .benefits-container-title{
    font-size: 2rem;
  }

  .benefits-container-sub-title{
    font-size: 1.5rem;
  }

  .benefits-card-title{
    font-size: 1.5rem;
  }

  .benefits-card-text{
    font-size: 1rem;
  }

  .dep-card2 {
    margin-left: 0px;
    margin-top: 32px;
  }

  .how-it-works-card .how-it-works-card-title{
    font-weight: 400;
  }

  .download-content-title{
    font-size: 2rem;
  }

  .download-content-sub-title{
      font-size: 1.5rem;
  }

  .download-image img{
      scale: 0.8;
  }

  .download-button-anchor{
      font-size: 1.5rem;
      align-items: center;
  }

  .how-it-works-title{
    font-size: 2rem;
    margin-bottom: 12px;
  }

  .how-it-works-sub-title{
    font-size: 1.5rem;
  }

  .why-choose-title{
    font-size: 2rem;
  }

  .why-choose-sub-title{
    font-size: 1.5rem;
  }

  .why-choose-text{
    font-size: 1rem;
  }

  .comunication-autonomy-content-title h2{
    font-size: 2.5rem;
  }
  .comunication-autonomy-content-title h3{
    font-size: 2rem;
  }

  .comunication-autonomy-content-text{
    font-size: 1.5rem;
  }

  .contact{
    display: flex;
    top: -20px;
    padding-bottom: 20px;
    padding-top: 0px;
    background-color: var(--background2);
  }

  .svg8{
    display: none;
  }

  .faq-cards{
    width: 90%;
  }

  .faq-card{
    max-width: none;
    width: 100%;
  }

  .faq-container{
    padding: 24px;
  }

  .faq-description{
    margin-bottom: 12px;
  }


  .contact-container{
    background-image: none;
    display: flex;
    flex-direction: column;
    max-width: none;
    margin-bottom: 0px;
  }

  .contact-container-primary{
    background-color: var(--secondary);
    width: 100%;
    padding: 44px 16px;
    margin-bottom: 48px;
  }

  .why-choose{
    padding: 16px;
  }

  .why-choose-container{
    justify-content: center;
    gap: 30px;
  }

  .contact-container-secondary{
    background-image: none;
    max-width: 640px;
    padding: 0px;
    margin-top: 0px;
    flex: 0;
  }

  .home-texts{
    margin-bottom: 42px;
    text-align: center;
    align-items: center;
  }

  .contact-container-secondary form{
    width: 100%;
    max-width: none;
  }

  .footer-top-container{
    padding-top: 12px;
  }

  .footer-top-content{
    padding: 48px 0px;
  }

}

@media (max-width: 824px) {
  /*NAVEGACAO*/
  .navbar {
    padding: 24px 18px;
  }

  .menu {
    display: block;
  }

  .menu.ativo .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu.ativo .bar:nth-child(2) {
    opacity: 0;
  }

  .menu.ativo .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .logo img {
    width: 170px;
    height: 44px;
  }

  .nav-menu {
    padding-top: 16px;
    position: fixed;
    right: -100%;
    top: 80px;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: var(--dark);
    transition: 0.3s;
  }

  .nav-content ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
  }

  .nav-menu.ativo {
    right: 0;
  }

  .nav-item {
    margin: 16px 0;
  }

  /* FIM NAVEGACAO */

  /* --- HOME --- */
  .home {
    padding-top: 110px;
  }

  .home-content {
    padding: 0 24px;
    justify-content: center;
  }

  .home-content img {
    scale: 0.9;
    /* margin-top: -24px; */
  }

  .home-texts h1 {
    font-size: 42px;
  }

  .home-texts h4 {
    font-size: 22px;
  }

  .home-texts .sections-text {
    margin: 24px 0px;
  }

  .home-button {
    font-size: 22px;
    padding: 0px 16px;
  }

  /* FIM HOME */

  /* --- ABOUT --- */
  .about-content {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    z-index: 3;
  }

  .about-image {
    scale: 0.9;
  }

  .about-texts {
    margin-right: 0px;
    text-align: left;
    padding-bottom: 0px;
  }

  .about-features{
    font-size: 1.5rem;
  }

  .about-end-title{
    font-size: 1.5rem;
  }
  

  .first-title {
    font-size: 32px;
  }

  .about-sub-title {
    font-size: 42px;
  }

  .about-text {
    font-size: 22px;
    font-weight: 400;
  }

  /* FIM ABOUT*/

  /* --- FUNCIONAliTIES --- */

  .func-content {
    padding: 24px;
    padding-top: 76px;
  }

 

  .func-sub-title {
    font-size: 26px;
    text-align: center;
  }

  .func-card .card-title {
    font-size: 24px;
  }



  .func-app-demo-btn{
    font-size: 1rem;
    scale: 1.1;

  }

  /* FIM FUNCIONAliTIES*/

  /* --- ABOUT APP --- */

  

  .content-texts-ia,
  .content-texts-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .content-texts-ia .content-texts-title {
    font-size: 32px;
  }

  .content-texts-ia .content-texts-sub-title {
    font-size: 22px;
  }

  .content-texts-custom .content-texts-title {
    font-size: 32px;
  }

  .content-texts-custom .content-texts-sub-title {
    font-size: 22px;
  }

  .about-img {
    scale: 0.9;
  }

  /* -- depositions -- */
  .dep-content {
    padding: 0 24px;
    text-align: center;
  }

  .dep-content-title {
    font-size: 32px;
  }

  .dep-content-sub-title {
    font-size: 26px;
  }

  .dep-card-text {
    font-size: 22px;
  }

  /* FAQ */


  .faq-titles h1{
    font-size: 32px;
  }
  .faq-titles h2{
    font-size: 26px;
  }
  .faq-container{
    max-width: 640px;
  }
  .faq-cards{
    padding: 12px 0px;
    width: 100%;
  }

  /* -- media -- */

  .media-container {
    padding: 0 24px;
    padding-bottom: 56px;
  }

  .media-title {
    text-align: center;
    font-size: 32px;
  }

  .media-sub-title {
    text-align: center;
    font-size: 26px;
  }

  .media-margin {
    margin: 0px 0px;
  }

  .media-card {
    margin-bottom: 32px;
  }

  .media-card-title {
    font-size: 26px;
  }

  .media-card-sub-title {
    font-size: 22px;
  }

  .media-card-text {
    font-size: 22px;
  }

  .media-card-link {
    font-size: 22px;
  }

  /* --- FOOTER ---*/
  .footer-link-title {
    font-size: 22px;
    margin-bottom: 16px;
  }

  .footer-top-link a {
    font-size: 16px;
  }

  .footer-text {
    font-size: 16px;
  }


  .footer {
    padding: 40px;
    background-color: var(--footer);
    margin-top: -20px;
  }

  .footer-container {
    font-size: 16px;
  }
}

@media (max-width: 724px){
  .download-card{
      flex-direction: column;
      align-items: center;
      text-align: center;
  }

  .download-content{
      text-align: center;
      align-items: center;
      margin-left: 0px;
  }

  .download-image{
      display: flex;
      align-items: center;
      justify-content: center;

  }
}


@media(max-width: 684px){

  .benefits-cards{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .how-it-works{
    padding: 16px;
    text-align: center;
  }

  .how-it-works-title{
    font-size: 2rem;
    width: 100%;
  }

  .how-it-works-sub-title{
    font-size: 1.5rem;
    margin-bottom: 12px;
  }


  .how-it-works-container{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: stretch;
    padding: 16px;
    width: 100%;
    transform: scale(1);
    gap: 16px;

  }

  .how-it-works-cards{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 660px;
  }

  .how-it-works-card{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 12px;
  }
  .how-it-works-card img{
    width: 64px;
    height: 64px;
  }

  .how-it-works-title{
    margin: 20px 0px;
  }

  .how-it-works-card-title{
    margin-top: 0px;
    text-align: left;
    margin-left: 24px
  }

  .how-it-works-numbers{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    height: 620px;
    width: 80px;
  }

  .how-it-works-numbers .line{
    width: 10px;
    height: 100%;
  }

  .comunication-autonomy-media{
    width: 100%;
  }
}

@media (max-width: 560px) {
  .footer-top-content {
    flex-direction: column;
    padding-bottom: 0px;
  }

  .footer-link-title {
    margin-bottom: 8px;
  }


  .footer-top-grad {
    margin-right: 0px;
    gap: 8px;
    margin-bottom: 32px;
  }
}

@media (max-width: 480px) {
  /* --- HOME --- */

  .img-container-oldman{
    height: 300px !important;
  }

  .home-content {
    padding: 0 24px;
    justify-content: center;
  }

  .home-texts h1 {
    font-size: 32px;
  }

  .home-texts h4 {
    font-size: 16px;
  }

  .home-texts .sections-text {
    margin: 24px 0px;
  }

  .home-button {
    font-size: 1rem;
  }

  .home-button-container{
    width: 224px;
  }

  /* FIM HOME */

  /* --- ABOUT --- */
  .about-image {
    scale: 0.9;
  }

  .first-title {
    font-size: 22px;
  }

  .first-sub-title {
    font-size: 32px;
  }

  .about-text {
    font-size: 16px;
  }

  .about-texts .about-sub-title {
    font-size: 3rem;
  }

  .about-content .about-sub-title {
    font-size: 2rem;
  }
  
  .about-features{
    font-size: 1rem;
  }

  .about-end-title{
    font-size: 1rem;
  }

  /* FIM ABOUT*/

  /* --- FUNCIONAliTIES --- */
  .svg-func {
    top: -90px;
  }

  .func-content {
    background-color: var(--secondary);
  }

  .func-sub-title {
    font-size: 24px;
  }

  .func-sub-title {
    font-size: 18px;

    margin: 16px 0px 24px 0px;
  }

  .func-cards {
    justify-content: flex-start;
    display: block;
  }

  .func-card {
    min-width: 100%;
    max-width: 100%;
    padding: 36px;
    margin-top: 20px;
  }

  .card-visible{
    min-width: 100%;
    max-width: 100%;
    padding: 36px;
  }

  .func-card-hidden .card-title{
    font-size: 1.375rem;
  }

  .func-card-hidden .card-text{
    font-size: 1.125rem;
  }

  .func-card .card-title {
    font-size: 22px;
    margin:  12px 0px;
  }

  .func-card .card-text {
    font-size: 18px;
  }

  

  .why-choose{
    padding: 24px;
  }

  .why-choose-title{
    font-size: 2rem;
    margin-top: 24px;
  }


  .why-choose-container{
    gap: 20px;
  }

  .why-choose-text{
    font-size: 1rem;
  }

  .why-choose-sub-title{
    font-size: 1.5rem;
  }

  /* -- Alternative Communication and Autonomy --*/
 
  .comunication-autonomy-content-text{
    font-size: 1rem;
  }

  .comunication-autonomy-content-list{
    font-size: 1rem;
  }


  /* ABOUT APP*/
  .content-texts-image {
    align-items: center;
  }

  .content-texts-ia .content-texts-title {
    font-size: 24px;
  }

  .content-texts-ia .content-texts-sub-title {
    font-size: 16px;
    margin-right: 16px;
  }

  .content-texts-custom .content-texts-title {
    font-size: 24px;
  }

  .content-texts-custom .content-texts-sub-title {
    font-size: 16px;
    margin-right: 16px;
  }

  .content-texts-img {
    scale: 0.8;
  }

  /*DEPOIMENTOS*/

  .dep-content {
    margin-top: 20px;
  }

  .dep-content-title {
    font-size: 22px;
  }

  .dep-content-sub-title {
    font-size: 18px;
  }

  .dep-cards .dep-card1,
  .dep-card2 {
    min-height: 348px;
  }

  .dep-card-title {
    font-size: 22px;
  }

  .dep-card-sub-title {
    font-size: 18px;
  }

  .dep-card-text {
    font-size: 18px;
  }
  
  /* FAQ */

  .faq-titles{
    padding: 0px 16px;
    margin-top: 60px;
  }
  .faq-titles h1{
    font-size: 22px;
  }
  .faq-titles h2{
    font-size: 18px;
  }

  .faq-cards{
    padding: 16px 0px;
    width: 90%;
  }

  .faq-description{
    margin-bottom: 12px;
  }

  .faq-collapse{
    padding: 4px 0px;
  }


  /*PARTINESS*/

  .partners-content {
    padding: 24px;
    text-align: center;
    margin-top: 60px;
  }

  .partners-title-container{
    flex-wrap: wrap;
    justify-content: center ;
    align-items: center;
  }
  .partners-title-icon{
    margin-left: 0px;
    scale: 0.8;
  }

  .partners-card {
    width: 100%;
    height: 180px;
    margin-right: 0px;
  }

  .partners-title {
    font-size: 2rem;
  }

  .partners-sub-title {
    font-size: 1.5rem;
  }

  .partners-card img {
    scale: 0.8;
  }

  /*Media*/

  .media-card {
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .media-card-link {
    font-size: 24px;
  }

  .media-title {
    font-size: 22px;
  }

  .media-sub-title {
    font-size: 18px;
  }

  .media-card-title {
    font-size: 22px;
  }

  .media-card-sub-title {
    font-size: 16px;
  }

  .media-card-text {
    font-size: 16px;
  }

  .media-card-link {
    font-size: 16px;
  }

  /* --- Contact Form ---*/

  .contact-container-secondary form {
    padding: 0px 16px;
  }

}