/* Navbar Styles */
 .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100px; /* Fixed height */
    background-color: white;
    display: flex;
    align-items: center; /* Vertically center content */
    padding: 0 1rem; /* Padding for inner spacing */
    z-index: 1000; /* Ensure it stays on top of other elements */
    transform: translateY(-100%); /* Initially hidden by moving out of view */
    transition: transform 0.3s ease-in-out; /* Smooth transition when showing */
    border-bottom: 1px solid #f0f0f0;
  }
  
  
  .navbar.show {
    transform: translateY(0); /* Show the navbar */
  }
  
  .navbar a {
    color: white;
    text-decoration: none;
    padding: 0 15px;
  }
  
  .navbar-content {
    display: flex;
    align-items: center;
    width: 100%; /* Ensure content spans full navbar width */
  }
  
  .logo {
    display: flex;
    align-items: center; /* Vertically align items */
    margin-left: 1%;
  }

  .logo-text {
    text-align: center;
    margin-left: 5px;
}

  .logo-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
}
  
  /* Styling the "Stay" part */
  .staynav {
    color: var(--primary-color);
    font-size: 30px;
    font-family: 'Bangers', sans-serif!important;
    color: var(--red)
  }
  
  /* Styling the "$cale" part */
  .scalenav {
    color: var(--primary-color);
    font-size: 35px;
    font-family: 'Bangers', sans-serif!important;
    color: var(--red)
  }
  
  /* Start Hamburger Button */
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
      scale: 1;
    }
  
    75% {
      opacity: .25;
      scale: 1.10;
    }
  }
  
  /* Start Hamburger Button */
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
      scale: 1;
    }
  
    75% {
      opacity: .25;
      scale: 1.10;
    }
  }











  @media (min-width: 18in) and (max-width: 22in) {


 /* Navbar Styles */
 .navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  height: 100px; /* Fixed height */
  background-color: white;
  display: flex;
  align-items: center; /* Vertically center content */
  padding: 0 1rem; /* Padding for inner spacing */
  z-index: 1000; /* Ensure it stays on top of other elements */
  transform: translateY(-100%); /* Initially hidden by moving out of view */
  transition: transform 0.3s ease-in-out; /* Smooth transition when showing */
}


.navbar.show {
  transform: translateY(0); /* Show the navbar */
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 0 15px;
}

.navbar-content {
  display: flex;
  align-items: center;
  width: 100%; /* Ensure content spans full navbar width */
}

.logo {
  display: flex;
  align-items: center; /* Vertically align items */
  margin-left: 1%;
}

.logo-text {
  text-align: center;
  margin-left: 5px;
}

.logo-image {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* Styling the "Stay" part */
.staynav {
  color: var(--primary-color);
  font-size: 30px;
  font-family: 'Bangers', sans-serif!important;
  color: var(--red)
}

/* Styling the "$cale" part */
.scalenav {
  color: var(--primary-color);
  font-size: 35px;
  font-family: 'Bangers', sans-serif!important;
  color: var(--red)
}

/* Start Hamburger Button */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    scale: 1;
  }

  75% {
    opacity: .25;
    scale: 1.10;
  }
}

