:root {
  /* Backgrounds */
    --background-1: #2d64a7;
    --background-2: #5685bb;    
    --background-3: #d9d9e4;
    --background-4: #ffffff;
    --background-5: #74a6e0;
    --background-6: #333333;
    --background-7: #ffee10;
    --background-8: #57b846;
    --background-9: #2596be;
    --background-footer: #686363;    
    --background-whatsapp: #0df053;    

    /* Box-shadow */
    --sombra-1: 7px 7px 12px 0 rgba(20, 20, 20, 0.3);
    --sombra-2: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
    --sombra-3: 0 5px 20px 0px rgba(0, 0, 0, 0.05);
    --sombra-4: 0 5px 20px 0px rgba(0, 0, 0, 0.15);
    --sombra-5: 0 10px 30px 0px rgba(138, 127, 141, 0.5);
    --sombra-6: 0 10px 30px 0px rgba(138, 127, 141, 0.8);
    --sombra-7: 0 5px 20px 0px rgba(250, 66, 81, 0.1);
    --sombra-8: 0px 1px 10px rgba(0,0,0,0.3);
    --sombra-9: 0px 1px 10px rgba(49, 122, 72, 0.1);

    /* Fonts */
    --roboto: 'Roboto';
    --josefin-sans: 'Josefin Sans', serif;

    /* Color Fuentes */
    --fuente-ceniza-claro: #fafafa;
    --fuente-blanca: #ffffff;
    --fuente-negra: #010100;
    --fuente-amarilla: #ffee10;
    --fuente-carbon-oscuro: #333333;
    --fuente-violeta-suave: #4b2354;
    --fuente-rojo-alerta: #fa4251;
    --fuente-verde-ok: #57b846;
    --fuente-whatsapp: #0df053;
    --fuente-azul: #2d64a7;

    /* Hover Color */
    --hover-color:#e9f01c;
    --hover-color-2: #449636;


  .text-justify {
    text-align: justify;
    line-height: 1.5;
  }

  .section-title {
    font-family: var(--josefin-sans);
    font-size: 36px;
    font-weight: 500;
  }

  .section-subtitle {
    font-family: var(--josefin-sans);
    font-size: 21px;
    font-weight: bold;
    color: var(--fuente-verde-ok);
  }

  .card-style {
    background-image: url('/image/background/background-1.jpg');
    background-size: cover;
    box-shadow: var(--sombra-1);  
    backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .flex-row {
    display: flex;
    flex-direction: row;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
  }

  .align-center {
    align-items: center;
  }

  .justify-center {
    justify-content: center;
  }

  .section-padding {
    padding: 4rem 2rem;
  }

  @media (max-width: 768px) {
    .section-padding {
      padding: 2rem 1rem;
    }
  }
}