/* =====================================================
   VIDEO RESPONSIVE BEFORE 1430px (NO layout change)
   Keeps your heading+video vertical alignment same,
   only makes the video box scale nicely.
===================================================== */

@media (max-width: 1430px){

  /* keep row alignment */
  .hero-top{
    align-items: center !important;
  }

  /* video scales down smoothly with screen */
  .video-box{
    width: clamp(320px, 32vw, 450px) !important;  /* responsive width */
    max-width: none !important;                   /* allow clamp to work */
    margin-right: 0 !important;                   /* remove negative */
  }

  /* keep the same vertical shape */
  .video-box{
    aspect-ratio: 4 / 5 !important;
  }

  /* remove fixed top offset so it stays aligned while shrinking */
  .hero-right .video-box{
    margin-top: 150px; 
  }

  /* if headline had huge top padding, reduce a bit so both align */
  .hero-headline{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}
/* =====================================================
   HERO STRIP → VERTICAL before 1070px
   (NO other layout changes)
===================================================== */

@media (max-width: 1100px){
.hero {
  margin-top: 60px;
  
  }

  .hero-strip{
    display: flex !important;
    flex-direction: column !important;   /* vertical */
    width: max-content;                  /* keep natural width */
    gap: 6px;                            /* spacing between items */
    margin-top: 70px !important;
    align-items: center;
    margin-left: 180px;
   
  }

  .strip-item{
    width: 100%;
    text-align: center;                    /* cleaner vertical read */
    padding: 22px 0 !important;
  }

  /* remove horizontal dividers */
  .strip-item + .strip-item{
    border-left: none !important;
    border-top: 1px solid #a29d9d;       /* optional subtle divider */
  }
}
/* =====================================================
   <=1024px: VIDEO FIRST (horizontal),
   then HEADING, then STRIPS (stacked)
   Paste at END of CSS
===================================================== */

@media (max-width: 1024px){
.hero {
  margin-top: 150px;
}
  /* stack blocks */
  .hero-top{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  /* order: 1) video  2) left content */
  .hero-right{ order: 1 !important; width: 100% !important; }
  .hero-left { order: 2 !important; width: 100% !important; }

  /* video horizontal + full width */
  .video-box{
    width: 100% !important;
    max-width: 100% !important;
    
    margin-right: 0 !important;
  }
  .hero-right .video-box{
    margin-top: 0 !important;
  }

  /* heading below video */
  .hero-headline{
    padding-top: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
  }

  /* strips below heading */
  .hero-strip{
    margin-top: 14px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* Optional: if you also want strips vertical below 1024px */
@media (max-width: 1024px){
  .hero-strip{
    flex-direction: column !important;
    width: 100% !important;
    gap: 6px !important;
  }
  .strip-item{
    text-align: center ;
    padding: 10px 0 !important;
  }
  .strip-item + .strip-item{
    border-left: none !important;
    border-top: 1px solid #a29d9d !important;
  }
}
/* =====================================================
   REDUCE VIDEO HEIGHT (responsive + safe)
===================================================== */

/* Default desktop – slightly shorter */
.video-box{
  aspect-ratio: 4 / 5;          /* keep portrait feel */
  max-height: 520px;            /* reduce tall feel */
}

/* <=1430px */
@media (max-width: 1430px){
  .video-box{
    max-height: 480px;
  }
}

/* <=1024px (horizontal video first) */
@media (max-width: 1024px){
  .video-box{
    aspect-ratio: 16 / 9 !important;
    max-height: 320px !important;   /* reduced height */
   
  }
}

/* <=768px */
@media (max-width: 768px){
  .video-box{
    max-height: 260px !important;
  }
}

/* <=480px */
@media (max-width: 480px){
  .video-box{
    max-height: 220px !important;
  }
}

/* RESPONSIVE */
@media (max-width: 900px){
  .main-box{ height: 360px; }
  .hero-box-wrapper{ padding: 90px 0 360px; }
  .info-box{
    top: calc(90px + 360px - 70px);
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(calc(40px * (1 - var(--reveal))));
  }
  .right-box{
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(calc(40px * (1 - var(--reveal))));
  }
}

@media (max-width: 520px){
  .main-box{ height: 300px; border-radius: 18px; }
  .hero-box-wrapper{ padding: 70px 0 380px; }
  .info-box{ top: calc(70px + 300px - 60px); padding: 22px; border-radius: 22px; }
  .info-box h3{ font-size: 20px; }
  .info-box p{ font-size: 13px; line-height: 1.75; }
}
/*FOOTER*/

/* ===== Responsive ===== */
@media (max-width: 1120px) {
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px;
  }
}