@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style-type: none;
    

}

:root {
    --primary: #0053a9;
    --muted: #d4e6fc;
    --bgCTA: #9fe9ff;
    --secondary:  #F75652;
    --text-primary:  #000000;
    --text-secondary:  #d1d5dc;
    --badge-bg: #FFFFFF;
    --badge-text: #F75652;
    --white: #FFFFFF;
    --dropdown-bg: rgb(252, 253, 251);
    --shadow: rgba(32, 7, 65, 0.14);
    --container: 124rem;
    --nav-height: 7rem;
    --primary-color: #fff;
    --green: #00af00;
    --gradient: linear-gradient(45deg, #00196D, #00196D, red, #00196D, #00196D);
    --padding-x: 2em;
    --borderRadius: 8px;

  /* a */



  
  
  }
  .icon {
    color: var(--primary);
  }

  .sup{
    vertical-align: super;
  
    color: var(--primary);
   padding: 3px;
   font-size:1rem;
  }

.new-warp {
  margin: 2rem;

}


  .btn-green {
    padding: 2rem!important;
    font-weight: 500!important;
    color: var(--white)!important;
    background-color: var(--green);
  }
  
.fromp-container {
  display: flex;
  justify-content: center;
  margin-bottom: 4rem;

}


.fromp-progress-bar {
  display: flex;
  align-items: center;
}

.fromp-progress-step {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #0053a9;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.factive {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background-color: #F75652;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}


.fromp-connector {
  height: 2px;
  width: 50px;
  /* Ajuste o comprimento conforme necessário */
  background-color: #ccc;
}



.l li{
  margin: 1.2rem;
}


@media (max-width: 420px) {
.hide-mobile {
  display: none!important;
}

.grid-two-thirds{
  grid-column: auto / span 12!important;
}



}



.btn-primary-cta {
  transition: all .3s ease;
  display: flex;
  justify-content: center;
  gap: 1rem;

  align-items: center;
  text-align: center;
  width: 300px;
  height: 6rem;
  color: var(--white);
  background: var(--primary);
  font-size: 1.9rem;
  font-weight: 500;
  padding: 0.6rem 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-radius: var(--borderRadius);
}


.btn-primary-cta:hover {
  background-color: var(--primary-color);
  color: var(--primary);
  font-weight: 700;
  width: 320px;
  height: 6.1rem;
  border: 1px solid var(--primary);
  box-shadow: 0 0 10px var(--primary);



}












.animationBG{
  position: relative;
  z-index: 1;
  inset: 0;
  height: 12px;
  margin-top: 40px;;
  background-size: 300%;
  background-image: var(--gradient);
  animation: bg-animation 32s infinite;
}
@keyframes bg-animation {
  0% {background-position: left}
  50% {background-position: right}
  100% {background-position: left}
}


/* testemunhos inicio*/

#testemunhos{
  background-color: var(--primary);
  color: var(--primary-color);
}


.testimonial-slider {
  
  width: 100%;
  padding: 60px;

  text-align: center;
  position: relative;
  overflow: hidden;
}



@media (max-width: 425px) {

  .testimonial-slider {
  
    width: 100%;
    padding: 0px;
    padding-top: 32px;
    padding-bottom: 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }


}
.testimonial-list {
  display: flex;
  overflow: hidden;
}

.testimonial {
  flex: 1 0 100%;
  text-align: center;
  padding: 20px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial i {
  font-size: 4rem;
  color: var(--primary-color);
  opacity: 0.75;
}






.testimonial blockquote {
  font-size: 1.6rem;
  margin-inline: 20px;
  margin-top: 10px;
  color: var(--primary-color);
}

.user-info {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.user-info img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.user-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user-details .name {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--primary-color);
}

.user-details .company {
  color: var(--primary-color);
}

/* button navigation */

.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  font-size: 1.5rem;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--primary-color);
  transition: 0.3s;
  opacity: 0;
}

.testimonial-slider:hover .nav {
  opacity: 1;
}



.nav.prev {
  left: 10px;
}

.nav.next {
  right: 10px;
}

/* dot navigation */

.dots-container {
  text-align: center;
}

.dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 5px;
  margin-inline: 5px;
  background-color: var(--primary-color);
  opacity: 0.5;
  transition: width 0.5s;
}

.dot.active {
  width: 30px;
  background-color: var(--primary-color);
  opacity: 1;
}
/* testemunhos fim*/



/* comparação table */


