/* Responsive Styles */
@media (max-width: 768px) {
    .nav-bar .menu {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 60px;
      right: 0;
      background: #ffffff;
      width: 200px;
      padding: 20px;
    }
  
    .nav-bar .menu.active {
      display: flex;
    }
  
    .hamburger-menu {
      display: block;
    }
  
    .banner {
      flex-direction: column;
      text-align: center;
    }
  
    .banner-content,
    .contact-form {
      max-width: 100%;
      margin-bottom: 20px;
    }
  }
  

  /* Responsive Styles for Trusted Badges */
@media (max-width: 768px) {
    .trusted-badges .badges {
      flex-direction: column;
      align-items: center;
      gap: 30px;
    }
  
    .trusted-badges .badge {
      width: 90%;
    }
  }
  

  /* Responsive Styles for About Us */
@media (max-width: 768px) {
    .about-content {
      flex-direction: column;
      text-align: center;
    }
  
    .about-banner {
      margin-bottom: 20px;
    }
  
    .about-text {
      text-align: center;
    }
  }

/* Responsive Design */
@media (max-width: 768px) {
  .flip-card {
    max-width: 90%; /* Reduce width for smaller screens */
  }
}

  

  /* Responsive Styles for Services */
@media (max-width: 768px) {
    .services-grid {
      grid-template-columns: 1fr;
    }
  }

  
  /* Responsive Styles for Recent Works */
@media (max-width: 768px) {
    .works-grid {
      grid-template-columns: 1fr;
    }
  }

  
/* Mobile Responsive Design */
@media (max-width: 768px) {
  .container {
      padding: 10px;
  }

/* Responsive Design */
@media (max-width: 600px) {
    .main-title {
        font-size: 22px;
    }
    .sub-title {
        font-size: 14px;
    }
}
  .toggle-buttons {
      flex-direction: row;
      gap: 5px;
  }

  .toggle {
      padding: 8px 15px;
      font-size: 0.9rem;
  }

  .plans-grid {
      grid-template-columns: 1fr;
      margin-left: 20px;
      margin-right: 20px;
  }

  .plan-item {
      padding: 15px;
  }

  .plan-title {
      font-size: 1.3rem;
  }

  .price {
      font-size: 1.5rem;
  }

  .choose-plan {
      padding: 8px 15px;
      font-size: 0.9rem;
  }
}

  
/* Responsive Styles for Team Members */
@media (max-width: 768px) {
  .team-card {
    width: 90%;
  }
}

/* Responsive Styles for Brand Logos */
@media (max-width: 768px) {
  .logo-item img {
    width: 80px;
  }
}