html {
    scroll-behavior: smooth
}

body {
    font-family: Lato, sans-serif;
    padding-top: 70px;
}

.file-input:focus,
:focus {
    outline: 0
}

#logo {
    background: url(../../assets/img/logoW.svg) center/80% no-repeat;
    width: 135px;
    height: 35px
}

.hero-bg {
    background-image: linear-gradient(1200deg, #0F528C, #16016a 100%)
}

.navlink {
    color: #c9c9c9 !important;
    font-weight: 300;
    letter-spacing: .4px;
    border-bottom: 1px solid transparent !important
}



.navlink2.active,
.navlink2:hover {
    color: #4177A6 !important
}

.navlink.active::after,
.navlink:hover::after {
    content: "";
    border-bottom: 1px solid #fff !important;
    width: 10px !important;
    display: block;
    margin: auto;
    position: relative;
    top: 4px;
    transition: .3s
}

.navlink2.active::after,
.navlink2:hover::after {
    content: "";
    border-bottom: 1px solid #4177A6 !important;
    width: 10px !important;
    display: block;
    margin: auto;
    position: relative;
    top: 4px;
    transition: .3s
}

.navlink::after {
    content: "";
    border-bottom: 1px solid transparent !important;
    width: 10px !important;
    display: block;
    margin: auto;
    position: relative;
    top: 4px;
    transition: .3s
}

.navbtn {
    color: #fff !important;
    background: rgba(255, 255, 255, .06);
    font-weight: 300;
    letter-spacing: .4px;
    padding: 8px 15px !important;
    border-radius: 3px
}

/* Variables de color (Usamos las mismas del btn1 para consistencia) */
:root {
    --purple-base: #3f0093; 
    --purple-neon: #a000ff; 
}

.navbtn2 {
    /* Mantenemos tus estilos base */
    color: #fff !important;
    background: var(--purple-base); /* Tu color base púrpura */
    font-weight: 300;
    letter-spacing: .4px;
    padding: 8px 15px !important;
    border-radius: 3px; /* Mantenemos el radio pequeño */

    /* Propiedades añadidas para el estilo futurista */
    display: inline-block;
    border: 1px solid var(--purple-base); /* Borde sutil */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    
    /* Efecto Neón Inicial Sutil (solo un poco de brillo exterior) */
    box-shadow: 0 0 5px #48b6f5; /* Versión más suave del neón */
}

.navbtn2:hover {
    /* Tu color de hover (si tuvieras uno, si no, lo mantengo) */
    background: #0F528C; /* Un púrpura ligeramente más claro al hacer hover */
    color: #fff !important;
    
    /* Efecto Neón Acentuado: Aumenta el brillo y añade un borde más definido */
    border-color: var(--purple-neon);
    box-shadow: 0 0 15px var(--purple-neon), 
                0 0 30px rgba(160, 0, 255, 0.4);
    
    /* Pequeño cambio de escala para sensación interactiva */
    transform: scale(1.03);
}

.navbtn:hover {
    background: rgba(255, 255, 255, .2);
    cursor: pointer !important
}

.navbtn2:hover {
    background: #0F528C;
    cursor: pointer !important;
    border: 0 !important
}

.hero-text-col {
    margin-top: 100px
}

@media (max-width:768px) {
    .new-notification-div {
        width: 100% !important
    }
}

@media (max-width:576px) {
    .navlink {
        color: #000 !important;
        font-weight: 300;
        letter-spacing: .4px;
        border-bottom: 0
    }

    .navlink.active,
    .navlink:hover {
        color: #3b3b3b !important
    }

    .navlink2:hover::after {
        content: "";
        border: 0;
        display: none
    }

    .navlink2.active::after {
        content: "";
        border-bottom: 0;
        display: none
    }

    .new-notification-div {
        width: 100% !important
    }

    .new-notification-span {
        color: #fff;
        font-weight: 300;
        font-size: 11px !important;
        position: relative;
        top: 2px
    }
}

.new-notification-div {
    width: 70%;
    background: rgba(0, 0, 0, .86);
    padding: 1px 5px 5px 8px;
    border-radius: 20px;
    position: relative;
    left: -3px
}

.new-notification-span {
    color: #fff;
    font-weight: 300;
    font-size: 13px;
    position: relative;
    top: 0
}

@media (max-width:576px) {
    .bg-hero {
        background: url(../../assets/img/bg-mobile.svg) bottom right/contain no-repeat !important
    }

    .mm-0 {
        margin-top: 0 !important
    }
}

.bg-hero {
    background: url(../../assets/img/bggg-1.svg) right/contain no-repeat
}

.hero-p {
    color: #00e4c1;
    font-weight: 300;
    letter-spacing: .4px
}

.hero-h {
    color: #fff;
    font-size: 50px;
    font-weight: 700
}

.hero-h2 {
    color: #000;
    font-size: 50px;
    font-weight: 700
}

.hero-p-white {
    font-weight: 300;
    letter-spacing: .4px;
    color: #fff
}

.hero-p-black {
    font-weight: 300;
    letter-spacing: .4px;
    color: #000
}

.btn1 {
    background: #00e4c1;
    color: #fff;
    padding: 10px 20px;
    font-weight: 300;
    letter-spacing: .4px
}

.btn2 {
    background: 0 0;
    color: #fff;
    padding: 10px 20px;
    font-weight: 300;
    letter-spacing: .4px;
    border: 1px solid #fff
}

.btn4 {
    background: 0 0;
    color: #4177A6;
    padding: 10px 20px;
    font-weight: 300;
    letter-spacing: .4px;
    border: 1px solid #4177A6
}

.btn2:hover {
    background: #fff;
    color: #000;
    padding: 10px 20px;
    font-weight: 300;
    letter-spacing: .4px;
    border: none;
    cursor: pointer
}

.btn1:hover {
    background: #00cbab;
    color: #fff;
    padding: 10px 20px;
    font-weight: 300;
    letter-spacing: .4px;
    cursor: pointer;
    transform: scale(1.05);
    box-shadow: 0 0 14px 2px #04e4c1;
    transition: .4s
}

.btn1:active,
.btn1:focus,
.btn3:active,
.btn3:focus,
.btn6:active,
.btn7:active,
.btn7:focus,
.drpdwn-togg:active,
.drpdwn-togg:focus,
.reveal:active,
.reveal:focus,
.reveal:hover,
.topbtn:active,
.topbtn:focus {
    box-shadow: none
}

.scroll-down {
    text-orientation: sideways;
    writing-mode: vertical-rl;
    color: #fff;
    font-size: 10px
}

.scroll-down2 {
    text-orientation: sideways;
    writing-mode: vertical-rl;
    color: rgba(0, 0, 0, .86);
    font-size: 10px
}

.scroll-down::after {
    content: "";
    height: 35px;
    color: #fff;
    display: inline-block;
    border: .5px solid #fff;
    margin-top: 6px
}

.scroll-down2::after {
    content: "";
    height: 35px;
    color: rgba(0, 0, 0, .86);
    display: inline-block;
    border: .5px solid rgba(0, 0, 0, .86);
    margin-top: 6px
}

.page-heading-p3 {
    color: #fff;
    letter-spacing: .4px;
    font-weight: 500
}

.page-heading-p,
.page-heading-p2 {
    color: #4177A6;
    letter-spacing: .4px;
    font-weight: 500
}

.page-heading-p::after {
    content: "";
    display: block;
    width: 25px;
    border-bottom: 2px solid #00e4c1;
    margin: 0 auto;
    position: relative;
    top: 8px
}

.page-heading-p2::after,
.page-heading-p3::after {
    content: "";
    display: block;
    width: 25px;
    border-bottom: 2px solid #00e4c1;
    position: relative;
    top: 8px
}

.page-heading-h {
    color: #000;
    font-size: 40px;
    font-weight: 700
}

.page-heading-h2 {
    color: #fff;
    font-size: 40px;
    font-weight: 700
}

.feature-icon {
    font-size: 35px
}

.feature-div {
    padding: 16px;
    background: #fff;
    border-radius: 35px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
    width: 66px;
    color: #4177A6
}

.feature-div:hover,
.testimonial-card:hover {
    background: #4177A6;
    color: #fff;
    transition: .3s;
    transform: translateY(-10px)
}

.feature-heading-number {
    font-weight: 600;
    color: #4177A6
}

.dashboard-h,
.feature-heading,
.modal-title,
.plan-h,
.trx-heading {
    font-weight: 700
}

.body-p,
.feature-p {
    font-weight: 300;
    line-height: 2em
}

.bg-section1 {
    background: url(../../assets/img/bg2.svg) center/cover no-repeat
}

.bg-grey1,
.dashboard-body {
    background-color: #f6f7fb
}

.body-p2 {
    font-weight: 300;
    line-height: 2em;
    /* color: #fff */
}

.btn3 {
    background: rgba(42, 48, 254, .1);
    color: #4177A6;
    letter-spacing: .4px;
    padding: 10px 20px;
    font-weight: 300
}

.btn6 {
    background: #4177A6;
    color: #fff;
    letter-spacing: .4px;
    padding: 10px 20px;
    font-weight: 300
}

.btn6:hover {
    background: #0F528C;
    color: #fff;
    cursor: pointer;
    transform: scale(1.05);
    box-shadow: 0 0 14px 2px rgba(42, 48, 251, .2);
    transition: .4s
}

.btn3:hover {
    background: #4177A6;
    color: #fff;
    cursor: pointer;
    transform: scale(1.05);
    box-shadow: 0 0 14px 2px rgba(42, 48, 251, .2);
    transition: .4s
}

.bounce-top {
    -webkit-animation: 10s ease-in-out infinite alternate both bounce-top;
    animation: 10s ease-in-out infinite alternate both bounce-top
}

@keyframes bounce-top {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1
    }

    24% {
        opacity: 1
    }

    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    25%,
    55%,
    75%,
    87% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1
    }
}

