/* Custom CSS */
  .top-bar {
      background-color: #ff6500;
      color: #fff;
      padding: 5px 0;
      font-size: 14px;
  }

  @media (max-width: 767.98px) {
      .top-bar .col-md-6 {
          text-align: center !important;
      }
  }
  

  .navbar-brand div {
      color: #fff;
      font-size: 16px;
      line-height: 1.2;
  }

  .navbar-brand .small-text {
      font-size: 12px;
  }
.navbar{
    background-color: #000;
}
.navbar-toggler{
    background-color: white;
}

.navbar-toggler-icon {
    width: 20px;
    height: 20px;
   
}

@media (min-width: 992px) {
    .navbar-toggler-icon {
        width: 30px;
        height: 30px;
    }
}

  .custom-logo {
      max-width: 220px;
  }

  @media (min-width: 768px) {
      .custom-logo {
          max-width: 350px;
      }
  }

  .side-menu {
      height: 100%;
      width: 0;
      position: fixed;
      top: 0;
      left: 0;
      background-color: black;
      overflow-x: hidden;
      transition: 0.3s;
      padding-top: 60px;
      z-index: 1050;
  }

  .side-menu ul {
      list-style: none;
      padding: 0;
  }

  .side-menu ul li {
      padding: 16px;
  }

  .side-menu ul li a {
      color: white;
      text-decoration: none;
      font-size: 20px;
      display: block;
  }

  .side-menu .close-btn {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 36px;
      color: white;
      cursor: pointer;
  }
  .slider {
      background-image: url('/assets/img/cover banner4.png');
      background-repeat: no-repeat;
      background-size: contain;
      /* or cover depending on desired fit */
      background-position: top;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 6;
      /* Optional: keeps a nice ratio */
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #fff;
      cursor: pointer;
  }
  .homeButton{
    position: absolute;
    top: 82%;
    left: 45%;
  }

  @media (max-width: 768px) {
      .slider {
          background-image: url('/assets/img/mobile2.png');
        aspect-ratio: 16 / 17;
          /* height: 400px; */
      }

      .slider h1 {
          font-size: 24px;
      }

      .slider p {
          font-size: 14px;
      }
  }

  .slider h1 {
      color: #fff;
      font-size: 36px;
      text-transform: uppercase;
  }

  .slider .subtext {
      color: #ff6500;
      font-size: 20px;
  }

  .btn-orange {
      background-color: #ff6500;
      color: #fff;
      border: none;
      padding: 10px 20px;
  }

  .btn-orange:hover {
      background-color: #e69500;
      color: #fff;
  }

  .about,
  .courses,
  .contact {
      padding: 50px 0;
      text-align: center;
      color: white;
  }

  .about h2,
  .courses h2,
  .contact h2 {
      color: #fff;
      text-transform: uppercase;
      background-color: #ff6500;
  }

  .card {
      margin-bottom: 20px;
  }

  footer {
      background-color: #000;
      color: #fff;
      padding: 20px 0;
  }

  footer a {
      color: #ff6500;
      text-decoration: none;
  }

  footer a:hover {
      color: #fff;
  }



  .carousel-item img {
      object-fit: contain;
      /* Preserve aspect ratio */
      width: 100%;
      height: 300px;
      /* Adjusted height for better mobile display */
      cursor: pointer;
      /* Indicate image is clickable */
  }

  @media (max-width: 767.98px) {
      .carousel-item img {
          height: 200px;
          /* Smaller height for mobile */
          object-fit: cover;
          /* Cover for better mobile appearance */
      }
  }

  .carousel-inner {
      overflow: hidden;
      /* Ensure smooth sliding */
  }

  .modal-image {
      max-width: 100%;
      max-height: 80vh;
      /* Limit height to viewport */
      object-fit: contain;
      /* Preserve aspect ratio */
  }

  /* Ensure carousel controls are visible and styled */
  .carousel-control-prev,
  .carousel-control-next {
      width: 5%;
      background: rgba(0, 0, 0, 0.5);
      /* Semi-transparent background for controls */
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
      background-color: #000;
      /* Darker icons for visibility */ }