/* =========================================
   COMPLETE RESPONSIVE - SINGLE MEDIA QUERY
========================================= */

@media (max-width: 768px){

  /* GLOBAL */

  html,
  body{
    overflow-x:hidden;
    width:100%;
  }

  *{
    box-sizing:border-box;
  }

  img,
  video{
    max-width:100%;
    height:auto;
    display:block;
  }

  section{
    overflow:hidden;
  }

  .px-margin-desktop,
  .px-margin-mobile{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  /* NAVBAR */

  nav .h-20{
    height:72px;
  }

  nav .text-xl{
    font-size:18px;
  }

  #mobile-menu{
    gap:20px;
    padding-top:24px;
    padding-bottom:24px;
  }

  /* HERO */

  .min-h-\[100vh\]{
    min-height:auto !important;
    padding-top:110px !important;
    padding-bottom:70px !important;
  }

  .min-h-\[100vh\] .grid{
    grid-template-columns:1fr !important;
    gap:50px !important;
  }

  .font-display-2xl,
  .text-display-2xl-mobile{
    font-size:34px !important;
    line-height:1.15 !important;
  }

  .font-display-lg,
  .text-display-lg{
    font-size:28px !important;
    line-height:1.2 !important;
  }

  .font-headline-md,
  .text-headline-md{
    font-size:26px !important;
    line-height:1.3 !important;
  }

  .font-headline-sm,
  .text-headline-sm{
    font-size:22px !important;
  }

  .font-body-lg,
  .text-body-lg{
    font-size:16px !important;
    line-height:1.7 !important;
  }

  .flex.flex-wrap.gap-6{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }

  .campfire-btn,
  .group.relative.inline-flex,
  .custom-demo-btn,
  .custom-btn{
    justify-content:center;
  }

  a.custom-demo-btn {
    width: 59% !important;
}

  .hidden.lg\:block{
    display:none !important;
  }

  .blur-\[120px\],
  .blur-\[150px\]{
    opacity:.2 !important;
  }

  svg.absolute{
    display:none;
  }

  /* STATS */

  section.py-24 .grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  section.py-24 .glass{
    padding:24px !important;
  }

  /* ABOUT */

  section.py-32{
    padding-top:80px !important;
    padding-bottom:80px !important;
  }

  section.py-32 .grid{
    grid-template-columns:1fr !important;
    gap:50px !important;
  }

  section.py-32 img{
    border-radius:20px !important;
  }

  .sm\:grid-cols-3{
    grid-template-columns:1fr !important;
  }

  /* SERVICES */

  .md\:grid-cols-3,
  .lg\:grid-cols-4{
    grid-template-columns:1fr !important;
  }

  .glass-hover{
    padding:24px !important;
  }

  /* PORTFOLIO */

  .grid.grid-cols-1.md\:grid-cols-2{
    gap:24px !important;
  }

  .h-\[600px\]{
    height:320px !important;
  }

  .md\:mt-16{
    margin-top:0 !important;
  }

  .flex.justify-between.items-end{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }

  /* TESTIMONIAL */

  .ts-section{
    padding:80px 20px !important;
  }

  .ts-header{
    margin-bottom:40px;
  }

  .ts-title{
    font-size:30px !important;
    line-height:1.2;
  }

  .ts-subtitle{
    font-size:15px;
    line-height:1.6;
  }

  .ts-card{
    grid-template-columns:1fr !important;
    padding:20px !important;
    gap:24px !important;
  }

  .ts-thumb img{
    aspect-ratio:1/1;
    object-fit:cover;
  }

  .ts-quote{
    font-size:16px !important;
    line-height:1.7;
  }

  .ts-person{
    gap:12px;
  }

  .ts-avatar{
    width:48px;
    height:48px;
  }

  .ts-nav{
    flex-direction:column;
    gap:18px;
    margin-top:24px;
  }

  .ts-mini-row{
    grid-template-columns:1fr !important;
    gap:18px;
    margin-top:40px;
  }

  .ts-mini{
    padding:18px;
  }

  /* PRICING */

  .md\:grid-cols-3{
    grid-template-columns:1fr !important;
  }

  .scale-105{
    transform:none !important;
  }

  .glass.p-10{
    padding:28px !important;
  }

  /* CTA */

  .text-center .custom-demo-btn{
    width:80% !important; 
    justify-content:center;
  }

  /* FOOTER */

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

  footer .flex.flex-col.md\:flex-row{
    flex-direction:column;
    text-align:center;
    gap:16px;
  }

  .custom-demo-btn .btn-icon-wrapper {left: 29px;}

.custom-demo-btn::before {
    top: 6px;
}

button.custom-demo-btn .btn-icon-wrapper {
    margin-right: 76px;
}

section.py-32 .sm\:grid-cols-3{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:20px !important;
  }

  section.py-32 .sm\:grid-cols-3 > div:last-child{
    grid-column:1 / -1;
  }

  .campfire-btn .btn-arrow {
    left: 109px;
}

.ts-section{
    padding: 70px 20px !important;
    overflow: hidden;
  }

  .ts-header{
    text-align: center;
    margin-bottom: 40px;
  }

  .ts-title{
    font-size: 32px !important;
    line-height: 40px !important;
  }

  .ts-subtitle{
    font-size: 15px;
    line-height: 24px;
  }

  /* MAIN CARD */
  .ts-card{
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 24px;
    overflow: hidden;
  }

  .ts-thumb{
    height: 220px !important;
  }

  .ts-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ts-body{
    padding: 24px 20px !important;
  }

  .ts-quote{
    font-size: 18px !important;
    line-height: 32px !important;
    word-break: break-word;
  }

  .ts-person{
    gap: 12px;
    align-items: center;
  }

  .ts-avatar{
    width: 56px;
    height: 56px;
  }

  .ts-name{
    font-size: 18px;
  }

  .ts-role{
    font-size: 14px;
  }

  /* NAV */
  .ts-nav{
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
  }

  .ts-nav-left{
    justify-content: center;
  }

  .ts-counter{
    text-align: center;
  }

  /* MINI CARDS */
  .ts-mini-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 40px;
  }

  .ts-mini{
    width: 100% !important;
    padding: 18px !important;
  }

  .ts-mini-head{
    gap: 12px;
  }

  .ts-mini-avatar{
    width: 46px;
    height: 46px;
  }

  .ts-mini-name{
    font-size: 15px;
  }

  .ts-mini-co{
    font-size: 13px;
  }

  .ts-mini-quote{
    font-size: 14px;
    line-height: 24px;
    margin-top: 12px;
  }

  /* TRACK FIX */
  .ts-track{
    display: flex;
    width: 100%;
  }

  .ts-overflow{
    overflow: hidden;
  }

  img{
  max-width:100%;
  height:auto;
  display:block;
}