.tv-embed-widget-wrapper__body a {
    display: none !important
}

.list-icon,
.plan-icon {
    font-size: 20px;
    color: #04e4c1
}

.plan-icon2 {
    font-size: 15px;
    color: #04e4c1
}

.testimonial-block {
    padding-top: 100px;
    padding-bottom: 100px
}

.navbar {
    background-color: #333;  /* Cambia esto por el color que prefieras */
    color: white;            /* Para que el texto sea blanco sobre fondo oscuro */
}

.navbar .nav-link {
    color: white;  /* Si quieres que los enlaces también sean blancos */
}

.navbar .navbar-toggler-icon {
    background-color: white;  /* Si quieres que el ícono del menú sea blanco */
}

/* Si quieres que el fondo sea semi-transparente */
.navbar {
    background-color: white  /* Fondo semi-transparente */
}


.navbar-toggler-icon i,
.plan-icon {
    font-size: 30px;
    color: #3f0093
}
.plan-icon33 {
    font-size: 30px;
    color: #3f0093
}
.plan-icon22 {
    font-size: 30px;
    color: white
}

.plan-div {
    background: #0F528C;
    width: 46px;
    padding: 10px 40px 10px 10px;
    border-radius: 5px
}

.dropdown-item,
.plan-p,
.tip {
    font-weight: 300
}

