.hero {
  background-image: url(../img/Hero_img.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

section.section1 {
  background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

section.section2 {
  background-color: #F8E01F;
}


h1.text {
  letter-spacing: -0.01em;
  margin: 0;
  color: rgba(0, 0, 0, 0.2);
  background: linear-gradient(to right, #050505, #000000) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 0%;
  transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1) 2s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
}

.span {
  position: absolute;
  background-color: #4246ce;
  color: #0d0d0d;

  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  transform-origin: center;
  transition: all cubic-bezier(0.1, 0.5, 0.5, 1) 0.4s;

  display: flex;
  flex-direction: column;
  justify-content: center;
}


.section2 p {
  color: #000;
  font-weight: 400;
}

.section2 a {
  font-family: 'Manrope', sans-serif;
  font-weight: bold;
  cursor: pointer;
  text-decoration: underline;
  line-height: normal;
  text-underline-position: under;
}






/* --- Worked on Numbers Animations --- */

/* Line expands left to right */
@keyframes expandLine {
  from {
    width: 0;
    opacity: 0;
  }

  to {
    width: 100%;
    opacity: 1;
  }
}

/* Top content moves UP (starts low near the line) */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bottom content moves DOWN (starts high near the line) */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Initial States (Hidden) */
.anim-line {
  width: 0;
  opacity: 0;
}

.anim-top {
  opacity: 0;
}

.anim-bottom {
  opacity: 0;
}

/* --- Animation Triggers & Delays --- */

/* COLUMN 1 SEQUENCE (Starts at 0s) */
.animate-trigger .item-1 .anim-line {
  animation: expandLine 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0s;
}

.animate-trigger .item-1 .anim-top,
.animate-trigger .item-1 .anim-bottom {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
  /* Starts before line finishes for fluid feel */
  animation-name: slideUp;
  /* Default to slideUp for top, overridden for bottom */
}

.animate-trigger .item-1 .anim-bottom {
  animation-name: slideDown;
}


/* COLUMN 2 SEQUENCE (Starts after Col 1 ~ 0.4s) */
.animate-trigger .item-2 .anim-line {
  animation: expandLine 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.4s;
}

.animate-trigger .item-2 .anim-top,
.animate-trigger .item-2 .anim-bottom {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
  animation-delay: 0.6s;
  animation-name: slideUp;
}

.animate-trigger .item-2 .anim-bottom {
  animation-name: slideDown;
}


/* COLUMN 3 SEQUENCE (Starts after Col 2 ~ 0.8s) */
.animate-trigger .item-3 .anim-line {
  animation: expandLine 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.8s;
}

.animate-trigger .item-3 .anim-top,
.animate-trigger .item-3 .anim-bottom {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
  animation-delay: 1.0s;
  animation-name: slideUp;
}

.animate-trigger .item-3 .anim-bottom {
  animation-name: slideDown;
}


































.section7 {
  background-image: url(../img/section_7.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}


.faq-section {
  max-width: 700px;
  margin: auto;
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}

.faq-question {
  font-weight: 600;
  cursor: pointer;
  position: relative;
}

.faq-question::after {
  content: "+";
  position: absolute;
  right: 0;
  font-size: 18px;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
  content: "−";
}

.faq-answer {
  display: none;
  margin-top: 10px;
  color: #444;
}

footer {
  background-color: #F7D517;
  color: #000;
}

h1.lets_talk {
  font-family: 'Inter Tight', sans-serif;
  /* font-size: 389px; */
  font-weight: bold;
  color: #000;
  /* height: 385px; */
  overflow: hidden;
}

footer ul {
  list-style-type: none;
  line-height: 14px;
  ;
}

footer h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 40px;
  font-weight: bold;
  color: #000;
}

footer h3 {
  color: #000;
}



.hidden {
  opacity: 0;
}

.visible {
  opacity: 1;
}






/*image border animation*/
.scroll-box1,
.scroll-box2 {
  position: relative;
  overflow: hidden;
}

.scroll-box1 img,
.scroll-box2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.95);
}

/* Common border style */
.scroll-box1::before,
.scroll-box1::after,
.scroll-box1 span::before,
.scroll-box1 span::after {
  content: "";
  position: absolute;
  background: #000000;
  transform-origin: left;
  transform: scale(0);
}

.scroll-box2::before,
.scroll-box2::after,
.scroll-box2 span::before,
.scroll-box2 span::after {
  content: "";
  position: absolute;
  background: #ffffff;
  transform-origin: left;
  transform: scale(0);
}








.scroll-box1.border-t::before,
.scroll-box2.border-t::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transform-origin: left;
}

