@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* Global styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', Arial, sans-serif;
}
/* General Reset */
.feedbacker {
  width: 100%; /* Full width of the container */
  display: flex;
  justify-content: center; /* Center the button horizontally */
  align-items: center; /* Center vertically */
  margin-top: 20px; /* Add spacing above */
  background: rgba(44, 43, 43, 0.5); /* Slightly transparent red */
}
.video-container {
  flex: 1; /* Make the video take up available space */
  max-width: 600px; /* Limit the video width */
  padding: 10px;
  border-radius: 10px;
  background-color: #f9f9f9; /* Light background for the video area */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.video-container video {
  width: 100%;
  height: auto; /* Make the video responsive */
  border-radius: 10px; /* Rounded corners for the video */
}

.content-containerx {
  width: 80%;               /* Set the width to 80% of the page */
  margin: 20px auto;        /* Centers the container with some margin */
  padding: 20px;            /* Adds padding inside the container */
  background-color: #f9f9f9; /* Light background color */
  border-radius: 8px;       /* Rounded corners */
  border: 1px solid #ddd;   /* Border around the container */
}

.content-containerx h3, .content-container p {
  color: #333333;              /* Dark text color for headings and paragraphs */
}

.content-containerx pre {
  background-color: #333;  /* Dark background for the code block */
  color: #f9f9f9;          /* Light text color for the code */
  padding: 15px;            /* Padding inside the code block */
  border-radius: 5px;       /* Rounded corners for the code block */
  overflow-x: auto;         /* Allows horizontal scrolling if the code is too wide */
}
.feedback-button {
  width: 100vw; /* Full browser width */
  height: 64px; /* Fixed height */
  background: rgba(255, 255, 255, 1); /* Slightly transparent green */
  color: transparent; /* Transparent text for cut-out effect */
  font-family: 'Orbitron', sans-serif; /* Modern, robotic font */
  font-weight: bold;
  text-transform: uppercase; /* All caps for impact */
  text-align: center; /* Center the text horizontally */
  line-height: 64px; /* Vertically center the text */
  border-radius: 0; /* Flat edges for simplicity */
  position: relative;
  cursor: pointer; /* Makes it clickable */
  user-select: none; /* Prevents text selection */
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
  -webkit-background-clip: text; /* Makes the text transparent */
  background-clip: text;
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  overflow: hidden; /* Prevents text overflow */
  white-space: nowrap; /* Prevent text wrapping */
  font-size: calc(3rem + 0.4vw); /* Responsive font scaling */
  letter-spacing: calc(10px + 0.2vw); /* Adjust spacing dynamically */
}

/* Hover Effect */
.feedback-button:hover {
  background: rgba(228, 92, 92, 0.2); /* Make the hover background more transparent */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); /* Add a bright white glow for text visibility */
  transform: translateY(-2px); /* Slight upward motion for interactivity */
}

/* Media Query for Smaller Screens */
@media (max-width: 768px) {
  .feedback-button {
    font-size: 2rem; /* Scale down font for smaller screens */
    letter-spacing: 5px; /* Reduce letter spacing */
  }
}

.feedback-left {
  position: relative;
  margin-left: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 400px; /* Horizontal size */
  height: 150px; /* Vertical size */
  padding: 20px;
  background-color: #ffffff; /* White background */
  color: #333; /* Dark text color */
  font-weight: bold;
  border: 2px solid #333; /* Outer border */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for depth */
  border-radius: 15px; /* Smooth corners */
  clip-path: polygon(
    0% 0%, 5% 10%, 5% 90%, 0% 100%, 
    10% 100%, 90% 100%, 100% 90%, 
    95% 90%, 95% 10%, 100% 0%, 
    90% 0%, 10% 0%
  ); /* Creates the ticket slits on both sides */
}

/* Center the text */
.feedback-left h2,
.feedback-left p {
  margin: 5px 0;
}

.feedback-left a {
  color: #007BFF;
  text-decoration: none; /* Remove underline */
  font-weight: bold;
}

.feedback-left a:hover {
  text-decoration: underline; /* Underline on hover */
}


/* Hero Section */
.hero-section-mission {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgb(0, 0, 0);
  padding: 20px 20px;
  margin-top: 280px;
  width: 100vw;
  height: 200px; /* Set a fixed height */
  position: relative; /* Ensures the button is positioned relative to this div */
}
.banner-title {
  font-size: 3rem; /* Balanced size for prominence */
  font-weight: bold;
  text-align: left;
  background: linear-gradient(to right, #444, #000, #444); /* Dark metallic gradient for text */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* Applies gradient only to the text */
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8), 2px 2px 5px rgba(0, 0, 0, 0.7); /* Glow and depth */
  letter-spacing: 3px; /* Adds spacing for an elegant look */
}

.green-plus {
  color: #388E3C; /* Green for the "+" */
  text-shadow: 0px 0px 8px rgba(0, 255, 102, 0.8), 2px 2px 5px rgba(0, 0, 0, 0.7); /* Glow and depth */
}

.hero-content-mission {
  flex: 1;
}

.hero-content-mission h1 {
  font-size: 2.7em;
  margin-top: 30px;
  font-family: 'Montserrat', sans-serif;
}


.parent1 {
  display: flex;
  justify-content: space-around; /* Space items evenly */
  align-items: flex-start; /* Align items to the top */
  flex-wrap: wrap;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}
.parent1 p {
  text-indent: 33px; /* Adjust the value to your preference */
}
.h1ers {
  font-size: 2rem; /* Adjust size as needed */
  font-weight: bold;
  text-align: left;
  margin-left: 20px;
  background: linear-gradient(to right, #1a1a1a, #4d4d4d, #1a1a1a); /* Dark shiny gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* Makes the gradient visible on text only */
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); /* Adds depth with a dark shadow */
  letter-spacing: 2px; /* Creates a modern look with spaced-out letters */
  margin-bottom: 20px; /* Space below the heading */
}

.left-content,
.right-content {
  flex: 1; /* Allow sections to grow/shrink equally */
  min-width: 200px; /* Set a minimum width for responsiveness */
  max-width: 30%; /* Limit the width of the sections */
  padding: 15px; /* Add padding inside the sections */
  text-align: justify; /* Align text evenly */
  margin-top: 0px;
}

.center-image {
  flex: 0 0 auto; /* Prevent the image container from shrinking or stretching */
  margin: 0 40px; /* Add margin for spacing from other sections */
  text-align: center; /* Center the image inside this container */
}

.center-image .classrm {
  width: 300px; /* Set fixed width for the image */
  height: 480px; /* Set fixed height for the image */
  object-fit: cover; /* Ensure the image maintains aspect ratio */
  display: block; /* Ensure the image is displayed as a block element */
  padding: 0px;
}

#texter {
  margin-top: 10px; /* Add margin for spacing */
  text-align: justify; /* Align text evenly */
}

@media (max-width: 768px) {
  .parent1 {
      flex-direction: column; /* Stack items vertically on smaller screens */
      align-items: center; /* Center items horizontally */
  }

  .left-content,
  .right-content {
      text-align: center; /* Center text for smaller screens */
      margin-bottom: 15px; /* Add space between sections */
      max-width: 100%; /* Allow full width for better responsiveness */
  }

  .center-image {
      margin: 20px 0; /* Adjust spacing for mobile screens */
  }

  .center-image .classrm {
      width: auto; /* Allow width to adjust based on the container */
      max-width: 250px; /* Limit the width to 250px on smaller screens */
      height: auto; /* Maintain aspect ratio */
  }
}

