@font-face {
       font-family: 'DM Sans';
       src: url('https://landing-pages-smart.s3.us-east-1.amazonaws.com/smart-fit-run-25-nov/assets/DM_Sans-Montserrat/DM_Sans/DMSans-Medium.woff2') format('woff2');
       font-weight: 500;
       font-style: normal;
       font-display: swap;
   }

   @font-face {
       font-family: 'Montserrat';
       src: url('https://landing-pages-smart.s3.us-east-1.amazonaws.com/smart-fit-run-25-nov/assets/DM_Sans-Montserrat/Montserrat/Montserrat-SemiBold.woff2') format('woff2');
       font-weight: 600;
       font-style: normal;
       font-display: swap;
   }


   html,
   body {
       font-family: 'DM Sans', sans-serif;
       font-weight: 500;
       margin: 0;
       padding: 0;
       background-color: #fff;
       overflow-x: hidden;
   }

   .container {
       max-width: 1104px;
   }

   .no-gutter {
       --bs-gutter-x: 0;
       --bs-gutter-y: 0;
   }

   body p {
       font-size: 16px;
   }

   h2 {
       font-size: 32px;
   }

   .header {
       font-family: 'Montserrat', sans-serif;
       background-color: #000;
       color: #fff;
       padding: 15px 0;
   }

   .header .nav-link {
       color: #fff;
   }

   .nav-menu {
       gap: 9px;
   }

   .nav-link.small-link {
       font-size: 13px;
       padding: 5px 3px;
       white-space: nowrap;
   }

   .logo-img {
       max-width: 120px;
   }

   /* Estilo do Mobile */
   @media (max-width: 767.98px) {
       .header {
           font-family: 'Montserrat', sans-serif;
           background-color: #fff;
           color: #000;
           padding-top: 20px;
       }

       .nav-menu {
           display: none !important;
       }

       .hamburger {
           font-size: 26px;
           cursor: pointer;
           color: #000;
       }

       .mobile-menu {
           display: none;
           position: absolute;
           top: 70px;
           right: 10px;
           background: #fff;
           border-radius: 12px;
           box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
           padding: 20px;
           width: 94%;
           max-width: 390px;
           z-index: 999;
           flex-direction: column;
       }

       .mobile-menu a {
           display: block;
           margin: 12px 0;
           text-decoration: none;
           color: #000;
           font-size: 16px;
           font-weight: 500;
       }

       .close-btn {
           position: absolute;
           top: 15px;
           right: 15px;
           background: none;
           border: none;
           cursor: pointer;
           padding: 0;
           width: 26px;
           height: 26px;
       }

       .close-btn svg {
           width: 100%;
           height: 100%;
           transition: all 0.3s ease;
       }

       .close-btn:hover svg circle {
           fill: black;
       }

       .close-btn:hover svg line {
           stroke: white;
       }

   }

   .hero-banner {
       background-color: #fff;
       display: flex;
       justify-content: center;
   }

   .hero-banner .banner-wrapper {
       background-color: #000;
       /* fundo atrás da imagem */
       border-radius: 15px;
       padding: 10px;
       padding-top: 25px;
       /* espaço entre borda preta e a imagem */
       display: flex;
       justify-content: center;
       margin: 0 auto;
   }

   .banner-img {
       border-radius: 12px;
       width: 100%;
       height: auto;
       display: block;
   }

   .banner-desktop {
       margin-top: 25px;
   }



   @media (max-width: 767.98px) {
       body p {
           font-size: 16px;
       }

       .logo-container {
           flex: 0 0 auto;
       }

       .nav-menu {
           flex: 1 1 auto;
           justify-content: end;
           gap: 5px;
       }



       .logo-img {
           max-width: 81px;
       }

       .nav-link.small-link {
           font-size: 6.5px;
           padding: 12px 2px;
           font-weight: 900;
       }

       .hero-banner .banner-wrapper {
           padding-top: 10px;
       }
   }

   .hero-banner .banner-wrapper {
       background-color: #fff;
   }

   /* Mobile */
   .mobile-banner {
       width: 95%;
       justify-content: center;
       background: none;
       /* remove fundo preto */
       padding: 0;
       /* sem padding */
   }

   .mobile-banner .banner-img {
       width: 100%;
       height: auto;
       border-radius: 12px;
       display: block;
   }

   section {
       margin: 0;
       padding: 0;
   }

   .section {
       padding: 100px 0px;
   }

   .como-funciona-max-width {
       max-width: 820px;
   }

   .text-como-funciona {
       text-align: start;
       position: absolute;
       bottom: 80px;
       width: 75%;
       left: 70px;
       right: 20px;
       color: #fff;
   }

   .text-como-funciona h5 {
       font-size: 32px;
       margin-bottom: 10px;
   }

   .text-como-funciona p {
       font-size: 16px;
   }

   .premiacao {
       color: #000;
   }

   @media (max-width:1385px) {
       .text-como-funciona {
           text-align: start;
           bottom: 55px;
           width: 77%;
           left: 55px;
           right: 50px;
           color: #fff;
       }

       .text-como-funciona h5 {
           font-size: 22px;
           margin-bottom: 10px;
       }

       .text-como-funciona p {
           font-size: 12.3px;
       }

       .premiacao {
           color: #000;
       }
   }

   @media (max-width:1155px) {
       .text-como-funciona {
           text-align: center;
           bottom: 145px;
           width: 75%;
           /* distância da base da imagem */
           left: 70px;
           right: 20px;
           color: #fff;
       }

       .text-como-funciona h5 {
           font-size: 32px;
           margin-bottom: 10px;
       }

       .text-como-funciona p {
           font-size: 16px;
       }

       .premiacao {
           color: #000;
       }
   }

   @media (max-width:455px) {
       .text-como-funciona {
           text-align: center;
           bottom: 90px;
           width: 77%;
           left: 50px;
           right: 50px;
           color: #fff;
       }

       .text-como-funciona h5 {
           font-size: 30px;
           margin-bottom: 10px;
       }

       .text-como-funciona p {
           font-size: 15px;
       }

       .premiacao {
           color: #000;
       }
   }

   @media (max-width:400px) {
       .text-como-funciona {
           text-align: center;
           bottom: 75px;
           width: 73%;
           left: 48px;
           color: #fff;
       }

       .text-como-funciona h5 {
           font-size: 27px;
           margin-bottom: 10px;
       }

       .text-como-funciona p {
           font-size: 14px;
       }

       .premiacao {
           color: #000;
       }
   }

   @media (max-width:360px) {
       .text-como-funciona {
           text-align: center;
           bottom: 75px;
           width: 73%;
           left: 48px;
           color: #fff;
       }

       .text-como-funciona h5 {
           font-size: 24px;
           margin-bottom: 10px;
       }

       .text-como-funciona p {
           font-size: 12.7px;
       }

       .premiacao {
           color: #000;
       }
   }

   /* @media (max-width: 767.98px) {
       .mobile-divider {
           border-top: 1px solid #ccc;
           max-width: 97%;
       }

       h2,
       h5 {
           font-size: 20px;
       }
   } */


   .chosen-container-single .chosen-single {
       height: 58px;
       line-height: 58px;
       background: #fff;
   }

   .chosen-container-single .chosen-single div b {
       top: 50%;
       position: absolute;
       height: 20px;
       margin-top: -10px;
   }

   .form {
       background-color: #000;
       color: #fff;
       padding: 50px 0;
   }

   .text-form {
       max-width: 1200px;
   }

   .form h3 {
       font-size: 32px;
   }

   .form p {
       font-size: 16px;
   }

   .form button {
       font-size: 17px;
   }

   @media (max-width: 700px) {

       .form h3 {
           font-size: 32px;
       }

       .form button {
           font-size: 15px;
       }
   }

   .input-group .input-group-text {
       border-right: none;
       background-color: #fff;
       font-size: 20px;
       /* para manter o fundo igual ao input */
   }

   .input-group .form-control,
   .input-group .form-select {
       border-left: none;
       border-radius: 0 0.375rem 0.375rem 0;
   }

   .faq-item {
       background-color: transparent;
       /* Herda a cor de fundo da seção */
       border: none;
       /* Remove bordas laterais e superior */
   }

   .faq-question {
       background: none;
       border: none;
       font-size: 1.1rem;
       cursor: pointer;
       outline: none;
       transition: background-color 0.3s ease;
       position: relative;
       /* Para posicionar a seta */
   }

   .faq-question:hover {
       background-color: rgba(0, 0, 0, 0.1);
       /* Efeito hover sutil */
   }

   .faq-arrow {
       display: inline-flex;
       align-items: center;
       transition: transform 0.3s ease;
   }

   .faq-question.active .faq-arrow {
       transform: rotate(180deg);
       /* Gira a seta para cima quando aberta */
   }

   .faq-answer {
       display: none;
       background-color: transparent;
       /* Herda a cor de fundo da seção */
   }

   .faq-item.active .faq-answer {
       display: block;
   }

   .faq-item p {
       color: #000;
   }

   .faq-item button {
       color: #000;
   }

   .faq h2 {
       font-size: 32px;
   }

   .faq p {
       font-size: 15px;
   }

   /* Estilo do botão X dos modais */
   .modal .btn-close {
       width: 23px;
       height: 23px;
       background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/0.8em auto no-repeat;
       border: 2px solid #000;
       border-radius: 50%;
       opacity: 1;
       padding: 0;
   }

   .modal .btn-close:hover {
       opacity: 0.7;
   }

   .form-control.is-invalid,
   .form-select.is-invalid {
       border-color: #dc3545;
       box-shadow: none;
   }

   .chosen-container.is-invalid .chosen-single {
       border-color: #dc3545;
       box-shadow: none;
   }

   .academia-select {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
   }

   .academia-select+.chosen-container-single .chosen-single,
   .academia-select+.chosen-container .chosen-single {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
       border-color: #ced4da;
       padding: 16px 40px 16px 16px;
       height: auto;
       line-height: 1.4;
   }

   .academia-select+.chosen-container-single .chosen-single span,
   .academia-select+.chosen-container-single .chosen-default span {
       color: #333;
       font-size: 16px;
       font-weight: 500;
   }

   .academia-select+.chosen-container-single .chosen-single div b {
       background: none;
       width: 16px;
       height: 16px;
       margin-top: -8px;
       padding-right: 50px;
   }

   .academia-select+.chosen-container-single .chosen-single div b::after {
       content: '';
       display: block;
       width: 8px;
       height: 8px;
       margin: auto;
       margin-top: 2px;
       border-right: 2px solid #333;
       border-bottom: 2px solid #333;
       transform: rotate(45deg);
   }