@media screen and (max-width:576px) {
    .logo{
    width:100px;

}
     .primary-heading{
        font-size:40px !important;
    }
    .sub-heading{
        font-size:16px;
    } 
}
@media (min-width:576.5) and (max-width:768px) {
    .logo{
    width:100px;

}
     .primary-heading{
        font-size:40px !important;
    }
    .sub-heading{
        font-size:16px;
    } 
}
@media (min-width:768.5) and (max-width:991px) {
    .logo{
    width:100px;

}
     .primary-heading{
        font-size:40px !important;
    }
    .sub-heading{
        font-size:16px;
    } 
}

/* Navbar base styles */
.custom-color {
    background-color: transparent;
    position: absolute; /* Allows natural scrolling */
    top: 0;
    z-index: 99;
    width: 100%;
}

/* Ensure dropdown has solid background color in mobile view */
@media (max-width: 991px) { /* Adjust for Bootstrap's mobile breakpoint */
    .navbar-collapse {
        background-color: #60371a !important; /* Solid background */
        padding: 20px; /* Adds spacing */
        border-radius: 5px; /* Optional rounded corners */
    }

    .navbar-nav .nav-link {
        color: white !important; /* White text */
    }

    .navbar-nav .nav-link:hover {
        color: #f0c27b !important; /* Light gold hover effect */
    }
}