/* 
 * mobile.css 
 * Mobile-specific optimizations for MICTON Consultancy website
 */

/* 1. GLOBAL MOBILE ADJUSTMENTS */
@media (max-width: 767px) {
    /* Typography adjustments */
    .display-5 {
      font-size: 1.75rem !important;
    }
    
    .display-1 {
      font-size: 2.5rem !important;
    }
    
    h3 {
      font-size: 1.5rem !important;
    }
    
    /* Padding adjustments */
    .px-5 {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }
    
    .py-6 {
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
    }
    
    /* Button adjustments for mobile */
    .btn {
      padding: 0.5rem 1rem !important;
      font-size: 0.9rem !important;
      min-height: 44px; /* Better touch target */
    }
    
    /* Spacing fix */
    .mt-5 {
      margin-top: 2rem !important;
    }

    /* Navbar optimizations */
    .navbar {
      padding: 0.5rem 1rem;
    }

    .navbar-brand img {
      max-height: 60px;
      width: auto;
    }

    .navbar-collapse {
      background: white;
      padding: 1rem;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 1000;
    }

    .navbar-nav {
      padding: 0.5rem 0;
    }

    .nav-item {
      margin: 0.25rem 0;
    }

    .nav-link {
      padding: 0.75rem 1rem !important;
      font-size: 1.1rem;
      display: block;
      width: 100%;
    }

    /* Close button for mobile menu */
    .navbar-toggler {
      border: none;
      padding: 0.5rem;
    }

    .navbar-toggler:focus {
      box-shadow: none;
    }

    .navbar-toggler-icon {
      width: 1.5em;
      height: 1.5em;
    }

    /* Form optimizations */
    .form-control, .form-select {
      font-size: 16px !important; /* Prevents iOS zoom */
      padding: 0.75rem 1rem;
      height: auto;
    }

    /* Image optimizations */
    img {
      max-width: 100%;
      height: auto;
    }

    /* Touch target optimizations */
    a, button, input, select, textarea {
      min-height: 44px;
    }
  }
  
  /* 2. CAROUSEL HEIGHT FIX */
  @media (max-width: 767px) {
    #header-carousel,
    #header-carousel .carousel-item {
      height: 300px;
    }
    
    #header-carousel img {
      height: 300px;
      object-fit: cover;
    }
    
    .carousel-caption {
      padding: 1rem;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
    }

    .carousel-caption h1 {
      font-size: 1.5rem !important;
      margin-bottom: 0.5rem !important;
    }
    
    .carousel-caption h5 {
      font-size: 0.9rem !important;
    }

    .carousel-control-prev,
    .carousel-control-next {
      width: 15%;
    }
  }
  
  /* 3. ABOUT SECTION FIXES */
  @media (max-width: 767px) {
    /* Fix alignment of icon items on mobile */
    .d-flex.text-white {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    
    .d-flex.text-white .ps-4 {
      padding-left: 0 !important;
      margin-top: 1rem;
    }
    
    .d-flex.flex-shrink-0 {
      margin-bottom: 0.5rem !important;
    }

    /* Better spacing for mobile */
    .about-section {
      padding: 2rem 0;
    }

    .about-img {
      margin-bottom: 2rem;
    }
  }
  
  /* 4. SERVICES SECTION FIXES */
  @media (max-width: 767px) {
    .service-item {
      padding: 1.5rem !important;
      margin-bottom: 1rem;
    }
    
    .service-item .rounded-circle {
      width: 70px !important;
      height: 70px !important;
    }
    
    .service-item h3 {
      font-size: 1.25rem !important;
      margin-top: 0.75rem !important;
    }

    .service-item p {
      font-size: 0.9rem;
    }
  }
  
  /* 5. FEATURES SECTION FIXES */
  @media (max-width: 767px) {
    .col-12 h3 {
      font-size: 1.25rem !important;
      margin-top: 0.5rem !important;
    }
    
    .col-12 .rounded-circle {
      width: 50px !important;
      height: 50px !important;
    }
    
    .col-12 .fs-4 {
      font-size: 1rem !important;
    }

    .feature-item {
      margin-bottom: 1.5rem;
    }
  }
  
  /* 6. TEAM SECTION FIXES */
  @media (max-width: 767px) {
    .team-item {
      margin-bottom: 1.5rem;
    }
    
    .team-text h3 {
      font-size: 1.25rem !important;
    }
    
    .team-text p {
      font-size: 0.9rem !important;
      margin-bottom: 0.5rem !important;
    }
    
    .team-text .btn {
      padding: 0.25rem 0.75rem !important;
      font-size: 0.8rem !important;
    }

    .team-social {
      margin-top: 1rem;
    }
  }
  
  /* 7. QUOTE REQUEST SECTION */
  @media (max-width: 767px) {
    /* Adjust the form on mobile */
    .quote-form .form-control,
    .quote-form .form-select,
    .quote-form .form-floating {
      margin-bottom: 1rem !important;
    }
    
    /* Make the button full width on mobile */
    .quote-form .btn {
      width: 100% !important;
      margin-top: 0.5rem !important;
    }

    .quote-form {
      padding: 1.5rem;
    }
  }
  
  /* 8. TESTIMONIAL SECTION FIXES */
  @media (max-width: 767px) {
    .testimonial-item {
      padding: 1rem;
      margin: 0.5rem;
    }
    
    .testimonial-content {
      padding: 1rem !important;
    }
    
    .testimonial-text {
      font-size: 0.9rem;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      max-height: 4.5em;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }

    .testimonial-carousel {
      padding: 0 1rem;
    }
  }
  
  /* 9. FAQ SECTION FIXES */
  @media (max-width: 767px) {
    .accordion-button {
      font-size: 0.9rem !important;
      padding: 0.75rem 1rem !important;
    }
    
    .accordion-body {
      font-size: 0.85rem !important;
      padding: 0.75rem 1rem !important;
    }

    .accordion-item {
      margin-bottom: 0.5rem;
    }
  }
  
  /* 10. NEWSLETTER SECTION FIXES */
  @media (max-width: 767px) {
    .input-group {
      flex-direction: column !important;
    }
    
    .input-group .form-control {
      border-radius: 0.25rem !important;
      margin-bottom: 0.5rem !important;
    }
    
    .input-group .btn {
      border-radius: 0.25rem !important;
      width: 100% !important;
    }

    .input-group .input {
      border-radius: 0.25rem !important;
      width: 100% !important;
    }

    .newsletter-section {
      padding: 2rem 0;
    }
  }

  /* 11. FOOTER OPTIMIZATIONS */
  @media (max-width: 767px) {
    .footer-section {
      padding: 2rem 0;
    }

    .footer-links {
      margin-bottom: 2rem;
    }

    .footer-social {
      margin-top: 1.5rem;
    }

    .footer-newsletter {
      margin-top: 2rem;
    }
  }

  /* 12. PERFORMANCE OPTIMIZATIONS */
  @media (max-width: 767px) {
    /* Disable animations on mobile for better performance */
    .animate__animated {
      animation: none !important;
    }

    /* Optimize image loading */
    img {
      loading: lazy;
    }

    /* Reduce shadow effects on mobile */
    .shadow {
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    }
  }

/* Desktop specific adjustments */
@media (min-width: 768px) {
    /* Add spacing between Team and Quote Request sections */
    .team-section {
        margin-bottom: 4rem !important;
    }

    .quote-request-section {
        margin-top: 4rem !important;
    }
}