/* General Reset */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }




/* exam room redone */

.xmroompic {
  height: 300px;
  width: 275px;
  display: block;
  margin: 0 auto;
  padding-top: 40px;
}

.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");
  }
}

.swipe-indicator26 {
  color: lightgray;
  text-align: center;
}
.industry h2 {
  text-align: center;
  color: #4CAF50;
  margin-bottom: 15px;
}
.industry {
  flex: 1;
  min-width: 300px;
  background: #404040;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

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

.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);
}

.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 */
}

.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 */
  }
}

/* SECUR TECHNO AND HEALTCUR REDONE */

/* Background and General Content */
.security-plus-body-content-unique {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: url('images/securrr.jpg') no-repeat center center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}
.security-plus-body-content-unique1 {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: url('images/HOSPTL.png') no-repeat center center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}
/* Remove hyperlink styling for specific links */
.practice-exams-table ul li a {
  text-decoration: none; /* Removes underline */
  color: inherit; /* Inherits color from parent (e.g., the list item) */
}
.practice-exams-table4 ul li a {
  text-decoration: none; /* Removes underline */
  color: inherit; /* Inherits color from parent (e.g., the list item) */
}
.career-paths-table4 ul li a {
  text-decoration: none; /* Removes underline */
  color: inherit; /* Inherits color from parent (e.g., the list item) */
}
/* Remove hyperlink styling for specific links */
.practice-exams-table1 ul li a {
  text-decoration: none; /* Removes underline */
  color: inherit; /* Inherits color from parent (e.g., the list item) */
}
/* Remove hyperlink styling for specific links */
.practice-exams-table2 ul li a {
  text-decoration: none; /* Removes underline */
  color: inherit; /* Inherits color from parent (e.g., the list item) */
}

/* Optional: Add hover effect if needed */
.practice-exams-table ul li a:hover {
  color: #00796b; /* Change color on hover */
  background: rgba(0, 150, 136, 0.1); /* Add subtle background effect */
}
/* Remove hyperlink styling for Other Industries links */
.career-paths-table ul li a {
  text-decoration: none; /* Removes underline */
  color: inherit; /* Inherits color from parent (e.g., the list item) */
}
.career-paths-table1 ul li a {
  text-decoration: none; /* Removes underline */
  color: inherit; /* Inherits color from parent (e.g., the list item) */
}
.career-paths-table2 ul li a {
  text-decoration: none; /* Removes underline */
  color: inherit; /* Inherits color from parent (e.g., the list item) */
}
/* Optional: Add hover effect for better interactivity */
.career-paths-table ul li a:hover {
  color: #00796b; /* Change text color on hover */
  background: rgba(0, 150, 136, 0.1); /* Add subtle background effect */
  border-radius: 5px; /* Optional: Rounded edges for hover background */
}

.security-plus-body-content-unique2 {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: url('images/techback.png') no-repeat center center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}

.security-plus-title-unique {
  font-size: 4rem;
  color: white;
  margin-top: 50px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
  margin-bottom: 20px;
  text-align: center;
}
/* Revamped Job Carousel */
.job-carousel-container {
  background: rgba(0, 121, 107, 0.1);
  padding: 30px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  overflow: hidden;
}

.job-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 10px;
}

.job-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(145deg, #ffffff, #e0e0e0);
  padding: 15px;
  border-radius: 10px;
  min-width: 320px;
  max-width: 320px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.job-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.job-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #80deea;
}
.job-image2 {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #1e8b39;
}
.job-image1 {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #000000;
}

.job-details {
  margin-top: 15px;
  text-align: center;
}

.job-details h2 {
  font-size: 1.5rem;
  color: #00796b;
  margin-bottom: 5px;
}
.job-details1 h2 {
  font-size: 1.5rem;
  color: #020202;
  margin-bottom: 5px;
}
.job-details p {
  font-size: 1rem;
  color: #004d40;
  margin: 5px 0;
}

.job-enter-button {
  margin-top: 10px;
  padding: 10px 20px;
  background: #00796b;
  color: #ffffff;
  text-align: center;
  border-radius: 20px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  transition: background 0.2s ease, transform 0.2s ease;
}

.job-enter-button:hover {
  background: #004d40;
  transform: scale(1.05);
}
.job-enter-button1 {
  margin-top: 10px;
  padding: 10px 20px;
  background: #000000;
  color: #ffffff;
  text-align: center;
  border-radius: 20px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  transition: background 0.2s ease, transform 0.2s ease;
}

.job-enter-button1:hover {
  background: #004d40;
  transform: scale(1.05);
}
.job-enter-button2 {
  margin-top: 10px;
  padding: 10px 20px;
  background: #1e8b39;
  color: #ffffff;
  text-align: center;
  border-radius: 20px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  transition: background 0.2s ease, transform 0.2s ease;
}

.job-enter-button:hover2 {
  background: #1e8b39;
  transform: scale(1.05);
}

/* Practice Exams and Career Paths */
.table-section {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  gap: 20px;
}

