/* Responsive Styles for Saraf Constrotech */
@media (max-width: 1024px) {
  .container {
    padding: 0 10px;
  }
  .header-flex, .footer-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .navbar ul {
    gap: 12px;
  }
}
@media (max-width: 900px) {
  .services-grid, .portfolio-grid, .counters-grid {
    gap: 16px;
  }
  .service-card, .portfolio-item, .counter {
    max-width: 100%;
    padding: 16px;
  }
  .premium-portfolio-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .portfolio-item img {
    height: 180px;
  }
}
@media (max-width: 768px) {
  .header-flex, .footer-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .navbar ul {
    display: none;
    flex-direction: column;
    gap: 0;
    background: #E53935;
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    z-index: 99;
    padding: 0;
  }
  .navbar ul.open {
    display: flex;
  }
  .hamburger {
    display: flex;
  }
  .hero-slider, .hero-slider img {
    height: 180px;
  }
  .services-grid, .portfolio-grid {
    grid-template-columns: 1fr 1fr;
  }
  .premium-hero-text {
    padding: 40px 0 30px 0;
    max-width: 100%;
    text-align: center;
  }
  .hero-headline {
    font-size: 1.5rem;
  }
  .hero-subheadline {
    font-size: 1rem;
  }
  .hero-cta {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .why-choose-grid, .process-steps, .testimonial-cards, .home-cta-flex, .counters-grid {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  .why-card, .process-step, .premium-counter, .testimonial-card {
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 18px 8px !important;
  }
  .home-cta-btns {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
}
@media (max-width: 600px) {
  .container {
    padding: 0 4px;
  }
  .logo img, .footer-logo img {
    height: 32px;
  }
  .site-header, .site-footer {
    padding: 8px 0;
  }
  .hero-slider, .hero-slider img {
    height: 100px;
  }
  .services-grid, .portfolio-grid {
    grid-template-columns: 1fr;
  }
  .counters-grid {
    flex-direction: column;
    gap: 8px;
  }
  .testimonial-slide {
    min-width: 180px;
    max-width: 100%;
    padding: 8px 4px;
  }
  .premium-hero {
    min-height: 60vh;
  }
  .premium-header .header-contact-cta {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    margin-top: 8px;
  }
  .header-phone, .header-cta-btn {
    width: 100%;
    justify-content: flex-start;
    font-size: 1rem;
    padding: 8px 10px;
  }
  .home-cta-section {
    padding: 32px 0 24px 0;
  }
  .home-cta-text h2 {
    font-size: 1.2rem;
  }
  .premium-portfolio-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .portfolio-item img {
    height: 120px;
  }
  .portfolio-overlay {
    padding: 14px 8px 10px 8px;
    min-height: 60px;
  }
  .portfolio-title {
    font-size: 1rem;
  }
}