/* Mobile Responsive Font Sizes */
/* This file conta  .services-carousel .feature-list li {
    font-size: 13px !important;
  }
}

/* Extra small mobile font adjustments */
@media (max-width: 480px) {
  .hero-text h2 {
    font-size: 22px !important; /* Slightly smaller for very small screens */
    max-width: 280px !important; /* Match the constrained container */
  }
  
  .hero-text p {
    font-size: 15px !important; /* Slightly smaller for better fit */
    max-width: 285px !important; /* Match the constrained container */
  }
}

/* Mobile-specific font size overrides */
/* Desktop sizes remain unchanged, only mobile gets smaller fonts */

/* Tablet landscape adjustments (769px - 1023px) */
@media (min-width: 769px) and (max-width: 1023px) {
  /* Hero Section - Tablet Font Sizes */
  .hero-text h2 {
    font-size: 28px !important; /* Comfortable size for tablets */
    line-height: 1.3;
    max-width: 450px; /* Adjusted for two-column layout */
    margin: 0 0 16px 0; /* Left-aligned for grid layout */
  }
  
  .hero-text p {
    font-size: 17px !important; /* Good readability on tablets */
    line-height: 1.7;
    max-width: 420px; /* Adjusted for two-column layout */
    margin: 16px 0; /* Left-aligned for grid layout */
  }
  
  /* Services Section - Tablet Font Sizes */
  #services h2 {
    font-size: 32px !important; /* Comfortable heading */
    line-height: 1.3;
    max-width: 600px; /* Limit width */
    margin: 0 auto 1rem auto; /* Center */
  }
  
  #services .text-4xl {
    font-size: 32px !important;
    max-width: 600px;
    margin: 0 auto;
  }
  
  #services .text-xl {
    font-size: 18px !important;
    line-height: 1.7;
    max-width: 450px; /* Consistent with hero text */
    margin: 0 auto; /* Center */
  }
  
  /* Services Carousel Cards - Tablet Font Sizes */
  .services-carousel .card-title {
    font-size: 17px !important;
    line-height: 1.4;
  }
  
  .services-carousel .card-description {
    font-size: 14px !important;
    line-height: 1.6;
  }
  
  .services-carousel .feature-list li {
    font-size: 14px !important;
  }
}

