/* ============================================================
   asad4wp — all viewport responsive CSS lives here.
   hero-overrides.css and rag-chat.css stay desktop-first only.
   Breakpoint ladder: 2560 → 1920 → 1600 → 1440 → 1399 → 1199
                      → 991 → 767 → 575 → 480 → 375 → 320
   Heading scale (mobile ≤767): h1 32 / h2 28 / h3 24 / h4 20 / h5 18 / h6 16
   ============================================================ */

/* 2560px+  ultra-wide — inherits 1600+ rules */
@media (min-width: 2560px) {
  /* No extra overrides yet. 1600px+ rules already apply. */
}

/* 1920px+  full HD */
@media (min-width: 1920px) {
  /* No extra overrides yet. 1600px+ rules already apply. */
}

/* 1440px+  laptop / desktop */
@media (min-width: 1440px) {
  /* No extra overrides yet. */
}

/* 1600px+  large desktop */
@media (min-width: 1600px) {

  .tp-hero-thumb-shape {
    left: 24px;
  }

  .tp-hero-thumb-wrapper {
    margin-left: -80px;
  }
}

/* 992px+  desktop enhancements */
@media (min-width: 992px) {

  .tp-service-item-box > .row > [class*="col-"] {
    position: sticky;
    top: 110px;
  }

  .tp-service-item.inner-service-3-panel {
    min-height: 620px;
    display: flex;
    align-items: center;
  }

  .tp-service-item.inner-service-3-panel .row {
    width: 100%;
  }
}

/* 1200–1399px  large laptop */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {

  .tp-header-menu > nav > ul > li {
    margin: 0 14px;
  }
}

/* ≤1399px  below XL */
@media (max-width: 1399px) {

  .cst-hero-wrapper {
    margin-left: 0;
  }
}

