:root {
    --primary: #E63946;
    --secondary: #F77F00;
    --tertiary: #FFD166;
    --button-start: var(--secondary);
    --button-end: var(--primary);
    --text-dark: #1D1D1D;
    --text-light: #fff;
    --text-muted: #6c757d;
}

.navbar {
    padding-top: 0.25rem;  
    padding-bottom: 0.25rem;
    background-color: var(--text-light);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar .container {
    max-width: 100%;
    padding-left: 1rem;  
    padding-right: 1rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


@media (min-width: 800px) {
    .navbar.scrolled {
        padding: 0.3rem 2rem;
        border-radius: 30px;
        margin: 0 6rem;
        box-shadow: rgba(0,0,0,0.6) 0px 2px 4px; 
        background-color: rgba(255, 255, 255, 0.5);
        opacity: 0.8; 
    }
}

/* Styles for mobile navbar */
@media (max-width: 767px) {
    .navbar {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }

    .navbar-brand img {
        height: 70px; 
    }

    .navbar-nav {
        font-size: 1rem;
        gap: 1rem;
    }

    .navbar-nav .nav-link {
        padding: 0.4rem 0.8rem;
    }

    /* Navbar container padding on mobile */
    .navbar .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

.navbar-brand img {
    height: 90px; 
    max-height: 90px; 
    width: auto;
}

.navbar-brand {
    margin-right: auto; 
}

.collapse.navbar-collapse {
    justify-content: flex-end !important; 
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: 2rem; 
}

.navbar-nav .nav-link {
    font-size: 1.2rem; 
    padding: 0.5rem 1rem;
    color: var(--text-dark);
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--primary);
    text-decoration: none;
}

.contact-link {
    background: linear-gradient(45deg, var(--button-start), var(--button-end));
    color: var(--text-light) !important;
    padding: 0.5rem 1.25rem;
    border-radius: 5px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.contact-link:hover {
    background: linear-gradient(45deg, var(--button-end), var(--button-start));
    color: var(--text-light) !important;
}

.navbar-toggler {
    border: 2px solid var(--primary); 
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(230,70,70, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); /* Change hamburger icon color */
}

/* Push content below navbar */
body {
  padding-top: 100px; /* adjust to match navbar height */
}

/* Default navbar */
.navbar {
    padding-top: 0.25rem;  
    padding-bottom: 0.25rem;
    background-color: #fff; /* solid white */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    opacity: 1; /* fully solid */
}

/* On scroll (desktop view) */
@media (min-width: 800px) {
    .navbar.scrolled {
        padding: 0.3rem 2rem;
        border-radius: 0; /* no floating rounded look */
        margin: 0; 
        box-shadow: rgba(0,0,0,0.1) 0px 2px 4px; 
        background-color: #fff; /* solid white background */
        opacity: 1; /* no transparency */
    }
}