/* Phone font size overrides (affects devices 640px and below) */
@media (max-width: 640px) {
  /* Services Section - Ensure visibility when peeking from hero */
  #services {
    padding: 40px 0 80px 0 !important; /* Increased top padding for peek visibility */
  }
  
  /* Hero Section - Phone Font Sizes */
  .hero-text h2 {
    font-size: 24px !important; /* Reduced from 32px */
    line-height: 1.3;
    max-width: 450px !important; /* Consistent with other sections */
    margin: 0 auto 16px auto !important; /* Center and add spacing */
  }
  
  .hero-text p {
    font-size: 16px !important; /* Reduced from 18px */
    line-height: 1.6;
    max-width: 450px !important; /* Consistent with other sections */
    margin: 16px auto !important; /* Center the paragraph */
  }
  
  /* Services Section - Phone Font Sizes */
  #services h2 {
    font-size: 24px !important; /* Reduced from 28px */
    line-height: 1.3;
  }
  
  #services .text-4xl {
    font-size: 24px !important; /* Reduced from 28px */
  }
  
  #services .text-xl {
    font-size: 16px !important; /* Reduced from 18px */
    max-width: 450px !important; /* Consistent width */
    margin: 0 auto !important;
  }
  
  /* Services Carousel Cards - Mobile Font Sizes */
  .services-carousel .card-title {
    font-size: 16px !important; /* Reduced from 18px */
  }
  
  .services-carousel .card-description {
    font-size: 13px !important; /* Reduced from 14px */
    line-height: 1.5;
  }
  
  .services-carousel .feature-list li {
    font-size: 12px !important; /* Reduced from 14px */
  }
  
  /* === ABOUT SECTION === */
  .about-title {
    font-size: 24px !important;
    text-align: center !important;
  }
  
  .about-subtitle {
    font-size: 14px !important;
    text-align: center !important;
  }
  
  .about-heading {
    font-size: 20px !important;
    text-align: center !important;
  }
  
  .about-box {
    text-align: center !important;
  }
  
  .about-box p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }
  
  .mission-title {
    font-size: 16px !important;
    text-align: center !important;
  }
  
  .mission-text {
    font-size: 13px !important;
    text-align: center !important;
  }

  /* === MOBILE STORY SECTION STYLING === */
  .mobile-story-container {
    text-align: center !important; /* Center align the story content */
  }
  
  .story-preview {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
    color: #6b7280;
    font-style: italic;
  }
  
  .expand-story-link, .collapse-story-link {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    color: #1e3a8a;
    font-weight: 500;
    font-size: 14px !important;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 1rem 0;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
  }
  
  .expand-story-link:hover, .collapse-story-link:hover {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    transform: translateX(3px);
  }
  
  .expand-arrow, .collapse-arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
  }
  
  .expand-story-link:hover .expand-arrow {
    transform: translateX(3px);
  }
  
  .collapse-story-link:hover .collapse-arrow {
    transform: translateX(-3px);
  }
  
  .about-full-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.3s ease-out;
    opacity: 0;
    text-align: center !important; /* Center align expanded content */
  }
  
  .about-full-content.expanded {
    max-height: 1000px;
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.3s ease-in;
  }
  
  .collapse-story-link {
    display: none;
  }
  
  .about-full-content.expanded .collapse-story-link {
    display: inline-flex !important;
  }
  
  /* Hide expand link when content is expanded */
  .mobile-story-container.expanded .expand-story-link,
  .mobile-story-container.expanded .story-preview {
    display: none;
  }
  
  /* === MOBILE TEAM IMAGES SIDE BY SIDE === */
  .about-team {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
    padding: 0 1rem !important;
  }
  
  .team-card {
    flex: 1 !important;
    max-width: 45% !important;
    margin: 0 !important;
    transform: none !important; /* Remove individual scaling */
  }
  
  .team-img {
    width: 100% !important;
    height: 200px !important; /* Smaller height for side-by-side layout */
    object-fit: cover !important;
    border-radius: 12px !important;
  }
  
  .team-info {
    padding: 0.75rem 0.5rem !important;
    text-align: center !important;
  }
  
  .team-name {
    font-size: 13px !important;
    margin-bottom: 0.25rem !important;
  }
  
  .team-role {
    font-size: 11px !important;
  }
  
  /* Testimonials - Mobile Font Sizes */
  #testimonials h2 {
    font-size: 24px !important; /* Reduced from 28px */
  }
  
  .review blockquote {
    font-size: 14px !important;
    line-height: 1.6;
  }
  
  .review p {
    font-size: 13px !important;
  }
  
  /* Contact Popup - Mobile Font Sizes */
  .contact-popup-header h3 {
    font-size: 18px !important; /* Reduced from 20px */
  }
  
  .contact-label {
    font-size: 12px !important; /* Reduced from 14px */
  }
  
  .contact-link,
  .contact-text {
    font-size: 16px !important; /* Reduced from 18px */
  }
  
  /* Button Font Sizes - Mobile */
  .btn {
    font-size: 16px !important; /* Reduced from 18px */
    padding: 10px 24px !important; /* Slightly smaller padding */
  }
  
  /* Footer - Mobile Font Sizes */
  .footer .company-name {
    font-size: 18px !important; /* Reduced from 20px (1.25rem) */
  }
  
  .footer .description {
    font-size: 14px !important;
    line-height: 1.5;
  }
  
  .footer .section-title {
    font-size: 16px !important; /* Reduced from 18px (1.125rem) */
  }
  
  .footer .link-list a {
    font-size: 14px !important;
  }
  
  .footer .copyright {
    font-size: 12px !important; /* Reduced from 14px (0.875rem) */
  }
  
  .footer .bottom-links a {
    font-size: 12px !important; /* Reduced from 14px (0.875rem) */
  }
  
  /* General Text Utility Classes - Mobile Overrides */
  .text-sm {
    font-size: 14px !important; /* Reduced from 16px */
  }
}

/* Extra small mobile devices (480px and below) */
@media (max-width: 480px) {
  /* Even smaller fonts for very small screens */
  .hero-text h2 {
    font-size: 22px !important;
  }
  
  #services h2,
  #services .text-4xl {
    font-size: 22px !important;
  }
  
  .about-title {
    font-size: 22px !important;
  }
  
  .services-carousel .card-title {
    font-size: 15px !important;
  }
  
  .services-carousel .card-description {
    font-size: 12px !important;
  }
  
  .services-carousel .feature-list li {
    font-size: 11px !important;
  }
  
  /* Even smaller team images for very small screens */
  .team-img {
    height: 180px !important;
  }
  
  .about-team {
    gap: 0.5rem !important;
    padding: 0 0.5rem !important;
  }
}