/* Central production cleanup for Signaturewebstudio. */
:root { --signature-accent: #c3083f; --signature-dark: #111827; }
html { scroll-behavior: smooth; }
img, video, iframe { max-width: 100%; height: auto; }
a { overflow-wrap: anywhere; }
.logo img, .footer-logo img, header img[src*="logo"] { max-width: 220px; height: auto; }
.header-main, .main-header, header { z-index: 20; }
.subMenu { z-index: 50; }
.thank-you-page { min-height: 100vh; margin: 0; display: grid; place-items: center; font-family: Poppins, Arial, sans-serif; background: #f7f7fb; color: var(--signature-dark); }
.thank-you-wrap { width: min(680px, calc(100% - 32px)); text-align: center; background: #fff; border-radius: 8px; padding: clamp(32px, 6vw, 64px); box-shadow: 0 18px 60px rgba(17,24,39,.12); }
.thank-you-wrap h1 { margin: 0 0 12px; font-size: clamp(36px, 6vw, 58px); }
.thank-you-wrap p { margin: 0 0 24px; font-size: 18px; }
.thank-you-wrap a { color: #fff; background: var(--signature-accent); display: inline-block; padding: 12px 22px; border-radius: 4px; text-decoration: none; font-weight: 700; }
@media (max-width: 991px) {
  .container { width: min(100% - 24px, 960px); }
  .banner-content h1, .main-banner h1 { font-size: clamp(32px, 8vw, 48px) !important; line-height: 1.12 !important; }
  .banner-content p, .main-banner p { font-size: 16px !important; line-height: 1.6 !important; }
  .subMenu { position: static !important; width: 100% !important; box-shadow: none !important; }
}
@media (max-width: 767px) {
  body { overflow-x: hidden; }
  section { background-size: cover !important; }
  .row { margin-left: 0; margin-right: 0; }
  [class*="col-"] { max-width: 100%; }
  .footer-linking, footer, .copyright { text-align: center; }
  .side-call, .side-mail { width: 44px; height: 44px; line-height: 44px; }
  form input, form textarea, form select, form button { max-width: 100%; }
}

/* Home hero background restore */
.home .home-banner,
.main-banner.home-banner {
  background-color: #111;
  background-image: linear-gradient(90deg, rgba(10, 10, 12, .86) 0%, rgba(10, 10, 12, .76) 45%, rgba(10, 10, 12, .72) 100%), url("../img/banner-img.jpg") !important;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
.home-banner .container-fluid {
  position: relative;
  z-index: 2;
}
.home-banner .banner-content h1,
.home-banner .banner-content p,
.home-banner .menu-inner ul li a,
.home-banner .header-cta a {
  color: #fff;
}

/* Mobile nav: hidden service submenu must not reserve space. */
@media (max-width: 850px) {
  .menu-inner .service .subMenu:not(.active) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .menu-inner .service .subMenu.active {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 0 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
}

/* About mobile: keep Digital interactions text inside its card. */
@media (max-width: 850px) {
  body:not(.home) .experience-sec {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body:not(.home) .experience-sec .container,
  body:not(.home) .experience-sec .row,
  body:not(.home) .experience-sec .col-sm-6 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body:not(.home) .experience-sec .experience-box {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 22px 14px !important;
    top: 0 !important;
    overflow: visible !important;
  }
  body:not(.home) .experience-sec .experience-box h2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
    text-align: center !important;
  }
  body:not(.home) .experience-sec .experience-box p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
  }
  body:not(.home) .ranked-sec {
    margin-top: 0 !important;
  }
}

/* Mobile content boxes: use the available viewport width. */
@media (max-width: 850px) {
  body {
    min-width: 0 !important;
  }

  body:not(.menu-open) .container,
  body:not(.menu-open) .container-fluid,
  body:not(.menu-open) .container-fluid-full {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:not(.menu-open) .sec-pricing .container,
  body:not(.menu-open) .sec-pricing .row,
  body:not(.menu-open) .has-portfolio-tab .container,
  body:not(.menu-open) .has-portfolio-tab .row,
  body:not(.menu-open) .type-of-websites .row,
  body:not(.menu-open) .why-choose-main .row,
  body:not(.menu-open) .faq-main .row,
  body:not(.menu-open) .contact-page-main .row,
  body:not(.menu-open) .download-form .row,
  body:not(.menu-open) .ultimate-package-inner .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body:not(.menu-open) .pack-main-box,
  body:not(.menu-open) .pack-main-inner,
  body:not(.menu-open) .ultimate-package-main,
  body:not(.menu-open) .ultimate-package-inner,
  body:not(.menu-open) .portfolio-box,
  body:not(.menu-open) .portfolio-box ul,
  body:not(.menu-open) .portfolio-box ul li,
  body:not(.menu-open) .type-of-websites .col,
  body:not(.menu-open) .type-of-websites figure,
  body:not(.menu-open) .choos-box,
  body:not(.menu-open) .set,
  body:not(.menu-open) .lat-item,
  body:not(.menu-open) .test-item,
  body:not(.menu-open) .download-form-inner,
  body:not(.menu-open) .contact-page-main .popup-main,
  body:not(.menu-open) .form-connect .popup-form-bx {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
  }

  body:not(.menu-open) .pack-main-box,
  body:not(.menu-open) .type-of-websites .col,
  body:not(.menu-open) .portfolio-box ul li {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body:not(.menu-open) .pack-main-inner,
  body:not(.menu-open) .ultimate-package-inner,
  body:not(.menu-open) .choos-box,
  body:not(.menu-open) .set,
  body:not(.menu-open) .lat-item,
  body:not(.menu-open) .test-item,
  body:not(.menu-open) .download-form-inner,
  body:not(.menu-open) .contact-page-main .popup-main,
  body:not(.menu-open) .form-connect .popup-form-bx {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body:not(.menu-open) .pack-desc,
  body:not(.menu-open) .pack-desc-c {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Mobile section columns: prevent desktop-width cards on phones. */
@media (max-width: 850px) {
  body:not(.menu-open) section .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    box-sizing: border-box !important;
  }
}

/* Mobile pricing cards: widen nested package boxes. */
@media (max-width: 850px) {
  body:not(.menu-open) .sec-pricing {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body:not(.menu-open) .sec-pricing .container,
  body:not(.menu-open) .sec-pricing section .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body:not(.menu-open) .sec-pricing .pack-main-box,
  body:not(.menu-open) .sec-pricing .pack-main-inner,
  body:not(.menu-open) .sec-pricing .pack-desc,
  body:not(.menu-open) .sec-pricing .pack-desc > .row,
  body:not(.menu-open) .sec-pricing .pack-desc > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body:not(.menu-open) .sec-pricing .pack-main-inner {
    padding: 20px 14px !important;
  }

  body:not(.menu-open) .sec-pricing .pack-desc > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body:not(.menu-open) .sec-pricing .package-title h2[style] {
    font-size: 32px !important;
    line-height: 1.08 !important;
  }

  body:not(.menu-open) .sec-pricing .pack-btn .row,
  body:not(.menu-open) .sec-pricing .pack-btn .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Mobile pricing gutters: match live card width. */
@media (max-width: 850px) {
  body:not(.menu-open) .sec-pricing .port-content {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body:not(.menu-open) .sec-pricing .box-webPrice,
  body:not(.menu-open) .sec-pricing .box-ecomPrice,
  body:not(.menu-open) .sec-pricing .box-logoPrice,
  body:not(.menu-open) .sec-pricing .box-combo,
  body:not(.menu-open) .sec-pricing .box-videoPrice,
  body:not(.menu-open) .sec-pricing .box-digitalPrice,
  body:not(.menu-open) .sec-pricing .box-shopifyPrice,
  body:not(.menu-open) .sec-pricing .box-seoPrice,
  body:not(.menu-open) .sec-pricing .box-mobilePrice {
    width: 100% !important;
    max-width: 100% !important;
  }

  body:not(.menu-open) .sec-pricing .box-webPrice section .container,
  body:not(.menu-open) .sec-pricing .box-ecomPrice section .container,
  body:not(.menu-open) .sec-pricing .box-logoPrice section .container,
  body:not(.menu-open) .sec-pricing .box-combo section .container,
  body:not(.menu-open) .sec-pricing .box-videoPrice section .container,
  body:not(.menu-open) .sec-pricing .box-digitalPrice section .container,
  body:not(.menu-open) .sec-pricing .box-shopifyPrice section .container,
  body:not(.menu-open) .sec-pricing .box-seoPrice section .container,
  body:not(.menu-open) .sec-pricing .box-mobilePrice section .container {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}