.hero-content-mission p {
  font-size: 1.3em;
  font-family: 'Montserrat', sans-serif;
}

.cta-button-mission {
  display: inline-block;
  padding: 15px 35px;
  background: white;
  color: #2e7d32;
  border-radius: 5px;
  font-weight: bold;
  transition: all 0.3s;
  margin-right: 50px;
  float: right;
  position: relative; /* Enable relative positioning */
  top: -100px; /* Move the button upwards by 35px */
}

.cta-button-mission:hover {
  background: #66bb6a;
  color: white;
}

.hero-image-mission img {
  width: 300px;
  height: auto;
margin:0;
margin-top: 15px;
}
/* Purpose Section */
.purpose-section-mission {
  padding: 40px 20px;
  background: #FAFAFA; /* Neutral off-white background */
  text-align: center;
  margin-bottom: 0px;
}

.purpose-container {
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 0px;
}

.purpose-cards-mission {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.purpose-card-mission {
  text-align: center;
  padding: 0; /* No card background */
}

.icon-circle {
  background: #205522; /* Dark green circle background to match menu */
  color: #ffffff; /* White icon color for strong contrast */
  border: 3px dashed #97c365; /* Light green dashed border for subtle accent */
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 2.5rem; /* Icon size remains unchanged */
}

.purpose-card-mission h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #205522; /* Dark green header text for consistency */
}

.purpose-card-mission p {
  font-size: 0.9rem;
  color: #333333; /* Dark gray text for readability */
  max-width: 200px;
  margin: 0 auto;
}

/* Carousel Section */
.carousel-section-mission {
  padding: 40px 20px;
  background: #f7f7f7;
  text-align: center;
  display: flex;                /* Enable flexbox for centering */
  flex-direction: column;       /* Stack heading and carousel vertically */
  align-items: center;          /* Center horizontally */
  justify-content: center;      /* Center vertically if needed */
}

.carousel-container-mission {
  display: flex;
  overflow: hidden;            /* Retains hidden overflow */
  scroll-behavior: smooth;     /* Retains smooth scrolling */
  justify-content: space-evenly; /* Spaces items evenly across the container */
  align-items: center;          /* Aligns items vertically */
  gap: 20px;                    /* Adds consistent spacing between items */
  flex-wrap: wrap;              /* Allows wrapping for responsiveness */
  width: 100%;                  /* Ensures full-width container */
}


.carousel-item-mission {
  flex: 0 0 100%;
  max-width: 450px;
  min-height: 340px; /* Ensures the container adjusts height for both image and text */
  text-align: center;
  padding: 20px;
}
#h1dun {
  text-align: left;
}
.background {
  background-color: rgb(255, 255, 255);
  padding: 40px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  z-index: 1;
}

.background-content {
  display: flex;
  flex-wrap: wrap; /* Ensures responsive behavior */
  gap: 20px; /* Space between columns */
}

.text-section {
  flex: 1 1 50%; /* Text takes up 50% width */
}

.text-section .backp {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20px;
  text-indent: 10px;
}

.image-section {
  flex: 1 1 40%; /* Image takes up 40% width */
  text-align: center;
}
.image-section img {
  margin-right:5px;
  height: 500px;
  width: auto;
  
}
.background-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds depth to the image */
}

.caption {
  font-size: 14px;
  font-style: italic;
  margin-top: 10px;
  color: #666;
}

.background-footer {
  margin-top: 20px;
  text-align: center;
}

.background-footer .backp {
  font-size: 16px;
  font-weight: bold;
  color: #2e7d32;
  margin-bottom: 0;
}

.carousel-item-mission img {
  width: 450px;
  height: 300px;
  object-fit: cover; /* Ensures uniform size while maintaining aspect ratio */
  border-radius: 10px; /* Rounded corners */
  margin-bottom: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Ensure the text is visible below the image */
.carousel-item-mission p {
  margin-top: 10px;
  font-size: 16px;
  color: #333333;
  font-style: italic;
  color:green
}

/* Hover effect for images */
.carousel-item-mission img:hover {
  transform: scale(1.05); /* Slight zoom effect */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Adds shadow for depth */
}

/* Bounce effect on hover */
.carousel-item-mission img:hover {
  animation: bounce 0.5s ease infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Carousel Controls (Removed Previous/Next Buttons) */
/* These rules are kept empty to avoid disrupting the layout */
.carousel-controls-mission {
  display: none;
}

/* Call-to-Action Section */
.cta-section-mission {
  background-color: #298040;
  color: white;
  text-align: center;
  padding: 8px 20px;
  width: 100%;
  height: 80px;
  cursor: pointer;
  font: size 0.9em;

  /* Raised button effect */
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3), /* Shadow on bottom-right */
              -4px -4px 6px rgba(255, 255, 255, 0.6); /* Highlight on top-left */
  border: 2px solid #45b147; /* Border for definition */
  border-radius: 8px; /* Smooth edges for a button look */
}

/* Pushed-In Effect on Hover */
.cta-section-mission:hover {
  background: #369e37; /* Slightly darker green */
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3), /* Inner shadow for pushed-in effect */
              inset -2px -2px 4px rgba(255, 255, 255, 0.6); /* Highlight inside */
  transform: translateY(2px); /* Simulates being "pressed" */
  transition: all 0.2s ease; /* Smooth transition */
}


.cta-content-mission .cta-button-mission {
  background: white;
  color: #2e7d32;
  padding: 15px 25px;
  border-radius: 5px;
  font-weight: bold;
  transition: all 0.3s;
  margin-bottom: 10px;
}
.cta-content-mission p {
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.cta-content-mission .cta-button-mission:hover {
  background: #7b7e7b;
  color: white;
}


#center-image {
  display: block;
  margin: 0 auto; /* Center the image */
  max-width: 100%; /* Ensure responsiveness */
  height: auto; /* Maintain aspect ratio */
}
.menu-image {
  text-align: center; /* Center the image horizontally */
}
.menu-image img {
  max-width: 270px; /* Make the image responsive */
  max-height: 200px; /* Limit the image height */
}
/* Prev and Next Buttons */
.prevy, .nexty {
  height: 30px;
  width: 30px;
  position: fixed; /* Make buttons stay in place while scrolling */
  top: 50%; /* Vertically center */
  transform: translateY(-50%);
  background-color: rgba(128, 128, 128, 0.5); /* Semi-transparent grey */
  color: white;
  border: none;
  z-index: 500;
  font-size: 20px; /* Slightly smaller font size */
  padding: 0; /* No additional padding for better centering */
  cursor: pointer;
  z-index: 1000; /* Ensure they appear above other elements */
  border-radius: 50%; /* Optional: Rounded shape */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
  display: flex; /* Use flexbox for centering */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  line-height: 0; /* Remove any additional line-height that might affect centering */
}


/* Prev Button (Left Side) */
.prevy {
  left: 10px; /* Position slightly away from the edge */
}

/* Next Button (Right Side) */
.nexty {
  right: 10px; /* Position slightly away from the edge */
  z-index: 500;
}

/* Hover Effects */
.prevy:hover, .nexty:hover {
  background-color: rgba(128, 128, 128, 0.8); /* Slightly darker grey on hover */
  transform: translateY(-50%) scale(1.1); /* Slight zoom effect on hover */
}