.scroll-box1.border-r::after,
.scroll-box2.border-r::after {
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  transform-origin: top;
}

.scroll-box1.border-b span::before,
.scroll-box2.border-b span::before {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transform-origin: right;
}


.scroll-box1.border-l span::after,
.scroll-box2.border-l span::after {
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  transform-origin: top;
}

.scroll-box1.border-b span::before,
.scroll-box2.border-b span::before {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transform-origin: left;
}


.active-dot {
  background-color: #4F46E5 !important;
  /* Indigo-600 */
}

.animate-fade {
  animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}




.mask {
  visibility: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}











/* NOTE: 'width' transition is removed for JS scrubbing. 
           We only transition opacity/transform for elements inside.
        */
.accordion-panel {
  will-change: width;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
}

.accordion-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.1s linear, transform 0.1s linear;
}

.accordion-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
}

.accordion-bg {
  transition: transform 0.1s linear;
  will-change: transform;
}






























/* Animation Classes */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}


/* Filter Item Styling */
.filter-btn {
  position: relative;
  cursor: pointer;
  transition: color 0.3s ease;
}

.filter-btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background-color: #111827;
  transition: width 0.3s ease;
}

.filter-btn.active {
  font-weight: 600;
}

.filter-btn.active::after {
  width: 100%;
}

/* Item Hide/Show Animation */
.news-item {
  /* Removed display transition to ensure instant collapse */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.news-item.hidden-item {
  display: none;
  /* Instant hide to remove whitespace */
  opacity: 0;
  transform: scale(0.98);
}





/* Custom Input Styling (Bottom Border Only) */
.minimal-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #9ca3af;
  /* Gray-400 */
  padding: 12px 0;
  font-size: 1rem;
  color: #111827;
  transition: border-color 0.3s ease;
  outline: none;
  border-radius: 0;
}

.minimal-input:focus {
  border-bottom-color: #111827;
  /* Black on focus */
}

.minimal-input::placeholder {
  color: #4b5563;
  /* Gray-600 */
  font-weight: 300;
}

/* Social Icon Hover */
.social-icon {
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-3px);
  color: #4b5563;
}






/* Link Underline Hover Effect */
.hover-underline {
  position: relative;
  display: inline-block;
}

.hover-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.hover-underline:hover::after {
  transform: scaleX(0);
  transform-origin: right;
}






/* Hover Zoom Effect for Images */
.img-zoom-container {
  overflow: hidden;
  background-color: #f3f4f6;
  /* Gray-100 placeholder */
}

