@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
*{
    padding: 0px;
    margin: 0px;
    /* width: 100%; */
    /* overflow: hidden; */
}
body{
    font-family: "Cairo", sans-serif !important;

}
.nav_template a{
    color: black;
    font-size: 16px;
    /* padding: 2px; */
    /* margin-left: 10px; */

}

.nav2 {
  background-color: white;
  color: black;
}
.nav_template a span{
    /* color: red; */
    /* font-size: 16px; */
    padding: 2px;
    margin-right: 10px;



}

.nav_template a:hover{
    color: #4E99D4   ;
    /* padding: 2px; */



}
.nav_template{
    /* background-color: black; */

}
footer{
    /* border: 2px solid rgb(255, 255, 255); */
    /* background-color: white; */
    padding:0 10px;
    border-radius: 16px;
}
footer .links{
  padding-top:30px ;
}
/* Bootstrap 4 text input with search icon */

.has-search .form-control {
    padding-left: 2.375rem;

}

.has-search .form-control-feedback {
  position: absolute;
  z-index: 2;
  display: block;
  width: 3.375rem;
  height: 5.375rem;
  line-height: 2.375rem;
  text-align: center;
  pointer-events: none;
  color: #ffffff;
  font-size: 20px;
}
.smart-search{
  margin-bottom: .5rem !important;
}
.card_search .has-search .form-control-feedback {
  position: absolute;
  z-index: 2;
  display: block;
  width: 3.375rem;
  /* height: 9.375rem; */
  line-height: 3.375rem;
  text-align: center;
  pointer-events: none;
  color: #ffffff;
  font-size: 24px;
}

.has-search button{
  height: 60px;
}
.search_filter .nav-item{
    background: #1A2B50;
    margin-left: 8px;
    border-radius: 15px;
    margin-top: 8px;
}
.search_filter .nav-item .nav-link{
    color: #FFF;
}


/* card search */
/* */
.card_search{
border-radius: 35px;
}
/* .card_search .card{
  height:140px;

} */
.card_search .card-title{
color: #4E99D4;
}
/* service section 2 */
/* .service_info{
    background-image: url('assets/images/car-bg.png');
} */
/* .info-bg{
    position: absolute;
    right: -30px;
    top: 0px;
}
.info_bg2{
    position: absolute;
    left: -100px;
    top: 50px;
    transform: rotate(3deg);
} */
.info_bg img{
width: 500px;
}
.info_car_bg img{
    width: 500px;
}
.info_car_bg{
    position: absolute;
    right:10px;
    top: 120px;
}
 /* Media Queries */
 @media screen and (max-width: 600px) and (min-width: 300px) {
  
  .info_bg img{
    width: 350px;
    }
    .info_car_bg img{
        width: 350px;
    }
    .info_car_bg{
        position: absolute;
        right:10px;
        top: 90px;
    }
}
 @media screen and (min-width: 576px) {
    .section {
      flex-direction: row;
    }
    .section .col {
      width: calc(50% - 20px);
    }
    

  }

  @media screen and (min-width: 768px) {
    .section .col {
      width: calc(33.33% - 20px);
    }
  }

  @media screen and (min-width: 992px) {
    .section .col {
      width: calc(25% - 20px);
    }
  }

  @media screen and (min-width: 1200px) {
    .section .col {
      width: calc(20% - 20px);
    }
  }

.service-header {
    /* text-decoration: underline; */
    border-bottom: 2px solid black;
    text-align: center;
}
.service-form{
    /* color: red; */
    text-align: right;
    padding: 10px;
}
.travells .title{
    text-align: right;

}
.travells .card{
    background-size:cover ;  background-repeat: no-repeat;
    border: 0;
}

.travells .card-body{
    position: absolute;
     top: 90%; 
     left: 50%; 
     transform: translate(-50%, -50%);
      text-align: center; 
      color: white;
}

  .travells .card {
    /* width: 18rem; Adjust the card width as needed */
    margin: 0 10px; /* Add margin between cards */
    transition: all 0.3s; /* Smooth transition for height and background-image change */
    height: 300px !important; /* Stretch card body on hover */
  }
  .travells .card .card-title{
    
    /* text-decoration: underline; */
    border-bottom: 4px solid #fff;



  }
  .travells .card:hover {
    /* transform: scale(1.05); Increase size on hover */
    /* height:350px !important; Stretch card body on hover */

  }
  .travells .card:hover .card-body {
    height: 100%; /* Stretch card body on hover */
  }
  /* .card .card-img-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 10;
  } */

  .travells .card-body {
    overflow: hidden;
    height: 20%; /* Initial height of card body */
    transition: height 0.3s; /* Smooth transition for height change */
  }
  /* our client reviews section   */

  .ourclient .title h1{
    text-align: right;
}
.ourclient .title hr{
    border-width: 5px;
    border-color:black ;
    }

  .ourclient .card {
    /* border: 0; */
    margin-left: 5px;
    /* text-align: center; */
    /* width: 500px !important; */
    transition: all 0.3s; /* Smooth transition for height and background-image change */
    /* height: 300px !important; Stretch card body on hover */
  }
  .ourclient .card:hover {
    transform: scale(1.05); /* Increase size on hover */
    /* height:350px !important; Stretch card body on hover */
    background-color: #1A2B50;
    color: #fff;
    width: 600px !important;
    z-index: 99;
  }