.practice-exams-table, .career-paths-table {
  background: linear-gradient(145deg, #e0f7fa, #80deea);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  flex: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.practice-exams-table:hover, .career-paths-table:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.table-title {
  text-align: center;
  font-size: 1.5rem;
  color: #00796b;
  font-weight: bold;
  margin-bottom: 15px;
  text-transform: uppercase;
}
/* text section */
.practice-exams-table1, .career-paths-table1 {
  background: rgba(255, 255, 255, 0.9); /* Transparent grey with white base */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Subtle grey shadow */
  flex: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.practice-exams-table1:hover, .career-paths-table1:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Slightly darker shadow on hover */
}

/* text section */
.practice-exams-table2, .career-paths-table2 {
  background: rgba(255, 255, 255, 0.8); /* Transparent grey with white base */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Subtle grey shadow */
  flex: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.practice-exams-table2:hover, .career-paths-table2:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Slightly darker shadow on hover */
}

.table-title1 {
  text-align: center;
  font-size: 1.5rem;
  color: #333; /* Neutral dark grey for strong readability */
  font-weight: bold;
  margin-bottom: 15px;
  text-transform: uppercase;
}
/* Practice Exams, Career Paths, and Other Industries Tables */
.practice-exams-table1 ul, .career-paths-table1 ul {
  list-style: none;
  padding: 0;
}

.practice-exams-table1 ul li, .career-paths-table1 ul li {
  padding: 10px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 1.2rem;
  color: #004d40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s ease, color 0.2s ease;
}

.practice-exams-table2 ul li, .career-paths-table2 ul li {
  padding: 10px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 1.2rem;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s ease, color 0.2s ease;
}
.practice-exams-table4 ul li, .career-paths-table4 ul li {
  padding: 10px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 1.2rem;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s ease, color 0.2s ease;
}
/* text section */
.practice-exams-table4, .career-paths-table4 {
  background: rgba(255, 255, 255, 0.9); /* Transparent grey with white base */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Subtle grey shadow */
  flex: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.table-title4 {
  text-align: center;
  font-size: 1.5rem;
  color: #108518;
  font-weight: bold;
  margin-bottom: 15px;
  text-transform: uppercase;
}
.practice-exams-table4 ul li:hover, .career-paths-table4 ul li:hover {
  background: rgba(11, 155, 55, 0.1);
  color: #000000;
}
.practice-exams-table4 ul li, .career-paths-table4 ul li {
  padding: 10px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 1.2rem;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s ease, color 0.2s ease;
}
.practice-exams-table1 ul li:hover, .career-paths-table1 ul li:hover {
  background: rgba(0, 150, 136, 0.1);
  color: #00796b;
}
.practice-exams-table2 ul li:hover, .career-paths-table2 ul li:hover {
  background: rgba(0, 150, 136, 0.1);
  color: #00796b;
}
.practice-exams-table1 ul li:last-child, .career-paths-table1 ul li:last-child {
  border-bottom: none;
}

/* Specific for "Other Industries" Section */
.career-paths-table1 ul li {
  padding: 10px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 1.2rem;
  color: #004d40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s ease, color 0.2s ease;
}

.career-paths-table1 ul li:hover {
  background: rgba(0, 150, 136, 0.1);
  color: #00796b;
}

.career-paths-table1 ul li:last-child {
  border-bottom: none;
}




/* Practice Exams, Career Paths, and Other Industries Tables */
.practice-exams-table ul, .career-paths-table1 ul {
  list-style: none;
  padding: 0;
}

.practice-exams-table ul li, .career-paths-table1 ul li {
  padding: 10px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 1.2rem;
  color: #004d40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s ease, color 0.2s ease;
}

.practice-exams-table ul li:hover, .career-paths-table1 ul li:hover {
  background: rgba(0, 150, 136, 0.1);
  color: #00796b;
}

.practice-exams-table ul li:last-child, .career-paths-table1 ul li:last-child {
  border-bottom: none;
}

/* Specific for "Other Industries" Section */
.career-paths-table ul li {
  padding: 10px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 1.2rem;
  color: #004d40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s ease, color 0.2s ease;
}

.career-paths-table ul li:hover {
  background: rgba(0, 150, 136, 0.1);
  color: #00796b;
}

.career-paths-table ul li:last-child {
  border-bottom: none;
}










/* Mobile Responsiveness */
@media (max-width: 768px) {
  .table-section {
    flex-direction: column;
    gap: 10px;
  }
  .table-section1 {
    flex-direction: column;
    gap: 10px;
  }
  .table-section2 {
    flex-direction: column;
    gap: 10px;
  }
}




  /* Sticky Navigation Bar */
  .navbar {
    position: sticky;
    top: 0;
    width: 100%;
    height: 80px; /* Fixed height */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;
    padding: 0 20px;
    box-sizing: border-box;
  }
  
  /* Profile Section */
  .profile-section {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .profile-icon {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: block;
    margin-left: 10px;
    border: 1px solid green; /* Add a thin light grey border to the right */
  }
  
  .popup-message {
    display: none; /* Hide the pop-up message by default */
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    transform: translateY(60px);
    z-index: 10;
  }

  .profile-container:hover .popup-message {
    display: block; /* Show the message on hover */
  }
  

/* Exam Room Button */
.redbutt {
    background: linear-gradient(135deg, #e63946, #9d0208); /* Vibrant red gradient */
    color: white; /* White text for contrast */
    font-size: 12px; /* Adjust font size for better readability */
    padding: 0; /* Reset padding */
    width: 55px; /* Fixed width for the circle */
    height: 55px; /* Height equal to width for a perfect circle */
    border-radius: 50%; /* Make the button circular */
    display: flex; /* Enable flexbox */
    align-items: center; /* Vertically center the text */
    justify-content: center; /* Horizontally center the text */
    text-align: center; /* Center-align text */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    cursor: pointer; /* Change cursor to pointer */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effects */
  }
  
  /* Hover Effect */
  .redbutt:hover {
    background: linear-gradient(135deg, #f94144, #d90429); /* Slightly brighter red */
    transform: scale(1.03); /* Slight hover growth */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* Enhanced shadow */
  }
  
  /* Mobile-Specific Adjustments */
  @media (max-width: 768px) {
    .profile-section {
      justify-content: space-between; /* Ensure even spacing */
      flex-wrap: wrap; /* Allow wrapping if necessary */
    }
  
    .redbutt {
      background-color: red; /* Set background color to red */
      color: white; /* White text for contrast */
      font-size: 10px; /* Adjust font size for better readability */
      padding: 0; /* Reset padding */
      width: 45px; /* Fixed width for the circle */
      height: 45px; /* Height equal to width for a perfect circle */
      border-radius: 50%; /* Make the button circular */
      display: flex; /* Enable flexbox */
      align-items: center; /* Vertically center the text */
      justify-content: center; /* Horizontally center the text */
      text-align: center; /* Center-align text */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
      cursor: pointer; /* Change cursor to pointer */
      transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effects */
    }
    
    .redbutt:hover {
      transform: scale(1.1); /* Slightly enlarge on hover */
      box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
    }
    
    /* Reduce spacing for better alignment */
    .profile-section img {
      width: 40px; /* Make profile icon smaller */
      height: 40px;
    }
  }
  
 
  /* Logo Centered */
  .logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .logo {
    height: 70px;
    width: auto;
  }
  .search {
    display: inline-flex;
    align-items: center;
    background-image: linear-gradient(40deg, #111, #29c24f);
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #fff;
  }
  .search :is(input, button) {
    background: transparent;
    color: inherit;
    border: none;
    outline: none;
  }
  .search__input {
    width: 120px; /* Set a smaller default width */
    max-width: 150px; /* Limit the maximum width */
    transition: width 0.5s ease; /* Smooth transition for resizing */
}
div.search__input {
  width: 120px !important; /* Force the new width */
  max-width: 150px !important; /* Force maximum width */
  transition: width 0.5s ease;
}

  .search__button {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    cursor: pointer;
    transition: color 0.25s;
  }
  ::placeholder {
    font: inherit;
    color: #e3e3e3;
  }
  .search__button:hover {
    color: #e3e3e3;
  }
  .search:focus-within input {
    width: 150px; /* Adjust width as needed */
}

  /* Ensure the Search Bar Hides on Mobile */
@media (max-width: 768px) {
    .search {
      display: none; /* Hide search bar on mobile */
    }
  }
  
  
  /* Show search bar on desktop */
  @media (min-width: 769px) {
    .search {
      display: inline-flex;
    }
  }
  
  /* Menu Button */
  .menu-button {
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
  }
  
/* Dropdown Menu */
.dropdown-menu {
    position: fixed;
    top: 0;
    right: -100%; /* Initially hidden off-screen */
    height: 100vh; /* Full viewport height */
    background: #fff;
    box-shadow: -4px 0 6px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease; /* Smooth slide-in effect */
    z-index: 9999;
  }
  
  /* Menu Open State */
  .dropdown-menu.open {
    transform: translateX(0); /* Slide into view */
  }
  
  /* Desktop (≥769px): 30% width */
@media (min-width: 769px) {
    .dropdown-menu {
      width: 30%; /* Set width to 30% on desktops */
      max-width: 400px;
    }
  }
  
  /* Mobile (≤768px): 50% width */
  @media (max-width: 768px) {
    .dropdown-menu {
      width: 50%; /* Set width to 50% on mobile */
    }
  }
/* Dropdown Menu Links */
.dropdown-menu ul {
    list-style: none;
    padding: 20px;
    margin: 0;
  }
  
  .dropdown-menu ul li {
    margin-bottom: 15px;
  }
  
  .dropdown-menu ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s ease;
  }
    
  .dropdown-menu ul li a:hover {
    color: #4CAF50;
  }  
  .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
  }
  
  /* Learn Practice Succeed Banner */
  .learn-practice-banner {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 650px; /* Cap max height */
    overflow: hidden;
  }

  /* Move the image up on desktop only */

  .banner-img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  
  .btn-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 8px 16px; /* Smaller size */
    font-size: 14px; /* Smaller text */
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
  }
  /* Mobile-Specific Adjustments */
@media (max-width: 768px) {
    .btn-banner {
      padding: 6px 12px; /* Smaller padding for mobile */
      font-size: 12px; /* Smaller text size for mobile */
      border-radius: 3px; /* Adjust border radius slightly */
    }
  }
  
  .learn-practice-banner:hover .btn-banner {
    background-color: #4CAF50;
    border-color: #4CAF50;
  }
  
  .learn-practice-banner:hover .banner-img {
    filter: grayscale(25%); /* Less grayscale effect */
  }
  /* General Footer Styles */
.footer {
    background: #f9f9f9;
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
    border-top: 1px solid #ddd;
}

/* Footer Columns */
.footer-columns {
    display: flex;
    flex-direction: column; /* Stack columns vertically */
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 0px;
}

/* Individual Column Styling */
.footer-column {
    text-align: center;
    padding-bottom: 10px;
    width: 100%;
    border-bottom: 1px solid #ddd; /* Bottom border for separation */
}

.footer-column h3 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}
/* Default Link Styling */
.footer-column a, 
.footer-bottom a {
    text-decoration: none;
    color: #333; /* Default black for general links */
    font-weight: bold;
    transition: color 0.3s ease;
}

/* Styling for Terms of Service and Privacy Policy */
.footer-bottom .link-terms, 
.footer-bottom .link-privacy {
    color: green; /* Green text */
    text-decoration: underline; /* Underline the text */
}

.footer-bottom .link-terms:hover, 
.footer-bottom .link-privacy:hover {
    color: darkgreen; /* Darker green on hover */
    text-decoration: none; /* Remove underline on hover */
}

/* Special Styling for Highlighted Links */
.footer-bottom a[href="terms-of-service.html"], 
.footer-bottom a[href="privacy-policy.html"] {
    text-decoration: underline;
    color: #4CAF50; /* Highlighted green */
}

.footer-column a[href="about.html"] {
    text-decoration: underline;
    color: #007BFF; /* Highlighted blue for mission link */
}

/* Hover Effects */
.footer-bottom a:hover, 
.footer-column a:hover {
    color: #2E7D32; /* Darker green on hover for highlighted links */
}

.footer-column a[href="about.html"]:hover {
    color: #0056B3; /* Darker blue on hover for mission link */
}

/* Horizontal Links Layout */
.horizontal-links ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.horizontal-links ul li {
    margin: 0 10px;
}

.horizontal-links ul li a {
    text-decoration: none;
    color: #333; /* Black for general links */
    font-weight: bold;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.horizontal-links ul li a:hover {
  color: green; /* Turns green on hover */
}

/* Footer Bottom Section */
.footer-bottom {
    border-top: 1px solid #ddd; /* Top border for separation */
    padding-top: 10px;
    font-size: 0.85rem;
}


  .bannay {
    width: 100vw; /* Full browser width */
    background: rgba(243, 243, 243, 0.9); /* Slightly transparent light gray */
    box-shadow: 
    0 -10px 20px rgba(0, 0, 0, 0.3), /* Strong shadow at the top */
        0 10px 20px rgba(0, 0, 0, 0.3);  /* Strong shadow at the bottom */
    text-align: center; /* Center the text horizontally */
    padding: 25px; /* Add more padding for spacing */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Horizontally center the text */
    align-items: center; /* Vertically center the text */
    border-top: none; /* Remove the border for simplicity */
    position: relative; /* Needed for gradient overlay */
}

.bannay:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(255, 255, 255, 0.5),
        rgba(220, 220, 220, 0.9)
    ); /* Subtle gradient overlay for a smoother blend */
    z-index: 1; /* Place the overlay above the background */
}

.bannay h1 {
    position: relative; /* Ensure it stays above the overlay */
    z-index: 2;
    font-size: 2rem; /* Adjust the text size */
    font-weight: bold; /* Make the text bold */
    margin: 0; /* Remove default margins */
    color: #333; /* Dark gray text color for contrast */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

.green-plus {
    color: #4CAF50; /* Green color for the + sign */
    font-size: 1.1em;
    text-shadow: 3px 4px 4px rgba(0, 0, 0, 0.2); /* Softer shadow effect */
}

  .sectionheadh4 {
    margin-top: 15px;
    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 */
  }
  .sectionheadh5 {
    margin-top: 15px;
    position: relative;
    padding: 0; /* No extra padding */
    color: #c62727; /* 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 */
  }
  .sectionheadh6 {
    margin-top: 15px;
    position: relative;
    padding: 0; /* No extra padding */
    color: #2767c6; /* 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 */
  }
  .sectionheadh4: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 */
  }
  .sectionheadh5:before {
    content: '';
    width: 60px;
    height: 3px;
    background: #c62727; /* Matches the exact bright green color */
    position: absolute;
    left: 0;
    bottom: -10px;
    right: 0;
    margin: 0 auto; /* Centers the line */
  }
  
  .sectionheadh6:before {
    content: '';
    width: 60px;
    height: 3px;
    background: #2767c6; /* Matches the exact bright green color */
    position: absolute;
    left: 0;
    bottom: -10px;
    right: 0;
    margin: 0 auto; /* Centers the line */
  }
  
  .sectionheadh4 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;
  }

  .sectionheadh5 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;
  }

  .sectionheadh6 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;
  }


  /* Carousel Card Styling */
