/* styles.css */
body {
  /* background-color: rgb(82, 12, 12); */
  color: rgb(0, 0, 0);
  background-color: #fff;
}

/* Navbar section responsive */
.navbar,
.navbar-nav .nav-link,
.navbar-brand,
.navbar-toggler {
  color: rgb(8, 8, 8) !important;
  /* color: #ff9933; */
}

/* Optional: Make sure toggler icon shows up on dark bg */
.navbar-light .navbar-toggler-icon {
  filter: invert(1);
}

/* banner conent css */
.banner {
  /* position: absolute; */
  padding: 56px 0px 170px;
}

/* About us page responisve code */
/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0;
  /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  /* rtl:remove */
  letter-spacing: -.05rem;
}

#booking-form select option {
  margin: 0 auto;
}

/* media query for box layout */
@media screen and (min-width: 920px) {
  #booking-form {
    margin-top: 54px;
  }
}

#languageToggle {
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid #ff9933 !important;
}

/* @media screen and (max-width:426px) {
  #banner-logo{
    width: 25% !important;
    height: 15% !important;
    left: 8% !important;
    top: 31% !important;
  }
  
}
@media screen and (max-width:426px){
  .image-rotation .img1{
    top: 37% !important;
    left: 50% !important;
    position: relative;
    width: 60% !important;
    height: 50% !important;
    object-fit: contain;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    animation: 8s linear 0s infinite normal none running rotateCCW;
  }
  
}
@media screen and (max-width:426px){
  .image-rotation .img2{
    top: -13% !important;
    left: 50% !important;
    position: relative;
    width: 60% !important;
    height: 50% !important;
    object-fit: contain;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    animation: 8s linear 0s infinite normal none running rotateCCW;
  }
} */

/* Prevent horizontal scroll on mobile */
/* @media screen and (max-width:426px) {
  body, html {
    overflow-x: hidden !important;
  }

  #banner-logo {
    width: 25% !important;
    height: 15% !important;
    left: 8% !important;
    top: 200px !important;
  }

  .image-rotation {
    position: relative;
    width: 100% !important;
    overflow: hidden; 
  }

  .image-rotation .img1 {
    top: 31% !important;
    left: 50% !important;
    width: 60% !important;
    height: auto !important; 
    max-width: 100% !important; 
    object-fit: contain;
    transform: translate(-50%, -50%);
    animation: 8s linear infinite rotateCCW;
  }

  .image-rotation .img2 {
    top: -13% !important;
    left: 50% !important;
    width: 60% !important;
    height: auto !important;
    max-width: 100% !important; 
    object-fit: contain;
    transform: translate(-50%, -50%);
    animation: 8s linear infinite rotateCCW;
  }
} */