.plan-card {
    border: 1px solid rgba(42, 48, 254, .1);
    border-radius: 5px
}

.plan-card:hover {
    border: 1px solid transparent;
    background: #fff;
    box-shadow: 0 0 7px 0 rgba(33, 37, 41, .05);
    transition: .4s
}

a {
    color: #4177A6;
    font-weight: 300
}

a:hover {
    color: #0F528C;
    cursor: pointer;
    text-decoration: none
}

.modal-header,
.nav.nav-tabs,
.navbar-toggler {
    border: 0
}

.modal-content {
    border: 0 !important;
    background-color: #f6f7fb;
    padding-left: 20px;
    padding-right: 20px
}

.form-control {
    border-radius: 0;
    height: calc(1.95em + .75rem + 2px)
}

.form-control:focus {
    transition: .3s;
    box-shadow: 0 0 7px 0 rgba(33, 37, 41, .15);
    border: 1px solid #ced4da
}

.form-group:focus-within>label {
    color: #4177A6;
    transition: .3s
}

label {
    letter-spacing: .4px;
    color: #000;
    font-weight: 300 !important
}

#signup:valid label {
    color: #4177A6
}

#signin:valid label {
    color: #4177A6
}

.pass {
    letter-spacing: 1.5px
}

.close:active,
.close:focus {
    outline: 0;
    box-shadow: none;
    border: 0
}

