/* --- Hero Section --- */

.hero-grid {
  display: grid;
  /* Default Mobile: Standard single column stack */
  grid-template-columns: 1fr;
  gap: 1rem;
  text-align: center;
  align-items: center;
  padding: 4rem 0;
  position: relative;
  z-index: 10;
}

.hero-grid-about {
  display: grid;
  /* Default Mobile: Standard single column stack */
  grid-template-columns: 1fr;
  gap: 1rem;
  text-align: center;
  align-items: center;
  padding: 4rem 0 0 0;
  position: relative;
  z-index: 10;
}

@media (min-width: 768px) {
  .hero-grid, .hero-grid-about {
    text-align: left;
  }
}

@media (min-width: 916px) and (max-width: 1199px) {
  .hero-grid, .hero-grid-about {
    gap: 8rem;
  }
}

/* Specific breakpoint logic explicitly requested so one side can be smaller */
@media (min-width: 1200px) {
  .hero-grid, .hero-grid-about {
    /* Desktop: Left side naturally smaller, right side explicitly wider to fit the collage bleeding effect */
    grid-template-columns: 0.70fr 1.30fr;
    gap: 3rem;
    text-align: left;
  }
}

@media (min-width: 1440px) {
  .hero-grid, .hero-grid-about {
    /* Desktop: Left side naturally smaller, right side explicitly wider to fit the collage bleeding effect */
    grid-template-columns: 0.85fr 1.15fr;
    gap: 3rem;
    text-align: left;
  }
}

.hero-content h1 {
  /* clamp() makes the font dynamically scale down on smaller phones */
  font-size: clamp(2.1rem, 5vw, 2.75rem);
  line-height: 1.5;
  margin-bottom: 1.5rem;
  color: var(--dark-text);
}

/* Elegant CTA Button */
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-green-dark);
  color: var(--white);
  padding: 1rem 2rem;
  border-radius: 1rem; /* Pill shape */
  font-weight: bold;
  font-size: 1.25rem;
  border: 2px solid var(--brand-green-dark);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.btn-hero .btn-arrow {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  transform: translateX(-15px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  white-space: nowrap;
}

/* Hover: Inverse colors, add blue glow, and slide in arrow */
.btn-hero:hover {
  background: var(--dark-text);
  color: var(--white);
  box-shadow: var(--glow-green);
  border: 2px solid var(--dark-text);
}

.btn-hero:hover .btn-arrow {
  max-width: 24px; /* Unhides the arrow */
  opacity: 1;
  transform: translateX(8px); /* Glides it to the right */
}

/* --- Image Collage & Layout --- */

.hero-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem; 
  z-index: 2;
  overflow: visible;
}

.collage-container {
  position: relative;
  display: flex;
  flex-direction: column; /* By default on mobile, stack beautifully */
  gap: 2rem;
  width: 100%;
  align-items: center;
  z-index: 2;
}

@media (min-width: 916px) {
  .collage-container {
    display: block; /* Break flexbox so absolute positioning takes completely over on Desktop */
    width: 100%;
    max-width: 500px; /* Locks max width safely to match the main central image */
    margin: 0 auto;
  }
}

/* Unified Hover Effect shared by all 5 pictures */
.hover-tilt {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: var(--shadow-md);
  border: 3px solid transparent; /* Invisible border placeholder to prevent layout jumping */
  background: var(--white);
  margin: 0;
}

.hover-tilt:hover {
  transform: scale(1.05) rotate(2deg);
  border-color: var(--brand-blue-500);
  box-shadow: var(--glow-blue);
  z-index: 30 !important; /* Immediately pull to front over other images */
}

/* Makes alternating images rotate randomly in the opposite direction */
.hover-tilt:nth-child(even):hover {
  transform: scale(1.05) rotate(-2deg);
}

.hover-tilt img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Unified Captions */
.hover-tilt figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.75); /* Transparent dark background */
  color: var(--white);
  text-align: center;
  padding: 0.6rem 0.5rem;
  font-size: 0.9rem;
  font-weight: bold;
  backdrop-filter: blur(4px); /* Premium text-legibility blur behind the black overlay */
  -webkit-backdrop-filter: blur(4px);
  user-select: none;
}

/* Main Core Image Sizing */
.collage-main {
  z-index: 10;
  width: 100%;
  max-width: 500px;
}

/* The 4 overlapping corner items */
.collage-item {
  z-index: 15; /* Higher than main image */
  width: 80%; /* Takes 80% screen width when stacked vertically on mobile */
  max-width: 320px;
}

/* Desktop Absolute Mapping */
@media (min-width: 916px) {
  .collage-item {
    position: absolute;
    width: 32%; /* Approximately 10-15% of the total main image area per the math request */
    max-width: none;
  }
  
  .pos-top-left { top: -22%; left: -22%; }
  .pos-top-right { top: -22%; right: -22%; }
  .pos-bottom-left { bottom: -22%; left: -22%; }
  .pos-bottom-right { bottom: -22%; right: -22%; }
}

/* Vanilla translation of Tailwind floating badge */
.hero-badge {
  position: absolute;
  top: -3%; 
  left: 0;   
  background: var(--white);
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: float-badge 3s infinite; 
  z-index: 40; /* Elevated completely above the collage overlap */
}

@media (max-width: 499px) {
  .hero-badge {
    display: none;
  }
}

@media (max-width: 575px) {
  .hero-badge {
    top: -22%;
    left: 34%;
  }
}

@media (min-width: 768px) {
  .hero-badge {
    top: -20%;
    left: 40%;
  }
}

@media (min-width: 916px) {
  .hero-badge {
    top: -25%;
    left: 44%;
  }
}

@media (min-width: 1200px) {
  .hero-badge {
    top: -25%;
    left: 41%;
  }
}

.hero-badge-about {
  position: absolute;
  top: -80px; 
  left: 23%;   
  background: var(--white);
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: float-badge 3s infinite; 
  z-index: 40; /* Elevated completely above the collage overlap */
}

.hero-badge-360-499 {
  position: absolute;
  top: -31%; 
  left: 30%;   
  background: var(--white);
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: float-badge 3s infinite; 
  z-index: 40; /* Elevated completely above the collage overlap */
}

@media (min-width: 500px) {
  .hero-badge-360-499 {
    display: none;
  }
}

.badge-icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--brand-green-light);
  color: var(--brand-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.badge-title {
  font-weight: bold;
  color: var(--dark-text);
  margin: 0;
  line-height: 1.2;
}

.badge-subtitle {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin: 0;
}

@keyframes float-badge {
  0% { 
    transform: translateY(0); 
    animation-timing-function: ease-out; /* Decelerates smoothly as it moves up */
  }
  50% { 
    transform: translateY(-15px); 
    animation-timing-function: ease-in; /* Accelerates naturally as it falls down */
  }
  100% { 
    transform: translateY(0); 
  }
}

.points-list {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  font-size: 1rem;
} 

.points-list-contact {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  font-size: 1.05rem;
} 

.badge-icon-contact {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--brand-green);
  border-radius: 0.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  color: #4a5568; /* Set your default color */
  transition: color 0.2s ease;
  margin-bottom: 1.5rem;
}

.badge-icon-contact:hover {
  color: #2563eb; /* Blue hover effect */
}