.bannerss img {
  width: 100vw; /* Full width of the viewport */
  height: 300px; /* Maintain the aspect ratio */
  display: block; /* Remove default inline spacing */
}
.wallpaper {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  background-image: url("/images/pngtree-black-road-background-material-picture-image_1653541.jpg");

  background-size: contain;
  overflow-x: visible;
}
@media (max-width: 768px) { 
  .wallpaper {
    background-size: contain; /* Ensure the image fits entirely in the section */
    background-image: url("images/pngtree-black-road-background-material-picture-image_1653541.jpg");
  }
}

#examroom {
  width: 500px;
  height: auto;
  margin-top: -50px;
  margin-bottom: -10px;
  position: relative;
  display: block;
  margin: 0 auto;
}

.exammy {
  display: flex;
  justify-content: flex-start; /* Align items to the left */
  align-items: flex-start;    /* Align items to the top (optional, depends on content) */
  gap: 20px; /* Optional: adds space between the two items */
}

.exammy img {
  width: 300px;
  height: auto; /* Maintains aspect ratio */
}
#exmrom-image {
  width: 600px;
  height: auto;
  margin-top: 75px;
  margin-left: -100px;
}
#atry-image {
  margin-top: 40px;
  margin-right: -20px;
}
/* General Styles */
.wallpaper {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  margin-top: -20px;
  background-image: url("images/pngtree-black-road-background-material-picture-image_1653541.jpg");
  background-size: contain;
  overflow-x: visible;
}
@media (max-width: 768px) { 
  .wallpaper {
    background-size: contain; /* Ensure the image fits entirely in the section */
    background-image: url("images/pngtree-black-road-background-material-picture-image_1653541.jpg");
  }
}

.exam-room {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.bannerr {
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(90deg, #4CAF50, #3b3b3b);
  color: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.industries {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}

.industry {
  flex: 1;
  min-width: 300px;
  background: #404040;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.industry h2 {
  text-align: center;
  color: #4CAF50;
  margin-bottom: 15px;
}

.exam-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.card {
  background: #3a3a3a;
  border: 1px solid #4CAF50;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.card .button-group {
  margin-top: 10px;
  display: flex;
  flex-direction: column; /* Stack buttons vertically */
}

.card .button-group button {
  margin: 10px 0; /* Add vertical spacing between buttons */
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(245, 6, 6, 0.5);
}

.card button {
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.card button:hover {
  background: #161616;
  box-shadow: 0 4px 6px rgba(247, 10, 10, 0.918);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .industries {
    flex-direction: column;
    align-items: center;
  }

  .industry {
    width: 90%;
  }
}

#why-choose-us {
  margin-top: 30px; /* Add space above the paragraph */
  margin-bottom: -40px;
  background: linear-gradient(to right, rgb(0, 0, 0), #020202); /* White to green gradient */
  -webkit-background-clip: text; /* Clip the gradient to the text */
  -webkit-text-fill-color: transparent; /* Make the background visible as the text color */
  font-weight: bold; /* Optional: Make the text bold for emphasis */
  border-bottom: solid lightgrey 0.6px;
  padding-bottom: 50px;
}
carousel {
  border-bottom: solid lightgray 0.6px;
}
#select-industry {
  margin-top: 50px; /* Add margin at the top */
}
#unique {
  border-bottom: solid lightgray 0.6px;
  padding-bottom: 50px;
  margin-bottom: -30px;
}
container {
  border-bottom: solid lightgray 0.6px;
}
.feat.bg-gray.pt-5.pb-5 {
  border-bottom: 0.6px solid lightgray; /* Example: Black bottom border, 2px thick */
  margin-bottom: 25px;
  padding-bottom: -80px;
}

#why-choose-us-title {
  margin-bottom: 35px; /* Add space below the h4 */
  margin-top: 220px;
}
.next {
  display: block; /* Makes the button take the full width of its container */
  margin: 0 auto; /* Centers the button horizontally */
height: 10%;
z-index: 500;
color: lightgray;
}
.prev {
  display: block; /* Makes the button take the full width of its container */
  margin: 0 auto; /* Centers the button horizontally */
height: 10%;
padding-left: 8px;
color: lightgray;
}
.prev, .next {
  height: 30px; /* Adjust the height as needed */
  width: 30px; /* Adjust the width as needed */
  display: flex; /* Use Flexbox inside buttons for icon alignment */
  justify-content: center; /* Center the icon horizontally */
  align-items: center; /* Center the icon vertically */
  font-size: 24px; /* Adjust font size of the arrow */
  background-color: #3f4041; /* Button background color */
  color: white; /* Button text color */
  border: none; /* Remove default border */
  border-radius: 50%; /* Make the buttons circular */
  cursor: pointer; /* Add a pointer cursor */
  padding: 0 5px;
  margin-left: 10px;
  z-index: 500;
  margin-right: 10px;
  margin-top: 165px; /* Adjust the value as needed to move the buttons down */
}
.prev:hover, .next:hover {
  background-color: #5a5b5c; /* Slightly lighter grey on hover */
  color: #f0f0f0; /* Slightly lighter text color */
  transform: scale(1.1); /* Slightly enlarge the button on hover */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition for hover effect */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow on hover */
}

.swipe-indicator {
  text-align: center;
  margin-top: 0px;
  margin-bottom: -40px;
  color: #a3a3a3;
  font-size: 0.9em;
}
#track-your-progress-title {
  margin-top: 45px; /* Add space above the heading */
  margin-bottom: 0;
}


#banners2 {
  position: relative; /* Ensures the container can be controlled precisely */
  margin-top: 320px; /* Moves the entire container down by 20px */
}

#banners3 {
  position: relative; /* Ensures the container can be controlled precisely */
  margin-top: 321px; /* Moves the entire container down by 20px */
}
.banners {
  display: flex; /* Use flexbox for layout */
  justify-content: flex-start; /* Align images to the start with no gap */
  align-items: stretch; /* Ensure images fill the height of the container */
  width: 100%; /* Ensure the banners span the full width of the viewport */
  padding: 0; /* Remove any extra padding */
  margin-top: 60px; /* Retain the current top margin */
  margin-bottom: -20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  box-sizing: border-box; /* Include padding and borders in width calculations */
  position: relative; /* Enables correct positioning for the ::after pseudo-element */
  overflow: hidden; /* Prevents the shadow from overflowing the container */
}

.banners img {
  flex-grow: 1; /* Allow images to stretch and fill available space */
  height: 500px; /* Maintain a uniform height for both images */
  width: auto; /* Maintain aspect ratio while adjusting width */
  display: block; /* Proper block-level layout for images */
  margin: 0; /* Remove any gaps between images */
  padding: 0; /* Ensure no padding is applied */

}

.banners img:first-child {
  flex-basis: 30%; /* Allocate 35% of the row to the first image */
  width: 30vw;
}
.learn-practice-container {
  position: relative; /* Create a positioning context for button */
}

#learnpracsuc {
  flex-basis: 70%; /* Allocate 65% of the row to the second image */
  width: 70vw;
}
#learnpracsuc2 {
  flex-basis: 70%; /* Allocate 65% of the row to the second image */
  width: 70vw;
}
.btn-get-started {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent; /* Transparent background initially */
  color: white; /* White text */
  border: 1px solid white; /* Thin white border */
  padding: 5px 15px; /* Adjust padding for shorter width */
  font-size: 14px; /* Adjust font size for smaller button */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  z-index: 2; /* Ensure button is above the image */
  text-align: center; /* Center-align text */
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.learn-practice-container:hover #learnpracsuc,
.learn-practice-container:hover .btn-get-started,
.btn-get-started:hover {
  background-color: #28a745; /* Green background on hover */
  border-color: #28a745; /* Green border on hover */
  color: white; /* Ensure text is visible on hover */
}

.learn-practice-container:hover #learnpracsuc {
  filter: grayscale(50%); /* Grey out the image on hover */
}

