/* Temporary for development stage, recommend to copy these CSS code to frontend.css when production */
section[data-module="mammoth-horizontal-scroll"] {}

section[data-module="mammoth-horizontal-scroll"] .meet-the-hero {
  position: relative;
  overflow: visible;
  background-color: #000;
  color: #fff;
  text-align: center;
}

/* Single horizontal scroll container (title + team inline) */
section[data-module="mammoth-horizontal-scroll"] .horizontal-scroll-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
  align-items: center;
  height: 100vh; /* Full height for pinning */
  position: relative;
  overflow: hidden;
	width: 500%;
}

/* Title styling */
section[data-module="mammoth-horizontal-scroll"] .section-title {
  flex: 0 0 auto;
  font-size: 500px;
  font-weight: normal;
  white-space: nowrap;
  color: #fff;
  margin: 0;
  position: relative;
  z-index: 1; /* Below team members if needed */
}

/* Team container (inline with title) */
section[data-module="mammoth-horizontal-scroll"] .team-container {
  display: flex;
  gap: 140px;
  flex-wrap: nowrap;
  position: relative;
  z-index: 2; /* Above title */
}

/* Team member cards */
section[data-module="mammoth-horizontal-scroll"] .team-member {
  flex: 0 0 auto;
  min-width: 390px;
  transition: transform 0.3s ease;
	right: 232px;
  position: relative;
}

section[data-module="mammoth-horizontal-scroll"] .team-member:hover {
  transform: translateY(-10px);
}

/* Image Container & Image */
section[data-module="mammoth-horizontal-scroll"] .image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

section[data-module="mammoth-horizontal-scroll"] .profile-image {
  width: 390px;
  height: 460px;
  margin-bottom: 1rem;
  border-radius: 10px;
  display: block;
  transition: opacity 0.3s ease;
}

/* Hover image overlay for team members */
section[data-module="mammoth-horizontal-scroll"] .image-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 460px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

section[data-module="mammoth-horizontal-scroll"] .team-member:nth-child(1) .image-container::after {
  background-image: url('https://blank.entertopwp.com/siten/wp-content/uploads/2025/05/sam-2.avif');
}

section[data-module="mammoth-horizontal-scroll"] .team-member:nth-child(2) .image-container::after {
  background-image: url('https://blank.entertopwp.com/siten/wp-content/uploads/2025/05/lauren-2.avif');
}

section[data-module="mammoth-horizontal-scroll"] .team-member:nth-child(3) .image-container::after {
  background-image: url('https://blank.entertopwp.com/siten/wp-content/uploads/2025/05/harry-2.avif');
}
section[data-module="mammoth-horizontal-scroll"] .team-member:nth-child(4) .image-container::after {
  background-image: url('https://blank.entertopwp.com/siten/wp-content/uploads/2025/05/julien-2.avif');
}
section[data-module="mammoth-horizontal-scroll"] .team-member:nth-child(5) .image-container::after {
  background-image: url('https://blank.entertopwp.com/siten/wp-content/uploads/2025/05/zac-2.avif');
}
section[data-module="mammoth-horizontal-scroll"] .team-member:nth-child(6) .image-container::after {
  background-image: url('https://blank.entertopwp.com/siten/wp-content/uploads/2025/05/alannah-2.avif');
}
section[data-module="mammoth-horizontal-scroll"] .team-member:nth-child(7) .image-container::after {
  background-image: url('https://blank.entertopwp.com/siten/wp-content/uploads/2025/05/eric-2.avif');
}
section[data-module="mammoth-horizontal-scroll"] .team-member:nth-child(8) .image-container::after {
  background-image: url('https://blank.entertopwp.com/siten/wp-content/uploads/2025/05/will-2.avif');
}
section[data-module="mammoth-horizontal-scroll"] .team-member:nth-child(9) .image-container::after {
  background-image: url('https://blank.entertopwp.com/siten/wp-content/uploads/2025/05/dexter-2.avif');
}
section[data-module="mammoth-horizontal-scroll"] .team-member:hover .image-container::after {
  opacity: 1;
}

/* Member info */
section[data-module="mammoth-horizontal-scroll"] .member-info h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #fff;
  text-align: left;
}

section[data-module="mammoth-horizontal-scroll"] h3 {
  font-size: 22px !important;
  margin: 0 0 10px 0 !important;
}

section[data-module="mammoth-horizontal-scroll"] .member-info p {
  margin: 0.5rem 0 0;
  color: #aaa;
}

/* Horizontal line styling */
section[data-module="mammoth-horizontal-scroll"] hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: 0;
  border-top: 1px solid rgb(255, 255, 255);
  width: 60%;
}

/* Scroll Text Container & Text (background blur text effect) */
section[data-module="mammoth-horizontal-scroll"] .scroll-text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

section[data-module="mammoth-horizontal-scroll"] .scroll-text {
  font-size: 10rem;
  font-weight: bold;
  color: #fff;
  opacity: 0.1;
  white-space: nowrap;
  filter: blur(10px);
  animation: scroll-horizontal 20s linear infinite;
}

@keyframes scroll-horizontal {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Hide the default cursor on team member hover */
section[data-module="mammoth-horizontal-scroll"] .team-member:hover {
  cursor: none;
}

/* Style for custom cursor */
section[data-module="mammoth-horizontal-scroll"] .custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px; /* dot size */
  height: 8px;
  background-color: #000;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease;
}

/* Add circle around the dot (pseudo-element) */
section[data-module="mammoth-horizontal-scroll"] .custom-cursor::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px; /* circle size */
  height: 60px;
  background-color: rgba(128, 128, 128, 0.2); /* gray with 50% opacity */
  border-radius: 50%;
  transform: translate(-50%, -50%);
}



/* Typical laptop screen size*/
@media (max-width: 1400px) {
	
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 980px) {
	
}

/* Mobile screen size - landscape view */
@media (max-width: 767px) {
   
}

/* Mobile screen size */
@media (max-width: 480px) {
      
}