/* * {
  border: #e6e9eeb7 1px solid;
} */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* Increased from 3rem to account for header height + padding */
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  /* Add padding to bottom of body to account for footer + message pane height */
  padding-bottom: calc(25rem); /* footer min-height (10rem + padding) + message pane height */
}


/* target smaller screen sizes (e.g. iPhones) */
@media screen and (max-width: 767px) {
  body {
    padding-bottom: calc(35rem); /* footer min-height (10rem + padding) + message pane height */
  }
}

@media screen and (max-width: 460px) {
  body {
    padding-bottom: calc(45rem); /* footer min-height (10rem + padding) + message pane height */
  }
}


video, #video-background {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 2%;
  margin: 0 auto;
  margin-bottom: 30px;
}

#home-section {
  /* make it sticky on top of page */
  position: sticky;
  top: 0;
  z-index: 1000; /* Ensure it stays above other content */
  background-color: white;
  padding: 1rem;
  box-shadow: #000000 0px 0px 10px 0px;
}

#home-section,
#services-section {
  scroll-margin-top: 5rem; /* Match the scroll-padding-top value */
}

#home-section img {
  width: 100px;
}

.top-bar {
  padding: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.top-bar,
.top-bar ul,
.title-bar,
.top-bar-left,
.top-bar-right,
.menu-icon {
  background-color: rgb(255, 255, 255) !important;
}

.top-bar a {
  /* color: #333; */
  transition: color 0.3s ease;
  font-size: 1.3rem;
  font-weight: bold;
  color: #000000;
}


#top-bar-container {
  display: flex;
  flex-direction: row;
  align-items:center;
  justify-content:space-between;
}

#home-section a {
  color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  text-align: left;
}

#home-section li > a {
  font-weight: 500;
  font-size: 1.2rem;
}

#home-section li > a:hover {
  font-weight: 500;
  font-size: 1.2rem;
  background-color: rgba(1, 204, 255, 0.3);
}

#logo-text
{
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-optical-sizing: auto;
  font-weight: 700;
  letter-spacing: 0.5rem;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  font-variation-settings:
  "wdth" 100;

}

#logo-subtext
{
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: 0.2rem;
  color:gray;
  /* uppercase */
  text-transform: uppercase;
  font-variation-settings:
    "wdth" 100;
}


/* target smaller screen sizes (e.g. iPhones) */
@media screen and (max-width: 767px) {
  .chicle-regular a {
    font-size: 2.5rem; /* smaller font size for smaller screens */
    font-weight: 100;
  }
}

@media screen and (max-width: 639px) {
  #image-2 { order: 2; }
  #text-2 { order: 1; }
}

@media screen and (max-width: 639px) {
  #image-4 { order: 2; }
  #text-4 { order: 1; }
}

.grid-container {
  width: 95%;
}

/* Make sure the menu doesn't have any default vertical margins/padding */
.menu {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.audio-control {
  position: fixed;
  right: 1rem; /* Distance from right edge */
  bottom: 1rem; /* Distance from bottom edge */
  z-index: 1000; /* Ensure it stays above all content */
}

#muteButton {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  font-size: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5); /* Semi-transparent background */
  border: 3px solid #43a5cc; /* White border */
  color: rgb(18, 26, 71);
}

img.showings {
  border-radius: 5%;
  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.75);
}



.footer-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;  /* Add this */
  right: 0;  /* Add this */
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #2b2a2a;  /* Match footer background */
}

.responsive-blog-footer {
  background: #2b2a2a;
  padding: 3rem 1rem 3rem 3rem;
  color: rgb(255, 255, 255);
  margin: 0;  /* Add this */
  min-height: 10rem;
  height: auto;
  width: 100%;
}

.blog-message-pane {
  background: #494949;
  padding: 1rem 1rem;
  color: rgb(163, 163, 163);
  font-weight: bold;
  width: 100%;
  margin: 0;  /* Add this */
}

/* Add this to ensure all content above the footer pushes it down */
.grid-container:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}

strong.white-color {
  color: rgb(255, 255, 255);
}


strong.link-color {
  color: rgb(102, 187, 236);
}

a.color-in-footing {
  color: rgb(255, 255, 255);
}

a.color-in-footing:hover {
  text-decoration: underline;
  text-decoration-color: rgb(122, 174, 216);

}