@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

 /* Estilos Gerais */
 .gain {
     /*background-color: #f5f5f5;*/
     /* Fundo cinza claro */
     padding: 40px;
     border-radius: 10px;
     /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: relative;
     overflow: hidden;
     font-family: 'Poppins', sans-serif;
     margin-top: 50px;
 }

 /* Padrão de Fundo Sutil */
 .gain::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     /*background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 10px, transparent 10px, transparent 20px);*/
     /* Padrão de triângulos simulado */
     opacity: 0.1;
     z-index: 0;
 }

 /* Área de Texto Principal */
 .main-text {
     flex: 1;
     text-align: center;
     z-index: 1;
 }

 .main-text h1 {
     font-size: 2.5em;
     font-weight: bold;
     color: #000;
     margin-bottom: 10px;
 }

 .main-text p {
     font-size: 1.2em;
     color: #333;
     margin-bottom: 20px;
 }

 .main-text button {
     background-color: #241e42;
     /* Cor primária */
     color: #fff;
     /* Cor secundária */
     padding: 10px 20px;
     border: none;
     border-radius: 5px;
     font-size: 1em;
     cursor: pointer;
 }

 /* Área de Benefícios */
 .benefits {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 20px;
     z-index: 1;
 }

 .benefit-box {
     background-color: #fff;
     /* Cor secundária */
     padding: 20px;
     border-radius: 10px;
     border: solid, #241e42, 1px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .benefit-box .icon {
     width: 30px;
     height: 30px;
     background-color: #241e42;
     /* Cor primária */
     color: #fff;
     /* Cor secundária */
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.5em;
 }

 .benefit-box .text {
     flex: 1;
 }

 .benefit-box h3 {
     font-size: 1.2em;
     font-weight: bold;
     color: #000;
     margin-bottom: 5px;
 }

 .benefit-box p {
     font-size: 1em;
     color: #333;
 }

 /* Design Responsivo */
 @media (max-width: 768px) {
     .gain {
         flex-direction: column;
         padding: 20px;
         margin-top: 550px;
     }

     .main-text {
         margin-bottom: 20px;
     }

     .main-text h1 {
         font-size: 2em;
     }

     .main-text p {
         font-size: 1em;
     }

     .benefit-box {
         padding: 15px;
     }

     .benefit-box h3 {
         font-size: 1em;
     }

     .benefit-box p {
         font-size: 0.9em;
     }
 }

 @media (max-width: 480px) {
     .main-text h1 {
         font-size: 1.5em;
     }

     .main-text p {
         font-size: 0.9em;
     }

     .main-text button {
         padding: 8px 16px;
         font-size: 0.9em;
     }

     .benefit-box {
         padding: 10px;
     }

     .benefit-box h3 {
         font-size: 0.9em;
     }

     .benefit-box p {
         font-size: 0.8em;
     }
 }