/* =====================  ≥1200px, 1200–1399.98, ≥1400  ===================== */

/* ≥1200px */
@media (min-width: 1200px){
  .hero-media{ margin-left: -6%; }

  /* ring sizes at ≥1200 */
  .ring{ width: 520px; height: 520px; }
  .ring-center{ width: 320px; height: 320px; }
}

/* 1200–1399.98px (XL only) */
@media (min-width: 1200px) and (max-width: 1399.98px){
  .screen { height: 44%; }
  .customers-title { font-size: 69.59px; }
  .mySwiper-bg{
    background-position:5px 0px !important;
  }
}

/* ≥1400px (XXL and up) */
@media (min-width: 1400px){
  .screen { height: 68%; }
}

/* =====================  992–1199.98 (LG only)  ===================== */
@media (min-width: 992px) and (max-width: 1199.98px){
  .monitor-inner { flex-direction: row; }
  .screen { height: 33%; }
  .subtitle { font-size: 26px; }

  /* process desktop sizing */
  .section-title { font-size: 60px; }
  .section-description { font-size: 14px; }
  .process-wrapper { height: 64dvh; }
  .step-1 { position: absolute; top: -70px; right: 0; }
  .step-2 { position: absolute; top: 10px; left: 0; text-align: right; }
  .step-3 { position: absolute; top: 66px; right: 0; }
  .step-4 { position: absolute; top: 160px; left: 0; text-align: right; }
  .step-5 { position: absolute; bottom: 175px; right: 0; }

  .mySwiper-bg{
    background-position:5px 0px !important;
  }
  
}

/* ≥992px (shared desktop-up) */
@media (min-width: 992px){
  /* logoCarousel (merged 992 & 1024 duplicates) */
  #logoCarousel .carousel-control-prev { left: -60px; }
  #logoCarousel .carousel-control-next { right: -60px; }
  #logoCarousel .carousel-control-next,
  #logoCarousel .carousel-control-prev {
    width: 52.842773px; height: 52.842773px; top: 45%;
  }
  .carousel-control-prev svg,
  .carousel-control-next svg { width: 30%; }

  .acc-steps{ margin-left: 36px; } /* keep the final intended value */
  .clients-say .col-lg-7{ padding-right: 48px; }
  .acc-steps .acc-title { flex: 1 1 auto; font-size: 26px; font-weight: bolder; }
   .mySwiper-bg{
    background-position:5px 0px !important;
  }
}

