/* Global  */


@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
body{
    font-family: "Cairo";
}
.main-title {
    
    text-align: center;
    position: relative;
    margin-bottom: 50px;
 }
 
 section {
    padding-block: 50px;
 }
 
 
 
 .main-title h2 {
    font-weight: 900;
 }
 
 .main-title::after {
    content: "";
    position: absolute;
    top: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 5px;
    background-color: #ffbb00;;
 }
 
 /* NavBar  */
 .nav-link {
    position: relative;
    padding-left: 0 !important;
    padding-right: 20px !important;
 }
 
 .nav-link::before {
    content: "";
    position: absolute;
    top: calc(100%);
    left: 0;
    width: 0;
    height: 3px;
    background-color: #ffbb00;;
    transition: width 0.5s;
 }
 
 .nav-link.active::before {
    width: 40px;
 }
 .nav-link.hover {
    color: #ffbb00;
 }

 /* <!-- =========== Start Hero  =========== --> */
 .hero {
    background: url("../images/Family-Travel.png") center no-repeat;
    background-size: cover;
 }

 
 /* <!-- =========== End Hero  =========== --> */
 /* <!-- =========== Start SERVICES   =========== --> */
.services .card span {
    display: flex;
    width: 100px;
    height: 100px;
    margin: auto;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 30px;
    transition: all 0.5s;
    box-shadow: 0 0 0 10px  #ffbb00;
    margin-bottom: 10px;
 }
 
 .services .card {
    padding-block: 20px;
 }
 
 .services .card:hover span {
    box-shadow: 0 0 0 10px #215384;
    background-color:  #ffbb00;
    color: #fff;
 }
 /* <!-- =========== End SERVICES   =========== --> */
 /* <!-- ==================== Portfolio  ====================--> */

 @keyframes pulse {
   0% {
       transform: scale(1); /* Original size */
       opacity: 1; /* Fully visible */
   }
   50% {
       transform: scale(1.05); /* Slightly larger */
       opacity: 0.9; /* Slightly transparent */
   }
   100% {
       transform: scale(1); /* Return to original size */
       opacity: 1; /* Fully visible */
   }
}

.animated-heading {
   animation: pulse 1.5s ease-in-out infinite; /* Continuous pulsing */
}
 .portfolio .gallary {
    display: flex;
    justify-content: flex-start;

    padding: 0;
 }
 
 .portfolio .gallary .item {
  width: 50%;

    display: flex;
    flex-direction: column;
    
 }
 .portfolio .gallary .item .image img {
width: 100%;
height: 97%;
 }
 .portfolio .gallary .item .image {
    position: relative;
    border-radius: 0.625rem;
    overflow: hidden;
    cursor: pointer;
    height: 45vh;
    width: 96%;

 }
 
 .portfolio .gallary .item .layer {
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 0.7);
    color: #fff;
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s;
    height: 97%;
 }
 
 .portfolio .gallary .item .layer p {
   align-items: center;
margin-right: 3%;

}

.portfolio .gallary .item .layer h3 {
   align-items: center;


}
 .portfolio .gallary .item .image .layer {
    opacity: 1;
 }
 
 .portfolio .gallary .item img {
    transition: filter 0.5s 0.3s, transform 0.5s 0.5s;
 }
 
 .portfolio .gallary .item .image img {
    filter: blur(0.125rem);
   
 }
 
 /* <!-- ==================== End Portfolio  ====================--> */
 /* <!-- =========== Start team   =========== --> */
.team .card span {
    display: flex;
    width: 100px;
    height: 100px;
    margin: auto;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 30px;
    transition: all 0.5s;
    margin-bottom: 0px;
 }
 .card-body .img {
   width: 50%;
 }
 .card-body .img img {
   width: 100%;
 }
 .card-body #img {
   width: 100%;
 }
 .card-body #img img {
   width: 100%;
 }
 
 
 .team .card {
    padding-block: 20px;
    padding-bottom: 0px;
 }
 .team .card-body span img{
    border-radius: 50%;
 }
 h2{
    color:#565656 ;
 }
 .h5{
    color: #737373;
 }

 /* <!-- =========== End team   =========== --> */
  /* <!-- ==================== about  ====================--> */

 
  .about .gallary {
    display: flex;
    justify-content: flex-start;
background-color: #565656;
    padding: 0;
 }
 
 .about .gallary .item {
  width: 100%;
  height: 30vh;
    display: flex;
    flex-direction: column;
    
 }
 .about .gallary .item .image img {
width: 100%;
height: 110%;
 }
 .about .gallary .item .image {
    position: relative;
  
    overflow: hidden;
  
 }
 
 .about .gallary .item .layer {
    position: absolute;
    inset: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items:start;
    justify-content: center;
 
    
 }
 
 .about .gallary .item .image .layer {
    opacity: 1;
 }
 


