/* 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 */
}


.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 */
}


.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 */
 }
 
 
 .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 */
   }
   
   
   .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 */
   }
   
   
   .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;
     }
   }
   
   
     }