/* ================================================================
   2. TRUSTED BY SECTION – clients slider, heading alignment
   ================================================================ */

@media (max-width: 991px) {
  .clients.style-5.pt-50 {
    padding-top: 30px !important;
  }
  .clients.style-5 .section-head {
    padding: 0 16px !important;
  }
  .clients.style-5 .section-head h2 {
    font-size: 22px !important;
  }
  .clients.style-5 .section-head p[style*="font-size:20px"] {
    font-size: 14px !important;
  }
  .clients.style-5 .content {
    overflow: hidden !important;
  }
}

@media (max-width: 576px) {
  .clients.style-5 .section-head h2 {
    font-size: 20px !important;
  }
}


/* ================================================================
   3. SERVICES / PLATFORM SECTION (style-1) – card grid & text
   ================================================================ */

@media (max-width: 1024px) {
  .services.style-1 > .container > .row {
    margin-bottom: 10px !important;
  }
  .services.style-1 .section-head h2 {
    font-size: 26px !important;
  }
  /* 2-col on tablet */
  .services.style-1 .content .row .col-lg-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 991px) {
  .services.style-1 {
    padding: 0px 0 !important;
    overflow: hidden !important;
  }
  .services.style-1 .section-head .text[style*="font-size:16px"] {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  /* Remove <br> in text causing extra line */
  .services.style-1 .section-head .text br {
    display: none !important;
  }
  .services.style-1 .section-head {
    margin-bottom: 20px !important;
  }
  /* Decorative shapes */
  .services.style-1 .ser_shap_l,
  .services.style-1 .ser_shap_r {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* 1-col on mobile */
  .services.style-1 .content .row .col-lg-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .service-box {
    padding: 20px !important;
    border: 1px solid #eee !important;
    border-radius: 10px !important;
  }
  .service-box h5 {
    font-size: 16px !important;
  }
  .service-box h5 a {
    font-size: 16px !important;
  }
  .service-box .text {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  
}


/* ================================================================
   4. ABOUT / ROI SECTION (style-1) – the gradient blue box
   ================================================================ */

@media (max-width: 1024px) {
  .about.style-1 .content {
    padding: 40px 40px !important;
  }
}

@media (max-width: 991px) {
  .about.style-1 .content {
    padding: 30px 20px !important;
    border-radius: 8px !important;
  }

  /* "Maximum ROI" header row */
  .about.style-1 .content .about-logos {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
  }
  .about.style-1 .content .about-logos .title small[style*="font-size:25px"] {
    font-size: 16px !important;
    display: block !important;
    margin-bottom: 6px !important;
  }
  .about.style-1 .content .about-logos .title h3[style*="font-size:35px"] {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  /* Laptop image + text row */
  .about.style-1 .content .about-info {
    padding: 5px 0 !important;
  }
  .about.style-1 .content .about-info .col-lg-6:first-child {
    margin-bottom: 20px !important;
    text-align: center !important;
  }
  .about.style-1 .content .about-info img[src*="laptop"] {
    max-width: 90% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* ROI description text */
  .about.style-1 .content .about-info .info h6 {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 12px !important;
  }
  .about.style-1 .content .about-info .info h4[style*="color:#fff"] {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
  .about.style-1 .content .about-info .info p {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }
  }
/* ================================================================
   6. PLUG & PLAY AI SECTION (about.style-7)
   ================================================================ */

@media (max-width: 1024px) {
  .about.style-7 .img {
    padding-left: 30px !important;
  }
}

@media (max-width: 991px) {
  .about.style-7 {
    padding: 10px 0 !important;
  }
  /* Stack columns */
  .about.style-7 .row .col-lg-6:first-child {
    margin-bottom: 25px !important;
  }
  .about.style-7 .img {
    padding-left: 0 !important;
    padding-top: 0 !important;
  }
  .about.style-7 .img .main-img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
  }
  /* Hide decorative chart/circle */
  .about.style-7 .img .img-chart,
  .about.style-7 .img .circle {
    display: none !important;
  }

  /* Section heading */
  .about.style-7 .info .section-head.style-4 h5[style*="font-size:20px"] {
    font-size: 13px !important;
  }
  .about.style-7 .info .section-head.style-4 h2[style*="font-size:35px"] {
    font-size: 22px !important;
    padding-bottom: 12px !important;
  }
  .about.style-7 .info .text.mb-30 {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
  }
  /* Feature list items */
  .about.style-7 .info ul li {
    margin-bottom: 14px !important;
  }
  .about.style-7 .info ul li .text {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  .about.style-7 .info ul li .fa-check-circle {
    margin-top: 3px !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 576px) {
  .about.style-7 .info .section-head.style-4 h2[style*="font-size:35px"] {
    font-size: 18px !important;
  }
  .about.style-7 .info ul li .text {
    font-size: 13px !important;
  }
}


/* ================================================================
   7. INDUSTRIES SLIDER SECTION – heading & slider
   ================================================================ */

@media (max-width: 991px) {
  section.clients.style-5.pb-50.pt-50 .section-head {
    padding: 0 16px !important;
  }
  section.clients.style-5.pb-50.pt-50 .section-head h6[style*="color:#0092f8"] {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  section.clients.style-5.pb-50.pt-50 .section-head h2 {
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }
  section.clients.style-5.pb-50.pt-50 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  /* Industry slider text inside slides */
  .clients-slider5 .swiper-slide .img h6 {
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 576px) {
  section.clients.style-5.pb-50.pt-50 .section-head h2 {
    font-size: 18px !important;
  }
}


/* ================================================================
   8. TESTIMONIALS SECTION (style-7)
   ================================================================ */

@media (max-width: 991px) {
  .testimonials.style-7 {
    padding: 30px 0 !important;
    overflow: hidden !important;
  }
  .testimonials.style-7 .section-head h2 {
    font-size: 20px !important;
    margin-bottom: 0px !important;
  }
  .testimonials.style-7 .testi-card {
    padding: 24px 20px !important;
    border-radius: 10px !important;
  }
  .testimonials.style-7 .testi-card .text {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  .testimonials.style-7 .testi-card .author .inf p {
    font-size: 13px !important;
  }
  .testimonials.style-7 .testi-card .author .inf h6 {
    font-size: 14px !important;
  }
}

@media (max-width: 576px) {
  .testimonials.style-7 .section-head h2 {
    font-size: 18px !important;
  }
  .testimonials.style-7 .testi-card {
    padding: 18px 14px !important;
  }
  .testimonials.style-7 .testi-card .text {
    font-size: 13px !important;
  }
}


/* ================================================================
   9. BLOG SECTION (style-8) – main post + side posts
   ================================================================ */

@media (max-width: 1024px) {
  .blog.style-8 {
    overflow: hidden !important;
  }
  .blog.style-8 .content.section-padding {
    padding: 40px 0 !important;
  }
  .blog.style-8 .section-head.style-8 h3 {
    font-size: 22px !important;
  }
}

@media (max-width: 991px) {
  .blog.style-8 .content.section-padding {
    padding: 30px 0 !important;
  }
  .blog.style-8 .section-head.style-8 {
    margin-bottom: 0px !important;
  }
  .blog.style-8 .section-head.style-8 h3 {
    font-size: 20px !important;
  }

  /* Main post (left col) – shrink image */
  .blog.style-8 .main-post .img.img-cover {
    height: 200px !important;
    border-radius: 8px !important;
  }
  .blog.style-8 .main-post .info {
    padding-top: 16px !important;
  }
  .blog.style-8 .main-post .info h4.title[style*="font-size:18px"] {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
  .blog.style-8 .main-post .info .date-author {
    margin-bottom: 8px !important;
  }

  /* Side posts (right col) */
  .blog.style-8 .side-posts .item {
    margin-bottom: 18px !important;
    align-items: flex-start !important;
  }
  .blog.style-8 .side-posts .item .img.img-cover {
    width: 110px !important;
    height: 85px !important;
    border-radius: 8px !important;
    margin-inline-end: 14px !important;
    flex-shrink: 0 !important;
  }
  .blog.style-8 .side-posts .item .info h4.title[style*="font-size:18px"] {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-top: 0 !important;
  }
  .blog.style-8 .side-posts .item .info .date-author {
    margin-bottom: 4px !important;
  }
  .blog.style-8 .side-posts .item .info .date {
    font-size: 11px !important;
  }
}

@media (max-width: 767px) {
  /* Stack both columns full-width */
  .blog.style-8 .blog-content .row .col-lg-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }
  .blog.style-8 .blog-content .row .col-lg-6:last-child {
    margin-bottom: 0 !important;
  }
  /* Side posts: make items stack vertically */
  .blog.style-8 .side-posts .item {
    flex-direction: row !important;
  }
  .blog.style-8 .side-posts .item .img.img-cover {
    width: 90px !important;
    height: 70px !important;
  }
  .blog.style-8 .side-posts .item .info h4.title[style*="font-size:18px"] {
    font-size: 12px !important;
  }
}

@media (max-width: 576px) {
  .blog.style-8 .main-post .img.img-cover {
    height: 170px !important;
  }
}


/* ================================================================
   10. SUCCESS STORIES SECTION (blog.style-6 + blog.style-8 bg-white)
   ================================================================ */

@media (max-width: 1024px) {
  section.blog.style-8.bg-white {
    padding: 0 !important;
  }
  section.blog.style-8.bg-white .section-head.style-6 h2 {
    font-size: 22px !important;
  }
  section.blog.style-8.bg-white .section-head.style-6 h5 {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }
  /* 3-col → 1-col wrapping */
  section.blog.style-8.bg-white .blog.style-6 .content {
    flex-wrap: wrap !important;
    gap: 20px !important;
  }
  section.blog.style-8.bg-white .blog.style-6 .content .blog-card.style-6 {
    width: 100% !important;
  }
}

@media (max-width: 991px) {
  section.blog.style-8.bg-white .content.section-padding {
    padding: 30px 0 !important;
  }

  /* Success stories section */
  section.blog.section-padding.style-6.bg-white {
    padding: 20px 0 !important;
  }
  section.blog.section-padding.style-6.bg-white .section-head h2 {
    font-size: 22px !important;
    margin-bottom: 10px !important;
  }
  section.blog.section-padding.style-6.bg-white .section-head h5 {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }

  /* Card grid – flex-wrap for full width stacking */
  section.blog.section-padding.style-6.bg-white .content {
    flex-direction: column !important;
    
  }
  section.blog.section-padding.style-6.bg-white .blog-card.style-6 {
    width: 100% !important;
    border-bottom: 1px solid #eee !important;
    padding-bottom: 20px !important;
  }
  section.blog.section-padding.style-6.bg-white .blog-card.style-6:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  /* Kill vertical pipe separators */
  section.blog.section-padding.style-6.bg-white .blog-card.style-6.card-center::after,
  section.blog.section-padding.style-6.bg-white .blog-card.style-6.card-center::before {
    display: none !important;
  }
  /* Card image */
  .blog-card.style-6 .img {
    height: 180px !important;
    border-radius: 12px !important;
  }
  /* Card info */
  .blog-card.style-6 .info {
    padding: 16px 0 0 !important;
  }
  .blog-card.style-6 .info .blog-title {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin: 8px 0 !important;
  }
  .blog-card.style-6 .info .text {
    font-size: 13px !important;
  }

  /* View all button */
  section.blog.section-padding.style-6.bg-white .bttns {
    margin-top: 24px !important;
  }
  section.blog.section-padding.style-6.bg-white .bttns .butn {
    font-size: 13px !important;
    padding: 10px 20px !important;
  }
}

@media (max-width: 576px) {
  .blog-card.style-6 .img {
    height: 150px !important;
  }
  .blog-card.style-6 .info .blog-title {
    font-size: 15px !important;
  }
}


/* ================================================================
   11. CTA BANNER – "Ready to Transform" (chat-banner style-9)
   ================================================================ */

@media (max-width: 1024px) {
  .chat-banner.style-9 {
    padding: 50px 0 !important;
  }
  .chat-banner.style-9 h2[style*="font-size:40px"] {
    font-size: 28px !important;
  }
  .chat-banner.style-9 p[style*="font-size:25px"] {
    font-size: 16px !important;
  }
}

@media (max-width: 991px) {
  .chat-banner.style-9 {
    padding: 40px 0 !important;
  }
  .chat-banner.style-9 .content {
    padding: 0 10px !important;
  }
  .chat-banner.style-9 .section-head h2[style*="font-size:40px"] {
    font-size: 22px !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
  }
  .chat-banner.style-9 .section-head p[style*="font-size:25px"] {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 0 !important;
  }
  /* CTA buttons */
  .chat-banner.style-9 .btns.mt-40 {
    margin-top: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .chat-banner.style-9 .btns .butn {
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
  .chat-banner.style-9 .btns .butn.ms-3 {
    margin-left: 0 !important;
  }
}

@media (max-width: 576px) {
  .chat-banner.style-9 {
    padding: 30px 0 !important;
  }
  .chat-banner.style-9 .section-head h2[style*="font-size:40px"] {
    font-size: 18px !important;
  }
  .chat-banner.style-9 .section-head p[style*="font-size:25px"] {
    font-size: 13px !important;
  }
  .chat-banner.style-9 .btns .butn {
    max-width: 100% !important;
  }
}


/* ================================================================
   12. GLOBAL: Remove excessive section gaps on index page
   ================================================================ */

@media (max-width: 991px) {
  /* Tighten vertical rhythm between sections */
  main > section {
    overflow-x: hidden !important;
  }

  /* pt-50 / pb-50 utilities */
  .pt-50 { padding-top: 25px !important; }
  .pb-50 { padding-bottom: 25px !important; }

  /* mb-40 used in section-head */
  .section-head.mb-40,
  .mb-40 { margin-bottom: 20px !important; }
  .mb-30 { margin-bottom: 15px !important; }
  .mb-20 { margin-bottom: 10px !important; }
  .mt-40 { margin-top: 20px !important; }

  /* section-padding overrides */
  .section-padding {
    padding: 50px 0 !important;
  }

  /* Text alignment for centered section heads */
  .section-head.text-center p,
  .section-head.text-center h2,
  .section-head.text-center h6 {
    text-align: center !important;
  }
}

@media (max-width: 576px) {
  .section-padding { padding: 35px 0 !important; }
  .pt-50 { padding-top: 20px !important; }
  .pb-50 { padding-bottom: 20px !important; }
}