.learn-practice-container:hover #learnpracsuc2 {
  filter: grayscale(40%); /* Grey out the image on hover */
}
.banners::after {
  content: ""; /* Pseudo-element for the shadow */
  position: absolute;
  bottom: 0; /* Position at the bottom of the banners */
  left: 0;
  width: 100%; /* Full width */
  height: 20px; /* Height of the shadow */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 100%);
  z-index: -1; /* Ensure the shadow is below the content */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}



#logo2 {
  margin-left: -5px;
}






/* Header title styles */
header h1 {
    margin: 0;
    font-size: 1.5em;
    flex-grow: 1;
    text-align: center;
    width: 150%; /* Increase the width by 20% */
}

header h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 1.5em;
}



/* Specific styles for the HHA practice test page */
.hha-page {
    background-color: #f7f7f7; /* Light background */
    color: #333; /* Dark text */
}

.hha-page header, .hha-page main, .hha-page footer {
    color: #333; /* Ensure dark text for all elements within the HHA page */
}

/* Specific styles for the HHA practice test list */
.hha-page .practice-tests {
    list-style: none;
    padding: 20px;
}

.hha-page .practice-tests li {
    margin: 10px 0;
    padding: 15px 20px;
    background-color: #007BFF; /* Primary blue color */
    color: #fff; /* White text */
    text-align: center;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
    cursor: pointer;
}

.hha-page .practice-tests li:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: translateY(-5px); /* Slight lift on hover */
}
/* Close Button */
.close-button {
  position: absolute;
  top: 0px;
  right: 10px;
  background: none;
  border: none;
  font-size: 10px;
  color: red;
  cursor: pointer;

}
.welcome-message {
  font-weight: bold;
  color: #333; /* Adjust color as needed */
  font-size: 1.2em;
  text-align: left;
  margin-bottom: 20px;
  margin-right: 20px; /* Adjust margin if needed */
}
.home-item {
  margin-top: 36px;
  text-align: center; /* Center text for inline elements */
}

#home-option {
  text-align: center; /* Center the Home text */
  margin: 0 auto; /* Center the entire Home item */
  display: flex;
  flex-direction: column; /* Stack child elements vertically */
  align-items: center; /* Center child elements horizontally */
}
#home-option a {
  display: block; /* Ensure the hover effect spans the full width of the text */
  width: 100%; /* Match the parent container's width */
  text-align: center; /* Center the text */
  padding: 12px 16px; /* Add padding for spacing */
  color: #333; /* Default text color */
  text-decoration: none; /* Remove underline */
  background-color: transparent; /* Default background color */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover transition */
}

/* Hover effect for the Home link */
#home-option a:hover {
  background-color: #38683e; /* Dark green hover background */
  color: white; /* Change text color to white on hover */
}
.split-button{
  border-bottom: solid lightgray 0.6px;
  padding-bottom: 10px;
}

/* Ensure the split buttons are unaffected */
#home-option .split-button {
  margin-top: 10px; /* Add spacing between Home text and buttons */
  text-align: left; /* Keep buttons left-aligned */
  display: flex; /* Use flexbox for layout of buttons */
  align-items: flex-start; /* Align buttons to the top/left */
  justify-content: flex-start; /* Ensure buttons are aligned to the left */
  width: 100%; /* Prevent the buttons from centering */
}
.home-item .split-button {
  margin: 0; /* Remove unnecessary margin */
}







.dropdown {
  cursor: pointer;
}

.dropdown:hover::after {
  color: white; /* Arrow changes color on hover */
}


.split-button {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  margin-top: 10px;
}

.split-button button {
  flex: 1;
  background-color: #f1f1f1; /* Default button background color */
  border: 1px solid #ccc;
  color: #333;
  font-size: 14px;
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.split-button button:hover {
  background-color: #388E3C;
}


.industry-section {
    text-align: center;
    padding: 20px 20px;
    margin-left: 100px;
}

.industry-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 0px;
    flex-wrap: wrap;
    padding-bottom: 30px;
    border-bottom: solid lightgray 1.5px;
    margin-bottom: -10px;
}

