/* Image Optimization and Lazy Loading */
.lazy {
  opacity: 0;
  transition: opacity 0.3s;
}

.lazy.loaded {
  opacity: 1;
}

/* Optimize image loading */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Placeholder for lazy images */
.lazy-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Critical CSS for above-the-fold content */
.hero-section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Reduce layout shifts */
.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
}

.aspect-ratio img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Optimize animations */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   Font Loading Optimization - Prevent CLS
   ======================================== */

/* Reserve space for headings before font loads */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-display: swap;
}

/* Fallback font stack to minimize shift */
body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Reserve space for lazy-loaded testimonial images */
.testimonial-img {
  aspect-ratio: 1 / 1;
  width: 80px;
  height: 80px;
  min-height: 80px;
  object-fit: cover;
}

/* ========================================
   STEP 1: Mobile Performance Optimization
   Reduce TBT by pausing non-critical animations on mobile
   ======================================== */

/* Pause decorative animations on mobile to reduce TBT */
@media (max-width: 768px) {

  /* Pause WOW.js animations - not critical for UX */
  .wow {
    animation-name: none !important;
    visibility: visible !important;
  }

  /* Pause AOS animations on mobile - reduces main thread work */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Pause tilt effects on mobile - reduces JS execution */
  .js-tilt {
    transform: none !important;
  }

  /* Pause counter animations on mobile - show final numbers directly */
  .counter {
    opacity: 1 !important;
  }
}

/* Prevent layout shift from animated elements */
.wow,
[data-aos] {
  /* Ensure space is reserved even when paused */
  min-height: 1px;
  contain: layout;
}

/* ========================================
   STEP 2: CLS Fix - Testimonial Section Space Reservation
   ======================================== */

/* Reserve space for testimonial slider items */
.testimonial-slider .owl-item {
  min-height: 200px;
  contain: layout;
}

.testimonial-slider .single-team {
  min-height: 180px;
}

/* ========================================
   STEP 3: CLS Fix - Partners/Clients Section Space Reservation
   ======================================== */

/* Reserve space for partner/client logos */
.clients-slider .owl-item {
  min-height: 80px;
  contain: layout;
}

.clients-slider img {
  min-height: 50px;
  aspect-ratio: 16/9;
  object-fit: contain;
}

/* Reserve space for portfolio items */
.portfolio-slider .owl-item {
  min-height: 250px;
  contain: layout;
}

.portfolio-slider img {
  aspect-ratio: 4/3;
  width: 100%;
  height: auto;
}

/* ========================================
   STEP 5: CSS Containment for Better Performance
   Tells browser to optimize rendering independently
   ======================================== */

/* Apply containment to slider items */
.owl-item {
  contain: layout style;
}

/* Apply containment to gallery items */
.gallery-item {
  contain: layout style paint;
}

/* Apply containment to testimonials */
.single-team {
  contain: layout style;
}

/* ========================================
   STEP 4: Additional CLS Reduction (Additive Only)
   ======================================== */

/* Prevent layout shift - all images */
img {
  height: auto;
}

/* Stabilize hero slider on mobile */
@media (max-width: 767px) {
  .single-slider {
    min-height: 280px;
    aspect-ratio: 16 / 9;
    contain: layout style;
  }
}

/* Reserve space for logo */
.header img {
  max-width: 180px;
  height: auto;
}

/* ========================================
   PHASE 2: CLS Micro-Fixes (Additive, Reversible)
   Additional aspect-ratio and contain for layout stability
   ======================================== */

/* Logo space reservation - prevents header shift */
.header .logo a {
  display: block;
  width: 180px;
  min-height: 60px;
  contain: layout;
}

.header .logo img {
  width: 180px;
  height: auto;
  max-height: 60px;
  object-fit: contain;
}

/* Hero slider - full stability on all breakpoints */
.single-slider {
  contain: layout style;
  will-change: transform;
}

