/* 
* Responsive Stylesheet
* Company Name - Web & Mobile Development
*/

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .hero-section {
      padding: 60px 0;
      min-height: 450px;
    }
    
    .hero-content h1 {
      font-size: 2rem;
    }
    
    .hero-content p {
      font-size: 1rem;
    }
    
    .btn-lg {
      padding: 0.5rem 1rem;
      font-size: 1rem;
    }
    
    .section-title {
      font-size: 1.75rem;
    }
    
    .page-header {
      padding: 50px 0;
    }
    
    .page-header h1 {
      font-size: 2rem;
    }
    
    .service-detail, 
    .product-detail,
    .about-company,
    .mission-vision,
    .team-section,
    .testimonials-section,
    .contact-section {
      padding: 50px 0;
    }
    
    .portfolio-filter .filter-buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .portfolio-filter .btn {
      margin-bottom: 10px;
    }
    
    .cta-section h2 {
      font-size: 1.5rem;
    }
    
    .cta-section .lead {
      font-size: 1rem;
    }
    
    footer {
      padding: 40px 0 20px;
    }
  }
  
  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) and (max-width: 767.98px) {
    .hero-section {
      padding: 80px 0;
      min-height: 500px;
    }
    
    .hero-content h1 {
      font-size: 2.25rem;
    }
    
    .section-title {
      font-size: 2rem;
    }
    
    .page-header {
      padding: 60px 0;
    }
    
    .service-detail, 
    .product-detail,
    .about-company,
    .mission-vision,
    .team-section,
    .testimonials-section,
    .contact-section {
      padding: 60px 0;
    }
  }
  
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) and (max-width: 991.98px) {
    .hero-section {
      min-height: 550px;
    }
    
    .hero-content h1 {
      font-size: 2.5rem;
    }
    
    .service-card, 
    .product-card,
    .portfolio-item {
      margin-bottom: 30px;
    }
    
    .team-member {
      margin-bottom: 40px;
    }
  }
  
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-section {
      min-height: 600px;
    }
    
    .hero-content h1 {
      font-size: 3rem;
    }
  }
  
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    .container {
      max-width: 1140px;
    }
    
    .hero-section {
      min-height: 650px;
    }
    
    .hero-content h1 {
      font-size: 3.5rem;
    }
  }
  
  /* Custom media queries for specific components */
  
  /* Navbar responsive adjustments */
  @media (max-width: 991.98px) {
    .navbar-collapse {
      background-color: var(--primary-color);
      padding: 15px;
      border-radius: 0 0 var(--border-radius) var(--border-radius);
      margin-top: 10px;
    }
    
    .navbar-nav .nav-link {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .navbar-nav .nav-item:last-child .nav-link {
      border-bottom: none;
    }
  }
  
  /* Portfolio items responsive adjustments */
  @media (max-width: 767.98px) {
    .portfolio-item img {
      height: 180px;
    }
    
    .portfolio-modal .modal-dialog {
      max-width: 95%;
      margin: 20px auto;
    }
  }
  
  /* Service cards responsive adjustments */
  @media (max-width: 767.98px) {
    .service-card {
      margin-bottom: 30px;
    }
    
    .service-icon i {
      font-size: 2.5rem;
    }
  }
  
  /* Team section responsive adjustments */
  @media (max-width: 767.98px) {
    .team-member img {
      width: 150px;
      height: 150px;
    }
  }
  
  /* Contact form responsive adjustments */
  @media (max-width: 767.98px) {
    .contact-form {
      margin-bottom: 40px;
    }
    
    .contact-map {
      height: 300px;
    }
  }
  
  /* Footer responsive adjustments */
  @media (max-width: 767.98px) {
    footer h5 {
      margin-top: 30px;
      margin-bottom: 15px;
    }
    
    footer .col-md-4:first-child h5 {
      margin-top: 0;
    }
  }
  
  /* Print styles */
  @media print {
    header, 
    footer, 
    .cta-section,
    .contact-form,
    .btn {
      display: none !important;
    }
    
    body {
      font-size: 12pt;
      line-height: 1.5;
    }
    
    h1 {
      font-size: 24pt;
    }
    
    h2 {
      font-size: 20pt;
    }
    
    h3 {
      font-size: 16pt;
    }
    
    img {
      max-width: 100% !important;
    }
    
    .container {
      max-width: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }
    
    a:after {
      content: " (" attr(href) ")";
    }
  }
  
/* Project Slider Responsive Enhancements */
@media (max-width: 575.98px) {
  .project-slider .carousel-item img {
    height: 200px;
  }
  
  .project-slider .carousel-control-prev,
  .project-slider .carousel-control-next {
    width: 35px;
    height: 35px;
  }
  
  .project-slider .carousel-control-prev {
    left: 10px;
  }
  
  .project-slider .carousel-control-next {
    right: 10px;
  }
  
  .project-slider .carousel-indicators button {
    width: 8px;
    height: 8px;
  }
  
  .modal-body {
    padding: 1rem;
  }
  
  .project-details h5 {
    font-size: 1.1rem;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .project-slider .carousel-item img {
    height: 220px;
  }
  
  .modal-body {
    padding: 1.5rem;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .project-slider .carousel-item img {
    height: 280px;
  }
}