/* ==================================================
Media Queries
================================================== */

/* Extra large devices (large desktops, 1300px and up) */
@media (max-width: 1300px) {
}

/* Large devices (desktops, 1120px and up) */
@media (max-width: 1120px) {
}

/* Medium devices (tablets, 992px and up) */
@media (max-width: 992px) {
  /* Hero Area */
  .hero_area {
    min-height: auto;
    background: linear-gradient(130deg, #231a6f, #0f054c);

    .hero_bg_box {
      display: none;
    }
  }
    .hero_area h2{
    color: white;
  }
  .text-light-sm {
    color: #f8f9fa !important; /* equivalent to Bootstrap's text-light */
  }

  /* Slider Section */
  .slider_section {
    padding: 45px 0 75px 0;
  }

  /* Navigation */
  .custom_nav-container .navbar-nav {
    padding-top: 15px;
    align-items: center;
  }

  .custom_nav-container .navbar-nav .nav-item .nav-link {
    padding: 5px 25px;
    margin: 5px 0;
  }
}

/* Small devices (landscape phones, 768px and up) */
@media (max-width: 768px) {
  /* About Section */
  .about_section .img-box {
    margin-bottom: 45px;
  }
}

/* Extra small devices (portrait phones, 576px and up) */
@media (max-width: 576px) {
  /* Header */

  /* Client Section */
  .client_section {
    .client_container {
      width: 100%;
    }

    .box {
      margin: 0;
    }

    .owl-nav {
      justify-content: center;
      margin-top: 45px;
    }

    .owl-carousel .owl-nav .owl-prev,
    .owl-carousel .owl-nav .owl-next {
      position: unset;
      margin: 0 2.5px;
    }
  }
}

/* Very small devices (less than 480px) */
@media (max-width: 480px) {
  /* Slider */
  .slider_section .detail-box h1 {
    font-size: 2rem;
  }

  .track_section form {
    flex-direction: column;
    align-items: flex-start;
  }

  .track_section form input {
    width: 100%;
  }

  .track_section form button {
    padding: 10px 60px;
    margin-top: 10px;
  }
}

/* Extra small devices (less than 420px) */
@media (max-width: 420px) {
  .service_section .box {
    flex-direction: column;
  }

  .service_section .box .img-box {
    justify-content: flex-start;
    margin-bottom: 15px;
  }
}

/* Even smaller devices (less than 376px) -  Consider removing this unless truly needed*/
@media (max-width: 376px) {
}

/* Large screen adjustment */
@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}