/*-------------------------------------
        3.  Welcome-hero
--------------------------------------*/
body {
    background-color: white; /* Fondo blanco */
    font-family: 'Your Elegant Font', sans-serif; /* Reemplaza 'Your Elegant Font' con la fuente deseada */
}

/******NAVBAR*******/
.logo {
    position: absolute;
    top: 10px;
    left: 15px; /* Ajusta según la posición deseada */
    max-width: 100px; /* Ajusta el tamaño del logo según tus necesidades */
}

.navbar a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    padding: 10px 20px;
    border-radius: 25px; /* Bordes redondeados */
    position: relative;
    overflow: hidden;
    display: inline-block;
    transition: color 0.3s ease-in-out;
    font-weight: bold; /* Hace que el texto sea más grueso */
}

.navbar {
    background: linear-gradient(to right, #008080, #4A2364); /* Degradado azul claro a verde claro */
    padding: 15px;
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil en la barra de navegación */
    position: relative;
    color: white; /* Color de texto blanco */
    font-weight: bold; /* Hace que el texto sea más grueso */
}

.navbar .nav-item .nav-link[href*="?p=perfil"] {
    color: white !important; /* Color de texto blanco */
}

.navbar .nav-item .nav-link[href*="?p=perfil"] .fas.fa-user {
    color: white; /* Color del icono de usuario */
}

.navbar a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; /* Grosor de la línea futurista */
    background-color: #fff; /* Color de la línea futurista */
    transform: scaleX(0); /* Inicialmente la línea no está visible */
    transition: transform 0.3s ease-in-out; /* Transición suave de la línea */
}

.navbar a:hover {
    color: #4CAF50; /* Cambia el color del texto al hacer hover */
}

.navbar a:hover::before {
    transform: scaleX(1); /* Expande la línea al 100% al hacer hover */
}


.user-button::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; /* Grosor de la línea futurista */
    background-color: #7D2181; /* Color de la línea futurista */
    transform: scaleX(0); /* Inicialmente la línea no está visible */
    transform-origin: 0 50%; /* Desde la izquierda al expandirse */
    transition: transform 0.3s ease-in-out; /* Transición suave de la línea */
}

.about-list-icon ul {
    display: flex;
}
.about-list-icon  ul li a {
    padding-right: 22px;
    cursor:pointer;
    color: #fff;
}
.about-list-icon ul li a {
    cursor: pointer;
    color: #fff;
    display: inline-block;
    border: 2px solid;
    margin-left: 20px;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
}
.about-list-icon ul li a i {
    margin-left: 6px;
}
/**********************TABLA*************/

.general{
    display:flex;
    align-items: center;
    justify-content: center;
    background:url('../img/fondo-general.png')no-repeat;
    background-size:cover;
    background-position: center;
    position:relative;
}

