/* styles.css */

body {
  padding-top: 70px;
}

.navbar {
  transition: background-color 0.3s, opacity 0.3s;
}

.navbar-scrolled {
  background-color: rgba(16, 33, 77, 0.9) !important;
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23f47b23' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23f47b23' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Set the container to fill the entire width of the page */


.container {
  width: 100%;
}

/* Style the video element to be responsive */
.video-js {
  width: 100%;
  height: auto;
}

/* Hide the default controls */
.video-js .vjs-control-bar {
  display: none;
}

.banner {
  width: 100%;
  height: auto;
}

.banner img {
  width: 100%;
  height: auto;
}

.camera-thumbnails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.camera-thumbnails img {
  width: 100%;
  /* Adjust this value as needed */
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 10px;
  /* Adjust this value as needed */
}

.camera-thumbnails a {
  flex: 1;
  margin-right: 10px;
  /* Adjust the spacing between images as needed */
}

.camera-thumbnails a:last-child {
  margin-right: 0;
}

.brand-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.brand-logos img {
  width: 100%;
  /* Adjust this value as needed */
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 10px;
  /* Adjust this value as needed */
}

.brand-logos a {
  flex: 1;
  margin-right: 10px;
  /* Adjust the spacing between images as needed */
}

/* Adjust the number of logos per row based on the screen size */
@media (min-width: 992px) {
  .brand-logos a {
    flex-basis: calc(25% - 20PX);
    max-width: calc(25% - 20PX);
  }
}

@media (max-width: 992px) {
  .brand-logos a {
    flex-basis: calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}