/* Responsive styles for zojo1xo-cuvoca.sbs */

/* Extra Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .hero-section h1 {
    font-size: 1.8rem;
  }
  
  .hero-section {
    padding-top: 80px; /* Account for fixed header */
  }
  
  .container-fluid.vh-100 {
    min-height: 100vh;
    height: auto !important;
  }
  
  .social-icons-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .team-member img {
    width: 100px;
    height: 100px;
  }
  
  .service-card .card-img-top {
    height: 160px;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .hero-section h1 {
    font-size: 2rem;
  }
  
  .hero-section {
    padding-top: 80px;
  }
  
  .container-fluid.vh-100 {
    min-height: 100vh;
    height: auto !important;
  }
  
  .team-member img {
    width: 120px;
    height: 120px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-section h1 {
    font-size: 2.2rem;
  }
  
  .container-fluid.vh-100 {
    min-height: 90vh;
  }
  
  .hero-section {
    padding-top: 80px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container-fluid.vh-100 {
    min-height: 100vh;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .hero-section h1 {
    font-size: 3rem;
  }
  
  .container-fluid.vh-100 {
    min-height: 100vh;
  }
}

/* Adjust header for all screen sizes */
@media (max-width: 991.98px) {
  .navbar-brand {
    font-size: 1.2rem;
  }
}

/* Fix for hero image */
@media (max-width: 767.98px) {
  .hero-section .col-lg-6:last-child {
    margin-top: 2rem;
  }
}

/* Fix for service cards on mobile */
@media (max-width: 767.98px) {
  .service-card ul {
    padding-left: 1rem;
  }
}

/* Fix for process steps and timeline items on mobile */
@media (max-width: 575.98px) {
  .process-step, .timeline-item {
    padding: 1rem;
  }
  
  .step-number {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.2rem;
  }
  
  .timeline-year {
    width: 4rem;
  }
}

/* Fix for footer on mobile */
@media (max-width: 767.98px) {
  #footer {
    text-align: center;
  }
  
  #footer .text-end {
    text-align: center !important;
  }
}

/* Fix for contact form on mobile */
@media (max-width: 767.98px) {
  .contact-info {
    margin-top: 2rem;
  }
}

/* Fix for gallery images on mobile */
@media (max-width: 575.98px) {
  #gallery .col-6 {
    padding-left: 5px;
    padding-right: 5px;
  }
}

/* Better spacing for section headings */
@media (max-width: 767.98px) {
  section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  h2 {
    font-size: 1.8rem;
  }
  
  .lead {
    font-size: 1rem;
  }
}

/* Ensure footer text is readable on all screens */
@media (max-width: 575.98px) {
  #footer p {
    font-size: 0.9rem;
  }
  
  #footer h5, #footer h6 {
    font-size: 1rem;
  }
}

/* High contrast mode support */
@media (forced-colors: active) {
  .navbar, .feature-card, .service-card, .pricing-card, .team-member, .review-card, 
  .case-study-card, .process-step, .timeline-item, .career-card, .info-card, .faq-card {
    border: 1px solid;
  }
  
  img {
    forced-color-adjust: none;
  }
}