*{
  font-family: "Inter", sans-serif;
  box-sizing: border-box;
 

}

html {
    font-size: 16px; /* Base font size, 1rem = 16px */
}

.whitebg{
  background-color: #ffffff;
  color: #000000;
}

.whitebg:hover{
  background-color: #ffffff;
  color: #000000;
}

.p-solid{
  background-color: #084387;
  color: #ffffff;
}

.p-dsolid{
  background-color: #042c71;
  color: white;
}


.s-solid{
  background-color: #ffda73 ;
  color: #000000 ;
}


.p-fcolor{
  color:#084387;
}


.s-fcolor{
  color:#ffda73 ;
}


.p-color{
  background-color: #084387 !important;
  border: 1px solid #084387 !important;
  color: #ffffff;
}

.s-color{
  background-color: #ffda73 !important;
  color: #000000 !important;
}



.t-color{
  background-color: #e4e4e4 !important;
  border: 1px solid #e4e4e4 !important;;
  color: #000000;
}


.t-color:hover{
  background-color: #c9c9c9 !important;
  border: 1px solid #c9c9c9 !important;
  color: #000000;

}



.p-coloroutline{
  background-color: white !important;
  color: black!important;
}

.p-coloroutline:hover{
  background-color: #042c71 !important; 
  color: white !important;
  border: 1px solid #042c71 !important;
}

.p-color:hover{
  background-color: #042c71 !important;
  color: #ffff !important;
  border: 1px solid #042c71 !important;
}
.s-color:hover{
  background-color:#ebc358 !important;
  color: #000000 !important;
}


.s-colorhover{
  background-color: #ffffff !important;
 
  color: #000000 !important;
}


.s-colorhover:hover{
  background-color: #ffda73 !important;
 
  color: #000000 !important;
}




.btnactive:active{
  background-color: #042c71!important;
  color: #ffff !important;
}



/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;

}
  
/************* Navbar ************/
.navbar-brand img{
    width: 100%;
    height: 3rem;
}


/*------------top section-----------*/

.top-section {
  width: 100%;
  height: 16rem;
  color: #fff;
  margin-bottom: 5rem;
}






/************* check avalibility ************/

.content{
padding: 1.5rem 0rem !important;
margin-right: .5rem !important;

}

.icon-box{
  cursor: pointer;
}

.services-icon{ 
 margin-top: -4rem; 
 z-index: 2;
 position: relative;
}


.visibility-check{
  width: 100%;
  padding-bottom: rem !important;
}

.avalibility-icon svg{
  fill: #c7a23c !important;
  width: 4rem;


}

.avalibility-icon svg:hover{
  fill: #000000 !important;
  width: 4rem;


}


.content:hover svg{
  color: #000000 !important;
  fill: #000000 !important;
}



.content svg:hover{
  color: #000000 !important;
  fill: #000000 !important;
}

/*----- top destination ----*/

.topdestination_box{
  border-bottom: 5px solid transparent !important;
  transition: transform 0.2s ease !important;
  
  
}


.topdestination_box:hover{
  border-bottom: 5px solid #c7a23c !important;
  transform: scale(1.05);
 
  
}




/************* click show the form ************/

.service-btn {
  outline: none;
  border: none;

}


.service-btn.highlight {
  background-color: #ffda73 !important;
  color: #000000 !important;
 


}



.service-btn.highlight svg {
  fill: #000000 !important;


}



.service-form {
  display: none !important;
}

.service-form.highlight {
  display: block !important;
}


.service-heading{
  cursor: pointer;
}




.passenger-box {
  position: absolute;
  top: 70px; /* Adjust this value to move it above the input field */
  left: 600px;
  z-index: 1000;
  display: none; /* Hidden initially */
  width: 100%;
}

/* Style for a smaller box size */
.col-md-3 {
  width: 25%;
}



.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  background-color: #f9ad31;
  color: black;
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
  margin-right: 10px;

}




/********** our services *******

.our-services{
  background-image: url("/img/computer.jpg");
  background-size: cover;
  background-position: center;


}
*/



.ourservices{
  padding-bottom: 70px !important;
  width: 100% !important;
}



.servicesbox{
  border-bottom: 5px solid transparent !important;
  transition: transform 0.2s ease;
  
  
}


.servicesbox:hover{
  transform: scale(1.05);
 
  
}

.our-services-icon svg{
  fill: #f9ad31;
  width: 7rem;

}

.bi-check-circle-fill{
  color: #f9ad31;
}

.service-heading{
  color: #042c71;
}


/************* trusted partners ************/


.trusted-partners {
  padding: 2.5rem 0;
  background-color: #ffffff;
}
.trusted-partners h3 {
  text-align: center;
  margin-bottom: 2rem;
}
.partner-logo {
  padding: 2rem;
  text-align: center;
  opacity: 0.5;
}
.partner-logo img {
  max-width: 5.5rem;

  filter: grayscale(100%); /* Make the image gray */
  transition: fil‍ter 0.3s;
}
.partner-logo img:hover {
  filter: grayscale(0); /* Hover effect to remove gray */
}





