.collapse{
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Styling for the custom navigation bar */
.main-nav .nav-link {
    position: relative; /* Needed for the underline positioning */
    font-weight: 500;
    padding: 8px 0; /* Adjust padding for better spacing */
    margin: 0 12px; /* Add space between nav items */
    transition: color 0.3s ease-in-out;
}

/* Create the underline using a pseudo-element */
.main-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0; /* Starts with no width */
    height: 2px;
    background-color: #0d6efd; /* Bootstrap's primary blue, change as needed */
    transition: width 0.3s ease-in-out; /* Animation for the width */
}

/* Animate the underline and change text color on hover */
.main-nav .nav-link:hover {
    color: #0a58ca !important; /* A slightly darker blue for hover */
}

.main-nav .nav-link:hover::after {
    width: 100%; /* Expands to full width on hover */
}

/* Style for the active link */
.main-nav .nav-link.active {
    color: #0d6efd !important; /* Keep the text color blue */
    font-weight: 700; /* Make the active link bolder */
}

/* Make the underline permanently visible for the active link */
.main-nav .nav-link.active::after {
    width: 100%;
}

.navbar-brand{
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* .vid-parent{
    position: relative;
}

.remove-vid-marg{
    margin: 0px;
    padding: 0px;
}

video{
    height: 100%;
    width: 100%;
}

.vid-overlay{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #225470;
    z-index: 1;
    opacity: 0.8;
} */

/* Parent container for the video hero section */
.vid-parent {
  position: relative;
  height: 100vh; /* Full screen height */
  width: 100%;
  display: flex; /* Using Flexbox for easy centering */
  justify-content: center; /* Horizontally center content */
  align-items: center; /* Vertically center content */
  overflow: hidden;
}

/* Background video styling */
.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1; /* Place it in the absolute back */
}

/* Semi-transparent overlay to make text readable */
.vid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
  height: 100%;
  width: 100%;
  background-color: #225470; /* Black with 50% opacity */
  z-index: 1; /* Above the video, but below the content */
}

/* Container for the centered text and button */
.vid-content {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: normal;
  position: relative; /* Not strictly necessary but good practice */
  z-index: 2; /* Ensures content is on top of the overlay */
  color: #fff; /* White text color for contrast */
  max-width: 800px; /* Prevents text from being too wide on large screens */
  padding: 20px;
}

/* Styling for the button */
.vid-content .btn {
  padding: 12px 30px;
  font-weight: 600;
  border-radius: 50px; /* Creates a modern pill-shaped button */
  transition: all 0.3s ease;
}

