/*==================================================
NEXTVISION
Construimos Ideas, Desarrollamos Futuro
==================================================*/

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

    :root {

        --primary: #00E5FF;
        --secondary: #0EA5E9;
        --purple: #7C3AED;

        --dark: #030712;
        --dark2: #08111f;
        --dark3: #111827;

        --white: #ffffff;
        --gray: #94A3B8;

        --shadow: 0 0 25px rgba(0, 229, 255, .35);

        --transition: .35s;

    }

    * {

        margin: 0;
        padding: 0;
        box-sizing: border-box;

    }

    html {

        scroll-behavior: smooth;

    }

    body {

        font-family: 'Poppins', sans-serif;
        background: var(--dark);
        color: white;
        overflow-x: hidden;

    }

    /*=========================
BACKGROUND
==========================*/

    body::before {

        content: "";

        position: fixed;

        width: 100%;
        height: 100%;

        top: 0;
        left: 0;

        background:

            radial-gradient(circle at top left, #0ea5e922 0%, transparent 40%),

            radial-gradient(circle at bottom right, #7c3aed22 0%, transparent 35%),

            radial-gradient(circle, #00e5ff10 0%, transparent 65%);

        z-index: -3;

    }

    /*=========================
PARTICLES
==========================*/

    #particles-js {

        position: fixed;

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

        z-index: -2;

    }

    /*=========================
SCROLLBAR
==========================*/

    ::-webkit-scrollbar {

        width: 10px;

    }

    ::-webkit-scrollbar-track {

        background: #09101f;

    }

    ::-webkit-scrollbar-thumb {

        background: var(--primary);

        border-radius: 20px;

    }

    /*=========================
SECTIONS
==========================*/

    .section {

        padding: 120px 0;

    }

    .section-dark {

        padding: 120px 0;

        background: #07111f;

    }

    .section-title {

        color: var(--primary);

        font-weight: 600;

        letter-spacing: 2px;

        text-transform: uppercase;

        display: block;

        margin-bottom: 15px;

    }

    h1,
    h2,
    h3,
    h4 {

        font-weight: 700;

    }

    p {

        color: #b8c2d3;

        line-height: 1.8;

    }

    /*=========================
NAVBAR
==========================*/

    .navbar {

        transition: .4s;

        background: rgba(3, 7, 18, .65);

        backdrop-filter: blur(18px);

        border-bottom: 1px solid rgba(255, 255, 255, .05);

    }

    .navbar-brand img {

        transition: .4s;

    }

    .nav-link {

        color: white !important;

        margin-left: 25px;

        font-weight: 500;

        transition: .35s;

    }

    .nav-link:hover {

        color: var(--primary) !important;

    }

    .navbar-toggler {

        border: none;

        color: white;

    }

    .navbar-toggler:focus {

        box-shadow: none;

    }

    /*=========================
HERO
==========================*/

    .hero {

        min-height: 100vh;

        display: flex;

        align-items: center;

        position: relative;

        overflow: hidden;

    }

    .hero::after {

        content: "";

        position: absolute;

        width: 450px;

        height: 450px;

        right: -100px;

        top: 100px;

        border-radius: 50%;

        background: var(--primary);

        filter: blur(180px);

        opacity: .18;

    }

    .hero h1 {

        font-size: 65px;

        line-height: 1.1;

    }

    .hero p {

        font-size: 18px;

        margin-top: 25px;

    }

    .text-primary {

        color: var(--primary) !important;

    }

    .typed-text {

        color: #9fdfff;

        min-height: 40px;

        font-size: 22px;

        font-weight: 500;

    }

    /*=========================
FLOAT IMAGE
==========================*/

    .floating {

        animation: float 5s ease-in-out infinite;

        max-width: 90%;

    }

    @keyframes float {

        0% {

            transform: translateY(0px);

        }

        50% {

            transform: translateY(-18px);

        }

        100% {

            transform: translateY(0px);

        }

    }

    /*=========================
BUTTONS
==========================*/

    .btn {

        padding: 14px 35px;

        border-radius: 50px;

        font-weight: 600;

        transition: .35s;

    }

    .btn-primary {

        background: linear-gradient(45deg, var(--primary), var(--secondary));

        border: none;

        color: #001018;

        box-shadow: var(--shadow);

    }

    .btn-primary:hover {

        transform: translateY(-4px);

        box-shadow: 0 0 35px rgba(0, 229, 255, .65);

    }

    .btn-outline-light {

        border: 2px solid var(--primary);

        color: var(--primary);

    }

    .btn-outline-light:hover {

        background: var(--primary);

        color: #001018;

    }

    /*=========================
ABOUT
==========================*/

    .info-card {

        background: rgba(255, 255, 255, .05);

        backdrop-filter: blur(12px);

        border: 1px solid rgba(255, 255, 255, .08);

        padding: 20px;

        margin-bottom: 20px;

        border-radius: 15px;

        transition: .35s;

    }

    .info-card:hover {

        transform: translateY(-8px);

        border-color: var(--primary);

        box-shadow: var(--shadow);

    }

    .info-card i {

        color: var(--primary);

        margin-right: 10px;

    }

    /*==================================================
                SERVICES
==================================================*/

    .service-card {

        background: rgba(255, 255, 255, .04);

        backdrop-filter: blur(18px);

        border: 1px solid rgba(255, 255, 255, .08);

        border-radius: 25px;

        padding: 40px 30px;

        text-align: center;

        transition: all .4s ease;

        height: 100%;

        overflow: hidden;

        position: relative;

    }

    .service-card::before {

        content: "";

        position: absolute;

        width: 220px;

        height: 220px;

        background: rgba(0, 229, 255, .08);

        border-radius: 50%;

        top: -120px;

        right: -120px;

        transition: .5s;

    }

    .service-card:hover {

        transform: translateY(-15px);

        border-color: var(--primary);

        box-shadow: 0 15px 45px rgba(0, 229, 255, .18);

    }

    .service-card:hover::before {

        transform: scale(1.4);

    }

    .service-card i {

        font-size: 60px;

        color: var(--primary);

        margin-bottom: 25px;

    }

    .service-card h4 {

        margin-bottom: 20px;

    }

    .service-card p {

        margin-bottom: 0;

    }

    /*==================================================
                TECHNOLOGIES
==================================================*/

    .tech-card {

        background: rgba(255, 255, 255, .04);

        border: 1px solid rgba(255, 255, 255, .08);

        border-radius: 20px;

        padding: 35px 20px;

        transition: .4s;

        margin-bottom: 30px;

    }

    .tech-card:hover {

        transform: translateY(-10px);

        border-color: var(--primary);

        box-shadow: var(--shadow);

    }

    .tech-card i {

        font-size: 55px;

        color: var(--primary);

        margin-bottom: 20px;

    }

    .tech-card h5 {

        color: white;

        margin: 0;

    }

    /*==================================================
                COUNTERS
==================================================*/

    .counter-section {

        padding: 90px 0;

        background: linear-gradient(90deg, #07111f, #081827, #07111f);

    }

    .counter {

        font-size: 65px;

        font-weight: 800;

        color: var(--primary);

    }

    .counter-section p {

        color: #d6d6d6;

        font-size: 18px;

        margin-top: 10px;

    }

    /*==================================================
                PROCESS
==================================================*/

    .process-card {

        position: relative;

        background: rgba(255, 255, 255, .05);

        border: 1px solid rgba(255, 255, 255, .08);

        border-radius: 20px;

        padding: 35px;

        text-align: center;

        transition: .4s;

        height: 100%;

    }

    .process-card:hover {

        transform: translateY(-10px);

        border-color: var(--primary);

        box-shadow: 0 10px 35px rgba(0, 229, 255, .20);

    }

    .process-card span {

        width: 70px;

        height: 70px;

        display: flex;

        justify-content: center;

        align-items: center;

        margin: auto;

        margin-bottom: 20px;

        border-radius: 50%;

        background: linear-gradient(45deg, var(--primary), var(--secondary));

        color: #001018;

        font-weight: 700;

        font-size: 24px;

    }

    .process-card h5 {

        color: white;

    }

    /*==================================================
                PORTFOLIO
==================================================*/

    .portfolio-card {

        position: relative;

        overflow: hidden;

        border-radius: 25px;

        cursor: pointer;

        transition: .4s;

    }

    .portfolio-card img {

        width: 100%;

        transition: .5s;

    }

    .portfolio-card:hover img {

        transform: scale(1.12);

    }

    .portfolio-info {

        position: absolute;

        bottom: 0;

        left: 0;

        width: 100%;

        padding: 30px;

        background: linear-gradient(to top,
                rgba(0, 0, 0, .92),
                rgba(0, 0, 0, .08));

        transform: translateY(100%);

        transition: .4s;

    }

    .portfolio-card:hover .portfolio-info {

        transform: translateY(0);

    }

    .portfolio-info h4 {

        color: white;

    }

    .portfolio-info p {

        margin-bottom: 0;

        color: #d9d9d9;

    }

    /*==================================================
                HOVER GLOW
==================================================*/

    .service-card:hover i,
    .tech-card:hover i,
    .process-card:hover span {

        filter: drop-shadow(0 0 15px var(--primary));

    }

    /*==================================================
            SECTION TITLES
==================================================*/

    .section h2,
    .section-dark h2 {

        margin-bottom: 20px;

        font-size: 42px;

        font-weight: 700;

    }

    .section-title {

        color: var(--primary);

        letter-spacing: 3px;

        font-size: 14px;

        text-transform: uppercase;

    }

    /*==================================================
            SMALL ANIMATION
==================================================*/

    @keyframes pulseGlow {

        0% {

            box-shadow: 0 0 0 rgba(0, 229, 255, .1);

        }

        50% {

            box-shadow: 0 0 35px rgba(0, 229, 255, .35);

        }

        100% {

            box-shadow: 0 0 0 rgba(0, 229, 255, .1);

        }

    }

    .service-card {

        animation: pulseGlow 5s infinite;

    }

    /*==================================================
                TESTIMONIOS
==================================================*/

    .testimonial-card {

        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .08);
        backdrop-filter: blur(15px);

        border-radius: 25px;

        padding: 35px;

        transition: .4s;

        height: 100%;

    }

    .testimonial-card:hover {

        transform: translateY(-10px);

        border-color: var(--primary);

        box-shadow: var(--shadow);

    }

    .testimonial-card p {

        font-style: italic;

    }

    .testimonial-card h5 {

        color: var(--primary);

        margin-top: 25px;

    }

    /*==================================================
                CONTACTO
==================================================*/

    .contact-info {

        margin-top: 35px;

    }

    .contact-info p {

        display: flex;

        align-items: center;

        margin-bottom: 20px;

        font-size: 18px;

    }

    .contact-info i {

        width: 50px;
        height: 50px;

        display: flex;
        justify-content: center;
        align-items: center;

        margin-right: 15px;

        border-radius: 50%;

        background: rgba(0, 229, 255, .12);

        color: var(--primary);

        font-size: 22px;

    }

    .form-control,
    .form-select {

        background: rgba(255, 255, 255, .05);

        border: 1px solid rgba(255, 255, 255, .08);

        color: rgb(255, 255, 255);

        padding: 15px;

        border-radius: 15px;

    }

    .form-control::placeholder {

        color: #9da8b7;

    }

    .form-control:focus,
    .form-select:focus {

        background: rgba(255, 255, 255, .08);

        color: rgb(5, 141, 175);

        border-color: var(--primary);

        box-shadow: 0 0 20px rgba(0, 229, 255, .25);

    }

    textarea {

        resize: none;

    }

    /*==================================================
                FOOTER
==================================================*/

    footer {

        background: #020712;

        padding: 70px 0 30px;

        border-top: 1px solid rgba(255, 255, 255, .08);

    }

    footer h5 {

        margin-bottom: 20px;

    }

    footer ul {

        list-style: none;

        padding: 0;

    }

    footer ul li {

        margin-bottom: 10px;

        color: #c5d0df;

    }

    footer p {

        color: #c5d0df;

    }

    footer hr {

        border-color: rgba(255, 255, 255, .08);

        margin: 40px 0;

    }

    /*==================================================
            WHATSAPP
==================================================*/

    .whatsapp {

        position: fixed;

        right: 30px;

        bottom: 30px;

        width: 65px;

        height: 65px;

        display: flex;

        justify-content: center;

        align-items: center;

        border-radius: 50%;

        background: #25D366;

        color: white;

        text-decoration: none;

        font-size: 32px;

        z-index: 999;

        transition: .35s;

        box-shadow: 0 0 25px rgba(37, 211, 102, .45);

    }

    .whatsapp:hover {

        color: white;

        transform: scale(1.12);

    }

    /*==================================================
            SCROLL TOP
==================================================*/

    #scrollTop {

        position: fixed;

        right: 30px;

        bottom: 110px;

        width: 50px;

        height: 50px;

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

        background: var(--primary);

        color: #001018;

        cursor: pointer;

        opacity: 0;

        visibility: hidden;

        transition: .4s;

    }

    #scrollTop.active {

        opacity: 1;

        visibility: visible;

    }

    /*==================================================
            ANIMACIONES
==================================================*/

    .fade-up {

        animation: fadeUp 1s;

    }

    @keyframes fadeUp {

        from {

            opacity: 0;

            transform: translateY(60px);

        }

        to {

            opacity: 1;

            transform: translateY(0);

        }

    }

    .zoom {

        animation: zoom .8s;

    }

    @keyframes zoom {

        from {

            transform: scale(.8);

            opacity: 0;

        }

        to {

            transform: scale(1);

            opacity: 1;

        }

    }

    .rotate {

        animation: rotate 1s;

    }

    @keyframes rotate {

        from {

            transform: rotate(-15deg);

            opacity: 0;

        }

        to {

            transform: rotate(0);

            opacity: 1;

        }

    }

    /*==================================================
            RESPONSIVE
==================================================*/

    @media(max-width:1200px) {

        .hero h1 {

            font-size: 55px;

        }

    }

    @media(max-width:992px) {

        .navbar {

            padding: 15px;

        }

        .hero {

            padding-top: 120px;
            text-align: center;

        }

        .hero h1 {

            font-size: 48px;

        }

        .hero img {

            margin-top: 50px;

        }

        .section,
        .section-dark {

            padding: 80px 0;

        }

    }

    @media(max-width:768px) {

        .hero h1 {

            font-size: 38px;

        }

        .hero p {

            font-size: 16px;

        }

        .section h2,
        .section-dark h2 {

            font-size: 32px;

        }

        .counter {

            font-size: 48px;

        }

        .btn {

            width: 100%;

            margin-bottom: 15px;

        }

        .contact-info {

            margin-bottom: 40px;

        }

    }

    @media(max-width:576px) {

        .hero h1 {

            font-size: 32px;

        }

        .section {

            padding: 70px 0;

        }

        .section-dark {

            padding: 70px 0;

        }

        .service-card {

            padding: 30px;

        }

        .tech-card {

            padding: 25px;

        }

        .process-card {

            padding: 25px;

        }

    }

    /*==================================================
            NAVBAR SCROLL
==================================================*/

    .navbar.scrolled {

        background: #030712;

        box-shadow: 0 5px 25px rgba(0, 0, 0, .45);

    }

    /*==================================================
            SELECTION
==================================================*/

    ::selection {

        background: var(--primary);

        color: #001018;

    }