/* ≤1199px  laptop / small desktop */
@media (max-width: 1199px) {
  :root {
    --fs-h1: 48px;
    --fs-h2: 40px;
    --fs-h3: 32px;
    --fs-h4: 24px;
    --fs-h5: 20px;
    --fs-h6: 16px;
    --fs-h2-sm: 40px;
    --fs-h3-sm: 32px;
    --fs-display: 48px;
    --fs-display-sm: 48px;
    --fs-stat: 64px;
  }

  .tp-service-heading {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  .tp-service-heading .tp-section-subtitle,
  .tp-service-heading .tp-section-title,
  .tp-service-heading p {
    grid-column: 1;
    grid-row: auto;
  }

  .tp-service-item-title {
    max-width: none;
  }

  .tp-funfact-wrap.tp-funfact-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .tp-funfact-stat.is-metric {
    grid-row: auto;
    min-height: 280px;
  }


  .tp-offcanvas-social,
  .tp-offcanvas-gallery {
    display: none;
  }

  .tp-hero-area.cst-hero-ptb {
    padding-top: 120px;
  }

  .cst-hero-thumb img {
    height: 720px;
  }

  .cst-hero-wrapper {
    padding-bottom: 80px;
  }


  .cst-footer-inner {
    grid-template-columns: 1fr 1fr;
    padding-bottom: 80px;
  }

  .cst-metro-content {
    padding: 12px 0 24px;
    margin-top: 0;
    border: 0;
  }

  .cst-cta-wrap {
    gap: 40px 48px;
    padding: 48px 40px 40px;
  }

  .cst-cta-proof {
    margin: 0;
    padding: 8px 0 8px 32px;
  }

}

/* 992–1199px  desktop only */
@media (max-width: 1199px) and (min-width: 992px) {

  .cst-svc-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 768–991px  tablet */
@media only screen and (min-width: 768px) and (max-width: 991px) {

  .cst-testimonial-item {
    min-height: 450px;
  }
}

/* ≤1399px  testimonial card (all below XL) */
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {

  .cst-testimonial-item {
    padding: 35px;
  }

  .cst-testimonial-item-user-content h4 {
    font-size: var(--fs-h5);
  }
}

/* ≤991px  testimonial heading */
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {

  .cst-testimonial-heading {
    margin-bottom: 40px;
    flex-wrap: wrap;
  }

  .cst-testimonial-item-text {
    margin-bottom: 30px;
  }
}

/* ≤991px  tablet and down */
@media (max-width: 991px) {
  :root {
    --fs-h1: 40px;
    --fs-h2: 32px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-h5: 18px;
    --fs-h6: 16px;
    --fs-h2-sm: 32px;
    --fs-h3-sm: 24px;
    --fs-display: 40px;
    --fs-display-sm: 40px;
    --fs-stat: 56px;
  }

  .tp-service-item-box > .row > [class*="col-"] {
    position: static;
    margin-bottom: 12px;
  }

  .tp-service-item-box > .row > [class*="col-"]:last-child {
    margin-bottom: 0;
  }

  .tp-service-item,
  .tp-service-item-box > .row > [class*="col-"]:last-child .tp-service-item {
    padding: 18px;
    border: 1px solid rgba(20, 20, 20, 0.08);
    background: #fff;
  }

  .tp-service-item > .row {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 14px;
    align-items: start;
    margin: 0;
  }

  .tp-service-item > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
  }

  .tp-service-item > .row > [class*="col-"]:first-child {
    display: none;
  }

  .tp-service-item > .row > [class*="col-"]:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .tp-service-item > .row > [class*="col-"]:last-child {
    display: block !important; /* beats Bootstrap .d-none */
    grid-column: 1;
    grid-row: 1;
  }

  .tp-service-number {
    display: none;
  }

  .tp-service-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .tp-service-item-title {
    order: 1;
    font-size: var(--fs-h3);
    line-height: 1.25;
    margin-bottom: 8px;
    max-width: none;
  }

  .tp-service-content p,
  .tp-service-item p {
    order: 2;
    font-size: var(--fs-body);
    line-height: 1.5;
    margin-bottom: 12px;
    max-width: none;
  }

  .tp-service-category {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;
    order: 3;
    margin-bottom: 16px;
  }

  .tp-service-category span {
    display: inline-block;
    padding: 9px 17px;
    border: 1px solid rgba(19, 22, 13, 0.1);
    border-radius: 20px;
    background: transparent;
    color: #111;
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .tp-service-category span:nth-child(n+5) {
    display: none;
  }

  .tp-service-thumb {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .tp-service-thumb-panel {
    margin: 0;
    background: var(--tp-theme-primary);
    border: 0;
  }

  .tp-service-thumb img {
    width: 48px;
    height: 48px;
    filter: brightness(0) invert(1);
  }

  .tp-service-btn {
    order: 4;
    margin-bottom: 0;
  }

  .tp-service-btn .tp-btn-green,
  .tp-service-btn .tp-btn-green:hover,
  .tp-service-btn .tp-btn-green:focus {
    width: auto;
    min-height: 48px;
    height: auto;
    padding: 14px 22px;
    background: var(--tp-theme-primary);
    background-color: var(--tp-theme-primary);
    color: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
  }

  .tp-service-btn .tp-btn-green .tp-btn-text,
  .tp-service-btn .tp-btn-green .btn-anim__letter {
    color: #fff;
  }

  .tp-service-btn .tp-btn-green:hover {
    background: var(--tp-theme-primary);
    background-color: var(--tp-theme-primary);
    color: #fff;
  }

  .tp-service-btn .tp-btn-green:hover .tp-btn-text,
  .tp-service-btn .tp-btn-green:hover .btn-anim__letter {
    color: #fff;
  }

  .tp-service-item:hover {
    border: 1px solid rgba(20, 20, 20, 0.08);
  }

  .tp-service-item:hover .tp-service-item-title a {
    color: #111;
  }

  .cst-metro-tool .cst-metro-tool-icon {
    width: 64px;
    height: 64px;
  }

  .cst-metro-tool-icon .cst-metro-acf-icon,
  .cst-metro-tool-icon svg {
    width: 36px;
    height: auto;
  }

  .cst-metro-tool > span:not(.cst-metro-tool-icon) {
    font-size: var(--fs-label);
}

  .cst-metro-area {
    padding: 64px 0 80px;
  }

  .cst-metro-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .cst-metro-intro {
    flex: none;
    max-width: 38em;
  }

  .cst-metro-item {
    margin-bottom: 64px;
    padding: 20px;
  }

  .cst-metro-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 0;
  }

  .cst-metro-tool {
    border-left: 0;
  }

  .cst-metro-tool:nth-child(odd) {
    padding-left: 0;
  }

  .cst-metro-tool:nth-child(even) {
    border-left: 1px solid #e5e7eb;
  }

  .cst-metro-copy {
    max-width: none;
  }

  .cst-cta-ptb {
    padding: 40px 0 56px;
    margin-bottom: 0;
  }

  .cst-cta-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px 28px 32px;
  }

  .cst-cta-copy,
  .cst-cta-card,
  .cst-cta-proof {
    grid-column: auto;
    grid-row: auto;
  }

  .cst-cta-card {
    max-width: none;
  }

  .cst-cta-proof {
    gap: 0;
    margin: 0;
    padding: 28px 0 0;
    border-left: 0;
    border-top: 1px solid #e6e8ee;
  }

  .cst-cta-proof li {
    padding: 18px 0;
    border-right: 0;
  }

  .cst-cta-proof li:first-child {
    padding-top: 0;
  }

  .cst-contact-ptb {
    padding: 130px 0 56px;
  }

  .cst-contact-wrap {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cst-contact-copy,
  .cst-talk-form-col {
    padding: 32px 24px;
  }

  .cst-talk-title {
    max-width: none;
    margin-bottom: 32px;
  }

  .cst-talk-fields {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cst-svc-list,
  .cst-svc-process {
    padding: 56px 0 32px;
  }

  .cst-svc-card {
    padding: 24px 20px;
  }


  .cst-svc-split,
  .cst-svc-steps {
    grid-template-columns: 1fr;
  }

  .cst-svc-step {
    padding: 28px 24px 24px;
  }

  .cst-svc-step span {
    margin-bottom: 20px;
  }

  .cst-services-page .tp-hero-area.cst-hero-ptb,
  .cst-portfolio-page .tp-hero-area.cst-hero-ptb,
  .cst-pricing-page .tp-hero-area.cst-hero-ptb {
    padding-top: 128px;
  }

  .cst-services-page .cst-hero-wrapper,
  .cst-portfolio-page .cst-hero-wrapper,
  .cst-pricing-page .cst-hero-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 56px;
    row-gap: 0;
  }

  .cst-services-page .cst-hero-right,
  .cst-portfolio-page .cst-hero-right,
  .cst-pricing-page .cst-hero-right,
  .cst-services-page .cst-hero-heading,
  .cst-portfolio-page .cst-hero-heading,
  .cst-pricing-page .cst-hero-heading {
    display: block;
  }

  .cst-services-page .cst-hero-ptb .cst-hero-title,
  .cst-portfolio-page .cst-hero-ptb .cst-hero-title,
  .cst-pricing-page .cst-hero-ptb .cst-hero-title {
    max-width: 10em;
    margin-top: 22px;
  }

  .cst-services-page .cst-hero-text,
  .cst-portfolio-page .cst-hero-text,
  .cst-pricing-page .cst-hero-text {
    margin-top: 16px;
  }

  .cst-services-page .cst-hero-btn-box,
  .cst-portfolio-page .cst-hero-btn-box,
  .cst-pricing-page .cst-hero-btn-box {
    margin-top: 28px;
  }

  .cst-wl-note {
    padding: 16px 0 72px;
  }

  .cst-wl-note > .container,
  .cst-wl-note-card {
    width: min(calc(100% - 32px), 1080px);
  }

  .cst-wl-note-card {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 28px;
    padding: 28px 24px;
  }

  .cst-wl-note-visual {
    width: min(100%, 240px);
  }


  .cst-price-area {
    padding: 72px 0 56px;
  }


  .cst-price-grid {
    grid-template-columns: 1fr;
  }

}

/* ≤767px  mobile landscape / large phone */
@media (max-width: 767px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 28px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-h5: 18px;
    --fs-h6: 16px;
    --fs-h2-sm: 28px;
    --fs-h3-sm: 24px;
    --fs-lead: 16px;
    --fs-display: 32px;
    --fs-display-sm: 32px;
    --fs-stat: 48px;
  }

  .cst-metro-features-label {
    font-size: var(--fs-label);
}

  .tp-funfact-ptb {
    padding-top: 80px;
    padding-bottom: 72px;
  }

  .tp-funfact-heading {
    margin-bottom: 32px;
  }


  .tp-funfact-wrap.tp-funfact-stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .tp-funfact-stat,
  .tp-funfact-stat.is-metric {
    padding: 28px 24px 30px;
    min-height: 0;
  }


  .tp-funfact-stat.is-metric p {
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
  }

  .cst-hero-wrapper > .shape-1 {
    display: none;
  }

  .cst-hero-thumb img {
    height: 480px;
  }

  .cst-hero-wrapper {
    padding-bottom: 60px;
    display: block;
  }

  .cst-hero-left {
    margin-right: 0;
    margin-bottom: 20px;
  }

  .cst-hero-subtitle {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .cst-hero-right {
    padding-left: 0;
    border-left: 0;
  }

  .cst-hero-slider-wrapper {
    margin-top: 0;
  }

  .cst-hero-ptb .cst-hero-title {
    margin-bottom: 28px;
    white-space: normal;
  }

  .cst-hero-btn-box {
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
  }

  .cst-hero-btn-box .cst-hero-btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .cst-hero-ptb .cst-hero-btn-box .tp-btn-green {
    width: 100%;
    padding: 14px 10px;
    font-size: var(--fs-label);
    letter-spacing: 0;
    height: 48px;
    min-height: 48px;
    white-space: nowrap;
  }

  .cst-footer-area {
    padding-top: 72px;
  }

  .cst-footer-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 80px;
  }

  .cst-testimonial-slider-wrapper {
    margin-right: 0;
  }

  .cst-testimonial-slider-wrapper .dgm-testimonial-dot,
  .cst-testimonial-slider-wrapper .dgm-testimonial-dot.swiper-pagination {
    padding-right: 0;
    justify-content: flex-end;
  }

  .tp-header-blur,
  .header-transparent,
  .cst-mobile-lite .tp-header-area {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .cst-hero-marquee-track,
  .cst-mobile-lite .cst-hero-marquee-track {
    animation-duration: 48s;
  }

  .tp-service-area,
  .tp-project-area,
  .tp-testimonial-area,
  .tp-faq-area,
  .tp-cta-area,
  .tp-footer-area {
    content-visibility: auto;
    contain-intrinsic-size: 1px 720px;
  }

  .tp_fade_anim {
    opacity: 1;
    transform: none;
  }
}

/* ≤575px  phone */
@media (max-width: 575px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 28px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-h5: 18px;
    --fs-h6: 16px;
    --fs-h2-sm: 28px;
    --fs-h3-sm: 24px;
    --fs-lead: 16px;
    --fs-display: 32px;
    --fs-display-sm: 32px;
    --fs-stat: 48px;
  }

  .cst-cta-ptb {
    margin-bottom: 0;
  }

  .cst-cta-wrap {
    padding: 28px 20px 24px;
  }


  .cst-cta-proof {
    margin: 0;
    padding: 24px 0 0;
  }

  .cst-cta-card {
    max-width: none;
    padding: 28px 20px 24px;
  }

  .cst-cta-form .tp-contact-form-input input,
  .cst-select-toggle {
    padding: 0 16px;
  }

  .cst-select-toggle {
    padding-left: 16px;
    padding-right: 40px;
  }

  .cst-select-list li {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cst-cta-form .tp-contact-form-input textarea {
    padding: 14px 16px;
  }


  .cst-cookie {
    left: 16px;
    right: 16px;
    bottom: 80px;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: auto;
    padding: 20px 16px;
  }

  .cst-cookie p {
    font-size: var(--fs-body);
    text-align: left;
  }

  .cst-cookie-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    justify-content: stretch;
  }

  .cst-cookie-accept,
  .cst-cookie-decline {
    width: 100%;
    min-height: 48px;
    padding: 14px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  body.cst-contact-thanks .cst-thanks {
    min-height: calc(100vh - 220px);
    padding: 150px 20px 88px;
  }


  .cst-404-page .cst-404 {
    min-height: calc(100vh - 220px);
    padding: 150px 20px 88px;
  }


  .cst-offline-page .cst-offline {
    min-height: calc(100vh - 220px);
    padding: 150px 20px 88px;
  }

  .cst-rag {
    right: 16px;
    bottom: 16px;
    width: 58px;
    height: 58px;
  }

  .cst-rag.is-open {
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
    height: min(78vh, calc(100vh - 20px));
  }

  .cst-rag-launch {
    width: 58px;
    height: 58px;
  }

  .cst-rag-launch svg,
  .cst-rag-launch img {
    width: 32px;
    height: 32px;
  }

  .cst-rag-tip {
    max-width: min(180px, calc(100vw - 40px));
    font-size: var(--fs-caption);
  }

  .cst-rag-panel {
    border-radius: 0;
  }
}

/* ≤480px  small phone */
@media (max-width: 480px) {
  :root {
    --fs-h1: 28px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-h4: 18px;
    --fs-h5: 16px;
    --fs-h6: 16px;
    --fs-h2-sm: 24px;
    --fs-h3-sm: 20px;
    --fs-display: 28px;
    --fs-display-sm: 28px;
    --fs-stat: 40px;
  }
}

/* ≤375px  compact phone */
@media (max-width: 375px) {
  :root {
    --fs-h1: 28px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-h4: 18px;
    --fs-h5: 16px;
    --fs-h6: 16px;
    --fs-h2-sm: 24px;
    --fs-h3-sm: 20px;
    --fs-display: 28px;
    --fs-display-sm: 28px;
    --fs-stat: 32px;
  }
}

/* ≤320px  lowest supported width */
@media (max-width: 320px) {
  :root {
    --fs-h1: 24px;
    --fs-h2: 20px;
    --fs-h3: 18px;
    --fs-h4: 16px;
    --fs-h5: 16px;
    --fs-h6: 16px;
    --fs-h2-sm: 20px;
    --fs-h3-sm: 18px;
    --fs-display: 24px;
    --fs-display-sm: 24px;
    --fs-stat: 28px;
  }
}