/* Start Hamburger Button */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    scale: 1;
  }

  75% {
    opacity: .25;
    scale: 1.10;
  }
}




  }










  @media (min-width: 15in) and (max-width: 18in) {



    /* Navbar Styles */
    .navbar {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%; /* Full width */
     height: 90px; /* Fixed height */
     background-color: white;
     display: flex;
     align-items: center; /* Vertically center content */
     padding: 0 1rem; /* Padding for inner spacing */
     z-index: 1000; /* Ensure it stays on top of other elements */
     transform: translateY(-100%); /* Initially hidden by moving out of view */
     transition: transform 0.3s ease-in-out; /* Smooth transition when showing */
   }
   
   
   .navbar.show {
     transform: translateY(0); /* Show the navbar */
   }
   
   .navbar a {
     color: white;
     text-decoration: none;
     padding: 0 15px;
   }
   
   .navbar-content {
     display: flex;
     align-items: center;
     width: 100%; /* Ensure content spans full navbar width */
   }
   
   .logo {
     display: flex;
     align-items: center; /* Vertically align items */
     margin-left: 1%;
   }
   
   .logo-text {
     text-align: center;
     margin-left: 5px;
   }
   
   .logo-image {
     width: 45px;
     height: 45px;
     object-fit: contain;
   }
   
   /* Styling the "Stay" part */
   .staynav {
     color: var(--primary-color);
     font-size: 25px;
     font-family: 'Bangers', sans-serif!important;
     color: var(--red)
   }
   
   /* Styling the "$cale" part */
   .scalenav {
     color: var(--primary-color);
     font-size: 30px;
     font-family: 'Bangers', sans-serif!important;
     color: var(--red)
   }
   
   /* Start Hamburger Button */
   @keyframes pulse {
     0%, 100% {
       opacity: 1;
       scale: 1;
     }
   
     75% {
       opacity: .25;
       scale: 1.10;
     }
   }
   
   /* Start Hamburger Button */
   @keyframes pulse {
     0%, 100% {
       opacity: 1;
       scale: 1;
     }
   
     75% {
       opacity: .25;
       scale: 1.10;
     }
   }
   
   
     }










     @media (min-width: 11in) and (max-width: 15in) {



      /* Navbar Styles */
      .navbar {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%; /* Full width */
       height: 80px; /* Fixed height */
       background-color: white;
       display: flex;
       align-items: center; /* Vertically center content */
       padding: 0 1rem; /* Padding for inner spacing */
       z-index: 1000; /* Ensure it stays on top of other elements */
       transform: translateY(-100%); /* Initially hidden by moving out of view */
       transition: transform 0.3s ease-in-out; /* Smooth transition when showing */
     }
     
     
     .navbar.show {
       transform: translateY(0); /* Show the navbar */
     }
     
     .navbar a {
       color: white;
       text-decoration: none;
       padding: 0 15px;
     }
     
     .navbar-content {
       display: flex;
       align-items: center;
       width: 100%; /* Ensure content spans full navbar width */
     }
     
     .logo {
       display: flex;
       align-items: center; /* Vertically align items */
       margin-left: 1%;
     }
     
     .logo-text {
       text-align: center;
       margin-left: 5px;
     }
     
     .logo-image {
       width: 40px;
       height: 40px;
       object-fit: contain;
     }
     
     /* Styling the "Stay" part */
     .staynav {
       color: var(--primary-color);
       font-size: 20px;
       font-family: 'Bangers', sans-serif!important;
       color: var(--red)
     }
     
     /* Styling the "$cale" part */
     .scalenav {
       color: var(--primary-color);
       font-size: 23px;
       font-family: 'Bangers', sans-serif!important;
       color: var(--red)
     }
     
     /* Start Hamburger Button */
     @keyframes pulse {
       0%, 100% {
         opacity: 1;
         scale: 1;
       }
     
       75% {
         opacity: .25;
         scale: 1.10;
       }
     }
     
     /* Start Hamburger Button */
     @keyframes pulse {
       0%, 100% {
         opacity: 1;
         scale: 1;
       }
     
       75% {
         opacity: .25;
         scale: 1.10;
       }
     }
     
     
       }










       
     @media (min-width: 6in) and (max-width: 11in) {



      /* Navbar Styles */
      .navbar {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%; /* Full width */
       height: 80px; /* Fixed height */
       background-color: white;
       display: flex;
       align-items: center; /* Vertically center content */
       padding: 0 1rem; /* Padding for inner spacing */
       z-index: 1000; /* Ensure it stays on top of other elements */
       transform: translateY(-100%); /* Initially hidden by moving out of view */
       transition: transform 0.3s ease-in-out; /* Smooth transition when showing */
     }
     
     
     .navbar.show {
       transform: translateY(0); /* Show the navbar */
     }
     
     .navbar a {
       color: white;
       text-decoration: none;
       padding: 0 15px;
     }
     
     .navbar-content {
       display: flex;
       align-items: center;
       width: 100%; /* Ensure content spans full navbar width */
     }
     
     .logo {
       display: flex;
       align-items: center; /* Vertically align items */
       margin-left: 1%;
     }
     
     .logo-text {
       text-align: center;
       margin-left: 5px;
     }
     
     .logo-image {
       width: 40px;
       height: 40px;
       object-fit: contain;
     }
     
     /* Styling the "Stay" part */
     .staynav {
       color: var(--primary-color);
       font-size: 20px;
       font-family: 'Bangers', sans-serif!important;
       color: var(--red)
     }
     
     /* Styling the "$cale" part */
     .scalenav {
       color: var(--primary-color);
       font-size: 23px;
       font-family: 'Bangers', sans-serif!important;
       color: var(--red)
     }
     
     /* Start Hamburger Button */
     @keyframes pulse {
       0%, 100% {
         opacity: 1;
         scale: 1;
       }
     
       75% {
         opacity: .25;
         scale: 1.10;
       }
     }
     
     /* Start Hamburger Button */
     @keyframes pulse {
       0%, 100% {
         opacity: 1;
         scale: 1;
       }
     
       75% {
         opacity: .25;
         scale: 1.10;
       }
     }
     
     
       }