/* ============================================================
   GrowthCraft360 — gc-mobile.css
   Complete mobile & responsive overrides.
   Loaded AFTER main.css on every page.
   ============================================================ */

/* ── 0. PREVENT HORIZONTAL SCROLL ─────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── 1. OFFCANVAS / MOBILE SIDEBAR ────────────────────────── */

/* Sub-menus inside offcanvas: hidden by default, JS slides them */
.tp-main-menu-mobile .tp-submenu {
  display: none !important;
}
.tp-main-menu-mobile .tp-submenu.open {
  display: block !important;
}

/* Dropdown toggle button styling */
.tp-main-menu-mobile .dropdown-toggle-btn {
  background: none;
  border: none;
  padding: 0 10px;
  cursor: pointer;
  font-size: 14px;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  margin-left: 8px;
}

.tp-main-menu-mobile .dropdown-toggle-btn:hover {
  color: #1B7DFF;
}

.tp-main-menu-mobile .dropdown-toggle-btn.dropdown-opened {
  transform: rotate(90deg);
}

/* Dropdown items styling */
.tp-main-menu-mobile .has-dropdown > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0;
}

.tp-main-menu-mobile .has-dropdown.expanded > .tp-submenu {
  display: block !important;
}

/* Submenu item styling */
.tp-main-menu-mobile .tp-submenu ul {
  padding-left: 20px;
  margin-top: 10px;
  border-left: 2px solid #e0e0e0;
}

.tp-main-menu-mobile .tp-submenu li {
  list-style: none;
  padding: 8px 0;
}

.tp-main-menu-mobile .tp-submenu a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.tp-main-menu-mobile .tp-submenu a:hover {
  color: #1B7DFF;
}

/* Offcanvas full-width on phones/small tablets — main.css narrows
   it back to a fixed 360px box between 576-767px, which is why the
   menu can look cramped instead of a clean full-width white screen. */
@media (max-width: 767px) {
  .offcanvas__area {
    width: 100% !important;
    max-width: 100vw !important;
  }
}

/* ── 2. HEADER / LOGO ──────────────────────────────────────── */
@media (max-width: 1199px) {
  .header-top {
    display: none !important;
  }
  .tplogo__area a img {
    max-width: 140px;
    height: auto;
  }
}

@media (max-width: 575px) {
  .tplogo__area a img {
    max-width: 110px;
    height: auto;
  }
  .header-top {
    display: none !important;
  }
  .main-header .custom-container {
    padding: 12px 16px !important;
  }
  .tptransparent__header-4 {
    padding: 0 !important;
  }
  .header-btn-4 {
    padding-right: 0 !important;
  }
}

/* ── 3. DESKTOP MEGA MENU FIX ──────────────────────────────── */
/* Ensure mega menu is hidden and shows only on hover */
.tpmenu__area .tp-mega-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.tpmenu__area > nav > ul > li:hover > .tp-mega-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}

/* ── 4. HERO TITLE — service inner pages ───────────────────── */
/* These h2s have inline font-size:48px which needs override */
.hero-h2-title {
  font-size: 48px;
}
@media (max-width: 991px) {
  .hero-h2-title {
    font-size: 36px !important;
    line-height: 1.3 !important;
  }
}
@media (max-width: 767px) {
  .hero-h2-title {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }
}
@media (max-width: 480px) {
  .hero-h2-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
}

/* ── 5. HERO TITLE — homepage (banner-4-title) ─────────────── */
@media (max-width: 991px) {
  .banner-4-title {
    font-size: 34px !important;
    line-height: 1.3 !important;
    word-break: break-word;
    letter-spacing: normal !important;
  }
}
@media (max-width: 767px) {
  .banner-4-title {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }
  .banner-area.banner-4-spaces {
    padding-top: 0px !important;
    padding-bottom:0px !important;
  }
}
@media (max-width: 480px) {
  .banner-4-title {
    font-size: 21px !important;
    line-height: 1.35 !important;
  }
}
@media (max-width: 375px) {
  .banner-4-title {
    font-size: 18px !important;
  }
}

/* ── 5d. HERO ILLUSTRATION — mobile/tablet only ────────────────
   Bootstrap's d-lg-none on the element itself already hides this
   above the lg breakpoint (desktop is completely untouched), this
   just adds spacing/sizing for the phone/tablet view. ─────────── */
@media (max-width: 991px) {
  .banner-4-mobile-illustration {
    margin-top: 28px;
    max-width: 420px;
  }
  .banner-4-mobile-illustration img {
    width: 100%;
    height: auto;
    display: block;
  }
}
@media (max-width: 480px) {
  .banner-4-mobile-illustration {
    margin-top: 20px;
  }
}

