body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
	margin: 0;
    padding: 0;
}

.top-container {
    width: 80%;
    margin: auto;
    text-align: center;
    position: relative;
    margin-top: 4%;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0px;
    padding-bottom: 3%;
}

.logo {
    max-width: 280px; /* Ajusta el tamaño del logo según sea necesario */
    height: auto;
}

h1 {
    color: #333;
    font-family: cursive;
    padding: 10px;
    border-radius: 5px;
    margin: 0;
    flex-grow: 1;
    text-align: center;
    margin-right: 18%;
}

.bottom-sections {
    display: flex;
    justify-content: space-between;
    /*margin-top: 20px;*/
}

.left-section {
    width: 30%;
    background-color: #003ee308;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	margin-right: 2%;
}

.right-section {
    width: 65%;
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.left-section h2, .right-section h2 {
    font-size: 24px;
    color: #333;
}

.left-section p, .right-section p {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
}

.cta-button {
    padding: 15px 30px;
    background-color: #b05551;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
}

.cta-button:hover {
    background-color: #c38d51;
}

/* Estilos adicionales de navegación y tabla permanecen igual */
.top-nav{z-index:20;font-size:0;height:40px;text-align:center;background: rgb(5 44 61 / 88%);position:relative;width: 100%;max-width: 1920px;min-width: 1000px;margin: 0 auto;}
.top-nav .navbar{z-index:20;font-size:0;height:40px;width: 1055px;text-align:center;position:relative;overflow:visible;margin: 0 auto;}
.top-nav .navbar span{display:block}
.top-nav .navbar a.nav-item{padding:13px 0}
.top-nav .navbar a.nav-item:hover .en{border-bottom:3px solid #ffcc79}
.top-nav .navbar li{display:inline-block;vertical-align:top;width:136px; height: 40px;}
.top-nav .navbar li:hover{border-bottom: 3px solid #b1965c;}
.top-nav .navbar .subnavbar li:hover{border-bottom:none;}
.top-nav .navbar li a img{margin: 0 auto;display: block;padding-top: 10px;}
.top-nav .navbar li a{padding:6px 0;line-height: 40px;font-size: 15px;margin: 0 auto;color: #fff;font-weight: bold;text-decoration: none;}
.top-nav .navbar li a:hover .ch,.navbar li a:hover .en{color:#ffcc7b}
.top-nav .navbar li a:hover .en{border-bottom:3px solid #ffcc79}
.top-nav .navbar li a.n12{line-height: 18px;}
.top-nav .navbar li a.n13 span{line-height: 15px;margin-top: 2px;}
.top-nav .navbar li .subnavbar{display:none}
.top-nav .navbar li .subnavbar li{border-radius: 4px;background: #394340;height:30px;width:150px;margin-left: -15px;}
.top-nav .navbar li .subnavbar img{width:100px;height:100px}
.top-nav .navbar li .subnavbar a{display:inline-block;font-size:13px;color:#f0f0f0;line-height:34px}
.top-nav .navbar li .subnavbar a.small{font-size:12px;letter-spacing:-1px}
.top-nav .navbar li a:hover{color:#ccab6a;text-decoration: none;}
.top-nav .sub-bg{display:none;height:145px;width:100%;min-width: 1000px;position:absolute;text-align:right;background:url(https://hw.99.com//uploads/allimg/co/top.png) repeat-x 0 -98px !important;z-index: 1;}
.top-nav:hover .sub-bg{display:block}
.top-nav .subnavbar li i.googleplay {background: url(https://hw.99.com/uploads/allimg/co/googleplay.png) no-repeat 0 0/100%; display:inline-block; width:19px; height:25px; vertical-align:middle; margin-right:2px;}
.top-nav .subnavbar li i.iosplay {background: url(https://hw.99.com//uploads/allimg/co/iosplay.png) no-repeat  0 0/100%; display:inline-block; width:19px; height:25px; vertical-align:middle; margin-right:2px;margin-left: -16px;}



.status-text {
    color: green; /* Cambia el color a verde */
    font-weight: bold; /* Opcional: resalta el texto */
}
.status-text2 {
    color: #250d0dbd; /* Cambia el color a verde */
    font-weight: bold; /* Opcional: resalta el texto */
}

.status-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px; /* Ajusta el espacio entre el texto y la imagen según sea necesario */
}

.status-icon img {
    width: 24px; /* Ajusta el tamaño de la imagen según sea necesario */
    height: auto;
    vertical-align: middle;
	margin-left: -64%;
}

.status-icon2 img {
    width: 50px;
    height: auto;
    vertical-align: middle;
    margin-left: 1%;
}

.right-section {
    width: 65%;
    background-color: #f9f9f9; /* Fondo gris claro para la sección de noticias */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-left: 2%; /* Alineación con la sección izquierda */
}

.news-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    cursor: pointer; /* Cambia el cursor para indicar que es clicable */
    transition: background-color 0.3s;
}

.news-item:hover {
    background-color: #f1f1f1; /* Fondo gris claro al pasar el mouse */
}

.news-thumbnail {
    width: 150px; /* Tamaño de la miniatura */
    height: 111px;
    overflow: hidden;
    border-radius: 8px;
    margin-right: 15px;
}

.news-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-content {
    flex: 1;
    text-align: left; /* Alinea el texto a la izquierda */
}

.news-title {
    font-size: 20px;
    color: #222; /* Color oscuro para el título */
    margin: 0 0 10px 0;
}

.news-description {
    font-size: 16px;
    color: #555; /* Color gris oscuro para la descripción */
    margin: 0 0 15px 0;
}

.pagination-controls {
    text-align: center;
    margin-top: 20px;
}

.pagination-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin: 0 10px;
}

.pagination-button:disabled {
    background-color: #c0c0c0;
    cursor: not-allowed;
}

.pagination-button:hover:not(:disabled) {
    background-color: #0056b3;
}

#pageInfo {
    font-size: 16px;
    color: #333;
}
footer{
    background: url(./img/footer-bg.png) no-repeat center center;
    background-size: contain;
    background-position: center;
    height: 415px;
    width: 100%;
    filter: grayscale(100%);
    margin-top: 100px;
}
.mobile-warning {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f8d7da;
    color: #721c24;
    text-align: center;
    padding: 1em;
    z-index: 1000;
}
.content {
    display: block;
}
@media (max-width: 800px) {
    .mobile-warning {
        display: block;
    }
    .content2 {
        display: none;
    }
}
@media (max-width: 1670px) {
    .content {
        display: none;
    }
}