/* Hero section custom styling with flat shape and parallax cutout */
.hero-area {
  position: relative;
  background-color: #cd445a;
  overflow: hidden;
  padding: 180px 0 150px 0; /* Added more bottom padding for the wave */
  min-height: 600px;
}

/* Hero background slideshow */
.hero-slideshow {
  transform: scale(1.2);
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;  /* Enlarged to allow for parallax movement */
  height: 150%; /* Enlarged to allow for parallax movement */
  z-index: 0;
}

.hero-slide {
  position: absolute;
  top: -25%; /* Center the enlarged image */
  left: -25%; /* Center the enlarged image */
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  will-change: transform;
}

.hero-slide.active {
  opacity: 1;
}

.hero-slide-1 {
  background-image: url('../images/adam-front1.png');
}

.hero-slide-2 {
  background-image: url('../images/adam-front2.png');
}

.hero-slide-3 {
  background-image: url('../images/adam-front3.png');
}

/* Logo-shaped cutout for parallax effect in the background */
.hero-cutout {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -40%);
  width: 1000px; /* Increased size for larger background */
  height: 1000px; /* Increased size for larger background */
  mask-image: url('../images/parallax-logo.svg');
  -webkit-mask-image: url('../images/parallax-logo.svg');
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  z-index: 1;
  overflow: hidden;
}

/* Logo cutout on the right side of hero */
.logo-cutout-container {
  position: relative;
  width: 360px;
  height: 360px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  mask-image: url('../images/parallax-logo.svg');
  -webkit-mask-image: url('../images/parallax-logo.svg');
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

.logo-cutout-parallax {
  position: absolute;
  top: -25%; /* Push up to center */
  left: -25%; /* Push left to center */
  width: 200%; /* Increase from 150% to 200% */
  height: 200%; /* Increase from 150% to 200% */
  background-image: url('../images/adam-front1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  transition: transform 0.3s ease-out;
}

.hero-content, .hero-image {
  position: relative;
  z-index: 3;
}

.hero-content h1, 
.hero-content p, 
.hero-content .button {
  position: relative;
  z-index: 3;
  color: #fff;
}

/* Ensure content stays on top and visible */
.container {
  position: relative;
  z-index: 3;
}

/* Make the header transparent to show background */
.header {
  background: transparent;
}

/* Responsive adjustments */
@media only screen and (max-width: 767px) {
  .hero-area {
    padding: 150px 0 80px 0;
  }
  
  .hero-cutout {
    width: 420px; /* Increased from 350px to 420px (120%) */
    height: 420px; /* Increased from 350px to 420px (120%) */
  }
  
  .logo-cutout-container {
    width: 240px; /* Increased from 200px to 240px (120%) */
    height: 240px; /* Increased from 200px to 240px (120%) */
    margin-top: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .logo-cutout-container {
    width: 300px; /* Increased from 250px to 300px (120%) */
    height: 300px; /* Increased from 250px to 300px (120%) */
  }
}