*{
  font-family:  "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
/* 1 *//* navbar product logo fonts  */
body{
  /* padding: 20px; */
  /* color: azure; */
  /* background: rgb(1, 9, 15); */
  background-color: rgb(7, 3, 46);
  font-family: 'Inter', sans-serif;  
  /* font-family:  "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif; */
  
}
.montserrat-subrayada-regular {
    font-family: "Cabin", serif;
    font-weight: 500;
    font-style: normal;
    font-size:x-large;
    /* color: #6c1af0; */
    color:  rgb(255, 255, 255);
  }
    /* search icon */
  .material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
  }
  .nav-link:hover,.nav-link:hover,.offcanvas-title:hover{
  color: #798be6 !important; /* Light purple text color */
  background-color: #303342de; /* Dark background color */
}

.nav-link,.offcanvas-title{
  font-family: 'Inter', sans-serif; /* Use 'Poppins', 'Roboto', or 'Nunito' as alternatives */
  font-size: 16px;
  width: 100%;
  /* color: #8899f0; Light purple text color */
  /* background-color: #303342ce; Dark background color */
  padding: 10px 16px; /* Add some padding for spacing */
  border-radius: 8px; /* Rounded corners for the container */
  text-align: left; /* Left-align the text */
  display: inline-block; /* To fit around the text */
  margin: 0; /* Remove default margins */
  cursor: pointer; /* Add pointer cursor on hover */
  transition: all 0.3s ease-in-out; /* Smooth transition for hover effect */
} 

/* dropdown-menu */
.dropdown-menu{
  border: none;
  margin-left: 50px; 
  background: #794d4d00;
  transition: all 0.7s ease-in-out; /* Smooth transition for hover effect */ 
}
.dropdown-menu li {
  font-size:small;
}

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #062f42;
  color: white;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
tr:hover {
  background-color: #ddd;
}

 @media screen and (orientation: landscape) {
  /* OLD: margin-left:20% → NEW: handled by .hn-page-body */
  .table-container  { width: 100%; margin-left: 0; }
  .container-table  { max-width: 100%; margin-left: 0; }
  .payment-bg       { margin-left: 0; }
}

/*2*//* HOME PAGE STYLE */
  /* CARD  */
  /* Style for the card container */
.card-container {
  display: grid; /* Use grid layout */
  gap: 20px; /* Space between cards */
  grid-template-columns: repeat(2, 1fr); /* 4 cards in a row by default */
  padding: 20px; /* Padding around the container */
  margin: 0 auto; /* Center the container */
  max-width: 1200px; /* Optional: Limit the width of the layout */
}

/* Style for individual cards */
.card {
  color: white ; /* Text color */  
  font-family: "Poppins", serif;
  font-weight: 200;
  font-style: normal; 
  padding: 15px;
  border-radius: 8px; /* Rounded corners */
  text-align: center; 
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); Shadow for depth */
  transition: transform 0.3s ease; /* Smooth hover effect */
}
.card-1{
  background-color: #f0e54521; /* Purple background */
  border: solid 1px #ffd41275;
}

.card-2{
  background-color: #1fcc761f; /* Purple background */
  border: solid 1px  #28d17d63;
}

.card-3{
  background-color: #6998f02a; /* Purple background */
  border: solid 1px #2871f8b2;
}

.card-4{
  background-color: #ac67a62d; /* Purple background */
  border: solid 1px #ce1abf60;
}

.card-5{
  background-color: #11b7bd33; /* Purple background */
  border: solid 1px #11b7bd73;
}
.card-6{
  background-color: #f81f172f; /* Purple background */
  border: solid 1px #ff08006e;
}

/* Hover effect for cards */
.card:hover {
  transform: scale(1.02); /* Slightly enlarge on hover */
}

/* Responsive design for portrait view */
@media (max-width: 768px) {
  .card-container {
    grid-template-columns: 1fr; /* One card per row */
  }
  
  
}


  