.accordion-btn {
    color: #000;
    font-weight: 399;
    font-size: 16px
}

.accordion-btn:hover {
    text-decoration: none;
    color: #6a6a6a
}

.accordion-header,
.accordion-item {
    background: 0 0;
    border: 0
}

.accordion-p {
    font-weight: 300;
    line-height: 25px
}

.accordion-btn svg,
.deposit,
.green,
.warning-icon {
    color: #04e4c1
}

.phone {
    position: absolute;
    bottom: -90px
}
/* Fondo del footer */
.bg-footer {
    background-color: #333; /* Color oscuro para el footer */
    color: white;  /* Texto blanco */
}

/* Espaciado y alineación del footer */
.footer {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.copyright p {
    font-size: 14px;
    margin-bottom: 10px;
}

/* Estilo para los enlaces */
.footer-nav-link {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    padding: 5px 10px;
    transition: color 0.3s ease;
}

.footer-nav-link:hover {
    color: #00aaff; /* Color de hover */
}

/* Aseguramos que el disclaimer tenga un tamaño adecuado */
.disclaimer p {
    font-size: 13px;
    margin-top: 10px;
}

/* Añadimos un borde superior para separar visualmente las secciones */
.footer-nav-link {
    border-top: 1px solid #444;
    padding-top: 10px;
}

.navbar-toggler-icon {
    background-image: none !important
}

#logo2 {
    background: url(../../assets/img/vertex.png) center/90% no-repeat;
    width: 120px;
    height: 50px
}

.navbar-dashboard {
    background: #fff;
    box-shadow: 0 0 20px 0 rgba(33, 37, 41, .08);
    padding: 0
}

.nav2 {
    border-left: 1px solid #f1f1f1
}

.dropdown-toggle::after {
    margin-left: 10px
}

.dropdown-toggle:hover::after {
    margin-left: 10px;
    color: #4177A6
}

.dropdown-toggle,
thead th:hover {
    color: #000
}

.dropdown-toggle:hover {
    color: #4177A6
}

.nav-item.dropdown {
    background: #f6f7fb;
    padding: 7px 15px;
    border-radius: 5px
}

.dropdown-item:hover {
    background: rgba(42, 48, 254, .1);
    color: #4177A6
}

.dropdown-menu {
    border: 1px solid #f1f1f1
}