.comparison {
  max-width: 1000px;
  margin: 0 auto;
  
  color: var(--background);
  
  padding: 8px 10px 75px 10px;
}
.comparison table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  border-bottom: 1px solid #e6e6e6;
}
.comparison td, .comparison th {
  border-right: 1px solid #e6e6e6;
  empty-cells: show;
  padding: 16px;
}
.compare-heading {
  
  color: #4b4b4b;
  font-weight: bold !important;
  border-bottom: 0 !important;
  padding-top: 10px !important;
}
.comparison tbody tr:nth-child(odd) {
  display: none;
}
.comparison .compare-row {
  background: #fff;
  border: 1px solid #e6e6e6;
}
.comparison .fa-check {
  color: #048383;
  font-size: 20px;
}
.comparison .fa-remove {
  color: #ef7473;
  font-size: 20px;
}
.comparison .fa-info-circle {
  color: #cccccc;
  font-size: 20px;
}
.comparison th {
  font-weight: normal;
  padding: 0;
  border-bottom: 1px solid #e6e6e6;
  font-size: 16px;
  color: #757575;
}
.comparison tr td:first-child {
  text-align: left;
  border: 1px solid #e6e6e6;
}
.comparison .qbse, .comparison .qbo, .comparison .tl {
  color: #4a4a4a;
  padding: 10px;
  
  font-weight: bold;
  border-right: 1px solid #e6e6e6;
  border-bottom: 0;
}
.comparison .tl2 {
  border-right: 0;
}
.comparison .qbse {
  background: #0078c1;
  border-top-left-radius: 3px;
  border-left: 0px;
}
.comparison .qbo {
  background: #F7F7F7;
  border: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  color: rgb(75, 75, 75);
  font-size: 20px;
}
.comparison .price-info {
  padding: 10px 15px 15px 15px;
}
.comparison .price-now, .comparison .price-now span {
  color: #4a4a4a;
}
.comparison .price-now span {
  color: #4a4a4a;
  font-size: 36px;
  
  font-weight: 400;
  margin: 0px -6px 0px 0px;
}
.comparison .price-small {
  color: #4a4a4a;
  font-size: 20px !important;
  
  position: relative;
  top: -11px;
  left: -7px;
}
.comparison .price-buy {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-weight: 500;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 6rem;
  margin-bottom: 12px;
  color: var(--white);
  background: var(--primary);
  font-weight: 500;
  padding: 0.6rem 1.5rem;
  
  border-radius: var(--borderRadius);
}


.comparison .price-buy-a {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-weight: 500;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 6rem;
  margin-bottom: 12px;
  color: var(--primary);
  background: var(--white);
  border: 1px solid var(--primary);
  font-weight: 500;
  padding: 0.6rem 1.5rem;
  
  border-radius: var(--borderRadius);
}


.comparison .price-buy-a:hover{
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-weight: 500;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 6rem;
  margin-bottom: 12px;
  color: var(--white);
  background: var(--primary);
  font-weight: 500;
  padding: 0.6rem 1.5rem;
  
  border-radius: var(--borderRadius);
}






.comparison .monthly-cta {
  background: #fff;
  color: #000;
  border: 1px solid rgb(0, 0, 0);
}
.comparison .annual-cta {
  background: #000;
  color: #fff;
  border: 1px solid rgb(0, 0, 0);
}
.comparison .monthly-cta:hover {
  background: #D6D3EB;
  color: rgb(0, 0, 0);
  border: 1px solid #D6D3EB;
}
.comparison .annual-cta:hover {
  background: #D6D3EB;
  color: rgb(0, 0, 0);
  border: 1px solid #D6D3EB;
}
.comparison .price-try {
  font-size: 12px;
}
.comparison .price-try a {
  color: #202020;
}
@media (max-width: 767px) {
  .comparison {
      font-size: 14px;
 }
  .comparison .qbo {
      background: none;
 }
  .comparison td:first-child, .comparison th:first-child {
      display: none;
 }
  .comparison tbody tr:nth-child(odd) {
      display: table-row;
      background: #f7f7f7;
 }
  .comparison .row {
      background: #fff;
 }
  .comparison td, .comparison th {
      border: 1px solid #e6e6e6;
 }
  .price-info {
      border-top: 0 !important;
 }
}
@media (max-width: 639px) {
 .comparison .price-info {
  padding: 10px 5px 10px 5px;
 }
  .comparison .price-buy {
      padding: 12px 10px;
      letter-spacing: 0.6px;
      font-size: 12px;
      min-width: 0px;
 }
  .comparison td, .comparison th {
      padding: 10px 5px;
 }
  .comparison .hide-mobile {
      display: none;
 }
  .comparison .price-now span {
      font-size: 24px;
      margin: 0px -2px 0px 0px;
 }
  .comparison .price-small {
      font-size: 24px !important;
      top: 0;
      left: -0.5;
 }
  .comparison .qbse, .comparison .qbo {
      font-size: 16px;
      padding: 10px 5px;
 }
  .comparison .price-buy {
      margin-top: 16px;
 }
  .compare-heading {
      font-size: 10px !important;
 }
 .comparison th {
  font-size: 12px;
}
}
@media (max-width: 425px) {
 /* Add a pseudo element with the text from attribute 'data-abbr' to shorten the CTA text */
  #choose-plan-cta[data-abbr]::after {
      content: attr(data-abbr);
 }
 /* Hide the original CTA text */
  #choose-plan-cta > span {
      display: none;
 }
}
.tooltip {
  width: 16px;
  height: 16px;
  border-radius: 10px;
  border: 2px solid #fff;
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
}
.comparison .fa-info-circle:hover {
  -webkit-animation-play-state: paused;
}
.comparison .fa-info-circle:hover .tooltip-info {
  visibility: visible;
}
.comparison .fa-info-circle:active {
  -webkit-animation-play-state: paused;
}
.comparison .fa-info-circle:active .tooltip-info {
  visibility: visible;
}
.tooltip-info {
  width: 200px;
  padding: 10px;
  background: rgba(255, 255, 255, 1);
  border-radius: 3px;
  position: absolute;
  visibility: hidden;
  margin: -130px 0 0 -100px;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
}
.tooltip-title {
  font-family: "Avenir Next Demi", Roboto, Helvetica, Arial, sans-serif;
  color: #4b4b4b;
  font-weight: 400;
  font-size: 20px;
  text-align: center;
  margin: 0 0 5px 0;
}
.tooltip-text {
  font-family: "Avenir Next", Roboto, Helvetica, Arial, sans-serif;
  color: #4b4b4b;
  font-weight: 400;
  font-size: 15px;
  text-align: center;
}
.tooltip-arrow {
  position: absolute;
  margin: 10px 0 0 88px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
}