@media (max-width: 480px) {
  .single-slider {
    min-height: 280px !important;
    max-height: 280px !important;
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .single-slider {
    min-height: 320px !important;
    max-height: 320px !important;
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .single-slider {
    min-height: 400px !important;
    max-height: 400px !important;
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 992px) {
  .single-slider {
    min-height: 500px !important;
    max-height: 500px !important;
    aspect-ratio: 16 / 9;
  }
}

/* Slider content - reserve space to prevent text reflow */
.slider-title {
  min-height: 1.2em;
  contain: layout style;
}

@media (max-width: 767px) {
  .slider-title {
    min-height: 2.4em;
  }
}

.slider-description {
  min-height: 2.5em;
  contain: layout style;
}

/* Slider buttons - prevent layout shift */
.slider-buttons {
  min-height: 44px;
  contain: layout;
}

.btn-slider {
  min-width: 120px;
  contain: layout;
}

/* Testimonial section - enhanced CLS prevention */
.single-team {
  aspect-ratio: 4/3;
  min-height: 180px;
  contain: layout style;
}

.single-team img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Partners/Clients - enhanced stability */
.clients-slider .owl-item {
  aspect-ratio: 2/1;
  min-height: 80px;
  contain: layout style;
}

.clients-slider .owl-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Portfolio items - enhanced stability */
.portfolio-item {
  aspect-ratio: 4/3;
  min-height: 250px;
  contain: layout style;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gallery items - enhanced */
.gallery-item {
  aspect-ratio: 4/3;
  min-height: 250px;
  contain: layout style paint;
}

@media (max-width: 576px) {
  .gallery-item {
    min-height: 200px;
  }
}

/* Section headers - prevent font-based shift */
.section-title h2 {
  min-height: 1.3em;
  contain: layout;
}

.section-title p {
  min-height: 2em;
  contain: layout;
}

/* CTA sections - prevent button shift */
.cta-section {
  min-height: 200px;
  contain: layout;
}

/* Footer - prevent bottom shift */
footer {
  contain: layout;
}

.footer-top {
  min-height: 300px;
  contain: layout;
}

/* Content-visibility for off-screen content */
@media (min-width: 992px) {
  .footer-bottom {
    content-visibility: auto;
  }

  .cta-section {
    content-visibility: auto;
  }
}

/* ========================================
   PHASE 3: TBT Micro-Optimizations (Additive, Reversible)
   Mobile-only performance improvements via prefers-reduced-motion
   ======================================== */

/* Pause heavy animations on mobile to reduce TBT */
@media (max-width: 767px) {

  /* Disable CSS transitions and animations on mobile */
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  /* Pause hover effects */
  :hover {
    transition: none !important;
    transform: none !important;
  }

  /* Pause parallax effects */
  .parallax,
  [data-parallax] {
    background-attachment: scroll !important;
    transform: none !important;
  }

  /* Pause scroll animations */
  [data-aos],
  .wow,
  .animate__animated {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Pause counter animations */
  .counter,
  .timer,
  [data-count] {
    animation: none !important;
    transition: none !important;
  }

  /* Pause progress bars */
  [data-progress],
  .progress-bar {
    animation: none !important;
    transition: none !important;
  }

  /* Pause tilt effects */
  .tilt-effect,
  .js-tilt {
    transform: none !important;
  }
}

/* Content-visibility for below-fold sections on desktop */
@media (min-width: 992px) {

  /* Below-fold sections - defer rendering */
  .footer {
    content-visibility: auto;
  }

  .cta-section {
    content-visibility: auto;
  }

  .testimonial-section {
    content-visibility: auto;
  }

  .clients-section {
    content-visibility: auto;
  }

  .portfolio-section {
    content-visibility: auto;
  }

  .blog-section {
    content-visibility: auto;
  }
}

/* Optimize font rendering - reduce paint */
body {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reduce reflow for dynamic content */
img,
video,
iframe,
embed,
object {
  contain: layout;
}

/* Prevent forced layout shifts */
.slider,
.hero-slider,
.testimonial-slider,
.clients-slider,
.portfolio-slider {
  contain: layout style;
}














/* =========================================
   SAFE PERFORMANCE MODE (NO LAYOUT BREAK)
========================================= */

/* Disable heavy animations ONLY */
.wow,
.animated,
[data-aos],
.aos-init,
.aos-animate {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Disable animation effects inside sections only */
.section *,
.testimonial *,
.gallery *,
.counter *,
.partners * {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}

/* Mobile only – reduce motion */
@media (max-width: 767px) {

  .wow,
  .animated,
  [data-aos] {
    animation: none !important;
    transition: none !important;
  }
}

/* ========================================
   CORE WEB VITALS FIX: Reserve Slider Space
   Prevents CLS from late-loading slider images
   ======================================== */

.slider,
.hero-slider,
.single-slider {
  min-height: 500px;
}

@media (max-width: 767px) {

  .slider,
  .hero-slider,
  .single-slider {
    min-height: 280px;
    aspect-ratio: 16 / 9;
  }
}

/* ========================================
   FIX 1: HERO SLIDE 1 - LCP SAFETY
   Disable ALL animations on first slide only
   ======================================== */

/* First slide must be static for LCP - no fade, no transitions */
.hero-slide[data-slide="0"],
.hero-slide.active[data-slide="0"] {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* First slide content - instant appearance, no animations */
.hero-slide[data-slide="0"] .hero-slide-content,
.hero-slide[data-slide="0"] .hero-title,
.hero-slide[data-slide="0"] .hero-description,
.hero-slide[data-slide="0"] .hero-buttons,
.hero-slide[data-slide="0"] .btn-hero {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}

/* First slide image - no lazy loading effects */
.hero-slide[data-slide="0"] .hero-slide-image {
  transition: none !important;
  opacity: 1 !important;
}

/* Remove will-change from first slide to prevent GPU overhead */
.hero-slide[data-slide="0"] {
  will-change: auto !important;
}

/* ========================================
   FIX 2: REMOVE HERO DOTS NAVIGATION
   CSS-only removal - no JS changes needed
   ======================================== */

.hero-dots,
.hero-slider-wrapper .hero-dots,
#hero-slider .hero-dots {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: -9999 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Ensure dot buttons are also hidden */
.hero-dot,
.hero-slider-wrapper .hero-dot,
#hero-slider .hero-dot {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ========================================
   FIX 3: MOROCCO PACK TOURS VISIBILITY
   Fix cards hidden due to contain/overflow issues
   ======================================== */

/* Portfolio section - ensure visibility */
.portfolio.section,
section.portfolio,
.blog.grid.section {
  contain: none !important;
  overflow: visible !important;
  display: block !important;
  visibility: visible !important;
}

/* Portfolio slider container - fix Owl Carousel visibility */
.portfolio-slider,
.owl-carousel.portfolio-slider {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  position: relative !important;
}

/* Individual portfolio items */
.single-pf,
.portfolio .single-pf,
.portfolio-slider .single-pf {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  contain: none !important;
  overflow: visible !important;
}

/* Card content visibility */
.single-news,
.single-pf .single-news {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.news-head,
.news-body,
.news-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix any stacking context issues */
.portfolio .container,
.portfolio .container-fluid {
  position: relative !important;
  z-index: 1 !important;
}

/* Ensure portfolio images are visible */
.news-head img,
.single-news img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix for Owl Carousel items that might be hidden */
.owl-carousel .owl-item,
.portfolio-slider .owl-item {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

.owl-carousel .owl-stage,
.portfolio-slider .owl-stage {
  display: flex !important;
  visibility: visible !important;
}

.owl-carousel .owl-stage-outer,
.portfolio-slider .owl-stage-outer {
  overflow: visible !important;
}

/* ========================================
   PHASE 2 FIXES: Aggressive Animation Removal
   ======================================== */

/* ========================================
   PHASE 3 FIX: HERO SLIDE 1 - FINAL ANIMATION KILL
   Ensures ZERO animation on the first slide for LCP
   ======================================== */

/* Aggressively disable ALL animations and transitions for the first slide and its content */
.hero-slide[data-slide="0"],
.hero-slide[data-slide="0"] *,
.hero-slide.active[data-slide="0"],
.hero-slide.active[data-slide="0"] * {
  animation: none !important;
  animation-name: none !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  animation-fill-mode: forwards !important;
  animation-iteration-count: 1 !important;
  transition: none !important;
  transition-property: none !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  transform: none !important;
  transform-style: flat !important;
  opacity: 1 !important;
  visibility: visible !important;
  will-change: auto !important;
  /* Prevent GPU acceleration that might cause issues */
}

/* Ensure immediate display of text and buttons */
.hero-slide[data-slide="0"] .hero-title,
.hero-slide[data-slide="0"] .hero-description,
.hero-slide[data-slide="0"] .hero-buttons,
.hero-slide[data-slide="0"] .btn-hero {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  /* display: block !important; -- REMOVED: breaks flex layout of buttons */
  white-space: normal !important;
  /* Prevent text clipping if typing effect relied on it */
  width: auto !important;
  overflow: visible !important;
}

/* --- Hero LCP Button Fix (SAFE) --- */
/* LCP image must not block pointer events so buttons remain clickable */
.hero-slide-image {
  pointer-events: none !important;
}

/* Ensure content layer sits above the LCP image */
.hero-slide-content {
  position: relative !important;
  z-index: 2 !important;
}

/* Critical: Remove any pseudo-element animations */
.hero-slide[data-slide="0"] *::before,
.hero-slide[data-slide="0"] *::after {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure the image is static */
.hero-slide[data-slide="0"] .hero-slide-image {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  will-change: auto !important;
}


/* ========================================
   PHASE 2 FIXES: Complete Hero Dots Removal
   ======================================== */

/* Remove dots from DOM flow completely */
.hero-dots {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Also hide individual dot buttons */
.hero-dot,
.hero-slider-wrapper .hero-dot {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 
 * Morocco Pack Tours carousel styles moved to:
 * css/morocco-carousel-clean.css
 * 
 * This prevents conflicts with !important rules
 * and provides cleaner, maintainable code.
 */