/* responsive.css - load AFTER css/style.css and the inline <style> in <head> */

/* 1. Missing variables used by the custom sections at the end of style.css */
:root{
  --orange:#c48210; --dark:#1C2539; --bg-light:#f6f6f6;
  --card-border:#E4E7EE; --text-muted:#5D666F;
}

/* 2. Page-level: no sideways scroll, but keep position:sticky working */
html,body{max-width:100%}
html{overflow-x:clip}
body{overflow-x:clip !important;overflow-y:visible !important}
img,video,svg{max-width:100%;height:auto}
a[href^="mailto"],a[href^="tel"],.signle-footer-contact-8 a{word-break:break-word}

/* 3. Header: fits laptops (1200-1399px) instead of wrapping */
@media (min-width:1200px) and (max-width:1399px){
  .header-one .nav-area{margin-right:20px}
  .nav-area ul{gap:26px}
  .nav-area ul li a{font-size:15px}
  .header-main-one-wrapper .thumbnail img{width:150px}
}

/* 4. Hero banner: flexible height, shapes anchored to the banner again */
.bg_image_video > .shape-area-start{position:static}
.rts-banner-area-two .shape{z-index:2}
.rts-banner-area-two{height:auto;min-height:clamp(520px,80vh,750px)}
@media (max-width:991px){
  .rts-banner-area-two .shape{display:none}
  .banner-inner-two-content p.disc{max-width:100%}
}
@media (max-width:767px){
  /* phones: poster image instead of heavy autoplay video */
  .banner-bg-video{display:none}
  .rts-banner-area-two.bg_image_video{background-color:#000;background-size:cover;background-position:center;background-image:url(../images/bg2.jpg)}
  .rts-banner-area-two.two.bg_image_video{background-image:url(../images/bg1.jpg)}
  .rts-banner-area-two.three.bg_image_video{background-image:url(../images/bg3.jpg)}
  .banner-inner-two-content .title{font-size:32px}
  .banner-inner-two-content p.disc{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.banner-bg-video{display:none}}

/* 5. Section headings: big outline text no longer overflows phones */
@media (max-width:575px){
  .title-style-two .bg-content{font-size:56px;top:-20px}
}
@media (max-width:991px){
  .title-style-10 .title{font-size:34px}
  .ai-business-title h2{font-size:26px}
}

/* 6. About */
.about-inner-content-two .about-between-wrapper p.disc{max-width:100%}
@media (max-width:991px){.about-inner-content-two{padding-left:0}}

/* 7. Services cards */
@media (max-width:767px){
  section.main-wrapper-sticky .sticky-statement .left-side .icon img{width:56px}
  section.main-wrapper-sticky .sticky-statement .left-side .title{font-size:19px}
}

/* 8. Proven expertise: even grid at every width */
.pe-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.pe-stat{max-width:none;margin:0}
@media (max-width:991px){.pe-stat{border-bottom:0}}

/* 9. Difference section */
@media (max-width:991px){
  .thumbnail-business-area-right-two .small-thumbnail{left:0}
  .thumbnail-business-area-right-two .large-thumbnail{margin-left:auto;margin-right:auto}
}

/* 10. Dark "who needs this" section: keep blurred shapes inside */
.bg_color-dark-1{overflow:hidden}

/* 11. How-we-work slider */
@media (max-width:1199px){.single-service-signle-wrapper{padding:30px}}

/* 12. CTA: buttons wrap instead of squeezing */
.cta-btn-group{display:flex;flex-wrap:wrap;gap:15px}
.cta-style-two-area{flex-wrap:wrap;gap:20px}
@media (max-width:767px){.rts-call-to-action-area-two{padding:40px 0}}

/* 13. Footer */
@media (max-width:991px){
  .footer-8-area-bg .row > [class*="col-"]{margin-bottom:30px}
  .footer-8-area-bg .offset-lg-1{margin-left:0}
}