.portfolio .gallary .item img {
   transition: filter 0.5s 0.3s, transform 0.5s 0.5s;
}

.portfolio .gallary .item .image img {
   filter: blur(0.025rem);
  
}
.about .gallary .item .layer {
   position: absolute;
   inset: 0;
   background-color: rgb(0 0 0 / 0.7);
   color: #fff;
   opacity: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transition: opacity 0.5s;
   
}
 
 .about{
    margin-top: 0px;
    width: 100%;
    background-color: #fbfbfb;
 }
 
 .team1 {
   width: 60%;
   margin: auto; /* Center the section */
   text-align: center;
}

.carousel-inner img {
   max-width: 100%; /* Ensure images are responsive */
   height: auto; /* Maintain aspect ratio */
}
.carousel-caption {
   background: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
   padding: 5px 10px; /* Reduced padding for smaller height */
   border-radius: 5px; /* Rounded corners */
   text-align: center; /* Center the text */
   justify-content: center;
}

.carousel-caption p {
   font-size: 1rem; /* Adjust paragraph font size */
   line-height: 1.5; /* Improve line spacing */
}

.carousel-caption h5 {
   font-size: 1.25rem; /* Font size for headings */
}


@media (max-width: 768px) {
  
   .carousel-caption {
      position: absolute; /* Ensure it overlays the image correctly */
      bottom: 20px; /* Position it near the bottom */
     left: 0%; /* Start from the middle */
     right: 0%;
    
      width: 100%; /* Set width to create a rectangular shape */
  }

  .carousel-caption h5 {
      font-size: 1.5rem; /* Adjust font size for mobile */
  }

  .carousel-caption p {
      font-size: 0.85rem; /* Smaller paragraph size on mobile */
  }

   .carousel-inner img {
      max-width: 130%; /* Ensure images are responsive */
      height: auto; /* Maintain aspect ratio */
      width: 150px;
   }
   .team1 {
      width: 80%;
      margin: auto; /* Center the section */
      text-align: center;
   }
   .about .gallary .item .layer {
      position: absolute;
      inset: 0;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items:start;
      justify-content: center;
  padding-top: 2%;
   
      
   }
}
 /* <!-- ==================== End about  ====================--> */
 /* footer */
.footer {
    text-align:center;
    background-color: #333333;
 padding: 10px 0;
}
.footer .container{
   
    width: 100%;
    text-align: center;
   margin-top: 0px;

}

.footer p {
    color: white;
   
    margin: 0;
  
}

.footer  a {
    color: #fbfbfb;
    text-decoration: none;
    margin-top: 0%;
}
.footer  a:hover {
    color:#ffbb00
   
}
.footer span{
    color: #fff;
    margin-left: 1px;
}
 .info li {
    
    list-style: none;
    color: #fbfbfb;
 }
 
  .info li i {
    color: #ffbb00;
 }
 
  .info li a {
    font-size: 0.8125rem;
    color: #ffbb00;
 }
 .icon a i{
    font-size: 1.5rem;
color: #ffbb00;
 }


 @media only screen and (max-width: 968px) {
   .reserve form .container{
width: 90%;
   }
   
 }

 .reserve .container{
   width: 60%;
 }
 .whatsapp-button{
     position: fixed;
     bottom: 50px;
     right: 25px;
     z-index: 99;
     background-color: #25d366;
     border-radius: 50px;
     color: #ffffff;
     text-decoration: none;
     width: 50px;
     height: 50px;
     font-size: 30px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     -webkit-box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
     -moz-box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
     box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
     animation: effect 5s infinite ease-in;
 }
 
 @keyframes effect {
     20%, 100% {
         width: 50px;
         height: 50px;
         font-size: 30px;
     }
     0%, 10%{
         width: 55px;
         height: 55px;
         font-size: 35px;
     }
     5%{
         width: 50px;
         height: 50px;
         font-size: 30px;
     }
 }