/* ======================= 1.0 - Hero  ========================== */
.font-bold {
  font-weight: 600 !important;
}

section.symptoms-video-hero .header-symptoms {
  height: calc(75vh - 110px);
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: #e9e9e9;
  position: relative;
}

.symptoms-hero-content {
  max-width: 1200px;
  width: calc(100% - 120px);
  margin: 0 auto;
  text-align: center;
  z-index: 3;
  color: #ffffff;
}

.symptoms-hero-content .hero-content {
  padding-top: 23vh;
}

.symptoms-hero-content .hero-content .header-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.symptoms-hero-content .hero-content .header-buttons a {
  margin: 0;
}

.google-reviews {
  display: flex;
  justify-content: flex-start;
  margin: 30px 0 60px;
}

.google-reviews img {
  max-width: 250px;
  width: 100%;
}

.symptoms-hero-content .hero-content {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}

.symptoms-hero-content hgroup h1 span {
  display: block;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  font-size: 16px;
  margin: 0 0 10px;
}

.symptoms-hero-content hgroup h1 {
  font-size: 46px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
}

.symptoms-hero-content p {
  max-width: 900px;
  width: 100%;
  margin: 20px auto 20px;
  font-size: 1.5rem;
  font-weight: 400;
}

.hero-symptoms-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 30%);
  display: block;
  z-index: 1;
}

.video-hero-symptoms {
  position: absolute;
  width: 100%;
  height: calc(75vh - 110px);
  pointer-events: none;
  overflow: hidden;
}

.video-hero-symptoms video {
  display: block;
  height: 101%;
  width: 101%;
  position: absolute;
  object-fit: cover;
  left: 50%;
  top: 50%;
  object-position: center center;
  transform: translateX(-50%) translateY(-50%);
}

/* Responsive */

@media (max-width: 520px) {
  .symptoms-hero-content {
    width: calc(100% - 30px);
  }
}

@media (max-width: 470px) {
  .symptoms-hero-content .hero-content {
    padding-top: 14vh;
  }
}

/* ======================= 2.0 - INTRO  ========================== */

/* ======================= 2.0 - INTRO  ========================== */

.symptoms-intro,
.service-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 100px auto 60px;
  padding: 0 20px;
}

.symptoms-intro .content,
.service-intro .content {
  max-width: 1200px;
}

.symptoms-intro .content h2,
.service-intro .content h2 {
  font-weight: 600;
}

/* Responsive */

@media (max-width: 1200px) {
  .symptoms-intro,
  .service-intro {
    padding: 0 5vw;
  }
}

@media (max-width: 576px) {
  .symptoms-intro,
  .service-intro {
    margin: 60px auto;
  }

  .symptoms-intro .content,
  .service-intro .content {
    margin-bottom: 0;
  }
}

/* ======================= Image Left - Content Right  ========================== */
.symptoms-page section.media-block {
  position: relative;
  padding: 30px 0 170px;
}
.symptoms-page s section.media-block .inner-wide {
  display: flex;
  justify-content: flex-end;
  max-width: 1700px;
}
.symptoms-page .media-block-img {
  position: absolute;
  width: 100%;
  max-width: 1282px;
  height: 800px;
  background-color: #f2f2f2;
  border-radius: 0 20px 20px 0;
}
.symptoms-page .media-block-img picture {
  width: 100%;
  max-width: 1000px;
  height: 800px;
  position: relative;
  left: 0px;
  top: 0px;
  opacity: 1;
}
.symptoms-page .media-block-img picture * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0 20px 20px 0;
}
.symptoms-page .media-block-content {
  max-width: 550px;
  width: 100%;
  padding: 50px 50px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 0px 50px -2px rgba(2, 2, 2, 0.2);
  margin-top: 100px;
  margin-right: 100px;
}
.symptoms-page .media-block-content h2 {
  font-weight: 600;
  line-height: 34px;
}

