@tailwind base;
@tailwind components;
@tailwind utilities;

.home-bg {
    background-image: url("./assets/home-profile-final.jpg");
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; 
  }
  
  @media (max-width: 768px) {
    .home-bg {
        background-image: url("./assets/home-profile-mobile.jpg"); 
    }
  }
  
  @media (max-width: 480px) {
    .home-bg {
      background-image: url("./assets/home-profile-mobile.jpg"); 
    }
  } 




  .service-bg {
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; 
  }
  
  @media (max-width: 768px) {
    .service-bg {
        background-image: url("./assets/services-profile-mobile.jpg"); 
    }
  }
  
  @media (max-width: 480px) {
    .service-bg {
      background-image: url("./assets/services-profile-mobile.jpg"); 
    }
  } 



  .countries-bg {
    background-image: url("./assets/countries-profile.jpg");
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; 
  }
  
  /* @media (max-width: 768px) {
    .countries-bg {
        background-image: url("./assets/home-profile-mobile.jpg"); 
    }
  }
  
  @media (max-width: 480px) {
    .countries-bg {
      background-image: url("./assets/home-profile-mobile.jpg"); 
    }
  }  */





.booking-button{
    background-color: hsl(27, 100%, 50%);
    font-size: 20px;
}

.ct-bt{
  background-color: rgb(60, 60, 245);
}


#form-main{
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 28rem;
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.8); 
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
    }
    @media only screen and (max-width:600px){
    #form-main{
    scale: 0.6;
    }
    }



    .cntry:hover{
      transform: scale(1.05)
  }
  .back-menu {
      position: fixed; /* Fixed position for consistent placement */
      top: 80px; /* Adjust to below the nav bar height */
      left: 20px; /* Add padding from the left */
      z-index: 10; /* Ensure it doesn't overlap other elements */
      display: flex;
      align-items: center;
      gap: 8px; /* Space between the icon and text */
      background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent background */
      padding: 10px 15px; /* Add padding for better click area */
      border-radius: 8px; /* Rounded corners */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
      cursor: pointer; /* Indicate it's clickable */
      transition: transform 0.2s ease, background 0.2s ease;
  }

  .back-menu:hover {
      background-color: rgba(255, 255, 255, 1); /* Slightly brighter on hover */
      transform: scale(1.05); /* Subtle zoom effect */
  }

  @media (max-width: 768px) {
      .back-menu {
          top: 60px; /* Adjust for smaller nav bar height on mobile */
          left: 10px; /* Reduce left padding for mobile */
          padding: 8px 12px; /* Smaller padding for mobile */
      }
  }

  .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40;
      cursor: pointer;
      color: #1e40af; /* Tailwind's blue-700 */
      transition: color 0.3s ease;
  }
  
  .hourglassSand:after {
    border-radius: 30px 30px 3px 3px;
    animation: sandDeplete 2s ease-in 0s infinite;
  }
  
  @-webkit-keyframes sandFillup {
    0% {
      opacity: 0;
      height: 0;
    }
  
    60% {
      opacity: 1;
      height: 0;
    }
  
    100% {
      opacity: 1;
      height: 17px;
    }
  }
  
  @keyframes sandFillup {
    0% {
      opacity: 0;
      height: 0;
    }
  
    60% {
      opacity: 1;
      height: 0;
    }
  
    100% {
      opacity: 1;
      height: 17px;
    }
  }
  
  @-webkit-keyframes sandDeplete {
    0% {
      opacity: 0;
      top: 45px;
      height: 17px;
      width: 38px;
      left: 6px;
    }
  
    1% {
      opacity: 1;
      top: 45px;
      height: 17px;
      width: 38px;
      left: 6px;
    }
  
    24% {
      opacity: 1;
      top: 45px;
      height: 17px;
      width: 38px;
      left: 6px;
    }
  
    25% {
      opacity: 1;
      top: 41px;
      height: 17px;
      width: 38px;
      left: 6px;
    }
  
    50% {
      opacity: 1;
      top: 41px;
      height: 17px;
      width: 38px;
      left: 6px;
    }
  
    90% {
      opacity: 1;
      top: 41px;
      height: 0;
      width: 10px;
      left: 20px;
    }
  }
  
  @keyframes sandDeplete {
    0% {
      opacity: 0;
      top: 45px;
      height: 17px;
      width: 38px;
      left: 6px;
    }
  
    1% {
      opacity: 1;
      top: 45px;
      height: 17px;
      width: 38px;
      left: 6px;
    }
  
    24% {
      opacity: 1;
      top: 45px;
      height: 17px;
      width: 38px;
      left: 6px;
    }
  
    25% {
      opacity: 1;
      top: 41px;
      height: 17px;
      width: 38px;
      left: 6px;
    }
  
    50% {
      opacity: 1;
      top: 41px;
      height: 17px;
      width: 38px;
      left: 6px;
    }
  
    90% {
      opacity: 1;
      top: 41px;
      height: 0;
      width: 10px;
      left: 20px;
    }
    }