section,
div{
  box-sizing:border-box;
}

/* =========================
   CONTAINERS
   ========================= */

.max-w-container-max,
.max-w-\[1200px\],
.max-w-\[1000px\],
.max-w-\[800px\]{
  width:100%;
  padding-left:20px;
  padding-right:20px;
}

/* =========================
   NAVBAR
   ========================= */

nav .flex.justify-between{
  flex-wrap:wrap;
  gap:16px;
}

nav a.group.bg-\[\#b3ed97\]{
  transform:scale(.9);
  transform-origin:right;
}

/* =========================
   HERO SECTION
   ========================= */

h1{
  word-break:break-word;
}

.flex.flex-col.md\:flex-row.gap-4.mb-stack-lg{
  width:100%;
  align-items:center;
}

.campfire-btn,
button.group.relative.inline-flex{
  width:100% !important;
  max-width:320px;
}

/* =========================
   ALL GRID FIXES
   ========================= */

.grid{
  width:100%;
}

.grid.grid-cols-1.md\:grid-cols-2,
.grid.grid-cols-1.md\:grid-cols-3,
.grid.grid-cols-1.md\:grid-cols-4,
.grid.md\:grid-cols-2{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

/* =========================
   PORTFOLIO CARDS
   ========================= */

.h-\[600px\]{
  height:350px !important;
}

.h-\[400px\]{
  height:280px !important;
}

/* =========================
   PRICING SECTION
   ========================= */

.scale-105{
  transform:none !important;
}

/* =========================
   TESTIMONIAL SECTION
   ========================= */

.text-2xl.md\:text-3xl{
  font-size:24px !important;
  line-height:1.5 !important;
}

/* =========================
   FAQ SECTION
   ========================= */

.faq-btn{
  gap:15px;
}

.faq-content{
  width:100%;
}

/* =========================
   FOOTER
   ========================= */

footer .grid{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

footer .flex.flex-col.md\:flex-row{
  text-align:center;
}

/* =========================
   MOBILE TYPOGRAPHY
   ========================= */

.font-display-xl,
.text-display-xl,
.text-5xl,
.text-4xl{
  font-size:clamp(32px,7vw,72px) !important;
  line-height:1.1 !important;
}

.text-3xl{
  font-size:28px !important;
}

.text-2xl{
  font-size:22px !important;
}

/* =========================
   BUTTON OVERFLOW FIX
   ========================= */

button,
a{
  max-width:100%;
}

/* =========================
   OVERFLOW FIX
   ========================= */

body{
  overflow-x:hidden;
}

section{
  overflow:hidden;
}

.campfire-btn .btn-arrow {
    position: absolute !important;
    left: 228px;
}

.campfire-btn .btn-text {
    position: absolute;
    left: 84px;
}

button.custom-demo-btn .btn-icon-wrapper {
    margin-right: 78px;
    margin-left: -100px;
}

.text-on-primary {
    background: #ff862f;
    color: white;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

* {
  min-width: 0;
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

dotlottie-player {
    width: 100% !important;
}

.campfire-section{
  position: relative;
  overflow: hidden;
  padding: clamp(60px,8vw,120px) clamp(20px,5vw,80px);
  background: #fff;
}

.content-wrapper{
  width: 100%;
  max-width: 1400px;
  margin: auto;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px,6vw,100px);
}

.text-side{
  flex: 1 1 450px;
  min-width: 280px;
}

.orbit-wrapper{
  flex: 1 1 450px;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 280px;
}

.main-heading{
  font-size: clamp(2.5rem,7vw,5rem);
  line-height: 1;
}

.desc-text{
  font-size: clamp(1rem,2vw,1.1rem);
  line-height: 1.8;
  margin-top: 24px;
  color: #666;
  max-width: 600px;
}

.orbit{
  position: relative;

  width: min(90vw, 500px);
  height: min(90vw, 500px);

  border-radius: 50%;
}

.icon{
  position: absolute;

  top: 50%;
  left: 50%;

  width: clamp(55px,8vw,90px);
  height: clamp(55px,8vw,90px);

  margin: calc(clamp(55px,8vw,90px) / -2);

  transform:
    rotate(calc(360deg / 7 * var(--i)))
    translateY(calc(min(90vw, 500px) / -2.5))
    rotate(calc(-360deg / 7 * var(--i)));
}

.icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;

  border-radius: 50%;
  background: white;
  padding: 10px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.campfire-btn{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

span.text-\[\#50c878\].font-bold.tracking-\[0\.2em\].uppercase.text-xs.mb-4.block {
    width: 56%;
}

a.w-full.py-4.rounded-lg.accent-gradient.text-on-primary.font-label-md.font-bold.shadow-lg.shadow-primary\/20 {
    background: #ff862f;
    align-items: center;
    display: flex;
    justify-content: center;
    align-content: center;
}

.campfire-btn, button.group.relative.inline-flex {
    width: 80% !important;
}

.campfire-btn, .group.relative.inline-flex, .custom-demo-btn, .custom-btn {
    width: 80% !important;
}

.campfire-btn, .group.relative.inline-flex, .custom-demo-btn, .custom-btn
Specificity: (0,3,0)
 {
    width: 100% !important;
}

.ts-section {
    padding: 40px 20px;
  }
 
  /* Header */
  .ts-header {
    text-align: center;
    margin-bottom: 28px;
  }
 
  /* Main card: vertical stack */
  .ts-card {
    flex-direction: column !important;
    grid-template-columns: unset !important;
    display: flex !important;
  }
 
  /* Thumbnail — full width, fixed height */
  .ts-thumb {
    width: 100% !important;
    height: 220px !important;
    min-height: unset !important;
  }
 
  .ts-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
 
  /* Body */
  .ts-body {
    width: 100% !important;
    padding: 20px !important;
  }
 
  /* Nav row */
  .ts-nav {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
  }
 
  .ts-counter {
    width: 100%;
    text-align: center;
  }
 
  /* Mini cards row → vertical stack */
  .ts-mini-row {
    flex-direction: column !important;
    grid-template-columns: unset !important;
    display: flex !important;
    gap: 12px !important;
  }
 
  .ts-mini {
    width: 100% !important;
  }

  .ts-carousel {
    width: 100%;
    margin: 0 auto;
}

div#tsMinis {
    width: 100%;
    margin: 30px auto 0 auto;
}

}


/* tablet */


@media (min-width: 768px) and (max-width: 1024px) {

  /* Navbar spacing adjust */
  nav .flex {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Menu gap thora kam */
  nav .md\\:flex {
    gap: 18px;
  }

  /* Logo size stable */
  nav .font-sans {
    font-size: 18px;
  }

  /* Book a call button shrink */
  nav a[href*="contact"] {
    padding-left: 18px;
    padding-right: 6px;
    font-size: 13px;
  }

  /* Button icon thora small */
  nav a[href*="contact"] div {
    width: 36px;
    height: 36px;
  }

 a.hidden.md\:flex.group.bg-\[\#b3ed97\].text-\[\#0B231A\].pl-6.pr-1\.5.py-1\.5.rounded-full.font-bold.text-sm.hover\:scale-105.transition-all.items-center.gap-2\.5 {display: none;}

.campfire-btn::before {
    display: none;
}

span.btn-arrow {
    display: none !important;
}

.custom-demo-btn::before{
    display: none;
}

.custom-demo-btn .btn-icon-wrapper{
    display: none;
}

}