/* ======================= Image Right - Content Left ========================== */
.symptoms-page section.media-block.reverse {
  position: relative;
  padding: 50px 0 170px;
}
.symptoms-page section.media-block.reverse .inner-wide {
  display: flex;
  justify-content: flex-start;
  max-width: 1700px;
}
.symptoms-page .media-block.reverse .media-block-img {
  position: absolute;
  right: 0;
  width: 100%;
  max-width: 1082px;
  height: 800px;
  background-color: #f2f2f2;
  border-radius: 20px 0 0 20px;
}
.symptoms-page .media-block.reverse .media-block-img picture {
  width: 100%;
  max-width: 1000px;
  height: 800px;
  position: relative;
  right: 0px;
  top: 0px;
  opacity: 1;
}
.symptoms-page .media-block.reverse .media-block-img picture * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 20px 0 0 20px;
}
.symptoms-page .media-block.reverse .media-block-content {
  max-width: 550px;
  width: 100%;
  padding: 50px 50px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 0px 50px -2px rgba(2, 2, 2, 0.2);
  margin-top: 100px;
  margin-left: 100px;
}
.symptoms-page .media-block.reverse .media-block-content h2 {
  font-weight: 600;
  line-height: 34px;
}

/* ======================= - IMG/TEXT CENTER RESPONSIVE  ========================== */
/* ----------------------- Circular Image and Text COntainer ---------------------- */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  align-items: center;
  justify-items: center;
  position: relative;
  padding: 4vw;
  gap: 2rem;
  margin: auto;
}

.content-grid .left {
  grid-column: 1 / 3;
  grid-row: 1;
  z-index: 1;
}

.content-grid img {
  width: 100%;
  max-width: 900px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-style: inset;
  /* border-right: 15px solid var(--teal); */
  box-shadow: 0px 0px 50px -2px rgba(2, 2, 2, 0.2);
}

.content-grid .img-md {
  max-width: 600px;
}

.content-grid .right {
  grid-column: 2 / 4;
  grid-row: 1;
  z-index: 2;
  position: relative;
  top: 0;
  margin: auto;
}

.content-grid .grid-content-text {
  padding: clamp(20px, 5vw, 50px);
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 0px 50px -2px rgba(2, 2, 2, 0.2);
  max-width: 800px;
}

/* --- Responsive switch to vertical --- */
@media (max-width: 924px) {
  .content-grid {
    display: flex;
    flex-direction: column;
  }

  .content-grid.reverse {
    display: flex;
    flex-direction: column-reverse;
  }

  .content-grid .left {
    /* grid-column: 1 / 4;
    grid-row: 1 / 2; */
    width: 100%;
  }

  .content-grid .right .grid-content-text {
    margin-top: -40px;
  }

  .content-grid .right {
    /* grid-column: 1 / 4;
    grid-row: 2 / 2; */
    /* margin-top: -30vh; */
  }
}

@media (max-width: 676px) {
  .content-grid {
    margin-bottom: 50px;
  }
}

@media (max-width: 676px) {
  .content-grid {
    margin-bottom: 200px;
  }
}

@media (max-width: 540px) {
  .content-grid {
    margin-bottom: 50px;
  }
  .content-grid .right {
    /* margin-top: -20vh; */
    /* transform: translateY(clamp(0, 10%, 10%)); */
  }
}

/* ======================= 6.0 - IMG/TEXT CENTER REVERSE RESPONSIVE  ========================== */

/* Reverse layout on large screens */

.content-grid.reverse img {
  width: 100%;
  max-width: 900px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-style: inset;
  border-style: inset;
  border-right: none;

  box-shadow: 0px 0px 50px -2px rgba(2, 2, 2, 0.2);
}

.content-grid.reverse .left {
  grid-column: 1 / 3;
  grid-row: 1;
  z-index: 2;
  max-width: 800px;
}

.content-grid.reverse .right {
  grid-column: 2 / 4;
  grid-row: 1;
  z-index: 1;
}