/*----footer--*/

.footer {
  background-color: #042c71!important;
  width: 100% !important;
  color: #afafaf;
  padding: 2.5rem 0;
}

.footer a {
  color: #afafaf;
  text-decoration: none;
  transition: color 0.2s;
}

.footer a:hover {
  color: #ffffff;
}


.footer p {
  color: #afafaf;
  text-decoration: none;
  transition: color 0.2s;
}

.footer p:hover {
  color: #ffffff;
}

.contact-text {
  font-size: 1.2rem !important;
  color: #afafaf !important;
}

.contact-text:hover {
  font-size: 1.2rem !important;
  color: #ffffff !important;
}




.footer .social-icon p:hover{
  color: #ffffff;
}

.footer .social-icons i {
  font-size: 24px;
  margin-right: 15px;
  transition: color 0.2s;
  color: #fff;
}
.footer .social-icons i:hover {
  color: #ffda73;
}

.abouth-p{
  text-align: left;
  margin-right: 50px;

}


/*------contact us -------*/
.contactus{
display: flex;
align-items: center;
text-align: center;
width: 100%;
height: 250px;


}

.contactus h4{
font-weight: 600;
font-size: 2.5rem;
}


.contact-section {
  padding: 40px 0;
}
.contact-info h5, .social-icons h5 {
  margin-bottom: 20px;
}
.social-icons a {
  font-size: 24px;
  color: #333;
  margin-right: 15px;
  transition: color 0.3s;
}
.social-icons a:hover {
  color: #007bff;
}
.contact-form textarea {
  resize: none;
}




.map-container {
  position: relative;
  padding-bottom: 30rem; /* Aspect ratio for 16:9 */
  height: 0;
  overflow: hidden;
}
.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30rem;
  border: 0;
}



/*---about us------*/



.about-section {
  padding: 30px 0;
}
.about-section h2 {
  font-weight: bold;
  margin-bottom: 20px;
  text-align: left;
}
.about-section p {
  margin-bottom: 20px;
}
.about-section .card {
  border: none;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s;
}
.about-section .card:hover {
  transform: scale(1.05);
}






/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 

.visibility-check {
    margin-top: 4.5rem !important;
    margin-left: .5rem;
  }



  .icon-box {
    width: 8.2rem;

  }


  .passenger-box {
    position: absolute;
    top: 1000px;
    /* Adjust this value to move it above the input field */
    left: 0px;
    z-index: 1000;
    display: none;
    /* Hidden initially */
    width: 100%;
  }

  /* Style for a smaller box size */
  .col-md-3 {
    width: 100%;
  }

  .passenger-counter {
    margin-right: 30px;
  }

  .passenger-counter-2 {
    margin-right: 16px;
  }

  .round-trip {
    margin-bottom: 20px;
  }




  .our-services-icon svg {
    margin-top: 1.5rem !important;



  }


  .icon-box {
    margin-bottom: 2rem !important;
  }



  .services-icons {
    display: flex;
    flex-direction: row;

  }



}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { 




}






/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { 
  

  .passenger-box {
    position: absolute;
    top: 30px; /* Adjust this value to move it above the input field */
    left: 450px;
    z-index: 1000;
    display: none; /* Hidden initially */
    width: 100%;
  }
  
  /* Style for a smaller box size */
  .col-md-3 {
    width: 35%;
  }







.ratiing-2{
  margin-top: 0rem !important;
}

.services-icon{ 
  margin-top: 2rem !important; 
  z-index: 2;
  position: relative;
 }
 
 






}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { 
  


  .passenger-box {
    position: absolute;
    top: 30px; /* Adjust this value to move it above the input field */
    left: 650px;
    z-index: 1000;
    display: none; /* Hidden initially */
    width: 100%;
  }
  
  /* Style for a smaller box size */
  .col-md-3 {
    width: 30%;
  }






/*----services icon----*/
.content{
  padding: 1rem 2.3rem !important;
}

.content h5{
  font-size: .8rem !important;
}




  .choseus h5{
    font-size: .8rem !important;
    margin-bottom: .2rem !important;
  }


  .choseus p{
    font-size: .9rem !important;


  }

  .choseus{
    margin-top: 2rem !important;
  }

  .btn-book-mored{
    display: flex;
    flex-direction: column;
    margin-left: 0 !important;



  }

  .btn-md{
    width: 100% !important;
    margin-right: 5 !important;
    align-items: center;
  }

.ratiing-2{
  margin-top: 2.5rem !important;
}

.ratiing-4{
  margin-top: 2.5rem !important;
}










}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  
  .ratiing-4{
    margin-top: 2.4rem !important;
  }
  
  .ratiing-1{
    margin-top: 2.4rem !important;
  }
  


  .ratiing-2{
    margin-top: 2.4rem !important;
  }
  



}