/*
 * Final override for mobile landscape: size the green overlay to 60% of the hero
 *
 * This duplicate rule at the end of the stylesheet ensures that no matter
 * what earlier declarations exist, the overlay box stays at 60% of the
 * hero’s height on landscape phones.  The rest of the properties match
 * previous adjustments so that the overlay remains centered and the call‑to‑action
 * button is visible.
 */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-desktop {
    display: block !important;
  }
  .hero-mobile {
    display: none !important;
  }
  .hero {
    /* Allow the hero to expand naturally based on its content to prevent
       the green overlay or call‑to‑action from being clipped in
       landscape. */
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    margin-bottom: 14px !important;
    border-bottom: none !important;
  }
  .hero-desktop .hero-text-box {
    width: 80vw !important;
    max-width: 90vw !important;
    height: 40% !important;
    overflow: auto !important;
  }
  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 700px !important;
  }
  .hero-content .btn {
    display: inline-flex !important;
    margin-top: 1rem !important;
  }
}
/*
 * Final override: landscape mobile hero sizing
 *
 * Placed at the end of the stylesheet to ensure it takes precedence over
 * earlier declarations.  This rule preserves the overlay hero layout on
 * phones held sideways by increasing the hero height and widening the
 * green text box, while keeping the button visible.
 */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-desktop {
    display: block !important;
  }
  .hero-mobile {
    display: none !important;
  }
  .hero {
    min-height: 75vh !important;
    overflow: visible !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    margin-bottom: 14px !important;
    border-bottom: none !important;
  }
  .hero-desktop .hero-text-box {
    /* Limit the overlay height to 40% of the hero so it doesn’t run off
       the top or bottom of the image on landscape phones.  Width
       adjustments ensure the long heading wraps cleanly. */
    width: 80vw !important;
    max-width: 90vw !important;
    height: 40% !important;
    overflow: auto !important;
  }
  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 700px !important;
  }
  .hero-content .btn {
    display: inline-flex !important;
    margin-top: 1rem !important;
  }
}
/*
  ShaubMD Vending website stylesheet
  Colors inspired by the company logo: teal and pink accents on a neutral base.
  Uses the Poppins font family loaded from Google Fonts in the HTML document.
*/

/* Root variables for easy theming */
:root {
  --color-primary: #00bfae; /* teal hue from logo */
  --color-accent: #ff5f9e; /* soft pink accent */
  --color-dark: #0a192f; /* dark navy for backgrounds */
  --color-light: #f9f9f9; /* light neutral */
  --color-text: #333;
  --max-width: 1200px;
  --transition-speed: 0.3s;
}

/*
 * Mobile landscape hero overlay adjustment
 *
 * When phones are rotated sideways the hero section’s height shrinks,
 * causing the green overlay box to clip against the top navigation bar
 * and the bottom of the hero image.  In landscape we continue to use
 * the desktop hero layout (overlaying the text on the image) but
 * increase the hero’s vertical space and widen the green box.  This
 * ensures the heading and “Get Started” button remain fully visible.
 */
@media (max-width: 900px) and (orientation: landscape) {
  /* Use the desktop hero structure in landscape on small screens */
  .hero-desktop {
    display: block !important;
  }
  .hero-mobile {
    display: none !important;
  }

  /* Provide extra vertical space and prevent clipping */
  .hero {
    min-height: 75vh !important;
    overflow: visible !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    margin-bottom: 14px !important;
    border-bottom: none !important;
  }

  /* Widen the green text box to occupy most of the hero image width */
  .hero-desktop .hero-text-box {
    width: 80vw !important;
    max-width: 90vw !important;
  }

  /* Stack the hero content vertically within the overlay */
  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 700px !important;
  }

  /* Ensure the call‑to‑action button is visible with adequate spacing */
  .hero-content .btn {
    display: inline-flex !important;
    margin-top: 1rem !important;
  }
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-light);
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(10, 25, 47, 0.85);
  backdrop-filter: blur(4px);
  z-index: 999;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0;
}

.nav-logo img {
  height: 42px;
}

/* Hamburger menu for mobile */
#toggle-menu {
  display: none;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 21px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 3px;
  background: var(--color-primary);
  border-radius: 3px;
  transition: transform var(--transition-speed);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;

  /* Provide extra space between the logo and the first navigation link on desktop */
  margin-left: 1rem;
}

.nav-links li a {
  color: #fff;
  font-weight: 500;
  transition: color var(--transition-speed);
}

.nav-links li a:hover {
  color: var(--color-primary);
}

