/* Default */
.nav-link{
font-size: 16px;
}
/* Larger Nepali font */
body.nepali .nav-link{
font-size: 20px;
font-family: "Noto Sans Devanagari", sans-serif;
font-weight: 600;
}
/* Mobile navbar keep visible */
@media (max-width:768px){
nav ul, .navbar-nav{display:flex!important;flex-wrap:wrap!important;justify-content:center;gap:6px}
nav li{display:block!important}
nav a{font-size:12px;padding:6px 8px!important;white-space:nowrap}
}
*{box-sizing:border-box}img,video,canvas,iframe{max-width:100%;height:auto}
table{display:block;overflow-x:auto;white-space:nowrap}
button,input,select,textarea,a.btn{min-height:44px}
body{overflow-x:hidden}
.navbar{position:sticky;top:0;z-index:999}
@media(max-width:768px){
.container,.wrapper{width:100%!important;padding:12px!important}
.row{display:flex;flex-wrap:wrap}
[class*='col']{width:100%!important}
.navbar{overflow-x:auto;white-space:nowrap}
}
@media(min-width:769px) and (max-width:1024px){
[class*='col']{flex:1 1 50%!important}
}
.mobile-menu-btn{
display:none;
background:none;
border:none;
color:#fff;
font-size:30px;
cursor:pointer;
}
@media (max-width:768px){
nav ul{
display:none;
}
.mobile-menu-btn{
display:block;
}
.mobile-menu{
display:none;
position:absolute;
top:100%;
left:0;
width:100%;
background:#0f172a;
flex-direction:column;
z-index:999;
}
.mobile-menu.show{
display:flex;
}
.mobile-menu a{
padding:15px 20px;
display:block;
border-bottom:1px solid rgba(255,255,255,.1);
text-decoration:none;
color:#fff;
}
.mobile-menu a:hover{
background:#1e293b;
}
}
@media(max-width:768px){
nav ul{display:flex;overflow-x:auto;white-space:nowrap;gap:8px;-ms-overflow-style:none;scrollbar-width:none}
nav ul::-webkit-scrollbar{display:none}
nav ul li a{font-size:12px;padding:8px 10px;display:block}
}
/* Facebook/YouTube style mobile nav */
nav,.navbar{
position:sticky;top:0;z-index:999;background:#fff;border-bottom:1px solid #ddd;
}
.nav-links, nav ul, .navbar ul{
display:flex;overflow-x:auto;white-space:nowrap;gap:8px;
scrollbar-width:none;-ms-overflow-style:none;
}
.nav-links::-webkit-scrollbar,nav ul::-webkit-scrollbar,.navbar ul::-webkit-scrollbar{display:none;}
.nav-links a,nav ul li a,.navbar ul li a{
display:inline-flex;align-items:center;justify-content:center;
padding:10px 12px;font-size:13px;font-weight:600;text-decoration:none;
border-radius:18px;flex:0 0 auto;
}
@media(max-width:768px){
.nav-links a,nav ul li a,.navbar ul li a{font-size:12px;padding:9px 10px;}
}
@media(max-width:768px){
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:60px;background:#fff;display:flex;justify-content:space-around;align-items:center;box-shadow:0 -2px 10px rgba(0,0,0,.15);z-index:9999}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;font-size:11px;color:#666;text-decoration:none;padding:4px 8px}
.bottom-nav a.active{color:#1877f2;font-weight:bold}
.bottom-nav a.active::after{content:'';display:block;width:24px;height:3px;background:#1877f2;border-radius:3px;margin-top:4px}
body{padding-bottom:70px}
}
@media(min-width:769px){.bottom-nav{display:none}}
header,nav{position:sticky;top:0;z-index:9999}
.menu-toggle{display:none;cursor:pointer;font-size:28px}
nav ul{display:flex;gap:20px;list-style:none}
nav a.active{color:#38bdf8;font-weight:bold}
@media(max-width:768px){
.menu-toggle{display:block}
nav ul{display:none;flex-direction:column;background:rgba(15,23,42,.96);position:absolute;left:0;right:0;top:100%;padding:15px}
nav ul.open{display:flex;animation:fade .3s}
body{font-size:16px}
img{max-width:100%;height:auto}
section{padding:18px}
button,a{min-height:44px}
}
@keyframes fade{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(min-width:769px) and (max-width:1024px){body{font-size:17px}}
@media(min-width:1025px){body{font-size:18px}}
/* Fullscreen fixed hero background */
body::before{
content:"";
position:fixed;inset:0;
background:url('Images/A.jpg') center/cover no-repeat fixed;
z-index:-2;
}
body::after{
content:"";
position:fixed;inset:0;
background:rgba(0,0,0,.5);
z-index:-1;
}
header,.navbar,nav{position:sticky;top:0;z-index:1000;}
.hero,.banner{min-height:100vh;display:flex;align-items:center;}
.hero *,.banner *,body{position:relative;}
@media (max-width:768px){
body::before{background-attachment:scroll;}
}
@media(max-width:768px){body{overflow-x:hidden}.container,main,section{max-width:100%;padding-left:12px;padding-right:12px}nav{display:flex;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}img{max-width:100%;height:auto}}