:root{
    --customprimary:#ffffff!important;
    --customsecondary:#F4F5F7!important;
    --customdark: #2C2C2C;
    --light:#d7d7d9 !important;
    --success: #3EDC85 !important;
    --dos:#261501;
    --warning:orange !important;
    /* --danger: #010700; */
}

*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

body{
    background-color: var(--customsecondary)!important;
}

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Altura mínima de toda la pantalla */
  }

.content {
    padding: 5vh 0;
    flex: 1; /* El contenido crece para llenar el espacio disponible */
  }

.text-customdark{
    color: var(--customdark);
}

.bg-customprimary{
    background-color: var(--customprimary)!important;
}

.bg-customsecondary{
    background-color: var(--customsecondary)!important;

}

.bg-success{

    background-color: var(--success) !important;

}

.bg-light{

    background-color: var(--light) !important;

}



.bg-danger{

    background-color: var(--danger) !important;

}



.bg-customdark{

    background-color: var(--customdark) !important;

}

.bg-dos{

    background-color: var(--dos) !important;

}
.bg-warning{

    background-color: var(--warning) !important;

}

.header-text{
    font-weight: 600;
}

.footer {
    background-color: var(--customprimary)!important;  /* Color de fondo del footer */
    padding: 20px;
    text-align: center;          /* Centrando el texto */
    width: 100%;
    bottom: 0;
  }
  
  .footer p {
    margin: 0;
    font-size: 16px;
    color: var(--customdark)!important;                 /* Color del texto */
  }
  

/* Estilo de la tarjeta principal */
  .card {
    background-color: white;
    border-radius: 15px;
    padding: 20px 125px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    /*margin: 20px 50px;*/
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  }

  .card-title {
    margin: 5vh 0 0 0;
    font-size: 2rem;
    margin-bottom: 10px;
    color: #333;
  }
  
  .card-content {
    margin: 8vh 0;
    font-size: 1.25rem;
    color: #666;
  }
  
  .card-multi-content {
    margin: 1vh 0;
    font-size: 1.25rem;
    color: #666;
  }

  /* Nueva sección para las tarjetas adicionales */
  .card-container {
    display: flex;
    justify-content: space-between;
    width: 75vw;
    margin-top: 20px;
  }
  
  /* Estilo para las tarjetas adicionales que ocupan la mitad del espacio */
  .half-card {
    background-color: white;
    border-radius: 15px;
    padding: 20px 60px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 48%;  /* Cada tarjeta ocupa el 48% para dejar espacio entre ellas */
  }
  
  .half-card .card-title {
    font-size: 1.5rem;
  }
  
  .half-card .card-content {
    height: 60%;
    margin: 5vh 0;
    font-size: 1.1rem;
  }

  .rounded-button {
    background-color: black;
    color: white;
    border: none;
    border-radius: 30px; /* Botón redondeado */
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .rounded-button:hover {
    background-color: #333; /* Color al hacer hover */
  }

.transparencia-bg-1{
    background-color: rgba(0, 0, 0, 0.7);
}

.icon-fab-dark{

    width: 30px;

    height: 30px;

    color:var(--customdark);

    font-size: 20px;

}

.icon-fab-light{

    width: 30px;

    height: 30px;

    color:var(--light);

    font-size: 20px;

}


.hover-dark:hover{

    background-color: var(--customdark) !important;

}


.vh-25{

    height: 25vh;

}

.vh-50{

    height: 50vh;

}

.vh-75{

    height: 75vh;

}
.vh-80{

    height: 80vh;

}



.vh-100{

    height: 100vh;

}



.min-vh-100{

    min-height: 100vh;

}

.min-vh-75{

    min-height: 75vh;

}
.min-vh-50{

    min-height: 50vh;

}

.min-vh-25{

    min-height: 25vh;

}

.min-w-50{

    min-width:50% !important;

}



.h-15{

    height: 15%;

}



.h-80{

    height: 80%;

}



.text-customlight{

    color: var(--light);

}
.text-customdark{

    color: var(--customdark);

}
.text-customprimary{

    color: var(--customprimary);

}
.text-customsuccess{

    color: var(--success);

}



.overflow-hidden{

    overflow: hidden !important;

}



.opacity-0 {

    opacity:0!important;

  }

  .opacity-1 {

    opacity:0.2!important;

  }

  .opacity-2 {

      opacity:0.4!important;
      
  }

  .opacity-3 {

    opacity:0.6!important;

  }

  .opacity-4 {

    opacity:0.8!important;

  }

  .opacity-5 {

    opacity:1!important;

  }



.border-2{

    border-width: 2px !important;

}



.border-3{

    border-width: 3px !important;

}



.border-4{

    border-width: 4px !important;

}



.border-dos{

    border-color: var(--dos);

}



.box-shadow{

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.box-innerShadow{
    box-shadow: inset 0px 5px 5px -3px rgba(0, 0, 0, 0.2), inset 0px 8px 10px 1px rgba(0, 0, 0, 0.14), inset 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.inner-shadow {
    position: relative;
    overflow: hidden;
}

.inner-shadow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* horizontal - vertical - desenfoque - tamaño */
    box-shadow: inset 2px 2px 150px 1px rgba(0, 0, 0, 0.5), inset 2px 2px 150px 1px rgba(0, 0, 0, 0.1);
    z-index: 1;
}



.handwriting{

    font-family: 'Parisienne', cursive;

    font-size: 3.5rem;

}

.handwriting-1{

    font-family: 'Parisienne', cursive;

}



.rounded-pill{

    border-radius: 100px;

}
  

@media (max-width: 576px) {
    #item-blog-img{
        display: block;
        position:relative !important;
        margin-left: auto;
        margin-right: auto;
    }
    p,h5{
        text-align: center;
    }
}