:root {
     --light-bg: #faf8f6;
     --primary-color: #842e1b;
     --text-color: #333;
     --light-text: #666;
     --card-radius: 12px;
     --card-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
     --section-bg: #faf8f6
 }



 /* Navbar */
 #header nav {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     background: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 15px 30px;
     box-shadow: 0 2px 5px var(--card-shadow);
     z-index: 1000;
     /* ye line ensure karti hai ke navbar sab ke upar dikhai de (text ke peeche na jaye) */

     /* gap: 40px;*/

 }

 nav.fixed-top {
     position: fixed;
     top: 0;
     width: 100%;
     background: var(--light-bg);
     box-shadow: 0 2px 5px var(--card-shadow);
     z-index: 2000;
 }

 nav .logo img {
     /* height: 60px; */
     width: 115px;
 }

 nav .links {
     display: flex;
     gap: 20px;
     justify-content: center;
     flex: 1;
 }

 nav .links a,
 nav .signin a {
     text-decoration: none;
     color: var(--text-color);
     font-weight: 500;
     padding: 5px 12px;
     border-radius: 5px;
     transition: 0.9s;
 }

 .login-btn {
     display: block;
     width: 100%;
     background: var(--primary-color);
     color: var(--light-bg);
     text-align: center;
     padding: 12px;
     border: none;
     border-radius: 0 0 12px 12px;
     cursor: pointer;
     font-size: 15px;
     font-weight: bold;
     transition: 0.8s;
     /* transition: background 0.3s ease; */
     margin-top: auto;
 }

 .login-btn:hover {
     background: var(--light-bg);
     border: 2px solid var(--primary-color);
     color: var(--primary-color););
 }

 nav .links a.active,
 nav .signin a.active {
     background-color: var(--primary-color) ;
     color:var(--light-bg);
 }

 nav .links a:hover,
 nav .signin a:hover {
     background-color: var(--primary-color);
     color: var(--light-bg);
 }

 /* Sign In Button Right Side */
 nav .signin {
     margin-left: auto;
 }

 /* Hamburger */
 .hamburger {
     display: none;
     font-size: 26px;
     cursor: pointer;
     position: absolute;
     right: 20px;
     z-index: 10000;
 }

 /* Mobile Menu */
 .mobile-menu {
     height: 100vh;
     width: 0;
     position: fixed;
     top: 0;
     left: 0;
     background: var(--light-bg);
     overflow-x: hidden;
     transition: 0.3s;
     padding-top: 60px;
     box-shadow: 2px 0 8px var(--card-shadow);
 }

 .mobile-menu a {
     display: block;
     padding: 15px 25px;
     text-decoration: none;
     color: var(--text-color);
     font-size: 18px;
 }

 .mobile-menu a:hover {
     background: var(--light-bg);
 }

 .mobile-menu .closebtn {
     position: absolute;
     top: 10px;
     right: 15px;
     font-size: 30px;
     cursor: pointer;
     z-index: 10001;
 }

 /* Mobile menu backdrop */
 .mobile-menu-backdrop {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 9998;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s, visibility 0.3s;
 }

 .mobile-menu-backdrop.active {
     opacity: 1;
     visibility: visible;
 }

 /* Responsive */
 @media(max-width:768px) {

     nav .links,
     nav .signin {
         display: none;
     }

     .hamburger {
         display: block;
     }

     /* Ensure mobile menu is above everything */
     .mobile-menu {
         z-index: 9999 !important;
     }

     .mobile-menu-backdrop {
         z-index: 9998 !important;
     }

     .hamburger {
         z-index: 10000 !important;
     }
 }

 /* Additional mobile menu improvements */
 @media(max-width:768px) {
     .mobile-menu {
         width: 280px !important;
         max-width: 80vw;
     }

     .mobile-menu a {
         border-bottom: 1px solid #f0f0f0;
         transition: background-color 0.3s;
     }

     .mobile-menu a:last-child {
         border-bottom: none;
     }

     /* Ensure mobile menu slides in from left */
     .mobile-menu {
         transform: translateX(-100%);
         transition: transform 0.3s ease, width 0.3s ease;
     }

     .mobile-menu.open {
         transform: translateX(0);
     }
 }