@import url('./sections/demo.css');
@import url('./sections/solutions.css');
/* =========================
   GLOBAL
========================= */

body{

    background:#050505;

    overflow-x:hidden;

}

/* =========================
   CONTAINER
========================= */

.container{

    width:min(92%,1320px);

    margin:auto;

}

/* =========================
   NAVBAR
========================= */
.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    padding:24px 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.65),
            rgba(0,0,0,.15)
        );

    backdrop-filter:blur(20px);

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

    transition:
        background .4s ease,
        border-color .4s ease,
        backdrop-filter .4s ease,
        box-shadow .4s ease;

}
/* =========================
   NAVBAR SCROLLED
========================= */

.navbar.scrolled{

    background:
        rgba(5,5,5,.72);

    backdrop-filter:
        blur(18px);

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

    box-shadow:
        0 10px 40px rgba(0,0,0,.35);

}
/* =========================
   NAV CONTAINER
========================= */

.nav-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

/* =========================
   LOGO
========================= */

.logo{

    font-size:28px;

    font-weight:800;

    letter-spacing:-1px;

    color:#fff;

}

.logo span{

    color:var(--electric-blue);

}

/* =========================
   NAV
========================= */

nav ul{

    display:flex;

    align-items:center;

    gap:40px;

}

nav a{

    color:#d8d8d8;

    font-size:15px;

    font-weight:500;

    transition:.3s ease;

    position:relative;

}

/* HOVER */

nav a:hover{

    color:#fff;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    background:var(--electric-blue);

    transition:.3s ease;

}

nav a:hover::after{

    width:100%;

}

/* =========================
   BUTTON
========================= */

.navbar .btn-primary{

    padding:16px 26px;

    border-radius:14px;

    font-size:15px;

}

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

@media(max-width:992px){

    .nav-container{

        flex-direction:column;

        gap:20px;

    }

    nav ul{

        gap:20px;

        flex-wrap:wrap;

        justify-content:center;

    }

}

@media(max-width:768px){

    .navbar{

        padding:18px 0;

    }

    .logo{

        font-size:24px;

    }

    nav ul{

        gap:16px;

    }

    nav a{

        font-size:14px;

    }

}