/* ================================
   HEADER
================================ */

header{
position:sticky;
top:0;
background:rgba(15,17,21,0.95);
backdrop-filter:blur(10px);
padding:20px 60px;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid rgba(255,255,255,0.05);
z-index:1000;
}

/* LOGO */

.logo-container{
display:flex;
align-items:center;
gap:16px;
}

.logo-container img{
height:60px;
width:auto;
}

.brand-text{
font-size:1.5rem;
font-weight:600;
color:white;
display:flex;
gap:8px;
}

.usa-text{
font-weight:700;
letter-spacing:2px;
background:linear-gradient(
90deg,
#c8102e 0%,
#ffffff 45%,
#002868 100%
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* NAVIGATION */

nav a{
margin-left:25px;
color:#aaa;
font-weight:500;
transition:.3s ease;
}

nav a:hover{
color:white;
}


/* ================================
   FOOTER
================================ */

.site-footer{
background:#0b0e12;
color:rgba(255,255,255,0.8);
padding-top:80px;
margin-top:100px;
}

.footer-container{
max-width:1200px;
margin:0 auto;
display:flex;
gap:80px;
padding:0 20px 60px 20px;
flex-wrap:wrap;
}

.footer-brand{
flex:1.5;
min-width:250px;
}

.footer-brand h3{
font-size:1.4rem;
margin-bottom:15px;
color:white;
}

.footer-brand p{
line-height:1.6;
opacity:.8;
}

.footer-links,
.footer-contact{
flex:1;
min-width:200px;
}

.footer-links h4,
.footer-contact h4{
margin-bottom:15px;
font-size:1rem;
color:white;
}

.footer-links ul{
list-style:none;
padding:0;
margin:0;
}

.footer-links li{
margin-bottom:10px;
}

.footer-links a{
color:rgba(255,255,255,0.75);
transition:.3s ease;
}

.footer-links a:hover{
color:#ff5a1f;
}

.footer-bottom{
text-align:center;
padding:20px;
background:#07090c;
font-size:.85rem;
opacity:.6;
}


/* ================================
   HEADER MOBILE
================================ */

@media(max-width:768px){

header{
flex-direction:column;
padding:10px 15px 6px;
}

.logo-container img{
height:36px;
}

nav{
display:flex;
gap:16px;
flex-wrap:wrap;
justify-content:center;
}

nav a{
font-size:.9rem;
}

.footer-container{
flex-direction:column;
gap:40px;
text-align:center;
}

}

/* ========================= */
/* STANDARD GRID SYSTEM */
/* ========================= */

.grid-standard{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:24px;
margin-top:30px;
}