/* ── 5c. OUR SERVICES — left-align content on mobile ───────── */
@media (max-width: 767px) {
  .services-item-4.text-center,
  .services-item-4 .services-content-4,
  .services-item-4 .services-content-4 .title,
  .services-item-4 .services-content-4 p,
  .services-item-4 .services-btn-4 {
    text-align: left !important;
  }
  /* The icon wrapper is a plain block <div> with no fixed width, so once
     the card switches to left-aligned on mobile it stretches to the full
     card width. Its circle background image then sits at the left edge
     while the icon drawn on top of it is still centered against that
     full width -- pulling the icon away from its circle. Giving the
     wrapper an explicit width matching the circle image (124x120) keeps
     both centered on each other, anchored to the left like the design. */
  .services-item-4 .services-icon-4 {
    display: inline-block !important;
    width: 124px !important;
    height: 120px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  .services-item-4 .services-icon-4 img {
    width: 124px !important;
    height: 120px !important;
  }
  .services-item-4 .services-btn-4 {
    justify-content: flex-start !important;
  }
}

/* ── 5b. ANIMATED HEADLINE — disable the "clip/typing" cursor
   animation on mobile. The plugin sets the wrapper's pixel width
   via JS for desktop-measured text and animates it down to 2px
   between words; on narrow screens this causes the rotating word
   to disappear/clip mid-layout and leaves a stray blinking cursor
   with broken line-wrapping. Below 991px we override it to a
   simple, instant word swap with normal text wrapping. ────────── */
@media (max-width: 991px) {
  .cd-headline.clip .cd-words-wrapper {
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    display: inline;
    vertical-align: baseline;
  }
  .cd-headline.clip .cd-words-wrapper::after {
    display: none !important;
  }
  .cd-headline.clip .cd-words-wrapper b {
    position: static !important;
    display: none !important;
    opacity: 1 !important;
  }
  .cd-headline.clip .cd-words-wrapper b.is-visible {
    display: inline !important;
  }
  .banner-4-title.cd-headline {
    display: block;
    text-align:center;
  }
  /* The desktop "clip" animation style adds padding:0 0 20px 0 to every
     <span> inside .cd-headline.clip (for the blinking cursor) — with the
     animation disabled on mobile this just shows up as extra blank space
     under "Digital Marketing"/"ROI-Focused" before "Company in Jaipur". */
  .cd-headline.clip span,
  .cd-headline.clip .cd-words-wrapper {
    padding: 0 !important;
  }
}

/* ── 6. STAT BOX font size ─────────────────────────────────── */
@media (max-width: 767px) {
  .seo-stat-box .stat-number,
  [class*="stat-number"] {
    font-size: 30px !important;
  }
}

/* ── 7. BREADCRUMB ─────────────────────────────────────────── */
@media (max-width: 991px) {
  .breadcrumb-area {
    padding-top: 120px !important;
    padding-bottom: 70px !important;
  }
}
@media (max-width: 767px) {
  .breadcrumb-area {
    padding-top: 100px !important;
    padding-bottom: 50px !important;
  }
  .breadcrumb__title {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }
}
@media (max-width: 480px) {
  .breadcrumb__title {
    font-size: 20px !important;
  }
}

/* ── 8. SECTION TITLES ─────────────────────────────────────── */
@media (max-width: 767px) {
  .section-title-4,
  .tp-section-title,
  .tp-section-title-2,
  .tp-section-title-3 {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  .section-title-4 br,
  .tp-section-title br {
    display: none;
  }
}
@media (max-width: 480px) {
  .section-title-4,
  .tp-section-title {
    font-size: 20px !important;
  }
}

/* ── 9. SECTION PADDING — reduce on mobile ─────────────────── */
@media (max-width: 767px) {
  .pt-130, .pt-140, .pt-150,
  .pt-160, .pt-170, .pt-180,
  .pt-190, .pt-195, .pt-200 { padding-top: 70px !important; }

  .pb-130, .pb-140, .pb-150,
  .pb-160, .pb-170, .pb-180,
  .pb-190, .pb-195, .pb-200 { padding-bottom: 70px !important; }

  .pt-100, .pt-110, .pt-115,
  .pt-120                    { padding-top: 60px !important; }

  .pb-100, .pb-110, .pb-115,
  .pb-120                    { padding-bottom: 60px !important; }
}

/* ── 10. GRID COLUMNS — stack on mobile ────────────────────── */
@media (max-width: 767px) {
  /* Two-column → full on phones */
  .col-lg-6:not([class*="col-md-"]):not([class*="col-sm-"]) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Three-column etc */
  .col-lg-4:not([class*="col-md-"]):not([class*="col-sm-"]),
  .col-lg-5:not([class*="col-md-"]):not([class*="col-sm-"]),
  .col-lg-7:not([class*="col-md-"]):not([class*="col-sm-"]),
  .col-lg-8:not([class*="col-md-"]):not([class*="col-sm-"]),
  .col-lg-9:not([class*="col-md-"]):not([class*="col-sm-"]),
  .col-lg-10:not([class*="col-md-"]):not([class*="col-sm-"]) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* col-md-6 → full on very small phones */
  .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* offset reset */
  [class*="offset-lg-"] {
    margin-left: 0 !important;
  }
}

/* Stack even xl-only columns on tablet */
@media (max-width: 1199px) {
  .col-xl-6:not([class*="col-lg-"]):not([class*="col-md-"]) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── 11. IMAGES ─────────────────────────────────────────────── */
@media (max-width: 991px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

/* ── 12. SERVICE / FEATURE CARDS margin ────────────────────── */
@media (max-width: 767px) {
  .seo-service-card,
  .services-item-4,
  .tp-service-item,
  .tp-feature-item,
  .why-card,
  .testi-card {
    margin-bottom: 20px;
  }
}

/* ── 13. COUNTER / STAT ROW ────────────────────────────────── */
@media (max-width: 767px) {
  .counter-wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px;
  }
  .counter-item-4 {
    width: 100%;
  }
}

/* ── 14. ABOUT PAGE — team + contact row ───────────────────── */
@media (max-width: 767px) {
  .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ── 15. CTA BUTTONS ───────────────────────────────────────── */
@media (max-width: 480px) {
  .d-flex.align-items-center.gap-3.flex-wrap {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .blue-btn:not(.d-none),
  .tp-btn:not(.d-none) {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
  }
}

/* ── 25. HEADER "CONTACT US" BUTTON — hide on mobile/tablet ──
   This is a belt-and-braces rule: it ensures the desktop-only
   header button stays hidden below the xl breakpoint (1200px)
   and never overlaps the logo, regardless of rule order in
   other stylesheets. The hamburger / offcanvas menu takes over
   below this width.
------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .header-btn-4 a.blue-btn {
    display: none !important;
  }
}

/* ── 26. HEADER LAYOUT — keep logo + hamburger tidy on mobile ─ */
@media (max-width: 575px) {
  .header-btn-4.text-end {
    text-align: right !important;
  }
  .offcanvas-btn.ml-20 {
    margin-left: 0 !important;
  }
}

/* ── 26b. STICKY HEADER — fix the hamburger not being tappable ─
   Root cause: when the header goes "sticky" on scroll, main.css
   locks it to a hard-coded pixel width (300px on most real phone
   widths under 480px — that breakpoint range was missing its own
   override). Squeezed into 300px, the logo and hamburger button
   overlap/shrink unpredictably, so taps land on the wrong element
   or miss the button entirely. Force it back to a fluid width that
   matches the normal (non-sticky) header on every phone/tablet
   size, and make sure the button itself always sits on top and
   stays tappable. ───────────────────────────────────────────── */
@media (max-width: 991px) {
  .tptransparent__header-4 .header-sticky {
    width: calc(100% - 24px) !important;
    left: 12px !important;
    right: 12px !important;
    margin: 0 !important;
    top: 10px !important;
  }
  .offcanvas-open-btn {
    position: relative;
    z-index: 5;
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }
}

/* ── 26c. MOBILE MENU DROPDOWN — clean simple list only ────────
   The "Digital Marketing" / "IT Services" items are desktop mega-
   menus: a link list PLUS a big promo column (image, heading,
   button) meant for a wide hover panel. Cloned as-is into the
   phone menu that promo column showed up full-size inside the
   dropdown, making it look broken. Keep only the plain link list
   so the mobile menu is a clean, simple list like the rest. ──── */
@media (max-width: 991px) {
  .tp-main-menu-mobile .tp-menu-banner-wrap {
    display: none !important;
  }
  .tp-main-menu-mobile .tp-mega-menu > .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── 16. CONTACT FORM ──────────────────────────────────────── */
@media (max-width: 767px) {
  .tp-contact-form input,
  .tp-contact-form textarea,
  .tp-contact-form select {
    width: 100% !important;
  }
}

/* ── 17. FAQ / ACCORDION ───────────────────────────────────── */
@media (max-width: 575px) {
  .tp-accordion-item,
  .tp-faq-item {
    padding: 15px !important;
  }
}

/* ── 18. FOOTER ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .footer-widget {
    margin-bottom: 30px;
  }
  /* Theme CSS hardcodes line-height:10px on the copyright text,
     which only looks fine on desktop where it never wraps.
     On mobile it wraps to 2 lines and the lines overlap. */
  .footer-widget-copyright span,
  .footer-widget-copyright span a {
    line-height: 1.6 !important;
  }
  .footer-bottom-4 .footer-widget-copyright span {
    padding: 16px 16px !important;
  }
}

/* ── 19. TABLE ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 20. CONTAINER padding on mobile ───────────────────────── */
@media (max-width: 575px) {
  .container,
  .custom-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── 21. PRICING CARD on seo/service pages ─────────────────── */
@media (max-width: 767px) {
  [style*="font-size:46px"][style*="font-weight:800"] {
    font-size: 30px !important;
  }
}

/* ── 22. TIMELINE on mobile ────────────────────────────────── */
@media (max-width: 575px) {
  .timeline-item {
    padding-left: 50px !important;
  }
  .timeline-badge {
    width: 38px !important;
    height: 38px !important;
    font-size: 13px !important;
  }
}

/* ── 23. BLOG page ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .postbox__thumb img {
    width: 100%;
  }
}

/* ── 24. SERVICES page grid ────────────────────────────────── */
@media (max-width: 767px) {
  .col-xl-3.col-lg-4:not([class*="col-md-"]) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ── 28. HEADER MENU — center the nav links in the header row.
   By default the <ul> inside .tp-main-menu-content is left-aligned,
   so the menu sits bunched up right next to the logo instead of
   sitting centered in the header. Center it properly on desktop. ── */
.tpmenu__area.main-mega-menu {
  display: flex;
  justify-content: center;
  width: 100%;
}
.tp-main-menu-content {
  width: 100%;
}
.tp-main-menu-content > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  width: 100%;
}
/* ── 29. HEADER MENU — the nav menu was set to only appear at 1200px+
   (d-xl-block), so on laptop / smaller-desktop / tablet-landscape
   screens (roughly 992px–1199px) the menu column was hidden entirely,
   leaving a big empty gap between the logo and the hamburger icon.
   Bring the full menu in starting at 992px (lg) instead, and hide the
   hamburger in that same range since the real menu is now showing. ── */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #header-sticky .col-xl-7.col-lg-6.d-none.d-xl-block {
    display: block !important;
    flex: 0 0 56%;
    max-width: 56%;
  }
  #header-sticky .col-xl-3.col-lg-6.col-sm-5.col-6 {
    flex: 0 0 22%;
    max-width: 22%;
  }
  #header-sticky .col-xl-2.col-lg-6.col-sm-7.col-6 {
    flex: 0 0 22%;
    max-width: 22%;
  }
  #header-sticky .tp-main-menu-content > ul li {
    margin: 0 8px;
  }
  #header-sticky .tp-main-menu-content > ul li > a {
    font-size: 14px;
  }
  #header-sticky .offcanvas-btn.d-xl-none {
    display: none !important;
  }
}
/* ── 30. SERVICES DROPDOWNS (Digital Marketing / IT Services) — simple
   single-column dropdown lists (like a normal nav dropdown) instead of
   the old two-column mega-menu, so items sit cleanly in one line each
   with no layout breaking at any screen width. ── */
