:root{
   --qd-navy: #0B2240;
   --qd-gold: #B8862A;
   --qd-slate: #3F4A57;
   --qd-cream: #F4F1EA;
   --qd-white: #FFFFFF;

   --qd-text: #3F4A57;
   --qd-heading: #0B2240;

   --qd-overlay: rgba(11, 34, 64, 0.72);
}
@media screen and (max-width: 1333px) {
   .header-area{background-color: var(--qd-navy) !important;}
   .header-split-menu{position: relative; height: auto; padding-top: 10rem;width: 100%; max-width: 1350px; margin: 0 auto;}
   .logo.centered-logo{position: absolute; top: 0;display: block;  width: 97%;  left: 0;}
      .logo.centered-logo img{max-width: 150px; margin: 0 auto;}
   .banner .wrapper .slogan p{width: 100% !important;}
}

@media screen and (max-width: 1200px) {
   .header-container{display: block !important; text-align: center !important;}
   .site-logo-container{display: block !important; width: 210px; margin: 10px auto 32px !important;}
   .site-logo{display: none !important}
   .header-right, .site-footer-clean .pin-footnav-menu{align-items: center !important;  margin: 0 auto !important;}
   .header-bar{padding: 18px 0 !important; }
}
@media screen and (max-width: 1000px) {
   body{overflow-x: hidden;}
   .hero{    height: 125vh !important;}
   .hero .hero-content{padding-top: 14rem !important; }
   .hero .headline{text-align: center;}
   .hero .subtext{text-align: center;}
   .hero .cta{margin: 0 auto; display: block; width: 240px;}
   .about-split{padding: 1rem 2rem !important}
   .subfooter-details{padding: 0rem 3rem; margin: 0 auto !important;}
   .footer-nav{justify-content: center !important;}
   .pin-footnav-menu{justify-content: center !important; gap: 10px !important;}
}
@media screen and (max-width: 900px) {
   html,
   body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden !important;
   }
   .header-menu,.pin-footnav-menu{padding: 0 2rem !important; display: block !important;}
   .header-menu .menu-item, .site-footer-clean .pin-footnav-menu li{display: inline-block !important; padding: 0 20px !important; margin: 4px 1px !important; border: 1px solid gray;}
   .banner .wrapper .slogan h3{font-size: 40px !important;}
   .banner .wrapper .slogan p{font-size: 17px !important;}
   /* .logo.centered-logo{ width: 89% !important;} */
   .site-footer-clean .pin-footnav-menu{display: block !important; margin: 0 1rem !important; white-space: unset !important;}
   .site-footer-clean .pin-footnav-menu li a{padding: 10px !important; margin-left: 0;}

}

@media screen and (max-width: 750px) {
   .hero .headline{font-size: 40px !important}
   .industry-card{padding: 20px !important;}
   .industry-card h3{font-size: 20px !important;}
}
@media screen and (max-width: 650px) {
   .banner .wrapper .slogan{padding: 7em 1em 0 !important;}
   .banner .wrapper .slogan h3{font-size: 30px !important;}
   .banner .wrapper .slogan p{font-size: 16px !important;}
}