/* =====================  768–991.98 (MD & down helpers)  ===================== */
@media (max-width: 991.98px){

    .howitwork .container{
        padding:0px 0px 30px 0px;
    }
    .howitwork{
        padding:81px 0px 0px !important;
    }
    .footer-logo{
          margin: auto !important;
    }
  /* logo/hero/nav/responsive stacks */
  .monitor-inner { flex-direction: column; }
  .screen { height: 68%; }

  .meth-title{
    font-weight: 800; line-height: 1.05; letter-spacing: .01em;
    font-size: 34px; max-width: 85%; margin-bottom: 35px;
  }

  /* Navbar collapse layout */
  #mainNavbar.collapse:not(.show){
      display: none !important;
       
      }
  #mainNavbar.collapse.show{ display: block; }

  .navbar { position: sticky; top: 0; z-index: 1030; }
  .navbar .container { position: relative; }
  .navbar-collapse{
    position: absolute; top: 100%; left: 0; right: 0;
    background: #484748; border-top: 1px solid #222;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
    padding: 8px 12px;
  }
  .navbar-nav{ gap: 0; padding: 6px 0; width: 100%; }
  .navbar-nav .nav-link{
    width: 100%; text-align: left; padding: 12px 10px; line-height: 1.4;
    font-size: 34px; font-weight: 700; text-transform: uppercase;
    border-radius: 8px; color: #fff !important;
  }
  .navbar-nav .nav-item + .nav-item{ border-top: 1px solid #151515; }
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus,
  .navbar-nav .nav-link.active{ background: #111; }
  .navbar-toggler { border: 0; }
  .navbar-toggler:focus { box-shadow: none; }

  /* Dropdowns on mobile */
  .dropdown-menu{
    background:#000; border:1px solid #151515; border-radius:10px;
    padding:6px; margin:6px 10px;
  }
  .dropdown-item{ color:#fff; padding:10px 12px; border-radius:6px; }
  .dropdown-item:hover{ background:#111; }

  /* Hero */
  .hero-media{
    width: 100%; margin-left: 0; border-radius: 12px;
    margin-top: 8px; transform: translate(0%, 20%);
  }
  .hero-deco { opacity: .6; }
  .hero-deco--tl { top: -150px; left: -180px; width: 55vw; }
  .hero-deco--br { right: -200px; bottom: -220px; width: 60vw; }
  .hero .container{ position: relative; z-index: 1; }
  .hero-ring{ opacity:.5; }
  .hero-ring--br{ width: 300px; height: 300px; right:-60px; bottom:-80px; }
  .hero-ring--tl{ width: 260px; height: 260px; left:-60px; top:-60px; }

  /* How it works media */
  .pen-tool-icon { position: relative; left: 65px; margin-bottom: -130px; }
  .choose-plans { margin-bottom: 6rem; }
  .recent-work { padding-bottom: 3rem; }

  /* Tablet layout helpers */
  .combine-section { flex-direction: column; text-align: center; }
  .chlid-image-section, .elevate-section {
    flex: 0 0 100%; width: 100%; max-width: 100%;
  }
  .elevate-section { margin-top: 20px; }
  .text-first { font-size: 36px; }

  /* Process mobile stack */
  .center-image { display: none !important; }
  .process-section { padding: 50px 0; }
  .process-btn { margin-bottom: 30px; }
  .process-wrapper {
    height: auto; display: flex; flex-direction: column; align-items: center; gap: 10px;
  }
  .process-card{
    width: 80%; text-align: left !important;
    background: rgba(255,255,255,0.1); padding: 20px; border-radius: 12px; position: relative;
  }
  .process-card h5::before{
    content: attr(data-step); display:inline-block; width:35px; height:35px;
    background:#ff007f; color:#fff; font-weight:bold; border-radius:50%;
    text-align:center; line-height:35px; margin-right:10px; font-size:16px;
  }
  .step-1, .step-2, .step-3, .step-4, .step-5 { position: static; text-align: center; }

  /* Forms */
  .form-row{ flex-wrap: wrap; flex-direction: column; width: 100%; }
  .field{ flex-direction: column; width: 100%; }
  .newsletter-btn{ width: 100%; margin-top: 10px; margin: 0 auto; }

  /* Rings / case study graphic */
  .cs-hero-graphic { max-width: 459px; width: 200px; height: 320px; margin-left: -120px; margin-bottom: 100px; }
  .ring{ width:600px; height:600px; }
  .ring-center{ width:380px; height:380px; }
  .ring-icon{
    transform:
      rotate(calc(360deg/var(--count)*var(--i)))
      translate(300px)
      rotate(calc(-360deg/var(--count)*var(--i)));
  }
  .acc-steps{ margin-left: 0; margin-top: 16px; }

  /* Footer */
  .footer-bottom .legal-links { text-align: center; margin-top: 1; }
  .footer-bottom-mob{ margin-top: 50px; }

  /* Toolbox */
  .toolbox-head, .toolbox-grid{ width: 88%; }
  .toolbox-grid{ grid-template-columns: repeat(4, 1fr); }

  /* Hero / proposal */
  .proposal-hero{
    padding: 48px 0 56px; min-height: 46vh; background-position: center top;
  }
  .proposal-form{ max-width: 100%; width: 100%; margin: 0 auto; }
  .proposal-hero .hero-title{ font-size: clamp(30px, 6vw, 44px); line-height: 1.08; }
  .proposal-form .form-control{ padding: 14px 14px; font-size: 16px; }
  .proposal-form textarea.form-control{ min-height: 120px; }
  .proposal-form .btn{ padding: 12px 20px; font-size: 16px; }

  /* About brand swiper buttons (mobile position) */
  .about-brand .swiper-button-prev,
  .about-brand .swiper-button-next { top: -12px; left: -300px; }

  /* Ring wrap center */
  .ring-wrap{ justify-content: center; padding-right: 0; }

  .mySwiper-bg{
    background-position:5px 0px !important;
  }
}

/* =====================  ≤1200 helpers (tablet/desktop down)  ===================== */
@media (max-width: 768px){
    .list-unstyled li,.footer-location{
        font-size:24px;
    }
    .footer-links li+li,.footer-location{
        font-size:24px;
    }
    .footer-heading{
        font-size:26px;
    }
}
@media (max-width: 1200px){
    .copyright,.footer-bottom a{
            font-size: 27px !important;
        text-align: center;
        width: fit-content;
    }
    .list-unstyled li,.footer-location{
        font-size:20px;
    }
    .footer-links li+li,.footer-location{
        font-size:20px;
    }
    .footer-heading{
        font-size:22px;
    }
    .faq-accordion .accordion-body{
        font-size:30px;
    }
    .what-you-get-section-left .title p{
        max-width:100%;
        font-size:34px;
        margin:40px 0px;
    }
 .pen-tool-icon{
     margin-bottom:0;
 }
  .top-bar{
      display:none;
  }
  .top-bar { font-size: 26px; }
  .top-bar .left-icons {
    padding-left: 0; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  }
  .top-bar .left-icons span{
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
  }
  .top-bar .left-icons span svg{ flex: 0 0 auto; }
  .top-bar .thr{ display: none; }
  .top-bar .social-icons{ width: auto; gap: 14px; }
  .lang-switch{ margin-top: 2px; }
  .top-bar svg{ width: 18px; height: 18px; }

  /* forms (broad ≤1200 tweak) */
  .form-row{ flex-direction: column; width: 100%; }
  .field{ flex-direction: column; width: 100%; }
  .newsletter-btn{ margin: 0 auto; }
}

/* =====================  768–1024 helpers  ===================== */
@media (max-width: 1024px) and (min-width: 768px){
    #chatra {
width: 120px !important;
height: 120px !important;
}
  .toolbox-grid{ grid-template-columns: repeat(2, 1fr) !important; } 
  .hero-sub {
    
    font-size: 34px;
  }  
  .eyebrow-about{
      font-size:34px;
  }
  .btn-lg {
      max-width:540px;
      font-size:32px;
  }
  
  .hero-title{
      /*font-size:40.36px;*/
      font-size:68.36px;
  }
  .hero-sub{
      max-width:max-content;
  }
  .about-hero p {
    font-size: 31.68px !important;
    line-height: 38.5px !important;
    font-weight: 300 !important;
 }
 .title p {
    font-size: 34.24px;
    line-height: 40px;
 }
 
 .branding-section p {
    font-size: 32px;
    line-height: 34px;
    text-align: left; 
 }
 .subtitle {
   font-size: 28px; 
 }
 .service p {
    font-size: 32px;
    line-height: 42px;
 }
 .acc-steps .acc-title {
    font-size: 31px;
 }
 .acc-steps .accordion-body {
    font-size: 28px;
 }
 .cs-slide .lead {
    font-size: 30px;
 }
 .cs-slide .cs-desc {
    font-size: 26px; 
}
.cs-author {
    font-size: 31px;
}
.challenge-accordion .title  {
    max-width: 80%;
    text-align: left;
}
.accordion-item .head {
    margin-bottom: 20px;
    margin-top: 20px;
}
.accordion-header {
    font-size: 26.73px; 
}
.about-branding .container {
    max-width: 90%;
}
.our-process .title {
    max-width: 100% !important;
}
.our-process .title p {
    font-size: 21px;
    font-weight: 500;
}
.branding-section .content-box .d-flex {
    flex-direction: column;
}

/* services */
.about-brand .right-p {
    text-align: right;
    line-height: 30.91px;
    font-size: 28.14px;
    font-weight: 300;
}

.about-brand .title h4 {
    font-size: 34.34px;
    font-weight: 600;
    margin-top: 35px;
}
.mySwiper {
  right: -10px;
}
#logoCarousel .carousel-control-prev {
    left: -65px;
}
#logoCarousel .carousel-control-next {
    right: -65px;
}
#logoCarousel .carousel-control-next, #logoCarousel .carousel-control-prev {
    width: 65px;
    height: 65px;
}

 /* home page font-size adjust */
 .customers-section{
    width: 100%; position:relative; padding:0 20px 90px; overflow:hidden;
    isolation:isolate; background-color:#0b0d12;
  }
  .customers-grid{
    display:flex; flex-direction: column; grid-template-columns:1.15fr .85fr;
    gap:28px; align-items:stretch;
  }
  .customers-title { font-size:50px; left: 0; }
  .customers-content { width: 100%; top: 0; }
  .customers-content .cta{ align-self: center; }
  .customers-grid p {
    text-align: center; width: 100%; max-width: 90%;
    margin: 10px auto 20px;
    font-size: 28px;

  }
  .content-box { height: 100% !important; }
  .media{ overflow:hidden; width:100%; align-self:center; }
  .media img{ display:block; height:100%; object-fit:cover; }

  
  
}
.swiper-backface-hidden .swiper-slide{
  padding: 30px;
}
@media (min-width: 1024px) and (max-width: 1440px) {
 
  .pen-tool-icon {
    margin-top: 90px;
  }
  .about-brand h2{ 
    font-size: 45px;
  }
  .about-brand .right-p{
    font-size: 16.14px;
  }
  .about-brand{
    padding: 80px 50px;
  }
  .about-brand .swiper-button-prev, .about-brand .swiper-button-next{
    left:-30px;
  }
}

