/* Basic styles - expand or replace with your own theme */
body{font-family:Arial,Helvetica,sans-serif;margin:0;color:#222}
.container{max-width:1100px;margin:0 auto;padding:15px}
.site-header{background:#6b1f2b;color:#fff;padding:10px 0} 

/* .site-header, header {
/*    background: linear-gradient(
/*        90deg,
/*        #c97a00 0%,    /* Dark golden */
/*        #d88400 15%,   /* Deep orange-gold */
/*        #e08c00 30%,   /* Dark amber */
/*        #e47f00 45%,   /* Burnt orange */
/*        #d36f00 60%,   /* Dark saffron */
/*        #c96a00 75%,   /* Deep warm gold */
/*        #b55d00 90%,   /* Dark bronze */
/*        #a65300 100%   /* Very dark temple gold */
/*    );
/*    color: white;
/* } */

.brand{display:flex;align-items:center}
.brand .logo{height:100px;margin-right:12px;border-radius:8px}
.main-nav a{color:#fff;margin:0 8px;text-decoration:none}
.hero{background:url('../assets/images/hero.jpg') center/cover;padding:50px;color:#fff;text-align:center}
.presidet-box img{height:120px;border-radius:50%}
.committee-grid{display:flex;flex-wrap:wrap}
.committee-card{width:180px;padding:10px;text-align:center}
.gallery-grid{display:flex;flex-wrap:wrap;gap:10px}
.gallery-grid img{width:200px;height:140px;object-fit:cover}
.site-footer{background:#111;color:#fff;padding:20px;margin-top:30px}


main.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery-img {
    width: 300px;
    height: auto;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}
.gallery-img:hover {
    transform: scale(1.05);
}

/* Navigation container */
.main-nav {
    display: flex;
    gap: 12px;
}

/* Navigation container */
.main-nav {
    display: flex;
    flex-wrap: wrap;      /* Allows proper wrapping on small screens */
    gap: 10px;
    justify-content: flex-end;
}

/* Button-style links */
.main-nav a {
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    transition: 0.25s;
    display: inline-block;
    white-space: nowrap;  /* Prevents text breaking inside button */
}

/* Hover Effect */
.main-nav a:hover {
    background: #0057d9;
    color: #fff;
    border-color: #0057d9;
    transform: translateY(-2px);
}

/* Active button */
.main-nav a.active {
    background: #0057d9;
    color: #fff;
    border-color: #0057d9;
}

/* ---------- Mobile Fix ---------- */
@media (max-width: 768px) {
    .main-nav {
        justify-content: center;  /* Center on mobile */
        gap: 8px;
    }

    .main-nav a {
        padding: 10px 14px;
        font-size: 14px;
    }

    /* Brand section alignment fix on mobile */
    .brand {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .site-header .container {
        flex-direction: column;
        align-items: center;
    }
}

/* Sticky section navigation */
.section-nav {
    position: sticky;
    top: 70px;     /* Adjust based on header height */
    z-index: 999;
    background: #fff;
    padding: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Buttons */
.section-nav a {
    padding: 8px 14px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    transition: 0.2s;
}

.section-nav a:hover {
    background: #0057d9;
    color: #fff;
    border-color: #0057d9;
}

/* Provide space so section is visible after sticky header */
h3 {
    scroll-margin-top: 90px;  /* Prevents headings from hiding under header */
}

html {
    scroll-behavior: smooth;
}