/* Modern Vector Design Styles */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Animated Gradient for Navbar/Title Bar */
.navbar-animated {
    background: linear-gradient(-45deg, #8a2be2, #4b0082, #9370db, #6a5acd);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
    border-bottom: none !important;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Navbar Links color adjustment for dark background */
.navbar-animated .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-animated .nav-link:hover {
    color: #fff !important;
}

.navbar-animated .navbar-toggler {
    border-color: rgba(255,255,255,0.5);
}

.navbar-animated .navbar-toggler-icon {
    filter: invert(1);
}

.hero-section {
    position: relative;
    padding: 40px 0 100px 0;
    background: #fff;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.hero-content h1 {
    color: #8a2be2;
    font-weight: 800;
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.hero-content p {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.btn-get-started {
    background-color: #8a2be2;
    color: white;
    padding: 12px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
    transition: 0.3s;
}

.btn-get-started:hover {
    background-color: #6a1b9a;
    transform: translateY(-3px);
    color: white;
}

.vector-image img {
    max-width: 100%;
}

.bottom-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}

/* Course Buttons Styling */
.btn-course {
    border: 2px solid #8a2be2;
    color: #8a2be2;
    background: transparent;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-course:hover, .btn-course:focus, .btn-course:not(.collapsed) {
    background-color: #8a2be2;
    color: white;
    box-shadow: 0 4px 10px rgba(138, 43, 226, 0.2);
}

.course-detail {
    border-left: 4px solid #8a2be2;
    background: #fff;
}