.navigation-wrapper {
  display: contents;
}
 
.navigation-container1 {
  display: contents;
}
 
.navigation-thq-navigation-logo-icon-elm {
  align-items: center;
  justify-content: center;
}
 
.navigation-thq-section-title-elm1 {
  text-align: center;
  font-family: "DrCarbfred";
}
 
.navigation-container2 {
  display: none;
}
 
.navigation-container3 {
  display: contents;
}

.footer-wrapper {
  display: contents;
}
 
.footer-container1 {
  display: contents;
}
 
.footer-thq-footer-logo-group-elm {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}
 
.footer-thq-footer-logo-icon-elm {
  width: 35px;
}
 
.footer-text2 {
  font-style: italic;
}
 
.footer-container2 {
  display: none;
}
 
.footer-container3 {
  display: contents;
}

/* Footer Layout - Desktop */
.footer-identity-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Name takes the middle 2/3 ratio */
  align-items: center;
  justify-items: center;
  width: 80%; /* Width of the content area */
  max-width: 1000px;
  margin: 40px auto; /* Centered on screen */
}

.footer-name-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-name-text {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.footer-qual-text {
  font-style: italic;
  font-size: 0.95rem;
  opacity: 0.8;
}

.footer-badge {
  height: 100px; /* Uniform height for both logos */
  width: auto;
  object-fit: contain;
}

.home-container1 {
  width: 100%;
  display: block;
  min-height: 100vh;
}
 
/* Container adjustment to allow absolute positioning of children */
.calm-welcome-hero {
  position: relative;
  overflow: hidden; /* Prevents the large image from causing horizontal scroll */
  padding: 100 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.calm-welcome-wrapper {
  position: relative;
  z-index: 2; /* Ensures content stays above the background image */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: block; /* Change from flex to block for easier layering */
}

.calm-welcome-content {
  max-width: 600px; /* Limits text width so it doesn't span the whole page */
  position: relative;
  z-index: 3;
}

/* Background Image Styling */
.calm-welcome-visual {
  position: absolute;
  top: 20%;
  right: -15%; /* Pulls it slightly off-screen to the right */
  transform: translateY(-50%);
  width: 70%; /* Occupies 3/4 of the window width */
  z-index: 1; /* Sits behind the text */
  opacity: 0.8; /* Optional: makes text more readable */
  pointer-events: none; /* Allows user to click buttons "through" the image */
}

.home-thq-calm-welcome-image-elm {
  width: 100%;
  height: auto;
  box-shadow: none !important; /* Removes the shadow */
  border: none !important;    /* Removes the border */
  border-radius: 0;           /* Optional: removes rounded corners */
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
  .calm-welcome-visual {
    width: 100%;
    right: 0;
    opacity: 0.3; /* Fades more on mobile so text is legible */
  }
}
 
.home-thq-section-title-elm1 {
  width: 466px;
}
 
.home-thq-section-content-elm10 {
  text-align: left;
}
 
.home-thq-section-content-elm24 {
  padding-bottom: var(--font-size-lg);
}
 
.home-thq-section-content-elm25 {
  padding-bottom: var(--font-size-lg);
}
 
.home-container2 {
  display: none;
}
 
.home-container3 {
  display: contents;
}
 
.home-container4 {
  right: 50px;
  border: 1px solid #ffffff5c;
  bottom: 30px;
  display: flex;
  z-index: 22;
  position: fixed;
  box-shadow: 5px 5px 10px 0px rgba(31, 31, 31, 0.4);
  min-height: auto;
  align-items: center;
  padding-top: 8px;
  padding-left: 12px;
  border-radius: 8px;
  padding-right: 12px;
  padding-bottom: 8px;
  backdrop-filter: blur(6px);
  background-color: rgba(41, 41, 41, 0.41);
}
 
.home-icon19 {
  width: 24px;
  margin-right: 4px;
}
 
.home-text28 {
  color: white;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

@media (max-width: 475px) {
  /* 1. Lift the brand text over the header bar */
  .navigation-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* Adjust this value based on your header's actual height */
    top: 0px; 
    z-index: 10;
    background: transparent; /* Ensures it doesn't block the bar's color */
  }

  /* 2. Ensure the logo icon and text are tight together */
  .navigation-logo-icon {
    margin-bottom: 4px;
  }

  /* 3. Refine the title text to start from the 'top' of the bar area */
  .navigation-thq-section-title-elm1 {
    width: auto;
    line-height: 1.1; /* Tighter line height to save vertical space */
    font-size: 1.5rem; /* Slightly smaller to fit comfortably */
    margin: 1em;
    text-align: center;
  }

  /* 1. Stack Hero Buttons */
  .calm-welcome-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    width: 100%;
  }

  .calm-welcome-actions .btn {
    width: 100%; /* Makes buttons full width for easier tapping */
    margin: 0;
  }

  /* 2. Fix Therapy Approach Header and Content */
  .about-practitioner-section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .home-thq-section-title-elm1 {
    width: 100%; /* Overrides the 466px fixed width from your CSS */
    font-size: 1.75rem; /* Adjusts size to prevent word-breaking */
    line-height: 1.2;
    word-wrap: break-word;
  }

  .section-content, 
  .home-thq-section-content-elm10 {
    width: 100%;
    text-align: left;
    padding-right: 0;
  }

  /* 3. Global Frame Containment */
  .calm-welcome-content,
  .about-practitioner-text {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box; /* Ensures padding doesn't add to width */
  }

  .practitioner-badge {
    display: flex;
    align-items: flex-start; /* Aligns icon with the first line of text */
    gap: 12px;
    width: 100%;
  }

  .practitioner-badge svg {
    flex-shrink: 0; /* CRITICAL: Prevents the icon from getting smaller */
    width: 24px;    /* Matches the width attribute in your HTML */
    height: 24px;   /* Matches the height attribute in your HTML */
    min-width: 24px; /* Double-ensures consistency */
  }

  .practitioner-badge span {
    text-align: left; /* Ensures text stays left-aligned when stacking */
  }

  .footer-identity-grid {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping */
    justify-content: center;
    width: 100%;
    gap: 20px;
  }

  .footer-name-stack {
    flex-basis: 100%; /* Forces Name/Quals to take full top row */
    order: 1;
    margin-bottom: 10px;
  }

  .footer-logo-box {
    order: 2; /* Logos move below the name */
    display: flex;
    justify-content: center;
  }

  .footer-badge {
    height: 50px; /* Slightly smaller for mobile */
  }
}

/* Ensure Scroll Button Visibility logic stays consistent */
#scrollTopBtn {
  transition: opacity 0.3s ease;
  z-index: 100;
}