/* Carousel Container */
.carousel-container {
    display: flex;
    gap: 20px;
    justify-content: space-evenly;
    flex-wrap: wrap; /* Makes the layout flexible for smaller screens */
}


.carousel-card {
    background: rgba(255, 255, 255, 0.7); /* Transparent backing */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2); /* Slight green glow */
    padding: 10px;
    width: 100%;
}
.carousel-card:hover {
    transform: translateY(-10px); /* Slight upward lift */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}
.carousel-title {
    font-size: 1.5rem;
    color: black;
    margin-bottom: 10px;
    text-align: center;
}

.carousel img {
    width: 100%;
    height: auto;
    max-width: 400px;
    place-items: center;
    text-align: center;
    margin: 0 auto;
    display: block;
    border-bottom: 2px solid #ddd;
    margin-bottom: 10px;
}

.carousel-text {
    background: white;
    padding: 10px;
    font-size: 0.9rem;
    color: #333;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .carousel-container {
        flex-direction: column;
        align-items: center; /* Centers the items horizontally */
    }

    .carousel {
        width: 80%; /* Adjust carousel width for smaller screens */
    }
}
#why-choose-us {
    text-align: center;
}
/* Unified Transparent Background for the Entire Content */
.whychooser {
    background: url('images/road.png') no-repeat center center/cover; /* Cool background image */
    padding: 40px 20px; /* Padding around the section */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Space between elements */
    position: relative;
    border-radius: 10px; /* Add rounded corners for a lifted effect */
    z-index: 1; /* Ensure it overlays correctly */
}

/* Transparent Container for Unified Background */
.whychooser-container {
    background: rgba(255, 255, 255, 0.85); /* Slightly transparent white */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Padding for spacing inside */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    width: 100%; /* Full width */
    max-width: 1200px; /* Ensure a max width on large screens */
    text-align: center; /* Center the text */
}

/* Child Content Styling */
.whychooser h4, 
.whychooser p, 
.whychooser .carousel-container {
    margin: 20px 0; /* Add spacing between child elements */
}

/* Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 items per row on desktop */
    gap: 20px; /* Space between items */
    padding: 20px;
    justify-items: center; /* Center items horizontally */
    justify-content: center; /* Ensure grid is centered */
  }
  
  
  /* Item Cards */
  .item {
    background: #fff;
    text-align: center;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: all 0.3s ease;
  }
  
  .item:hover {
    background: #388E3C;
    color: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
  }
  
  .item h6 {
    color: #2f2f2f;
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: bold;
  }
  
  .item p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #333;
  }
  
  .item:hover h6, .item:hover p {
    color: #fff;
  }
  
  /* Icon Styling */
  .item .icon {
    font-size: 40px;
    margin-bottom: 20px;
    color: #388E3C;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
  }
  
  .item .feature_box_col_one {
    background: rgba(255, 193, 7, 0.2);
    color: #FFC107;
  }
  
  .item .feature_box_col_two {
    background: rgba(220, 53, 69, 0.2);
    color: #DC3545;
  }
  
  .item .feature_box_col_three {
    background: rgba(40, 167, 69, 0.2);
    color: #28A745;
  }
  
  .item .feature_box_col_four {
    background: rgba(0, 123, 255, 0.2);
    color: #007BFF;
  }
  
  .item .feature_box_col_five {
    background: rgba(138, 43, 226, 0.2);
    color: #8A2BE2;
  }
  
  .item .feature_box_col_six {
    background: rgba(108, 117, 125, 0.2);
    color: #6C757D;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .grid-container {
      grid-template-columns: 1fr; /* Single column on smaller screens */
    }
  }
  .weoffer {
    background: url('images/pngtree-black-road-background-material-picture-image_1653541.jpg') no-repeat center center/cover; /* Cool background image */
    padding: 40px 20px; /* Ensure padding for the section */
    position: relative;
    z-index: 2; /* Ensure it sits above other sections */
    border-radius: 10px; /* Add rounded corners for a lifted effect */
}
.container {
    width: 500px;
    min-height: 315px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 30px;
    overflow: hidden;
  }
/* Swipe Indicator */
.swipe-indicator {
    text-align: center;
    margin-top: 0px;
    margin-bottom: -40px;
    color: #a3a3a3;
    font-size: 0.9em;
  }
  /* Industry Section */
.industry-section-12345 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url(images/pngtree-black-road-background-material-picture-image_1653541.jpg) no-repeat center center/cover;
    padding: 0;
    border-bottom: 1px solid #dcdcdc;
    position: relative;
    overflow: hidden; /* Prevent horizontal overflow */
    border-top: 2px solid #dcdcdc; /* Subtle top border */
  }
  
  /* Swipe Indicator */
