/* Center only the announcement section */
.announcement-section {
    display: flex; /* Enable flexbox for the section */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    min-height: 1200px;
    height: 100vh; /* Full viewport height */
  }
  
  /* Centered content container */
  .fullscreen-section {
    text-align: center; /* Center text */
    max-width: 1600px; /* Ensure responsiveness */
    padding: 20px; /* Add some padding */
    word-spacing: .25rem;
    margin-top: 0px;
  }
  
  /* Style for Stay */
  .stay {
    font-family: 'Bangers', cursive; /* Apply Bangers font */
    font-size: 5rem; /* Smaller size for "Stay" */
    margin-right: -10px;
    color: var(--red); /* Use defined red color */
  }
  
  /* Style for Scale */
  .scale {
    font-family: 'Bangers', cursive; /* Apply Bangers font */
    font-size: 9rem; /* Larger size for "Scale" */
    margin-right: 3px;
    color: var(--red); /* Use defined red color */
  }
  
  p {
    font-size: 4.5rem;
    color: var(--grey); /* Use defined grey color */
  }
  
/* Rotating Services Wrapper */
.rotating-services-wrapper {
  display: inline-flex;
  width: 700px; /* Fixed width for the rotating text container */
  text-align: left;
  justify-content: center;
  justify-items: center;
}

/* Rotating Services Text */
.rotating-services {
  display: inline-block;
  white-space: nowrap;
  width: 100%; /* Ensure it occupies the fixed-width container */
  transform: translateY(-100%); /* Start position above view */
  animation: slideInOut 6s ease-in-out infinite;
  color: var(--red);
  line-height: 1;
}

/* Keyframes for Sliding Animation */
@keyframes slideInOut {
  0% {
    transform: translateY(-100%); /* Start above view */
    opacity: 0;
  }
  10%, 80% {
    transform: translateY(0%); /* Fully visible */
    opacity: 1;
  }
  90%, 100% {
    transform: translateY(100%); /* Exit below view */
    opacity: 0;
  }
}






