/* --- Responsive hero heading --- */
@media (max-width: 767px) {
  .hero-h1 {
    font-size: 38px;
  }
  .hero-stat-row {
    gap: 16px;
  }
  .hs-num {
    font-size: 1.5rem;
  }

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

  .hero-section .container {
    padding-top: 80px;
    padding-bottom: 100px;
  }

  .section-pad {
    padding: 70px 0;
  }
  .hero-section {
    padding-top: 80px;
  }
  .hero-headline {
    font-size: 36px;
  }
  .hero-features {
    gap: 8px;
  }
  .hero-ctas {
    flex-direction: column;
  }
  .about-stat-float {
    display: none;
  }
  .about-visual-wrap {
    padding: 20px;
  }
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .footer-top {
    padding: 50px 0 30px 7px;
  }
  .back-to-top {
    bottom: 20px;
    right: 20px;
  }

  .scroll-line {
    background: linear-gradient(to bottom, rgba(227, 30, 36, 0.8), #000000);
  }

  .hero-scroll-hint {
    color: rgb(255 9 9 / 40%);
    bottom: -19px;
  }

  .stat-item {
    padding: 20px 7px;
  }

  .stat-number {
    font-size: 40px;
  }

  .about-since-badge {
    top: -13px;
    left: -5px;
    padding: 10px 28px 10px 22px;
  }
  .since-year {
    font-size: 22px;
  }

  .contact-form-wrap {
    padding: 25px;
  }

  .pre-logo {
    font-size: 28px !important;
    margin-bottom: 5px !important;
  }

  .pre-bar {
    width: 250px !important;
  }

  .resp-mt {
    margin-top: 30px;
  }
  .btn-primary-red {
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: #fbfbfd;
  }

  .navbar-nav .nav-link {
    color: #edeff4 !important;
  }
  #mainNav.scrolled .navbar-nav .nav-link {
    color: #fff !important;
  }

  .hero-badge {
    font-size: 10px !important ;
  }

  .hero-chips span {
    width: 48%;
  }

  .about-hero {
    min-height: 191vh !important;

    /* overflow: hidden; */
    padding-top: 50px !important;
  }

  .web-devlep {
    min-height: 170vh !important;
    padding-top: 50px !important;
  }
  .web-desgin {
    padding-top: 115px !important;
  }
  .portfolio-respo {
    min-height: 171vh !important;
    padding-top: 104px !important;
  }

  /* .mobile-app-resp{
 padding: 40px 0;
} */
  .mobile-app-resp-2,
  .video-resp {
    min-height: 179vh !important;
    /* overflow: hidden; */
    padding-top: 64px !important;
  }

  .video-resp {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .seo-resp {
    padding-top: 28px !important;
    min-height: 190vh;
    padding-bottom: 16px;
  }

  .web-devel,
  .social-media-resp {
    padding: 20px 0 !important;
  }
  .about-service,
  .benefits-section {
    padding-top: 30px !important;
  }

  .ecomm-develp {
    padding-bottom: 30px !important;
  }

  .content-resp {
    padding-top: 26px;
    padding-bottom: 100px;
  }

  .blog-padd {
    padding: 1rem !important;
  }

  .feature-img {
    min-height: 231px !important;
  }

  .feature-artical {
    top: 14px !important;
    left: 14px !important;
  }

  .navbar-nav .nav-link::after {
    position: absolute;
    bottom: 19px;
    left: 84px;
    width: 0;
    height: 2px;
    background: none;
    transition: width 0.3s ease;
  }

  .navbar-nav .nav-link:hover::after {
    width: calc(0% - 28px);
  }

 #mainNav,.scrolled,.navbar-nav, .nav-link {
    color: white !important;
}

  /* .toggler-icon span {
  display: block;
  width: 24px;
  height: 2px;
  background: #131313 !important;
  transition: var(--trans);
  border-radius: 2px;
} */

  .toggler-icon-2 span {
    display: block;
    width: 24px;
    height: 2px;
    background: #0e0e0e !important;
    transition: var(--trans);
    border-radius: 2px;
  }

  .navbar-nav .nav-link {
    color: rgba(253, 252, 252, 0.9) !important;
    /* font-size: 0.85rem; */
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 6px 14px !important;
    position: relative;
    transition: color 0.2s;
  }

  .photoshoot-resp {
    padding-top: 30px !important;
    padding-bottom: 20px !important;
  }

  .product-img {
    height: 204px !important;
  }

  .card-case {
    padding: 20px !important ;
  }

  .blog-webdeve {
    min-height: 102vh !important;
    padding-bottom: 30px !important;
  }

  .blog-span {
    justify-content: center !important;
  }

  .content-blog {
    padding: 45px 0 80px 0 !important;
  }

  .blog-stats-grid {
    display: inline !important;
  }

  .blog-stats-card {
    margin-bottom: 20px;
  }

  .web-desgin-respo {
    min-height: 166vh !important;
  }

  .why-grid,
  .mvc-top,
  .stats-grid {
    display: inline !important;
  }

  .why-item,
  .mvc-icon,
  .stat-card {
    margin-bottom: 20px !important;
  }

  .video-ani-resp {
    min-height: 195vh !important;

    padding-top: 93px !important;
  }

  .seo-resp {
    padding-top: 60px !important;
  }

  .social-media-1, .logo-desg-resp, .domain-host, .digital-bigness-resp{
      padding-top: 98px !important;
  }

  .hero-chips-2{
    width: 100% !important;
  }

  .graphic-des, .ecom-sitew-resp{
    padding-top: 70px !important;
  }

  .grap-padd{
        padding: 18px !important;
  }
}

/* ser4vices box  */
@media (min-width: 992px) {
  .col-custom {
    width: 20%;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .col-custom {
    width: 33.33%;
  }
}

@media (max-width: 767px) {
  .col-custom {
    width: 50%;
  }
}