/* fim comparação */






/* ICONS GRID */


.icons-container {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  
}
.icons-itemhome {
  background-color: #fff;
  border: 0px solid var(--primary);
  border-radius: var(--borderRadius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 5px;
  width: calc(100% / 7 - 10px);
  -webkit-box-shadow: 0px 0px 71px -3px rgba(0,25,109,0.43);
  -moz-box-shadow: 0px 0px 71px -3px rgba(0,25,109,0.43);
  box-shadow: 0px 0px 71px -3px rgba(0,25,109,0.43);
  box-sizing: border-box;

& .icon {
  font-size: 40px;
  margin-bottom: 10px;
  color: var(--primary);
}
& .text {
  font-size: 0.8em;
  font-weight: 600;
  text-align: center;
  color: var(--primary);
}

}
@media (max-width: 1200px) {
  .icons-item {
      width: calc(100% / 3 - 20px);
  }
}
@media (max-width: 768px) {
  .icons-item {
      width: calc(100% / 2 - 20px);
  }
}
@media (max-width: 480px) {
  .icons-item {
      
      margin: 10px 0;
  }
}

.icons-item {
  background-color: #fff;
  border: 0px solid var(--primary);
  border-radius: var(--borderRadius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 5px;
  width: calc(100% / 6 - 10px);
  -webkit-box-shadow: 0px 0px 71px -3px rgba(0,25,109,0.43);
  -moz-box-shadow: 0px 0px 71px -3px rgba(0,25,109,0.43);
  box-shadow: 0px 0px 71px -3px rgba(0,25,109,0.43);
  box-sizing: border-box;

& .icon {
  font-size: 40px;
  margin-bottom: 10px;
  color: var(--primary);
}
& .text {
  font-size: 0.8em;
  font-weight: 600;
  text-align: center;
  color: var(--primary);
}

}
@media (max-width: 1200px) {
  .icons-item {
      width: calc(100% / 3 - 20px);
  }
}
@media (max-width: 768px) {
  .icons-item {
      width: calc(100% / 2 - 20px);
  }
}
@media (max-width: 480px) {
  .icons-item {
      
      margin: 10px 0;
  }
}

/* FIM ICONS */


/*   FORMULARIO */

.error-message {
  display: none;
  background-color: #ff6b6b;
  color: #fff;
  padding: 12px;
  border-radius: var(--borderRadius);
  margin-bottom: 50px;
  text-align: center;
  animation: shockwaveJump 1s ease-out;
  font-size: 2.2rem;
  font-weight: 600;
  &:after {
    @include afterBg;
    animation: shockwave 1s .65s ease-out ;
  }
  
  &:before {
    @include afterBg;
    animation: shockwave 1s .5s ease-out ;
  }
}


.success-message {
  display: none;
  background-color: #46c000;
  color: #fff;
  padding: 12px;
  border-radius: var(--borderRadius);
  margin-bottom: 50px;
  text-align: center;
  animation: shockwaveJump 1s ease-out;
  font-size: 2.2rem;
  font-weight: 600;
  &:after {
    @include afterBg;
    animation: shockwave 1s .65s ease-out ;
  }
  
  &:before {
    @include afterBg;
    animation: shockwave 1s .5s ease-out ;
  }
}

@keyframes shockwaveJump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.08);
  }
  50% {
     transform: scale(0.98);
  }
  55% {
    transform: scale(1.02);
  }
  60% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shockwave {
  0% {
    transform: scale(1);
    box-shadow: 0 0 2px rgba(0,0,0,0.15), inset 0 0 1px rgba(0,0,0,0.15);
  }
  95% {
    box-shadow: 0 0 50px rgba(0,0,0,0), inset 0 0 30px rgba(0,0,0,0);
  }
  100% {
    transform: scale(2.25);

  }
}

.error {
  border: 2px solid red !important;
  box-shadow: 0 0 10px red;
  animation: .4s jump ease  alternate;
}

@keyframes jump {
  0% {
    transform: scale(1);
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
  }
  0% {
    transform: scale(1);
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
  }
}


.h-red {
 & h1{
  margin-top: 32px;
  font-size: 5rem;
    font-weight: 700;
  
 } 
 & h2{
  margin-top: 32px;
  font-size: 3.6rem;
  margin-bottom: 32px;
    font-weight: 700;
    text-align: center;
  
 } 

 & h3{
  margin-top: 16px;
  font-size: 2.6rem;
  margin-bottom: 16px;
    font-weight: 600;
    text-align: center;

 } 
  & span{
  color: var(--secondary);
}
  & p {
    margin-top: 22px;
  }
}