@media (max-width: 924px) {
  .content-grid.reverse {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 0.5fr;
  }
  .content-grid.reverse .left {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    margin-top: -40px;
  }

  .content-grid.reverse .right {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    width: 100%;
  }
}

@media (max-width: 924px) {
  .content-grid.reverse {
    margin-bottom: 75px;
  }
}

@media (max-width: 540px) {
  .content-grid.reverse .left {
    /* margin-top: -30vh; */
    /* transform: translateY(clamp(0, 10%, 10%)); */
  }
}

@media (max-width: 512px) {
  .content-grid .right {
    /* margin-top: -30vh; */
  }
}

/* ======================= 6.0 - IMG/TEXT CENTER TWO  ========================== */

.content-grid-two {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: auto;
  align-items: center;
  justify-items: center;
  position: relative;
  padding: 4vw;
  gap: 2rem;
  margin: auto;
  margin: 100px 0 150px;
}

.content-grid-two .left {
  grid-column: 1 / 3;
  grid-row: 1;
  z-index: 2;
  max-width: 600px;
  margin-top: 40px;
}

.content-grid-two .right img {
  width: 100%;
  max-width: 700px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.content-grid-two .right {
  grid-column: 2 / 4;
  grid-row: 1;
  z-index: 1;
  position: absolute;
}

.content-grid-two .right img {
  width: 700px;
}

.content-grid-two .right-sm {
  grid-column: 2 / 4;
  grid-row: 1;
  z-index: 1;
  position: absolute;
  right: 7vw;
}

.content-grid-two .right-sm img {
  width: 550px;
  border-radius: 15px;
  box-shadow: 0px 0px 50px -2px rgba(2, 2, 2, 0.2);

  /* border-radius: 100%; */
}

.content-grid-two .grid-content-text {
  padding: clamp(20px, 5vw, 50px);
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 0px 50px -2px rgba(2, 2, 2, 0.2);
  max-width: 800px;
}

@media (max-width: 924px) {
  .content-grid-two {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 0.5fr;
    margin-bottom: 75px;
  }
  .content-grid-two .left {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    max-width: 800px;
    /* margin-top: -40px; */
  }

  .content-grid-two .right {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    width: 100%;
  }

  .grid-content-text {
    /* margin-bottom: 100px; */
  }

  .content-grid-two .right img {
    display: none;
  }
}

@media (max-width: 620px) {
  .content-grid-two {
    margin-top: 250px;
  }

  .content-grid-two .left {
    margin-top: 10vh;
    transform: translateY(clamp(0, 10%, 10%));
  }

  .content-grid-two .right {
    max-width: 50vw;
    grid-column: 1/3;
  }

  .content-grid-two .right-sm {
    grid-column: 1/4;
    grid-row: 1 / 2;
    width: 93vw;
    margin: auto;
    right: unset;
  }

  .content-grid-two .right-sm img {
    width: 100%;

    /* border-radius: 100%; */
  }
}

/* ======================= Custom List Bullets  ========================== */

.media-block-bullets ul {
  list-style: none;
  margin: 20px 0;
  padding: 0;
}

.media-block-bullets ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  line-height: 1.8;
}