/* Button Styles */
.cta-button {
    padding: 15px 25px;
    font-size: 1.5rem;
    color: #fff;
    background-color: var(--red);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  
  .cta-button:hover {
    background-color: var(--hover-button-color);
    transform: translateY(-2px);
  }
  
  .cta-button:active {
    transform: translateY(1px); /* Slight push-down effect on click */
  }
  
  
  .bottom-image {
    width: 100vw;
    height: auto;
  }


  .c{
    width: 100px;
    height: auto;
  }








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



    /* Center only the announcement section */
.announcement-section {
  display: flex; /* Enable flexbox for the section */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  min-height: fit-content;
  min-height: 1000px;
  height: 100vh; /* Full viewport height */
}

/* Centered content container */
.fullscreen-section {
  text-align: center; /* Center text */
  max-width: 1500px; /* Ensure responsiveness */
  padding: 20px; /* Add some padding */
  word-spacing: .25rem;
  margin-top: 0px;
}

/* Style for Stay */
.stay {
  font-family: 'Bangers', cursive; /* Apply Bangers font */
  font-size: 4.75rem; /* Smaller size for "Stay" */
  margin-right: -10px;
  color: var(--red); /* Use defined red color */
}

/* Style for Scale */
.scale {
  font-family: 'Bangers', cursive; /* Apply Bangers font */
  font-size: 8.5rem; /* Larger size for "Scale" */
  margin-right: 3px;
  color: var(--red); /* Use defined red color */
}

p {
  font-size: 4rem;
  color: var(--grey); /* Use defined grey color */
}

/* Rotating Services Wrapper */
.rotating-services-wrapper {
display: inline-flex;
width: 600px; /* Fixed width for the rotating text container */
text-align: left;
justify-content: center;
justify-items: center;
}

/* Rotating Services Text */
.rotating-services {
display: inline-block;
white-space: nowrap;
width: 100%; /* Ensure it occupies the fixed-width container */
transform: translateY(-100%); /* Start position above view */
animation: slideInOut 6s ease-in-out infinite;
color: var(--red);
line-height: 1;
}

/* Keyframes for Sliding Animation */
@keyframes slideInOut {
0% {
  transform: translateY(-100%); /* Start above view */
  opacity: 0;
}
10%, 80% {
  transform: translateY(0%); /* Fully visible */
  opacity: 1;
}
90%, 100% {
  transform: translateY(100%); /* Exit below view */
  opacity: 0;
}
}






/* Button Styles */
.cta-button {
  padding: 15px 25px;
  font-size: 1.35rem;
  color: #fff;
  background-color: var(--red);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.cta-button:hover {
  background-color: var(--hover-button-color);
  transform: translateY(-2px);
}

.cta-button:active {
  transform: translateY(1px); /* Slight push-down effect on click */
}


.bottom-image {
  width: 100vw;
  height: auto;
}


.c{
  width: 90px;
  height: auto;
}



  }



















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



    /* Center only the announcement section */
.announcement-section {
  display: flex; /* Enable flexbox for the section */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  min-height: fit-content;
  min-height: 800px;
  height: 100vh; /* Full viewport height */
}

/* Centered content container */
.fullscreen-section {
  text-align: center; /* Center text */
  max-width: 1200px; /* Ensure responsiveness */
  padding: 20px; /* Add some padding */
  word-spacing: .1rem;
  margin-top: 0px;
}

/* Style for Stay */
.stay {
  font-family: 'Bangers', cursive; /* Apply Bangers font */
  font-size: 3.95rem; /* Smaller size for "Stay" */
  margin-right: -10px;
  color: var(--red); /* Use defined red color */
}

/* Style for Scale */
.scale {
  font-family: 'Bangers', cursive; /* Apply Bangers font */
  font-size: 6.1rem; /* Larger size for "Scale" */
  margin-right: 3px;
  color: var(--red); /* Use defined red color */
}

p {
  font-size: 3.35rem;
  color: var(--grey); /* Use defined grey color */
}

/* Rotating Services Wrapper */
.rotating-services-wrapper {
display: inline-flex;
width: 460px; /* Fixed width for the rotating text container */
text-align: left;
justify-content: center;
justify-items: center;
}

/* Rotating Services Text */
.rotating-services {
display: inline-block;
white-space: nowrap;
width: 100%; /* Ensure it occupies the fixed-width container */
transform: translateY(-100%); /* Start position above view */
animation: slideInOut 6s ease-in-out infinite;
color: var(--red);
line-height: 1;
}

/* Keyframes for Sliding Animation */
@keyframes slideInOut {
0% {
  transform: translateY(-100%); /* Start above view */
  opacity: 0;
}
10%, 80% {
  transform: translateY(0%); /* Fully visible */
  opacity: 1;
}
90%, 100% {
  transform: translateY(100%); /* Exit below view */
  opacity: 0;
}
}






/* Button Styles */
.cta-button {
  padding: 13px 23px;
  font-size: 1.3rem;
  color: #fff;
  background-color: var(--red);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.cta-button:hover {
  background-color: var(--hover-button-color);
  transform: translateY(-2px);
}

.cta-button:active {
  transform: translateY(1px); /* Slight push-down effect on click */
}


.bottom-image {
  width: 100vw;
  height: auto;
}


.c{
  width: 80px;
  height: auto;
}



  }














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



    /* Center only the announcement section */
.announcement-section {
  display: flex; /* Enable flexbox for the section */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  min-height: fit-content;
  min-height: 690px;
  height: 100vh; /* Full viewport height */
}

/* Centered content container */
.fullscreen-section {
  text-align: center; /* Center text */
  max-width: 1200px; /* Ensure responsiveness */
  padding: 20px; /* Add some padding */
  word-spacing: .25rem;
  margin-top: 0px;
}

/* Style for Stay */
.stay {
  font-family: 'Bangers', cursive; /* Apply Bangers font */
  font-size: 3.75rem; /* Smaller size for "Stay" */
  margin-right: -10px;
  color: var(--red); /* Use defined red color */
}

/* Style for Scale */
.scale {
  font-family: 'Bangers', cursive; /* Apply Bangers font */
  font-size: 6rem; /* Larger size for "Scale" */
  margin-right: 3px;
  color: var(--red); /* Use defined red color */
}

p {
  font-size: 3rem;
  color: var(--grey); /* Use defined grey color */
}

/* Rotating Services Wrapper */
.rotating-services-wrapper {
display: inline-flex;
width: 460px; /* Fixed width for the rotating text container */
text-align: left;
justify-content: center;
justify-items: center;
}

/* Rotating Services Text */
.rotating-services {
display: inline-block;
white-space: nowrap;
width: 100%; /* Ensure it occupies the fixed-width container */
transform: translateY(-100%); /* Start position above view */
animation: slideInOut 6s ease-in-out infinite;
color: var(--red);
line-height: 1;
}

/* Keyframes for Sliding Animation */
@keyframes slideInOut {
0% {
  transform: translateY(-100%); /* Start above view */
  opacity: 0;
}
10%, 80% {
  transform: translateY(0%); /* Fully visible */
  opacity: 1;
}
90%, 100% {
  transform: translateY(100%); /* Exit below view */
  opacity: 0;
}
}






/* Button Styles */
.cta-button {
  padding: 12px 22px;
  font-size: 1.25rem;
  color: #fff;
  background-color: var(--red);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.cta-button:hover {
  background-color: var(--hover-button-color);
  transform: translateY(-2px);
}

.cta-button:active {
  transform: translateY(1px); /* Slight push-down effect on click */
}


.bottom-image {
  width: 100vw;
  height: auto;
}


.c{
  width: 70px;
  height: auto;
}



  }










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



    /* Center only the announcement section */
.announcement-section {
  display: flex; /* Enable flexbox for the section */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  min-height: fit-content;
  min-height: 690px;
  height: 100vh; /* Full viewport height */
}

/* Centered content container */
.fullscreen-section {
  text-align: center; /* Center text */
  max-width: 1200px; /* Ensure responsiveness */
  padding: 20px; /* Add some padding */
  word-spacing: .25rem;
  margin-top: 0px;
}

/* Style for Stay */
.stay {
  font-family: 'Bangers', cursive; /* Apply Bangers font */
  font-size: 3.75rem; /* Smaller size for "Stay" */
  margin-right: -10px;
  color: var(--red); /* Use defined red color */
}

/* Style for Scale */
.scale {
  font-family: 'Bangers', cursive; /* Apply Bangers font */
  font-size: 6rem; /* Larger size for "Scale" */
  margin-right: 3px;
  color: var(--red); /* Use defined red color */
}

p {
  font-size: 3rem;
  color: var(--grey); /* Use defined grey color */
}

/* Rotating Services Wrapper */
.rotating-services-wrapper {
display: inline-flex;
width: 460px; /* Fixed width for the rotating text container */
text-align: left;
justify-content: center;
justify-items: center;
}

/* Rotating Services Text */
.rotating-services {
display: inline-block;
white-space: nowrap;
width: 100%; /* Ensure it occupies the fixed-width container */
transform: translateY(-100%); /* Start position above view */
animation: slideInOut 6s ease-in-out infinite;
color: var(--red);
line-height: 1;
}

/* Keyframes for Sliding Animation */
@keyframes slideInOut {
0% {
  transform: translateY(-100%); /* Start above view */
  opacity: 0;
}
10%, 80% {
  transform: translateY(0%); /* Fully visible */
  opacity: 1;
}
90%, 100% {
  transform: translateY(100%); /* Exit below view */
  opacity: 0;
}
}






/* Button Styles */
.cta-button {
  padding: 12px 22px;
  font-size: 1.25rem;
  color: #fff;
  background-color: var(--red);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.cta-button:hover {
  background-color: var(--hover-button-color);
  transform: translateY(-2px);
}

.cta-button:active {
  transform: translateY(1px); /* Slight push-down effect on click */
}


.bottom-image {
  width: 100vw;
  height: auto;
}


.c{
  width: 80px;
  height: auto;
}



  }