.about-section {
  padding: 6rem 2rem;
  background: var(--neutral-light);
  position: relative;
  overflow: hidden;
}

.about-section::after {
  content: "";
  position: absolute;
  top: 5%;
  right: -5%;
  width: 35rem;
  height: 12rem;
  background-image: url("data:image/svg+xml,%3Csvg width='600' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,100 Q80,60 150,90 T290,80 Q380,95 470,70 T590,90' stroke='%236B4423' stroke-width='6' fill='none' stroke-linecap='round' opacity='0.5'/%3E%3Cpath d='M15,105 Q85,65 155,95 T295,85 Q385,100 475,75 T595,95' stroke='%236B4423' stroke-width='4' fill='none' stroke-linecap='round' opacity='0.3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

.about-container::before {
  content: "";
  position: absolute;
  bottom: 8%;
  left: -8%;
  width: 40rem;
  height: 15rem;
  background-image: url("data:image/svg+xml,%3Csvg width='700' height='250' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,120 Q120,80 200,110 T380,95 Q480,120 580,90 T690,115' stroke='%235C4033' stroke-width='7' fill='none' stroke-linecap='round' opacity='0.4'/%3E%3Cpath d='M55,125 Q125,85 205,115 T385,100 Q485,125 585,95 T695,120' stroke='%235C4033' stroke-width='5' fill='none' stroke-linecap='round' opacity='0.25'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.about-container {
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  gap: 4rem;
  align-items: center;
}

.about-image-wrapper {
  position: relative;
  flex: 0 0 auto;
}

.about-img {
  width: 26.25rem;
  height: 34rem;
  object-fit: cover;
  border-radius: 0.75rem;
  box-shadow: 0 0.938rem 3.125rem rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
}

.about-img:hover {
  transform: scale(1.02);
  box-shadow: 0 1.25rem 3.75rem rgba(201, 162, 160, 0.25);
}

.about-image-wrapper::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: -1.5rem;
  width: 26.25rem;
  height: 34rem;
  background: #6b4423;
  border-radius: 0.75rem;
  z-index: 0;
}

.about-content {
  flex: 1;
}

.about-content h2 {
  font-size: var(--fs-h2);
  color: var(--accent-deep);
  margin-bottom: 1.5rem;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-h2);
}

.about-content p {
  font-size: var(--fs-h6);
  color: var(--neutral-dark);
  line-height: var(--lh-h6);
  margin-bottom: 1.25rem;
  opacity: 0.9;
}

.about-content p:first-of-type {
  font-size: 1.15rem;
  font-weight: var(--fw-medium);
  color: var(--accent-deep);
}

.about-content p strong {
  color: var(--primary-rose);
  font-weight: var(--fw-semibold);
}

.about-content p strong i {
  margin-right: 0.35rem;
  color: var(--primary-gold);
}

.about-content p span {
  color: var(--accent-pink);
  font-weight: var(--fw-medium);
}

@media (max-width: 1024px) {
  .about-section {
    padding: 5rem;
  }

  .about-container {
    gap: 3rem;
  }

  .about-container::before {
    width: 28rem;
    height: 10rem;
    bottom: -10%;
    left: -10%;
  }

  .about-img {
    width: 23.75rem;
    height: 30rem;
  }

  .about-image-wrapper::before {
    width: 23.75rem;
    height: 30rem;
  }

  .about-content h2 {
    font-size: var(--fs-h3);
  }
}

@media (max-width: 900px) {
  .about-section {
    padding: 4.5rem 1.75rem;
  }

  .about-container {
    gap: 2.5rem;
  }

  .about-img {
    width: 21.875rem;
    height: 28rem;
  }

  .about-image-wrapper::before {
    width: 21.875rem;
    height: 28rem;
  }

  .about-content h2 {
    font-size: var(--fs-h4);
  }

  .about-content p {
    font-size: var(--fs-base);
  }
}

@media (max-width: 768px) {
  .about-section {
    padding: 4rem 1.5rem;
  }

  .about-section::after {
    width: 25rem;
    height: 8rem;
    top: 0;
    right: -10%;
  }

  .about-container::before {
    width: 28rem;
    height: 10rem;
    bottom: -5%;
    left: -10%;
  }

  .about-container {
    flex-direction: column;
    gap: 2.5rem;
  }

  .about-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .about-img {
    width: 100%;
    max-width: 22rem;
    height: 22rem;
  }

  .about-image-wrapper::before {
    left: 50%;
    transform: translateX(calc(-50% - 1rem));
    width: 100%;
    max-width: 22rem;
    height: 22rem;
  }

  .about-content {
    text-align: center;
  }

  .about-content h2 {
    font-size: var(--fs-h3);
    margin-bottom: 1.5rem;
  }

  .about-content p {
    font-size: var(--fs-base);
    margin-bottom: 1rem;
  }

  .about-content p:first-of-type {
    font-size: var(--fs-h6);
  }
}

@media (max-width: 480px) {
  .about-section {
    padding: 3rem 1.25rem;
  }

  .about-section::after {
    width: 20rem;
    height: 6rem;
    opacity: 0.4;
    top: -2%;
    right: -15%;
  }

  .about-container::before {
    width: 22rem;
    height: 8rem;
    opacity: 0.35;
    bottom: -5%;
    left: -15%;
  }

  .about-container {
    gap: 2rem;
  }

  .about-img {
    max-width: 18rem;
    height: 18rem;
  }

  .about-image-wrapper::before {
    max-width: 18rem;
    height: 18rem;
    transform: translateX(calc(-50% - 0.75rem));
  }

  .about-content h2 {
    font-size: var(--fs-h4);
    margin-bottom: 1.25rem;
  }

  .about-content p {
    font-size: var(--fs-base);
  }

  .about-content p:first-of-type {
    font-size: var(--fs-h6);
  }
}

@media (max-width: 375px) {
  .about-section {
    padding: 2.5rem 1rem;
  }

  .about-container {
    gap: 1.75rem;
  }

  .about-img {
    max-width: 16rem;
    height: 16rem;
  }

  .about-image-wrapper::before {
    max-width: 16rem;
    height: 16rem;
    transform: translateX(calc(-50% - 0.5rem));
  }

  .about-content h2 {
    font-size: var(--fs-h5);
    margin-bottom: 1rem;
  }

  .about-content p {
    font-size: 0.938rem;
  }

  .about-content p:first-of-type {
    font-size: var(--fs-base);
  }
}