@media screen and (max-width: 380px) {
   .banner .wrapper .slogan h3{font-size: 20px !important;}
   .banner .wrapper .slogan p{font-size: 15px !important; line-height: 1.5;}
}


 /* Make it nicer on small screens */
 @media (max-width: 768px) {

    html,
   body {
       width: 100% !important;
       max-width: 100% !important;
       overflow-x: hidden !important;
       position: relative;
   }

   body {
       min-width: 0 !important;
   }

   .site-header,
   .header-shell,
   .header-bar {
       width: 100% !important;
       max-width: 100% !important;
       left: 0 !important;
       right: 0 !important;
   }

   .header-bar {
       padding: 14px 18px !important;
   }

   .header-right {
       min-width: 0 !important;
       width: auto !important;
   }

   .container {
       width: 100% !important;
       max-width: 100% !important;
       padding-left: 18px !important;
       padding-right: 18px !important;
   }

   .row {
       margin-left: 0 !important;
       margin-right: 0 !important;
   }

   .gtranslate-pill .gt_float_switcher .gt_options {
       width: 260px !important;
       max-width: calc(100vw - 36px) !important;
       right: 0 !important;
       left: auto !important;
   }

   img,
   video,
   iframe {
       max-width: 100% !important;
   }

   .hero { min-height: 78vh; height: auto; padding-bottom: 48px; }
   .hero .hero-content { padding-top: 120px; }
   .hero .hero-box { text-align: left; margin-left: 0; }
   .hero .subtext { margin-left: 0; margin-right: 0; }
 }

 @media (max-width: 575.98px){
   .about-title{ font-size: 34px; }
 }


 @media (max-width: 575.98px){
   .work-title{ font-size: 36px; }
 }

 @media (max-width: 991.98px){

   .header-bar{ padding: 14px 14px; }
   .header-right{
     min-width: 0;
     width: 100%;
     align-items: flex-start;
   }
   .header-menu{
     justify-content:flex-start;
     flex-wrap: wrap;
     gap: 12px 16px;
   }
   .after-hero-cta{
     margin-top: 24px; /* don't overlap too much on mobile */
   }
   .cta-image{
     min-height: 260px;
   }
   .cta-panel{
     padding: 24px;
   }
   .about-split{ padding: 60px 0; }
   .about-title{ font-size: 25px; }
   .about-kicker{ font-size: 35px; }
   .about-text p{ font-size: 18px; }
   .work-with-qd{ padding: 70px 0 60px; }
   .work-title{ font-size: 44px; }
   .work-icon{ height: 120px; }
   .work-icon img{ width: 140px; }
   .work-text{ font-size: 16px; max-width: 520px; }
   .work-btn{ min-width: 220px; }
   .contact-image{
     height: 320px;
     margin-top: 20px;
   }
   .contact-split{ padding: 60px 0; }
   .contact-title{ font-size: 42px; }
   .qd-input, .qd-textarea{ font-size: 18px; padding: 14px 16px; }
   .subfooter-map{ height: 320px; }
   .subfooter-kicker{ font-size: 26px; }
   .subfooter-title{ font-size: 42px; }
   .info-text{ font-size: 18px; }
   .visitor-counter{ font-size: 22px; }
   .footer-nav{
     justify-content: center;
   }

   .pin-footnav-menu{
     flex-wrap: wrap;           /* allow wrapping on small screens */
     justify-content: center;
     gap: 16px;
   }

   .footer-copy{
     text-align: center;
   }

   .footer-menu{
     gap: 18px;
   }
   .footer-copy{
     font-size: 16px;
   }
 }

 /* Menu Customization */
 @media (max-width: 768px) {
   .header-right {
       position: fixed;
       top: 0;
       right: -100%; /* Hidden by default */
       width: 80%;
       max-width: 300px;
       height: 100vh;
       background: var(--qd-navy);
       flex-direction: column;
       padding: 80px 30px;
       z-index: 40;
       display: flex !important;
       visibility: hidden; /* THE FIX: browser ignores it for "drag-to-side" */
        transition: right 0.3s ease, visibility 0.3s;
       box-shadow: -10px 0 30px rgba(0,0,0,0.3);
   }

   .header-right.active {
       right: 0;
        visibility: visible;
   }

   .header-top {
       flex-direction: column;
       align-items: flex-start !important;
       gap: 20px;
       margin-bottom: 10px;
       border-bottom: 1px solid white;
       padding-bottom: 10px;
   }

   .header-menu {
       flex-direction: column;
       gap: 20px;
   }

   /* Overlay when menu is open */
   .menu-overlay {
       position: fixed;
       inset: 0;
       background: rgba(0,0,0,0.5);
       display: none;
       z-index: 30;
   }
   .menu-overlay.active {
       display: block;
   }
   .header-menu{
      padding: 0px !important
   }
   .header-menu li {
      width: 100%;
      border: 1px solid rgba(255,255,255,.15) !important;
      text-align: center;
   }
   .site-logo-container{margin: 10px 15px 30px !important;}
   .header-container{
      display: inline-block !important;
      text-align: right !important;
      position: absolute;
      top: 3.5rem;
      right: 1rem;
   }
   body .uwy.userway_p2 .userway_buttons_wrapper{left: calc(100vw - 7px) !important;}
   .hero .hero-content{padding-top: 10rem !important;}
}

/* Desktop specific alignments */
@media (min-width: 769px) {
   .burger-btn { display: none; }
   .header-right { display: flex !important; align-items: flex-end; flex-direction: column; }
   .header-menu { display: flex; gap: 30px; }
}

