/* Decorative shapes for sections */

/* Common styles for all decorative lines/shapes */
.section-shape {
  position: absolute;
  content: '';
  display: block;
  background: linear-gradient(to bottom, #E5CCA8 0%, transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}

/* Make sure all sections with decorative lines have relative positioning */
.about-section, .portfolio-section, .services, #portfolio, .contacts-section, .home-form-section {
  position: relative;
  overflow: hidden;
}

/* About Section Decorative Line */
.about-section::before {
  content: '';
  position: absolute;
  display: block;
  height: 60rem;
  width: .1rem;
  transform-origin: 0 0;
  opacity: .7;
  background: linear-gradient(to bottom, #E5CCA8 0%, transparent 100%);
  left: -1rem;
  top: 20rem;
  transform: rotate(-45deg);
  z-index: 1;
}

/* Portfolio Section Decorative Line */
#portfolio::before, .portfolio-section::before {
  content: '';
  position: absolute;
  display: block;
  height: 60rem;
  width: .1rem;
  transform-origin: 0 0;
  opacity: .7;
  background: linear-gradient(to bottom, #E5CCA8 0%, transparent 100%);
  right: 5rem;
  top: 15rem;
  transform: rotate(45deg);
  z-index: 1;
}

/* Services Section Decorative Line */
.services::before, .services-section::before {
  content: '';
  position: absolute;
  display: block;
  height: 60rem;
  width: .1rem;
  transform-origin: 0 0;
  opacity: .7;
  background: linear-gradient(to bottom, #E5CCA8 0%, transparent 100%);
  left: 5rem;
  top: 10rem;
  transform: rotate(-35deg);
  z-index: 1;
}

/* Contact Section Decorative Line (already exists, but included for completeness) */
.contacts-section::before,
.home-form-section::before {
  content: '';
  position: absolute;
  display: block;
  height: 60rem;
  width: .1rem;
  transform-origin: 0 0;
  opacity: .7;
  background: linear-gradient(to bottom, #E5CCA8 0%, transparent 100%);
  right: -1rem;
  top: 20rem;
  transform: rotate(45deg);
  z-index: 1;
}

/* Additional diagonal line for About section */
.about-section::after {
  content: '';
  position: absolute;
  display: block;
  height: 40rem;
  width: .1rem;
  transform-origin: 0 0;
  opacity: .5;
  background: linear-gradient(to bottom, #E5CCA8 0%, transparent 100%);
  right: 10rem;
  top: 30rem;
  transform: rotate(55deg);
  z-index: 1;
}

/* Additional diagonal line for Portfolio section */
#portfolio::after, .portfolio-section::after {
  content: '';
  position: absolute;
  display: block;
  height: 40rem;
  width: .1rem;
  transform-origin: 0 0;
  opacity: .5;
  background: linear-gradient(to bottom, #E5CCA8 0%, transparent 100%);
  left: 15rem;
  top: 25rem;
  transform: rotate(-55deg);
  z-index: 1;
}

/* Additional diagonal line for Services section */
.services::after, .services-section::after {
  content: '';
  position: absolute;
  display: block;
  height: 40rem;
  width: .1rem;
  transform-origin: 0 0;
  opacity: .5;
  background: linear-gradient(to bottom, #E5CCA8 0%, transparent 100%);
  right: 15rem;
  bottom: 20rem;
  transform: rotate(35deg);
  z-index: 1;
}

/* Additional diagonal line for Home Form section */
.home-form-section::after {
  content: '';
  position: absolute;
  display: block;
  height: 40rem;
  width: .1rem;
  transform-origin: 0 0;
  opacity: .5;
  background: linear-gradient(to bottom, #E5CCA8 0%, transparent 100%);
  left: 15rem;
  top: 15rem;
  transform: rotate(-35deg);
  z-index: 1;
}

/* Responsive styles */
@media only screen and (min-width: 1280px) {
  .about-section::before,
  .portfolio-section::before,
  .services-section::before,
  .contacts-section::before,
  .home-form-section::before,
  #portfolio::before {
    height: 50vw;
  }
  
  .about-section::after,
  .portfolio-section::after,
  .services-section::after,
  .services::after,
  .home-form-section::after,
  #portfolio::after {
    height: 30vw;
  }
}

@media only screen and (max-width: 768px) {
  .about-section::before,
  .portfolio-section::before,
  .services-section::before,
  .contacts-section::before,
  .home-form-section::before,
  #portfolio::before,
  .services::before {
    height: 40rem;
  }
  
  .about-section::after,
  .portfolio-section::after,
  .services-section::after,
  .services::after,
  .home-form-section::after,
  #portfolio::after {
    height: 30rem;
  }
}