/* Base font for the body */
*{
  margin: 0;
  box-sizing: border-box;
}
body, html {
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
}

/* Custom Fonts */
.font-playfair {
  font-family: "Playfair Display", serif;
}

.font-dancing-script {
  font-family: "Dancing Script", cursive;
}

/* Paper Tear Effect */
/* .paper-tear {
  background-image: url("/images/paper-tear.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  transform: translateY(50%); 
  pointer-events: none; 
} */
 /* .paper-tear {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 80px;
  background: white;
  clip-path: polygon(
    0% 50%,
    10% 60%,
    20% 45%,
    30% 60%,
    40% 50%,
    50% 65%,
    60% 45%,
    70% 60%,
    80% 50%,
    90% 60%,
    100% 45%,
    100% 100%,
    0% 100%
  );
  z-index: 30;
} */
.paper-tear {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 80px;
  background: white;
  clip-path: polygon(
    0% 65%,
    5% 55%,
    10% 70%,
    15% 60%,
    20% 75%,
    25% 65%,
    30% 80%,
    35% 70%,
    40% 85%,
    45% 72%,
    50% 87%,
    55% 70%,
    60% 82%,
    65% 67%,
    70% 80%,
    75% 68%,
    80% 78%,
    85% 65%,
    90% 73%,
    95% 60%,
    100% 70%,
    100% 100%,
    0% 100%
  );
  z-index: 30;
}


/* Overlapping Circular Images */
.circle-image-container {
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border: 8px solid white; /* White border */
  display: flex;
  justify-content: center;
  align-items: center;
}

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

/* Specific positioning for overlapping images */
.intro-section .circle-image-container:nth-child(1) {
  top: 0;
  left: 0;
  transform: translate(-10%, -10%);
}

.intro-section .circle-image-container:nth-child(2) {
  bottom: 0;
  right: 0;
  transform: translate(10%, 10%);
}

/* Responsive adjustments for image overlap */
@media (max-width: 1023px) {
  /* For screens smaller than lg */
  .intro-section .circle-image-container:nth-child(1) {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-bottom: -40px; /* Adjust overlap for mobile */
    z-index: 20;
  }
  .intro-section .circle-image-container:nth-child(2) {
    position: relative;
    bottom: auto;
    right: auto;
    transform: none;
    margin-top: -40px; /* Adjust overlap for mobile */
    z-index: 10;
  }
  .intro-section > div > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    margin-bottom: 4rem; /* Space between images and text on mobile */
  }
}
.font-dancing {
    font-family: 'Dancing Script', cursive;
  }

  /* categories */
   .text-image-fill {
      background: url('images/text-fill.jpg') center/cover no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .leaf-bg {
      background-image: url('leaf.svg');
      background-repeat: no-repeat;
      background-position: left top, right bottom;
      background-size: 150px, 150px;
    }
    /* Custom colors */
        .bg-dark-green {
            background-color: #1f4b3f;
        }
        .bg-custom-yellow {
            background-color: #fddb00;
        }
        .text-custom-yellow {
            color: #fddb00;
        }
        .bg-tag-green {
            background-color: #4CAF50; /* Slightly lighter green for the tag, as per reference image */
        }

        /* Custom clip-path for elegant paper tear effect on both top and bottom */
        .clip-path-hero {
            clip-path: polygon(
                0 30px, 10% 15px, 20% 30px, 30% 15px, 40% 30px, 50% 15px, 60% 30px, 70% 15px, 80% 30px, 90% 15px, 100% 30px, /* Top wave points */
                100% calc(100% - 30px), 90% calc(100% - 15px), 80% calc(100% - 30px), 70% calc(100% - 15px), 60% calc(100% - 30px), 50% calc(100% - 15px), 40% calc(100% - 30px), 30% calc(100% - 15px), 20% calc(100% - 30px), 10% calc(100% - 15px), 0 calc(100% - 30px) /* Bottom wave points */
            );
        }

        /* Ensure the image is slightly above the section on larger screens */
        @media (min-width: 1024px) {
            .lg-image-offset {
                margin-top: -6rem; /* Lifts the image container by 6rem */
            }
        }

.splash-class {
    background-image: url('/images/green--splash.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 10px;
}