.vid-content .btn:hover {
  transform: translateY(-3px); /* Lifts the button slightly on hover */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.feature-bar {
            background-color: #dc5f57; 
            color: white;
            padding: 1rem 0;
            font-family: sans-serif;
        }

        .feature-item {
            display: flex;
            align-items: center;
            justify-content: center; /* Centers the item within its column */
            height: 100%;
        }
        
        /* On small screens (like mobile), the items will stack. 
           This media query aligns them to the left and adds some spacing. */
        @media (max-width: 767.98px) {
            .feature-item {
                justify-content: flex; /* Align left on mobile */
                padding: 0.5rem 0;
                margin: auto;
            }
        }

        .feature-item .icon {
            font-size: 1.5rem; /* Adjust icon size */
            margin-right: 0.75rem; /* Space between icon and text */
        }
        
        .feature-item .text {
            font-weight: 500; /* Makes the text slightly bolder */
        }

        courses-section {
            /* A light grey background for the entire section */
            background-color: #f8f9fa;
            padding-top: 4rem;
            padding-bottom: 4rem;
        }

        .section-title {
            font-weight: 600;
            color: #343a40;
            margin-bottom: 3rem !important;
        }
        
        /* Custom card styling */
        .course-card {
            border: 1px solid #e9ecef; /* Lighter border than default */
            transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
            border-radius: 0.25rem; /* Slightly less rounded corners */
        }

        .course-card:hover {
            transform: translateY(-5px); /* Slight lift effect on hover */
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Softer shadow on hover */
        }
        
        .card-img-container {
            text-align: center; /* Center the image within its container */
            padding: 1.5rem 1.5rem 0; /* Add padding to match the whitespace */
        }

        .card-img-top {
            /* The image is not full-width in the design */
            max-width: 100%;
            height: 160px; /* Gives all images a uniform height */
            object-fit: contain; /* Prevents stretching and shows the full image */
        }

        .card-body {
            padding: 1.25rem;
        }

        .card-title {
            font-weight: 600; /* Bolder course title */
            color: #212529;
            font-size: 1.1rem;
        }

        .card-text {
            color: #6c757d; /* Softer grey for description text */
            font-size: 0.9rem;
            min-height: 80px; /* Ensures card bodies are roughly the same height */
        }

        /* Styling for the footer containing price and button */
        .card-footer {
            background-color: #f8f9fa; /* Match the light grey background */
            border-top: 1px solid #e9ecef; /* Light separator line */
            padding: 1rem 1.25rem;
        }

        .price-text {
            font-size: 0.95rem;
            color: #6c757d;
        }

        .original-price {
            text-decoration: line-through;
            margin-left: 0.25rem;
        }

        .current-price {
            font-weight: 700;
            color: #212529; /* Black color for the final price */
            margin-left: 0.5rem;
        }



        .contact-section {
            padding: 4rem 0;
        }

        .view-all-btn {
            background-color: #dc5f57;
            color: white;
            font-weight: 500;
            border: none;
            padding: 0.5rem 1.5rem;
            border-radius: 4px;
        }

        .view-all-btn:hover {
            background-color: #c84a42;
            color: white;
        }

        .contact-section .form-control {
            border-radius: 2px;
            border: 1px solid #ced4da;
            padding: 0.75rem 1rem;
        }

        .contact-section .form-control:focus {
            box-shadow: none;
            border-color: #86b7fe;
        }

        .address-card {
            background-color: #dc5f57;
            color: white;
            padding: 2.5rem;
            transform: rotate(-8deg); /* The tilt effect */
            border-radius: 8px;
            box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15);
            line-height: 1.6;
        }

        .address-card h4 {
            font-weight: 700;
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        .address-card p {
            margin-bottom: 0;
            font-size: 1rem;
        }

        /* Responsive: Remove tilt on tablets and phones for better readability */
        @media (max-width: 991.98px) {
            .address-card {
                transform: rotate(0); 
            }
        }

        /* --- Hanging & Swinging Card Styles --- */
.hanging-card-wrapper {
    /* Sets the pivot point for the swing to the top center */
    transform-origin: top center;
    
    /* Attaches the animation */
    animation: swing 3.5s ease-in-out infinite alternate;
    
    /* Positioning for the string */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hanging-string {
    width: 3px;
    height: 60px;
    background-color: #555;
    position: relative;
}

/* This creates the "pin" that the string hangs from */
.hanging-string::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background-color: #343a40;
    border-radius: 50%;
}

.hanging-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    text-align: center;
    width: 100%;
    max-width: 350px; /* Prevents card from becoming too wide */
}

