@media (max-width: 768px) {
  .hero-title {
    font-size: 32px;
  }


  .home-section {
    padding: 100px 15px 80px; /* reduce top/bottom padding for mobile */
    background-position: center top; /* ensures main part of image is visible */
    background-size: cover; /* keep it covering the area */
  }

  .hero-subtext {
    font-size: 16px;
    padding: 20px;
  }

  .home-section {
    padding: 120px 20px 80px;
  }
}

@media (max-width: 768px) {
  .navbar {
    height: 60px;
  }

  .logo img {
    height: 30px;
  }

  .cta-zone {
    gap: 10px;
  }
}

@media (max-width: 768px) {

  nav {
    top: 60px;
  }

  nav ul {
    gap: 25px;
    text-align: center;
  }

  nav ul li a {
    font-size: 18px;
  }

}

@media (max-width: 768px) {

  .home-section {
    padding: 120px 15px 80px;
  }

  .hero-title {
    font-size: 32px;
    line-height: 1.3;
  }

  .hero-subtext {
    font-size: 16px;
    padding: 15px 20px;
  }

  .hero-btn {
    font-size: 16px;
    padding: 12px 20px;
  }

}

@media (max-width: 768px) {

  .section {
    padding: 20px 15px;
  }

  .section-card {
    padding: 25px 15px;
  }

}

@media (max-width: 768px) {

  .benefits-grid {
    flex-direction: column;
    align-items: center;
  }

  .benefit-card {
    width: 100%;
    max-width: 320px;
  }

}


@media (max-width: 768px) {

  .features-grid {
    flex-direction: column;
    align-items: center;
  }

  .feature-card {
    width: 100%;
    max-width: 320px;
  }

}

@media (max-width: 768px) {

  .about-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about-card {
    padding: 40px 20px;
  }

}

@media (max-width: 768px) {

  .about-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about-card {
    padding: 40px 20px;
  }

}

@media (max-width: 768px) {

  .slide img {
    height: 250px;
  }

  .slide-caption {
    font-size: 16px;
    padding: 15px;
  }

}

@media (max-width: 768px) {

  .footer-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer {
    padding: 60px 20px 20px;
  }

}

@media (max-width: 768px) {

  .target-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px; /* smaller gap for mobile */
    padding-bottom: 40px;
  }

  .target-card {
    width: 120px; /* your scaled-down size */
    flex: 0 0 auto;
  }

  .target-image-box {
    width: 100%;
    aspect-ratio: 1 / 1.2;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  }

  .target-card h3 {
    font-size: 12px;
    text-align: center;
    margin-top: 6px;
  }

  /* Stagger effect for mobile */
  .card-top {
    transform: translateY(0);
  }
  .card-middle {
    transform: translateY(20px); /* smaller offset for mobile */
  }
  .card-bottom {
    transform: translateY(40px); /* smaller offset for mobile */
  }

}

@media (max-width: 768px) {
  .benefits-grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center; /* center the cards */
    gap: 10px; /* smaller gap for mobile */
  }

  .benefit-card {
    width: 190px; /* scaled-down size for mobile */
    flex: 0 0 auto; /* prevents stretching */
    padding: 15px; /* smaller padding */
  }

  .benefit-image {
    height: 100px; /* smaller image */
  }

  .benefit-content h3 {
    font-size: 14px;
    text-align: center;
  }

  .benefit-content p {
    font-size: 10px;
    text-align: center;
  }
}

@media (max-width: 768px) {
  /* Tools grid: single row wrapping nicely */
  .tools-grid {
    display: flex;
    flex-wrap: wrap;        /* allows cards to wrap to next line */
    justify-content: center; /* center the cards */
    gap: 15px;               /* smaller gap for mobile */
  }

  /* Tools card: scaled down for mobile */
  .tool-box {
    width: 140px;          /* smaller width to fit mobile */
    padding: 15px 10px;    /* reduced padding */
    border-radius: 15px;   /* slightly smaller radius for proportion */
    text-align: center;
  }

  /* Icons inside the tools card */
  .tool-box i {
    font-size: 28px;       /* smaller icons for mobile */
    margin-bottom: 12px;
  }

  /* Text inside the tools card */
  .tool-box h4 {
    font-size: 14px;       /* smaller heading */
    margin-bottom: 6px;
  }

  .tool-box p {
    font-size: 12px;       /* smaller description */
  }
}