.heartbeat {
    -webkit-animation: 10s ease-in-out infinite both heartbeat;
    animation: 10s ease-in-out infinite both heartbeat
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    10% {
        -webkit-transform: scale(.91);
        transform: scale(.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    17% {
        -webkit-transform: scale(.98);
        transform: scale(.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    33% {
        -webkit-transform: scale(.87);
        transform: scale(.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.pill-counter {
    font-size: 9px;
    font-weight: 300;
    position: relative;
    top: -8px
}

.dashboard-heading-h {
    color: #000;
    font-size: 25px;
    font-weight: 700
}

.card-bg2 {
    background: #fafcff;
    padding: 0 0 30px;
    box-shadow: 0 0 20px 0 rgba(33, 37, 41, .04)
}

.card-bg {
    background: #fafcff;
    padding: 20px 30px;
    box-shadow: 0 0 20px 0 rgba(33, 37, 41, .04)
}

.card1 {
    border: 0;
    box-shadow: 0 0 20px 0 rgba(33, 37, 41, .04)
}

.card1 span {
    font-weight: 300;
    color: #7d7d7d
}

.green-plus {
    position: relative;
    top: -4px
}

.red-down {
    position: relative;
    top: -4px;
    color: #fe645a
}

.green-up {
    position: relative;
    top: -4px;
    color: #04e4c1
}

.drpdwn-togg {
    padding: 0 !important;
    margin: 0
}

.drpdwn-togg i {
    font-size: 20px
}

.drpdwn-togg::after,
.hidden {
    display: none
}

.date-span,
th {
    font-size: 13px
}

.delete-link,
.red,
.withdrawal {
    color: #fe645a
}

.trx-history-div {
    height: 420px;
    overflow-y: scroll
}

.card-bg2-header {
    background: #fff;
    padding: 15px 25px 10px;
    box-shadow: 0 6px 50px 0 rgba(33, 37, 41, .08)
}

thead th {
    font-size: 14px;
    font-weight: 400;
    color: #a7a7a7;
    letter-spacing: .4px
}

.table-row {
    background: #fff;
    box-shadow: 0 0 20px 0 rgba(33, 37, 41, .04)
}

td,
th {
    padding: 17px !important
}

.table-spacing2 {
    border-spacing: 0 10px !important;
    border-collapse: separate
}

.table-spacing {
    border-spacing: 0 10px;
    border-collapse: separate
}

.table-row-empty>td {
    color: #000;
    border: 1px solid #ddd;
    background: #f2f2f2
}

.bg-hero2 {
    background: url(../../assets/img/bgg23.svg) right/contain no-repeat
}

.badge-new {
    background: #4177A6;
    position: relative;
    top: -2px
}

.pattern {
    background: url(../../assets/img/patternpad2.svg) center/cover no-repeat fixed;
}

.testimonial-card {
    border: 0;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important
}

.bg-yellow {
    background: #04e4c12e
}

.bg-red {
    background: rgba(255, 0, 0, .15)
}

.invest-radio {
    position: absolute;
    opacity: 0;
    width: 100% !important;
    height: 100% !important;
    margin-top: 0;
    margin-left: -6px
}

.invest-radio+.plan-card {
    cursor: pointer
}

.invest-radio:checked+.plan-card {
    color: #fff;
    background: #4177A6
}

.invest-radio:hover+.plan-card {
    transition: .4s;
    border: 1px solid #4177A6
}

.topbtn {
    color: #fff !important;
    background: #4177A6;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: .4px;
    border-radius: 3px
}

.topbtn:hover {
    color: #fff !important;
    background: #0F528C
}

.pagination {
    margin-top: -25px !important
}

.dataTables_info {
    font-size: 15px;
    font-weight: 300;
    color: #4177A6
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #4177A6;
    background-color: rgba(42, 48, 254, .1);
    border: 1px solid #dee2e6
}

.page-link:focus {
    z-index: 2;
    outline: 0;
    box-shadow: none
}

.page-link:hover {
    z-index: 2;
    color: #4177A6;
    text-decoration: none;
    background-color: rgba(42, 48, 254, .1);
    border-color: #dee2e6
}

.page-item.active .page-link {
    border-color: #4177A6;
    background: rgba(42, 48, 254, .1);
    color: #4177A6
}

.buttons-colvis,
.buttons-copy,
.buttons-excel,
.buttons-page-length,
.buttons-pdf {
    border-radius: 3px !important;
    border: 0;
    background: rgba(42, 48, 251, .2);
    color: #4177A6;
    margin-right: 5px;
    margin-left: 5px;
    font-weight: 300
}

.button-page-length.active {
    background-color: #4177A6
}

.button-page-length:active,
.button-page-length:focus,
.button-page-length:hover {
    background-color: #0F528C;
    color: #fff
}

.buttons-colvis:active,
.buttons-colvis:focus,
.buttons-colvis:hover,
.buttons-copy:active,
.buttons-copy:focus,
.buttons-copy:hover,
.buttons-excel:active,
.buttons-excel:focus,
.buttons-excel:hover,
.buttons-page-length:active,
.buttons-page-length:focus,
.buttons-page-length:hover,
.buttons-pdf:active,
.buttons-pdf:focus,
.buttons-pdf:hover {
    background: #4177A6 !important;
    color: #fff !important;
    box-shadow: none !important
}

.buttons-columnVisibility.active {
    color: #fff;
    text-decoration: none;
    background-color: #4177A6
}

.buttons-columnVisibility:hover {
    background-color: #0F528C
}

.dataTables_filter input[type=search] {
    width: 250px !important;
    border-radius: 0;
    height: calc(1.95em + .75rem + 2px)
}

.dataTables_filter input[type=search]:focus {
    transition: .3s;
    box-shadow: 0 0 7px 0 rgba(33, 37, 41, .06);
    border: 1px solid #ced4da
}

.m--15 {
    margin-top: -15px
}

.dt-buttons {
    top: 35px
}

@media (max-width:576px) {
    .mobile-hidden {
        display: none
    }

    .feature-div {
        margin: 0 auto
    }

    .pl-5 {
        padding-left: 1rem !important
    }

    .navbar-dashboard {
        background: #fff;
        box-shadow: 0 0 20px 0 rgba(33, 37, 41, .08);
        padding: 10px
    }

    .dt-buttons {
        margin-bottom: 55px !important
    }

    .mmb-3 {
        margin-bottom: 35px
    }
}

@media (max-width:480px) {
    .dt-buttons {
        margin-bottom: 50px !important
    }
}

.table-h {
    font-size: 27px
}

.table-p {
    margin-bottom: 0
}

td {
    color: #a7a7a7;
    font-weight: 300;
    font-size: 12px
}

.table-link {
    border-width: 2px;
    border-bottom-style: dotted;
    color: #299913
}

.table-link:hover {
    border-width: 2px;
    border-bottom-style: dotted;
    color: #21790f;
    text-decoration: none;
    cursor: pointer
}

#table0 {
    margin-top: 0 !important
}

#table0_paginate {
    margin-top: 25px
}

.btn-group>.btn-group:not(:first-child)>.btn,
.btn-group>.btn-group:not(:last-child)>.btn,
.btn-group>.btn:not(:first-child),
.btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
    border-radius: 0
}

table.dataTable.dtr-inline.collapsed>tbody>tr[role=row]>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr[role=row]>th.dtr-control:before {
    top: 50%;
    left: 0;
    height: 14px;
    width: 14px;
    margin-top: -9px;
    display: block;
    position: absolute;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 14px;
    box-shadow: none;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: 'Courier New', Courier, monospace;
    line-height: 14px;
    content: '+';
    background-color: #04e4c1
}

.page-item.disabled .page-link {
    color: #1f1f1f;
    pointer-events: none;
    cursor: auto;
    background: 0 0;
    border: 0;
    font-size: 15px;
    font-weight: 300
}

tr:hover {
    background: rgba(42, 48, 254, .03)
}

.table-bordered {
    border: 0;
    border-radius: 9px
}

.card-badge-g {
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 400;
    background: #8bcc58;
    box-shadow: 0 7px 8px -5px #8bcc58 !important;
    border-radius: 20px;
    color: #fff
}

.card-badge-b {
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 400;
    background: #66c5e3;
    box-shadow: 0 7px 8px -5px #66c5e3 !important;
    border-radius: 20px;
    color: #fff
}

.card-badge-p {
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 400;
    background: #be1e1c;
    box-shadow: 0 7px 8px -5px #ff9a9e !important;
    color: #fff;
    border-radius: 20px
}

.walletadd {
    font-size: 21px;
    color: #04e4c1
}

.walletadd-show {
    padding-top: 10px;
    font-weight: 300;
    color: #4177A6
}

.btn7:hover {
    color: #0e9983;
    cursor: pointer
}

.delete-link:hover {
    color: #f82d20;
    cursor: pointer;
    font-weight: 400
}

.text-truncate {
    max-width: 250px
}

.date-p {
    font-size: 13px;
    color: #bcbcbc
}

.card-shadow {
    background: #fafcff;
    box-shadow: 0 0 20px 0 rgba(33, 37, 41, .04)
}

.tab-content {
    padding: 30px;
    background: #fafcff
}

.nav.nav-tabs {
    background: #fff;
    padding: 10px 20px 0;
    border-bottom: 0;
    box-shadow: 0 6px 50px 0 rgba(33, 37, 41, .08);
    z-index: 9999;
    position: relative
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background: 0 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    color: #4177A6 !important;
    border-bottom: 3px solid #4177A6;
    letter-spacing: .5px
}

.nav-tabs .nav-link:hover {
    color: #0F528C !important;
    border-bottom: 3px solid transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0
}

.nav-tabs .nav-link {
    color: #d0d0d0;
    letter-spacing: .5px;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 3px solid transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0
}

.form-section-p {
    text-transform: capitalize;
    font-weight: 600
}

.navlink2.active:hover {
    border: 0 !important
}

.nav-link.active:hover {
    border-bottom: 3px solid #0F528C;
    border-top: 0;
    border-left: 0;
    border-right: 0
}

.reveal {
    border: 1px solid #ced4da;
    border-radius: 0
}

@media (max-width:576px) {
    .mobile-center {
        text-align: center !important
    }

    .mr-4 {
        margin-right: 5px !important
    }
}

.dashboard-icon {
    color: #000 !important
}

.adj {
    position: relative;
    top: -2px
}

.file-drop-area {
    position: relative;
    display: flex;
    align-items: center;
    width: 450px;
    max-width: 100%;
    padding: 25px;
    border: 1px dashed rgba(0, 0, 0, .8);
    border-radius: 3px;
    transition: .2s
}

.fake-btn {
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, .2);
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 3px;
    padding: 8px 15px;
    margin-right: 10px;
    font-size: 12px;
    text-transform: uppercase
}

.file-msg {
    font-size: small;
    font-weight: 300;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.file-input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0
}

.drpdwn {
    background: 0 0 !important
}

.dropdown-togg {
    color: rgba(0, 0, 0, .5);
    letter-spacing: .4px
}

.helper {
    letter-spacing: .3px;
    font-weight: 300
}

.social-link i {
    font-size: 25px
}

.social-link {
    color: #3b3b3b
}

/* Contenedor principal de la sección de hero */
.bg-grey {
    position: relative;
    height: 100vh; /* Ocupa toda la altura de la ventana */
    overflow: hidden; /* Evitar que el video sobresalga */
}

/* Contenedor del video */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ocupa toda la altura de la ventana */
    z-index: -1; /* Asegura que el video esté detrás del contenido */
}

/* Estilo del video */
.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  /* Asegura que el video ocupe toda la altura */
    object-fit: cover;  /* Hace que el video cubra toda el área sin distorsionarse */
    object-position: center; /* Asegura que el video se centre correctamente */
}

/* Estilos para el texto y el contenido sobre el video */
.hero-text-col {
    position: relative;
    z-index: 1; /* Asegura que el contenido esté encima del video */
    color: white; /* Hace el texto visible sobre el fondo oscuro */
    padding: 80px 20px; /* Espaciado alrededor del contenido */
}

/* Estilo para el título */
.hero-h2 {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Estilo para el párrafo de descripción */
.hero-p-black {
    font-size: 18px;
    margin-bottom: 30px;
}

/* Estilos de los botones */
.btn1, .btn4 {
    font-size: 16px;
    padding: 10px 20px;
    margin-top: 20px;
}

/* Scroll down */
.scroll-down2 {
    font-size: 16px;
    margin-top: 20px;
}

/* Menú de navegación fijo */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2; /* Asegura que el menú esté por encima del video y del contenido */
    padding: 15px;
}


@media (max-width: 767px) {
    .hero-h2 {
        font-size: 30px; /* Reducir el tamaño del título */
    }
    
    .hero-p-black {
        font-size: 16px; /* Reducir el tamaño del texto */
    }

    .btn1, .btn4 {
        font-size: 14px; /* Reducir el tamaño de los botones */
    }
}


/* Estilo para la sección hero */
.hero-wrapper {
    position: relative;
    height: 100vh; /* La sección ocupará toda la altura de la ventana */
    overflow: hidden; /* Evita que el video se salga de los límites */
}

/* Contenedor del video (fondo) */
.video-zone {
    background-color: rgba(255, 255, 255, 0.712);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* El video ocupa toda la altura */
    z-index: -1; /* Coloca el video detrás del contenido */
}

/* Estilo del video */
.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  /* El video ocupa toda la altura */
    object-fit: cover;  /* Asegura que el video cubra todo el área */
    object-position: center; /* Centra el video correctamente */
}

