body {
    background-image: url('your-main-background.jpg'); /* Apnar main background image link */
    background-attachment: fixed; /* Ete image-ti thire thakbe scroll korle-o */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}

/* Navbar default (top position) */
.navbar .nav-link,
.navbar .navbar-brand,
.navbar i {
    color: #ffffff !important;   /* Pure white */
    font-weight: 600;
}

.navbar .nav-link.active {
    font-weight: 700;
}
/* Scrolled state */
.navbar.scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Text color when scrolled (OLD STYLE) */
.navbar.scrolled .nav-link,
.navbar.scrolled .navbar-brand,
.navbar.scrolled i {
    color: #333333 !important;   /* Dark text */
    font-weight: 600;
}

/* Hover when scrolled */
.navbar.scrolled .nav-link:hover {
    color: #ff758c !important;
}

/* Dropdown container */
.dropdown-menu {
    background: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 12px 0;
    min-width: 240px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

/* Top accent line */
.dropdown-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, #0d6efd, #ff758c);
}

/* Dropdown items */
.dropdown-item {
    color: #2c2c2c;
    font-size: 15px;
    font-weight: 500;
    padding: 12px 24px;
    position: relative;
    transition: all 0.3s ease;
}

/* Icon placeholder spacing (future ready) */
.dropdown-item::before {
    content: "›";
    position: absolute;
    left: 16px;
    opacity: 0;
    transition: all 0.3s ease;
    color: #0d6efd;
}

/* Hover effect */
.dropdown-item:hover {
    background: linear-gradient(90deg, rgba(13,110,253,0.08), transparent);
    color: #0d6efd;
    padding-left: 32px;
}

/* Show arrow on hover */
.dropdown-item:hover::before {
    opacity: 1;
    left: 20px;
}

/* Hover dropdown */
@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
        animation: dropdownFade 0.3s ease;
    }
}

/* Animation */
@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Default state (top) */
.btn-apply {
    color: #ffffff !important;
    font-weight: 600;
    text-transform: capitalize;
}

/* Scrolled state */
.navbar.scrolled .btn-apply {
    color: #333333 !important;   /* Same as other nav text */
}


/* Dark Mode */
body.dark-mode {
    background-color: #0f172a;
    color: #e5e7eb;
}

/* Navbar */
body.dark-mode .navbar {
    background-color: #020617 !important;
}

/* Sections */
body.dark-mode section,
body.dark-mode .bg-light,
body.dark-mode .bg-white {
    background-color: #020617 !important;
    color: #e5e7eb;
}

/* Cards */
body.dark-mode .course-card,
body.dark-mode .feature-card,
body.dark-mode .testimonial-card {
    background-color: #020617 !important;
    color: #e5e7eb;
}

/* Footer */
body.dark-mode footer {
    background-color: #020617;
}

/* Links */
body.dark-mode a {
    color: #93c5fd;
}

/* Buttons */
body.dark-mode .btn {
    border-color: #334155;
}


/* Hero Section */
.hero-section {
    height: 100vh;
    position: relative;
    /* Replace with your actual image path */
    background-image: url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&auto=format&fit=crop&w=1470&q=80');
    background-size: cover;
    background-position: center;
}

/* The Purple Overlay in the Screenshot */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(106, 17, 203, 0.6) 0%, rgba(37, 117, 252, 0.4) 100%);
    z-index: 1;
}

.hero-section .container {
    z-index: 2;
}
/* Ensure the hero section takes full height */
.hero-section, #heroCarousel {
    height: 100vh;
    min-height: 600px;
}

.carousel-item {
    transition: transform 0.6s ease-in-out;
}

/* Custom Overlay for each slide */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(106, 17, 203, 0.7) 0%, rgba(37, 117, 252, 0.5) 100%);
    z-index: 1;
}

/* Custom Navigation Arrows (Circle style like image) */
.carousel-control-prev-icon-custom, 
.carousel-control-next-icon-custom {
    background: rgba(255, 255, 255, 0.2);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    transition: 0.1s;
}