.form-step { display: none; }
        .form-step.form-active { display: block; }
        .form-container {
            display: flex;
            justify-content: center;
            align-items: center;
            
            color: var(--primary-color);
        }
        .form-container-a {
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: var(--muted);
          color: var(--text-primary);
          padding: 3rem;
          border-radius: 3rem;
          margin: 2rem;
          -webkit-box-shadow:0px 0px 25px 6px rgba(0, 4, 255, 0.19);
          -moz-box-shadow: 0px 0px 25px 6px rgba(0, 4, 255, 0.19);
          box-shadow: 0px 0px 25px 6px rgba(0, 4, 255, 0.19);
      }



      .form-container-contacto {
        display: flex;
        justify-content: center;
        align-items: center;
        
        color: var(--text-primary);
        padding: 1.6rem;
        
        
       
    }





      .form-container-b {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--badge-bg);
        color: var(--text-primary);
        border-radius: var(--borderRadius);
        padding: 2rem;
    }

        .radio-tile-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .input-container {
            position: relative;
            height: 24rem;
            width: 24rem;
            margin: 0.5rem;
        }

        .input-container-back {
          position: relative;
          margin-bottom: 4rem;
          width: 24rem;
          margin: 0.5rem;
      }

      
      
      .form-row {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
        }
        
        .form-row.full-width {
          display: block;
          }
          
          .input-form-container {
    
            padding: 20px;
            width: 100%;
        }

        .form-container input {
          width: 100%;
          padding: 10px;
          margin-bottom: 15px;
          border: 2px solid white;
          border-radius: var(--borderRadius);
          background-color: var(--primary);
          color: var(--primary-color);
          font-size: 1.6rem;
          outline: none;
          transition: box-shadow 0.3s ease-in-out;
      }


      .form-container input::placeholder{
        color:var(--primary-color);
      }

      .form-container input:focus {
          box-shadow: 0 0 10px #ffffff;
      }


      .input-form-container-a {
    
        padding: 20px;
        width: 100%;
    }
    
    .form-container-a input {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 2px solid #000;
      border-radius: var(--borderRadius);
      background-color: var(--muted);
      color: var(--text-primary);
      font-size: 1.6rem;
      outline: none;
      transition: box-shadow 0.3s ease-in-out;
  }


  .form-container-a input::placeholder{
    color:var(--text-primary);
  }

  .form-container-a input:focus {
      box-shadow: 0 0 10px var(--muted);
  }


  







  .input-form-container-contacto {
    
    padding: 20px;
    width: 100%;
}

.form-container-contacto input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 2px solid #000;
  border-radius: var(--borderRadius);
  background-color: var(--muted);
  color: var(--text-primary);
  font-size: 1.6rem;
  outline: none;
  transition: box-shadow 0.3s ease-in-out;
}


.form-container-contacto input::placeholder{
color:var(--text-primary);
}

.form-container-contacto input:focus {
  box-shadow: 0 0 10px var(--muted);
}



.form-container-contacto textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 2px solid #000;
  border-radius: var(--borderRadius);
  background-color: var(--muted);
  color: var(--text-primary);
  font-size: 1.6rem;
  outline: none;
  transition: box-shadow 0.3s ease-in-out;
}


.form-container-contacto textarea::placeholder{
color:var(--text-primary);
}

.form-container-contacto textarea:focus {
  box-shadow: 0 0 10px var(--muted);
}















        .input-container input[type="radio"] {
            position: absolute;
            height: 100%;
            width: 100%;
            margin: 0;
            cursor: pointer;
            z-index: 2;
            opacity: 0;
        }

        .input-container .radio-tile {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            border: 2px solid var(--text-primary);
            border-radius: var(--borderRadius);
            transition: all 300ms ease;
        }



        .input-container label {
            color: var(--text-primary);
            font-size: 1.8rem;
            font-weight: 500;
            text-align: center;
            margin-top: 20px;
            letter-spacing: 1px;
        }

        input:checked+.radio-tile {
            background-color: var(--primary-color);
            box-shadow: 0 0 12px var(--primary-color);
            transform: scale(1.1);
        }

        input:hover+.radio-tile {
            box-shadow: 0 0 12px var(--primary-color);
        }

        input:checked+.radio-tile ion-icon,
        input:checked+.radio-tile label {
            color: #1E2B35;
        }

        .tit {
            margin-bottom: 4em;
            text-align: center;

        }

/*   FORMULARIO */





/*
timeline
*/



.tl-steps {
  max-width: 600px;
  margin: 0 auto;
}

.tl-step {
  display: flex;
  position: relative;
  

  &:after {
    content: "";
    position: absolute;
    left: 15px;
    top: 32px;
    height: 0;
    width: 2px;
    background-color: var(--primary);
  }

  .info {
    margin: 8px 0 20px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--primary);
  }

  .text {
    font-size: 12px;
    color: var(--primary);
    padding-bottom: 0;
    margin: 0;
  }

  &:not(:last-child) {
    &:after {
      height: 75%;
    }
   
  }
}

.number {
  width: 32px;
  height: 32px;
  background-color: var(--primary);
  border-radius: 50%;
  border: 2px solid var(--primary);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary-color);
  font-size: 15px;
  font-weight: 600;
  margin-right: 14px;

  &.completed {
    background-color: var(--primary);
  }

  svg {
    width: 16px;
    height: 16px;
    object-fit: contain;

    path {
      fill: var(--primary);
    }
  }
}