.swipe-indicator-12345 {
    font-size: 0.9rem;
    color: #333; /* Visible text color */
    margin-bottom: 15px;
    position: absolute; /* Absolute positioning to move it */
    top: 10px; /* Position above the container content */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for true center alignment */
    z-index: 2; /* Place it above other content */
}

  
  /* Industry Buttons Wrapper */
  .industry-buttons-12345 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    position: relative;
  }
  
  /* Previous and Next Buttons */
  .prev-12345,
  .next-12345 {
    background-color: #4caf50; /* Green button background */
    color: white; /* White text */
    border: none;
    font-size: 18px;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for visibility */
    transition: background-color 0.3s ease;
    z-index: 10;
  }
  
  .prev-12345:hover,
  .next-12345:hover {
    background-color: #45a049; /* Slightly darker green on hover */
  }
  
  .prev-12345 {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .next-12345 {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .industry-container-12345 {
    display: flex;
    background: rgba(255, 255, 255, 0.85); /* Transparent white background */
    gap: 20px; /* Space between cards */
    border-radius: 10px; /* Rounded corners */
    padding: 40px 20px 20px; /* Add top padding for swipe indicator */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    margin: 20px; /* Space around the content */
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Enable horizontal scroll */
    scroll-behavior: smooth; /* Smooth scrolling effect */
    scroll-snap-type: x mandatory; /* Snap to each card on scroll */
    width: 100%; /* Full width */
    position: relative; /* Make it the context for swipe-indicator-12345 */
}

  /* Industry Option Cards */
  .industry-option-12345 {
    flex: 0 0 30%; /* Divide evenly across the section */
    max-width: 300px; /* Maintain a fixed size */
    margin: 0 10px; /* Spacing between cards */
    border-radius: 10px;
    margin-left: 40px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  
  .industry-option-12345:hover {
    transform: scale(1.05); /* Slight zoom on hover */
  }
  
  /* Industry Images */
  .industry-option-12345 img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid #ddd; /* Border for separation */
  }
  
  /* Buttons Under Each Card */
  .industry-button-12345 {
    background-color: #4caf50; /* Green button */
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    border-radius: 0 0 10px 10px; /* Match the card's rounded corners */
    transition: background-color 0.3s ease;
  }
  
  .industry-button-12345:hover {
    background-color: #45a049; /* Slightly darker green */
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .industry-buttons-12345 {
      flex-wrap: nowrap; /* Keep the items on one row */
      overflow-x: hidden;
    }
  
    .industry-container-12345 {
      flex-wrap: nowrap; /* No wrapping */
      transform: translateX(0); /* Reset position */
    }
  
    .industry-option-12345 {
      flex: 0 0 40%; /* Take full width */
      max-width: none;
      margin: 0; /* Remove margins for proper alignment */
    }
  }
  


  /* exam room */
/* Mobile Adjustments */
@media (max-width: 768px) {
    .exam-room-section {
      flex-direction: column; /* Stack content and image vertically */
      align-items: center; /* Center align everything */
      padding: 15px; /* Reduce padding */
   
    }
  
    .exam-room-content {
      flex: 1; /* Take full width */
      max-width: 100%; /* Remove width restriction */
      padding: 10px; /* Reduce padding for mobile */
      text-align: center; /* Center align text */
      background: rgba(255, 255, 255, 0.9); /* Transparent white backing */
      border-radius: 10px; /* Rounded corners */
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Add a subtle shadow */
    }
  
    .image-container {
      flex: 1; /* Adjust container to take full width */
      max-width: 100%; /* Ensure full width on mobile */
      margin: 20px auto; /* Center the image on smaller screens */
    }
  
    .exam-room-image {
      width: 100%; /* Full width for the image */
      height: auto; /* Maintain aspect ratio */
      border-width: 3px; /* Slightly thinner border for mobile */
    }
  
    .enter-button {
      top: 50%; /* Keep button centered */
      left: 50%; /* Keep button centered */
      transform: translate(-50%, -50%); /* Adjust button positioning */
      font-size: 14px; /* Slightly smaller button text for mobile */
      padding: 8px 16px; /* Adjust button padding */
    }
    .exam-room-image {
        width: 100%; /* Make image responsive */
        height: auto; /* Maintain aspect ratio */
        border: 5px solid black; /* Black border around image */
        transition: filter 0.3s ease-in-out; /* Smooth grayscale effect */
      }
      
    /* Hover Effects */
    .image-container:hover .exam-room-image {
        filter: grayscale(40%); /* Apply 40% grayscale when hovered */
      }
      
      .image-container:hover .enter-button {
        background-color: red; /* Highlight button on hover */
        color: white; /* Ensure button text remains white */
      }
      
      
    /* Enter Button */
    .enter-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Center button over image */
        border: 1px solid white; /* Thin white border */
        background-color: transparent; /* Transparent background */
        color: white; /* White text */
        padding: 10px 20px; /* Button padding */
        font-size: 16px; /* Font size */
        cursor: pointer; /* Pointer cursor on hover */
        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth button highlight */
      }
      
     /* Exam Room Image */
    .image-container {
        position: relative; /* Needed for positioning the button */
        flex: 1; /* Adjusts width dynamically */
        max-width: 90%; /* Restrict image width */
        margin: 20px auto; /* Center image on smaller screens */
      }
      .exam-room-section {
        display: flex;
        flex-wrap: wrap; /* Allows wrapping on smaller screens */
        justify-content: space-between; /* Space between content and image */
        align-items: flex-start; /* Align items at the top */
        padding: 20px; /* Adds padding around the section */
        background: url('images/desk.jpg') no-repeat center center/cover; /* Background image */
        overflow: hidden; /* Prevent horizontal scrollbars */
        width: 100%; /* Ensure full width */
        box-shadow: inset 0 10px 15px rgba(0, 0, 0, 0.15), inset 0 -10px 15px rgba(0, 0, 0, 0.25); /* Inset shadow for "inside" effect */
        border-top: 1px solid #dcdcdc; /* Add a subtle divider */
      }
  }
  
@media (min-width: 769px) {
/* Exam Room Section */
.exam-room-section {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    justify-content: space-between; /* Space between content and image */
    align-items: flex-start; /* Align items at the top */
    padding: 20px; /* Adds padding around the section */
    background: url('images/desk.jpg') no-repeat center center/cover; /* Background image */
    overflow: hidden; /* Prevent horizontal scrollbars */
    border-top: 1px solid #dcdcdc; /* Add a subtle divider */
    box-shadow: inset 0 10px 15px rgba(0, 0, 0, 0.15), inset 0 -10px 15px rgba(0, 0, 0, 0.25); /* Inset shadow for "inside" effect */
    width: 100%; /* Ensure full width */
  }
  
/* Exam Room Content */
.exam-room-content {
    flex: 1; /* Takes available space */
    max-width: 45%; /* Restrict content width on larger screens */
    padding: 20px; /* Adds padding inside content */
    background: rgba(255, 255, 255, 0.9); /* Transparent white backing */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Add a subtle shadow */
  }
  
  
  .exam-room-image {
    width: 100%; /* Make image responsive */
    height: auto; /* Maintain aspect ratio */
    border: 5px solid black; /* Black border around image */
    transition: filter 0.3s ease-in-out; /* Smooth grayscale effect */
  }
  
/* Hover Effects */
.image-container:hover .exam-room-image {
    filter: grayscale(40%); /* Apply 40% grayscale when hovered */
  }
  
  .image-container:hover .enter-button {
    background-color: red; /* Highlight button on hover */
    color: white; /* Ensure button text remains white */
  }
  
  
/* Enter Button */
.enter-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center button over image */
    border: 1px solid white; /* Thin white border */
    background-color: transparent; /* Transparent background */
    color: white; /* White text */
    padding: 10px 20px; /* Button padding */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth button highlight */
  }
  
 /* Exam Room Image */
.image-container {
    position: relative; /* Needed for positioning the button */
    flex: 1; /* Adjusts width dynamically */
    max-width: 40%; /* Restrict image width */
    margin: 20px auto; /* Center image on smaller screens */
  }
}
/* Section Container */
.progress-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    background-color: #f8f9fa; /* Subtle off-white for contrast */
    border-top: 1px solid #dcdcdc; /* Add a subtle divider */
    border-bottom: 2px solid #000000; /* Add a bottom divider */
    width: 100%; /* Full width */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15); /* Subtle shadow at the bottom */
    box-sizing: border-box;
    margin-bottom: -20px;
  }
  
  /* Content Layout */
  .progress-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto; /* Center content */
  }
  
  /* Image Container */
  .custom-image-container {
    position: relative;
    width: 350px;
    max-width: 100%; /* Make it responsive */
    margin: 0 auto; /* Center image */
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2); /* Prominent shadow below the image */
  }
  
  .custom-image {
    width: 100%;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out;
  }
  
  .custom-image:hover {
    transform: scale(1.05); /* Slight zoom on hover */
  }
  
  /* Join Free Button */
  .join-free-button {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: #228B22; /* Green aligned with your theme */
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  
  .join-free-button:hover {
    background: #32a852; /* Slightly lighter green on hover */
  }
  
  /* Information Section */
  .progress-info {
    flex: 1;
    text-align: left;
    max-width: 600px;
    padding: 20px;
  }
  .heading {
    background-color: rgba(211, 211, 211, 0.9); /* Light grey with slight transparency */
    border-radius: 20px 20px 0 0; /* Rounded edges only at the top */
    width: 100%; /* Full width */
    height: 150px;
    position: absolute;
    bottom: 0; /* Moves the banner to the bottom of .realheading */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 3D shadow effect */
    border-bottom: 3px solid #999; /* Slight bottom border for style */
    box-sizing: border-box; /* Ensures padding does not affect width */
    padding: 0; /* Remove extra padding from the container */
}
  
  .progress-heading {
    font-size: 2rem;
    color: #228B22; /* Match green theme */
    margin-bottom: 20px;
  }
  
  .benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .benefits-list li {
    font-size: 1.1rem;
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
    color: #4b5563; /* Neutral dark gray */
    line-height: 1.6;
    word-wrap: break-word; /* Prevent text overflow */
  }
  
  .benefits-list li:before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0.2em; /* Adjust to vertically align checkmark */
    color: #228B22; /* Green checkmark */
    font-size: 1.2rem;
  }
  
  /* Learn More Button */
  .learn-more-button {
    margin-top: 20px;
    padding: 12px 20px;
    background: #000; /* Black for a modern look */
    color: white;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  .learn-more-button:hover {
    background: #333; /* Slightly lighter black on hover */
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .progress-content {
      flex-direction: column; /* Stack content vertically on mobile */
      text-align: center;
    }
  
    .custom-image-container {
      width: 100%;
      max-width: 300px;
    }
  
    .progress-info {
      padding: 10px;
    }
  
    .benefits-list li {
      padding-left: 25px; /* Adjust spacing for mobile */
    }
  
    .benefits-list li:before {
      left: 5px; /* Align the checkmark closer on mobile */
    }
  }
/* Adjust Title for Desktop View */
@media (min-width: 769px) {
    .progress-section {
      display: flex;
      flex-direction: column; /* Stack title and content vertically */
      align-items: center; /* Center-align all child elements */
      text-align: center; /* Center-align text */
      padding: 40px 20px; /* Add spacing around the section */
    }
  
    .progress-section .sectionheadh4 {
      font-size: 2.5rem; /* Make the title stand out */
      font-weight: bold;
      color: #228B22; /* Green color to match your theme */
      margin-bottom: 30px; /* Add space below the title */
      text-align: center; /* Center-align the text */
      width: 100%; /* Ensure it spans the full width */
    }
  
    .progress-content {
      display: flex;
      flex-wrap: wrap; /* Ensure wrapping if necessary */
      align-items: center;
      justify-content: center; /* Center the content */
      gap: 30px; /* Add space between image and info */
      max-width: 1200px; /* Limit the width for large screens */
      margin: 0 auto; /* Center the content container */
    }
  }
    /* Subscription Section Styling */
    .subscribe-section {
        position: relative;
        background: url('images/securrr.jpg') no-repeat center center/cover; /* Background image */
        padding: 40px 20px;
        color: #fff;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-top: 2px solid rgba(255, 255, 255, 0.3); /* Subtle top border */
        box-shadow: inset 0 10px 15px rgba(0, 0, 0, 0.15), inset 0 -10px 15px rgba(0, 0, 0, 0.25); /* Inset shadow for "inside" effect */
        margin-top: 0; /* Align properly with other sections */
        z-index: 1;
        overflow: hidden; /* Prevent content spill */
    }
    
    /* Adjust the gradient effects for the "inside" look */
    .subscribe-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)); /* Shadow gradient to blend with the section above */
        z-index: -1;
    }
    
    .subscribe-section::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)); /* Shadow gradient to blend with the section below */
        z-index: -1;
    }
    
    /* Responsive Design for Mobile */
    @media (max-width: 768px) {
        .subscribe-section {
            padding: 30px 15px;
            box-shadow: inset 0 8px 12px rgba(0, 0, 0, 0.15), inset 0 -8px 12px rgba(0, 0, 0, 0.2); /* Adjust inset shadow for mobile */

        }
    }
    
  .subscribe-content {
    max-width: 600px;
    background: rgba(0, 0, 0, 0.6); /* Dark overlay for better text readability */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  
  .subscribe-description {
    font-size: 1rem;
    margin-bottom: 20px;
    line-height: 1.5;
  }
  
  .subscribe-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  
  .email-input {
    flex: 1;
    padding: 15px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    max-width: 350px;
    width: 100%;
  }
  
  .email-input:focus {
    border-color: #4caf50; /* Highlighted border on focus */
  }
  
  .subscribe-button {
    background-color: #4caf50;
    color: white;
    padding: 15px 25px;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .subscribe-button:hover {
    background-color: #45a049;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .subscribe-content {
      padding: 20px;
    }
  
    .subscribe-description {
      font-size: 0.9rem;
    }
  
    .email-input,
    .subscribe-button {
      width: 100%;
    }
  }
  .pather {
    border-bottom: solid 1px #dcdcdc;
    border-top: solid 1px #dcdcdc;
  }
  .career-section-84 {
    background: url("images/pngtree-black-road-background-material-picture-image_1653541.jpg") center/cover no-repeat;
    padding: 20px;
    border-radius: 10px;
    max-width: 100%;
    margin: 0 auto;
  }
  
  .career-wrapper-84 {
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
  }
  
  .career-active-tab-84 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px;
    gap: 20px;
  }
  
  .career-image-84 img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
  }
  
  
  .career-content-84 {
    flex: 1;
    color: #333;
  }
  
  .career-title-84 {
    font-size: 1.8rem;
    color: #2c8d3a;
    margin-bottom: 10px;
  }
  
  .career-salary-84 {
    font-size: 1rem;
    color: #444;
    margin-bottom: 15px;
  }
  
  .career-description-84 {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 15px;
  }
  
  .career-btn-84 {
    background: #2c8d3a;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .career-btn-84:hover {
    background: #237a2f;
  }
  
  .career-carousel-84 {
    margin-top: 20px;
    padding: 10px 0;
  }
  
  .career-thumbnails-84 {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .career-thumbnails-84 li {
    text-align: center;
    min-width: 120px;
    cursor: pointer;
  }
  
  .career-thumbnails-84 li img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 5px;
  }
  
  .career-thumbnails-84 li span {
    font-size: 0.9rem;
    color: #333;
  }
  
  @media (max-width: 768px) {
    .career-active-tab-84 {
      flex-direction: column;
      text-align: center;
    }
  
    .career-image-84 img {
      max-width: 100%;
    }
  
    .career-content-84 {
      margin-top: 15px;
    }
  
    .career-title-84 {
      font-size: 1.5rem;
    }
  
    .career-salary-84 {
      font-size: 0.9rem;
    }
  
    .career-description-84 {
      display: none; /* Hide description on mobile */
    }
  
    .career-btn-84 {
      width: 100%;
    }
  }