/* Style the contact link in the navigation bar as a button to make it stand out */
.nav-links .nav-contact-btn {
  /* Override the default .btn padding to better suit the navigation bar */
  /* Reduce vertical padding so the button’s centre aligns with the baseline of
     neighbouring links */
  padding: 0.2rem 0.9rem;
  font-size: 0.9rem;
  border-radius: 4px;
  /* Align the button vertically with the rest of the nav links */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  /* Let .btn and .btn-primary define colors; no need to override background or border here */
  transition: background-color var(--transition-speed), border-color var(--transition-speed), transform var(--transition-speed);

  /* Align the button itself with the other nav items */
  vertical-align: middle;

  /* Slightly raise the button so its baseline matches neighbouring text links */
  position: relative;
  top: -2px;
}

.nav-links .nav-contact-btn:hover {
  /* On hover, simply lift the button slightly; the color change is handled by .btn-primary:hover */
  transform: translateY(-2px);
}

/* Hero Section */
/*
  Hero Section

  The hero anchors the page with a bold image, overlay and centered call‑to‑action text.  
  It spans nearly the full viewport height and centers its contents both vertically and horizontally.
*/
.hero {
  position: relative;
  width: 100%;
  /* Use a flexible minimum height for the hero so text doesn’t get cut off on short viewports */
  min-height: 80vh;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 64px; /* offset nav height */
  
  /* Add a subtle dividing line at the bottom of the hero to separate it from the next section on desktop */
  border-bottom: 4px solid var(--color-primary);
}

/* Hide or show hero versions depending on screen size */
.hero-desktop {
  display: block;
}

.hero-mobile {
  display: none;
}

@media (max-width: 768px) {
  .hero-desktop {
    display: none;
  }
  .hero-mobile {
    display: block;
    padding: 2rem 0;
    text-align: center;
  }
  /* Remove the bottom border on mobile hero to avoid double lines */
  .hero {
    border-bottom: none;
  }
}

/* Styling for the mobile hero layout */
.hero-mobile-heading-box,
.hero-mobile-subtext-box {
  background-color: var(--color-primary);
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin: 0 1rem;
}

.hero-mobile-heading-box {
  /* Create breathing room below the navigation bar on mobile */
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.hero-mobile-subtext-box {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.hero-mobile-cta {
  display: inline-block;
  margin-top: 1rem;
}

/*
  Removed split media layout from hero. If you reintroduce a split hero later,
  define .hero-media-video and .hero-media-image separately in your own section.
*/

/* Logos overlaid on hero vending units */
.unit-logo {
  position: absolute;
  z-index: 2;
  width: 9%;
  height: auto;
  opacity: 0.95;
}
.left-unit {
  top: 18%;
  left: 26%;
}
.right-unit {
  top: 18%;
  left: 61%;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Explicitly place the image at the lowest stack level so the overlay and
     hero content remain visible above it */
  position: relative;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Remove any colour filter from the hero image so it displays in its original
     bright colours. Leaving this rule empty effectively disables the overlay. */
  background: none;
  /* Ensure the overlay sits beneath the hero text */
  z-index: 1;
}

.hero-content {
  position: absolute;
  max-width: 700px;
  text-align: center;
  /* Use white text on top of the bright hero image and add a subtle shadow
     to maintain legibility against light backgrounds */
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  padding: 1rem;
  /* Raise the hero content above the overlay and image so it remains visible */
  z-index: 2;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

/* Box behind hero text to improve contrast without tinting the entire image */
.hero-text-box {
  display: inline-block;
  background-color: rgba(0, 191, 174, 0.8);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  transition: background-color var(--transition-speed), transform var(--transition-speed);
  border: none;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--color-accent);
  transform: translateY(-2px);
}

/* Sections */
.section {
  padding: 4rem 0;
}

.section-title {
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--color-dark);
}

/* Features */
.feature-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Layout for the features section when including media and text rows */
.features-content {
  display: grid;
  grid-template-columns: 45% 55%;
  grid-template-rows: repeat(3, auto);
  gap: 2rem;
}

.media-item video,
.media-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.text-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .features-content {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .text-row {
    grid-template-columns: 1fr;
  }
}

.feature-item {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform var(--transition-speed);
}

.feature-item:hover {
  transform: translateY(-5px);
}

.feature-item h3 {
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.feature-item p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Solutions */
.solutions-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.solution-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform var(--transition-speed);
}

.solution-card:hover {
  transform: translateY(-5px);
}

.solution-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
}

.solution-card h3 {
  padding: 1rem;
  color: var(--color-primary);
  font-size: 1.25rem;
  font-weight: 600;
}