/* end timeline */
.logo-footer img{
  max-width: 18rem!important;
}


.logo img{
  max-width: 26rem;
}


.t-center{
  text-align: center;
}





.flex-conteiner{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch; /* Alinha todos os itens do grid verticalmente */
  margin: 0 -0.8rem; /* Ajusta a margem para compensar o espaço extra das margens internas dos itens */
}


.flex-total {
  flex: 100%; /* Toma 25% da largura do contêiner, ajusta automaticamente para menos se houver mais de quatro */
  display: flex; /* Usa Flexbox para controlar o layout interno */
  flex-direction: column; /* Organiza o conteúdo verticalmente */
  padding: 0.8rem; /* Espaço ao redor de cada caixa para evitar que toquem umas nas outras */
}

.flex-fourth.vcenter {
  flex: 1 1 25%; /* Mantém a configuração anterior de largura */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Alinha os itens ao topo (início do eixo transversal) */
  padding: 0.8rem; /* Mantém a configuração anterior de espaçamento */
  overflow: hidden; /* Garante que todo o conteúdo extra seja ocultado */
}

.item-box-ga {
  background: var(--white);
  padding: 3rem;
  border-radius: 3rem;
  box-shadow: 0px 0px 25px 6px rgba(0, 4, 255, 0.19);
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Espalha o conteúdo a partir do topo */
  height: 100%; /* Garante que cada caixa utilize todo o espaço vertical disponível */
  overflow: auto; /* Permite a rolagem interna se o conteúdo exceder a altura */
}


/* Media Queries para dispositivos móveis */
@media (max-width: 767px) {
  .flex-container {
      flex-direction: column;
      align-items: center;
  }

  .flex-fourth.vcenter, .flex-total {
      flex: 1 1 100%; /* Cada item ocupa 100% da largura em dispositivos móveis */
  }

  .item-box-g {
      margin-bottom: 1.6rem; /* Espaçamento entre as caixas em dispositivos móveis */
  }
}

/* Media Queries para Tablets */
@media (min-width: 768px) and (max-width: 991px) {
  .flex-fourth.vcenter {
      flex: 1 1 50%; /* Cada item ocupa metade da largura do contêiner em tablets */
  }

  .flex-total {
      flex: 1 1 100%; /* Mantém a largura total para itens que precisam ocupar uma linha inteira */
  }
}

/* Media Queries para Desktops */
@media (min-width: 992px) {
  .flex-fourth.vcenter {
      flex: 1 1 25%; /* Cada item ocupa um quarto da largura do contêiner em desktops */
  }

  .flex-total {
      flex: 1 1 100%; /* Mantém a largura total para itens que precisam ocupar uma linha inteira */
  }
}






.grid-fourth.vcenter {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Isso ajuda a espalhar o conteúdo dentro de cada item, se necessário */
  height: 100%; /* Garante que cada item ocupe a altura total disponível */
}

.item-box-g {
  margin: 0.8rem!important;
  background: var(--white);
  padding: 3rem;
  border-radius: 3rem;
  box-shadow: 0px 0px 25px 6px rgba(0, 4, 255, 0.19);
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Espalha o conteúdo internamente */
}


.grid-conteiner{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  
  box-sizing: border-box;
  align-items: stretch; 
}

.vcenter{
  place-content: center;
}

.vcenter svg{
  max-width: 360px;
  display: block;
  margin: auto;
}



