@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
}
.ban{
    background-color:#770016;
}  
.ban2{
  background-color:#50236f;
}  

.navbar {
      position: sticky;
      top: 08px;
      left: 0px;
      right: 0px;
      z-index: 1000;
      border-radius: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      background-color: #FBFAF2;
      margin: 0px 10px;
      
      
    }

    .logo-title {
      display: flex;
      align-items: center;
    }

    .logo-title img {
   width: 20%;

    }
    .available-rooms{
      width: 100%;
      margin-top: 30px;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    .room{
      width: 80%;
      background-color: #FBFAF2;
      margin: 20px;
      display: flex;
      border-radius: 5px;
    }
    .room-left{
      width: 70%;
      margin: 20px;
      display: flex;
      flex-direction:column ;
    }
    .room-right{
      width: 30%;
      display: flex;
      align-items: center;
    }
    .room-right img{
      width: 80%;
    }
    .room-texts{
      display: flex;
      margin-top: 10px;
      
    }
    .type{
      font-size: 30px;
      font-weight: 600;
    }
    .limit{
      font-size: 20px;
      font-weight: 400;
      background-color: #e7e2e2;
      margin-right: 10px;

    }
    .in-out{
      font-size: 20px;
      font-weight: 400;
      background-color: #e7e2e2;
    }
    .buttons{
      margin-top: 10px;
      display: flex;
      margin-bottom: 10px;
    }
    .price-p{
      margin-top: 10px;
      font-size: 10px;
    }
    .price{
      font-weight: 600;
      font-size: 25px;
    }
    .view-btn{
      background-color: #d2e823;
      padding-left: 10px;
      padding-bottom: 5px;
      padding-right: 10px;
      padding-top: 5px;
      border-radius: 15px;
      font-size: 15px;
      border: 0;
      color: white;
    }
    
    .book-btn{
      margin-left: 20px;
      background-color: #e9c0ea;
      padding-left: 10px;
      padding-bottom: 5px;
      padding-right: 10px;
      padding-top: 5px;
      border-radius: 15px;
      font-size: 15px;
      border: 0;
      color: white;
    }

    .notavail p{
      margin-top:30px;
      margin-bottom: 30px;
    }


    .logo-title h1 {
      font-size: 30px;
    }

    .signup-signin {
      display: flex;
      
      
    }

    .signup-signin button {
      margin-left: 15px;
      padding-top: 15px;
      padding-bottom: 15px;
      padding-right: 15px;
      padding-left: 15px;
      border-radius: 25px;
      outline: none;
     
      border: none;
      margin-right: 20px;
        
    }
    body{
        background-color:white;
    }
    .navbar a{
        text-decoration: none;
        
        font-size: 25px;
        
    }
    .bt1{
        background-color: rgb(231, 226, 226);
        
    }
    .bt1 a{
        color: black;
    }
    .bt2{
        background-color: black;
    }
    .bt2 a{
        color: white;
    }
    .form-container {
        width: 500px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-top: 50px;
        margin-left: 100px;
        border: none;
      }
      
      .form-group {
        margin-bottom: 15px;
      }
      
      .form-control {
        width: 100%;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;

      }
      
      .btn {
        background-color: #007bff;
        color: white;
        padding: 20px 15px;
        border: 1px solid #007bff;
        border-radius: 4px;
        cursor: pointer;
        width: 100%;
        font-size: 20px;
      }
      
      .btn:hover {
        background-color: #0069d9;
      }
      
      .form-control:focus {
        border-color: #007bff;
      }
      
      .btn:focus {
        background-color: #0069d9;
        border-color: #0069d9;
      }
      .tittle{
        color: white;
        text-align: center;
        font-size: 20px;
        padding: 10px;
      }
      h2{
        text-align: center;
        padding: 30PX;
        color:white;
        font-size: 50px;
      }
      .bar{
        display: flex;
        width: 100%;
        border: none;
    }
   img{
        width: 800px;
        margin-right: 100px;
        margin-bottom: 10px;
    }
    .image{
        width: 50%;
    }







    /*check availabel*/
    .box-cont{
        justify-content: center;
        display: flex;
    }
    .box-cont a{
        text-decoration: none;
        color: #fff;
        background-color: #007bff;

        padding: 10px;
        border-radius: 25px;
        font-size: 25px;
        margin: 10px;
    }
    .btn-cont{
        display: flex;
        justify-content: space-evenly;
        margin-top: 10px;
    }
    .chl-cont{
        display: flex;
        justify-content: center;
        border: 1px solid black;
        width: 50%;
        padding: 2%;
        background-color:maroon;
        box-shadow: 0 5px 20px 1px rgba(0, 0, 0, 0.4);
        border-radius: 10px;
        gap: 150pt;
        margin-bottom: 50px;
        
    }
    .hd{
        font-size: 50px;
        color: #fff;
    }
    .max{
        color: black;
        background-color: #e7e2e2;
        font-size: 25px;
        text-align: center;
        border-radius: 20px;
    }
    .avl-room{
        width: 30%;
        margin-right: 10px;
        
    }
    .frm-to{
        background-color: #e7e2e2;
        font-size: 25px;
        border-radius: 20px;
        text-align: center;
        margin-top: 10px;
    }
    .avl{
        text-align: center;
        padding: 10px;
    }
    @media (max-width:1000px) 
      
       {

.navbar {
      position: sticky;
      
    border-radius: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      background-color: #FBFAF2;
    
      
    }
    .navbar a{
        font-size: 20px;
        
    }
    .signup-signin button {
        
        padding-top: 15px;
        padding-bottom: 15px;
        border-radius: 20px;
        outline: none;
        margin-right: 0px;
        border: none;
        padding-left: 10px;
        padding-right: 10px;
          
      }
      .image {
        display: none;
      }
      .form-container {
        width: 500px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 4px;
        border: none;
      }
      
      .form-group {
        margin-bottom: 15px;
      }
      
      .form-control {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
      }
      
      .btn {
        background-color: #007bff;
        color: white;
        padding: 10px 15px;
        border: 1px solid #007bff;
        border-radius: 4px;

        cursor: pointer;
      }
      
      .btn:hover {
        background-color: #0069d9;
      }
      
      .form-control:focus {
        border-color: #007bff;
      }
      
      .btn:focus {
        background-color: #0069d9;
        border-color: #0069d9;
      }
      .bar{
        border:none;
      }
      
      .chl-cont{
        display: flex;
        justify-content:space-evenly;
        border: 1px solid black;
        width: 80%;
        padding: 2%;
        background-color: #547988;
        box-shadow: 0 5px 20px 1px rgba(0, 0, 0, 0.4);
        border-radius: 10px;
        gap: 0px;
        
        
    }
    .hd{
        font-size:30px;
        color: #fff;
    }
    .max{
        color: black;
        background-color: #e7e2e2;
        font-size: 25px;
        text-align: center;
        border-radius: 20px;
    }
    .avl-room{
        width: 40%;
        
        
    }
    .frm-to{
        background-color: #e7e2e2;
        font-size: 25px;
        border-radius: 20px;
        text-align: center;
        
    }
    .room-texts{
      display: flex;
      margin-top: 10px;
      flex-direction: row;
    }
    .box-cont{
        justify-content: center;
        display: flex;
    }
    .box-cont a{
        text-decoration: none;
        color: #fff;
        background-color: #007bff;

        padding: 6px;
        border-radius: 25px;
        font-size: 14px;
        
    }
    .btn-cont{
        display: flex;
        justify-content: space-evenly;
        margin-top: 10px;
    }
    .avl{
        text-align: center;
        color: black;
        margin: 10px;
    }
    .navbar h1{
        font-size: 20px;
    }
    .chl-cont{
        background-color: maroon;
        
    }
      }