/* Estilos para el contenido sobre el video */
.hero-content-zone {
    position: relative;
    z-index: 1; /* El contenido estará encima del video */
    color: white; /* Texto blanco para que sea visible sobre el fondo oscuro */
    padding: 80px 20px; /* Espaciado dentro del contenedor */
    margin-top: 80px;
    margin-left: 30px;
}

/* Estilo para el título */
.main-title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Estilo para el párrafo de descripción */
.description-text {
    font-size: 18px;
    margin-bottom: 30px;
}

/* Estilo de los botones */
.btn {
    font-size: 16px;
    padding: 12px 30px;
    margin-top: 20px;
}

/* Variables para colores (Opcional, pero recomendado para mantener consistencia) */
:root {
    --purple-base: #0F528C; /* Tu color base */
    --purple-neon: #38a8e5; /* Color de brillo */
}

/* Botón "Opera Ahora" */
.btn1 {
    /* Mantenemos tu color base */
    background-color: var(--purple-base);
    color: white;
    
    /* Forma y padding */
    padding: 10px 25px;
    border-radius: 5px; /* Mantenemos el radio, pero puedes probar 3px para hacerlo más angular */
    text-decoration: none;
    display: inline-block; /* Asegura que padding y shadow funcionen */
    font-weight: bold;
    letter-spacing: 1px;
    
    /* Efecto Neón Inicial: Sombra exterior e interior */
    box-shadow: 0 0 10px var(--purple-neon), 
                inset 0 0 5px var(--purple-neon);
    border: 1px solid var(--purple-neon);
    
    /* Transición para el hover */
    transition: all 0.3s ease-in-out;
}