/* =====================  ≤1024 & mids  ===================== */
@media (max-width:1024px){
    .about-brand .swiper-slide .title p{
        font-size:30.24px;
    }
    .about-brand .swiper-slide .title p{
        font-size:23.84px;
        line-height:31.8px;
    }
    .my-sec p {
        font-size:30.24px;
        line-height:36px;
    }
  .nav a{ padding:12px 14px; }
  .mob-wa { display: flex; }
  .mob-wa .col { width: auto !important; }
  .swiper-backface-hidden .swiper-slide .title{
    margin-top: 10px;
  }

  #testiCarousel .carousel-control-prev, #testiCarousel .carousel-control-next{
    top:42%;
  }
  .proposal-hero .hero-title{
    font-size: 39.45px;
  }
  .left-padding-footer .col-lg-9.mb-5.mb-lg-0{
    width: -webkit-fill-available;    
  }
  .right-padding-footer{
    width: -webkit-fill-available;       
  }  
}
@media (max-width:1280px){
    .left-padding-footer .col-lg-9.mb-5.mb-lg-0{
      width: -webkit-fill-available;    
    }
    .right-padding-footer{
      width: -webkit-fill-available;       
    } 
    /* .mob-wa{
      display: flex;
    }  */
    .row-cols-sm-2>*{
        flex: 0 0 auto;
        width: 25%;
    }
}

