/* Responsive Styles for Stationery Boutique */

/* Small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
  .hero-section {
    min-height: 80vh;
    padding: 2rem 0;
  }
  
  .hero-title {
    font-size: 24px;
  }
  
  .hero-subtitle {
    font-size: 16px;
  }
  
  .navbar-brand {
    font-size: 18px !important;
  }
  
  .service-card,
  .team-card {
    margin-bottom: 1.5rem;
  }
  
  .contact-form {
    padding: 2rem 1rem;
  }
  
  .section-title h2 {
    font-size: 24px;
  }
  
  /* Disable Swiper autoplay and effects on mobile */
  .swiper-container {
    --swiper-autoplay-delay: 0;
  }
  
  .swiper-slide {
    transition: none !important;
  }
}

/* Medium devices (tablets, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .hero-section {
    min-height: 90vh;
  }
  
  .hero-title {
    font-size: 28px;
  }
  
  .hero-subtitle {
    font-size: 17px;
  }
  
  .service-card {
    margin-bottom: 2rem;
  }
  
  .contact-form {
    padding: 2.5rem;
  }
}

/* Large devices (desktops, 768px and up) */
@media (min-width: 768px) {
  .hero-section {
    min-height: 100vh;
  }
  
  .hero-content {
    padding-right: 2rem;
  }
  
  .hero-image {
    padding-left: 2rem;
  }
  
  .service-card {
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .team-card {
    height: 280px;
  }
  
  .gallery-item img {
    height: 300px;
  }
  
  /* Enable Swiper autoplay and effects on desktop */
  .swiper-container {
    --swiper-autoplay-delay: 4000;
  }
}

/* Extra large devices (large desktops, 992px and up) */
@media (min-width: 992px) {
  .hero-title {
    font-size: 36px;
  }
  
  .hero-subtitle {
    font-size: 20px;
  }
  
  .service-card {
    height: 380px;
  }
  
  .team-card {
    height: 320px;
  }
  
  .contact-form {
    padding: 4rem;
  }
  
  .gallery-item img {
    height: 350px;
  }
}

/* Extra extra large devices (larger desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container-xl {
    max-width: 1200px;
  }
  
  .hero-section {
    padding: 0 2rem;
  }
  
  .service-card {
    height: 400px;
  }
  
  .team-card {
    height: 340px;
  }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
  .hero-section {
    min-height: 100vh;
    padding: 1rem 0;
  }
  
  .hero-title {
    margin-bottom: 1rem;
  }
  
  .hero-subtitle {
    margin-bottom: 0.5rem;
  }
  
  .hero-desc {
    margin-bottom: 1rem;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .hero-section::before {
    background-size: 200% 200%;
  }
}
