/* =========================================================
   POLLARD CAD NAVIGATION SYSTEM
========================================================= */


/* =========================================================
   HEADER
========================================================= */


.nav {

    background:
    rgba(15,23,42,.96);

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    padding:
    18px 50px;

    position:
    relative;

    z-index:
    100;

    box-shadow:
    0 4px 20px rgba(0,0,0,.15);

}





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


.logo {

    color:
    white;

    font-size:
    30px;

    font-weight:
    900;

    letter-spacing:
    -.5px;

    text-shadow:
    0 3px 10px rgba(0,0,0,.45);

    transition:
    var(--transition);

}



.logo:hover {

    color:
    #60a5fa;

}





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


.nav nav {

    display:
    flex;

    align-items:
    center;

    gap:
    38px;

}





.nav nav a {

    color:
    rgba(255,255,255,.85);

    font-size:
    15px;

    font-weight:
    700;

    text-decoration:
    none;

    position:
    relative;

    transition:
    .25s ease;

}





/* =========================================================
   LINK UNDERLINE ANIMATION
========================================================= */


.nav nav a:not(.btn)::after {


    content:"";


    position:
    absolute;


    left:
    0;


    bottom:
    -8px;


    width:
    0;


    height:
    2px;


    background:
    #60a5fa;


    transition:
    .25s ease;


}





.nav nav a:not(.btn):hover::after {


    width:
    100%;


}





.nav nav a:hover {


    color:
    white;


}





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


.nav .btn {


    background:
    var(--primary-blue);


    color:
    white;


    padding:
    11px 24px;


    border-radius:
    8px;


    font-weight:
    800;


    box-shadow:
    0 6px 15px rgba(37,99,235,.25);


}





.nav .btn:hover {


    background:
    var(--primary-blue-hover);


    transform:
    translateY(-2px);


}





/* =========================================================
   ACTIVE PAGE SUPPORT
========================================================= */


.nav nav a.active {


    color:
    white;


}





.nav nav a.active::after {


    width:
    100%;


}





/* =========================================================
   MOBILE NAVIGATION
========================================================= */


@media(max-width:768px){


.nav {


    flex-direction:
    column;


    gap:
    20px;


    padding:
    25px 20px;


}





.nav nav {


    flex-wrap:
    wrap;


    justify-content:
    center;


    gap:
    20px;


}





.logo {


    font-size:
    26px;


}


}