.review-div{
    /* background-color: #d8e2e3; */
    padding: 20px;
    border-radius: 20px;
    /* width:100% ; */
}
    /* slid Review style */
    .review-div{
        height: 100%;
        min-height: auto;
        padding-left: 8px;
        text-align: left;
      }
      .review-div img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    
      .review-div {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
      }
    
      .review-div .item-review {
        display: flex;
        align-items: center;
      }
    
      .review-div .item-review img {
        margin-right: 10px; /* Adjust margin as needed */
      }
      .carousel-control-next, .carousel-control-prev{
        color: red !important;
        z-index: 4434 !important;
        width: 3% !important;

      }
      /* footer */
      footer  {
        background-color: #5192fa48;
        /* padding: 30px; */
      }
      footer .links li{
        list-style: none;

      }
      footer .links a{
        color: black;
        text-decoration: none;
        
      }
      footer .social a{
        padding:1px 11px;
        border: 1px solid black;
        border-radius: 9px;
        
      }

      /* sign up style */
 
      .loginsocial  a{
        display: block;
        color: black;
        text-decoration: none;        
      }
    
      .loginsocial  a{
        padding: 10px;
        border: 1px solid black;
        border-radius: 9px;
      }
      .heder{
        font-weight: bolder;
      }
      .search h5{
        font-weight: bolder;
        color: #C4C4C4;
        font-size: 18px;

      }
      /* list page style */
     .listsection img{
        height:150px;
        width:100%;
        padding: .5rem;
      }
      
      .listsection .item{
        padding-left:5px;
        padding-right:5px;

      }
      .listsection .item i{
        /* color: gold; */
        padding-left:5px;
        padding-right:5px;

      }
      .listsection  .item-card{
        transition:0.5s;
        cursor:pointer;
        background-color: #CBC9C2;
        margin-bottom: 10px ;
        height: 400px;


      }
      .listsection  .item-card2{
        transition:0.5s;
        cursor:pointer;
        margin-bottom: 10px ;
        height: 400px;

      }


      .listsection .card:hover{
        transform: scale(1.05);
        box-shadow: 10px 10px 15px rgba(0,0,0,0.3);
      }
      .listsection .card-text{
        /* height:80px;   */
      }
      
      .listsection .card::before, .card::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: scale3d(0, 0, 1);
        transition: transform .3s ease-out 0s;
        background: rgba(255, 255, 255, 0.1);
        content: '';
        pointer-events: none;
      }
      .listsection  .card::before {
        transform-origin: left top;
      }
      .listsection .card::after {
        transform-origin: right bottom;
      }
      .listsection .card:hover::before, .card:hover::after, .card:focus::before, .card:focus::after {
        transform: scale3d(1, 1, 1);
      }
      .listsection .card-header{
        background-color: #FAF5F8;
        font-size: 20px;
        font-weight: bolder;
      }
      .listsection .icons{
        padding-top: 15px;
        text-align: center;

      }
      .listsection .icons i{
        font-size: 20px;
        text-align: center;
      }
      .listsection .icons h6{
        font-size: 14px;
      }
      .listsection .button{
        text-align: center;
      }
      .listsection .button a{
        border-radius: 18px;
        margin-top: 8px;
      }  
      .listsection select{
        background-color: #4E99D4;
        color:#fff;
      }  
      .listsection select:hover{
        background-color: #4E99D4;
        color:#fff;
      }  
      .listsection select:focus{
        background-color: #4E99D4;
        color:#fff;
      }   
      /* old system style */
      .dropdown-menu li a{
        color: black;
      }
      /* packages details */
      .content{
        overflow-x: hidden;
    }
    .details img{
        width: 100% !important;
    }

    .form {
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* height: 100vh; Adjust height as needed */
}

.image-container {
    position: relative;
    /* width: 1000px; Adjust width as needed */
    height: auto;
    margin: 0 10px; /* Adjust margin as needed */
}

.masked-img {
    width: 100%;
    height: auto;
}

.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, black); /* Adjust the gradient as per your need */
    mix-blend-mode: multiply; /* Blend mode to apply the mask */
}

.masked-img:hover + .mask {
    display: none; /* Hide the mask when hovering over the image */
}

.booking{
    padding: 30px 10px;
    background-color: #ECF3FE;
    margin-top: 10px;
}

      /* booking page */