/* home page css */
 
 
 body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
     margin: 0;
     padding: 0;
 }

 .container-full-height {
     height: 100vh;
     /* Occupies 100% of the viewport height */
     display: flex;
     justify-content: center;
     /* Centers content horizontally */
     align-items: center;
     /* Centers content vertically */
     background-color: #f5f5f5;
     /* Example background */
 }

.navbar-brand {
    font-family: 'Poppins', sans-serif;
    /* Stylish font */
    font-size: 1rem;
    color: #2c3e50;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -1px -1px 2px rgba(255, 255, 255, 0.8);
    position: relative;
    transition: transform 0.5s ease, color 0.3s ease;
    /* Smooth transition for hover */
}

.navbar-brand:hover {
    color: #3498db;
    /* Change color on hover */
    transform: translateX(20px);
    /* Move slightly to the right */
    transition: transform 0.5s ease, color 0.3s ease;
    /* Control speed and smoothness */
}


         
.navbar-nav .nav-link {
    color: #000000;
    transition: color 0.3s ease, transform 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #0777ff;
    transform: translateX(10px);
    /* Move to the right by 10px */
    font-weight: bold;
}

       .navbar-toggler-icon{
        color: black;
       }

 .carousel-item img {
     height: 500px;
     object-fit: cover;
 }

 .card {
     border: none;
     transition: transform 0.3s ease;
 }

 .card:hover {
     transform: scale(1.05);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 .swiper {
     width: 100%;
     padding: 20px 0;
 }

 .swiper-slide img {
     width: 100%;
     height: 300px;
     object-fit: cover;
     border-radius: 10px;
 }

 footer {
     background-color: #343a40;
     color: white;
     padding: 20px 0;
     text-align: center;
 }

 footer a {
     color: #ffc107;
     text-decoration: none;
 }

 footer a:hover {
     text-decoration: underline;
 }


/* Style for toggle button */
.navbar-toggler {
    display: none;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

@media (max-width: 991.98px) {
    .navbar-toggler {
        display: block;
        /* Show only in smaller screens */
        position: relative;
        margin-left: auto;
        /* Align toggle button to the right */
        padding: 0.25rem;
    }

    .navbar-collapse {
        text-align: center;
    }

    .navbar-nav .nav-item {
        margin: 0.5rem 0;
        /* Add spacing between links */
    }
}


/* home page css */



/* about page css */
         body {
             font-family: 'Arial', sans-serif;
             background-color: #f8f9fa;
             overflow-x: hidden;
         }
    
         .section-header {
             font-size: 2.5rem;
             font-weight: bold;
             color: #343a40;
             text-align: center;
             margin-bottom: 2rem;
             animation: fadeIn 2s ease-in-out;
         }
    
         .content-container {
             display: flex;
             flex-wrap: wrap;
             align-items: center;
             justify-content: space-between;
         }
    
         .content-text {
             font-size: 1.2rem;
             line-height: 1.8;
             color: #555;
             animation: slideInLeft 1.5s ease;
         }
    
         .content-image img {
             width: 100%;
             max-width: 500px;
             border-radius: 15px;
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
             animation: slideInRight 1.5s ease;
         }
    
         .mission-vision {
             margin-top: 4rem;
             animation: fadeInUp 2s ease;
         }
    
         .icon-box {
             text-align: center;
             margin-bottom: 2rem;
             transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
    
         .icon-box:hover {
             transform: scale(1.1);
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
         }
    
         .icon-box i {
             font-size: 3rem;
             color: #007bff;
             margin-bottom: 1rem;
         }
    
         @keyframes fadeIn {
             from {
                 opacity: 0;
             }
    
             to {
                 opacity: 1;
             }
         }
    
         @keyframes slideInLeft {
             from {
                 transform: translateX(-100%);
                 opacity: 0;
             }
    
             to {
                 transform: translateX(0);
                 opacity: 1;
             }
         }
    
         @keyframes slideInRight {
             from {
                 transform: translateX(100%);
                 opacity: 0;
             }
    
             to {
                 transform: translateX(0);
                 opacity: 1;
             }
         }
    
         @keyframes fadeInUp {
             from {
                 transform: translateY(20px);
                 opacity: 0;
             }
    
             to {
                 transform: translateY(0);
                 opacity: 1;
             }
         }
/* about page css */



/* footer css */
  @keyframes float {
      0% {
          transform: translateY(0);
          opacity: 1;
      }

      50% {
          transform: translateY(-20px);
          opacity: 0.7;
      }

      100% {
          transform: translateY(0);
          opacity: 1;
      }
  }
/* footer css */


/*vision and mission css */
   /* General Styles */
   .icon-box {
       opacity: 0;
   }

   /* Animation for sliding in from the bottom */
   .animate-bottom {
       animation: slideInBottom 1.5s ease-in-out forwards;
   }

   /* Keyframes for bottom-to-top animation */
   @keyframes slideInBottom {
       from {
           transform: translateY(100%);
           opacity: 0;
       }

       to {
           transform: translateY(0);
           opacity: 1;
       }
   }


   .quick-links {
       text-align: left;
       /* Aligns the text to the left */
       padding-left: 20px;
       /* Optional: Adds padding from the left edge */
   }
/* vision  and ,ission css */


/*home page card css */


.card {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s, transform 0.6s;
}

.card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* home page card css */


/* gallery ekke css  */

  .bodys {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
      background: linear-gradient(135deg, #f0f0f0, #ffffff);
      overflow-x: hidden;
  }

  .hero-section {
      background: url('assest/hottel/rrtt.jpg') no-repeat center center/cover;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      /* Light text color */
      position: relative;
  }

  .hero-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      /* Dark overlay for better text contrast */
  }

  .hero-section h1 {
      font-size: 3.5rem;

      color: #ffffff;
      /* White text */
      text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
      /* Text shadow for better readability */
      z-index: 1;
  }



  /* Rooms Section */
  .rooms-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      padding: 60px 40px;
      animation: fadeIn 1s ease-in-out;
  }

  .room-card {
      background: white;
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transform: scale(0.95);
      transition: all 0.3s ease-in-out;
      overflow: hidden;
  }

  .room-card:hover {
      transform: scale(1.05);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  }

  .room-card img {
      width: 100%;
      border-radius: 10px;
      transition: transform 0.3s ease-in-out;
  }

  .room-card:hover img {
      transform: scale(1.1);
  }

  .room-card h2 {
      margin-top: 15px;
      font-size: 1.5rem;
      color: #333;
  }

  .room-card p {
      margin-top: 10px;
      font-size: 1rem;
      color: #666;
  }

  /* Testimonials Section */
  .testimonials-section {
      background: #f8f9fa;
      padding: 60px 40px;
      text-align: center;
  }

  .testimonial-card {
      background: white;
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      margin: 20px;
  }

  .testimonial-card img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-bottom: 15px;
  }

  .testimonial-card p {
      font-size: 1rem;
      color: #666;
  }

  .testimonial-card h4 {
      font-size: 1.2rem;
      color: #333;
      margin-top: 10px;
  }

  /* Call-to-Action Section */
  .cta-section {
      background: linear-gradient(135deg, #6a11cb, #2575fc);
      color: white;
      padding: 60px 40px;
      text-align: center;
  }

  .cta-section h2 {
      font-size: 2.5rem;
      margin-bottom: 20px;
  }

  .cta-section .btn {
      padding: 10px 30px;
      font-size: 1.2rem;
      background: white;
      color: #2575fc;
      border-radius: 25px;
  }

  /* Footer */
  footer {
      background: #333;
      color: white;
      padding: 40px 20px;
      text-align: center;
  }

  footer .social-icons a {
      color: white;
      margin: 0 10px;
      font-size: 1.5rem;
      transition: color 0.3s ease-in-out;
  }

  footer .social-icons a:hover {
      color: #2575fc;
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: translateY(30px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }


  .s-box {
      background: #121212;
      padding: 20px;
      border-radius: 12px;
      width: 650px;
      height: 450px;
      color: white;
      position: relative;
      box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2),
          0 10px 25px rgba(255, 255, 255, 0.1);
  }

        .o-box {
            background: #121212;
            padding: 20px;
            border-radius: 12px;
            width: 490px;
            height: 900px;
            color: white;
            position: relative;
            box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2),
                0 10px 25px rgba(255, 255, 255, 0.1);
        }


  .input-container {
      position: relative;
      width: 100%;
      margin: 20px 0;
  }

  .input-container input {
      width: 100%;
      padding: 10px;
      border: 2px solid #333;
      border-radius: 8px;
      background: #1e1e1e;
      color: #fff;
      font-size: 16px;
      transition: border-color 0.3s, background-color 0.3s;
  }

  .input-container input:focus {
      border-color: rgb(19, 82, 255);
      background-color: #2c2c2c;
      outline: none;
  }

  .input-container label {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
      background: transparent;
      padding: 0 5px;
      color: #aaa;
      font-size: 16px;
      pointer-events: none;
      transition: top 0.3s, font-size 0.3s, color 0.3s;
  }

  .input-container input:focus+label,
  .input-container input:not(:placeholder-shown)+label {
      top: -10px;
      font-size: 12px;
      color: rgb(255, 255, 255);
      /* font-weight: bold; */
      background-color: transparent;
      font-family: fantasy;
  }

/* gallery ekke css */



.login-box {
    background: #121212;
    padding: 20px;
    border-radius: 12px;
    width: 400px;
    height: 460px;
    color: white;
    position: relative;
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2),
        0 10px 25px rgba(255, 255, 255, 0.1);
}


.l-body {
    background-size: cover;
    height: 100vh;
    background-color: #121212;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}



 .l-btn {
     background: rgb(4, 165, 206);
     color: white;
     font-weight: bold;
     border: none;
     cursor: pointer;
     transition: 0.4s;
     position: relative;
     overflow: hidden;
     height: 35px;
     border-radius: 10px;
     width: 240px;
     margin-top: 30px;

 }

 .l-btn::before {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.3);
     transition: left 0.5s;
 }

 .l-btn:hover::before {
     left: 100%;
 }

 .l-btn:hover {
     background: #23e630;
     transform: translateY(-3px);
 }