/* =============================== CSS for All Pages excluding Index =============================== */

/* =============================== Most Important  */


.w3-table-all tr td{
    color:  #717275;
}

.w3-table-all tr th{
  background-color: rgb(172, 171, 171);
}


/* ----------------pagination and pagination card */

#card-resize{
  width: 35%;
}
@media  screen and (max-width:768px) {
  #card-resize{
    width: 100%;
  }
  
}

.pagination {
    display: inline-block;
}

.pagination button {
    background-color: #ffffff;
    color: rgb(255, 0, 0);
    padding: 8px 16px;
    margin: 2px;
    border: 1px solid gray;
    border-radius: 5px;
    cursor: pointer;
}

.pagination button.active {
    background-color: #ff0101da;
    color: white;
}

.pagination button:hover:not(.active) {
    background-color: #f54e4e;
}

/* ------------------fedback Form */

.feedback form{
    input, select{
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
      }

      input[type=email],input[type=tel],input[type=date], select{
        width: 49%;
      }
      input[type=text], textarea{
        width: 100%;
      }
      textarea{
        height: 50%;
      }
      input[type=submit],input[type=button]{
        font-size: 1rem;
        background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
      }

}



/* 
------- Define Classes


*/

.heading{
  font-weight: bold; 
  color:#5F093D
}

.paragraph{
  line-height: 1.7;
  font-size: 15px;
  margin: 1rem 0px;
text-align: justify;
}




.hero1{
  width: 100%;
  height: 70vh;
  background-image: linear-gradient(rgba(7, 3, 26, 0.356),rgba(12,3,51,0.3)) ;
  position: relative;
  /* display: flex; */
  background-repeat: no-repeat;
  overflow:hidden;
  object-fit: cover;


}

@media screen and (max-width: 768px) {
  .hero1{
    width: 100%;
    height: 40vh;
   
    
  
  }
}





.back-video1{
  position: absolute;
  right: 0;
  /* bottom: 0; */
  z-index: -1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: -1;

}




.carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 100%;
  /* height: auto; */
}
.image-container {
  z-index: -1;
  object-fit: cover;
  position: absolute;
  

  display: flex;
  transition: transform 0.5s ease; /* Smooth transition */
  width: calc(100% * 8); /* Adjust based on the number of images */
}
.image-container img {
  width: 100%; /* Images fill their container */
  height: 70vh;
}
@media screen and (max-width: 768px) {
  .image-container img {
    width: 100%; /* Images fill their container */
    height: 40vh;
  }
}




.upper-most{
  position: absolute;
  top: 8px;
 width: 100%;
  /* background-color: rgba(255, 255, 255, 0.7); */
  border: none;
  
  z-index: 2;
}


.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(187, 187, 187, 0.486);
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1;
}
.arrow.left {
  left: 10px;
}
.arrow.right {
  right: 10px;
}
.dots {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 10px; /* Position dots at the bottom */
  width: 100%;
}
.dot {
  height: 10px;
  width: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: gray;
  cursor: pointer;
}
.dot.active {
  background-color: black; /* Active dot color */
}