@media (max-width: 768px) {

  header {
    padding: 12px 10px !important;
  }

  .logo img {
    height: 45px !important;
  }

  nav ul {
    gap: 8px 12px !important;
  }

  nav a {
    font-size: 0.85rem !important;
  }

  .hero {
    min-height: auto !important;
    padding: 35px 14px !important;
  }

  .hero h1 {
    font-size: 1.85rem !important;
    line-height: 1.1 !important;
  }

  .hero p {
    font-size: 0.85rem !important;
    max-width: 300px !important;
  }

  .buttons {
    flex-direction: row !important;
    gap: 10px !important;
  }

  .btn-primary,
  .btn-secondary {
    padding: 10px 14px !important;
    font-size: 0.82rem !important;
    border-radius: 12px !important;
    width: auto !important;
  }

  .services-preview,
  .portfolio-preview {
    padding: 35px 12px !important;
  }

  .services-preview h2,
  .portfolio-preview h2 {
    font-size: 1.7rem !important;
    margin-bottom: 18px !important;
  }

  .cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }

  .card {
    padding: 12px 8px !important;
    border-radius: 14px !important;
    min-height: 105px !important;
  }

  .card i {
    font-size: 1.5rem !important;
    margin-bottom: 6px !important;
  }

  .card h3 {
    font-size: 0.82rem !important;
    margin-bottom: 5px !important;
  }

  .card p {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }

  .portfolio-card {
    padding: 0 0 10px 0 !important;
    min-height: 145px !important;
  }

  .portfolio-image {
    height: 70px !important;
    font-size: 1.8rem !important;
  }

  .portfolio-image span {
    font-size: 1.8rem !important;
  }

  .portfolio-card h3 {
    padding: 10px 6px 4px !important;
    font-size: 0.8rem !important;
  }

  .portfolio-card p {
    padding: 0 6px !important;
    font-size: 0.68rem !important;
  }

  .text-center {
    margin-top: 22px !important;
  }

  footer {
    padding: 22px 12px !important;
    font-size: 0.75rem !important;
  }
}
@media (max-width: 1024px) {

    header {

        flex-direction: column;

        text-align: center;

        gap: 18px;

    }


    nav ul {

        justify-content: center;

    }


    .services-grid,

    .portfolio-grid,

    .solutions-grid,

    .engagement-grid,

    .cards {

        grid-template-columns: repeat(2, 1fr);

    }


    .contact-section,

    .about-section {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 768px) {

    header {

        padding: 18px 14px;

    }


    .logo-text {

        font-size: 1.5rem;

    }


    nav ul {

        gap: 10px 16px;

    }


    nav a {

        font-size: 0.95rem;

    }


    .hero {

        min-height: auto;

        padding: 70px 18px 55px;

    }


    .hero h1 {

        font-size: 2.35rem;

    }


    .hero p {

        font-size: 0.98rem;

        max-width: 340px;

    }


    .buttons {

        gap: 12px;

    }


    .btn-primary,

    .btn-secondary,

    .btn-service {

        padding: 11px 16px;

        font-size: 0.9rem;

    }


    .page-title {

        padding: 55px 18px 30px;

    }


    .page-title h1 {

        font-size: 2.2rem;

    }


    .page-title p {

        font-size: 1rem;

    }


    .services-preview,

    .portfolio-preview {

        padding: 45px 14px;

    }


    .services-preview h2,

    .portfolio-preview h2,

    .engagement-section h2 {

        font-size: 2rem;

    }


    .cards,

    .services-grid,

    .portfolio-grid,

    .solutions-grid,

    .engagement-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

        padding: 16px 14px 45px;

    }


    .card,

    .service-card,

    .engagement-item {

        padding: 16px 12px;

        border-radius: 14px;

    }


    .card i,

    .service-icon,

    .engagement-item i {

        font-size: 1.55rem;

        margin-bottom: 9px;

    }


    .service-icon {

        padding: 10px;

        border-radius: 12px;

    }


    .card h3,

    .service-card h2,

    .engagement-item h3 {

        font-size: 0.95rem;

        line-height: 1.2;

    }


    .card p,

    .service-card p,

    .engagement-item p {

        font-size: 0.76rem;

        line-height: 1.35;

        margin-bottom: 12px;

    }


    .btn-service {

        font-size: 0.72rem;

        padding: 8px 10px;

        border-radius: 9px;

    }


    .portfolio-image {

        height: 88px;

    }


    .portfolio-image span {

        font-size: 2rem;

    }


    .portfolio-content {

        padding: 14px 10px;

    }


    .portfolio-content h3,

    .portfolio-card h3 {

        font-size: 0.95rem;

    }


    .portfolio-content p,

    .portfolio-card p {

        font-size: 0.76rem;

        line-height: 1.35;

    }


    .contact-section,

    .about-section {

        padding: 20px 14px 45px;

        gap: 20px;

    }


    .contact-item,

    .legal-info,

    .contact-form,

    .about-card,

    .value-item {

        border-radius: 14px;

    }


    .contact-item {

        padding: 16px;

    }


    .legal-info,

    .contact-form {

        padding: 20px;

    }


    .form-group input,

    .form-group select,

    .form-group textarea {

        padding: 11px 12px;

        font-size: 0.9rem;

    }


    footer {

        padding: 24px 16px;

        font-size: 0.78rem;

    }

}


@media (max-width: 430px) {

    .cards,

    .services-grid,

    .portfolio-grid,

    .solutions-grid,

    .engagement-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

    }


    .hero h1 {

        font-size: 2.05rem;

    }


    .logo-text {

        font-size: 1.35rem;

    }


    nav a {

        font-size: 0.88rem;

    }

}