:root {
    --bass-deep: #b0d0ff;
    --bass-warm: #d8600a;
    --bass-pop: #ff9a00;
    --bass-bright: #44c1ff;
    --bass-neutral: #fff0e4;
    --primary-1: #409700;
    --secondary-1: #4ECDC4;
    --accent-1: #FFD166;

}

*,
*::after,
*::before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}



    @font-face {
      font-family: 'Fredoka Condensed';
      src: url('../font/Fredoka-Regular.ttf') format('truetype');
    }

    body {
      background-color: var(--bass-neutral);
      padding-top: 0;
      font-family: 'Fredoka Condensed', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    }



/* Kids-themed navigation link backgrounds */
.navbar-nav .nav-item:nth-child(1) .nav-link {
    background: #D70505  !important;
    color: white !important;
    border: 2px solid #FF5252;
}

.navbar-nav .nav-item:nth-child(2) .nav-link {
    background: #0205b1;
    color: white !important;
    border: 2px solid #0205b1;
}

.navbar-nav .nav-item:nth-child(3) .nav-link {
    background:#ce9104 !important;
    color: #fff !important;
    border: 2px solid #ce9104;
}

.navbar-nav .nav-item:nth-child(4) .nav-link {
    background: #00A0FF;
    color: white !important;
    border: 2px solid #00A0FF;
}