.pc {
  text-align: justify;
  text-justify: inter-word;
  & p{

  margin-top: 2rem;
  margin-bottom: 2rem;
  }

  & h1,h2,h3{
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}



.grid-two {
  grid-column: span 2 / auto;
}

.grid-fourth {
  grid-column: span 3 / auto;
}

.grid-third {
  grid-column: span 4 / auto;
}

.grid-two-thirds {
  grid-column: span 8 / auto;
}

.grid-half {
  grid-column: span 6 / auto;
}

.grid-total {
  grid-column: span 12 / auto;
}

.grid-three-fourths {
  grid-column: span 9 / auto;
}

@media (max-width: 480px) {
  .grid-half, .grid-fourth, .grid-two, .grid-third, .grid-two-thirds, .grid-three-fourths, .grid-total {
      grid-column: span 12 / auto; /* Todos ocupam o grid inteiro em telas pequenas */
  }

  .grid {
      display: grid;
      grid-template-columns: 1fr; /* Somente uma coluna no grid para simplificar */
      gap: 0;
      row-gap: 4rem; /* Ajuste do espaçamento entre itens para telas menores */
  }

  .item-box-g {
      margin-top: 4rem; /* Margem para a primeira caixa de itens em cada linha */
  }
}


/** cena **/
.heading {
  font-size: 4rem !important;



}








.h-cree{
  background: var(--white);
  margin: 3rem;
  padding: 3rem;
  border-radius: 3rem;
  
  -webkit-box-shadow:0px 0px 25px 6px rgba(0, 4, 255, 0.19);
  -moz-box-shadow: 0px 0px 25px 6px rgba(0, 4, 255, 0.19);
  box-shadow: 0px 0px 25px 6px rgba(0, 4, 255, 0.19);
}






/* fomulario pagamento*/


.payment-form{
  background-color: var(--primary-color);
  width: 800px;
  border-radius: 20px;
  margin-top: -42px;
  padding: 60px;

  & h2{
    color: var(--primary);
    padding-bottom: 1px;
    margin-bottom: 2px;
    border-bottom: 2px solid var(--primary);
  }
  & p {
    color: var(--primary);
    margin-top: -24px;
    margin-bottom: 10px;
    text-align: right;
  }
}

.payment-error{
  border: 1px solid red;
  background-color: #ffb4b4;
  font-weight: 800;
  color: red;
  border-radius: var(--borderRadius);
  padding: 10px;
  margin: 20px 0px 20px 0px;
  text-align: center;
}




.btn-form{
  background-color: var(--primary-color);
  color: var(--primary);
  border-radius: var(--borderRadius);
  justify-content: center;
  gap: 1rem;
  font-weight: 500;
  font-size: 2.2rem;

  padding: 0.5em var(--padding-x);
  transition: .40s;
  font-weight: 600;
  cursor: pointer;
	margin: 5px;
}
.btn-form:hover{

  box-shadow: 0 0 10px #ffffff;

}



.btn-form-contacto{
  background-color: var(--primary);
  color: var(--primary-color);
  border-radius: var(--borderRadius);
  justify-content: center;
  gap: 1rem;
  font-weight: 500;
  font-size: 2.2rem;

  padding: 0.5em var(--padding-x);
  transition: .40s;
  font-weight: 600;
  cursor: pointer;
	margin: 5px;
}
.btn-form-contacto:hover{

  box-shadow: 0 0 10px #ffffff;

}




.btn-pay-form{
  background-color: var(--primary);
  color: var(--primary-color);
  border-radius: var(--borderRadius);
  justify-content: center;
  gap: 1rem;
  font-weight: 500;
  font-size: 2.2rem;
  margin-top: 32px !important;

  padding: 0.5em var(--padding-x);
  transition: .40s;
  font-weight: 600;
  cursor: pointer;
	margin: 5px;
}
.btn-pay-form:hover{

  box-shadow: 0 0 10px var(--primary);

}



















































html {
    font-family: 'Inter', sans-serif;
    font-size: 62.5%;
    font-style: normal;
}

body {
    font-size: 1.6rem;
}

.container {
  
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1rem;

}

.navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    position: relative;
    
}

.nav_list {
    display: inline-flex;
    gap: 2rem;
    align-items: center;
    margin: 0 1.5rem;
}