.tablas{
    display:flex;
    align-items: center;
    justify-content: center;
    background:white;
    background-size:cover;
    background-position: center;
    position:relative;
    margin-bottom: 30%;
}
/***********REGISTER***********/
.note
{
    text-align: center;
    height: 80px;
    background: -webkit-linear-gradient(left, #4A2364, #008080/*#8811c5,#0072ff*/);
    color: #fff;
    font-weight: bold;
    line-height: 80px;
}
.form-content
{
    padding: 5%;
    border: 1px solid #ced4da;
    margin-bottom: 2%;
    background-color: rgba(0, 192, 74, 0.192);
}
.form-control{
    border-radius:1.5rem;
}
.btnSubmit
{
    border:none;
    border-radius:1.5rem;
    padding: 1%;
    width: 20%;
    cursor: pointer;
    background: #0062cc;
    color: #fff;
}
/***********FOOTER*****/

.footer1 {
    position: relative; /* Fijar posición */
    bottom: 0; /* Ajustar al borde inferior */
    width: 100%; /* Ocupar todo el ancho */
    background-color: #4A2364; /* Color de fondo */
    padding: 10px 0; /* Espaciado interno */
    color: white; /* Color del texto */
    z-index: 1000; /* Asegura que esté por encima del contenido */
}

/********SECCION PRINCIPAL**************/

.counter {
    background-color:#f5f5f5;
    padding: 20px 0;
    border-radius: 5px;
}

.count-title {
    font-size: 40px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}

.count-text {
    font-size: 13px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}

.fa-2x {
    margin: 0 auto;
    float: none;
    display: table;
    color: #4ad1e5;
}
.welcome-hero{
    display: flex;
    align-items: center;
    justify-content: center;
    position:relative;
    background:url(../img/fondo.jpg)no-repeat;
    background-size:cover;
    background-position: center;
    height:890px;
}
.welcome-hero:before{
    position:absolute;
    content: " ";
    top:0;
    left:0;
    background:rgba(31,44,108,.65);
    width:100%;
    height:100%;
}

/*.header-text-area*/
.header-text h2 {
    color: #fff;
    font-size: 54px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.5;
}
.header-text h2 span {color: #d92cf9;}
.header-text p {
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    text-transform: uppercase;
    margin: 30px 0 60px;
    letter-spacing: 1px;
}
.header-text a {
    width: 200px;
    height: 60px;
    line-height: 60px;
    border-radius: 3px;
    text-transform: capitalize;
    color: #fff;
    background: #b636ff;
    border:1px solid #b636ff;
    box-shadow: 0 5px 20px rgba(0,0,0,.2);
    -webkit-transition: 0.3s linear; 
    -moz-transition: 0.3s linear; 
    -ms-transition: 0.3s linear; 
    -o-transition: 0.3s linear; 
    transition: 0.3s linear;
}
.header-text a:hover{ box-shadow: 0 5px 20px rgba(0,0,0,.4);background:#9f00ff;border: 1px solid #9f00ff;}
/*.header-text-area*/

/*-------------------------------------
        4.  About
--------------------------------------*/
.about {padding: 50px 0 100px;}
.about-content {padding-top: 100px;}
/*.single-about-txt*/
.single-about-txt h3 {
    font-size:18px;
    color: #3c4258;
    text-transform: initial;
    line-height: 1.8;
}
.single-about-txt p {
    font-size: 16px;
    color: #999fb3;
    padding: 35px 0 43px;
    border-bottom: 1px solid #999fb3;
}
.single-about-add-info {
    margin: 35px 0;
}
.single-about-add-info h3 {
    color: #636a82;
    font-size: 16px;
    text-transform: capitalize;
}
.single-about-add-info p {font-weight:  300;border:  0;padding: 0;margin-top: 3px;}
/*.single-about-txt*/

/*.single-about-img */
.single-about-img {
    position: relative;
    box-shadow: 0 5px 20px rgba(14, 25, 80, .30);
}

.single-about-img:before {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width: 100%; /* Ajustado a 100% para cubrir el contenedor */
    height: 100%;
    background: rgba(31, 44, 108, .3);
}

.single-about-img img {
    max-width: 100%; /* Hace la imagen responsiva */
    height: auto; /* Ajusta automáticamente la altura según el ancho */
}

.about-list-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 109%;
    height: 90px;
    background: #1f2c6c;
}
/*.ab-list-icon */
.about-list-icon ul {
    display: flex;
}
.about-list-icon  ul li a {
    padding-right: 22px;
    cursor:pointer;
    color: #fff;
}
.about-list-icon ul li a {
    cursor: pointer;
    color: #fff;
    display: inline-block;
    border: 2px solid;
    margin-left: 20px;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
}
.about-list-icon ul li a i {
    margin-left: 6px;
}



@keyframes example {
    0%   {bottom:0px;}
    100%  {bottom:7px;}
}

@media (max-width: 768px) {
    .desktop-text {
        display: none;
    }
    .mobile-text {
        display: block;
    }
}
@media (min-width: 769px) {
    .desktop-text {
        display: block;
    }
    .mobile-text {
        display: none;
    }
}

/*========================Thank you=================