/* Safari Specific Flex/Grid Fixes */
    @media (min-width: 768px) {
        .grid-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
        }
    }
    @media (min-width: 1024px) {
        .grid-container {
            grid-template-columns: repeat(3, 1fr);
        }
    }

/* Styling the Nav items */
/* .header-menu li { list-style: none; } */
/* .header-menu a {
   text-transform: uppercase;
   font-size: 12px;
   letter-spacing: 0.1em;
   font-weight: 600;
   color: #fff;
} */

/* ===== FINAL MOBILE RESPONSIVE FIX ===== */

@media (max-width: 900px){
   .row{
      --bs-gutter-x: 1.5rem !important;
   }

   html,
   body{
      width: 100%;
      max-width: 100%;
      overflow-x: hidden !important;
   }
}

@media (max-width: 768px){

   .site-header{
      position: absolute;
      width: 100%;
      left: 0;
      right: 0;
      overflow: visible;
      z-index: 999;
   }

   .header-bar{
      padding: 14px 18px !important;
      min-height: 105px;
      display: flex;
      align-items: center;
   }

   .site-logo-container{
      width: auto !important;
      margin: 0 !important;
   }

   .site-logo-mobile img,
   .site-logo img{
      height: 72px !important;
      max-width: 180px !important;
      object-fit: contain;
   }

   .header-container{
      position: absolute !important;
      top: 30px !important;
      right: 18px !important;
      margin: 0 !important;
      display: block !important;
      text-align: right !important;
   }

   .burger-btn{
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--qd-gold);
      font-size: 30px;
      line-height: 1;
   }

   .header-right{
      position: fixed !important;
      top: 0 !important;
      right: -100% !important;
      width: 82% !important;
      max-width: 330px !important;
      height: 100vh !important;
      background: var(--qd-navy) !important;
      padding: 36px 24px !important;
      z-index: 9999 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      visibility: hidden;
      transition: right .3s ease, visibility .3s ease;
   }

   .header-right.active{
      right: 0 !important;
      visibility: visible;
   }

   .header-top{
      align-items: center !important;
      justify-content: center !important;
      margin-bottom: 24px;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(255,255,255,.35);
   }

   .header-menu{
      display: flex !important;
      flex-direction: column !important;
      width: 100%;
      gap: 10px !important;
      padding: 0 !important;
      margin: 0 !important;
   }

   .header-menu .menu-item{
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 1px solid rgba(255,255,255,.18) !important;
   }

   .header-menu .menu-item > a{
      display: block;
      padding: 14px 12px !important;
      font-size: 18px !important;
      text-align: center;
   }

   .hero{
      height: auto !important;
      min-height: 760px !important;
   }

   .hero .hero-content{
      padding: 150px 18px 60px !important;
      align-items: center !important;
   }

   .hero .hero-box{
      width: 100%;
      max-width: 100%;
      margin: 0 auto !important;
      text-align: center !important;
      overflow-wrap: break-word;
   }

   .hero-eyebrow{
      font-size: 13px !important;
      letter-spacing: .14em !important;
      margin-bottom: 14px;
   }

   .hero .headline{
      font-size: 36px !important;
      line-height: 1.08 !important;
      max-width: 100% !important;
      text-align: center !important;
      letter-spacing: -0.02em;
      overflow-wrap: break-word;
   }

   .hero .subtext{
      font-size: 16px !important;
      line-height: 1.65 !important;
      max-width: 100% !important;
      margin: 18px auto 0 !important;
      padding-top: 0 !important;
      text-align: center !important;
   }

   .hero-actions{
      justify-content: center !important;
      gap: 12px !important;
      margin-top: 26px !important;
   }

   .cta-primary,
   .cta-secondary{
      width: 100%;
      max-width: 310px;
      text-align: center;
      justify-content: center;
      padding: 14px 18px;
      font-size: 13px;
   }
}

@media (max-width: 420px){
   .hero{
      min-height: 820px !important;
   }

   .hero .headline{
      font-size: 31px !important;
   }

   .site-logo-mobile img,
   .site-logo img{
      height: 62px !important;
      max-width: 155px !important;
   }

   .header-container{
      top: 24px !important;
   }
}