.navbar-nav .nav-item:nth-child(5) .nav-link {
    background: linear-gradient(135deg, #028b66 50%, #067252 100%) !important;
    color: white !important;
    border: 2px solid #00C853;
}

.navbar-nav .nav-item:nth-child(6) .nav-link {
    background: linear-gradient(135deg, #8a0ca0 50%, #710d83 100%) !important;
    color: white !important;
    border: 2px solid #7B1FA2;
}

/* Hover effects for kid-friendly colors */
.navbar-nav .nav-item:nth-child(1) .nav-link:hover {
    background: linear-gradient(135deg, #e93f3f 50%, #a10f0f 100%) !important;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 5px 15px rgba(255, 82, 82, 0.4);
}

.navbar-nav .nav-item:nth-child(2) .nav-link:hover {
    background: linear-gradient(135deg, #26A69A 50%, #08938a 100%) !important;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 5px 15px rgba(38, 166, 154, 0.4);
}

.navbar-nav .nav-item:nth-child(3) .nav-link:hover {
    background: linear-gradient(135deg, #FFC107 50%, #000000 100%) !important;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
}

.navbar-nav .nav-item:nth-child(4) .nav-link:hover {
    background: linear-gradient(135deg, #0277BD 50%, #118AB2 100%) !important;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 5px 15px rgba(2, 119, 189, 0.4);
}

.navbar-nav .nav-item:nth-child(5) .nav-link:hover {
    background: linear-gradient(135deg, #00C853 50%, #06D6A0 100%) !important;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 200, 83, 0.4);
}

.navbar-nav .nav-item:nth-child(6) .nav-link:hover {
    background: linear-gradient(135deg, #7B1FA2 50%, #9C27B0 100%) !important;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 5px 15px rgba(123, 31, 162, 0.4);
}

/* Active state styles */
.navbar-nav .nav-item:nth-child(1) .nav-link.active {
    background: linear-gradient(135deg, #D32F2F 50%, #FF5252 100%) !important;
    box-shadow: 0 3px 10px rgba(211, 47, 47, 0.5);
}

.navbar-nav .nav-item:nth-child(2) .nav-link.active {
    background: linear-gradient(135deg, #00796B 50%, #26A69A 100%) !important;
    box-shadow: 0 3px 10px rgba(0, 121, 107, 0.5);
}

.navbar-nav .nav-item:nth-child(3) .nav-link.active {
    background: linear-gradient(135deg, #FF8F00 50%, #FFC107 100%) !important;
    box-shadow: 0 3px 10px rgba(255, 143, 0, 0.5);
}

.navbar-nav .nav-item:nth-child(4) .nav-link.active {
    background: linear-gradient(135deg, #01579B 50%, #0277BD 100%) !important;
    box-shadow: 0 3px 10px rgba(1, 87, 155, 0.5);
}

.navbar-nav .nav-item:nth-child(5) .nav-link.active {
    background: linear-gradient(135deg, #00A152 50%, #00C853 100%) !important;
    box-shadow: 0 3px 10px rgba(0, 161, 82, 0.5);
}

.navbar-nav .nav-item:nth-child(6) .nav-link.active {
    background: linear-gradient(135deg, #6A1B9A 50%, #7B1FA2 100%) !important;
    box-shadow: 0 3px 10px rgba(106, 27, 154, 0.5);
}

/* Mobile-specific adjustments 
@media (max-width: 991.98px) {
    .navbar-nav .nav-link {
        margin: 0.5rem 0;
        text-align: center;
        font-weight: bold;
        font-size: 1.1rem;
    }


    .navbar-nav .nav-link:hover {
        animation: bounce 0.5s ease;
    }
}

*/

@keyframes bounce {

    50%,
    250%,
    650%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-5px);
    }

    80% {
        transform: translateY(-2px);
    }
}

/* Make dropdown items also kid-friendly */
.dropdown-item:nth-child(1) {
    background: linear-gradient(135deg, #FF6B6B 50%, #FF8E8E 100%) !important;
    color: white !important;
    border-left: 4px solid #FF5252;
}

.dropdown-item:nth-child(2) {
    background: linear-gradient(135deg, #4ECDC4 50%, #88D7D4 100%) !important;
    color: white !important;
    border-left: 4px solid #26A69A;
}

.dropdown-item:nth-child(3) {
    background: linear-gradient(135deg, #FFD166 50%, #FFE082 100%) !important;
    color: #333 !important;
    border-left: 4px solid #FFC107;
}

.dropdown-item:nth-child(4) {
    background: linear-gradient(135deg, #118AB2 50%, #4DA8CA 100%) !important;
    color: white !important;
    border-left: 4px solid #0277BD;
}

.dropdown-item:hover {
    transform: translateX(8px) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}




.navbar {
    background: linear-gradient(135deg, var(--bass-neutral) 0%, #ffffff 100%) !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    padding: 0;
    transition: all 0.3s ease;
}

/* Fixed navbar styles */
.navbar.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Brand Styles */
.navbar-brand {
    /*font-family: 'Comic Neue', cursive;*/
    font-weight: 700;
    color: var(--bass-deep) !important;
    transition: transform 0.3s ease;
}

/* Desktop Brand */
.navbar-brand.d-none.d-lg-block {
    font-size: 1.8rem;
    position: absolute;
    left: 47%;
    transform: translateX(-50%);
}

.navbar-brand.d-none.d-lg-block:hover {
    transform: translateX(-50%) scale(1.05);
}

/* Mobile Brand */
.navbar-brand.d-lg-none {
    font-size: 1.3rem;
}

.navbar-brand:hover {
    color: var(--bass-deep) !important;
}

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

/* Navigation Links */
.nav-link {
    color: var(--bass-deep) !important;
    font-weight: 500;
    margin: 0 0.5rem;
    border-radius: 25px;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem !important;
}

.nav-link:hover,
.nav-link.active {
    background-color: var(--bass-pop) !important;
    color: white !important;
    transform: translateY(-2px);
}

/* Dropdown Styles */
.dropdown-menu {
    border: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    border: 2px solid var(--bass-bright);
}

.dropdown-item {
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: var(--bass-bright) !important;
    color: white;
    transform: translateX(5px);
}

/* Form Styles */
.form-control {
    border: 2px solid var(--bass-bright);
    border-right: none;
}

.form-control:focus {
    border-color: var(--bass-pop);
    box-shadow: 0 0 0 0.25rem rgba(255, 154, 0, 0.25);
}

.btn-outline-primary {
    border: 2px solid var(--bass-bright);
    border-left: none;
    color: var(--bass-bright);
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background-color: var(--bass-bright);
    color: white;
    transform: scale(1.05);
}

/* Mobile Specific Styles */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: white;
        margin-top: 1rem;
        border-radius: 15px;
        padding: 1rem;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .nav-link {
        text-align: center;
        margin: 0.25rem 0;
    }

    .dropdown-menu {
        text-align: center;
        border: none;
        box-shadow: none;
        background-color: var(--bass-neutral);
    }
}

/* Desktop Specific Styles */
@media (min-width: 992px) {
    .navbar-nav.d-none.d-lg-flex {
        display: flex !important;
    }
}

/* Content for scrolling demonstration */
.content-section {
    height: 1000px;
    padding: 2rem;
    margin-top: 2rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 15px;
}

.logo-1 {
    display: none;
}

@media screen and (min-width: 992px) and (max-width: 1214px) {
    .logo {
        display: none !important;
    }

    .logo-1 {
        display: block !important;
        height: 60px;
    }
}