.career-thumbnails-84 li.active img {
  border: 2px solid #2c8d3a;
  transform: scale(1.05);
  transition: all 0.3s ease;
}
  /* General Section Styles */
section {
    width: 100%;
    margin: 20px 0;
    padding: 40px 5%;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
  }
  .hero-section-mission {
    position: absolute; /* Position it at the bottom of the image */
    bottom: 0; /* Align to the bottom */
    left: 0;
    width: 100%;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.8); /* Slightly transparent white background */
    border-top-left-radius: 10px; /* Rounded top corners */
    border-top-right-radius: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* Subtle bottom border */
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* Shadow for depth */
    overflow: hidden;
    z-index: 2; /* Ensure it is above the image */
}
.backing {
  padding: 2px 0; /* Adjust padding for the height of the background */
  z-index: 1; /* Ensure it stays below .page-heading */
  background: url('images/brck.jpg') no-repeat center center/cover; /* Cool background image */
}
  /* Transparent Backing for Content */
  .content-container-42, .content-container-58, .content-container-67, .content-container-91 {
    background: rgba(255, 255, 255, 0.85);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
  }
  
  /* Shared Section Backgrounds */
  .security-development-42 {
    background-image: url('images/buildingsec.png');
  }
  
  .tech-development-58 {
    background-image: url('images/techback.png');
  }
  
  .healthcare-development-67 {
    background-image: url('images/osptl.png');
  }
  
  .empower-learning-91 {
    background: url('images/pngtree-black-road-background-material-picture-image_1653541.jpg') no-repeat center center/cover; /* Cool background image */
  margin-bottom:0px;
}
  
  /* Headings */
  h2, h3, h4 {
    margin-bottom: 20px;
    text-align: center;
    font-size: 2rem;
    color: #2c3e50;
  }
  
  h4.sectionheadh4-42, h4.sectionheadh4-58, h4.sectionheadh4-67, h4.sectionheadh4-91 {
    text-align: center;
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 10px;
  }
  
  /* Tables */
  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }
  
  th, td {
    text-align: left;
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  th {
    background: #2c3e50;
    color: white;
  }
  
  /* Images */
  .image-carousel-42 img, .image-gallery-67 img, .carousel-item img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
    max-height: 300px;
    object-fit: cover;
  }
  
  /* Buttons */
  .view-more-btn-67 {
    display: inline-block;
    padding: 10px 15px;
    background: #000000;
    color: white;
    text-align: center;
    border: none;
    margin-bottom: 10px;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
  }
  .gold-star {
    color: gold;
    margin-right: 8px;
  }
  .view-more-btn-68 {
    display: inline-block;
    padding: 10px 15px;
    background: green;
    color: white;
    max-height: 40px;
    text-align: center;
    border: none;
    margin-bottom: 10px;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
  }
  button:hover {
    background: #45a049;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .content-container-42, .content-container-58, .content-container-67, .content-container-91 {
      flex-direction: column;
      padding: 5%;
    }
  
    .carousel-item img, .image-carousel-42 img, .image-gallery-67 img {
      height: auto;
      max-height: none;
    }
  }
  
  /* Image Sliders */
  .image-carousel-42, .image-gallery-67, .carousel-58, .image-slider-91 {
    display: flex;
    overflow-x: auto;
    gap: 2%;
    scroll-behavior: smooth;
    width: 100%;
  }
  
  .image-carousel-42 img, .image-gallery-67 img, .carousel-item img {
    flex: 0 0 30%;
  }
  .image-slider-91 img {
    width: 120px;
    height: 120px;
    gap:30px;
display: block;
margin: 0 auto;
  }
  /* Tips Section */
  .tips-list-67 ul, .tips-section-91 ul {
    padding: 0;
    list-style-type: none;
  }
  
  .tips-list-67 li, .tips-section-91 li {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
  }
  
  /* Overflow Prevention */
  html, body {
    overflow-x: hidden;
  }
  /* Header Styles */
.header-78 {
  background-color: #f0f0f0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
}

.header-container-24 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-45 {
  height: 90px;
  width: 200px;
}

.header-title-91 {
  font-size: 24px;
  color: black;
  text-align: right;
}

/* Navigation Styles */
.nav-82 {
  margin-top: 10px;
  border-top: 1px solid #ddd;
  padding-top: 10px;
}

.document-links-37 {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0;
  margin: 0;
}

.document-links-37 li {
  margin: 0;
}

.link-92,
.link-14,
.link-65,
.link-87 {
  text-decoration: none;
  font-weight: bold;
  color: green;
}

.link-92:hover,
.link-14:hover,
.link-65:hover,
.link-87:hover {
  color: red;
}

/* Content Section Styles */
.content-section-28 {
  flex-grow: 1;
  overflow-y: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  padding: 20px;
}

.content-container-56 {
  width: 80%;
  max-width: 800px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background-color: white;
  overflow-y: auto;
  max-height: 60vh; /* Content section scrolls independently */
}

.content-title-49 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.content-text-94 {
  line-height: 1.6;
  text-align: justify;
}
/* Green text and underlined styles for specific links */
.link-terms, .link-privacy {
  color: green; /* Green text */
  text-decoration: underline; /* Underline the text */
}

.link-terms:hover, .link-privacy:hover {
  color: darkgreen; /* Darker green on hover for better visibility */
  text-decoration: none; /* Remove underline on hover (optional) */
}
/* General Body Styling */


/* Career Development Paths Title */
#career-title-32 {
  text-align: center;
  font-size: 2rem;
  margin: 20px 0;
  color: #333;
}

/* Security Industry Heading Integration */
.carousel-container48 {
  margin: 20px auto;
  max-width: 90%;
  overflow: hidden;
  position: relative;
  background-color: rgba(0, 0, 0, 0.8); /* Shared transparent background */
  border: 1px solid #ddd; /* Shared border */
  border-radius: 10px; /* Shared rounded corners */
  padding: 15px; /* Padding for spacing */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Keep the heading at the top within the container */
.carousel-container48 .title-11 {
  position: relative; /* Position within the container */
  text-align: center; /* Center the heading text */
  font-size: 2rem; /* Adjust font size */
  font-weight: bold; /* Bold text */
  color: #333; /* Darker text for contrast */
  text-transform: uppercase; /* Optional: Uppercase text */
  letter-spacing: 2px; /* Add spacing between letters */
  margin-bottom: 20px; /* Spacing below the heading */
  padding: 10px; /* Add padding around the text */
}
.title-11 {
  position: relative; /* Position within the container */
  text-align: center; /* Center the heading text */
  font-size: 2rem; /* Adjust font size */
  font-weight: bold; /* Bold text */
  color: #ffffff; /* Darker text for contrast */
  text-transform: uppercase; /* Optional: Uppercase text */
  letter-spacing: 2px; /* Add spacing between letters */
  margin-bottom: 20px; /* Spacing below the heading */
  padding: 10px; /* Add padding around the text */
}
/* Carousel Item */
.carousel-item48 {
  display: none; /* Only display active item */
  flex-direction: column;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 1); /* White with 80% opacity */

}
/* Styling for Practice Exams and View More Buttons */
.practice-exam-btn-66, .view-more-btn-13 {
  background-color: #498a2b; /* Muted red */
  color: white; /* White text for contrast */
  border: 1px solid #498a2b; /* Darker red border */
  padding: 8px 15px; /* Maintain compact size */
  font-size: 0.9rem; /* Keep text size small */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  text-align: center; /* Center text */
  display: inline-block; /* Consistent button layout */
  margin-right: 10px; /* Small gap between buttons */
  text-decoration: none; /* Remove underline for links */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
}

/* Hover Effect */
.practice-exam-btn-66:hover, .view-more-btn-13:hover {
  background-color: #bc4c4c; /* Slightly darker red on hover */
  border-color: #892e2e; /* Darker border on hover */
  transform: scale(1.05); /* Slightly enlarge button */
}

/* Show Active Item */
.carousel-item48.active {
  display: flex;
}
/* Style for the Next and Previous Buttons */
.carousel-prev, .carousel-next {
  background-color: #1c8a2d; /* Button background color */
  color: #ffffff; /* Arrow color */
  margin-top: 10px;
  border: none; /* Remove border */
  border-radius: 5px; /* Rounded corners */
  padding: 10px 15px; /* Button size */
  cursor: pointer; /* Pointer cursor */
  font-size: 1rem; /* Font size */
  display: inline-flex; /* Keep the button inline */
  align-items: center; /* Center content vertically */
  justify-content: space-between; /* Center content horizontally */
  flex-shrink: 0; /* Prevent buttons from shrinking */
}
/* Position Next Button */
.carousel-next {
  position: relative; /* Maintain relative positioning */
  float: right; /* Push the button to the far right */
  margin-left: auto; /* Add spacing to separate from other content */
}
/* Hover Effects */
.carousel-next:hover, .carousel-prev:hover {
  background-color: #b30000; /* Slightly brighter red on hover */
  transition: background-color 0.3s ease; /* Smooth transition */
}

