.background-container {
    background-color: #2c2e5c;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.circle {
    position: absolute;
    border: 40px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.circle-1 {
    width: 600px;
    height: 600px;
    top: -200px;
    left: -100px;
}

.circle-2 {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -200px;
}

.circle-3 {
    width: 300px;
    height: 300px;
    bottom: 100px;
    left: -150px;
}

.edu-icon {
    position: absolute;
    color: rgba(255, 255, 255, 0.2);
    font-size: 32px;
}

.pencil {
    top: 100px;
    left: 100px;
}

.eraser {
    top: 300px;
    right: 200px;
}

.sharpener {
    bottom: 200px;
    left: 300px;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.wave svg {
    display: block;
    width: 100%;
}

.text-white {
    color: white !important;
}

/* Default header styles */
header {
    /* Fix the header at the top */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* Ensure it stays on top of other elements */
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

/* When scrolled, change background color and nav links */
header.scrolled {
    background-color: #fff !important;
    /* Change background to #2c2e5c */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Optional shadow effect */
    position: fixed !important;
}

/* Default nav link colors */
.navbar-nav .nav-link {
    color: #2c2e5c !important;
    transition: color 0.3s ease-in-out;
}

/* On scroll, keep links white */
header.scrolled .nav-link {
    color: #2c2e5c !important;
    /* Keep text white when scrolled */
}

/* Dropdown menu styling */
.navbar-nav .dropdown-menu {
    background-color: #2c2e5c !important;
}

.navbar-nav .dropdown-item {
    color: white !important;
}

.navbar-nav .dropdown-item:hover {
    background-color: white !important;
    color: #2c2e5c !important;
}