/*
====================================================================

NOVA UI SYSTEM

File         : nova-layout.css
Version      : 1.0.0
Layer        : Layout Engine

Developed by
Mustafa & Hamza

====================================================================
*/

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

.container{
    width:min(var(--container), calc(100% - 40px));
    margin-inline:auto;
}

.nova-container{
    width:min(var(--container), calc(100% - 40px));
    margin-inline:auto;
}

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

.nova-section{
    position:relative;
    padding-block:var(--space-80);
}

.nova-section-sm{
    padding-block:var(--space-48);
}

.nova-section-lg{
    padding-block:96px;
}

/* ==========================================================
   GRID
========================================================== */

.nova-grid{
    display:grid;
    gap:var(--space-24);
}

.nova-grid-2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-32);
}

.nova-grid-3{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--space-24);
}

.nova-grid-4{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--space-24);
}

.nova-grid-auto{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:var(--space-24);
}

/* ==========================================================
   FLEX
========================================================== */

.nova-flex{
    display:flex;
}

.nova-inline-flex{
    display:inline-flex;
}

.nova-column{
    flex-direction:column;
}

.nova-row{
    flex-direction:row;
}

.nova-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.nova-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.nova-align-center{
    align-items:center;
}

.nova-justify-center{
    justify-content:center;
}

.nova-justify-between{
    justify-content:space-between;
}

/* ==========================================================
   GAP
========================================================== */

.nova-gap-xs{
    gap:var(--space-8);
}

.nova-gap-sm{
    gap:var(--space-16);
}

.nova-gap-md{
    gap:var(--space-24);
}

.nova-gap-lg{
    gap:var(--space-32);
}

.nova-gap-xl{
    gap:var(--space-48);
}

/* ==========================================================
   POSITION
========================================================== */

.nova-relative{
    position:relative;
}

.nova-absolute{
    position:absolute;
}

.nova-fixed{
    position:fixed;
}

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

@media (max-width:1024px){

    .nova-grid-4{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    .nova-grid-2,
    .nova-grid-3,
    .nova-grid-4{
        grid-template-columns:1fr;
    }

    .nova-section{
        padding-block:var(--space-48);
    }

}
/* =======================================
   NOVA AURA HEADER V1
======================================= */

.header{

    background:rgba(7,11,26,.82);

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

    border-radius:18px;

    transition:.35s ease;

}

.header:hover{

    border-color:rgba(60,145,255,.22);

}
.header .logo img{

    transition:.35s;

}

.header .logo img:hover{

    filter:
        drop-shadow(0 0 8px #3b82f6)
        drop-shadow(0 0 24px #2563eb);

}
/* ===========================
   NOVA HEADER V2
=========================== */

header .container{
    max-width:1280px;
}

header .header{

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

    padding:18px 0;

}
.navbar .nav-link{

    color:#EDF3FF;

    font-weight:600;

    transition:.30s;

}

.navbar .nav-link:hover{

    color:#62A8FF;

}
.logo img{

    transition:.35s;

}

.logo img:hover{

    filter:
        drop-shadow(0 0 10px #3B82F6)
        drop-shadow(0 0 28px #2563EB);

}