/* Adjust Arrow Positioning on Smaller Screens */
@media (max-width: 768px) {
  .carousel-next, .carousel-prev {
    font-size: 0.9rem; /* Smaller font size */
    padding: 8px 12px; /* Adjust padding for smaller devices */
  }
}

/* Carousel Image with Picture Frame Border */
.carousel-image-78 {
  border-radius: 8px; /* Keeps rounded corners */
  width: 50%; /* Maintains original width */
  max-height: 300px; /* Maximum height */
  max-width: 300px; /* Maximum width */
  height: auto; /* Ensures proper aspect ratio */
  margin-bottom: 15px; /* Space below the image */
  border: 5px solid #000000; /* Solid black border (adjust thickness/color as needed) */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a shadow for a 3D effect */
  background-color: #ffffff; /* Background color for the padding space (white frame) */
}


/* Carousel Image */
.carousel-image-92 {
  border-radius: 8px;
width: 50%;
max-height: 300px;
border: 5px solid #000000; /* Solid black border (adjust thickness/color as needed) */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a shadow for a 3D effect */
  background-color: #ffffff; /* Background color for the padding space (white frame) */
height: auto;
  margin-bottom: 15px;
}


/* Carousel Image */
.carousel-image-94 {
  border-radius: 8px;
width: 40%;
min-height: 150px;
max-height: 300px;
border: 5px solid #000000; /* Solid black border (adjust thickness/color as needed) */
  box-shadow: 0 4px 8px #00000033; /* Adds a shadow for a 3D effect */
  background-color: #ffffff; /* Background color for the padding space (white frame) */
  margin-bottom: 15px;
}

/* Job Details */
.carousel-details {
  text-align: center;
  width: 100%;
}

/* Job Title */
.job-title-27, .job-title-28, .job-title-29, .job-title-30,
.job-title-31, .job-title-32, .job-title-33, .job-title-34,
.job-title-35, .job-title-36 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 10px;
}

/* Annual Salary */
.annual-salary-83, .annual-salary-84, .annual-salary-85,
.annual-salary-86, .annual-salary-87, .annual-salary-88,
.annual-salary-89, .annual-salary-90, .annual-salary-91,
.annual-salary-92 {
  font-size: 1rem;
  color: #555;
  margin-bottom: 15px;
}

/* Job Duties List */
.job-duties-91, .job-duties-90, .job-duties-92, .job-duties-93, .job-duties-94,
.job-duties-95, .job-duties-96, .job-duties-97, .job-duties-98,
.job-duties-99, .job-duties-100 {
  text-align: left;
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 15px;
}

/* Certifications Title and List */
.job-certifications-15, .job-certifications-16, .job-certifications-17,
.job-certifications-18, .job-certifications-19, .job-certifications-20,
.job-certifications-21, .job-certifications-22, .job-certifications-23,
.job-certifications-24 {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 10px;
}


/* Responsiveness */
@media (max-width: 768px) {
  .carousel-details {
    text-align: center;
  }


}
.title-11 {
  text-align: center; /* Centers the text */
  font-size: 2rem; /* Adjusts the font size */
  font-weight: bold; /* Makes it bold */
  margin-bottom: 20px; /* Adds spacing below */
  color: #ffffff; /* Darker color for contrast */
  text-transform: uppercase; /* Optional: Makes text uppercase for emphasis */
  letter-spacing: 2px; /* Adds spacing between letters */
  border-bottom: 2px solid #4CAF50; /* Optional: Adds a green underline */
  display: block; /* Ensures it takes up full width */
}
/* Page Heading Section */
.page-heading {
  background: rgba(0, 0, 0, 0.9); /* Slightly transparent black background */
  color: #ffffff; /* Dark green text */
  padding: 30px;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  position: relative;
}

.page-heading h1 {
  font-family: 'Montserrat', sans-serif; /* Modern, clean font */
  font-size: 3em;
  font-weight: 700;
  color: rgb(255, 255, 255); /* White to contrast with the gradient */
  letter-spacing: 2px; /* Slight spacing for a sleek look */
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.page-heading:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  /* background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 60%); */
  transform: translate(-50%, -50%);
  z-index: 0;
  filter: blur(20px); /* Soft blur for a glow effect */
}

.page-heading h1::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: #00ff00;
  box-shadow: 0 0 10px #333333, 0 0 20px #535353; /* Adds a neon-like shadow */
  border-radius: 2px;
}
#title99 {
  color:white;
}
@media (max-width: 768px) {
  .page-heading h1 {
      font-size: 2.2em; /* Adjust font size for smaller screens */
  }
  .page-heading:before {
      width: 100px;
      height: 100px;
  }
}
.h1ers {
  font-size: 2rem; /* Adjust size as needed */
  font-weight: bold;
  text-align: center;
  display: block;
  margin: 0 auto;
  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 */
}
.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-content {
  display: flex;
  flex-wrap: wrap; /* Ensures responsive behavior */
  gap: 20px; /* Space between columns */
}

 .background {
    padding: 40px 20px;
    border-radius: 10px;
      max-width: 100vw;
  }
  @media (max-width: 768px) {
    .feedback-left {
      width: 90%; /* Responsive width */
      max-width: 350px; /* Prevent it from growing too large */
      margin: 0 auto; /* Center align */
      box-sizing: border-box; /* Include padding and border in width calculation */
    }
    .text-section {
      width: 100%; /* Ensure it fits within the viewport */
      margin: 0 auto; /* Center align */
      box-sizing: border-box; /* Prevent overflow from padding */
      padding: 10px; /* Add some padding for readability */
    }
  
    .background-content {
      width: 100%; /* Make sure it doesn't overflow */
      max-width: 100%; /* Enforce responsiveness */
      box-sizing: border-box; /* Avoid padding pushing it beyond the viewport */
      overflow-x: hidden; /* Prevent any unexpected horizontal scrolling */
    }
      .unique-img-89 {
      height: 150px;
      width: 80%;
      margin-bottom: 10px;
      margin-left: 30px;
          margin-top: -10px;
  }
  }
  .feedback-left {
    position: relative;
    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 */
  }
  #h1dun {
    text-align:  center;
  }
    /* 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: 90%;                  /* 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;
    }  
    .carousel-item-mission img {
      width: 380px;
      height: 300px;
      object-fit: cover; /* Ensures uniform size while maintaining aspect ratio */
      border-radius: 10px !important; /* Rounded corners */
      margin-bottom: 10px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    @media (max-width: 768px) {
            .carousel-item-mission img {
          width: 300px;
          height: 300px;
          object-fit: cover; /* Ensures uniform size while maintaining aspect ratio */
          border-radius: 10px !important; /* Rounded corners */
          margin-bottom: 10px;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
      }
      

      .cta-section-mission {
        background-color: #298040;
        color: white;
        text-align: center;
        padding: 8px 20px;
        width: 100%;

        height: auto; /* Remove fixed height for better spacing */
        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 */
}
.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 */
}

.h1er {
  color: rgb(255, 255, 255); /* Dark green text */
  line-height: 1.2;
  letter-spacing: 2px;
  font-size: 2.1rem; /* Adjust size for heading */
  font-weight: 700;
  margin: 0; /* Remove margin for better alignment */
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.6); /* Subtle text shadow */
}

#p1ers {
  color: white;
}
.plus-sign {
  color: #4bcc32; /* Bright green for the '+' */
  font-weight: 700; /* Matches the bold style */
  font-size: 1.3em;
  margin-top: 3px;
  margin-left: -5px;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.8); /* Shadow for consistency */
}

.viewsite {
  display: inline-block;
  color: #1f7a1f; /* Green text */
  padding: 5px 20px;
  text-decoration: none;
  border: 2px solid #1f7a1f; /* Green border */
  border-radius: 5px;
  margin-top: -8px;
  background-color: white;
  position: relative;
  text-align: right;
  font-size: 16px;
  font-weight: bold;
  margin-right: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.viewsite:hover {
  background-color: #f0f0f0; /* Slight grey background on hover */
  color: #155c15; /* Darker green text on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow on hover */
  border-color: #155c15; /* Darker green border on hover */
}

.viewsite:active {
  background-color: #e8e8e8; /* Slightly darker grey when clicked */
  color: #0d4b0d; /* Even darker green text when active */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* Pressed effect */
  border-color: #0d4b0d; /* Dark green border for active state */
}
.p
.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;
  }
  
@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 */
  }
}
.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;
}

.purpose-section-mission {
  padding: 40px 20px;
  background: hsl(0, 0%, 100%); /* Neutral off-white background */
  text-align: center;
  place-items: center;
  margin-bottom: 0px;
  margin-top: 0px;
}

