/* --- Responsive Design --- */

/* 1920px */
@media (max-width: 1920px) {
  .logo-img img { width: 220px; }
}

/* 1440px */
@media (max-width: 1440px) {
  .logo-img img { width: 200px; }
}

/* 1366px */
@media (max-width: 1366px) {
  .logo-img img { width: 190px; }
}

/* 1280px */
@media (max-width: 1280px) {
  section {
    padding: 100px 4% 50px;
  }
}

/* 1024px */
@media (max-width: 1024px) {
  .section-title h2 {
    font-size: 34px;
  }
  .logo-img img { width: 170px; }
}

/* 768px (Tablet) */
@media (max-width: 768px) {
  .logo-img img { width: 150px; }
  
  .hamburger {
    display: flex;
  }
  
  .nav-links {
    position: fixed;
    top: 70px;
    right: -100%;
    width: 100%;
    height: calc(100vh - 70px);
    background: var(--bg-primary);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.4s ease-in-out;
    padding: 20px;
  }
  
  .nav-links.active {
    right: 0;
  }
  
  .nav-links li {
    margin: 15px 0;
  }
  
  .header-actions {
    display: none;
  }
  
  /* Mobile Menu specific elements */
  .nav-links .btn-primary {
    display: flex;
    margin-top: 20px;
  }
  
  /* Hamburger Animation */
  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
  }

  /* Grid updates */
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}

/* 480px (Mobile) */
@media (max-width: 480px) {
  .logo-img img { width: 130px; }
}

/* 430px & below (Mobile) */
@media (max-width: 430px) {
  .section-title h2 {
    font-size: 28px;
  }
  
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }
  
  .hero-content h1 {
    font-size: 36px !important;
  }
  
  .btn-primary, .btn-outline {
    width: 100%;
    justify-content: center;
  }
}

/* 390px */
@media (max-width: 390px) {
  .logo-img img { width: 120px; }
}

/* 360px */
@media (max-width: 360px) {
  .logo-img img { width: 110px; }
}