@media (max-width:1000px){ .cell{ flex:0 0 20%; } }

/* =====================  ≤991.98 already above; extra small helpers  ===================== */

/* =====================  ≤960/900/768/720/575.98/520/480/360  ===================== */
@media (max-width:960px){
  .form-row{ flex-wrap: wrap; }
  .newsletter-btn{ width:100%; margin-top:10px; }
}
@media (max-width:900px){
  .topbar .container{ flex-wrap:wrap; row-gap:8px; }
  .tb-left, .tb-right{ flex:1 1 100%; justify-content:center; }
  .mainnav .container{ gap:8px; }
  .nav-toggle{ display:inline-flex; }
  .nav{
    position:fixed; inset:60px 0 auto 0; background:#0f0f0f; border-bottom:1px solid var(--sep);
    transform:translateY(-120%); transition:transform .3s ease; z-index:50;
  }
  .nav.open{ transform:translateY(0); }
  .nav ul{ flex-direction:column; align-items:stretch; padding:8px; }
  .nav a{ padding:12px 16px; }
  .utilities{ display:none; }
}
@media (max-width:768px){
  .top-bar .d-flex.justify-content-between{
    flex-direction: column; align-items: center; gap: 8px;
  }
  .top-bar .left-icons{ justify-content: center; }
  .xp-container h2{ margin-bottom:28px; font-size:1.6rem; }
  .xp-list{ gap:18px 20px; }
}
@media (max-width:720px){ .cell{ flex:0 0 20%; } }
@media (max-width:576px){
  .content-box{ padding:20px; }
  .images-4{ padding:10px; }

  /* Proposal small phones */
  .proposal-hero{
    padding: 36px 0 44px; min-height: 46vh !important;
  }
  .proposal-form{ width: 94%; max-width: 420px; }
  .proposal-hero .hero-title{
    font-size: clamp(26px, 7.2vw, 34px); line-height: 1.12; letter-spacing: .2px;
  }
  .proposal-form .form-control{ padding: 13px 14px; font-size: 15px; }
  .proposal-form textarea.form-control{ min-height: 110px; }
  .proposal-form .btn{ padding: 12px 18px; font-size: 15px; }

  /* Testimonials controls */
  #testiCarousel .carousel-control-prev,
  #testiCarousel .carousel-control-next{
    width: 40px; height: 40px; top:auto; bottom:-6px; transform:none;
  }
  #testiCarousel .carousel-control-prev{ left:0; }
  #testiCarousel .carousel-control-next{ right:0; }
  .cs-dots{ justify-content:center; }

  /* Toolbox stack */
  .toolbox-head{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .btn-cta{ align-self: flex-end; }
  .toolbox-grid{ grid-template-columns: 1fr; width: 92%; }

  /* FAQ buttons */
  .faq-accordion .accordion-button{
    --arrow-size: 1.4rem; font-size: 20px;
  }
}
@media (max-width:575.98px){
  /* (kept same rules as above; if both exist in your build, 575.98 will run first) */
}
@media (max-width:520px){ .cell{ flex:0 0 20%; } }
@media (max-width:480px){
  .logo-text small{ display:none; }
  .topbar .tb-left .email{ display:none; }
}
@media (max-width:360px){
  .proposal-hero{ min-height: 68vh; }
}

