/* 1. INITIAL STATE (Top of page) */
.transition-nav {
    background-color: transparent !important;
    transition: background-color 0.4s ease, padding 0.4s ease;
    padding: 20px 0;
}

/* Initial Text: BLACK */
.brand-text, 
.custom-link {
    color: #000000 !important; 
    transition: color 0.4s ease;
}

/* 2. SCROLLED STATE (When JS adds the class) */
.navbar-scrolled {
    background-color: #000000 !important; /* Background becomes Black */
    padding: 10px 0;
}

/* Scrolled Text: WHITE/GOLD */
.navbar-scrolled .brand-text {
    color: #D4AF37 !important; /* Brand turns Gold */
}

.navbar-scrolled .custom-link {
    color: #ffffff !important; /* Links turn White */
}

/* Hover effect */
.custom-link:hover {
    color: #D4AF37 !important;
}


/* Hero Zoom Animation */
.hero-section {
    height: 100vh;
    background: url('https://images.unsplash.com/photo-1523170335258-f5ed11844a49?q=80&w=1920') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

/* Category Cards */
.category-card {
    position: relative;
    overflow: hidden;
    height: 400px;
    border: 1px solid #333;
}

.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.category-card:hover img {
    transform: scale(1.1);
}

.category-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    color: white;
}

.text-gold { color: #D4AF37 !important; }
.btn-gold { background-color: #D4AF37; color: #000; border: none; }




/* js css of footer  */
.hover-gold:hover {
    color: #D4AF37 !important;
    padding-left: 5px;
    transition: all 0.3s ease;
}

.text-gold {
    color: #D4AF37 !important;
}

.btn-gold {
    background-color: #D4AF37;
    border-color: #D4AF37;
    color: #000;
}

.btn-gold:hover {
    background-color: #b8962e;
    color: #fff;
}


.sidebar {
width:250px;
height:100vh;
position:fixed;
}

.main-content {
margin-left:260px;
}

.nav-link:hover {
background:#FFD700;
color:black !important;
border-radius:5px;
}