/* =====================================================================
   mobile.css  -  Xatch Software home page, phone layout (<= 767px)
   Load AFTER style.css and navbar-white-override.css:
     <link href="assets/css/mobile.css?v=1" rel="stylesheet">
   Everything is inside media queries, so desktop/tablet is untouched.
   To roll back, delete the <link> line.
   ===================================================================== */

@media only screen and (max-width: 767px) {

  /* ---------- Base type scale (style.css has no mobile scale) ---------- */
  body { line-height: 26px; }
  h1 { font-size: 30px; }
  h2 { font-size: 26px; }
  h3 { font-size: 21px; }
  h4 { font-size: 18px; }
  h5 { font-size: 16px; }
  .heading { margin-bottom: 15px; }
  .site-heading .title { line-height: 1.25; }
  .site-heading { padding: 0 6px; }

  /* ---------- Hero slider ---------- */
  /* Less dead space above/below the text (specificity beats .top-pad-150 rule) */
  .banner-area.banner-style-two.top-pad-150 .content {
    padding-top: 100px;
    padding-bottom: 90px;
  }
  .banner-area.banner-style-two .content h2 { font-size: 28px; margin-bottom: 14px; }
  .banner-area.banner-style-two .content h2 strong { font-size: 34px; margin-top: 8px; }
  .banner-area p { font-size: 16px; line-height: 24px; }
  .banner-area .button { margin-top: 22px; }
  .banner-area .btn-md { padding: 14px 28px; font-size: 15px; }

  /* Text currently animates in over 0.8s - 3.2s. On a phone that feels like
     a blank hero, so cut the stagger down to ~0.4s total. */
  .banner-area .swiper-slide.swiper-slide-active h2,
  .banner-area .banner-slide .swiper-slide.swiper-slide-active h2 { transition-delay: 100ms; }
  .banner-area .swiper-slide.swiper-slide-active p,
  .banner-area .banner-slide .swiper-slide.swiper-slide-active p { transition-delay: 200ms; }
  .banner-area .swiper-slide.swiper-slide-active .button,
  .banner-area .banner-slide .swiper-slide.swiper-slide-active .button { transition-delay: 300ms; }

  /* 500px blurred circle behind each slide: costly to paint on phones */
  .banner-area.banner-style-two .swiper-slide::before { display: none; }

  .banner-area .swiper-pagination { bottom: 24px; }
  .banner-area .swiper-pagination span.swiper-pagination-bullet { width: 32px; }

  /* ---------- About ---------- */
  .about-area .shape-right-bottom { display: none; }

  /* style.css hides the "10+ Years" block's text on phones (.left{display:none}),
     leaving an empty box. Show it again. */
  .about-style-two .expertise { padding: 32px 20px; margin-bottom: 30px; }
  .about-style-two .expertise .left {
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: center;
  }
  .about-style-two .expertise .left h2 { font-size: 16px; margin: 0; }
  .about-style-two .expertise .left h2 strong { font-size: 56px; }
  .about-style-two .expertise .right { display: none; }

  /* ---------- Services carousel (dark section) ---------- */
  .services-style-two a { padding: 24px 16px; height: auto; min-height: 150px; }
  .services-style-two i { font-size: 40px; }
  .services-style-two h5 { font-size: 15px; line-height: 1.3; margin-top: 10px; }
  .services-style-two-area .shape-right-bottom { display: none; }

  /* ---------- "Welcome to XatchSoft" box ---------- */
  .benifits-style-one .item { padding: 32px 22px; }
  .benifits-style-one .item .heading { font-size: 24px; }
  .benifits-area .btn { width: 100%; text-align: center; }

  /* ---------- AI Solutions We've Built ---------- */
  .services-more .site-heading,
  .services-more > .title { padding: 0 15px; }
  .services-more .item { padding: 24px 20px; margin-top: 16px; }
  .services-more .item i { font-size: 40px; margin-bottom: 14px; }
  .services-more .item h4 { margin-bottom: 8px; }
  .services-more .item p { font-size: 15px; line-height: 24px; }
  .services-more .row { margin-top: 0; }

  /* ---------- Our Process cards ---------- */
  .services-style-one { margin-bottom: 16px; }
  .services-style-one .item { padding: 32px 22px; }
  .services-style-one .item > i { font-size: 46px; margin-bottom: 16px; }
  .services-style-one .item .bottom { margin-top: 16px; }

  /* ---------- Why Choose Us ---------- */
  .blog-area .sub-info { font-size: 18px; }
  .blog-area .rounded-circle { max-width: 64px; height: auto; }

  /* ---------- "Need a Meeting?" ---------- */
  .meeting-style-one-area.default-padding { padding-top: 44px; padding-bottom: 44px; }
  .meeting-style-one .heading { font-size: 24px; }
  .meeting-style-one ul { margin-top: 20px; }
  .meeting-style-one ul li { display: block; margin: 20px auto 0; }
  .meeting-style-one ul li a {
    min-width: 0;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 24px 16px;
  }
  /* Email text sits on a white card: make sure it is not white-on-white */
  .meeting-style-one ul li:last-child a,
  .meeting-style-one ul li:last-child a h5,
  .meeting-style-one ul li:last-child a p,
  .meeting-style-one ul li:last-child a span { color: #232323; }
  .meeting-style-one ul li:last-child a p,
  .meeting-style-one ul li:last-child a span {
    color: #666666;
    overflow-wrap: anywhere;
    font-size: 15px;
  }

  /* ---------- Blog cards ---------- */
  .blog-style-two .info { padding: 20px; }
  .blog-style-two h4.title { font-size: 18px; }
  .blog-style-two .author { margin: 0 20px; padding-bottom: 20px; }

  /* ---------- Technologies and Platforms tabs ---------- */
  .tab { display: flex; flex-wrap: wrap; justify-content: center; overflow: visible; }
  .tab button { font-size: 14px; padding: 10px 12px; }

  /* !important is needed because style.css sizes these with #tab_menu (ID) */
  .tabcontent { padding: 6px 0; }
  .tabcontent ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
  }
  .tabcontent ul li {
    float: none !important;
    display: block !important;
    width: 33.333%;
    padding: 14px 6px !important;
    text-align: center;
  }
  .tabcontent ul li img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
    margin: 0 auto;
  }
  .tabcontent ul li h3 { font-size: 13px; padding: 4px 0 0; margin: 0; line-height: 1.3; }

  /* ---------- FAQ ---------- */
  .faq-area { padding: 40px 0 30px; }
  .faq-style-one .thumb { display: none; }          /* ~330px of scrolling before the first question */
  .faq-style-one .heading-left .heading { font-size: 24px; }
  .faq-style-one button.accordion-button { font-size: 16px; line-height: 1.35; padding-top: 14px; padding-bottom: 14px; }
  .faq-style-one .accordion-item .accordion-body { padding-top: 14px; font-size: 15px; }

  /* ---------- Review widgets ---------- */
  .embedsocial-hashtag,
  .clutch-widget { max-width: 100%; overflow: hidden; }

  /* ---------- Footer ---------- */
  footer .f-items.default-padding { padding-top: 10px; padding-bottom: 30px; }
  footer .item { margin-top: 30px; }
  footer .about,
  footer .address { padding-right: 0; }
  footer .logo { height: auto; width: 150px; margin-bottom: 18px; }
  footer .widget-title { font-size: 19px; margin-bottom: 16px; }
  footer .reviews { margin-top: 20px; }
  footer .reviews li a { height: auto; width: 110px; line-height: normal; display: block; }
  footer .reviews li a img { width: 100%; height: auto; }
  footer .link li a { display: inline-block; padding: 6px 0; }   /* bigger tap target */
  footer .newsletter input { min-height: 48px; }

  /* ---------- WhatsApp floating button ---------- */
  .float {
    width: 52px;
    height: 52px;
    left: 14px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    font-size: 26px;
  }
  .my-float { margin-top: 12px; }

  /* ---------- Pop-up quote form -> bottom sheet ----------
     The pop-up is built in JS with inline styles, so these need !important. */
  #contact-overlay {
    align-items: flex-end !important;
    height: 100dvh !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #contact-modal {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 85dvh !important;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 20px 20px 0 0 !important;
  }
  #contact-modal-title { font-size: 1.35rem !important; margin: 0 0 4px !important; padding-right: 36px; }
  #contact-modal form { gap: 0.8rem !important; }
  #contact-modal textarea { rows: 3; min-height: 80px; }
  #contact-modal button[aria-label="Close"] { top: 10px !important; right: 12px !important; }
}

/* Very small phones (iPhone SE / 360px Androids) */
@media only screen and (max-width: 374px) {
  .banner-area.banner-style-two .content h2 { font-size: 25px; }
  .banner-area.banner-style-two .content h2 strong { font-size: 30px; }
  .tab button { padding: 8px 9px; font-size: 13px; }
  .tabcontent ul li { width: 50%; }
}