.media-block-bullets ul li::before {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  left: 0;
  top: 11px;
  translate: 0 -50%;
  background: url(https://sussexaudiologycentre.co.uk/wp-content/uploads/2025/07/background-ear-left.svg)
    center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

/* ======================= Conditions-Style Sections for Symptoms Pages  ========================== */

.condition-symptoms-section {
  padding: 80px 0;
  background: #f9f9f9;
}

.condition-symptoms-section .content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.condition-symptoms-section h2 {
  text-align: center;
  margin-bottom: 50px;
}

.causes-intro {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 40px;
  color: #666;
}

.symptoms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.symptom-card {
  background: #ffffff;
  padding: 35px 25px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.symptom-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.symptom-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background: var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.8rem;
}

.symptom-card h3 {
  margin-bottom: 12px;
  font-size: 1.2rem;
  color: var(--navy);
}

.symptom-card p {
  line-height: 1.7;
  color: #666;
  margin: 0;
}

.symptoms-note {
  background: #fff4e6;
  padding: 25px;
  border-radius: 8px;
  border-left: 4px solid #ff9800;
}

.symptoms-note p {
  margin: 0;
  line-height: 1.7;
  color: #666;
}

/* ======================= Treatment Section  ========================== */

.treatment-section {
  padding: 80px 0;
  background: #ffffff;
}

.treatment-section .content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.treatment-section h2 {
  text-align: center;
  margin-bottom: 50px;
}

.treatment-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-bottom: 50px;
}

.treatment-column h3 {
  margin: 0 0 20px 0;
  font-size: 1.4rem;
  color: var(--navy);
}

.treatment-column p {
  margin-bottom: 15px;
  line-height: 1.7;
  color: #666;
}

.treatment-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.treatment-column ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  line-height: 1.6;
  color: #666;
}

.treatment-column ul li:before {
  content: "•";
  position: absolute;
  left: 5px;
  color: var(--teal);
  font-size: 1.4rem;
  line-height: 1.3;
}

.rehabilitation-box {
  background: #f0f8ff;
  padding: 40px;
  border-radius: 12px;
  border-left: 4px solid var(--teal);
}

.rehabilitation-box h3 {
  margin: 0 0 15px 0;
  font-size: 1.5rem;
  color: var(--navy);
}

.rehabilitation-box p {
  margin: 0 0 15px 0;
  line-height: 1.8;
  color: #666;
}

.rehabilitation-box p:last-child {
  margin-bottom: 0;
}

/* ======================= When to Seek Help Section  ========================== */

.when-to-seek-help-section {
  padding: 80px 0;
  background: #f9f9f9;
}

.when-to-seek-help-section .content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.when-to-seek-help-section h2 {
  text-align: center;
  margin-bottom: 50px;
}

.help-intro {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 40px;
  color: #666;
}

.help-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.help-box {
  background: #ffffff;
  padding: 35px 30px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.help-box.urgent {
  border-top: 4px solid #dc3545;
}

.help-box.routine {
  border-top: 4px solid var(--teal);
}

.help-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.help-header i {
  font-size: 2rem;
}

.help-box.urgent .help-header i {
  color: #dc3545;
}

.help-box.routine .help-header i {
  color: var(--teal);
}

.help-header h3 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--navy);
}

.help-box ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.help-box ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  line-height: 1.6;
  color: #666;
}

.help-box ul li:before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: bold;
  font-size: 1.2rem;
}

.help-box.urgent ul li:before {
  color: #dc3545;
}

.help-box.routine ul li:before {
  color: var(--teal);
}

.help-note {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 6px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
}

/* ======================= How We Help Section  ========================== */

.how-we-help-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: #ffffff;
}

.how-we-help-section .content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.how-we-help-section h2 {
  text-align: center;
  margin-bottom: 50px;
  color: #ffffff;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

.service-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  backdrop-filter: blur(10px);
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.service-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
}

.service-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background: var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

.service-item h3 {
  margin-bottom: 12px;
  font-size: 1.2rem;
  color: #ffffff;
}

.service-item p {
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.cta-text {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.cta-text p {
  font-size: 1.15rem;
  line-height: 1.8;
  margin: 0;
}

/* ======================= Conditions Styles Responsive  ========================== */

@media (max-width: 1024px) {
  .symptoms-grid,
  .treatment-info {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .condition-symptoms-section,
  .treatment-section,
  .when-to-seek-help-section,
  .how-we-help-section {
    padding: 60px 0;
  }

  .help-boxes,
  .services-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .condition-symptoms-section,
  .treatment-section,
  .when-to-seek-help-section,
  .how-we-help-section {
    padding: 40px 0;
  }

  .symptom-card,
  .help-box,
  .service-item {
    padding: 25px 20px;
  }

  .rehabilitation-box {
    padding: 25px 20px;
  }
}