/* ALL BEDS VIEW PAGE */
  
 table { width: 100%; border-collapse: collapse; margin-bottom: 20px; background: #fff;border-radius: 10px;  }
 .occupied { background-color: #ffebeb; color: #d9534f;}
 .available { background-color: #eaffea; color: #5cb85c;}

 /*  *//* all rooms */
      .card-container-room{
        display: grid; /* Use grid layout */
        gap: 20px; /* Space between cards */
        grid-template-columns: repeat(4, 1fr); /* 4 cards in a row by default */
        padding: 10px; /* Padding around the container */
        margin: 0 auto; /* Center the container */
        max-width: 1200px; /* Optional: Limit the width of the layout */
      }
      .card-room{
        padding: 5px;
      }
      .card-room-occupied{
        color: #021e2b;
        background-color: #0dcaf0; /* Purple background */
        border: solid 1px #0dcaf0;
      }
    
      
      .card-room-available{
        background-color:#0dcaf034; /* Purple background */
        border: solid 1px #0dcaf0;
      }

      /* Responsive design: Show 2 cards per row on smaller screens */
      @media screen and (max-width: 768px) { 
        .card-container-room {
            grid-template-columns: repeat(2, 1fr); /* 2 cards in a row on mobile */
        }
      }

      /* Extra small screens: Show 1 card per row (optional) */
      @media screen and (max-width: 480px) { 
        .card-container-room {
            grid-template-columns: repeat(2, 1fr); /* 1 card per row for very small screens */
        }
      }

      /* fllor select drop down hover */
      .drop-item:hover{
        background-color: #021e2b;
        color: #0dcaf0;
      }
      /* revenue page */
.revenue-heading{
  color: white;
  font-family: "Poppins", serif;
  text-align: center;
}



/* NEW FLOOR  */
.new-form-heading{
  color: #021e2b;
  font-size:x-large;
  font-family: "Poppins", serif;
  text-align: center;
}
.form-label , .form-select{
  color: #021e2b;
}


/* ///////Navabar/////////////////////////// */



/* 
.navbar-nav{
    margin:16px auto;
    
} */
/* /////////PRODUCT LOGO  */
.montserrat-subrayada-regular {
    font-family:"Inter", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size:x-large!important;
    /* color: #000!important; */
  }
/* NAVBAR ITEMS */
.nav-item {
   margin: auto 0;
}
/* NAVBAR-LINKS ENABLE -->ALL*/
.nav-link{
   font-family: "Inter", sans-serif !important;
   font-size:medium !important;
   color: hsl(150, 1%, 38%) !important;
   margin: 0 10px;
   transition: 0.3s ease-in-out;
}
.dark-mode{
    margin:  auto 0;
    border: none;
    font-size: x-large;
    background: none;
}
/* Sign up Button*/
.login-btn{ 
    margin: auto 8px;
    font-family: "Inter", sans-serif !important;
    background:#09B850 !important; 
    color: #fff !important;
}
/* Sign up Button*/
.signup-btn{
    margin: auto 8px;
    font-family: "Inter", sans-serif !important;
    color: #000;
    transition: 0.3s ease-in-out;
}
/* HOVER  FOR NAVBAR*/
.nav-link:hover{
    color: #09B850 !important;
    border-radius: 5px;
}

.signup-btn:hover{
    background-color: #beccc4 !important;
    border-radius: 5px;
}

.login-btn:hover{
    background-color: #00a141 !important;
    border-radius: 5px;
}
/*  */
 /* Loader Fullscreen */
#loader {
    /* transition: 0.3s ease-in-out; */
    position: fixed;
    width: 100%;
    height: 60vh;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Logo & Brand Name in One Line */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Logo Image */
.logo-container img {
    height: 5rem;
    border-radius: 50%;
}

/* Brand Name */
.logo-container a {
    font-size: 2.5rem !important;
    font-weight: bold;
    text-decoration: none;
    color: black;
}

/* Spinner Container */
.spinner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
/* Custom Spinner Color */
.custom-spinner {
    color: #09B850 !important;  /* Changes the color of the spinner */
}
.custom-spinner::before {
    background-color: #09B850 !important; /* Ensures background also changes */
}
/* FLYING LOGO  */ 
.bird-container {
    position: absolute;
    animation: fly-top-left 3s ease-in-out forwards, disappear 2s ease-in-out 3s forwards;
}

/* Bird image styling */
.bird-logo {
    width: 80px;
    animation: flap 0.2s infinite alternate ease-in-out;
}

/* Flapping Wings Effect */
@keyframes flap {
    0% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(1.1);
    }
}

/* Flying Path: Bird moves to the top-left corner */
@keyframes fly-top-left {
    from {
        top: 80vh;
        left: 100vw;
        transform: rotate(0deg);
    }
    25% {
        top: 60vh;
        left: 75vw;
        transform: rotate(-15deg);
    }
    50% {
        top: 40vh;
        left: 50vw;
        transform: rotate(-20deg);
    }
    75% {
        top: 20vh;
        left: 25vw;
        transform: rotate(-25deg);
    }
    to {
        top: 0vh;
        left: 0vw;
        transform: rotate(-30deg);
    }
}

/* Bird disappears after 3 seconds */
@keyframes disappear {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        display: none;
    }
}
.product-logo {
    opacity: 0;
    transform: translateX(-100px); /* Start 100px left */
    transition: opacity 1s ease-in, transform 1s ease-out;
}
.product-logo.show {
    opacity: 1;
    transform: translateX(0); /* Move to original position */
}

/* //////////////////////////////Main Home Page    */
/* * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} */

/*SECTION 1 */
.container1{
    display: flex;
    flex-wrap: wrap;
    width: 90vw; 
    margin: 0 auto ;
    margin-top: 50px;
}
.box {
    padding: 10px;
    color: white;
    text-align: center;
    height: auto;
}
.posterBox-1{
    /* background-color: blue; */
    width: 60%;
}

.posterBox-2 {
    /* background-color: green; */
    width: 40%;
}

/* Responsive: On small screens, box2 moves below box1 */
@media (max-width: 768px){
    .posterBox-1,.posterBox-2  {
        width: 100%;
    }
}

/* BANNER */
.banner-section-1{
    margin-top: 20px;
    /* background-color: rgb(255, 0, 212); */
    height: 100%;
    width: 100%;
}

.banner-heading-1{
    font-family: "Inter", sans-serif !important;
    color: #000;
    transition: 0.3s ease-in-out;
    text-align: start;
}

.banner-heading-2{
    padding: 10px;
    width: 90%;
    font-family: "Instrument Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 55px;
    color: #000;
    text-align: start;
    display: grid;
    justify-content:start;
    font-style: normal;
}
.sub-banner-heading-2{
    font-family: "Instrument Sans", sans-serif;
    color: #09B850;
}
.banner-heading-3 {
    color:#606261;
     text-align: start;
}
/* email box design */

.input-container {
    display: flex;
    padding: 8px;
    width:80%; /* Adjust width as needed */
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden; /* Ensures rounded corners */
    background-color: white;
    font-family: "Inter", sans-serif !important;
}

.input-container input {
    flex: 1;
    padding: 8px;
    border: none;
    outline: none;
    font-size: 16px;
    color: #555;
}

.input-container button {
    padding: 12px 20px;

} 

/* feature box design */

.feature-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    max-width: 600px; /* Adjust width as needed */
    margin: 50px auto;
    flex-wrap: wrap; /* Allows wrapping on small screens */
}