.carousel-control-prev-icon-custom:hover, 
.carousel-control-next-icon-custom:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Wave container fix */
.wave-container {
    position: absolute;
    bottom: -1px; /* Prevents tiny gaps */
    width: 100%;
    line-height: 0;
    z-index: 10; /* Keeps it above the images */
}

/* Buttons */
.btn-learn-more {
    background-color: #ff758c;
    color: white;
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: bold;
    border: none;
    transition: 0.3s;
}

.btn-learn-more:hover {
    background-color: #ff5e78;
    color: white;
    transform: translateY(-2px);
}

/* Wave Effect at the bottom */
.wave-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 0;
    z-index: 3;
}

:root {
    --bg-light: #fff9e6; /* Soft cream background from image */
    --accent-pink: #f86191;
    --navy-blue: #2d3436;
}

.courses-section {
    background-color: var(--bg-light);
}

.spacing-1 {
    letter-spacing: 1px;
    font-size: 0.8rem;
}

.color-primary {
    color: #484848;
}

/* Partner Section Styling */
.partner-section {
    background-color: #ffffff; /* No background color (White) */
    border-bottom: 1px solid #f0f0f0; /* Optional: halka ekta divider line */
}

.partner-logo {
    max-height: 150px;
    width: 150px;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.partner-logo:hover {
    filter: grayscale(0%); /* Mouse nile original color firbe */
    opacity: 1;
    transform: scale(1.1); /* Halka zoom hobbe */
}

/* Courses Section Background (Cream color from your screenshot) */
.courses-section {
    background-color: #fff9e6; 
}


/* Course Card Styling */
.course-card {
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: transform 0.3s ease;
}

.course-card:hover {
    transform: translateY(-5px);
}

.badge-duration {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #5d68e2;
    color: white;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: bold;
}

.price-tag {
    color: var(--accent-pink);
    font-size: 1.1rem;
}

.card-title {
    color: #4350b1;
    font-size: 1.25rem;
}

.stars i {
    font-size: 0.8rem;
    margin-right: 2px;
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}

/* Color Palette */
.color-navy { color: #2d3436; }

/* Partner Logos */
.logo-gray {
    max-height: 40px;
    filter: grayscale(100%);
    transition: 0.3s;
}
.logo-gray:hover { filter: grayscale(0%); }

/* View All Courses Button */
.view-all-link {
    color: #ff758c;
    font-size: 1.1rem;
    transition: 0.3s;
}
.view-all-link:hover { color: #ff5e78; margin-left: 5px; }

/* Stats Section Background */
.stats-section {
    background-image: url('library-bg.jpg'); /* Replace with your background image */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.stats-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient matching the screenshot */
    background: linear-gradient(90deg, rgba(142, 68, 173, 0.8) 0%, rgba(41, 128, 185, 0.8) 100%);
    z-index: 1;
}

/* Course Card Hover */
.course-card {
    transition: transform 0.3s ease-in-out;
}
.course-card:hover {
    transform: translateY(-10px);
}

/* Color Palette */
.color-navy {
    color: #2d3954; /* Deep navy blue from image */
}

.text-pink {
    color: #f86191; /* Accurate pink from image icons */
}

.spacing-1 {
    letter-spacing: 2px;
}

.leading-relaxed {
    line-height: 1.8;
}

/* Feature Card Styling */
.feature-card {
    transition: all 0.3s ease;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Subtle Shadow matching the image */
.feature-card.shadow-sm {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

/* Hover Effect */
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
}

/* Icon Resizing */
.icon-box i {
    font-size: 2.5rem;
}
/* CTA Section Styling */
.cta-section {
    /* Use the same background image as your body/stats for consistency */
    background-image: url('library-office-bg.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
    min-height: 400px;
    display: flex;
    align-items: center;
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Matching the vibrant gradient from the screenshot */
    background: linear-gradient(90deg, rgba(155, 89, 182, 0.85) 0%, rgba(52, 152, 219, 0.85) 100%);
    z-index: 1;
}

.spacing-2 {
    letter-spacing: 2px;
}

/* Button: Apply Now (Outline) */
.btn-outline-apply {
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.btn-outline-apply:hover {
    background-color: white;
    color: #8e44ad;
    border-color: white;
}

/* Button: Contact Us (Pink/Coral) */
.btn-contact {
    background-color: #ff758c; /* Matches the "Learn More" pink */
    color: white;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 117, 140, 0.3);
}

.btn-contact:hover {
    background-color: #ff5e78;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 117, 140, 0.4);
}
/* Color and Typography matching the images */
.color-navy {
    color: #2d3954; /* Deep navy blue from your design */
}

.spacing-1 {
    letter-spacing: 2px;
}

.teacher-description p {
    line-height: 1.7;
    font-size: 0.95rem;
}

/* Image Styling */
.teacher-img-wrapper img {
    width: 100%;
    height: 300px; /* Set a fixed height for symmetry */
    object-fit: cover; /* Ensures images aren't stretched */
    transition: transform 0.3s ease;
}

/* Hover effect for a premium feel */
.teacher-img-wrapper:hover img {
    transform: scale(1.03);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .teacher-img-wrapper img {
        height: 200px; /* Shorter height for mobile screens */
    }
}
/* Teacher Card Container */
.teacher-card {
    height: 250px; /* Apnar image height er sathe mil rakhun */
    cursor: pointer;
}

.teacher-card img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Overlay Background */
.teacher-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-color: rgba(0, 0, 0, 0);
    opacity: 0; /* Prothome invisible thakbe */
    transition: all 0.4s ease-in-out;
    padding: 20px;
}

/* Hover Effect Logic */
.teacher-card:hover .teacher-overlay {
    opacity: 1; /* Mouse nile overlay asbe */
	background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}

.teacher-card:hover img {
    transform: scale(1.1); /* Image halka zoom hobe */
}

/* Text Animation */
.teacher-overlay h5, .teacher-overlay p {
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.teacher-card:hover .teacher-overlay h5,
.teacher-card:hover .teacher-overlay p {
    transform: translateY(0); /* Text niche theke upore bheshe uthbe */
}

/* Color Scheme */
.color-navy {
    color: #2d3954;
}

.text-pink {
    color: #f86191; /* Screenshot এর quote icon এর কালার */
}

/* Testimonial Card Styling */
.testimonial-card {
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08) !important;
}

.leading-relaxed {
    line-height: 1.8;
}

.student-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid #f8f9fa;
}

.quote-icon i {
    opacity: 0.3; /* হালকা ইফেক্ট এর জন্য */
}
/* Footer Styles */
.footer-section {
    background-color: #1e1e2f; 
}

.text-secondary {
    color: #a0a0b8 !important; 
}

.leading-relaxed {
    line-height: 1.8;
}

.footer-custom-logo {
    max-width: 180px; /* লোগোর চওড়া আপনার পছন্দমতো কমাতে বা বাড়াতে পারেন */
    height: auto;     /* লোগোর রেশিও ঠিক রাখবে */
    display: block;
    
}

/* মোবাইল ভিউতে লোগোটি সেন্টারে রাখতে চাইলে */
@media (max-width: 768px) {
    .footer-logo {
        text-align: center;
        display: flex;
        justify-content: center;
    }
}

/* Navigation Links */
.footer-nav a {
    text-decoration: none;
    color: #a0a0b8;
    transition: 0.3s;
    font-size: 0.95rem;
}

.footer-nav a:hover {
    color: #f86191; /* পিঙ্ক কালার হোভার ইফেক্ট */
    padding-left: 5px;
}

/* Social Links */
.social-links a {
    color: #a0a0b8;
    font-size: 0.9rem;
    transition: 0.3s;
}

.social-links a:hover {
    color: #f86191;
}

/* Text Pink Highlight */
.text-pink {
    color: #f86191;
}


/* Responsive divider fix */
@media (max-width: 768px) {
    .footer-nav, .contact-info {
        margin-bottom: 2rem;
    }
}
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background-color: #f86191;
    color: white;
    border-radius: 50%;
    display: flex; /* Prothome invisible rakhte niche JS diye control kora hobe */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 999;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 4px 15px rgba(248, 97, 145, 0.4);
}

.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
}

.scroll-top-btn:hover {
    background-color: #e04e7d;
    color: white;
    transform: translateY(-5px);
}