.img-zoom {
  transition: transform 0.7s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group:hover .img-zoom {
  transform: scale(1.05);
}







/*clientale Custom Animations */
/* --- TILE ANIMATIONS --- */
.logo-tile {
  opacity: 0;
  transform: translateY(20px);
  /* Slightly faster duration for snappier one-by-one feel */
  transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

/* Revealed State */
.logo-tile.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hover Effect for Logos */
.client-logo {
  filter: grayscale(100%);
  opacity: 0.6;
  /* Increased opacity for favicons */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
}

.logo-tile:hover .client-logo {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.15);
  /* Slightly larger zoom for smaller favicons */
}

/* Grid lines (Optional visual flair) */
.logo-grid {
  background-image: linear-gradient(to right, #f3f4f6 1px, transparent 1px),
    linear-gradient(to bottom, #f3f4f6 1px, transparent 1px);
  background-size: 100% 100px;
}










/*testimonial reviews*/
/* Text Progress Reveal Animation */


#testimonial-text p {
  font-size: 40px;
  font-family: 'Manrope', sans-serif;
  line-height: 40px;
}

#testimonial-text h3 {
  font-size: 40px;
  font-weight: bold;
  font-family: 'Manrope', sans-serif;
  line-height: 40px;
}

.quote-text {
  background: linear-gradient(to right, #111 50%, #d1d5db 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.active .quote-text {
  background-position: 0% 0;
}

/* Slide Transitions (Right Side) */
.testimonial-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(30px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-slide.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* Large Logo Transitions (Left Side) */
.big-logo-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.big-logo-wrapper.active {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.big-logo-img {
  filter: grayscale(0%);
  width: 180px;
  height: 180px;
  object-fit: contain;
}




/* Hero Parallax */
.parallax-bg {
  will-change: transform;
  transform: scale(1.1);
  /* Slight zoom to avoid edges showing */
}

/* Smooth Text Reveal */
.reveal-text {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.reveal-text.active {
  opacity: 1;
  transform: translateY(0);
}

html {
  scroll-behavior: smooth;
}


.manifesto-line {
  opacity: 0;
  transform: translateY(40px);
  transition: transform 0.9s cubic-bezier(.22, .61, .36, 1),
    opacity 0.6s ease;
}

/* Start positions */
.from-left {
  transform: translateX(-120px) translateY(40px);
}

.from-right {
  transform: translateX(120px) translateY(40px);
}

/* Final position */
.manifesto-line.visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}


/* Accordion Hover Effect */
/* Inner aligned content container */
.acc-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Default */
.acc-body {
  display: none;
}

.acc-item {
  transition: .25s;
}

/* Hover (inactive) */
.acc-item:hover:not(.active) {
  background: #F7D517;
  color: black;
}

/* Active */
.acc-item.active {
  background: black;
  color: white;
}




/* Smooth fade for the overlay */
.work-overlay {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 100%);
  transition: opacity 0.4s ease;
}

/* Slide animations for text */
.work-info-top {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.work-info-bottom {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

/* Initial states for hover elements */
.group:hover .work-overlay {
  opacity: 1;
}

.group:hover .work-info-top {
  opacity: 1;
  transform: translateY(0);
}

.group:hover .work-info-bottom {
  opacity: 1;
  transform: translateY(0);
}

/* Image Zoom */
.work-image {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.group:hover .work-image {
  transform: scale(1.05);
}






/* Parallax Container */
.parallax-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  /* Taller to allow parallax movement */
  background-size: cover;
  background-position: center;
  will-change: transform;
  z-index: 0;
}

/* Smooth Reveal Animation */
.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.active {
  opacity: 1;
  transform: translateY(0);
}




/* Container defaults */
.hc-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Slide Styles */
.hc-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), visibility 1s;
  z-index: 1;
  /* Low z-index for inactive */
}

/* Active State */
.hc-slide.hc-active {
  opacity: 1;
  visibility: visible;
  z-index: 20;
  /* High z-index for active */
}

/* Image Ken Burns Effect */
.hc-slide-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transition: transform 6s ease-out;
  will-change: transform;
}

.hc-slide.hc-active .hc-slide-bg {
  transform: scale(1.0);
  transition: transform 6s ease-out;
}

/* Text Reveal Animation */
.hc-reveal-mask {
  overflow: hidden;
  /* Ensures text slides up from nothing */
  display: block;
}

.hc-reveal-text {
  display: block;
  transform: translateY(110%);
  /* Start pushed down */
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

.hc-slide.hc-active .hc-reveal-text {
  transform: translateY(0);
  opacity: 1;
}

/* Staggered Delays for Text */
.hc-slide.hc-active .delay-1 {
  transition-delay: 0.2s;
}

.hc-slide.hc-active .delay-2 {
  transition-delay: 0.3s;
}

.hc-slide.hc-active .delay-3 {
  transition-delay: 0.4s;
}

.hc-slide.hc-active .delay-4 {
  transition-delay: 0.6s;
}

/* Progress Bar */
.hc-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #F8E01F;
}

.hc-progress-bar.hc-animate {
  animation: hcProgress 5s linear forwards;
}

@keyframes hcProgress {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}





/* --- FULL SCREEN MENU STYLES --- */
.hc-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 100;
  /* Highest priority */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
  display: flex;
  flex-direction: column;
  /* CHANGED: Align to bottom left */
  align-items: flex-start;
  justify-content: flex-end;
  padding: 3rem;
  /* Add padding from edges */
}

/* Responsive padding */
@media (min-width: 768px) {
  .hc-menu-overlay {
    padding: 4rem 6rem;
  }
}

.hc-menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Scrollable container for menu items in case height is small */
.hc-menu-scroll {
  max-height: 100%;
  overflow-y: auto;
  width: 100%;
  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hc-menu-scroll::-webkit-scrollbar {
  display: none;
}

.hc-menu-link {
  font-size: 2.5rem;
  /* Slightly smaller to fit list */
  font-weight: 800;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease;
  display: block;
  margin-bottom: 0.5rem;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease, color 0.3s ease;
  line-height: 1.1;
}

/* Active State */
.hc-menu-link.active {
  color: #FFD56B;
}

/* Submenu styles - DEFAULT HIDDEN */
.hc-submenu {
  padding-left: 1.5rem;
  border-left: 2px solid #333;
  margin-left: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  /* Hidden State */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0;

  /* Transition */
  transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease,
    margin-bottom 0.4s ease;
}

.hc-submenu-link {
  font-size: 1.125rem;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
  display: block;
  padding: 2px 0;
}

.hc-submenu-link:hover {
  color: #FFD56B;
}

/* HOVER REVEAL LOGIC */
.hc-menu-item:hover .hc-submenu {
  max-height: 300px;
  /* Arbitrary large height to allow expansion */
  opacity: 1;
  margin-bottom: 1rem;
}

.hc-menu-overlay.open .hc-menu-link {
  transform: translateY(0);
  opacity: 1;
}

/* Staggered menu reveal */
.hc-menu-overlay.open .hc-menu-item:nth-child(1) .hc-menu-link {
  transition-delay: 0.1s;
}

.hc-menu-overlay.open .hc-menu-item:nth-child(2) .hc-menu-link {
  transition-delay: 0.15s;
}

.hc-menu-overlay.open .hc-menu-item:nth-child(3) .hc-menu-link {
  transition-delay: 0.2s;
}

/* Removed submenu auto-reveal delay */
.hc-menu-overlay.open .hc-menu-item:nth-child(4) .hc-menu-link {
  transition-delay: 0.3s;
}

.hc-menu-overlay.open .hc-menu-item:nth-child(5) .hc-menu-link {
  transition-delay: 0.35s;
}

.hc-menu-overlay.open .hc-menu-item:nth-child(6) .hc-menu-link {
  transition-delay: 0.4s;
}

.hc-menu-overlay.open .hc-menu-item:nth-child(7) .hc-menu-link {
  transition-delay: 0.45s;
}

.hc-menu-overlay.open .hc-menu-item:nth-child(8) .hc-menu-link {
  transition-delay: 0.5s;
}

.hc-menu-overlay.open .hc-social-container {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.6s;
}

/* Yellow Hover */
.hc-menu-link:hover {
  color: #FFD56B;
}

/* Social Media Styles */
.hc-social-container {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #333;
  width: 100%;
  max-width: 300px;
  display: flex;
  gap: 1.5rem;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.hc-social-icon {
  color: #9CA3AF;
  transition: color 0.3s ease, transform 0.3s ease;
}

.hc-social-icon:hover {
  color: #FFD56B;
  transform: translateY(-3px);
}

/* Navbar z-index fix */
.hc-navbar {
  z-index: 50;
}






/* Smooth scroll for anchor links */
/* Hide scrollbar for cleaner look */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Animation Base Classes */
.reveal-line-horizontal {
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 2.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}

.reveal-line-horizontal.active {
  transform: scaleX(1);
  opacity: 1;
}

.reveal-line-vertical {
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  transition: transform 2.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}

.reveal-line-vertical.active {
  transform: scaleY(1);
  opacity: 1;
}

.reveal-content {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-content.active {
  opacity: 1;
  transform: translateY(0);
}

/* Image Hover Zoom */
.img-container img {
  transition: transform 0.7s ease-out;
}

.group:hover .img-container img {
  transform: scale(1.05);
}



/* ===== Mobile Responsiveness: Remove fixed full-height for sections ===== */
@media (max-width: 768px) {

  /* Override Tailwind's 'h-screen' class so sections take their natural content height */
  .h-screen {
    height: auto !important;
    min-height: auto !important;
  }

  /* OPTIONAL: Exclude the Hero Slider from collapsing */
  /* Because the hero slider's images and text are 'absolutely' positioned, 
     if you let it take 'auto' height, it will collapse to 0 pixels.
     This ensures it stays full screen (or you can change 100vh to 600px). */
  #custom-hero-carousel,
  #custom-hero-carousel .h-screen {
    height: 100vh !important;
  }
}