.feature-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1; /* Makes them take equal space */
    min-width: 250px; /* Prevents items from becoming too small */
}

.feature-icon {
    width: 60px;
    height: 60px;
    /* background-color: #00C853; Green color */
    /* border-radius: 50%; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-icon img {
    width: 100%;
}

.feature-text h4 {
    text-align: start;
    color: #000;
    font-size: larger;
    font-weight: bold;
    font-family: "Instrument Sans", sans-serif;
}

.feature-text p {
    text-align: start;
    font-size: 14px;
    color: #606261;
    font-family: "Inter", sans-serif !important;
}

/* Responsive: Stack on mobile */
@media (max-width: 600px) {
    .feature-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .feature-box {
        width: 100%;
    }
}
/*///Visitor Count//////////////////////////////////////////  */
.visitor-card {
    display: grid;
    align-items: center;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border-radius: 10px;
    width: fit-content;
    font-family: "Instrument Sans", sans-serif;
}
.sub-visitor-card{
    display: flex;
    gap: 10;
}
.visitor-count {
    font-size: 20px;
    font-weight: bold;
    margin: 10px;
}
.visitor-images {
    display: flex;
    align-items: center;
    margin-right: 10px;
}
.visitor-images img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid white;
    margin-left: -8px;
}
.visitor-text {
    font-family: "Inter", sans-serif !important;
    font-size: 16px;
}
/* FEATURES LIST */
.features-section {
    width: 90vw;
    margin: 0 auto;
    margin-top:30px ;
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 20px;
    background: #fff;
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */
    border-radius: 10px;
}
.status-badge {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  color: white;
  text-align: center;
  vertical-align: middle;
}

/* Optional: different colors (can also use Bootstrap bg-classes) */
.bg-success { background-color: #22C55E; }
.bg-danger  { background-color: #DC2626; }
.bg-warning { background-color: #FACC15; color: #1F2937; } /* dark text for yellow */

.features-heading {
    width: 40%;
    /* margin: 0 auto; */
    font-family: "Instrument Sans", sans-serif;
    font-size:xx-large;
    font-weight: 700;
    color: #000000;
}

.features-container{
    width: 60%;
    display: flex;
    gap: 20px;
}
.feature-item {
    font-family: "Inter", sans-serif !important;
    font-size: larger;
    text-align: center;
}
.feature-item img {
    width: 100px;
    height: 100px;
    filter: grayscale(0%);
    transition: 0.6s;
}

.feature-item img:hover {
    filter: grayscale(50%);
}

/* Responsive: Stack on mobile */
@media (max-width: 600px) {
    .features-section {
        width: 100vw;
        flex-direction: column;
        align-items: flex-start;
    }

    .features-heading , .features-container{
        width: 100%;
    }
}