@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');


:root {
    --primary-blu: #0025e0;
    --light-down: #EBECF5;
    --light-up: #F7F9FF;
    --dark-down: #67697A;
    --primary-up: #B8C3FF;


  
}

* {
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html, body {
    margin: 0;
   background: var(--light-up);
}


body{
  font-family: "Nunito Sans";
  
}


body, button, input, select, textarea {
    font-family: "Nunito Sans";
    color: var(--down-grey);
}


.como-funciona-pagblu h2 {
  font-weight: 800;
  font-size: 32px;
  line-height: 100%;
  color: #393B47;
  font-family: "Nunito Sans";
  text-align: center;
  padding: 16px;

}


.como-funciona-pagblu h4 {
    font-weight: 800;
    font-size: 20px;
    line-height: 100%;
    color: #67697A;
    font-family: "Nunito Sans";
    margin: 0 !important;
}

.como-funciona-pagblu p {
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
   letter-spacing: 0em;
   text-align: left;
   color: var(--dark-down);
   font-family: "Nunito Sans";
   margin-top: 16px;
}




.como-funciona-pagblu {
  background: var(--light-down)
  border-radius: 16px;
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 32px;
  margin-bottom: 64px;
}


.title {
  margin-bottom: 0;
}

.como-funciona-pagblu .img-container {
  flex: none;
  order: 0;
  flex-grow: 0;
  text-align: center;
     
  }



.como-funciona-pagblu .img-container  img {
      object-fit: cover;
   
}

.cards-passo-a-passo {
  width: 336px;
  height: 420px;
  background: #fff;
  padding: 32px 16px;
  border-radius: 16px;

}

.primary-down {
background: rgba(184, 195, 255, 0.4) !important;
}


.down {
  height: 500px;
}

.cards-number {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px !important;
}



/* RESPONSIVIDADE */

  /* SMALL DESKTOPS */
  @media (max-width: 1000px) {

   
    
    .como-funciona-pagblu {
      margin: 16px;
      gap: auto;
      
    }

  }


   /* TABLET */

  @media (max-width: 767px) {
 
    
    
    .como-funciona-pagblu {
      flex-direction: column;
      gap: 32px;
      align-items: center !important;
    }

    

  .como-funciona-pagblu .container {
    width: 100%;

     }
  
  
   .como-funciona-pagblu .img-container {
      width: 100%;
      margin: 0 auto;

    }

    .cards-passo-a-passo {
      height: auto;
    }
  

  }







/* MOBILE */


 @media (max-width: 480px) {
 
  body {
    background-color: #fff;
  }
  .como-funciona-pagblu h2 {
    font-size: 24px;
  }


  .como-funciona-pagblu {
    padding: 0;
    margin: 0;
    gap: 0;
    

}

  .como-funciona-pagblu .img-container img {
    max-width: 260px;
}

.cards-passo-a-passo {
  width: 100%;
  border-radius: 0;
}

.light-grey {
  background: var(--light-up);
}
  }