.purpose-container {
  max-width: 1200px;
  text-align: center;
  margin: 0 auto;
  margin-top: 0px;
  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 */
}
.icon-box:hover {
  transform: translateY(-10px); /* Raises the box slightly */
}
.icon-circle:hover {
  box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00; /* Green glow */
  transform: scale(1.1); /* Slightly increases the circle size */
}
.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;
}
.hero-content-mission {
  margin-left: 15px;
  
}
#ourmissioner2 {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); /* Adds a subtle shadow at the bottom */
  z-index: 1; /* Ensure it appears above other content */
  max-height: 600px;
  object-fit: cover;
}
@media (max-width: 768px) { 
  #ourmissioner {
    height: 800px;
    position: relative;
  }
  #ourmissioner2 {
    height: auto;
    position: relative;
  }
  #ourmissioner img {
    object-fit: cover; /* Ensure the image covers the container */
    object-position: center; /* Center the image horizontally and vertically */
    width: 100%; /* Ensure full width */
    height: 100%; /* Stretch to fill the container */
  }
  #ourmissioner2 img {
    object-fit: contain; /* Ensure the image covers the container */
    object-position: center; /* Center the image horizontally and vertically */
    width: 100%; /* Ensure full width */
    height: auto; /* Stretch to fill the container */
  }
}
@media (min-width: 769px) {
  #ourmissioner2 {
    max-height: 600px; /* Ensure the height does not exceed 600px */
    width: 100%; /* Make the banner span the full width */
    position: relative; /* Keep positioning relative for flexibility */
    overflow: hidden; /* Hide any overflowing parts of the image */
  }

  #ourmissioner2 img {
    width: 100%; /* Ensure the image spans the full width */
    height: 100%; /* Stretch the image to cover the height */
    object-fit: cover; /* Cover the container without distortion */
    object-position: center; /* Keep the image centered horizontally and vertically */
  }
}

#ourmissioner {
  max-height: 650px;
  position: relative; /* Make the container the positioning context */

}
#ourmissioner img {
  object-fit: cover; /* Ensure the image covers the container */
  object-position: center; /* Center the image horizontally and vertically */
  width: 100%; /* Ensure full width */
  height: 100%; /* Stretch to fill the container */
}
#superhero {
  height: 100px;
  width: 100px;
  text-align: right;
}
.arnold {
  display: flex; /* Enable flexbox */
  justify-content: flex-end; /* Align content to the right */
}
/* General Section Styling */

.section-title-23 {
  margin-top: 15px;
}
.section-title-93 {
  color: grey;
}
.section-title-42 {
  margin-top: 15px;
}
/* Section Titles */
[class^="section-title"] {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: #333;
  margin-bottom: 15px;
}

/* Roadmap Styling */
.roadmap-container-23 {
  background-color: #e6f7e6;
  border: 2px solid #29c24f;
}

.timeline-23 {
  list-style: none;
  padding: 0 10px;
  text-align: center;
}
.timeline-container-91 {
  border: 2px solid black; 
  border-radius: 5px;
}
.roadmaper {
  height: 200px;
  width: 60%;
  display: block;
  margin: 0 auto;
  margin-bottom: 30px;
}
.timeline-wrapper-23 {
  display: flex; 
  flex-direction: column; 
  align-items: center; /* Horizontally centers the entire content */
  justify-content: center; /* Vertically centers the content (optional for full-page centering) */
}
.timeline-23 li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.timeline-step-23 {
  font-weight: bold;
  font-size: 1.2rem;
  color: #29c24f;
  margin-right: 10px;
}

.roadmap-btn-23 {
  display: block;
  margin: 10px auto;
  padding: 10px 20px;
  background-color: #29c24f;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.roadmap-btn-23:hover {
  background-color: #1e8b39;
}

/* Habits Section */
.habits-container-42 img {
  max-width: 100%;
  border-radius: 8px;
  margin-top: 10px;
}
.habits-container-42 {
  border: 2px solid black; /* Adds a solid black border with 2px thickness */
 }
.habits-list-42 {
  list-style: disc;
  margin-left: 20px;
  padding: 0 20px;
}

