/* ====== responsive.css ====== */

@media (max-width: 1199px) {
  .hero-title { font-size: 44px; }
  .section-title { font-size: 36px; }
  .timeline-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .site-header.scrolled {
    top: 0;
    width: 100%;
    border-radius: 0;
    margin: 0;
    box-shadow: var(--nav-shadow);
  }
  .navbar-brand img, .nav-logo {
    height: 44px;
  }
  #banner {
    padding-top: 140px;
    height: auto;
    min-height: auto;
  }
  #banner .content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }
  #banner header {
    text-align: center;
    order: 1;
  }
  #banner .image.hero-image-wrapper {
    order: 2;
    margin: 30px auto 0;
    max-width: 320px;
    height: 420px;
  }
  .hero-title { font-size: 36px; }
  .hero-desc { margin: 0 auto 35px; }
  .hero-actions { justify-content: center; }
  .about-section::before { display: none; }
  .about-img-wrap { margin-bottom: 40px; }
  .section-title { font-size: 32px; }

  .navbar-collapse {
    background: linear-gradient(135deg, rgba(13,59,92,0.98), rgba(8,31,51,0.98));
    backdrop-filter: blur(20px);
    padding: 20px;
    border-radius: var(--radius-lg);
    margin-top: 12px;
    border: 1px solid rgba(var(--primary-light-rgb), 0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  }

  .navbar-actions {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
  }
  .navbar-actions .theme-toggle,
  .navbar-actions .navbar-cart-btn {
    flex: 0 0 auto;
  }
  .navbar-actions .header-cta {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  .timeline-grid { grid-template-columns: 1fr; }
  .timeline-card.full-width { max-width: 100%; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .page-header h1 { font-size: 38px; }
  .contact-info-card { margin-bottom: 30px; }
  .footer-bottom-links { justify-content: center; margin-top: 10px; }
  .about-features-grid { grid-template-columns: 1fr; }

  .about-section { padding: 80px 0; }
  .services-section { padding: 80px 0; }
  .portfolio-section { padding: 80px 0; }
  .contact-section { padding: 80px 0; }
  .experience-section { padding: 80px 0; }
}

@media (max-width: 768px) {
  .mouse-follower { display: none; }
  .hero-scroll { display: none; }
  .section-sub { margin-bottom: 30px; }
}

@media (max-width: 767px) {
  .hero-title { font-size: 30px; }
  #banner { min-height: auto; padding: 120px 0 60px; }
  .section-title { font-size: 28px; }
  .counter-item .num { font-size: 38px; }
  .cta-section h2 { font-size: 30px; }
  .cta-phone { font-size: 22px; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .page-header h1 { font-size: 30px; }
  .page-header { padding: 150px 0 60px; }
  .contact-info-card,
  .contact-form-card { padding: 30px; }
  .scrolling-text-section { padding: 50px 0; }
  .scroll-text-item { font-size: 22px; }
  .about-section,
  .services-section,
  .portfolio-section,
  .contact-section { padding: 60px 0; }
  .experience-section { padding: 60px 0; }
  .faq-section { padding: 60px 0; }
  .newsletter-section { padding: 40px 0; }
  .testimonial-card { padding: 25px 20px; }
  .timeline-card { padding: 25px 20px; }
  .service-card { padding: 30px 20px; }
  .spotlight.style2.right .content, 
  .spotlight.style3.left .content,
  .spotlight.style1.bottom .content {
    padding: 40px 24px;
    width: 94%;
  }
  .spotlight h2 {
    font-size: 28px;
  }
}

@media (max-width: 575px) {
  .hero-title { font-size: 26px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; text-align: center; justify-content: center; }
  .section-title { font-size: 24px; }
  .section-badge { font-size: 11px; padding: 5px 14px; }
  .page-header h1 { font-size: 26px; }
  .about-features-grid { gap: 10px; }
  .about-feat-item { font-size: 13px; padding: 10px 14px; }
  .footer-top { padding: 50px 0 25px; }
  .footer-title { font-size: 15px; }
  .footer-links a { font-size: 13px; }
  .footer-contact li { font-size: 13px; }
  .counter-item i { font-size: 30px; }
  .counter-item .num { font-size: 32px; }
  .counter-item .lbl { font-size: 14px; }
  .whatsapp-float { width: 46px; height: 46px; font-size: 22px; bottom: 80px; right: 18px; }
  .scroll-top-btn { width: 42px; height: 42px; font-size: 16px; }
  .floating-ui-badge {
    padding: 8px 14px;
    gap: 8px;
  }
  .floating-ui-badge .badge-icon {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .floating-ui-badge .badge-value {
    font-size: 12px;
  }
  .badge-top-right {
    top: 10px;
    right: 0px;
  }
  .badge-bottom-left {
    bottom: 20px;
    left: 0px;
  }
  .service-card {
    padding: 35px 20px;
  }
}