/* ===============================
   QOS LAYOUT SYSTEM
================================ */


/* MAIN CONTAINER */

.container{

max-width:1200px;

margin:auto;

padding:0 20px;

}



/* GRID SYSTEM */

.grid{

display:grid;

gap:24px;

}



.grid-2{

grid-template-columns:repeat(2,1fr);

}



.grid-3{

grid-template-columns:repeat(3,1fr);

}



.grid-4{

grid-template-columns:repeat(4,1fr);

}



/* NAVBAR */

.navbar{

background:white;

border-bottom:1px solid var(--border);

position:sticky;

top:0;

z-index:100;

}



.nav-container{

display:flex;

align-items:center;

justify-content:space-between;

height:70px;

}



/* NAV LEFT */

.nav-left{

display:flex;

align-items:center;

gap:8px;

min-width: 0;

}



/* LOGO */

.logo{

height:36px;

}



.brand-name{

font-weight:600;

font-size:18px;

}



/* NAV CENTER */

.nav-center{

flex:1;

display:flex;

justify-content:center;

}



/* NAV RIGHT */

.nav-right{

display:flex;

gap:12px;

}



/* FOOTER */

.footer{

margin-top:100px;

padding:40px 0;

text-align:center;

color:var(--text-gray);

}


/* ===============================
   MOBILE NAVBAR FIX
================================ */

@media (max-width:600px){

.nav-container{
padding:10px 12px;
}

.nav-left{

display: flex;
align-items: center;
gap: 8px;
min-width: 0;

}


.brand-name{
font-size:15px;
line-height:1.1;
white-space: nowrap;
}

/* shrink logo */

.logo{
width:28px;
height:28px;
}

/* reduce spacing */

.nav-right{
gap:8px;
}

/* make buttons smaller */

.btn{
padding:8px 12px;
font-size:13px;
}

/* hide login on very small phones */

.nav-right .btn-primary{
display:none;
}

}
/* ===============================
   MOBILE NAVBAR
================================ */

@media (max-width:600px){

.nav-container{
padding:10px 12px;
}

.brand-name{
font-size:15px;
white-space:nowrap;
}

.logo{
width:28px;
height:28px;
}

.nav-right{
display:flex;
gap:8px;
flex-wrap:wrap;
}

.btn{
padding:8px 10px;
font-size:13px;
}

}