/**
 * SJ Solutions & Infotech - Global Mobile Responsive Stylesheet
 * 100% Pixel-Perfect Mobile Optimization for Light-Theme Website.
 * Fixes mobile header bar, offcanvas light-mode typography, hero section spacing,
 * swiper slider containment, floating contact collisions, and eliminates horizontal scroll.
 */

/* ==========================================================================
   1. MOBILE VIEWPORT & ANTI-OVERFLOW LOCK (STRICTLY MOBILE & TABLET ONLY)
   ========================================================================== */
@media (max-width: 991px) {
  html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

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

  #smooth-wrapper,
  #smooth-content,
  main,
  .site-main {
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Universal media scaling constraint on mobile */
  img,
  svg,
  video,
  canvas {
    max-width: 100% !important;
    height: auto;
  }

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

  /* Fluid mobile containers with proper padding */
  .container {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Prevent iOS form input auto-zoom by ensuring minimum 16px font-size */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   2. MOBILE HEADER BAR (max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {
  /* Hide desktop-only elements */
  .header-top,
  .header-area.header-duplicate,
  .tj-offcanvas-area.d-none.d-lg-block,
  .header-right-item.d-none.d-lg-inline-flex {
    display: none !important;
  }

  /* Fixed, full-width white mobile header */
  .header-area.header-1.header-absolute,
  .header-area.header-1 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
  }

  .header-area .header-bottom,
  .header-area .header-bottom .container-fluid,
  .header-area .header-bottom .row,
  .header-area .header-bottom .col-12 {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .header-area.header-1 .header-wrapper,
  .header-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Site Logo */
  .site_logo {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .site_logo .logo img,
  .site_logo img {
    height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    max-width: 170px !important;
    object-fit: contain !important;
  }

  /* Orange Hamburger Menu Toggle Button (44x44px Touch Target) */
  /* Orange Hamburger Menu Toggle Button (44x44px Touch Target) */
  .menu_btn.mobile_menu_bar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    background: #ff6910 !important;
    background-color: #ff6910 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(255, 105, 16, 0.35) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .menu_btn.mobile_menu_bar:active {
    transform: scale(0.95) !important;
  }

  /* Reset .cubes completely: NO grey background circle, NO padding, NO 48px size */
  .menu_btn.mobile_menu_bar .cubes,
  .tj-light-mode .menu_btn.mobile_menu_bar .cubes {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 20px !important;
    height: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 8px) !important;
    grid-template-rows: repeat(2, 8px) !important;
    gap: 4px !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* 4 Solid, Crisp White Rounded Squares */
  .menu_btn.mobile_menu_bar .cubes span,
  .tj-light-mode .menu_btn.mobile_menu_bar .cubes span {
    width: 8px !important;
    height: 8px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 2px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: transform 0.2s ease, border-radius 0.2s ease !important;
  }

  /* Top clearance: Ensure content is pushed below the fixed 70px header */
  #smooth-content {
    padding-top: 70px !important;
  }

  .site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .top-space-30 {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   3. MOBILE OFFCANVAS DRAWER (LIGHT MODE PERFECTION)
   ========================================================================== */
@media (max-width: 991px) {
  .hamburger-area {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: min(340px, 88vw) !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: -8px 0 35px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #f1f5f9 !important;
    z-index: 100000 !important;
    transform: translateX(105%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s !important;
    visibility: hidden !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    display: flex !important;
    flex-direction: column !important;
  }

  .hamburger-area.opened {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  .body-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 99998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }

  .body-overlay.opened {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hamburger_bg {
    background-color: #ffffff !important;
    background: #ffffff !important;
    display: none !important;
  }

  .hamburger_wrapper {
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 22px 20px 30px 20px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    gap: 16px !important;
  }

  .hamburger_wrapper::before {
    display: none !important;
  }

  .hamburger_top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .hamburger_logo .mobile_logo img {
    height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    max-width: 160px !important;
    object-fit: contain !important;
  }

  .hamburger_close_btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .hamburger_close_btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  .hamburger_close_btn svg path {
    stroke: #0f172a !important;
    stroke-width: 2 !important;
    transition: stroke 0.2s ease !important;
  }

  .hamburger_close_btn:hover {
    background: #ff6910 !important;
    border-color: #ff6910 !important;
    color: #ffffff !important;
  }

  .hamburger_close_btn:hover svg path {
    stroke: #ffffff !important;
  }

  /* Meanmenu Reset for Light Theme */
  .hamburger_menu {
    margin-top: 6px !important;
    margin-bottom: 8px !important;
  }

  .hamburger_menu .mean-container a.meanmenu-reveal {
    display: none !important;
  }

  .hamburger_menu .mean-container .mean-bar {
    background: transparent !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: none !important;
    float: none !important;
  }

  .hamburger_menu .mean-container .mean-nav {
    background: transparent !important;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
  }

  .hamburger_menu .mean-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .hamburger_menu .mean-nav ul li {
    position: relative !important;
    width: 100% !important;
    float: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin: 0 !important;
  }

  /* Top-Level Navigation Links: Crisp, Dark Charcoal Text */
  .hamburger_menu .mean-nav ul li a,
  .mean-container .mean-nav ul li a,
  .mean-nav ul li a,
  .mobile_menu a,
  .hamburger-area .mean-nav ul li a,
  .tj-light-mode .hamburger_menu .mean-nav ul li a,
  .tj-light-mode .mean-container .mean-nav ul li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 4px !important;
    color: #0f172a !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: none !important;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
    border-top: none !important;
    line-height: 1.3 !important;
    transition: color 0.2s ease !important;
  }

  .hamburger_menu .mean-nav ul li a:hover,
  .mean-container .mean-nav ul li a:hover,
  .mobile_menu a:hover,
  .hamburger-area a:hover {
    color: #ff6910 !important;
  }

  /* Expand Button with Soft Orange Badge & Chevron */
  .hamburger_menu .mean-nav ul li a.mean-expand {
    position: absolute !important;
    right: 0 !important;
    top: 5px !important;
    width: 42px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff5ed !important;
    border: 1px solid rgba(255, 105, 16, 0.25) !important;
    border-radius: 8px !important;
    color: #ff6910 !important;
    font-size: 12px !important;
    z-index: 10 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform 0.25s ease, background 0.2s ease !important;
  }

  .hamburger_menu .mean-nav ul li a.mean-expand i {
    color: #ff6910 !important;
    font-size: 12px !important;
    display: inline-block !important;
    transition: transform 0.25s ease !important;
  }

  .hamburger_menu .mean-nav ul li a.mean-expand.mean-clicked {
    background: #ff6910 !important;
    border-color: #ff6910 !important;
    color: #ffffff !important;
  }

  .hamburger_menu .mean-nav ul li a.mean-expand.mean-clicked i {
    color: #ffffff !important;
    transform: rotate(180deg) !important;
  }

  /* Submenus & Megamenus inside accordion */
  .hamburger_menu .mean-nav .sub-menu,
  .hamburger_menu .mean-nav .mega-menu,
  .hamburger_menu .mean-nav .what-we-build-dropdown {
    background: #fafaf9 !important;
    border: 1px solid #e7e5e4 !important;
    border-radius: 12px !important;
    padding: 10px !important;
    margin: 6px 0 12px 0 !important;
    position: static !important;
    width: 100% !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    pointer-events: auto !important;
  }

  /* Mega Menu Cards */
  .hamburger_menu .mean-nav .mega-item-card {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    gap: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e7e5e4 !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
  }

  .hamburger_menu .mean-nav .mega-item-card:hover {
    border-color: #ff6910 !important;
    background: #fffbf7 !important;
  }

  .hamburger_menu .mean-nav .mega-item-icon {
    width: 32px !important;
    height: 32px !important;
    background: #fff5ed !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .hamburger_menu .mean-nav .mega-item-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #ff6910 !important;
    fill: none !important;
  }

  .hamburger_menu .mean-nav .mega-item-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.3 !important;
  }

  .hamburger_menu .mean-nav .mega-item-desc {
    font-size: 11.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.35 !important;
  }

  /* What We Build Dropdown in Drawer */
  .hamburger_menu .mean-nav .what-we-build-dropdown li {
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .hamburger_menu .mean-nav .what-we-build-dropdown li:last-child {
    border-bottom: none !important;
  }

  .hamburger_menu .mean-nav .solutions-item-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    background: #ffffff !important;
    border: 1px solid #e7e5e4 !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    pointer-events: auto !important;
    transition: all 0.2s ease !important;
  }

  .hamburger_menu .mean-nav .solutions-item-link:hover {
    border-color: #ff6910 !important;
    background: #fffbf7 !important;
  }

  .hamburger_menu .mean-nav .solutions-icon-badge {
    width: 32px !important;
    height: 32px !important;
    background: #fff5ed !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .hamburger_menu .mean-nav .solutions-icon-badge svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #ff6910 !important;
    fill: none !important;
  }

  .hamburger_menu .mean-nav .solutions-item-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: block !important;
    line-height: 1.3 !important;
  }

  .hamburger_menu .mean-nav .solutions-item-desc {
    font-size: 11.5px !important;
    color: #64748b !important;
    display: block !important;
    line-height: 1.3 !important;
  }

  /* Industries Sidebar in Mega Menu */
  .hamburger_menu .mean-nav .mega-sidebar-col {
    background: #ffffff !important;
    border: 1px solid #e7e5e4 !important;
    border-radius: 10px !important;
    padding: 12px !important;
    margin-top: 8px !important;
  }

  .hamburger_menu .mean-nav .mega-sidebar-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
  }

  .hamburger_menu .mean-nav .mega-sidebar-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .hamburger_menu .mean-nav .mega-sidebar-list li a {
    font-size: 13px !important;
    color: #334155 !important;
    padding: 6px 0 !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Drawer Contact Info (Crystal Clear Dark Text) */
  .hamburger-infos {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f1f5f9 !important;
  }

  .hamburger-area .offcanvas-text p {
    color: #475569 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .hamburger-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ff6910 !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
  }

  .hamburger-infos .contact-item {
    margin-bottom: 12px !important;
  }

  .hamburger-infos .contact-item .subtitle {
    font-size: 11px !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 2px !important;
  }

  .hamburger-infos .contact-item .contact-link,
  .hamburger-infos .contact-item a.contact-link,
  .hamburger-infos .contact-item span.contact-link,
  .hamburger-infos .contact-item a,
  .hamburger-infos .contact-link {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    line-height: 1.45 !important;
    display: inline-block !important;
    transition: color 0.2s ease !important;
  }

  .hamburger-infos .contact-item .contact-link:hover,
  .hamburger-infos .contact-item a:hover {
    color: #ff6910 !important;
  }

  /* Company Policies in Drawer */
  .hamburger-infos .contact-item.border-top {
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 14px !important;
    margin-top: 14px !important;
  }

  .hamburger-infos .contact-item .d-flex .contact-link,
  .hamburger-infos .contact-item .d-flex a {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    padding: 4px 0 !important;
    text-decoration: none !important;
  }

  .hamburger-infos .contact-item .d-flex .contact-link:hover,
  .hamburger-infos .contact-item .d-flex a:hover {
    color: #ff6910 !important;
  }

  /* Drawer Social Icons */
  .hamburger-socials {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid #f1f5f9 !important;
  }

  .hamburger-socials .social-links ul {
    display: flex !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .hamburger-socials .social-links ul li a {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }

  .hamburger-socials .social-links ul li a:hover {
    background: #ff6910 !important;
    border-color: #ff6910 !important;
    color: #ffffff !important;
  }
}

/* ==========================================================================
   4. HERO / BANNER SECTION (max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {
  .tj-banner-section {
    overflow: hidden !important;
    padding-top: 20px !important;
    padding-bottom: 45px !important;
    margin: 0 !important;
  }

  .banner-content {
    text-align: left !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-inline-start: 0 !important;
  }

  /* Full Title Visible with Clean Scale */
  h1.banner-title,
  .banner-title {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.22 !important;
    color: #050505 !important;
    margin-bottom: 18px !important;
  }

  .btn-area {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    align-items: center !important;
    margin-bottom: 20px !important;
  }

  .banner-img-area {
    margin-inline-start: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 25px !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hide 450px blurred circle which expands viewport */
  .banner-img-area::before {
    display: none !important;
  }

  .banner-img-area .banner-img {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .banner-img-area .banner-img img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Trusted badge: Stacked cleanly below image */
  .banner-img-area .trusted {
    position: static !important;
    margin: 16px auto 0 auto !important;
    inset-inline-start: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 320px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Customers rating box: Stacked cleanly below trusted badge */
  .banner-img-area .customers-box {
    position: static !important;
    margin: 14px auto 0 auto !important;
    margin-bottom: 0 !important;
    inset-inline-end: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 320px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #f1f5f9 !important;
  }

  .banner-scroll {
    display: none !important;
  }
}

/* ==========================================================================
   5. FLOATING CONTACT WIDGET COLLISION & DRAWER PROTECTION
   ========================================================================== */
@media (max-width: 991px) {
  /* Completely hide floating contact widget whenever offcanvas drawer or overlay is open */
  body.overflow-hidden .sj-floating-contact-widget,
  .hamburger-area.opened ~ .sj-floating-contact-widget,
  .body-overlay.opened ~ .sj-floating-contact-widget,
  .tj-offcanvas-area.opened ~ .sj-floating-contact-widget {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Keep widget below drawer z-index so it never pokes through */
  .sj-floating-contact-widget {
    z-index: 9999 !important;
  }
}

@media (max-width: 767px) {
  .sj-floating-contact-widget {
    bottom: 20px !important;
    left: 16px !important;
    z-index: 9999 !important;
  }

  /* Sleek, touch-friendly toggle button */
  .sj-contact-toggle-btn {
    width: 46px !important;
    height: 46px !important;
    font-size: 18px !important;
    box-shadow: 0 6px 20px rgba(255, 105, 16, 0.4) !important;
  }
}

/* ==========================================================================
   6. PROJECT SECTION & SWIPER OVERFLOW (max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {
  .tj-project-section {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }

  .tj-project-section .project-wrapper,
  .project-wrapper,
  .project-wrapper-2,
  .project-wrapper-3 {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 10px !important;
    padding-bottom: 20px !important;
    margin: 0 !important;
  }

  .project-slider.swiper {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 0 25px 0 !important;
  }

  .project-slider .swiper-wrapper {
    overflow: visible !important;
  }

  .project-slider .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  .project-item {
    min-height: 400px !important;
    border-radius: 18px !important;
  }

  .project-item .project-content {
    padding: 18px !important;
  }

  .project-item .project-content .title a {
    font-size: 18px !important;
  }
}

/* ==========================================================================
   7. SECTION GAPS & MARGIN OVERFLOWS (.section-gap-x)
   ========================================================================== */
@media (max-width: 991px) {
  .section-gap-x {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .section-gap,
  .gap {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .section-gap-top,
  .gap-top {
    padding-top: 50px !important;
  }

  .section-gap-bottom,
  .gap-bottom {
    padding-bottom: 50px !important;
  }

  .sec-heading {
    margin-bottom: 28px !important;
  }

  h2.sec-title,
  .sec-title {
    font-size: clamp(22px, 5.5vw, 30px) !important;
    line-height: 1.28 !important;
  }

  .sec-heading .desc {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

/* ==========================================================================
   8. ABOUT SECTION (max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {
  .about-left {
    margin-top: 25px !important;
  }

  .about-left-bottom {
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 20px !important;
  }

  .about-left-bottom .experience-area,
  .about-left-bottom .author-area {
    width: 100% !important;
  }

  .about-funfact {
    display: flex !important;
    gap: 16px !important;
    margin-top: 24px !important;
    margin-bottom: 20px !important;
  }

  .circle-text-wrap.award-circle {
    display: none !important;
  }
}

/* ==========================================================================
   9. CLIENT LOGOS & MARQUEE SLIDERS
   ========================================================================== */
@media (max-width: 767px) {
  .tj-client-section {
    padding: 30px 0 !important;
    overflow: hidden !important;
  }

  .client-item .client-logo img {
    max-height: 38px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .scroll-slider {
    overflow: hidden !important;
    width: 100% !important;
  }

  .tech-item {
    min-width: 150px !important;
    padding: 10px 14px !important;
  }
}

/* ==========================================================================
   10. WORKING PROCESS & VIDEO SECTION
   ========================================================================== */
@media (max-width: 991px) {
  .process-border {
    display: none !important;
  }

  .process-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .process-item {
    width: 100% !important;
    padding: 22px 18px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  .video-content-area {
    min-height: 220px !important;
    border-radius: 14px !important;
  }

  .video-content-area .video-btn {
    width: 56px !important;
    height: 56px !important;
    font-size: 18px !important;
  }
}

/* ==========================================================================
   11. TESTIMONIALS & FAQ ACCORDION
   ========================================================================== */
@media (max-width: 767px) {
  .testimonial-wrapper {
    overflow: hidden !important;
    padding: 16px 12px !important;
  }

  .thumb-item .thumb-img img {
    width: 50px !important;
    height: 50px !important;
  }

  .testimonial-item {
    padding: 18px 14px !important;
    border-radius: 12px !important;
  }

  .testimonial-item .desc p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  .accordion_title {
    font-size: 14.5px !important;
    padding: 13px 14px !important;
    line-height: 1.35 !important;
  }

  .accordion-body.accordion_content {
    font-size: 13px !important;
    padding: 12px 14px !important;
    line-height: 1.55 !important;
  }

  .faq-contact {
    margin-top: 24px !important;
    padding: 20px 16px !important;
  }

  .faq-contact-number a {
    font-size: 18px !important;
  }
}

/* ==========================================================================
   12. CONTACT SECTION & MAP IFRAME
   ========================================================================== */
@media (max-width: 991px) {
  .tj-contact-section {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
    overflow: hidden !important;
  }

  .contact-left {
    margin-bottom: 30px !important;
  }

  .contact-form.style-2 {
    padding: 25px 18px !important;
    border-radius: 14px !important;
  }

  #map,
  .map-area {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-top: 24px !important;
  }

  #map iframe,
  .map-area iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;
    display: block !important;
    border: 0 !important;
    border-radius: 14px !important;
  }
}

/* ==========================================================================
   13. CTA NEWSLETTER SECTION (max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {
  .tj-cta-section {
    margin-bottom: 45px !important;
  }

  .cta-area {
    padding: 30px 18px !important;
    border-radius: 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .cta-content {
    max-width: 100% !important;
    width: 100% !important;
  }

  .cta-content .title {
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.25 !important;
  }

  .cta-right {
    max-width: 100% !important;
    width: 100% !important;
  }

  .subscribe-form.cta-form {
    width: 100% !important;
  }

  .subscribe-form.cta-form input[type=email] {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 14px !important;
    padding: 6px 54px 6px 16px !important;
  }

  .cta-right .social-links {
    margin-top: 16px !important;
  }
}

/* ==========================================================================
   14. FOOTER RESPONSIVE FIXES (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .sj-footer-main {
    padding: 40px 0 20px 0 !important;
  }

  .sj-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .sj-footer-col {
    padding: 0 !important;
  }

  .sj-footer-heading {
    font-size: 14.5px !important;
    margin-bottom: 12px !important;
  }

  .sj-footer-menu li {
    margin-bottom: 7px !important;
  }

  .sj-footer-menu li a {
    font-size: 13px !important;
  }

  .sj-footer-connect {
    padding-left: 0 !important;
  }

  .sj-footer-connect-desc {
    font-size: 12.5px !important;
    margin-bottom: 16px !important;
  }

  .sj-footer-hr {
    margin: 24px 0 16px 0 !important;
  }

  .sj-footer-middle-row {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .sj-middle-quote {
    padding: 0 !important;
  }

  .sj-middle-quote p {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* Bottom Bar */
  .sj-footer-bottom-bar {
    padding: 12px 0 16px 0 !important;
  }

  .sj-bottom-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .sj-bottom-left-group {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    font-size: 12px !important;
  }

  .sj-bottom-right-group {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    font-size: 12px !important;
  }

  .sj-bar-divider {
    display: none !important;
  }

  .sj-address-item {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }
}

/* ==========================================================================
   15. INNER PAGES & BREADCRUMBS
   ========================================================================== */
@media (max-width: 767px) {
  .tj-page-header {
    padding: 55px 0 35px 0 !important;
  }

  .tj-page-title {
    font-size: clamp(23px, 6vw, 30px) !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  .tj-page-link {
    font-size: 12.5px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .post-details-wrapper,
  .service-details-wrapper {
    padding: 0 !important;
  }

  .post-details-wrapper .title,
  .service-details-wrapper .title {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    line-height: 1.3 !important;
  }

  .tj-sidebar {
    margin-top: 35px !important;
  }
}