/* ==========================================================================
   STICKY HEADER STYLING (Mobile Friendly)
   ========================================================================== */

/* Header ko hamesha top par chipkane ke liye */
.custom-header { 
    background-color: #fefeff; 
    padding: 15px 30px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid #a3a3a3; 
    
    /* Sticky Properties */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Taaki ye baki sab content ke upar rahe */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

/* Ye padding bohot zaroori hai taaki page ka content header ke piche na chupe */
body {
    padding-top: 75px; /* Header ki height ke hisab se adjustment */
}

.logo a { 
    font-size: 25px; 
    font-weight: bold; 
    color: #000000; 
    text-decoration: none; 
    padding: 0px 15px 0px 100px;
    font-family:sans-serif;
}

.nav-links { 
    display: flex; 
    align-items: center; 
    padding-right: 180px;
}

.nav-links a { 
    color: #000000; 
    text-decoration: none; 
    font-weight: 500; 
    font-size: 18px; 
    transition: 0.3s; 
    padding: 5px 20px 5px 20px;
}

.nav-links a:hover { 
    color: #28a745; 
}

.menu-toggle { 
    display: none; 
    flex-direction: column; 
    cursor: pointer; 
    border: none; 
    background: none; 
    padding: 5px;
}

.menu-toggle span { 
    width: 25px; 
    height: 3px; 
    background-color: #000000; 
    margin: 2px 0; 
    border-radius: 2px; 
    transition: 0.4s;
}

/* Hamburger Animation (Jab mobile menu open ho) */
.menu-toggle.open span:nth-child(1) { transform: rotate(-45deg) translate(-4px, 5px); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: rotate(45deg) translate(-4px, -5px); }

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES (Mobile)
   ========================================================================== */
@media (max-width: 768px) {
    .custom-header { 
        padding: 15px 20px; 
    }
    
    body {
        padding-top: 65px; /* Mobile par header thoda chhota ho jata hai */
    }
    
    .menu-toggle { 
        display: flex; 
    }
    
    .nav-links { 
        display: none; 
        flex-direction: column; 
        width: 100%; 
        background-color: #ffffff; 
        position: absolute; 
        top: 100%; /* Header ke bilkul niche khulega */
        left: 0; 
        border-bottom: 1px solid #ddd; 
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        padding: 10px 0;
        z-index: 999; 
    }
    
    .nav-links.active { 
        display: flex; 
    }
    
    .nav-links a { 
        margin: 0; 
        padding: 12px 20px; 
        width: 100%; 
        border-bottom: 1px solid #f5f5f5; 
        box-sizing: border-box;
    }
    
    .nav-links a:last-child { 
        border-bottom: none; 
    }
}