.industry-option {
    flex: 1;
    max-width: 55%;
    margin: 20px;
    margin-top: -30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.industry-option:hover {
    transform: scale(1.05);
}

/* Adjust the size of the images */
.industry-option img {
    width: 100%; /* Make images responsive */
    height: 300px;
    max-width: 550px; /* Set a max-width to make the images smaller */
    border-bottom: 1px solid #ddd;
    border-radius: 15px; /* Rounded edges */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

.industry-option img:hover {
    transform: scale(1.1); /* Slightly increase size on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Darker shadow on hover */
}

.industry-button {
    background-color: #4CAF50; /* Green */
    color: white;
    padding: 10px 20px;
    margin: 10px 0;
    border: none;
    cursor: pointer;
    display: block;
    width: 100%;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.industry-button:hover {
    background-color: #45a049;
}

#mission {
    text-align: center;
    padding: 30px 20px;
    background-color: rgba(0, 128, 0, 0.1); /* Light green with transparency */
    margin: 40px 0;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}



form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 600px;
    margin: auto;
    padding: 20px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

form label {
    font-weight: bold;
    color: #333;
}

form input, form textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

form input:focus, form textarea:focus {
    border-color: #4CAF50;
}

form button {
    background-color: #4CAF50; /* Green */
    color: white;
    padding: 15px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: #45a049;
}

main {
    padding: 20px;
}

h2 {
    color: #4CAF50; /* Green color for subheading */
}

.resource-list {
    list-style: none;
    padding: 0;
}

.resource-list li {
    margin: 10px 0;
}

.resource-list a {
    display: block;
    padding: 15px 20px;
    background-color: #fff;
    color: #333;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resource-list a:hover {
    transform: translateY(-5px);
    background-color: #4CAF50; /* Green color on hover */
    color: #fff;
    background-image: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
}

/* Styles for the practice test buttons */
/* Demo Code: */


.projcard-container {
  margin: 50px 0;
}

/* Actual Code: */
.projcard-container,
.projcard-container * {
  box-sizing: border-box;
}
.projcard-container {
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
}
.projcard {
  position: relative;
  width: 100%;
  height: 300px;
  margin-bottom: 40px;
  border-radius: 10px;
  background-color: #fff;
  border: 2px solid #ddd;
  font-size: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 21px -12px rgba(0, 0, 0, .66);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.projcard:hover {
  box-shadow: 0 34px 32px -33px rgba(0, 0, 0, .18);
  transform: translate(0px, -3px);
}
.projcard::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(-70deg, #424242, transparent 50%);
  opacity: 0.07;
}
.projcard:nth-child(2n)::before {
  background-image: linear-gradient(-250deg, #424242, transparent 50%);
}
.projcard-innerbox {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.projcard-img {
  position: absolute;
  height: 300px;
  width: 400px;
  top: 0;
  left: 0;
  transition: transform 0.2s ease;
}
.projcard:nth-child(2n) .projcard-img {
  left: initial;
  right: 0;
}
.projcard:hover .projcard-img {
  transform: scale(1.05) rotate(1deg);
}
.projcard:hover .projcard-bar {
  width: 70px;
}
.projcard-textbox {
  position: absolute;
  top: 7%;
  bottom: 7%;
  left: 430px;
  width: calc(100% - 470px);
  font-size: 17px;
}
.projcard:nth-child(2n) .projcard-textbox {
  left: initial;
  right: 430px;
}
.projcard-textbox::before,
.projcard-textbox::after {
  content: "";
  position: absolute;
  display: block;
  background: #ff0000bb;
  background: #fff;
  top: -20%;
  left: -55px;
  height: 140%;
  width: 60px;
  transform: rotate(8deg);
}
.projcard:nth-child(2n) .projcard-textbox::before {
  display: none;
}
.projcard-textbox::after {
  display: none;
  left: initial;
  right: -55px;
}
.projcard:nth-child(2n) .projcard-textbox::after {
  display: block;
}
.projcard-textbox * {
  position: relative;
}
.projcard-title {
  font-family: 'Voces', 'Open Sans', arial, sans-serif;
  font-size: 24px;
}
.projcard-subtitle {
  font-family: 'Voces', 'Open Sans', arial, sans-serif;
  color: #888;
}
.projcard-bar {
  left: -2px;
  width: 50px;
  height: 5px;
  margin: 10px 0;
  border-radius: 5px;
  background-color: #424242;
  transition: width 0.2s ease;
}
.projcard-blue .projcard-bar { background-color: #0088FF; }
.projcard-blue::before { background-image: linear-gradient(-70deg, #0088FF, transparent 50%); }
.projcard-blue:nth-child(2n)::before { background-image: linear-gradient(-250deg, #0088FF, transparent 50%); }
.projcard-red .projcard-bar { background-color: #D62F1F; }
.projcard-red::before { background-image: linear-gradient(-70deg, #D62F1F, transparent 50%); }
.projcard-red:nth-child(2n)::before { background-image: linear-gradient(-250deg, #D62F1F, transparent 50%); }
.projcard-green .projcard-bar { background-color: #40BD00; }
.projcard-green::before { background-image: linear-gradient(-70deg, #40BD00, transparent 50%); }
.projcard-green:nth-child(2n)::before { background-image: linear-gradient(-250deg, #40BD00, transparent 50%); }
.projcard-yellow .projcard-bar { background-color: #F5AF41; }
.projcard-yellow::before { background-image: linear-gradient(-70deg, #F5AF41, transparent 50%); }
.projcard-yellow:nth-child(2n)::before { background-image: linear-gradient(-250deg, #F5AF41, transparent 50%); }
.projcard-orange .projcard-bar { background-color: #FF5722; }
.projcard-orange::before { background-image: linear-gradient(-70deg, #FF5722, transparent 50%); }
.projcard-orange:nth-child(2n)::before { background-image: linear-gradient(-250deg, #FF5722, transparent 50%); }
.projcard-brown .projcard-bar { background-color: #C49863; }
.projcard-brown::before { background-image: linear-gradient(-70deg, #C49863, transparent 50%); }
.projcard-brown:nth-child(2n)::before { background-image: linear-gradient(-250deg, #C49863, transparent 50%); }
.projcard-grey .projcard-bar { background-color: #424242; }
.projcard-grey::before { background-image: linear-gradient(-70deg, #424242, transparent 50%); }
.projcard-grey:nth-child(2n)::before { background-image: linear-gradient(-250deg, #424242, transparent 50%); }
.projcard-customcolor .projcard-bar { background-color: var(--projcard-color); }
.projcard-customcolor::before { background-image: linear-gradient(-70deg, var(--projcard-color), transparent 50%); }
.projcard-customcolor:nth-child(2n)::before { background-image: linear-gradient(-250deg, var(--projcard-color), transparent 50%); }
.projcard-description {
  z-index: 10;
  font-size: 15px;
  color: #424242;
  height: 125px;
  max-height: 200px; /* Adjust this value based on your layout */
  overflow-y: auto;  /* Adds vertical scrollbar if content exceeds max height */
  padding-right: 15px; /* To ensure the scrollbar does not overlap the content */
  text-align: justify; /* Optional: Makes the text look more readable */
  line-height: 1.5; /* Optional: Adjusts the line spacing for better readability */
}

/* Optional: Style the scrollbar inside the description */
.projcard-description::-webkit-scrollbar {
  width: 8px; /* Adjust width of the scrollbar */
}

.projcard-description::-webkit-scrollbar-thumb {
  background: #03b927; /* Color of the scrollbar thumb */
  border-radius: 10px;
}

.projcard-description::-webkit-scrollbar-thumb:hover {
  background: #00ff1a; /* Color of the scrollbar thumb on hover */
}

.projcard-description::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color of the scrollbar track */
}

.projcard-tagbox {
  position: absolute;
  bottom: 3%;
  font-size: 14px;
  cursor: default;
  user-select: none;
  pointer-events: none;
}
.projcard-tag {
  display: inline-block;
  background: #E0E0E0;
  color: #777;
  border-radius: 3px 0 0 3px;
  line-height: 26px;
  padding: 0 10px 0 23px;
  position: relative;
  margin-right: 20px;
  cursor: default;
  user-select: none;
  transition: color 0.2s;
}
.projcard-tag::before {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  height: 6px;
  left: 10px;
  width: 6px;
  top: 10px;
}
.projcard-tag::after {
  content: '';
  position: absolute;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #E0E0E0;
  border-top: 13px solid transparent;
  right: -10px;
  top: 0;
}

.projcard-textbox {
  text-decoration: none;
}

/* Flashcards styles */
#flashcards-section {
    text-align: center;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(146, 12, 12, 0.663);
    border-radius: 10px;
    margin: 20px auto;
    max-width: 800px;
}

.flashcards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.flashcard {
    background-color: #007BFF; /* Primary blue color */
    color: #fff;
    padding: 20px;
    width: 200px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(187, 24, 24, 0.852);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.flashcard:hover {
    transform: scale(1.05);
}

.close-button {
    display: block;
    margin: 20px auto;
    background-color: #e60023; /* Red */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.close-button:hover {
    background-color: #cc001f;
}

/* Tech Industry Page Styles */
.tech-nav {
    background-color: #f1f1f1;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin: 20px auto;
    max-width: 800px;
}

.tech-nav ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tech-nav ul li {
    margin: 0;
}

.tech-nav ul li a {
    display: block;
    padding: 10px 20px;
    background-color: #007BFF;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.tech-nav ul li a:hover {
    background-color: #0056b3;
}

#tech-content {
    padding: 20px;
    text-align: center;
    max-width: 800px;
    margin: auto;
}

/* Login & Signup Form Styles */
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
html, body {
    display: grid;
    height: 100%;
    width: 100%;
    place-items: center;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
}

.wrapper {
    overflow: hidden;
    max-width: 390px;
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1);
}

.wrapper .title-text {
    display: flex;
    width: 200%;
}

.wrapper .title {
    width: 50%;
    font-size: 35px;
    font-weight: 600;
    text-align: center;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .slide-controls {
    position: relative;
    display: flex;
    height: 50px;
    width: 100%;
    overflow: hidden;
    margin: 30px 0 10px 0;
    justify-content: space-between;
    border: 1px solid lightgrey;
    border-radius: 15px;
}

.slide-controls .slide {
    height: 100%;
    width: 100%;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    line-height: 48px;
    cursor: pointer;
    z-index: 1;
    transition: all 0.6s ease;
}

.slide-controls label.signup {
    color: #000;
}

.slide-controls .slider-tab {
    position: absolute;
    height: 100%;
    width: 50%;
    left: 0;
    z-index: 0;
    border-radius: 15px;
    background: -webkit-linear-gradient(left, #003366, #004080, #0059b3, #0073e6);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

input[type="radio"] {
    display: none;
}

#signup:checked ~ .slider-tab {
    left: 50%;
}

#signup:checked ~ label.signup {
    color: #fff;
    cursor: default;
    user-select: none;
}

#signup:checked ~ label.login {
    color: #000;
}

#login:checked ~ label.signup {
    color: #000;
}

#login:checked ~ label.login {
    cursor: default;
    user-select: none;
}

.wrapper .form-container {
    width: 100%;
    overflow: hidden;
}

.form-container .form-inner {
    display: flex;
    width: 200%;
}

.form-container .form-inner form {
    width: 50%;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.form-inner form .field {
    height: 50px;
    width: 100%;
    margin-top: 20px;
}

.form-inner form .field input {
    height: 100%;
    width: 100%;
    outline: none;
    padding-left: 15px;
    border-radius: 15px;
    border: 1px solid lightgrey;
    border-bottom-width: 2px;
    font-size: 17px;
    transition: all 0.3s ease;
}

.form-inner form .field input:focus {
    border-color: #1a75ff;
}

.form-inner form .field input::placeholder {
    color: #999;
    transition: all 0.3s ease;
}

form .field input:focus::placeholder {
    color: #1a75ff;
}

.form-inner form .pass-link {
    margin-top: 5px;
}

.form-inner form .signup-link {
    text-align: center;
    margin-top: 30px;
}

.form-inner form .pass-link a,
.form-inner form .signup-link a {
    color: #1a75ff;
    text-decoration: none;
}

.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover {
    text-decoration: underline;
}

form .btn {
    height: 50px;
    width: 100%;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

form .btn .btn-layer {
    height: 100%;
    width: 300%;
    position: absolute;
    left: -100%;
    background: -webkit-linear-gradient(
        right,
        #003366,
        #004080,
        #0059b3,
        #0073e6
    );
    border-radius: 15px;
    transition: all 0.4s ease;
}

form .btn:hover .btn-layer {
    left: 0;
}

form .btn input[type="submit"] {
    height: 100%;
    width: 100%;
    z-index: 1;
    position: relative;
    background: none;
    border: none;
    color: #fff;
    padding-left: 0;
    border-radius: 15px;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
}


  header {
    background-color: #fff;
    width: 100%;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    margin-right: 0;
  }

  h1 {
    font-size: 2em;
    color: #333;
  }

  main {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  h2 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 20px;
  }

  .flashcard-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .flashcard {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 300px;
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
  }

  .flashcard:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .question {
    display: block;
    margin-bottom: 15px;
    font-size: 1.1em;
    color: #333;
  }

  .answer {
    display: none;
    margin-top: 10px;
    font-size: 1em;
    color: #333;
  }

  .show .answer {
    display: block;
  }

  .toggle-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .toggle-button:hover {
    background-color: #0056b3;
  }

  .close-button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #e60023;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .close-button:hover {
    background-color: #cc001f;
  }

  footer {
    margin-top: 20px;
    padding: 10px;
    background-color: #fff;
    width: 100%;
    text-align: center;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  }

  footer p {
    margin: 0;
    font-size: 0.9em;
    color: #333;
  }

  .categories {
    display: none;
    margin-top: 20px;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .categories .category {
    margin: 10px;
    padding: 15px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s;
  }

  .categories .category:hover {
    background-color: #0056b3;
  }

  .categories.show {
    display: flex;
    flex-direction: column;
  }

  .category-buttons {
    display: none;
    margin-top: 10px;
  }
  .category-buttons button {
    margin: 5px;
  }
  /* Modal styles */
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
  }
  .modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
  }
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  .modal-buttons button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .modal-buttons button:hover {
    background-color: #0056b3;
  }
  .modal-buttons button:focus {
    outline: none;
  }

  
  ::placeholder {
    font: inherit;
    color: #e3e3e3;
  }
  .footer {
    text-align: center;
    margin-top: 1px;
    color: #777;
}



.custom-image-container {
  position: relative;
  width: 300px; /* Adjust the width as needed */
  margin: 0; /* Remove auto-centering */
  margin-left: 80px; /* Ensure it's aligned to the left */
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  gap: 0px;
}


.custom-image {
  width: 100%;
  border-radius: 15px;
  transition: transform 0.3s ease-in-out;
}

.custom-image:hover {
  transform: scale(1.05);
}

.button-wrapper {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.join-free-button,
.iep-plus-button {
  background-color: #008cba; /* Change color as needed */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.join-free-button:hover,
.iep-plus-button:hover {
  background-color: #005f5f; /* Change color as needed */
  transform: scale(1.1);
}

.popup {
  position: relative;
  width: 320px;
  height: fit-content;
  background: #FFFFFF;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 13px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  gap: 20px;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #ECF1FD;
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 5px;
}

.note {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.title {
  font-style: normal;
  font-weight: 700;
  font-size: 17px;
  line-height: 24px;
  color: #2B2B2F;
}

.subtitle {
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  color: #5F5D6B;
}

.input_field {
  width: 100%;
  height: 42px;
  padding: 0 0 0 12px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 1px #2B2B2F;
  background-color: transparent;
}

.form button.submit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  gap: 10px;
  width: 100%;
  height: 42px;
  background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 5px;
  border: 0;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
}
.container1 {
  display: flex; /* Enable flexbox */
  justify-content: space-between; /* Place items on opposite sides */
  align-items: flex-start; /* Align items at the top */
  border-bottom: solid lightgray 0.6px;
  padding: 0 50px;
  padding-bottom: 30px;
  margin-bottom: -50px;
  gap:0px;
}
.section {
  margin-bottom: -50px;
}
.white-textbox {
  flex: 0 1 auto; /* Prevent the box from stretching unnecessarily */
  max-width: 50%; /* Adjust the max-width to fit proportionally */
  background-color: rgb(255, 255, 255); /* White background */
  padding: 15px; /* Add inner spacing */
  text-align: center; /* Center-align the text */
  border-radius: 10px; /* Optional: Rounded corners for edges */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  display: flex; /* Enable flexbox for inner content */
  justify-content: center; /* Center the content horizontally */
  align-items: center; /* Center the content vertically */
  height: 200px;
  margin-top: 50px;
  clip-path: polygon(
    10% 0%, 90% 0%, 100% 25%, 85% 90%, 15% 100%, 0% 50%
  ); /* Creates a "splat" shape */
}


.message {
  font-size: 18px; /* Large, readable font size */
  font-weight: bold; /* Bold text for emphasis */
  color: black; /* Black text for contrast */
}

.message .highlight {
  color: #28a745; /* Green color for highlighting */
  font-size: 24px; /* Slightly larger font for emphasis */
}
/* Media query for tablets and up */
@media (min-width: 600px) {
    main {
        flex-direction: row;
    }
    section, aside {
        flex: 1;
        margin-bottom: 0;
        margin-right: 10px;
    }
    aside {
        margin-right: 0;
    }
}

/* Media query for desktops and up */
@media (min-width: 992px) {
    main {
        flex-direction: row;
    }
    section, aside {
        flex: 1;
        margin-bottom: 0;
        margin-right: 10px;
    }
    aside {
        margin-right: 0;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {}
a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    outline: none;
}

a,
a:active,
a:focus {
    color: #333;
    text-decoration: none;
    transition-timing-function: ease-in-out;
    -ms-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-duration: .2s;
    -ms-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
img {
max-width: 100%;
height: auto;
}
span, a, a:hover {
display: inline-block;
text-decoration: none;
color: inherit;
}
.section-head {
margin-bottom: 60px;
text-align: center;
}
#we-offer {
  margin-top: 0px; /* Example: Add space above this section */
}
.section-head h4 {
  position: relative;
  padding: 0; /* No extra padding */
  color: #388E3C; /* Bright green color */
  line-height: 1; /* Tight line height for precise spacing */
  letter-spacing: 2px; /* Matches spacing with span */
  font-size: 2.4rem; /* Slightly smaller font size */
  font-weight: 700; /* Bold font */
  text-align: center; /* Centers the text */
  text-transform: none; /* Maintains original casing */
  margin-bottom: 20px; /* Space below the heading */
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow for a polished look */
}

.section-head h4:before {
  content: '';
  width: 60px;
  height: 3px;
  background: #388E3C; /* Matches the exact bright green color */
  position: absolute;
  left: 0;
  bottom: -10px;
  right: 0;
  margin: 0 auto; /* Centers the line */
}

.section-head h4 span {
  font-weight: 700; /* Bold font, no need to repeat later */
  padding-bottom: 5px; /* Padding for spacing below the text */
  color: #2f2f2f; /* Fallback color if gradient isn't supported */
  font-size: 2.4rem; /* Slightly smaller font size to match h4 */
  text-align: center; /* Centers the text */
  background: linear-gradient(to right, #1a1a1a, #4d4d4d, #1a1a1a); /* Dark shiny gradient */
  -webkit-background-clip: text; /* Makes the gradient visible on text only */
  -webkit-text-fill-color: transparent; /* Required to show the gradient */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Very slight shadow with low opacity */
  letter-spacing: 2px; /* Spacing between letters for a modern look */
  margin-bottom: 20px; /* Space below the heading */
  margin-top: -60px;
}


.section-head2 h4 {
  position: relative;
  padding: 0; /* No extra padding */
  color: #d61f1f; /* Bright red color */
  line-height: 1; /* Tight line height for precise spacing */
  letter-spacing: 2px; /* Spacing between letters for a modern look */
  font-size: 2.4rem; /* Slightly smaller font size */
  font-weight: 700; /* Bold font */
  text-align: center; /* Centers the text */
  text-transform: none; /* Maintains original casing */
  margin-top: -40px;
  margin-bottom: 20px; /* Space below the heading */
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow for a polished look */
}

.section-head2 h4:before {
  content: '';
  width: 60px;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow for a polished look */
  height: 3px;
  background: #d61f1f; /* Matches the exact red color */
  position: absolute;
  left: 0;
  bottom: -10px;
  right: 0;
  margin: 0 auto; /* Centers the line */
}

.section-head2 h4 span {
  font-weight: 700; /* Bold font */
  margin-top:-30px;
  padding-bottom: 5px; /* Padding for spacing below the text */
  color: #2f2f2f; /* Fallback dark text color */
  font-size: 2.4rem; /* Matches the h4 size */
  text-align: center; /* Centers the text */
  background: linear-gradient(to right, #800000, #d61f1f, #800000); /* Red shiny gradient */
  -webkit-background-clip: text; /* Makes the gradient visible on text only */
  -webkit-text-fill-color: transparent; /* Required to show the gradient */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Subtle shadow with low opacity */
  letter-spacing: 2px;
}

.exam-room-content {
  flex: 1; /* Allows the content to take available space */
  margin-right: 15px;
  max-width: 60%; /* Restricts the content to half the container */
}

.exam-room-image {
  display: block;
  width: 500px;
  height: auto;
  border: 5px solid black; /* Black frame around the image */
  margin-top: 20px;
  margin-bottom: 20px;
  transition: filter 0.3s ease-in-out; /* Smooth grayscale effect */
}

.image-container:hover .exam-room-image {
  filter: grayscale(40%); /* Apply 40% grayscale when hovered */
}

.image-container:hover .enter-button {
  background-color: red; /* Highlight button when the image is hovered */
  color: white; /* Ensure text remains white */
}

.enter-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Precisely center the button over the image */
  border: 1px solid white; /* Thin white border */
  background-color: transparent; /* Transparent background */
  color: white; /* White text */
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth button highlight */
}
.image-container {
  position: relative; /* Needed to position the button over the image */
  display: inline-block;
  margin-right: 30px;
  margin-left: auto; /* Keep the container aligned to the right */
}
p.service_text{
color:#cccccc !important;
font-size:16px;
line-height:28px;
text-align:center;    
}
.section-head p, p.awesome_line{
color:#818181;
font-size:16px;
line-height:28px;
text-align:center;  
margin-top: 10px;
}


.extra-text {
font-size:34px;
font-weight: 700;
color:#2f2f2f;
margin-bottom: 25px;
position:relative;
text-transform: none;
}
.extra-text::before {
content: '';
width: 60px;
height: 3px;
background: #388E3C;
position: absolute;
left: 0px;
bottom: -10px;
right: 0;
margin: 0 auto;
}
.extra-text span {
font-weight: 700;
color:#388E3C;
}
.item {
background: #fff;
text-align: center;
padding: 30px 25px;
-webkit-box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
border-radius: 20px;
border:5px solid rgba(0, 0, 0, 0.07);
margin-bottom: 30px;
-webkit-transition: all .5s ease 0;
transition: all .5s ease 0;
transition: all 0.5s ease 0s;
}
.item:hover{
background:#388E3C;
box-shadow:0 8px 20px 0px rgba(0, 0, 0, 0.2);
-webkit-transition: all .5s ease 0;
transition: all .5s ease 0;
transition: all 0.5s ease 0s;
}
.item:hover .item, .item:hover span.icon{
background:#fff;
border-radius:10px;
-webkit-transition: all .5s ease 0;
transition: all .5s ease 0;
transition: all 0.5s ease 0s;
}
.item:hover h6, .item:hover p{
color:#fff;
-webkit-transition: all .5s ease 0;
transition: all .5s ease 0;
transition: all 0.5s ease 0s;
}
.item .icon {
font-size: 40px;
margin-bottom:25px;
color: #388E3C;   
width: 90px;
height: 90px;
line-height: 96px;
border-radius: 50px;
}
.item .feature_box_col_one{
background:rgba(247, 198, 5, 0.20);
color:#388E3C
}
.item .feature_box_col_two{
background:rgba(255, 77, 28, 0.15);
color:#388E3C
}
.item .feature_box_col_three{
background:rgba(0, 147, 38, 0.15);
color:#388E3C
}
.item .feature_box_col_four{
background:rgba(0, 108, 255, 0.15);
color:#388E3C
}
.item .feature_box_col_five{
background:rgba(146, 39, 255, 0.15);
color:#388E3C
}
.item .feature_box_col_six{
background:rgba(23, 39, 246, 0.15);
color:#388E3C
}
.item p{
font-size:15px;
line-height:26px;
}
.item h6 {
margin-bottom:20px;
color:#2f2f2f;
  font-weight: bold; /* Makes all h6 headers bold */
}
.mission p {
margin-bottom: 10px;
font-size: 15px;
line-height: 28px;
font-weight: 500;
}
.mission i {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #388E3C;
border-radius: 50%;
color: #fff;
font-size: 25px;
}
.mission .small-text {
margin-left: 10px;
font-size: 13px;
color: #666;
}
.skills {
padding-top:0px;
}
.skills .prog-item {
margin-bottom: 25px;
}
.skills .prog-item:last-child {
margin-bottom: 0;
}
.skills .prog-item p {
font-weight: 500;
font-size: 15px;
margin-bottom: 10px;
}
.skills .prog-item .skills-progress {
width: 100%;
height: 10px;
background: #e0e0e0;
border-radius:20px;
position: relative;
}
.skills .prog-item .skills-progress span {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #388E3C;
width: 10%;
border-radius: 10px;
-webkit-transition: all 1s;
transition: all 1s;
}
.skills .prog-item .skills-progress span:after {
content: attr(data-value);
position: absolute;
top: -5px;
right: 0;
font-size: 10px;
font-weight:600;    
color: #fff;
background:rgba(0, 0, 0, 0.9);
padding: 3px 7px;
border-radius: 30px;
}

.testimonial-section {
    text-align: center;
    padding: 30px 0;
    background-color: #f9f9f9;
    color: #333;
  }
  
  .testimonial-section h1 {
    font-size: 2em;
    color: #333;
    margin-bottom: 20px;
  }
  
  .testimonial-section .container {
    width: 500px;
    min-height: 315px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 30px;
    overflow: hidden;
  }
  
  .testimonial-section input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
  }
  
  .testimonial-section label {
    display: block;
    width: 32%;
    border: 4px solid white;
    position: absolute;
    bottom: 5px;
    cursor: pointer;
    transition: border-color 0.3s linear;
    z-index: 2; /* Ensure labels are above the slides */
  }
  
  .testimonial-section label.first {
    left: 0;
  }
  
  .testimonial-section label.second {
    left: 34%;
  }
  
  .testimonial-section label.third {
    left: 68%;
  }
  
  .testimonial-section .slides {
    position: relative;
  }
  
  .testimonial-section blockquote {
    margin: 0;
    padding: 30px;
    width: 500px;
    background-color: #db532b;
    color: white;
    box-shadow: 0 5px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: background-color 0.6s linear;
    z-index: 1; /* Ensure slides are below labels */
  }
  
  .testimonial-section blockquote:after {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    top: 100%;
    border: solid transparent;
    border-top-color: #da532b;
    border-left-color: #da532b;
    border-width: 10px;
    left: 10%;
  }
  
  .testimonial-section #second:checked ~ .slides .two blockquote {
    background-color: purple;
  }
  
  .testimonial-section .two blockquote:after {
    border: solid transparent;
    border-top-color: purple;
    border-left-color: purple;
    border-width: 10px;
  }
  
  .testimonial-section #third:checked ~ .slides .three blockquote {
    background-color: #54885f;
  }
  
  .testimonial-section .three blockquote:after {
    border: solid transparent;
    border-top-color: #54885f;
    border-left-color: #54885f;
    border-width: 10px;
  }
  
  .testimonial-section .quotes {
    position: absolute;
    color: rgba(255, 255, 255, 0.5);
    font-size: 5em;
  }
  
  .testimonial-section .leftq {
    top: -25px;
    left: 5px;
  }
  
  .testimonial-section .rightq {
    bottom: -10px;
    right: 5px;
  }
  
  .testimonial-section img {
    float: left;
    margin-right: 20px;
  }
  
  .testimonial-section .slide {
    position: absolute;
    left: -100%;
    opacity: 0;
    transition: all 0.6s ease-in;
  }
  
  .testimonial-section #first:checked ~ .slides .one {
    left: 0;
    opacity: 1;
  }
  
  .testimonial-section #second:checked ~ .slides .two {
    left: 0;
    opacity: 1;
  }
  
  .testimonial-section #third:checked ~ .slides .three {
    left: 0;
    opacity: 1;
  }
  
  .testimonial-section #first:checked ~ label.first {
    border-width: 6px;
    border-color: #db532b;
  }
  
  .testimonial-section #second:checked ~ label.second {
    border-width: 6px;
    border-color: purple;
  }
  
  .testimonial-section #third:checked ~ label.third {
    border-width: 6px;
    border-color: #54885f;
  }
  

  
  .container-fluid {
    display: flex;
  }
  
  .sidebar {
    position: fixed;
    top: 70px; /* Same height as your header */
    left: 0;
    width: 250px; /* Adjust the width as needed */
    height: calc(100vh - 70px); /* Full height minus the header */
    background-color: #f8f9fa;
    padding: 20px;
    overflow-y: auto; /* Enables scrolling if content is too long */
  }
  
  .sidebar ul {
    list-style-type: none;
    padding-left: 0;
  }
  
  .sidebar ul li {
    margin-bottom: 10px;
  }
  
  .sidebar a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 10px;
    background-color: #e9ecef;
    border-radius: 5px;
  }
  
  .sidebar a:hover {
    background-color: #ced4da;
  }
  
  #content {
    margin-left: 270px; /* This should be slightly larger than the sidebar width */
    padding: 20px;
  }
  
  .run-code-button {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    border: none; /* Remove border */
    padding: 10px 20px; /* Padding around the text */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Make it inline-block */
    font-size: 16px; /* Adjust font size */
    margin: 10px 0; /* Add margin for spacing */
    cursor: pointer; /* Change cursor to pointer */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth hover transition */
  }
  
  .run-code-button:hover {
    background-color: #45a049; /* Darker green on hover */
  }
  
  .scrollable-box {
    max-height: 300px; /* Set the height of the box */
    overflow-y: auto;  /* Enable vertical scrolling */
    padding: 10px;     /* Add some padding for a cleaner look */
    border: 1px solid #ddd; /* Optional: Add a border to define the box */
    background-color: #f9f9f9; /* Optional: Light background color for better readability */
  }
  
  .content-container {
  display: flex; /* Flexbox to position items side by side */
  justify-content: space-between; /* Space between the scroll box and video */
  align-items: flex-start; /* Align items at the top */
  gap: 20px; /* Space between the scrollable box and the video */
  margin-top: 20px; /* Add space above the content */
}

.scrollable-box {
  max-height: 300px; /* Set a height for the box */
  overflow-y: auto;  /* Enable vertical scrolling */
  padding: 15px;     /* Space inside the box */
  
  /* Visual design */
  border-radius: 10px; /* Smooth, rounded corners */
  background: linear-gradient(135deg, #f0f0f0, #ffffff); /* Subtle gradient background */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05); /* Soft shadow for depth */
  border: none; /* Remove border to make it clean */
  
  /* Font styling */
  font-family: 'Montserrat', sans-serif; /* Modern font */
  font-size: 16px; /* Adjust text size for readability */
  color: #333; /* Dark gray text for modern feel */

  /* Scrollbar customization for modern look */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #999 #f0f0f0; /* Firefox */
}

.scrollable-box::-webkit-scrollbar {
  width: 8px; /* Width of the scrollbar */
}

.scrollable-box::-webkit-scrollbar-track {
  background: #f0f0f0; /* Track color */
}

.scrollable-box::-webkit-scrollbar-thumb {
  background-color: #999; /* Scrollbar color */
  border-radius: 10px; /* Rounded scrollbar */
  border: 2px solid #f0f0f0; /* Gives padding between scrollbar and track */
}

/* Smooth scrolling effect */
.scrollable-box {
  scroll-behavior: smooth;
}

.video-container {
  flex: 1; /* Make the video take up available space */
  max-width: 600px; /* Limit the video width */
  padding: 10px;
  border-radius: 10px;
  background-color: #f9f9f9; /* Light background for the video area */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.video-container video {
  width: 100%;
  height: auto; /* Make the video responsive */
  border-radius: 10px; /* Rounded corners for the video */
}