.section-title-31 {
  margin-top: 20px;
}
/* Carousel Styling */
.carousel-wrapper-74,
.tips-carousel-wrapper-67 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.tips-carousel-next-67 {
  background-color: green; /* Button background color */
  color: white; /* Text color */
  border: none; /* Removes default border */
  border-radius: 20px; /* Rounds the corners */
  padding: 8px 16px; /* Small padding for the button */
  font-size: 14px; /* Small font size */
  cursor: pointer; /* Changes cursor to pointer on hover */
  text-align: center; /* Ensures text is centered */
  display: block; /* Allows proper alignment */
  margin: 0 auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adds a slight shadow */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Add hover effect */
.tips-carousel-next-67:hover {
  background-color: darkred; /* Darker red on hover */
}

.carousel-item-67,
.carousel-item-74 {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.carousel-item-67.active,
.carousel-item-74.active {
  display: flex;
}

.retaining-info-container-67 {
  display: flex; /* Enables flexbox for alignment */
  background-color: #f9f9f9;
  flex-direction: column; /* Aligns children vertically */
  align-items: center; /* Centers all children horizontally */
  border: 2px solid black; /* Adds a black border around the entire section */
  padding: 20px; /* Adds spacing inside the section */
}

.carousel-image-74 {
  max-width: 300px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.carousel-image-67 {
  margin-bottom: 30px;
  width: 120px;
  margin-top: 0px;
  height: 150px;
  display: block;
  margin: 0 auto;
}
/* Modern Learning Grid */
.modern-learning-grid-74 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  border-bottom: solid 1px lightgray;
}

.modern-card-74 {
  background-color: rgba(0, 0, 0, 0.8); /* Black color with 50% transparency */
  padding: 15px;
  border: 2px solid rgba(255, 255, 255, 0.2); /* Subtle white border with slight transparency */
  border-radius: 8px;
  text-align: center;
  color: white; /* Ensure text is readable against a dark background */
}


.modern-card-74 h3 {
  font-size: 1.2rem;
  color: #ffffff;
  margin-bottom: 10px;
}
.section-description-91 {
  text-align: center;
  padding: 0 10px;
}
.modern-card-74 button {
  padding: 10px 15px;
  border: none;
  background-color: #29c24f;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.modern-card-74 button:hover {
  background-color: #1e8b39;
}

/* Table Styling */
.progress-table-31 {
  width: 100%;
  border-collapse: collapse;
}

.progress-table-31 th,
.progress-table-31 td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.progress-table-31 th {
  background-color: #29c24f;
  color: #fff;
}

/* Timeline Styling */
.timeline-steps-91 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.timeline-step-91 {
  padding: 15px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.section-title-33 {
  padding-top: 15px;
}
/* Quiz Section */
.quiz-container-48 {
  text-align: center;
  margin-top: 0;
  padding-top: 0;
  background-color: #e6f7e6;
  border: 2px solid #29c24f;
}

.start-quiz-btn-48 {
  padding: 10px 20px;
  background-color: #29c24f;
  color: white;
  margin-bottom: 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.retry-quiz-btn-48 {
  padding: 9px 18px;
  background-color: #da2b2b;
  color: white;
  margin-bottom: 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.red-buttons-48 {

  background-color: #000000;
  color: rgb(255, 255, 255);
  border:1px solid  green;
  margin-bottom: 15px;
  border-radius: 8px;
  cursor: pointer;
  }
.blu-buttons-48 {

  background-color: #000000;
  color: rgb(255, 255, 255);
  border: 1px solid green;
  margin-bottom: 15px;
  border-radius: 8px;
  cursor: pointer;
  }
  .blk-buttons-48 {

    background-color: #000000;
    color: rgb(255, 255, 255);
    border:1px solid green;
    margin-bottom: 15px;
    border-radius: 8px;
    cursor: pointer;
    }
    .red-buttons-48:hover,
.blu-buttons-48:hover,
.blk-buttons-48:hover {
  background-color: rgb(47, 47, 47); /* Sets the hover color to gray */
  color: white; /* Ensures text remains readable */
  transition: background-color 0.3s ease; /* Smooth transition effect */
}

.start-quiz-btn-48:hover,
.retry-quiz-btn-48:hover {
  background-color: #484848;
}

.quiz-results-48 {
  margin-top: 20px;
  font-size: 1.2rem;
}

/* Testimonial Styling */
.testimonials-container-93 {
  background-color: #ffffff;
  border: 1px solid #ddd;
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.2), inset -4px -4px 8px rgba(255, 255, 255, 0.5); /* Creates the inset (pushed-in) effect */
  padding: 20px;
}
.testimonials-container-93 h2 {
  color:rgb(77, 77, 77);
}
.testimonial-card-93 {
  margin-bottom: 15px;
  font-style: italic;
  text-align: center;
  color: #2f2f2f
}

/* Responsiveness */
@media (max-width: 768px) {
  .modern-learning-grid-74 {
    grid-template-columns: 1fr;
  }

  .timeline-steps-91 {
    flex-direction: column;
  }
}

/* Dynamic Window */
.dynamic-window-f01-1234 {
  background: rgba(255, 255, 255, 0.95); /* Slightly transparent white */
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
  width: 90%;
  max-width: 800px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Tab Navigation */
.tab-navigation-f01-1234 {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.tab-button-f01-1234 {
  flex: 1;
  background: #004d00; /* Dark green */
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  font-size: 1em;
  text-align: center;
  transition: background 0.3s ease;
}
.tab-button-f01-1235 {
  flex: 1;
  background: #3eadbb; /* Dark green */
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  font-size: 1em;
  text-align: center;
  transition: background 0.3s ease;
}
.tab-button-f01-1234:not(:last-child) {
  margin-right: 5px; /* Add space between buttons */
}

.tab-button-f01-1234.active {
  background: #0b2415; /* Brighter green for active tab */
  font-weight: bold;
}

.tab-button-f01-1235:hover {
  background: #2c3e50; /* Darker green on hover */
}
.tab-button-f01-1235:not(:last-child) {
  margin-right: 5px; /* Add space between buttons */
}

.tab-button-f01-1235.active {
  background: #2c3e50; /* Brighter green for active tab */
  font-weight: bold;
}

.tab-button-f01-1235:hover {
  background: #2c3e50; /* Darker green on hover */
}
/* Tab Content */
.tab-content-f01-1234 {
  display: none;
  padding: 20px;
  border: 1px solid #cccccc; /* Light border for separation */
  border-radius: 0 5px 5px 5px;
  background: white; /* White content background */
}

.tab-content-f01-1234.active {
  display: block;
}

/* Start Exam Button */
.start-exam-btn-f01-1234 {
  background: #004d00;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background 0.3s ease;
  display: block;
  margin-top: 20px;
}

.start-exam-btn-f01-1234:hover {
  background: #003300;
}
/* Start Exam Button */
.start-exam-btn-f01-1235 {
  background: #3eadbb;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background 0.3s ease;
  display: block;
  margin-top: 20px;
}

.start-exam-btn-f01-1235:hover {
  background: #2c3e50;
}

/* Additional Navigation */
.additional-navigation-f01-1234 {
  margin-top: 30px;
}

.additional-navigation-f01-1234 h3 {
  font-size: 1.2em;
  color: #004d00;
  margin-bottom: 10px;
}

.certifications-list-f01-1234 {
  list-style: none;
  padding: 0;
  margin: 0;
}

.certifications-list-f01-1234 li {
  margin: 5px 0;
}

.certifications-list-f01-1234 li a {
  text-decoration: none;
  color: #004d00;
  transition: color 0.3s ease;
}

.certifications-list-f01-1234 li a:hover {
  color: #006600;
}

/* General Styling */
.dynamic-practice-page-f01-1234 {
  position: relative;
  height: 100vh;
  background-image: url('images/security-background.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
}

/* Dynamic Windows */
.dynamic-window-f01-1234,
.dynamic-window-resources-f01-1234 {
  background: rgba(255, 255, 255, 0.95);
  width: 90%;
  max-width: 800px;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  padding: 20px;
}

/* Tab Buttons */
.tab-navigation-f01-1234 button,
.tab-navigation-resources-f01-1234 button {
  /* Same as previous */
}

/* Active Tabs */
.tab-content-f01-1234.active,
.tab-content-resources-f01-1234.active {
  display: block;
}

/* Hidden Tabs */
.tab-content-f01-1234,
.tab-content-resources-f01-1234 {
  display: none;
}
/* exam room */
/* General Styles */
/* Job Details Window */
/* Job Details Window */
.job-details-window-932 {
  background: rgba(255, 255, 255, 0.95); /* White background with slight transparency */
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  width: 90%;
  max-width: 800px;
  margin: 20px auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

/* Job Image Styling */
.job-image-container-932 {
  flex: 0 0 auto;
}

.job-image-932 {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #1e8b39; /* Green border */
}
.job-image-933 {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #3eadbb; /* Green border */
}

/* Job Info Styling */
.job-info-932 {
  flex: 1 1 auto;
  text-align: left;
}

.job-info-932 h1 {
  margin: 0;
  font-size: 2em;
  color: #004d00; /* Dark green */
  text-align: left;
  line-height: 150px; /* Vertically align with the circle image */
}

.job-info-932 p {
  margin: 5px 0;
  font-size: 1em;
  color: #333; /* Dark gray text */
}

.job-info-933 ul {
  margin: 10px 0;
  padding-left: 20px;
  list-style: disc;
}
.job-info-933 {
  flex: 1 1 auto;
  text-align: left;
}

.job-info-933 h1 {
  margin: 0;
  font-size: 1.8kem;
  color: #3eadbb; /* Dark green */
  text-align: left;
  line-height: 150px; /* Vertically align with the circle image */
}

.job-info-933  p {
  margin: 5px 0;
  font-size: 1em;
  color: #333; /* Dark gray text */
}

.job-info-932 ul {
  margin: 10px 0;
  padding-left: 20px;
  list-style: disc;
}

.job-buttons-932 {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Four equally spaced buttons */
  gap: 10px;
}

.green-button-932 {
  background: #004d00; /* Green button */
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  text-align: center;
  transition: background 0.3s ease;
}

.green-button-932:hover {
  background: #003300; /* Darker green on hover */
}
.green-button-933 {
  background:  #3eadbb; /* Green button */
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  text-align: center;
  transition: background 0.3s ease;
}

.green-button-933:hover {
  background: #0e2124; /* Darker green on hover */
}
/* Responsive Design for Mobile */
@media (max-width: 768px) {
  .job-details-window-932 {
    flex-direction: column; /* Stack items vertically on small screens */
    text-align: center;
  }

  .job-info-932 h1 {
    line-height: normal;
    font-size: 1.8em;
    text-align: center;
    margin-top: 10px;
  }
  
  .job-info-933 h1 {
    line-height: normal;
    font-size: 1.8em;
    text-align: center;
    margin-top: 10px;
  }
  
  .job-buttons-932 {
    grid-template-columns: repeat(2, 1fr); /* Two buttons per row on small screens */
  }
}
/* Certifications and Industries Section */
.certifications-industries-window-314 {
  background: rgba(255, 255, 255, 0.95); /* Slightly transparent white background */
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  width: 70%;
  max-width: 600px; /* Smaller width for compact design */
  margin: 20px auto;
  text-align: left;
}

.certifications-industries-content-314 h2 {
  font-size: 1.5em;
  color: #004d00; /* Dark green */
  margin-bottom: 10px;
}
.certifications-industries-content-315 h2 {
  font-size: 1.5em;
  color: #3eadbb; /* Dark green */
  margin-bottom: 10px;
}

.certifications-industries-content-314 ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}
.certifications-industries-content-315 ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}
.certifications-industries-content-314 ul li {
  font-size: 1em;
  color: #333; /* Dark gray text */
  margin: 5px 0;
  transition: color 0.3s ease;
}
.certifications-industries-content-315 ul li {
  font-size: 1em;
  color: #333; /* Dark gray text */
  margin: 5px 0;
  transition: color 0.3s ease;
}
.certifications-list-314 li:hover,
.industries-list-314 li:hover {
  color: #1e8b39; /* Green text on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
 

  .certifications-industries-content-314 h2 {
    font-size: 1.2em;
  }

  .certifications-industries-content-314 ul li {
    font-size: 0.9em;
  }
  .certifications-industries-content-315 h2 {
    font-size: 1.2em;
  }

  .certifications-industries-content-315 ul li {
    font-size: 0.9em;
  }
}
.certifications-industries-content-314 ul li a {
  text-decoration: none;
  color: #333; /* Dark gray text */
  transition: color 0.3s ease;
}

.certifications-industries-content-314 ul li a:visited {
  color: #333; /* Ensures visited links remain dark gray */
}

.certifications-industries-content-314 ul li a:hover {
  color: #1e8b39; /* Green text on hover */
}

.certifications-industries-content-314 ul li a:focus,
.certifications-industries-content-314 ul li a:active {
  outline: none; /* Removes the default browser highlight */
}
.certifications-industries-content-315 ul li a {
  text-decoration: none;
  color: #333; /* Dark gray text */
  transition: color 0.3s ease;
}

.certifications-industries-content-315 ul li a:visited {
  color: #333; /* Ensures visited links remain dark gray */
}

.certifications-industries-content-315 ul li a:hover {
  color: #1e8b39; /* Green text on hover */
}

.certifications-industries-content-315 ul li a:focus,
.certifications-industries-content-315 ul li a:active {
  outline: none; /* Removes the default browser highlight */
}
/* Learning Modules Section */
.learning-modules-window-421 {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 800px;
  margin: 20px auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
}

.learning-modules-header-421 {
  text-align: center;
  margin-bottom: 20px;
}

.learning-modules-header-421 h2 {
  font-size: 1.8em;
  color: #004d00;
}

.learning-modules-header-422 h2 {
  font-size: 1.8em;
  color: #3eadbb;
}

.modules-selector-421 {
  flex: 0 0 30%;
  background: #f9f9f9;
  padding: 10px;
  border-radius: 10px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modules-selector-421 h3 {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: #004d00;
}
.modules-selector-422 {
  flex: 0 0 30%;
  background: #f9f9f9;
  padding: 10px;
  border-radius: 10px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.modules-selector-422 h3 {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: #3eadbb;
}

.modules-list-421 {
  list-style: none;
  padding: 0;
}

.modules-list-421 li {
  margin: 10px 0;
  cursor: pointer;
  color: #333;
  transition: color 0.3s ease;
}

.modules-list-421 li:hover {
  color: #1e8b39;
}

.modules-display-421 {
  flex: 1;
  padding: 10px;
  background: white;
  border-radius: 10px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.module-content-421 {
  display: none;
}

.module-content-421 h3 {
  font-size: 1.5em;
  color: #004d00;
}

.module-content-421 p {
  font-size: 1em;
  color: #333;
}

.module-content-421.active {
  display: block;
}

/* Responsive Design */
@media (max-width: 768px) {
  .learning-modules-window-421 {
    flex-direction: column;
  }

  .modules-selector-421 {
    flex: 0 0 auto;
    width: 100%;
  }

  .modules-display-421 {
    width: 100%;
    margin-top: 20px;
  }
}

.custom-menu-panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
  height: 100%;
  background-color: #f7f7f7;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  padding: 20px;
}
.dismiss-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
  border: none;
  background: none;
  color: #333;
  cursor: pointer;
}
.greeting-text {
  font-size: 1.5rem;
  color: #444;
  margin-bottom: 20px;
}
.custom-menu-list {
  list-style: none;
  padding: 0;
}
.custom-item {
  margin-bottom: 15px;
}
.menu-link {
  text-decoration: none;
  font-size: 1.2rem;
  color: #007BFF;
  display: block;
  padding: 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
.menu-link:hover {
  background-color: #007BFF;
  color: #fff;
}
.nested-menu {
  margin-top: 10px;
  padding-left: 20px;
  display: none;
}
.nested-menu.active {
  display: block;
}
.nested-link {
  font-size: 1rem;
  color: #555;
  text-decoration: none;
  display: block;
  margin-bottom: 5px;
}
.nested-link:hover {
  color: #007BFF;
}
.custom-menu-graphic {
  text-align: center;
  margin-top: 20px;
}
.custom-menu-graphic img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.custom-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 0.9rem;
}
.footer-link {
  text-decoration: none;
  color: #007BFF;
}
.footer-link:hover {
  text-decoration: underline;
}