.hanging-card h4 {
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.hanging-card p {
    margin-bottom: 0;
    line-height: 1.7;
    color: #495057;
}

/* The Keyframes that define the swinging animation */
@keyframes swing {
    0% {
        transform: rotate(6deg);
    }
    100% {
        transform: rotate(-6deg);
    }
}   

/* --- New Feedback Section --- */
    .feedback-section-new {
        background-color: #4a637a; /* Same deep blue background */
        padding: 5rem 0 0;
        overflow-x: hidden; /* Important for preventing scrollbars during animation */
    }

    .feedback-section-new .section-title {
        color: white;
        font-weight: 500;
        letter-spacing: 1px;
    }

    /* Staggered row for a more dynamic layout */
    .testimonial-row {
        --bs-gutter-y: 2rem; /* Add vertical space between cards on mobile */
    }

    .testimonial-row .col-lg-4:nth-child(2) {
        margin-top: 2rem; /* Pushes the middle card down on large screens */
    }

    @media (max-width: 991.98px) {
        .testimonial-row .col-lg-4:nth-child(2) {
            margin-top: 0; /* Resets the stagger on smaller screens */
        }
    }

    .testimonial-card-new {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 2rem;
        border-radius: 15px;
        height: 100%;
        text-align: center;
        
        /* Initial state for animation (hidden) */
        opacity: 0;
        transform: translateY(40px) scale(0.95);
        transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    
    /* The state when the card becomes visible */
    .testimonial-card-new.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .testimonial-card-new:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .profile-pic-new {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 3px solid #f7c08a; /* Using the highlight color for the border */
        margin: 0 auto 1rem;
        object-fit: cover;
    }

    .quote-text {
        font-style: italic;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 1.5rem;
    }

    .testimonial-name-new {
        font-weight: 600;
        color: #f7c08a; /* Highlight color */
        font-size: 1.1rem;
    }

    .testimonial-role-new {
        font-size: 0.9rem;
        opacity: 0.7;
    }

    /* The red social media strip at the bottom (remains the same) */
    .social-strip {
        background-color: #dc5f57;
        padding: 1rem 0;
    }
    .social-strip a { color: white; text-decoration: none; font-weight: 500; }
    .social-strip a i { margin-right: 8px; font-size: 1.1rem; }

    .footer-links a {
            color: #adb5bd; /* Default light gray */
            text-decoration: none;
            transition: all 0.3s ease;
        }

        /* Using the "danger" color on hover as requested */
        .footer-links a:hover {
            color: #dc3545; /* Bootstrap's danger color */
            padding-left: 4px; /* Matches the translate-x effect */
        }

        .social-links a {
            color: #adb5bd;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        /* Using the "info" color on hover for social icons */
        .social-links a:hover {
            color: #0dcaf0; /* Bootstrap's info color */
        }

        .modal-content-neon {
            background-color: #222;
            border: 1px solid #0cf; /* Cyan border */
            border-radius: 1rem;
            box-shadow: 0 0 15px #0cf, 0 0 30px #0cf; /* Neon glow effect */
            color: #fff;
        }

        .modal-header-neon {
            border-bottom: 1px solid #0cf; /* Cyan separator */
            box-shadow: 0 5px 15px -10px #0cf;
        }
        
        /* Use the futuristic font for the title */
        .modal-title-neon {
            font-family: 'Orbitron', sans-serif;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 0 5px #fff, 0 0 10px #0cf;
        }

        /* Style the close button to be white */
        .btn-close-white {
            filter: invert(1) grayscale(100%) brightness(200%);
        }

        /* Main form group styling */
        .form-group-neon {
            position: relative; /* Needed for placing the icon */
            margin-bottom: 1.75rem;
        }

        /* Style for the input fields */
        .form-control-neon {
            background-color: #333;
            border: 1px solid #555;
            color: #fff;
            border-radius: 0.5rem;
            padding-left: 2.75rem; /* Make space for the icon */
            transition: all 0.3s ease;
        }

        .form-control-neon:focus {
            background-color: #444;
            color: #fff;
            border-color: #0cf; /* Cyan border on focus */
            box-shadow: 0 0 10px #0cf; /* Neon glow on focus */
            outline: none;
        }

        /* Style for the labels (move up on focus) */
        .form-control-neon + .form-label-neon {
            position: absolute;
            top: 0.85rem;
            left: 2.75rem;
            color: #aaa;
            pointer-events: none;
            transition: all 0.3s ease;
        }
        
        /* Animation: Move label up when typing or on focus */
        .form-control-neon:focus + .form-label-neon,
        .form-control-neon:not(:placeholder-shown) + .form-label-neon {
            top: -1.2rem;
            left: 0.5rem;
            font-size: 0.8rem;
            color: #0cf; /* Cyan color when active */
        }

        /* Style for the icons inside the input */
        .form-group-neon .form-icon-neon {
            position: absolute;
            top: 0.85rem;
            left: 0.85rem;
            color: #aaa;
            transition: color 0.3s ease;
        }

        .form-control-neon:focus ~ .form-icon-neon {
            color: #0cf; /* Cyan icon on focus */
        }


    /* Payment Page */

    .payment-card {
            border: none;
            border-radius: 1rem; /* Softer, modern corners */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); /* A subtle, soft shadow */
        }

        /* The custom gradient button */
        .btn-primary-gradient {
            background: linear-gradient(45deg, #0d6efd, #0dcaf0); /* Blue to Cyan gradient */
            border: none;
            color: white;
            font-weight: 500;
            padding: 0.75rem 1.5rem;
            /* Animation: Transition for the hover effect */
            transition: all 0.3s ease;
        }

        /* Animation: Button hover effect (lift and shadow) */
        .btn-primary-gradient:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
        }

        /* Animation: Input field focus effect */
        .form-control:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.2); /* Bootstrap's standard focus ring */
        }
        
        .form-control-lg {
            padding: 0.75rem 1.25rem;
        }
        
        .input-group-text {
            background-color: #fff;
        }

        /* Animation: Fade-in for the whole card */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animated-fade-in {
            /* Apply the animation */
            animation: fadeIn 0.6s ease-out;
        }


        /* Course Details Page */
        /* The main "Buy" card container (re-used from previous) */
        .payment-card {
            border: none;
            border-radius: 1rem; /* Softer, modern corners */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); /* A subtle, soft shadow */
        }

        /* The custom gradient button (re-used from previous) */
        .btn-primary-gradient {
            background: linear-gradient(45deg, #0d6efd, #0dcaf0); /* Blue to Cyan gradient */
            border: none;
            color: white;
            font-weight: 500;
            padding: 0.75rem 1.5rem;
            /* Animation: Transition for the hover effect */
            transition: all 0.3s ease;
        }

        /* Animation: Button hover effect (lift and shadow) */
        .btn-primary-gradient:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
        }

        /* Animation: Fade-in for the whole card (re-used from previous) */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animated-fade-in {
            /* Apply the animation */
            animation: fadeIn 0.6s ease-out;
        }

        /* New style for the main content card */
        .course-content-card {
            border: none;
            border-radius: 1rem;
            background-color: #fff;
            overflow: hidden; /* Ensures list corners match card radius */
        }
        
        /* New style for lesson list hover */
        .list-group-item-action:hover {
            background-color: #f8f9fa;
            color: #0d6efd;
        }

        .owl-carousel{
            z-index: 100;
        }

        /* Fix for Owl Carousel Dots spacing */
    .owl-dots {
        margin-top: 30px !important;
    }
    /* Card Polish */
    .testimonial-card-new {
        background: #fff; /* White background */
        border-radius: 15px;
        transition: transform 0.3s ease;
        border: 1px solid #eee;
        
    }
    .testimonial-card-new:hover {
        transform: translateY(-5px); /* Lift up effect on hover */
    }

    /* MODERN MODAL STYLING */
    .modal-content {
        border: none;
        border-radius: 16px; /* Soft rounded corners */
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* elegant shadow */
        overflow: hidden;
    }
    
    .modal-header {
        border-bottom: none; /* Clean header */
        padding: 2rem 2rem 1rem;
        background-color: #fff;
    }

    .modal-title {
        font-weight: 700;
        color: #333;
        font-family: 'Inter', sans-serif; /* Clean font */
    }

    .modal-body {
        padding: 1rem 2rem 2rem;
        background-color: #fff;
    }

    /* Modern Input Fields */
    .form-floating > .form-control {
        border-radius: 8px;
        border: 1px solid #dee2e6;
        background-color: #f8f9fa; /* Light grey background */
    }
    
    .form-floating > .form-control:focus {
        background-color: #fff;
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
    }

    /* Icons inside inputs adjustment if needed, 
       but strictly floating labels are cleaner. */

    .modal-footer {
        border-top: none;
        padding-bottom: 2rem;
        background-color: #fff;
    }
    
    .btn-primary {
        padding: 10px 20px;
        font-weight: 600;
        border-radius: 8px;
        transition: all 0.3s ease;
    }
    
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
    }

    /* FIX FOR MODAL OVERLAY ISSUE */
.modal-backdrop {
    z-index: 1040 !important; /* Standard Bootstrap backdrop z-index */
}

.modal {
    z-index: 1050 !important; /* Ensure modal sits ON TOP of backdrop */
}

/* Ensure the close button is always clickable */
.btn-close {
    z-index: 1060; 
    position: relative;
}

/* FORCE MODAL LAYERING */
.modal-backdrop {
    z-index: 1040 !important;
}
.modal {
    z-index: 1055 !important; /* Higher than backdrop */
}

/* FORCE VISIBILITY FOR FEEDBACK CARDS */
.testimonial-card-new {
    opacity: 1 !important;
    transform: translateY(0) !important;
    background: #ffffff; /* Ensure white background */
}