.btn1:hover {
    /* Tu color de hover base, pero con un toque extra de brillo */
    background-color: #0056b3; 
    
    /* Efecto "Encendido": Aumenta el brillo del neón y lo separa un poco */
    box-shadow: 0 0 20px var(--purple-neon), 
                0 0 40px var(--purple-neon), 
                inset 0 0 10px var(--purple-neon);
    
    /* Pequeño movimiento para un efecto 3D/pop */
    transform: translateY(-2px); 
}

/* Variables para colores (Opcional) */
:root {
    --blue-base: #4177A6; /* Tu color base */
    --blue-neon: #00f6ff; /* Color de brillo (cian/azul claro) */
}

/* Botón "Learn More" */
.btn4 {
    /* Mantenemos tu color base */
    background-color: var(--blue-base);
    color: white;
    
    /* Forma y padding */
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    letter-spacing: 1px;

    /* Estilo Glitch/Grid: Usamos un borde sólido brillante */
    border: 2px solid var(--blue-neon);
    
    /* Sombra Inicial Sutil */
    box-shadow: 0 0 8px rgba(0, 246, 255, 0.6);
    
    /* Transición para el hover */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn4:hover {
    /* Tu color de hover base */
    background-color: #007bff;
    
    /* Efecto Aumento de Energía */
    box-shadow: 0 0 15px var(--blue-neon), 
                0 0 30px var(--blue-neon);
    
    /* Escala ligeramente para un efecto dinámico */
    transform: scale(1.05); 
}

/* Estilo para el "scroll down" */
.scroll-indicator {
    font-size: 16px;
    margin-top: 20px;
}

/* Estilo para la navegación fija */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3; /* Asegura que la navegación esté por encima del video */
    padding: 15px;
}

/* Asegura que el menú de navegación esté encima del video */
.navbar .navbar-brand {
    z-index: 4;
}

/* Estilo del span "typed2" */
#typed2 {
    /* color: #7e13c6; */
    font-weight: bold;
}
/* Altura de la barra de navegación que estás usando (ej. 60px) */
:root {
    --navbar-height: 100px; 
}

/* Aplicamos el margen de desplazamiento a todos los destinos de ancla */
/* Debes apuntar a los IDs de tus secciones que están siendo tapadas */
#porque,
#testimonios,
/* Agrega aquí cualquier otra sección que necesite ser corregida */
#otra-seccion { 
    /* El valor de scroll-margin-top debe ser igual o ligeramente superior a la altura de tu navbar */
    scroll-margin-top: var(--navbar-height); 
}