.tpmenu__area ul li.has-dropdown .submenu {
  min-width: 240px;
  white-space: nowrap;
}
@media (max-width: 1399.98px) {
  .tpmenu__area ul li.has-dropdown .submenu {
    white-space: normal;
  }
}
/* ── 27. BLOG CARD (homepage "What's Going On" section) ──────
   .tpblog-card is a flex row with a fixed 220px image and a
   flex:1 text column. On narrow screens the text refuses to
   shrink below its content width and overflows the card/page
   horizontally instead of wrapping — this also explains the
   large blank area users see when the page scrolls into that
   overflowed empty space. Fix: stack image above content. ─── */
@media (max-width: 767px) {
  .tpblog-card {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
  }
  .tpblog-card-img {
    width: 100% !important;
  }
  .tpblog-card-img img {
    height: 200px;
  }
  .tpblog-card-content {
    min-width: 0;
  }
  .blog-title {
    font-size: 20px !important;
  }
}

/* ── 31. TOP BAR CONTACT INFO — email + phone shown on the left of the
   top bar (replacing the old tagline), styled to match the header's
   existing blue theme. ── */
.header-top-contact {
  gap: 28px;
}
.header-top-contact-item {
  font-size: 14px;
  font-family: var(--tp-ff-jakarta);
  color: var(--tp-grey-8);
  display: inline-flex;
  align-items: center;
}
.header-top-contact-item i {
  color: var(--tp-theme-primary);
  margin-right: 8px;
  font-size: 13px;
}
.header-top-contact-item a {
  color: var(--tp-grey-8);
  transition: color 0.3s ease-out 0s;
}
.header-top-contact-item a:hover {
  color: var(--tp-theme-primary);
}
@media (max-width: 991px) {
  .header-top-contact {
    gap: 16px;
  }
  .header-top-contact-item {
    font-size: 13px;
  }
}