  <style>
    @font-face {
    font-family: 'Cera';
    src: url('css/fonts/cera-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    }
    @font-face {
    font-family: 'Cera';
    src: url('css/fonts/cera-bold.otf') format('opentype');
    font-weight: bold;  // Indica que esta es la versión en negrita
    font-style: normal;
    }

   body {
       font-family: 'Cera', sans-serif;
      background-color: #000;
      color: #fff;
    }
    .header-background {
      background:  url('https://govic.cl/images/b4.jpg') no-repeat center center;
      background-size: cover;
      min-height: 800px;
    }
  .bg-section {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 400px; /* Establece una altura mínima inicialmente */
    padding: 50px 0; /* Asegúrate de que haya suficiente espacio dentro de la sección */
}

@media (max-width: 768px) {
    .bg-section {
        min-height: auto; /* Permite que la altura crezca según el contenido */
        padding: 20px 0; /* Reduce el padding en dispositivos más pequeños */
    }
    .container, .row {
        margin: 0; /* Elimina márgenes externos en dispositivos pequeños */
        width: 100%; /* Utiliza todo el ancho disponible */
    }
    .col-md-4 {
        width: 100%; /* Hace que cada columna tome todo el ancho de la pantalla en móviles */
        margin-bottom: 20px; /* Añade espacio entre las imágenes */
    }
}

    .rounded-extra {
    border-radius: 30px; /* Ajusta según lo redondeado que desees los bordes */
}
.custom-divider {
   height: 3px;
    border-top: 3px solid transparent; /* Establece el grosor y hace la línea 
    inicialmente transparente */
    background-image: linear-gradient(to right, cyan, rgba(255,255,255,0)); /* De celeste a transparente */
    width: 100%; /* Ajusta esto según la longitud deseada */
    margin: 20px auto; /* Espaciado alrededor de la línea */
}
.custom-center-box {
    background-color: black;      /* Fondo negro */
    border-radius: 40px;          /* Bordes redondeados en 40px */
    padding: 20px;                /* Un poco de padding para que el texto no esté pegado a los bordes */
    text-align: center; 
    margin-top: 100px;          /* Centra el texto horizontalmente */
}

.text-grey {
    color: grey;                  /* Color de texto gris para la primera línea */
    margin-bottom: 0;             /* Reduce el espacio entre las dos líneas de texto */
}

.text-white {
    color: white;                 /* Color de texto blanco para la segunda línea */
}
.gradient-bg {
    background: linear-gradient(to top, #2596be 10%, rgba(37, 150, 190, 0.7) 70%, transparent); /* Gradiente más detallado */
    padding: 20px;
    margin: 10px 0;
    border-radius: 10px;
    margin-left: 5px;
    margin-top: 20px;
}

.black-bg {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo negro con opacidad */
    padding: 20px; /* Ajusta el relleno según sea necesario */
    border-radius: 40px; /* Bordes redondeados */
    margin-top: 50%;
}
.black-bg2 {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo negro con opacidad */
    padding: 20px; /* Ajusta el relleno según sea necesario */
    border-radius: 40px; /* Bordes redondeados */
    margin-top: 10%;
    margin-right: 20%;
}

.text-white {
    color: white; /* Color del texto */
}
.vertical-dots {
    margin-right: 20px; /* Espacio entre los puntos y la lista */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 75px; /* Altura ajustada a la de los ítems de la lista */
}

.dot {
    width: 10px; /* Tamaño de los puntos */
    height: 10px;
    background-color: white;
    border-radius: 50%;
}

.list-items {
    list-style: none;
    margin: 0;
    padding: 0;
    color: white;
}

.list-items li {
    margin: 10px 0; /* Espacio entre ítems */
}
.bg-section {
    padding: 20px 0; /* Controla el espacio arriba y abajo dentro de la sección */
}

.custom-link, .custom-link:visited {
    color: white; /* Establece el color del enlace */
    text-decoration: none; /* Elimina el subrayado del enlace */
}

.custom-link:hover, .custom-link:focus {
    color: #ccc; /* Cambia el color al pasar el mouse o al enfocar */
    text-decoration: underline; /* Agrega un subrayado al pasar el mouse o al enfocar */
}
    /* Añade estilos personalizados aquí */
  </style>