.matriculas{
  font-family: 'Montserrat', sans-serif;
  & .hero {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    & iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 800;
    }
    & .overlay{
      background: #58004f52;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 900;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding: 60px;
      & a.agende{
        background: #FF9C01;
        padding: 15px 40px;
        color: #58004F;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: 700;
        font-size: 1.2rem;
        border-radius: 30px;
        transition: .3s;
        &:hover{
          background: #58004F;
          color: #FF9C01;
          text-decoration: none;
        }
      }
    }
  }
  & .colegio{
    padding: 80px 5%;
    & h2{
      text-align: center;
      color: #58004F;
      width: 800px;
      max-width: 100%;
      font-size: 2.5rem;
      font-weight: 700;
      margin: 0 auto 20px;
    }
    & p.intro {
      width: 1000px;
      max-width: 100%;
      text-align: center;
      margin: 0 auto 80px;
      font-size: 1.2rem;
      line-height: 1.5;
    }
    .box {
      background: #A20086;
      padding: 0 60px 60px;
      border-radius: 50px 50px 0 0;
      border-bottom: solid 25px #ff9c01;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 50px;
      & .box-destaque {
        width: 20%;
        background: #ff9c01;
        margin: -50px 0 0 0;
        padding: 0 30px 30px;
        border-radius: 20px 20px 0 0;
        border-bottom: 10px solid;
        color: #58004F;
        & h3 {
          text-align: center;
          margin: 0px auto;
          font-weight: 800;
          font-size: 3rem;
          line-height: 1;
        }
        img {
          display: block;
          margin: 0 auto 10px;
          width: 100%;          
        }
        & p{
          text-align: center;
          margin: 0;
          padding: 10px;
        }
      }
      & .boxes {
        display: flex;
        flex-direction: row;
        gap: 25px;
        width: calc(80% - 50px);
        & .box-regular {
            width: 25%;
            color: #fff;
            & img{
              width: 100%;
              border-top: solid 10px #ff9c01;
            }
            & p{
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
              min-height: 110px;
              margin: 0;
              padding: 10px;
            }
        }
      }
    }
  }
  & .ensinos{
    padding: 80px 10%;
    background: url(../images/matriculas25/bg-light.webp) left -15% center, url(../images/matriculas25/bg-light.webp) right -15% center, #F8A200;
    background-repeat: no-repeat, no-repeat;
    background-size: auto 95%, auto 95%;
    & h2{
      text-align: center;
      color: #58004F;
      width: 850px;
      max-width: 100%;
      font-size: 2.5rem;
      font-weight: 700;
      margin: 0 auto;
    }
    & h3{
      text-align: center;
      color: #58004F;
      font-size: 1.5rem;
      font-weight: 700;
      margin: 0 auto;
      &:after{
        content: '';
        display: block;
        margin: 10px auto 0;
        width: 200px;
        height: 5px;
        border-radius: 15px;
        background: #58004F;
      }
    }
    & ul{
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      list-style: none;
      gap: 15px;
      width: 100%;
      margin: 50px 0;
      padding: 0;
      & li {
          background: #58004F;
          border-radius: 15px;
          padding: 30px 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-direction: row;
          width: calc(33.333% - 15px);
          & img {
            width: 30%;
            height: auto;
            display: block;
            margin: 0 15px 0 30px;
            z-index: 701;
          }
        .textos {
          width: 70%;
          h4 {
            background: #FFCD6E;
            padding: 15px;
            color: #58004f;
            margin: 0;
            line-height: 1;
            font-size: 1rem;
            font-weight: 700;
            position: relative;
            &:before{
              content: '';
              display: block;
              width: 110px;
              height: calc(1rem + 30px);
              background: #FFCD6E;
              position: absolute;
              margin-left: -110px;
              top: 0;
              z-index: 700;
            }
          }
          p {
            color: #fff;
            padding: 10px 30px 0 15px;
            font-size: 1rem;
            line-height: 1.5;
            margin: 0;
          }
        }          
      }
    }
  }
  & .national{
    padding: 60px 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;    
    & .textos{
      width: 70%;
      & h2{
        color: #58004F;
        font-weight: 700;
        font-size: 2rem;
        margin: 0 0 10px;
      }
      & p{
        font-size: 1.2rem;
        line-height: 1.5;
        margin: 0;
      }
    }

    & img{
      width: 300px;
      margin: 0;
    }
  }
  & .destaques{
    background: url(../images/matriculas25/destaque-bg.webp) right center #ffa301 no-repeat;
    background-size: auto 100%;
    padding: 80px 12%;
    & .lista {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 15px;
      & .destaque {
        width: calc(20% - 12px);
        position: relative;
        .frente, .verso{
          padding: 30px;
          width: 100%;
          height: auto;
          aspect-ratio: 3 / 4;
          border-radius: 20px;
          transition: opacity .3s;    
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 15px;     
          text-align: center; 
          cursor: default;
        }
        .frente{
          background: #FEDA00;
          color: #58004F;
          opacity: 1;
          & h4{
            font-size: 1.2rem;
            font-weight: 600;
            margin: 0;
            line-height: 1.2;
          }
        }
        .verso{
          background: #58004F;
          color: #fff;
          opacity: 0;
          position: absolute;
          top: 0;
          & h4{
            font-size: 1.2rem;
            font-weight: 600;
            margin: 0;
            line-height: 1.2;
          }
          & p{
            margin: 0;
            font-size: 1rem;
            line-height: 1.5;
          }
        }
        &:hover{
          .verso{
            opacity: 1;
          }
        }
      }
    }
    & .cta {
      width: 450px;
      max-width: 100%;
      margin-top: 50px;
      font-weight: 500;
      a.botao {
        background: #A20086;
        padding: 15px 50px;
        display: block;
        width: max-content;
        max-width: 100%;
        border-radius: 35px;
        color: #fff;
        text-transform: uppercase;
        text-decoration: none;
        transition: .3s;
        &:hover{
          background: #58004f;
        }
      }
    }
  }
  & .depoimentos{
    background: #58004F;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    & img{
      width: 50%;
      height: auto;
      display: block;
    }
    & .conteudo{
      padding: 30px 10%;
      color: #fff;
      width: 50%;
      & h2{
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 20px;
      }
      .depoimento{
        & p{
          font-size: 1rem;
          line-height: 1.5;
          margin: 10px 0;
        }
        & h4{
          font-size: 1.1rem;
          font-weight: 700;
          margin: 0;
        }
      }
    }

    .owl-dots {
        margin-top: 30px!important;
        position: relative;
        text-align: left;
        .owl-dot span {
          width: 13px;
          height: 12px;
          margin: 0 5px;
          background: #ffffff;
          border-radius: 50%;
          transition: .3;
        }
        .owl-dot.active span, .owl-dot:hover span{
          background: #F8A200;
        }
    }    
  }
  & .resultados{
    padding: 80px 10%;
    background: url(../images/matriculas25/resultado-bg.webp) left -35% center, url(../images/matriculas25/resultado-bg.webp) right -35% center;
    background-repeat: no-repeat, no-repeat; 
    background-size: auto 90%, auto 90%;
    & h2{
      text-align: center;
      color: #58004F;
      font-size: 2.5rem;
      font-weight: 700;
      margin: 0 auto 60px;
    }
    & img{
      width: 100%;
      height: auto;
      display: block;
    }
    .topicos {
      --gap: 20px; 
      list-style: none;
      margin: 60px 0 0 0;
      padding: 0 80px;
      display: flex;
      flex-wrap: wrap;
      gap: var(--gap);
      justify-content: center;
    }
    .topicos li {
      flex: 1 1 100%;
      min-width: 200px;
      height: 120px;
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,.15);
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
      padding: 22px 24px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 1rem;
      line-height: 1.3;
      font-weight: 400;
    }
    .topicos li:nth-child(1) { background: #58004F; }
    .topicos li:nth-child(2) { background: #FF9C01; }
    .topicos li:nth-child(3) { background: #A20086; }
    .topicos li:nth-child(4) { background: #FF9C01; }
    .topicos li:nth-child(5) { background: #A20086; }
    .topicos li:first-child { flex-direction: column; }
    .topicos li:first-child h3 {
      margin: 0 0 6px 0;
      font-weight: 700;
      font-size: 1.4rem;
      line-height: 1;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    @media (min-width: 768px) {
      .topicos li {
        flex: 1 1 calc((100% - 2 * var(--gap)) / 3);
      }
    }

    @media (min-width: 1200px) {
      .topicos li {
        flex: 0 1 calc((100% - 4 * var(--gap)) / 5);
        max-width: none;
      }
    }
    .owl-dots {
      margin-top: 20px!important;
      position: relative;
      text-align: center;
      .owl-dot span {
        width: 13px;
        height: 12px;
        margin: 0 5px;
        background: #58004F;
        border-radius: 50%;
        transition: .3;
      }
      .owl-dot.active span, .owl-dot:hover span{
        background: #F8A200;
      }
    } 
  }
  & .contato{
    background: #F8A200;
    background: linear-gradient(180deg, rgba(248, 162, 0, 1) 85%, rgba(162, 0, 134, 1) 85%);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    & .textos{
      width: 45%;
      padding: 150px 10%;
      & h2{
        color: #fff;
        font-weight: 700;
        margin: 0;
        font-size: 2.2rem;
      }
      & .cta{
        background: #58004F;
        padding: 15px 40px;
        margin-top: 40px;
        text-transform: uppercase;
        border-radius: 25px;
        color: #fff;
        font-weight: 600;
        width: max-content;
        max-width: 100%;
      }
    }
    & .formulario{
      width: 55%;
      background: url(../images/matriculas25/contato.webp) center;
      background-size: cover;
      padding: 200px 10%;
      & .form{
        background: #F2F2F2;
        padding: 50px 30px;
        border-radius: 25px;
        & label{
          width: 100%;
          margin: 10px 0;
          & input{
            width: 100%;
            background: #fff;
            border: solid 1px #fff;
            outline: 0;
            padding: 15px 30px;
            transition: .3s;
            border-radius: 20px;
            &:focus{
              border-color: #58004F;
            }
          }
        }
        & p, form{
          margin: 0;
        }
        & input[type="submit"] {
          -webkit-appearance: button;
          background: #f8a200;
          border: 0;
          outline: 0;
          padding: 15px 60px;
          border-radius: 25px;
          color: #fff;
          text-transform: uppercase;
          font-weight: 800;
          margin-top: 8px;
          transition: .3s;
          &:hover{
            background: #58004f;
          }
        }        
      }
    }
  }
  & .faq{
    padding: 100px 20%;
    & h2{
      text-align: center;
      color: #58004F;
      text-transform: uppercase;
      font-size: 2.5rem;
      font-weight: 700;
      margin: 0 auto 60px;
    }   
    
    #faqAccordion .card { border: 0; background: transparent; margin-bottom: 18px; }
    #faqAccordion .card-header { padding: 0; background: transparent; border: 0; }
    #faqAccordion .faq-toggle{
      width: 100%;
      text-align: left;
      border: 1px solid rgba(0,0,0,.12);
      border-radius: 22px;
      padding: 20px 56px 20px 30px;   
      background: #F8A200;          
      color: #58004F;               
      font-weight: 600;
      font-size: 1.2rem;
      line-height: 1.2;
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
      transition: background .2s ease, color .2s ease, box-shadow .2s ease;
    }
    #faqAccordion .faq-toggle:hover,
    #faqAccordion .faq-toggle:focus{
      background: #58004F;  
      color: #fff;
      outline: 0;
      box-shadow: 0 4px 12px rgba(0,0,0,.12);
    }
    #faqAccordion .faq-toggle[aria-expanded="true"]{
      background: #58004F;
      color: #fff;
    }
    #faqAccordion .faq-toggle .chevron{
      position: absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      transition: transform .2s ease, color .2s ease;
      color: currentColor;
    }
    #faqAccordion .faq-toggle[aria-expanded="true"] .chevron{
      transform: translateY(-50%) rotate(180deg);
      color: #fff;
    }
    #faqAccordion .card-body{
      padding: 16px 8px 0 8px; 
      a, strong{color: #58004F;}
    }
  }
  & footer{
    padding: 80px 10%;
    background: #F8A200;
    & .logos {
        display: flex;
        justify-content: center;
        gap: 50px;
        margin: 0;
        filter: brightness(100);
    }
    & .contatos {
      display: flex;
      flex-direction: row;
      gap: 50px;
      justify-content: center;
      margin: 60px 0;
      & .canal{
        color: #fff;
        font-size: 1.3rem;
        a{
          color: #fff;
          text-decoration: none;
        }
        i{
          color: #58004F;
        }
      }
    }
    & .redes {
      display: flex;
      flex-direction: row;
      gap: 25px;
      justify-content: center;
      .rede{
        color: #58004F;
        font-size: 3rem;
        text-decoration: none;
      }
    }
  }
  & .copy{
    background: #58004F;
    padding: 20px;
    img{
      margin: 0 auto;
      display: block;
      height: auto;
      width: auto;
    }
  }

  @media (max-width: 1441px){
    & .hero {
      & .overlay {
        padding: 30px;
        & a.agende {
          padding: 12px 30px;
          font-size: 1rem;
        }          
      }
    }
    & .colegio {
      padding: 60px;
      & h2{
        width: 615px;
        font-size: 2rem;
      }
      & p.intro{
        font-size: 1.1rem;
      }
      & .box {
        padding: 0 40px 40px;
        gap: 40px;
        & .box-destaque {
          padding: 0 25px 0px;
          & p {
            padding: 10px 0;
          }
          & h3 {
            font-size: 2.2rem;
          }
        }
        & .boxes {
          width: calc(80% - 40px);
          & .box-regular {
            & p {
              padding: 10px 0 0;
              font-size: .95rem;
              line-height: 1.3;
            } 
          }        
        }        
      }
    }
    & .ensinos{
      padding: 80px;
      background: url(../images/matriculas25/bg-light.webp) left -15% center, url(../images/matriculas25/bg-light.webp) right -15% center, #F8A200;
      background-repeat: no-repeat, no-repeat;
      background-size: auto 80%, auto 80%;      
      & h2 {
        font-size: 2.2rem;
      }
      & ul {
        & li {
          & .textos {
            h4 {
              padding: 15px 15px 15px 0; 
              &:before {
                width: 85px;
                margin-left: -85px;
              }
            }
            p {
              padding: 10px 15px 0 0px;
              font-size: .95rem;
            }
          }
        }
      }
    }
    & .national {
      padding: 60px;
    }
    & .destaques {
      background: url(../images/matriculas25/destaque-bg.webp) right -68px center #ffa301 no-repeat;
      background-size: cover;
      padding: 80px;
      & .lista {
        & .destaque {
          .frente, .verso {
              padding: 20px;
              & h4 {
                font-size: 1rem;
              }
          }
          & .verso {
            & h4 {
              font-size: 1.1rem;
            }
            & p {
              margin: 0;
              font-size: .9rem;
              line-height: 1.3;
            }            
          }
        }
      }        
    }
    & .depoimentos {
      & .conteudo {
          padding: 30px 5%;
      }
    }
    & .resultados {
      padding: 70px;  
      & h2{
        font-size: 2.2rem;
      } 
      .topicos{
        padding: 0;
      }
    }
    & .contato {
      & .textos {
        padding: 80px;
      }      
      & .formulario {
        padding: 80px;
      }
    }
    & .faq {
        padding: 70px 10%;
        & h2{
          font-size: 2.2rem;
          margin: 0 0 30px;
        }
    }   
    & footer {
        padding: 70px 10%;
    }
  }
  @media (max-width: 1024px){
    & .colegio {
      & .box {
        & .box-destaque {
          width: 35%;
        }
        & .boxes {
          width: calc(65% - 40px);
          flex-wrap: wrap;
          & .box-regular {
            width: calc(50% - 15px);
          }
        }
      }
    }
    & .ensinos {
      background: url(../images/matriculas25/bg-light.webp) left -50% center, url(../images/matriculas25/bg-light.webp) right -50% center, #F8A200;
      background-repeat: no-repeat, no-repeat;
      background-size: auto 80%, auto 80%;
      & ul {
        & li {
          flex-direction: column;
          text-align: center;
          & img {
            width: 50%;
            height: auto;
            display: block;
            margin: 0 auto -20px;
            z-index: 701;
          }
          & .textos {
            width: 100%;
            h4 {
                padding: 35px 30px 15px;
                &:before{
                  display: none;
                }
            }
            p {
              padding: 15px 30px 0;
              font-size: .95rem;
            }
          }            
        }
      }
      & h3 {
        font-size: 1.2rem;
        &:after {
          width: 150px;
        }
      }
    }
    & .destaques {
      background: url(../images/matriculas25/destaque-bg-mobile.webp) center bottom #ffa301 no-repeat;
      background-size: 100%;
      padding: 80px 60px 300px;
      & .lista {
        & .destaque {
          width: calc(33.33% - 12px);
        }
      }
      & .cta {
        width: 50%;
      }         
    }
    & .contato {
      & .textos {
        padding: 60px;
        & h2 {
          font-size: 1.8rem;
        }
      }
      & .formulario {
        padding: 60px;
        & .form {
          padding: 30px;
        }          
      }      
    }  
    & .resultados {
        padding: 80px 10%;
        background: url(../images/matriculas25/resultado-bg.webp) left -50% center, url(../images/matriculas25/resultado-bg.webp) right -50% center;
        background-repeat: no-repeat, no-repeat;
        background-size: auto 66%, auto 66%;
    }      
  }
  @media (max-width: 768px){ 
    & .hero {
      & .overlay {
        padding: 0;
        background: transparent;
        & a.agende {
          padding: 15px 40px;
          font-size: .9rem;
          line-height: 1;
          border-radius: 30px 30px 0 0;
        }        
      }
    }
    & .ensinos {
      padding: 40px;
      & ul {
        margin: 30px 0;
        & li {
          & .textos {
            p {
                padding: 15px 15px 0;
                font-size: .90rem;
            }
          }
        }
      }      
    }
    & .depoimentos {
      flex-wrap: wrap;
      flex-direction: column-reverse;
      & img {
        width: 100%;
      }
      & .conteudo {
        width: 100%;
        padding: 40px;
      }
    }
  }
  @media (max-width: 480px){ 
    & .hero {
      overflow: visible;
      & .overlay {
        padding: 0;
        background: transparent;
        position: relative;
        height: auto;
        & a.agende {
          padding: 15px 40px;
          font-size: .9rem;
          line-height: 1;
          border-radius: 0;
          width: 100%;
          text-align: center;
        }
      }
    }
    & .colegio {
      padding: 30px;
      margin: 0 auto 5px;
      & h2 {
        font-size: 1.6rem;
      }
      & p.intro {
        font-size: 1rem;
      }
      & .box {
        & .box-destaque {
          width: 100%;
          padding: 0 30px 30px;
        }
        & .boxes {
          width: 100%;
          flex-wrap: wrap;
            & .box-regular {
            width: 100%;
            & p {
              padding: 15px 0;
              font-size: 1rem;
              line-height: 1.5;
              min-height: auto;
            }            
          }
        }
      }
    }
    & .ensinos {
      background: #F8A200;
      & h2 {
        font-size: 1.6rem;
      }
      & ul {
        & li {
          width: 100%;
        }
      }
    } 
    & .national {
      padding: 40px;
      & .textos {
        width: 100%;
        & h2{
          font-size: 1.5rem;
        }
        & p{
          font-size: 1rem;
        }
      }
    }   
    & .destaques {
      padding: 40px 40px 215px;
      & .lista {
        & .destaque {
        width: 100%;
          .frente, .verso {
            aspect-ratio: 1/1;
            padding: 30px;
          }
        }
      }
      & .cta {
        width: 100%;
        margin-top: 30px;
      }
    }
    & .depoimentos {
      & .conteudo {
        & h2 {
            font-size: 1.6rem;
            margin: 0 0 5px;
        }
      }
      .owl-dots {
        margin-top: 10px !important;
      }
    }   
    & .resultados {
      padding: 40px 30px;
      background: #fff;
      & h2{
        font-size: 1.6rem;
        margin: 0 0 20px;        
      }
    } 
    & .contato{
      .textos, .formulario {
        width: 100%;
      }
      .textos{
        padding: 40px 30px;
        & h2 {
          font-size: 1.6rem;
          text-align: center;
        }
        & .cta {
          font-size: .9rem;
          margin: 10px auto 0;
        }
      }
      .formulario{
        padding: 30px;
        & .form {
          padding: 20px;
          border-radius: 15px;
        }
      }
    }
    & .faq {
      padding: 40px 30px;
      & h2{
        font-size: 1.6rem;
      }
      #faqAccordion .faq-toggle {
        font-size: 1rem;
      }
    } 
    & footer {
      padding: 40px 30px;
      & .logos{
        gap: 25px;
        & img {
          width: 135px;
          height: auto;
          display: block;
        }
      }
      & .contatos {
        flex-direction: column;
        gap: 15px;
        margin: 35px 0;
        align-items: center;
      }
    }
    & .redes {
      .rede {
        font-size: 2rem;
      }
    }
  }
}