.grade_selection_area {
     padding: 5px 0;
     /* Add vertical padding to the section */
 }

 .single_grade_card {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 5px;
    transition: transform 0.2s ease;
}

.single_grade_card:hover {
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}





 .grade_card {
     display: flex;
     align-items: center;
     /* Center content vertically */
     justify-content: center;
     /* Center content horizontally */
     background-color: white;
     /* Set card background color */
     border-radius: 15px;
     /* Rounded corners for the card */
     border: none;
     /* Remove border */
     box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
     /* Soft shadow for slight depth */
     transition: box-shadow 0.3s ease, transform 0.3s ease;
     /* Smooth transitions for shadow and transform */
 }

 .grade_card:hover {
     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
     /* Slightly increased shadow on hover */
     animation: jiggle 0.5s ease;
     /* Apply jiggle animation on hover */
 }

 @keyframes jiggle {
     0% {
         transform: rotate(0deg) translateX(0);
     }

     25% {
         transform: rotate(2deg) translateX(5px);
     }

     50% {
         transform: rotate(-2deg) translateX(-5px);
     }

     75% {
         transform: rotate(2deg) translateX(5px);
     }

     100% {
         transform: rotate(0deg) translateX(0);
     }
 }




 /* Optional: additional styling for smaller screens */
 @media (max-width: 768px) {
     .grade_image {
         max-width: 120px;
         /* Smaller max-width on smaller screens */
     }
 }



 .content-area {
     padding: 50px 0;
 }

 .content-area {
     padding: 50px 0;
 }

 .lesson-card {
     border: 1px solid #ddd;
     border-radius: 10px;
     overflow: hidden;
     margin-bottom: 20px;
     transition: box-shadow 0.3s ease, transform 0.3s ease;
     padding: 15px;
     background-color: #fff;
 }

 .lesson-card:hover {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     transform: translateY(-5px);
 }

 .lesson-card h5 {
     margin-top: 0;
     color: rgb(0, 0, 0);
 }

 .video-wrapper {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
     max-width: 100%;
     background: #000;
 }

 .video-wrapper iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 h4 {
     color: white;
 }

 h2 {
     color: black;
 }

 .flickity-carousel .item {
     margin-right: 10px;
     /* Adjust spacing between items */
 }

 .flickity-carousel {
     overflow: hidden;
     /* Ensure no overflow is shown */
 }

 .flickity-prev-next-button {
     background-color: rgba(0, 0, 0, 0.5);
     /* Button background color */
     border-radius: 50%;
     /* Make buttons circular */
     width: 50px;
     /* Adjust width */
     height: 50px;
     /* Adjust height */
     display: flex;
     /* Use flexbox for centering */
     align-items: center;
     /* Center vertically */
     justify-content: center;
     /* Center horizontally */
     font-size: 24px;
     /* Increase font size for larger arrows */
     color: white;
     /* Arrow color */
 }

 .flickity-prev-next-button:hover {
     background-color: rgba(0, 0, 0, 0.8);
     /* Darker background on hover */
 }

 /* Arrow Icons */
 .flickity-prev-next-button:before {
     content: '';
     /* Use for left arrow */
     display: inline-block;
     border: solid transparent;
     /* Make space for the arrows */
     border-width: 12px 10px 12px 0;
     /* Arrow size */
     border-right-color: white;
     /* Arrow color */
     margin-right: 4px;
     /* Space between arrow and button text */
 }

 .flickity-prev-next-button.is-next:before {
     border-width: 12px 0 12px 10px;
     /* Adjust for right arrow */
     border-left-color: white;
     /* Arrow color for right arrow */
     margin-right: 0;
     /* Remove margin */
     margin-left: 4px;
     /* Add margin for spacing */
 }

 #timer {
     display: none;
     /* Keep it hidden initially */
     background-color: #f8f9fa;
     /* Light background */
     border: 2px solid #007bff;
     /* Blue border */
     border-radius: 8px;
     /* Rounded corners */
     padding: 15px;
     /* Padding around the content */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     /* Shadow effect */
     transition: all 0.3s ease;
     /* Smooth transition for hover effect */
 }

 #timer:hover {
     background-color: #e9ecef;
     /* Slightly darker background on hover */
     transform: scale(1.02);
     /* Slightly enlarge on hover */
 }

 .progress {
     height: 20px;
     /* Height of the progress bar */
 }

 .progress-bar {
     background-color: #ff0000;
     /* Green color for the progress */
 }

 #time-left {
     font-size: 1.5em;
     /* Increase the font size */
     font-weight: bold;
     /* Make the text bold */
     color: #dc3545;
     /* Set the color to a noticeable red (you can change this) */
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
     /* Add a subtle shadow for depth */
     margin-bottom: 10px;
     /* Space below the time left text */
 }

 .custom-border {
     border: 4px solid black;
     /* Set the border thickness and color */
     border-radius: 0.25rem;
     /* Optional: adjust the border radius */
 }

 .responsive-label {
     font-size: 1rem;
     /* Default size for mobile */
 }

 @media (min-width: 768px) {

     /* For medium devices and larger */
     .responsive-label {
         font-size: 1.25rem;
         /* Larger size for desktop/laptop */
     }
 }

 .contact-card {
     border: 3px solid #007bff;
     /* Light blue border */
     border-radius: 0.5rem;
     /* Rounded corners */
     transition: transform 0.2s, box-shadow 0.2s;
     /* Animation for hover effects */
 }

 .contact-card:hover {
     transform: scale(1.05);
     /* Slightly increase size on hover */
     box-shadow: 0 4px 15px rgba(0, 123, 255, 0.5);
     /* Add shadow on hover */
 }

 /* Nested styles for card title */
 .contact-card .card-title {
     font-size: 1.25rem;
     /* Larger font for titles */
     color: #007bff;
     /* Change title color to match border */
 }

 /* Nested styles for card text links */
 .contact-card .card-text a {
     color: #007bff;
     /* Link color */
     text-decoration: none;
     /* Remove underline from links */
 }

 .contact-card .card-text a:hover {
     text-decoration: underline;
     /* Underline links on hover */
 }

 /* Nested styles for the horizontal line */
 .contact-card .card-body hr {
     border: 1px solid #007bff;
     /* Color of the horizontal line */
 }

 .styled-input {
     border: 1px solid #ced4da;
     /* Border color */
     border-radius: 5px;
     /* Rounded corners */
     padding: 10px;
     /* Padding inside the input */
     transition: border-color 0.3s;
     /* Smooth transition on focus */
 }

 .styled-input:focus {
     border-color: #007bff;
     /* Change border color on focus */
     box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
     /* Add shadow on focus */
     outline: none;
     /* Remove outline */
 }

 .registration_form {
     background-color: #ffffff;
     /* White background for the form */
     padding: 20px;
     /* Padding around the form */
     border-radius: 10px;
     /* Rounded corners for the form */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     /* Subtle shadow for depth */
 }

 label {
     font-weight: bold;
     /* Make labels bold */
     color: #333;
     /* Darker color for labels */
 }

 .about_us_area {
     background-color: #ffffff;
     /* Light background for the section */
     padding: 50px 0;
     /* Padding around the section */
 }

 .about_content {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     /* Smooth transitions for hover effects */
     border-radius: 15px;
     /* Rounded corners for the content */
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     /* Subtle shadow for depth */
     overflow: hidden;
     /* Ensure rounded corners effect */
 }

 .about_content:hover {
     transform: translateY(-5px);
     /* Slightly raise the card on hover */
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
     /* Increase shadow on hover */
 }

 .about-paragraph {
     color: #343a40;
     /* Darker text for better readability */
     line-height: 1.6;
     /* Improved line spacing */
 }

 .about_content img {
     max-width: 100%;
     /* Ensure the image is responsive */
     height: auto;
     /* Maintain aspect ratio */
 }

 @media (max-width: 768px) {
     .about_content {
         flex-direction: column;
         /* Stack content on smaller screens */
     }

     .about_content img {
         border-radius: 15px;
         /* Consistent border radius */
     }
 }

 .team-heading {
     color: #007bff;
     /* Blue color */
     font-weight: bold;
     /* Bold text */
     font-size: 1.5rem;
     /* Size similar to h1 */
 }

 .id-circle {
     display: inline-block;
     width: 60px;
     /* Adjust width as needed */
     height: 30px;
     /* Adjust height as needed */
     border-radius: 15px;
     /* This creates the rounded corners */
     background-color: #007bff;
     color: white;
     font-size: 20px;
     /* Increased font size */
     line-height: 30px;
     /* Vertically center the text */
     text-align: center;
     font-weight: bold;
 }

 .promo-code-count {
     background-color: red;
     color: white;
     padding: 5px 10px;
     margin-top: 10px;
     border-radius: 5px;
     /* Optional: Adding rounded corners */
     text-align: center;
     /* Optional: Center text inside the box */
     font-size: 16px;
     font-weight: bold;
 }

 .custom-progress-bar {
     background-color: #0FFF50 !important;
 }

 .gallery-card {
     background-color: #ffffff;
     /* White background for the form */
     padding: 20px;
     /* Padding around the form */
     border-radius: 10px;
     /* Rounded corners for the form */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     /* Subtle shadow for depth */
 }
   .bg-blue {
    background: #0000ff;
  }
   .text-blue {
    color: #002592;
  }
   /* New custom background class */
   .bg-black {
    background: #000000;
  }
  .hero-section h1 {
    font-family: 'Alfa Slab One', cursive;
}
.mileage-meter {
    display: flex;
    gap: 5px;
    background: transparent; /* Remove black background */
    padding: 10px;
    border-radius: 5px;
    justify-content: center; /* Center the meter */
    align-items: center;
}

.digit-box {
    width: 40px;
    height: 60px;
    background: #fff; /* Change to white for better visibility */
    color: black; /* Change text color to black */
    font-size: 2rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    text-align: center;
    line-height: 60px;
    border-radius: 5px;
    overflow: hidden;
    border: 2px solid #ccc; /* Light border for a clean look */
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add slight shadow for depth */
}

.digit-box span {
    display: block;
    position: absolute;
    width: 100%;
    transition: transform 0.3s ease-in-out;
}
.responsive-heading {
    font-size: clamp(1.5rem, 4vw, 4rem);
  }
  
/* Adjust font size for screens around 1920x1080 */
@media (min-width: 1920px) and (max-height: 1080px) {
    .responsive-heading {
      font-size: clamp(1rem, 2.5vw, 3rem);
    }
  }