/* ==========================================================================
   InBio Designer - Responsive Breakpoints & Mobile Optimization
   ========================================================================== */

/* --- Extra Large Screens (max-width: 1200px) --- */
@media screen and (max-width: 1200px) {
  .section-title {
    font-size: 3rem;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-typewriter-wrap {
    font-size: 2.7rem;
  }

  .main-menu {
    gap: 18px;
  }

  .main-menu li a {
    font-size: 0.75rem;
  }

  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Large Devices / Laptops & Landscape Tablets (max-width: 991px) --- */
@media screen and (max-width: 991px) {
  .section-padding {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .section-title {
    font-size: 2.5rem;
  }

  .main-menu {
    display: none;
  }

  .hamburger-btn {
    display: inline-flex;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .hero-content {
    padding-right: 0;
    order: 1;
  }

  .hero-image-wrap {
    max-width: 550px;
    margin: 0 auto;
    order: 2;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .timeline-grid,
  .skills-tab-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .testimonial-slide {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .testimonial-client-card {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
  }

  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 550px;
    margin: 0 auto;
    gap: 30px;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

  .modal-wrapper {
    padding: 30px;
  }
}

/* --- Tablets & Phablets (max-width: 767px) --- */
@media screen and (max-width: 767px) {
  .section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .section-title {
    font-size: 2.1rem;
  }

  .hero-section {
    padding-top: 130px;
    padding-bottom: 60px;
  }

  .hero-title {
    font-size: 2.3rem;
  }

  .hero-typewriter-wrap {
    font-size: 2rem;
  }

  .hero-bottom-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .floating-badge {
    padding: 8px 14px;
  }

  .floating-badge.badge-top {
    right: 5px;
    top: 15px;
  }

  .floating-badge.badge-bottom {
    left: 5px;
    bottom: 15px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .resume-nav-tabs {
    flex-direction: column;
    gap: 6px;
  }

  .resume-tab-btn {
    padding: 14px 18px;
    font-size: 0.95rem;
  }

  .timeline-list {
    padding-left: 20px;
  }

  .timeline-card {
    padding: 28px 20px;
  }

  .timeline-card::before {
    left: -29px;
  }

  .timeline-card-header {
    flex-direction: column;
    gap: 12px;
  }

  .quote-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .testimonial-quote-card {
    padding: 30px 22px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-form-card {
    padding: 30px 20px;
  }

  .contact-info-card {
    padding: 25px 18px;
  }

  .modal-wrapper {
    padding: 25px 18px;
  }

  .modal-title {
    font-size: 1.5rem;
  }

  .modal-actions {
    flex-direction: column;
  }

  .back-to-top, .audio-switcher-btn {
    bottom: 20px;
    width: 44px;
    height: 44px;
  }

  .back-to-top {
    right: 20px;
  }

  .audio-switcher-btn {
    left: 20px;
  }
}

/* --- Small Mobile Phones (max-width: 480px) --- */
@media screen and (max-width: 480px) {
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .section-title {
    font-size: 1.8rem;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-typewriter-wrap {
    font-size: 1.7rem;
  }

  .rn-btn {
    padding: 13px 24px;
    font-size: 0.8125rem;
  }

  .clients-grid {
    grid-template-columns: 1fr;
  }

  .filter-btn {
    padding: 9px 18px;
    font-size: 0.8125rem;
  }

  .pricing-tabs {
    flex-direction: column;
    width: 100%;
  }

  .pricing-tab-btn {
    width: 100%;
    text-align: center;
  }

  .header-right .rn-btn {
    display: none;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero-cta-group .rn-btn {
    width: 100%;
    text-align: center;
  }
}