/* =====================  767+ utility (ring/testimonial paddings)  ===================== */
@media (min-width: 767px){
  .ring{
    position: relative; width: 520px; height: 520px;
    border-radius: 50%; border: 1px solid #000;
    animation: ring-rotate 8s linear infinite; will-change: transform;
  }
  .ring.paused{ animation-play-state: paused; }
  @keyframes ring-rotate{ to{ transform: rotate(360deg);} }

  .ring-center{
    position:absolute; top:50%; left:50%;
    width:320px; height:320px; border-radius:50%;
    object-fit:cover; box-shadow:0 10px 30px rgba(0,0,0,.12);
    animation: ring-counter 8s linear infinite;
  }
  .ring.paused .ring-center{ animation-play-state: paused; }
  @keyframes ring-counter{
    from{ transform: translate(-50%,-50%) rotate(0deg); }
    to{   transform: translate(-50%,-50%) rotate(-360deg); }
  }
  .ring-icon{
    --count: 8;
    position:absolute; top:45%; left:45%;
    transform:
      rotate(calc(360deg/var(--count)*var(--i)))
      translate(255px)
      rotate(calc(-360deg/var(--count)*var(--i)));
    width:50px; height:50px; border-radius:50%;
    background:#222; box-shadow:0 4px 16px rgba(0,0,0,.15); z-index:1;
  }

  .left-padding-testimonial{ padding-left: 0% !important; }
  .right-padding-meth{ padding-right: 1% !important; }
}


/* =====================  Carousels & Brand strip general  ===================== */
/* Responsive toolbox */

/* about us */
/* ======= Breakpoints ======= */

/* Large (≥992px) – fine-tune spacing */
@media (max-width: 1199.98px){
  .media-grid{ max-width: 580px; }
  .back-img, .front-img{ width: 56%; }
  .back-img{ left:6%; top:7%; }
  .front-img{ right:6%; top:26%; }
  .bubble-lg{ width: 140px;  bottom: -5%; left: -6%; }
  .deco-ring{ width:130px; height:130px; top:-24px; }
}

/* Medium (≥768px and <992px) – keep overlap but larger images */
@media (max-width: 991.98px){
  .media-grid{ max-width: 560px; }
  .media-stage{ min-height: clamp(380px, 60vw, 520px); }
  .back-img, .front-img{ width: 50%; }
  .back-img{ left:5%; top:5%; }
  .front-img{ right:5%; top:25%; }
}

/* Small (<768px) – show single centered card, simplify decorations */
@media (max-width: 767.98px){
  .media-grid{
    border:none;            /* clean mobile look */
    background:none;
    max-width: 100%;
    padding: 18px 0;
  }
  .media-stage{ min-height: auto; }
  .back-img{ display:none; }             /* hide back image on mobile */
  .front-img{
    position: relative; top: 0; right: auto;
    width: 100%; aspect-ratio: auto;     /* full width card */
  }
  .bubble-lg, .deco-ring{ display:none !important; } /* already d-none d-md-block, just in case */
}

/* Extra-small (<576px) – small refinements */
@media (max-width: 575.98px){
  .media-grid{ padding: 0; }
}


@media (min-width: 768px) and (max-width: 1280px) {
  
  .right-padding-footer{   
    margin: 1.5rem 0;
  }
}
.swiper{
  padding-bottom: 15px !important;
}
.swiper-wrapper{
  justify-content: space-around;
  align-items: center;
}
.navbar-toggler-icon{
    width:4rem ;
    height:4rem ;
}