.solution-card p {
  padding: 0 1rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Benefits */
.benefits-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.benefit-item {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform var(--transition-speed);
}

.benefit-item:hover {
  transform: translateY(-5px);
}

/* Styles for image items within the benefits grid */
.benefit-image {
  padding: 0;
  overflow: hidden;
  /* Remove default card styling so the image has no white borders */
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.benefit-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* Why Switch */
.switch-section {
  background: var(--color-light);
}

.switch-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.switch-item {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform var(--transition-speed);
}

.switch-item:hover {
  transform: translateY(-5px);
}

/* Styles for image card in the switch section */
.switch-image {
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
  /* Span the entire row on larger screens */
  grid-column: 1 / -1;
}

.switch-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.switch-item h3 {
  color: var(--color-primary);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.switch-item p {
  font-size: 0.95rem;
  line-height: 1.5;
}

.benefit-item h3 {
  color: var(--color-primary);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.benefit-item p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Benefits section colour scheme — apply the vibrant palette from the How It Works section */
.benefits-section {
  background: var(--color-primary);
  color: #fff;
}

/* Ensure the Benefits heading contrasts against the section background */
.benefits-section .section-title {
  color: #fff;
}

/* Cards inside the benefits section remain light to stand out on the teal background */
.benefit-item {
  background: #ffffff;
  color: var(--color-dark);
}

/* Accent the benefit headings with the same pink used for step numbers */
.benefit-item h3 {
  color: var(--color-accent);
}

/* How It Works */
.how-section {
  background: var(--color-primary);
  color: #fff;
}

.how-list {
  list-style: none;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.how-list li {
  position: relative;
  padding-left: 3rem;
}

.how-step {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent);
}

.how-list h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/*
  How It Works Layout

  The How It Works section now features both the step list and an illustrative
  image. These rules arrange the steps and image side‑by‑side on larger screens
  and stack them on smaller devices. The image receives subtle styling to
  maintain aesthetics against the colored background.
*/
.how-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.how-steps {
  flex: 1 1 50%;
}

.how-image {
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
}

.how-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .how-content {
    flex-direction: column;
  }
  .how-steps,
  .how-image {
    flex-basis: 100%;
  }
}

.how-list p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* About */
.about-section {
  background: #fff;
}

.about-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.about-image img {
  max-width: 180px;
}

.about-content {
  flex: 1;
}

.about-content p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Styles for the founders' family photo in the About section */
.about-family-photo img {
  display: block;
  /* Limit the image width so it doesn't overpower the text */
  max-width: 350px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.5rem auto 0 auto;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/*
  Contact Section with Image

  The contact section now features a layout that places a family photo beside
  the contact form and information. Flexbox is used to arrange the image and
  form side‑by‑side on larger screens and stack them on smaller screens.
*/
.contact-layout {
  display: flex;
  flex-wrap: wrap;
  /* Reduce gap between columns for a tighter layout */
  gap: 1.5rem;
  align-items: center;
}

.contact-image {
  /* Restrict the contact photo container's width to prevent it dominating the section */
  flex: 0 0 auto;
  max-width: 350px;
  width: 100%;
}

.contact-image img {
  /* Ensure the image never exceeds its container's width and scales down on smaller screens */
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.contact-info {
  /* Allow the contact info to occupy the remaining space */
  flex: 1 1 auto;
}

@media (max-width: 768px) {
  .contact-layout {
    flex-direction: column;
  }
  .contact-image,
  .contact-info {
    flex-basis: 100%;
  }
}

/* Contact */
.contact-section {
  background: var(--color-light);
}

.contact-container {
  /* Allow the contact container to span the same width as other sections */
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: initial;
}

.contact-form {
  margin-top: 2rem;
  display: grid;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.form-group label {
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
}

.form-group textarea {
  resize: vertical;
}

.contact-form button {
  justify-self: start;
}

/* Footer */
.footer {
  background: var(--color-dark);
  color: #fff;
  padding: 2rem 0;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}

.footer-logo img {
  height: 40px;
}

.footer-info p {
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
}

/* Responsive styles */
@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 64px;
    right: -100%;
    /* Increase the width and height of the slide‑out menu on mobile for better readability */
    width: 70%;
    height: 100vh;
    background: rgba(10, 25, 47, 0.95);
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    transition: right var(--transition-speed);
    z-index: 998;
    /* Remove the left margin applied on desktop to keep the mobile menu flush */
    margin-left: 0;
  }
  .nav-links li {
    margin: 0.5rem 0;
  }
  #toggle-menu:checked + .hamburger + .nav-links {
    right: 0;
  }
  .hamburger {
    display: flex;
  }
  .feature-grid,
  .solutions-grid,
  .benefits-grid,
  .how-list {
    grid-template-columns: 1fr;
  }
  .about-container {
    flex-direction: column;
    text-align: center;
  }
  .about-image img {
    margin: 0 auto;
  }
  .contact-container {
    width: 100%;
    /* Add border and padding on small screens so the form doesn’t push up against
       the edges of the viewport. This styling echoes the mobile design reference. */
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin: 0.5rem;
  }

  /* Reset spacing on the contact button within the mobile menu so it aligns
     flush with other items */
  .nav-links .nav-contact-btn {
    margin-left: 0;
    top: 0;
  }

  /* Lower the hero text on small screens so it doesn’t overlap the navigation bar */
  .hero-content {
    margin-top: 2.5rem;
  }
}

/*
  User Experience Section

  This section introduces a standalone video highlighting the user experience
  with ShaubMD Vending's smart machines. The container centers the content
  with generous vertical spacing. The video wrapper maintains a 16:9 aspect
  ratio on any screen size by using padding tricks and absolute positioning.
*/
.user-experience-section {
  padding: 4rem 0;
  /* Match the vibrant green background used in the benefits section to clearly
     delineate this section from the white hero above */
  background-color: var(--color-primary);
  text-align: center;
  color: #fff;
}

.user-experience-section .user-experience-video {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 2rem auto 0 auto;
  /* Maintain 16:9 aspect ratio for the outer container */
  padding-top: 56.25%;
  /* Give the wrapper a black background so unused space becomes neutral bars
     rather than showing through the page's green background. This helps
     reproduce the non‑stretched experience seen in incognito mode. */
  background-color: #000;
  /* Enable a soft clipping radius and shadow on the entire block */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.user-experience-section .user-experience-video iframe {
  /* Absolutely position the iframe to fill the vertical space of the wrapper. */
  position: absolute;
  top: 0;
  /* Center the iframe horizontally within the wrapper.  When the embedded
     video is narrower than the 16:9 container (e.g. recorded in a more
     square or vertical orientation), we intentionally set the width to a
     fraction of the container and translate it back by 50% to keep it
     centered.  The 65% width chosen below roughly matches the proportion
     observed in the incognito screenshot where the video had noticeable
     letterboxing.  Adjust this percentage if the video dimensions change
     in the future. */
  left: 50%;
  /* Set the embedded preview to occupy around two‑thirds of the container’s
     width while leaving space on the sides for visual breathing room.  The
     65% width reflects the approximate proportion observed in the
     incognito screenshot where the video had noticeable letterboxing. */
  width: 65%;
  height: 100%;
  transform: translateX(-50%);
  border: 0;
}

/* Ensure the customer experience video is centered in mobile portrait mode.
   Without this override, the video may load off center because the iframe
   uses a fixed percentage width and horizontal translation.  On portrait
   phones we restore the iframe to occupy the full width of its container
   and reset its horizontal alignment. */
@media (max-width: 768px) and (orientation: portrait) {
  .user-experience-section .user-experience-video iframe {
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
  }
}

/* Ensure the Customer Experience heading contrasts against the green background */
.user-experience-section .section-title {
  color: #fff;
}

/*
  Ensure that landscape orientation on narrow devices uses the desktop hero layout.
  This restores the original green hero box and combined text for tablets and
  phones held sideways. The margin-top offset applied on portrait mobile is
  removed so the hero text sits naturally beneath the navigation bar.
*/
@media (max-width: 768px) and (orientation: landscape) {
  .hero-desktop {
    display: block;
  }
  .hero-mobile {
    display: none;
  }
  .hero-content {
    margin-top: 0;
  }
}

/*
  On larger screens, expand the hero text box to span most of the width for a
  bolder look. This rule ensures the green box behind the hero title and
  subtitle more closely matches the original design on desktop and laptop
  displays.
*/
@media (min-width: 769px) {
  .hero-text-box {
    max-width: 80%;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  /*
     On desktop and larger screens, position the hero content absolutely and
     centre it both vertically and horizontally within the hero image. This
     restores the prominent green box behind the title and subtitle.
  */
  .hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
  }
}

/* === Adjustments per user request === */

/* Desktop & large screens: widen green hero box so title fits on 2 lines */
@media (min-width: 1024px) {
  .hero-text-box {
    max-width: 80vw; /* was narrower; widen to allow natural 2-line wrap */
  }
}

/* Mobile landscape: ensure hero box is visible and wide enough */
@media (max-width: 900px) and (orientation: landscape) {
  /* Ensure the top of the green box + full title are visible below the fixed navbar */
  .hero { padding-top: 0.75rem;   padding-top: 0.75rem;
  padding-bottom: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
  html { scroll-padding-top: 72px; } /* reserve space for navbar when scrolling to anchors */

  /* Make the green box at least half as wide as the hero image */
  .hero-text-box { width: 55vw; max-width: 90vw; }

  /* Ensure the CTA appears above the next section with a small white gap */
  .hero .btn, .hero .hero-cta {
    display: inline-flex;
    margin-top: 1rem;
  }
  .hero { margin-bottom: 12px;   padding-top: 0.75rem;
  padding-bottom: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: none !important;
  padding-bottom: 0 !important;
} /* slim white strip before Customer Experience */

  .hero-content { max-width: 700px; }

  .hero-desktop .hero-text-box { width: 80vw; max-width: 90vw; }
}





/* Strong landscape overrides to ensure CTA visibility and correct hero box width */
@media (max-width: 900px) and (orientation: landscape) {
  /* Use desktop hero structure in landscape on phones/tablets */
  .hero-mobile { display: none !important; }
  .hero-desktop { display: block !important; }

  /* Ensure hero has enough height and isn't obscured by navbar */
  .hero {
    min-height: 70vh;
    padding-top: 1rem; /* breathing room below fixed nav */
    margin-bottom: 14px; /* slim white strip before the next section */
    padding-top: 0.75rem;
  padding-bottom: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

  /* Make the green box at least half the image width */
  .hero-desktop .hero-text-box { width: 80vw; max-width: 90vw; }

  /* Guarantee the CTA renders and sits above the next section */
  .hero-desktop .btn.btn-primary,
  .hero-desktop .hero-cta {
    display: inline-flex !important;
    position: relative;
    z-index: 3;
    margin-top: 1rem;
  }

  .hero-content { max-width: 700px; }
}




/* === Stronger enforcement for MOBILE LANDSCAPE hero & CTA === */
@media (max-width: 900px) and (orientation: landscape) {
  /* Ensure the desktop hero variant is used */
  .hero-mobile { display: none !important; }
  .hero-desktop { display: block !important; }

  /* Keep hero above following sections */
  .hero { 
    position: relative; 
    z-index: 2;
    min-height: 72vh;
    padding-top: clamp(14px, 6vh, 68px); /* enough breathing room below fixed nav */
    padding-bottom: 16px; /* space for CTA inside hero */
    margin-bottom: 14px; /* white strip before next section */
    padding-top: 0.75rem;
  padding-bottom: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

  /* Green box sizing: at least half the image width */
  .hero-desktop .hero-text-box { width: 80vw; max-width: 90vw; }

  /* CTA must be visible and on its own line */
  .hero-desktop .btn.btn-primary {
    display: inline-flex !important;
    align-self: center;
    position: relative;
    z-index: 3;
    margin-top: 14px;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Make sure hero content stacks cleanly */
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center; max-width: 700px; }

  /* The next section must not overlap upward */
  .user-experience-section {
    position: relative;
    z-index: 1;
    margin-top: 0 !important;
  }
}



/* CTA below hero for mobile landscape only */
.landscape-cta-wrap { display: none; text-align: center; }
@media (max-width: 900px) and (orientation: landscape) {
  .landscape-cta-wrap {
    display: block;
    padding: 12px 0 14px 0; /* a slim white strip below is handled by padding-bottom */
    background: #fff; /* ensure clear separation from hero and next section */
  }
  .landscape-cta-wrap .btn.btn-primary {
    display: inline-flex;
  }

  .hero { padding-top: 0.75rem; padding-bottom: 1rem;   padding-top: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

  .hero-desktop .hero-text-box { width: 80vw; max-width: 90vw; }
}
  .hero-content { max-width: 700px; }
}

  .hero-content { max-width: 700px; }
}




/* Remove unintended horizontal green line between hero and landscape CTA */
@media (max-width: 900px) and (orientation: landscape) {
  .hero {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0.75rem;
  padding-bottom: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
  .landscape-cta-wrap {
    margin-top: 0 !important;
  }

  .hero-content { max-width: 700px; }

  .hero-desktop .hero-text-box { width: 80vw; max-width: 90vw; }
}





/* Desktop: green hero box at 40% of hero image width */
@media (min-width: 1024px) {
  .hero-text-box {
    width: 40vw;
    max-width: 40vw;
  }
}



/* Mobile landscape: widen green box to 75% and ensure full title visible */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-desktop .hero-text-box { width: 80vw; max-width: 90vw; }
  .hero {
    padding-top: 1.5rem !important; /* more breathing room for title visibility */
    padding-top: 0.75rem;
  padding-bottom: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

  .hero-content { max-width: 700px; }
}




/* Desktop: adjust green hero box to 45% of hero image width */
@media (min-width: 1024px) {
  .hero-text-box {
    width: 45vw;
    max-width: 45vw;
  }
}



/* Mobile landscape: widen green box to 80% */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-desktop .hero-text-box { width: 80vw; max-width: 90vw; }

  .hero { padding-top: 0.75rem; padding-bottom: 1rem;   padding-top: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

  .hero-content { max-width: 700px; }
}

  .hero-content { max-width: 700px; }
}




/* ===== Tablet layout mapping to mobile layouts (769–1023px) ===== */

/* Tablet PORTRAIT => use the same layout as MOBILE PORTRAIT */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* Swap to mobile-portrait hero stack */
  .hero-desktop { display: none !important; }
  .hero-mobile  { display: block !important; }

  /* Breathing room below the fixed nav like mobile portrait */
  .hero-mobile-heading-box { margin-top: 1rem; }

  /* Mirror mobile-portrait CTA/subtext behavior */
  .hero-mobile-cta { margin: 1rem auto; display: inline-flex; }
  .hero-mobile-subtext-box { margin-top: 1rem; }

  /* Center text inside green boxes on tablet portrait */
  .hero-mobile-heading-box,
  .hero-mobile-subtext-box {
    text-align: center;
  }

  /* Ensure the Get Started button is centered on the page */
  .hero-mobile .hero-mobile-cta { display: block; margin: 0.75rem auto 0 auto; width: fit-content; }

  /* Mirror mobile portrait exactly */
  .hero-desktop { display: none !important; }
  .hero-mobile { display: block !important; padding: 2rem 0; text-align: center; }
  /* Center the green heading/subtext boxes like mobile */
  .hero-mobile-heading-box,
  .hero-mobile-subtext-box { text-align: center; }
  /* Center CTA and keep the small gap consistent with mobile portrait scale */
  .hero-mobile .hero-mobile-cta { display: block; margin: 0.75rem auto 0 auto; width: fit-content; }
}



/* Tablet LANDSCAPE => use the same layout as MOBILE LANDSCAPE */
@media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape) {
  /* Mobile landscape uses the desktop hero structure with a wide green box */
  .hero-desktop { display: block !important; }
  .hero-mobile  { display: none !important; }

  /* Match current mobile landscape hero box width (80% of image).
     Decrease the tablet landscape hero box width by 5 percentage points
     as requested (from 55vw to 50vw). Reduce the max-width accordingly. */
  .hero-desktop .hero-text-box { width: 50vw; max-width: 55vw; }

  /* Ensure no title clipping under the fixed navbar */
  .hero { padding-top: 1.5rem;   min-height: 80vh;
}

  /* Make sure the top of the green box and all its text are visible below the fixed navbar */
  .hero { 
    padding-top: 1rem;          /* small top padding so the box clears the nav */
    min-height: auto;           /* allow hero to shrink to fit content so all text is visible */
    min-height: 80vh;
}

  /* Keep the hero content vertically near the top center on tablet landscape */
  .hero-content { top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: none; width: auto; }

  /* Set the green box width slightly narrower (decreased by 5 percentage points
     from its previous 55vw value) so the green box doesn’t dominate the
     hero on tablet landscape screens. */
  .hero-desktop .hero-text-box { width: 50vw; max-width: 55vw; }

  /* Ensure text is fully visible with comfortable line-wrapping */
  .hero-title { font-size: 2rem; line-height: 1.2; }
  .hero-subtitle { font-size: 1.05rem; line-height: 1.45; }

  .hero-content .btn { display: inline-block; margin-top: 1rem; }
}





/* ---- FINAL OVERRIDES: ensure tablet portrait mirrors mobile portrait exactly ---- */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .hero-desktop { display: none !important; }
  .hero-mobile  { display: block !important; padding: 2rem 0; text-align: center; }
  .hero-mobile-heading-box,
  .hero-mobile-subtext-box { text-align: center !important; }
  .hero-mobile .hero-mobile-cta { display: block !important; margin: 0.75rem auto 0 auto !important; width: fit-content !important; }
}

/* Remove the small white gap between the hero and Customer Experience
   section on mobile landscape without affecting other orientations. */
@media (max-width: 900px) and (orientation: landscape) {
  /* Eliminate bottom margin/padding and borders on the hero to close the gap */
  .hero {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }
  /* Remove any top margin from the customer experience section */
  .user-experience-section {
    margin-top: 0 !important;
  }
}

/*
 * FINAL override for mobile landscape view (phones wider than 414px)
 *
 * On some phones in landscape, the hero section’s fixed viewport height (using
 * `vh` units) can cause the green overlay box to cut off at the top or
 * bottom of the image.  To ensure the overlay and its contents are always
 * visible, this rule forces the hero to grow automatically based on its
 * content and sizes the green box to 40% of the hero’s height.  It also
 * explicitly uses the desktop hero overlay layout and hides the stacked
 * mobile variant.  The `(min-width: 414px)` constraint allows the narrower
 * (≤413px) mobile landscape rule defined above to take precedence on very
 * small devices.
 */
@media (min-width: 414px) and (max-width: 900px) and (orientation: landscape) {
  /* Force the desktop hero overlay layout */
  .hero-desktop {
    display: block !important;
  }
  .hero-mobile {
    display: none !important;
  }
  /* Allow the hero to expand based on its content instead of a fixed vh */
  .hero {
    /* Allow hero to grow based on its contents without adding an extra gap
       above the image.  We remove the large top padding here so the hero
       image sits flush beneath the navigation bar; margin-top from the base
       styles still offsets the fixed nav. */
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: 0 !important;
    padding-bottom: 1rem !important;
    margin-bottom: 14px !important;
    border-bottom: none !important;
  }
  /* Size the green overlay box to 40% of the hero’s height and center content */
  .hero-desktop .hero-text-box {
    width: 80vw !important;
    max-width: 90vw !important;
    /* Increase the overlay height to 62% of the hero for better text fit */
    /* Increase the overlay height by an additional 1.5 percentage points to fully contain the text */
    /* Increase the overlay height to 65% of the hero, per user request */
    height: 65% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    /* Push the green box down slightly so it doesn’t start right at the top of the hero */
    margin-top: 1.5rem !important;

    /* Reduce the top padding so the text is centered vertically. The base
       padding from the default .hero-text-box rule (1rem) remains on all
       sides. */
    padding-top: 1rem !important;
    /* Center the content vertically within the green box */
    justify-content: center !important;
  }

  /* Tweak margins on title, subtitle, and button so the content is
     vertically balanced within the taller overlay. The default margins
     (1rem/1.5rem) create a larger gap at the bottom; these values
     reduce that gap for a more symmetrical appearance. */
  .hero-title {
    margin-bottom: 0.75rem !important;
  }
  .hero-subtitle {
    margin-bottom: 0.75rem !important;
  }
  .hero-content .btn {
    margin-top: 0.75rem !important;
    margin-bottom: 0 !important;
  }
  /* Center the text and CTA within the overlay */
  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 700px !important;
    height: 100% !important;
  }
  /* Ensure the Get Started button is visible with spacing */
  .hero-content .btn {
    display: inline-flex !important;
    margin-top: 1rem !important;
  }

  /* Shrink the hero heading and subheading fonts slightly so they fit
     comfortably within the 60% overlay */
  .hero-title {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
  }
  .hero-subtitle {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
}



/* Fix: remove small white gap between hero and Customer Experience on mobile portrait only */
@media (max-width: 768px) and (orientation: portrait) {
  .hero-mobile {
    padding-bottom: 0 !important;
  }
  /* Also ensure the next section starts flush */
  .user-experience-section {
    margin-top: 0 !important;
  }
}

/*
  Extra small mobile devices in landscape orientation (smaller than iPhone Xs Max).

  On very narrow screens held horizontally, forcing the desktop hero layout can
  cause the “Get Started” button to be cut off. To avoid this, mimic the
  mobile portrait layout whenever the viewport width is less than 414px and
  landscape orientation is active. This rule hides the desktop hero, shows
  the mobile hero, and applies portrait-like spacing to the hero and
  subsequent sections.  By placing this rule at the end of the stylesheet it
  overrides earlier landscape rules targeting wider phones and tablets.
*/
@media (max-width: 413px) and (orientation: landscape) {
  /* Use the mobile portrait hero layout */
  .hero-desktop { display: none !important; }
  .hero-mobile  { display: block !important; padding: 2rem 0; text-align: center; }
  /* Center the text inside the green boxes */
  .hero-mobile-heading-box,
  .hero-mobile-subtext-box { text-align: center !important; }
  /* Ensure the CTA button is centered and on its own line */
  .hero-mobile .hero-mobile-cta {
    display: block !important;
    margin: 0.75rem auto 0 auto !important;
    width: fit-content !important;
  }
  /* Remove any gap below the hero so the next section abuts it cleanly */
  .hero {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }
  /* Also remove the top margin on the Customer Experience section */
  .user-experience-section {
    margin-top: 0 !important;
  }
}

/*
 * === AUDIENCE TICKER STYLES ===
 *
 * This section adds a horizontally scrolling ticker between the hero and
 * the Visitor Experience video.  It announces the types of facilities
 * served by ShaubMD in a continuous loop.  The ticker uses a simple
 * translate animation to move text from right to left.  The animation
 * duration is deliberately long to ensure smooth scrolling.  Padding
 * values are chosen to match the Ash & Ash design so the height of
 * this section is consistent across the two sites.
 */

.audience-section {
  width: 100%;
  overflow: hidden;
  background-color: var(--color-light);
  padding: 2rem 0;
  border-top: 4px solid var(--color-primary);
  border-bottom: 4px solid var(--color-primary);
}

/* ============================================================= */
/* Custom CTA enhancements                                       */
/*
 * These rules emphasize the primary call‑to‑action in the hero.  A darker
 * shade of the brand’s teal creates hierarchy without introducing a new
 * color, while larger padding and a soft shadow make the button feel
 * more important.  The small reassurance note communicates the zero‑cost
 * proposition succinctly.  The note is white on the desktop overlay
 * (green background) and dark on the mobile layout (white background).
 */

/* Darken and enlarge the hero CTA button */
.hero .btn.btn-primary {
  background-color: #009e90;
  padding: 0.85rem 1.8rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Reassurance copy underneath the hero CTA */
.cta-note {
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0.5rem;
}

/* White text over the green overlay in the desktop hero */
.hero-desktop .cta-note {
  color: #ffffff;
}

/* Dark text for the mobile hero (white background) */
.hero-mobile .cta-note {
  color: var(--color-dark);
  text-align: center;
  margin: 0.5rem 1rem 0 1rem;
}

.ticker {
  width: 100%;
  overflow: hidden;
}

.ticker__wrap {
  display: inline-block;
  white-space: nowrap;
  /* The animation moves the ticker text horizontally to create a continuous loop */
  animation: ticker-scroll 40s linear infinite;
}

/*
 * Reduce spacing between ticker phrases to mirror the Ash & Ash site.  Using padding instead
 * of margin ensures the distance between items matches the internal bullet spacing rather than
 * creating an oversized gap at the loop boundary.  A trailing space in each span controls
 * the separation instead of a margin.
 */
.ticker span {
  display: inline-block;
  padding-right: 0;
  margin-right: 0;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-dark);
}

/* Keyframes for horizontal scrolling: translate the ticker left by half its width */
@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Smaller font and padding on narrow screens to maintain proportional height */
@media (max-width: 768px) {
  .audience-section {
    padding: 1rem 0;
  }
  .ticker span {
    font-size: 1.1rem;
    /* Maintain zero margin on small screens as well; the trailing space in the span controls spacing */
    margin-right: 0;
    padding-right: 0;
  }
}

/*
 * === FINAL HERO FIX FOR SHAUBMD ===
 *
 * The hero image on the ShaubMD site occasionally shows white bands above
 * and below the photograph because earlier rules allow the hero section to
 * shrink to fit its content.  To ensure the hero fills its allotted space
 * and eliminates any gaps, we set a consistent minimum height across all
 * orientations and force the hero image to cover the entire container.  We
 * also remove any extraneous padding or margins that could create vertical
 * gaps.  These rules use !important to override the many scattered hero
 * declarations elsewhere in the stylesheet.
 */

.hero {
  /* Always occupy at least 80% of the viewport height on all devices */
  min-height: 80vh !important;
  height: auto !important;
  /* Remove vertical padding so the image touches the nav bar and the next section */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* Remove any bottom margin or border that could create a gap above the ticker */
  margin-bottom: 0 !important;
  border-bottom: none !important;
  /* Hide overflow to prevent any stray whitespace from appearing */
  overflow: hidden !important;
}

/* Make sure the hero image fills the hero container without leaving white bars */
.hero-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Ensure the overlay stretches the full height of the hero */
.hero-overlay {
  height: 100% !important;
}

/* In landscape on small screens, keep the hero height consistent */
@media (max-width: 900px) and (orientation: landscape) {
  .hero {
    min-height: 80vh !important;
    height: auto !important;
  }
}