.nav_action {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav_link,
.btn {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

.btn-primary {
    display: inline-flex;
    color: var(--white);
    background: var(--primary);
    font-weight: 500;
    padding: 0.6rem 1.5rem;
    border-radius: var(--borderRadius);
    
  
}

.btn-primary-1 {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-weight: 500;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 6rem;
  color: var(--white);
  background: var(--primary);
  font-weight: 500;
  padding: 0.6rem 1.5rem;
  margin-top: 4rem;
  border-radius: var(--borderRadius);
}

.btn-aux {
  display: inline-flex;
  color: var(--primary);
  background: var(--white);
  font-weight: 500;
  padding: 0.6rem 1.5rem;
  border-radius: var(--borderRadius);
}

.nav_toggle {
    cursor: pointer;
    display: none;
}

.nav_toggle ion-icon {
    font-size: 3.5rem;
    color: var(--text-primary);
}

.dropdown {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    background: rgb(255,255,255);
background: linear-gradient(183deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 27%, rgba(158,211,233,1) 100%);


-webkit-border-bottom-right-radius: 1.6rem;
-webkit-border-bottom-left-radius: 1.6rem;
-moz-border-radius-bottomright: 1.6rem;
-moz-border-radius-bottomleft: 1.6rem;
border-bottom-right-radius: 1.6rem;
border-bottom-left-radius: 1.6rem;


    box-shadow: 0rem 0.2rem 0.5rem var(--shadow);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: all 0.5s ease-in;
    z-index:2;
    & a {
      color: var(--text-primary);
    }
}

.dropdown-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
    padding: 2rem;
    
}

.nav_list_menu:hover ion-icon {
    transition: all 0.5s ease-in;
    transform: rotate(180deg);
}

.nav_list_menu:hover .dropdown {
    clip-path: polygon(0 0, 100% 0, 100% 102%, 0 102%);
}

.item-list {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 3rem 0;
    & a {
      color: var(--text-primary);
    }
}

.item-img {
    width: 4rem;
    height: 4rem;
    font-size: 2.6rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.item-list-info {
    position: relative;
    width: 100%;

    & a {
      color: var(--text-primary);
    }
}

.info-badge {
    position: absolute;
    right: 1rem;
    top: 0;
    background: var(--badge-bg);
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    color: var(--badge-text);
}

@media (max-width:730px) {
    .nav_toggle {
        display: block;
    }
    .nav_menu {
        position: absolute;
        top: var(--nav-height);
        left: 0;
        width: 100%;
        background: var(--dropdown-bg);
        display: none;
    }
    .nav_menu.active {
        display: block;
    }
    .nav_list {
        display: block;
        margin: 2rem 0;
        text-align: center;
    }
    .nav_link {
        padding: 0 2rem;
        display: flex;
        justify-content: space-between;
    }
    .dropdown {
        top: 0;
        position: relative;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        box-shadow: none;
        height: 0;
        text-align: start;
        transition: all 0.5s ease-in;
    }
    .nav_list_menu:hover .dropdown {
        height: 100%;
        transition: all 0.5s ease-in;
    }
}

@media (max-width:365px) {
    .logo-img {
        width: 10rem;
    }
    .btn,
    .btn-primary {
        padding: 0.4rem 1rem;
    }
}


.section-subheading {
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
  }
  
  .section-heading {
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 4.2rem;
    color: var(--text-primary);
    padding: 2rem 0;
  }
  
  .paragraph {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2.9rem;
    padding: 1rem 0;
  }
  
  .btn {
    color: var(--primary);
    border-radius: 0.6rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
  }
  
  .btn-primary {
    padding: 0.6rem 2rem;
    background-color: var(--primary);
    color: var(--white);
  }
  
  .item-heading {
    font-size: 1.8rem;
    color: var(--text-primary);
    padding: 1rem 0;
  }
  
  .feature-container {
    padding: 2rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 2rem;
  }
  
  .section-items {
    padding-top: 7rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2rem;
  }
  
  .feature-img {
    width: 100%;
    height: 100%;
  }
  
  .feature-img img {
    width: 100%;
    height: auto;
  }

.container {
    max-width: 144rem;
    margin: 0 auto;
    padding: 0 2rem;
  }
  
  .heading {
    font-size: 5rem;
    font-weight: 700;
    line-height: 6.3rem;
    color: var(--text-primary);
  }
  
  .paragraph {
    font-size: 1.6rem;
    color: var(--text-secondary);
    padding: 1.5rem 0;
  }
  
  .btn {
    padding: 0.6rem 2.5rem;
    border-radius: 0.6rem;
    display: inline-flex;
    font-weight: 500;
  }
  
  .btn-primary {
    background-color: var(--primary);
    color: var(--white);
  }
  
  .btn-outline {
    color: var(--text-primary);
  }
  
  .btn-secondary {
    font-weight: 500;
    color: var(--secondary);
  }



.hero-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    align-items: center;
    gap: 2rem;


    
  }

  .hero-container .paragraph {
    color: var(--text-primary);
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 2.9rem;
    padding: 1rem 0;
  }

  .hero-container .paragraph b{
    color: var(--secondary);
  }
  
  .hero-image img {
    margin-top: 32px;
    width: 80%;
    height: 80%;
    border-radius: 120px 20px 120px 20px;
    -webkit-box-shadow:0px 0px 81px 8px rgba(0, 4, 255, 0.37);
-moz-box-shadow: 0px 0px 81px 8px rgba(0, 4, 255, 0.37);
box-shadow: 0px 0px 81px 8px rgba(0, 4, 255, 0.37);
  }
  
  .features-container {
    padding: 4rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 4rem;
  }

.formulario{
  background: var(--white);
  padding: 3rem;
  border-radius: 3rem;
  -webkit-box-shadow:0px 0px 25px 6px rgba(0, 4, 255, 0.19);
  -moz-box-shadow: 0px 0px 25px 6px rgba(0, 4, 255, 0.19);
  box-shadow: 0px 0px 25px 6px rgba(0, 4, 255, 0.19);
}

.grid-form{
  display: grid;
  gap: 4rem;
  grid-template-columns: 
      repeat(3, 1fr);

    }

    .grid-span-2{
      grid-column: span 2;
    }


    .form-container{
      min-height: 500px;
    }





    .order {
      background-color: #f4f4f4;
      font-family: 'Work Sans', sans-serif;
      font-size: 14px;
      padding: 15px;
      max-width: 320px;
   }
    .order .order__title {
      float: left;
      margin-bottom: 20px;
   }
    .order #svg-summary {
      float: right;
   }
    .order .order__subtitles {
      margin-bottom: 10px;
      line-height: 1em;
   }
    .order__sub-sections {
      margin-bottom: 20px;
      margin-top: 20px;
      width: 100%;
   }
    .order__subtotal__table {
      border-spacing: 0;
      width: 100%;
   }
    .order__subtotal__table tbody {
      background-color: #fff;
      border: 1px solid #000;
   }
    .order__subtotal__table tbody tr:first-child td {
      border-top: 1px solid #000;
   }
    .order__subtotal__table tbody tr td {
      padding: 5px;
   }
    .order__subtotal__table tbody .values--discounts {
      color: #6fa450;
      font-weight: bold;
   }
    .order__subtotal__table tfoot tr:first-child td {
      border-top: 1px solid #000;
      padding: 5px 0;
   }
    .order__subtotal__table tfoot .values--total-text, .order__subtotal__table tfoot .values--total-price {
      font-size: 1.857rem;
      font-weight: bolder;
      white-space: pre;
   }
    





   .item-box-g {
    margin: 0.8rem!important;
    background: var(--white);
    padding: 3rem;
    border-radius: 3rem;
    box-shadow: 0px 0px 25px 6px rgba(0, 4, 255, 0.19);
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Espalha o conteúdo internamente */
}

    .item-box-b{
      background: var(--white);
      padding: 3rem;
      border-radius: 3rem;
      
      -webkit-box-shadow:0px 0px 25px 6px rgba(0, 4, 255, 0.19);
      -moz-box-shadow: 0px 0px 25px 6px rgba(0, 4, 255, 0.19);
      box-shadow: 0px 0px 25px 6px rgba(0, 4, 255, 0.19);
    }





  .grid {
    display: grid;
    gap: 4rem;
    grid-template-columns: 
        repeat(3, 1fr);
        align-items: stretch;

    .item-box-g{
      background: var(--white);
      padding: 3rem;
      border-radius: 3rem;
      -webkit-box-shadow:0px 0px 25px 6px rgba(0, 4, 255, 0.19);
      -moz-box-shadow: 0px 0px 25px 6px rgba(0, 4, 255, 0.19);
      box-shadow: 0px 0px 25px 6px rgba(0, 4, 255, 0.19);
    }
    .item-box-b{
      background: var(--white);
      padding: 3rem;
      border-radius: 3rem;
      -webkit-box-shadow:0px 0px 25px 6px rgba(0, 4, 255, 0.19);
      -moz-box-shadow: 0px 0px 25px 6px rgba(0, 4, 255, 0.19);
      box-shadow: 0px 0px 25px 6px rgba(0, 4, 255, 0.19);
    }
    .img {
      position: relative;
  }
  
  .image {
      width: 100%;
      border-radius: 1rem;
  }

  .i-head{
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    align-items:center;
  }
  .i-head img{
    max-width: 56px;
    margin-right: 1.2rem;

  }
  .i-btn{
    display: inline-flex;
    color: var(--primary);
    background: var(--white);
    font-weight: 500;
    padding: 0.6rem 1.5rem;
    border-radius: 1.5rem;
  }
  }



  
  .features-item {
    display: grid;
    
  }
  
  @media (max-width:870px) {
    
    .hero-container {
      grid-template-columns: 1fr;
    }
    .hero-image {
      grid-row: 1;
      text-align: center;
    }
    .hero-image img {
      max-width: 45rem;
      height: auto;
    }
  }

  @media (max-width:425px) {
    
    .hero-container {
      grid-template-columns: 1fr;
    }
    .hero-image {
      grid-row: 1;
      text-align: center;
    }
    .hero-image img {
      max-width: 32rem;
      height: auto;
    }
  }
  
  @media (max-width:425px) {
  
    .heading {
      font-size: 3.5rem;
      line-height: 4.2rem;
    }
    .btn {
      padding: 0.5rem 2rem;
    }
  }




