/* MOBILE-ONLY ENHANCEMENTS FOR HOMEPAGE - NO DESKTOP IMPACT - Updated 2024-09-07 15:16 */

/* 
=============================================================================
MOBILE VIDEO OPTIMIZATION APPROACH:

Current Implementation:
- Uses object-fit: contain with scale(1.05) to show all video content
- Adds background extensions to create the immersive extended effect
- No video content is cropped, preserving all visual elements

Alternative Option (if you prefer a mobile-specific video):
1. Create a mobile-optimized version of your video with mobile aspect ratio
2. Replace the existing .mobile-screen video source in index.ejs
3. Use object-fit: cover for perfect coverage

For mobile video creation:
- Recommended aspect ratio: 9:16 or 9:18 (portrait/mobile optimized)
- Duration: Same as desktop video
- Content: Ensure important elements are centered for mobile viewing
=============================================================================
*/
/* DISABLED - Clean approach instead */
@media screen and (max-width: 0px) {

  .hero-section-content {
    /* Keep desktop-like positioning but adjust for mobile */
    padding: 0 20px 0 !important;
    position: absolute !important;
    top: 380px !important; /* Move text lower to match original position */
    z-index: 10 !important;
    max-width: 90% !important;
  }

  .hero-section-title {
    font-size: clamp(20px, 5vw, 26px) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    word-wrap: break-word !important;
    display: block !important;
    width: 100% !important;
    /* Enhanced text shadow for cinematic effect */
    text-shadow: 0 3px 12px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.8) !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
  }

  .hero-section-text {
    font-size: clamp(16px, 4vw, 22px) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    word-wrap: break-word !important;
    display: block !important;
    width: 100% !important;
    /* Enhanced text shadow for better readability */
    text-shadow: 0 3px 12px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.8) !important;
    font-weight: 300 !important;
    letter-spacing: 0.3px !important;
  }

  .hero-section-para {
    font-size: clamp(12px, 3vw, 14px) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    word-wrap: break-word !important;
    display: block !important;
    width: 100% !important;
    opacity: 0.95 !important;
    /* Enhanced text shadow for paragraph readability */
    text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.9) !important;
    font-weight: 300 !important;
  }

  .hero-section-btn {
    font-size: clamp(12px, 3.5vw, 14px) !important;
    padding: 12px 32px !important;
    margin-top: 20px !important;
    width: auto !important;
    max-width: 200px !important;
    /* Enhanced button styling like Saudi office */
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
  }
  
  .hero-section-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-bottom-color: rgba(255, 255, 255, 1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
  }

  /* Creativity Section Mobile - Horizontal Scroll with Extended Hero Overlap */
  .creativity-section-wrap {
    height: auto !important;
    min-height: 100vh !important;
    padding-inline: 0 !important;
    position: relative !important;
    background: var(--main-color) !important;
    margin-top: 200px !important; /* Match the hero section overlap */
    z-index: 3 !important; /* Above hero video background */
  }

  .creativity-section {
    position: static !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: 24px !important;
  }

  .creativity-title {
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.2 !important;
    padding: 0 20px !important;
    margin-bottom: 4px !important;
    text-align: center !important;
  }

  .creativity-title2 {
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.2 !important;
    padding: 0 20px 40px 20px !important;
    text-align: center !important;
  }

  .creativity-content {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: min(90vh, 780px) !important; /* taller like .sa */
    padding: 0 !important;
    gap: 0 !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    will-change: transform !important;
    flex-wrap: nowrap !important;
  }

  .creativity-content::-webkit-scrollbar {
    display: none !important;
  }

  .creativity-video-box1,
  .creativity-video-box2,
  .video-box3 {
    flex: none !important;
    height: 100% !important;
    scroll-snap-align: start !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .content-video {
    height: 88% !important; /* more video area, longer visuals */
    border-radius: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  .video1, .video2, .video3 {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: none !important;
  }

  .video-info {
    padding: 16px !important;
    text-align: center !important;
    height: 12% !important; /* less caption, more media */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .video-title {
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.3 !important;
    color: white !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
  }

  /* Services Section Mobile - Simple List Layout */
  .services-section {
    height: auto !important;
    margin-top: 16px !important;
    margin-bottom: 40px !important;
    padding-inline: 20px !important;
    background: var(--main-color) !important;
  }

  .services-section-sticky {
    position: static !important;
    top: auto !important;
    overflow: visible !important;
    height: auto !important;
  }

  .services-section-wrap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    height: auto !important;
    text-align: center !important;
    padding: 16px 0 !important;
  }

  .service-info {
    flex: none !important;
    padding-left: 0 !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  .services-section .service-title {
    /* small lead-in heading, like the original */
    font-size: clamp(16px, 4vw, 22px) !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
  }

  .service-text {
    /* BIG two-line headline */
    font-size: clamp(36px, 10.5vw, 60px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  .service-name-content {
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
    animation: none !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .service-name {
    /* larger first line */
    font-size: clamp(22px, 6.5vw, 30px) !important;
    line-height: 1.22 !important;
    padding: 0 !important;
    filter: none !important;
    opacity: 1 !important;
    color: rgba(255, 255, 255, 1) !important;
    text-align: center !important;
    font-weight: 300 !important;
    letter-spacing: 0.2px !important;
  }

  .service-name span {
    /* put the key word on its own line and make it bigger */
    display: block !important;
    font-size: clamp(28px, 8.8vw, 40px) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    margin-top: 4px !important;
  }

  /* Clients Section Mobile */
  .clients-section {
    padding: 40px 0 0 !important; /* edge-to-edge like .com.sa */
  }

  .clients-title {
    /* title closer to original scale */
    font-size: clamp(32px, 8vw, 44px) !important;
    line-height: 1.15 !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  .clients-images {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .img-box {
    height: 110px !important;
    border-radius: 6px !important;
  }

  .client-img {
    max-width: 72% !important;
    max-height: 68% !important;
  }

  /* Vision Section Mobile */
  .vision-section-wrap {
    height: auto !important;
    min-height: 70vh !important;
    margin-inline: 0 !important;
    margin-bottom: 40px !important;
  }

  .vision {
    position: static !important;
    height: 78vh !important;
  }

  .vision-main-logo {
    margin-left: 15px !important;
    margin-top: 15px !important;
    z-index: 10 !important;
  }

  /* scale the logo on mobile so it matches reference proportion */
  .vision-main-logo .vision-icon {
    width: 72vw !important;
    height: auto !important;
  }

  .info-video-wrap1,
  .info-video-wrap2 {
    width: calc(100% - 30px) !important;
    margin-inline: 15px !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
    background-color: #252422bd !important;
  }

  .video-para {
    font-size: clamp(14px, 4vw, 18px) !important;
    line-height: 1.4 !important;
  }

  /* Touch-friendly interactions */
  a, button {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Performance optimizations for mobile */
  .hero-section-video,
  .video1, .video2, .video3,
  .vision-video {
    will-change: auto !important;
    transform: translateZ(0) !important;
  }

  /* Disable animations and reduce motion for better mobile performance */
  * {
    animation: none !important;
    transition-duration: 0.2s !important;
  }

  /* Re-enable reveal transitions for targeted elements */
  .reveal-left, .reveal-right {
    animation: none !important; /* use transitions instead */
    transition: transform 0.7s cubic-bezier(.2,.65,.3,1), opacity 0.7s ease !important;
  }

  /* Services page mobile layout tweaks */
  .services-page .service-section { padding: 24px 16px !important; }
  .services-page .service-wrap {
    position: relative !important;
    background: var(--gray-color) !important;
    min-height: auto !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .services-page .service-info-left,
  .services-page .service-info-right { width: 100% !important; padding: 0 !important; }
  .services-page .img-box-left,
  .services-page .img-box-right {
    width: 100% !important;
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
    margin-top: 8px !important;
  }
  .services-page .service-img-right,
  .services-page .service-img-left {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* show full artwork on mobile */
    display: block !important;
    background: transparent !important;
  }
  /* Full-width services hero video mobile */
  .services-hero-video-section { padding: 16px !important; margin-bottom: 24px !important; }
  .services-hero-video-container { height: 200px !important; margin: 0 !important; border-radius: 12px !important; }
  .services-hero-video { object-position: center center !important; transform: none !important; }

  /* General mobile scaling */
  body {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  /* Reduce overall padding and margins */
  section {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Remove padding for full-width sections */
  .hero-section,
  .main-page,
  main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  
  /* Ensure containers don't add unwanted spacing */
  .container,
  .main-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

}

/* Extra small mobile devices (320px - 480px) */
@media screen and (max-width: 480px) {
  
  .hero-section {
    /* Keep normal section behavior */
    margin-bottom: 60px !important;
  }
  
  .hero-section .video-box {
    /* Keep desktop-like video box behavior */
    min-height: 720px !important;
  }
  
  .hero-section-video.mobile-screen {
    /* Ensure mobile video shows correctly on small screens with scroll animation */
    min-height: 720px !important;
    object-fit: cover !important;
    object-position: center center !important;
    /* Add scroll animation effects */
    animation: video_zoom 1s linear;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
    transform-origin: center center;
    /* Enhanced visual quality */
    filter: contrast(1.05) brightness(1.02) saturate(1.1);
  }
  
  .hero-section-box {
    /* Adjust for small screens */
    top: 90px !important;
    height: calc(100% - 89px) !important;
  }
  
  .hero-section-content {
    /* Adjust content positioning for small screens */
    top: 360px !important;
    max-width: 95% !important;
    padding: 0 15px !important;
  }
  
  .creativity-section-wrap {
    margin-top: 160px !important;
  }

  .creativity-video-box1,
  .creativity-video-box2,
  .video-box3 {
    width: 100vw !important;
  }

  .creativity-content {
    padding-left: 0 !important;
    gap: 12px !important;
  }

  .services-section,
  .clients-section {
    padding-inline: 0 !important;
  }

}

/* iPhone SE and smaller devices */
@media screen and (max-width: 375px) {
  
  .hero-section {
    /* Keep normal behavior for very small screens */
    margin-bottom: 40px !important;
  }
  
  .hero-section .video-box {
    /* Keep desktop-like video box behavior */
    min-height: 720px !important;
  }
  
  .hero-section-video.mobile-screen {
    /* Ensure mobile video shows correctly on iPhone SE with scroll effects */
    min-height: 720px !important;
    object-fit: cover !important;
    /* Add scroll animation effects */
    animation: video_zoom 1s linear;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
    transform-origin: center center;
    /* Enhanced visual quality */
    filter: contrast(1.05) brightness(1.02) saturate(1.1);
  }
  
  .hero-section-box {
    /* Keep normal positioning */
    top: 90px !important;
    height: calc(100% - 89px) !important;
  }
  
  .hero-section-content {
    /* Adjust content positioning for iPhone SE */
    top: 340px !important;
  }

  .creativity-section-wrap {
    margin-top: 40px !important;
  }

  .hero-section-title {
    font-size: clamp(20px, 5.5vw, 28px) !important;
  }

  .hero-section-text {
    font-size: clamp(18px, 4.5vw, 24px) !important;
  }

  .creativity-title,
  .creativity-title2 {
    font-size: clamp(24px, 6.5vw, 32px) !important;
  }

  .services-section .service-title {
    font-size: clamp(24px, 6.5vw, 32px) !important;
  }

  .service-text {
    font-size: clamp(20px, 5.5vw, 28px) !important;
  }

}

/* ———————————————————————————————
   Mobile alignment: match original site
   These rules mirror the Nuxt CSS for mobile breakpoints
   ——————————————————————————————— */

/* <= 991px */
@media (max-width: 991px) {
  /* Hero overlay wedge and positioning */
  .hero-section { margin-bottom: 30px !important; }
  .hero-section-box { clip-path: none !important; top: 90px !important; height: calc(100% - 89px) !important; }
  .hero-section-content { padding: 0 30px !important; top: 150px !important; }
  .hero-section-title { font-size: 28px !important; line-height: 45px !important; }
  .hero-section-text  { font-size: 30px !important; line-height: 45px !important; }
  .hero-section-para  { font-size: 17px !important; line-height: 29px !important; max-width: 482px !important; }
  .hero-section-btn    { font-size: 16px !important; }

  /* Creativity */
  .creativity-section-wrap { padding-inline: 0 !important; }
  .creativity-content { height: calc(100vh - 90px) !important; }
  .creativity-title, .creativity-title2 { font-size: 50px !important; }

  /* Clients */
  .clients-section { padding-inline: 0 !important; }

  /* Vision copy blocks */
  .info-video-wrap1, .info-video-wrap2 { padding: 24px !important; width: calc(100% - 60px) !important; margin-inline: 30px !important; }
  .video-para { font-size: 20px !important; line-height: 39px !important; }

  /* Services */
  .services-section { padding-inline: 20px !important; }
  .services-section-wrap { gap: 20px !important; }
}

  /* <= 767px */
@media (max-width: 767px) {
  /* Video production wedge block */
  .video-production-section { padding: 40px 20px !important; margin-bottom: 40px !important; }
  .video-production-info { width: 100% !important; margin: 0 auto 12px !important; padding-bottom: 8px !important; text-align: center !important; }
  .video-production-title { font-size: clamp(20px, 5.8vw, 26px) !important; line-height: 1.25 !important; }
  .video-production-para { font-size: clamp(14px, 4vw, 16px) !important; line-height: 1.6 !important; max-width: 95% !important; margin-inline: auto !important; }
  .video-production-box { height: 260px !important; }
  .video-production-wrap { height: 260px !important; top: 16px !important; }
  .video-production { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .hero-section-content { top: 130px !important; padding-left: 20px !important; text-align: left !important; align-items: flex-start !important; }
  /* Adjust navbar overlap on small screens */
  .services-page { padding-top: calc(70px + env(safe-area-inset-top, 0px)) !important; }

  /* Tighter, readable typography for services */
  .services-page .service-section .service-title { font-size: clamp(22px, 6.2vw, 28px) !important; line-height: 1.25 !important; letter-spacing: 0.2px !important; }
  .services-page .service-para { font-size: clamp(14px, 4.2vw, 16px) !important; line-height: 1.5 !important; opacity: 0.95 !important; }

  /* Hero */
  .hero-section-box { top: 100px !important; height: calc(100% - 99px) !important; }
  .hero-section-title, .hero-section-text { font-size: 20px !important; line-height: 37px !important; }
  .hero-section-para { max-width: 350px !important; font-size: 14px !important; line-height: 21px !important; }
  .hero-section-btn { margin-top: 10px !important; font-size: 15px !important; padding: 13px 48px !important; }

  /* Creativity — horizontally scrollable cards */
  .creativity-title, .creativity-title2 { font-size: 46px !important; line-height: 50px !important; }
  .creativity-section-wrap { padding-inline: 0 !important; height: auto !important; }
.creativity-section { width: 100% !important; overflow-x: auto !important; height: min(90vh, 760px) !important; }
  .content-video { overflow: visible !important; }
.creativity-video-box1, .creativity-video-box2, .video-box3 { animation: none !important; width: 100% !important; min-width: 100% !important; }
  .video1, .video2, .video3 { animation: none !important; }

  /* Services — disable sticky and reduce gaps */
  .services-section-sticky { position: relative !important; top: unset !important; overflow: visible !important; }
  .services-section { margin-top: 24px !important; margin-bottom: 24px !important; height: auto !important; }
  .services-section-wrap { flex-direction: column !important; gap: 10px !important; height: auto !important; }
  .service-info { text-align: center !important; }
  .service-name-content { text-align: center !important; animation: none !important; padding: 16px 0 !important; height: auto !important; }
  .service-name { padding-bottom: 0 !important; filter: blur(0) !important; }
  .service-title { font-size: 6vh !important; line-height: 1.1 !important; }
  .service-text { font-size: 5.7vh !important; line-height: 1.05 !important; }
  .service-name { font-size: 4vh !important; }
}

/* <= 576px */
@media (max-width: 576px) {
  .hero-section-box { clip-path: none !important; }
  .hero-section-content { top: 110px !important; }
  /* add breathing room so next section doesn't crowd the button */
  .hero-section { margin-bottom: 24px !important; }
  .hero-section-btn { margin-top: 8px !important; padding: 7px 40px !important; }
  .hero-section-title { font-size: 20px !important; line-height: 33px !important; }
  .hero-section-text  { font-size: 18px !important; line-height: 33px !important; }
  .hero-section-para  { max-width: 329px !important; font-size: 14px !important; line-height: 19px !important; }

  /* Creativity widths */
  .creativity-section-wrap { padding-inline: 0 !important; }
.creativity-video-box1, .creativity-video-box2, .video-box3 { width: 100% !important; min-width: 100% !important; }
  .creativity-video-box2 { margin-inline: 16px !important; }
  .creativity-title, .creativity-title2 { text-align: left !important; font-size: 38px !important; line-height: 38.4px !important; }

  /* Clients */
  .clients-section { padding-inline: 0 !important; }
}

/* <= 480px */
@media (max-width: 480px) {
  /* raise content so the CTA is always within view */
  .hero-section-content { top: 95px !important; padding-left: 20px !important; text-align: left !important; }
  .hero-section-content { padding: 0 23px !important; }
  .hero-section-text { font-size: 17px !important; }
  .hero-section-title { font-size: 18px !important; }
  .hero-section-para { font-size: 13px !important; max-width: 305px !important; }
  /* Ensure mobile video is used on very small screens as well */
  .hero-section-video:not(.mobile-screen) { display: none !important; }
  .hero-section-video.mobile-screen { display: block !important; }

  .creativity-section-wrap { padding-inline: 0 !important; }
  .clients-section { padding-inline: 0 !important; }
}

/* Remove hero overlay wedge on all mobile widths */
@media (max-width: 991px) {
  .hero-section-box::after { content: none !important; }
}

/* <= 430px */
@media (max-width: 430px) {
  .hero-section-box { clip-path: none !important; }
  .hero-section-content { padding: 0 0 0 14px !important; top: 95px !important; }
  .hero-section-text { font-size: 14px !important; line-height: 29px !important; }
}

/* <= 360px */
@media (max-width: 360px) {
  .hero-section-content { top: 88px !important; }
  .hero-section-box { clip-path: none !important; }
  .hero-section-title { font-size: 17px !important; line-height: 26px !important; }
  .hero-section-text  { font-size: 13px !important; line-height: 26px !important; }
  .hero-section-para  { font-size: 11px !important; max-width: 244px !important; line-height: 17px !important; }
}