#featuresf{
  padding: 40px;
  margin-top: 32px;
  background-color: var(--primary);
  
}

#featuresf{
  .btn-secondary, .features-item-heading {
  color: var(--white);
}
.paragraph{
  color: var(--white);
}

} 


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


.accordion {
  background-color: white;
  color: rgba(0, 0, 0, 0.8);
  cursor: pointer;

  width: 100%;
  padding: 2rem 2.5rem;
  border: none;
  outline: none;
  transition: 0.4s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.accordion i {
  font-size: 1.6rem;
}

.active {
  background-color: var(--white);
  color: var(--primary);
}

.accordion:hover {
  background-color: var(--primary);
  color: var(--white);
}
.pannel {
  padding: 20px;
  background-color: white;
  overflow: hidden;
  
  display: none;
  border-bottom: 2px solid var(--primary);
}
.pannel p {
  color: rgba(0, 0, 0, 0.7);
 
  line-height: 1.4;
  
}

.faq {
  border-bottom: 2px solid var(--primary);
  margin: 10px 0;
}
.faq.active {
  border: none;
}









#footer {
    padding: 3rem 0;
    border-top: 1rem solid var(--primary);
    border-image: linear-gradient(90deg, rgba(0,83,169,1) 50%, rgba(247,86,82,1) 50%) 
                100% 0 100% 0/2rem 0 0rem 0 stretch;
    margin-top: 4rem;
    padding-top: 4rem;
    font-weight: 600;
  }
  #footer .footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 2rem;
  }
  #footer .footer-container .footer-item .footer-heading {
    padding: 1rem 0;
  }
  #footer .footer-container .footer-item .footer-links li {
    margin: 1rem 0;
  }
  #footer .footer-container .footer-item .footer-links li .footer-link {
    color: #71717e;
    font-weight: 400;
  }
  #footer .footer-container .footer-item .text-dark {
    color: #71717e;
  }
  #footer .footer-container .footer-item .social-links li {
    margin: 2rem 0.3rem;
    display: inline-block;
    width: 3rem;
    height: 3rem;
    background: #f9f9f9;
    text-align: center;
    line-height: 3rem;
  }
  #footer .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 4rem 0 2rem 0;
    gap: 1rem;
  }
  
  .scroll-btn {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 10;
    width: 3.7rem;
    height: 3.7rem;
    background: #063183;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    box-shadow: 0 0 0.3rem 0.1rem #063183;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-10rem);
    transition: all 0.5s ease-in-out;
  }
  .scroll-btn.active {
    opacity: 1;
    transition: all 0.5s ease-in-out;
    transform: translateY(0);
  }
  .scroll-btn img {
    width: 2.7rem;
    height: 2.7rem;
  }