/* ========================================= */
/* MOBILE RESPONSIVE STYLES - 2024 */
/* ========================================= */

/* Hero section mobile adjustments */
@media (max-width: 768px) {
  /* Remove main padding to eliminate white space */
  main {
    padding-top: 0 !important;
  }
  
  /* Add padding to first section (hero) to account for fixed header */
  section:first-of-type {
    padding-top: 5rem !important;
  }
  
  .hero-new {
    padding-top: 5rem !important; /* Space for fixed header */
  }
  
  /* Hide hero badge on mobile */
  .hero-badge-enhanced {
    display: none !important;
  }
  
  /* Adjust hero content spacing */
  .hero-title-new {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  .hero-subtitle-new {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Hero buttons stack vertically */
  .hero-buttons-new {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .btn-primary-new,
  .btn-secondary-new {
    width: 100% !important;
    justify-content: center !important;
  }
  
  /* Hero form adjustments */
  .hero-form-new {
    margin-top: 2rem !important;
  }
  
  .form-title-new {
    font-size: 1.25rem !important;
  }
  
  /* Hero stats grid */
  .hero-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
  }
  
  .stat-number {
    font-size: 1.5rem !important;
  }
  
  .stat-label {
    font-size: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  /* Remove main padding to eliminate white space */
  main {
    padding-top: 0 !important;
  }
  
  /* Add extra padding to first section for small screens */
  section:first-of-type {
    padding-top: 6rem !important;
  }
  
  .hero-new {
    padding-top: 6rem !important; /* Extra space for header on small screens */
  }
  
  .hero-title-new {
    font-size: 1.75rem !important;
  }
  
  .hero-subtitle-new {
    font-size: 0.9rem !important;
  }
  
  .hero-stats {
    gap: 0.5rem !important;
  }
  
  .stat-number {
    font-size: 1.25rem !important;
  }
}

/* Landscape mode adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-new {
    padding-top: 5rem; /* Consistent spacing in landscape */
  }
}

/* All sections after hero need proper spacing */
.services-new,
.partners-enhanced,
.process-new,
.portfolio-new,
.testimonials-new,
.cta-new,
.faq-section {
  scroll-margin-top: 80px; /* Account for fixed header when scrolling */
}

/* ========================================= */
/* GLOBAL PAGE MOBILE RESPONSIVENESS - 2024 */
/* ========================================= */

/* All Pages - Header and Main Content Spacing */
@media (max-width: 768px) {
  /* Main content padding for all pages - REMOVED to eliminate white space */
  main {
    padding-top: 0 !important;
  }
  
  /* Page-specific content adjustments */
  .pt-16 {
    padding-top: 0 !important;
  }
  
  /* Hero sections on all pages - add top padding to account for fixed header */
  section:first-of-type {
    padding-top: 5rem !important; /* Space for fixed header */
  }
  
  /* Specific hero section adjustments */
  .hero-new {
    padding-top: 5rem !important; /* Space for fixed header */
  }
  
  /* Typography adjustments for all pages */
  h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  h2 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  h3 {
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
  }
  
  h4 {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }
  
  /* Card and container adjustments */
  .service-overview-card,
  .benefit-card,
  .value-card,
  .team-card,
  .stat-card,
  .contact-card,
  .feature-card {
    padding: 1.5rem !important;
    margin-bottom: 1rem;
  }
  
  /* Grid layouts for mobile */
  .grid.md\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  
  .grid.lg\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  
  .grid.lg\\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .grid.lg\\:grid-cols-5 {
    grid-template-columns: 1fr !important;
  }
  
  /* Button adjustments */
  .btn-primary-new,
  .btn-secondary-new,
  .header-cta-button,
  .mobile-header-cta-button {
    width: 100%;
    padding: 1rem !important;
    font-size: 1rem !important;
    text-align: center;
    justify-content: center;
  }
  
  /* Form elements */
  input,
  select,
  textarea,
  button[type="submit"] {
    padding: 0.875rem !important;
    font-size: 1rem !important;
    border-radius: 0.5rem !important;
  }
  
  /* Section padding adjustments */
  .py-20 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .py-16 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  
  /* Text adjustments */
  .text-xl {
    font-size: 1.125rem !important;
  }
  
  .text-lg {
    font-size: 1rem !important;
  }
  
  /* Spacing adjustments */
  .mb-16 {
    margin-bottom: 2rem !important;
  }
  
  .mb-12 {
    margin-bottom: 1.5rem !important;
  }
  
  .mb-8 {
    margin-bottom: 1rem !important;
  }
  
  .gap-8 {
    gap: 1rem !important;
  }
  
  .gap-12 {
    gap: 1.5rem !important;
  }
}

/* Extra Small Mobile Adjustments */
@media (max-width: 480px) {
  /* Remove main padding to eliminate white space */
  main {
    padding-top: 0 !important;
  }
  
  /* Hero sections on small mobile */
  section:first-of-type {
    padding-top: 6rem !important; /* Extra space for fixed header on small screens */
  }
  
  .hero-new {
    padding-top: 6rem !important; /* Extra space for fixed header on small screens */
  }
  
  h1 {
    font-size: 1.75rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  .service-overview-card,
  .benefit-card,
  .value-card,
  .team-card,
  .stat-card,
  .contact-card,
  .feature-card {
    padding: 1.25rem !important;
  }
  
  /* Ensure 2-column grids become single column */
  .grid.lg\\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  
  /* Reduce section padding further */
  .py-20 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* Service-specific mobile styles */
@media (max-width: 768px) {
  /* Service cards */
  .service-icon-overview,
  .benefit-icon,
  .value-icon {
    width: 3rem !important;
    height: 3rem !important;
  }
  
  .service-title-overview,
  .benefit-title,
  .value-title {
    font-size: 1.25rem !important;
  }
  
  .service-description-overview,
  .benefit-description,
  .value-description {
    font-size: 0.875rem !important;
  }
  
  /* Process steps */
  .process-step-overview {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .step-icon-overview {
    width: 3rem !important;
    height: 3rem !important;
    margin: 0 auto 1rem !important;
  }
  
  .step-title-overview {
    font-size: 1.125rem !important;
  }
  
  .step-description-overview {
    font-size: 0.875rem !important;
  }
  
  /* Team cards */
  .team-avatar {
    width: 4rem !important;
    height: 4rem !important;
  }
  
  .team-name {
    font-size: 1.25rem !important;
  }
  
  .team-bio {
    font-size: 0.875rem !important;
  }
  
  /* Stat cards */
  .stat-number {
    font-size: 2rem !important;
  }
  
  .stat-label {
    font-size: 1rem !important;
  }
  
  /* Contact cards */
  .contact-card,
  .feature-card {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .contact-icon,
  .feature-icon {
    margin: 0 auto;
  }
}

/* Mobile Footer Enhancements for All Pages */
@media (max-width: 768px) {
  footer {
    padding: 2rem 0 1rem !important;
  }
  
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center;
  }
  
  footer .py-16 {
    padding: 2rem 0 !important;
  }
  
  footer .social-link,
  footer .w-10 {
    width: 3rem !important;
    height: 3rem !important;
  }
  
  footer .flex.space-x-4 {
    justify-content: center !important;
  }
  
  footer .policy-links,
  footer .flex-wrap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
  }
}

/* ========================================= */
/* PAGE-SPECIFIC MOBILE ENHANCEMENTS - 2024 */
/* ========================================= */

/* Policy Pages (Privacy, Terms, Refund) */
@media (max-width: 768px) {
  /* Policy content styling */
  .policy-content,
  .terms-content,
  .privacy-content {
    padding: 1.5rem !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }
  
  .policy-content h1,
  .policy-content h2,
  .policy-content h3 {
    margin-bottom: 1rem !important;
  }
  
  .policy-content p,
  .policy-content li {
    margin-bottom: 0.75rem !important;
  }
  
  .policy-content ul,
  .policy-content ol {
    padding-left: 1.5rem !important;
    margin-bottom: 1rem !important;
  }
}

/* Contact Page Mobile Enhancements */
@media (max-width: 768px) {
  /* Contact form grid */
  .contact-form .grid.md\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Contact cards stacking */
  .contact-card {
    flex-direction: column !important;
    text-align: center !important;
    padding: 1.25rem !important;
  }
  
  .contact-icon {
    margin: 0 auto 0.75rem !important;
  }
  
  /* WhatsApp section */
  .whatsapp-cta {
    padding: 1rem !important;
  }
  
  /* Office hours */
  .office-hours {
    padding: 1rem !important;
  }
}

/* About Page Mobile Enhancements */
@media (max-width: 768px) {
  /* Team grid */
  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Value cards */
  .value-card {
    padding: 1.5rem !important;
    text-align: center !important;
  }
  
  /* Stats section */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  
  /* Story section */
  .story-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* Services Page Mobile Enhancements */
@media (max-width: 768px) {
  /* Service overview cards */
  .service-overview-card {
    text-align: center !important;
  }
  
  .service-features-overview {
    text-align: left !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }
  
  /* Process steps */
  .process-step-overview {
    padding: 1rem !important;
  }
  
  .step-number-overview {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto 1rem !important;
  }
}

/* Portfolio Page Mobile Enhancements */
@media (max-width: 768px) {
  /* Portfolio filters */
  .portfolio-filters {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }
  
  .filter-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
  
  /* Portfolio grid */
  .portfolio-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Portfolio modal adjustments */
  .portfolio-modal {
    margin: 1rem !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
}

/* Packages Page Mobile Enhancements */
@media (max-width: 768px) {
  /* Package cards */
  .package-card {
    margin-bottom: 2rem !important;
  }
  
  /* Package grid */
  .packages-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Package features */
  .package-features {
    text-align: left !important;
  }
  
  /* Pricing toggle */
  .pricing-toggle {
    margin-bottom: 2rem !important;
  }
}

/* Service Detail Pages Mobile */
@media (max-width: 768px) {
  /* Service hero sections */
  .service-hero {
    padding: 3rem 0 !important;
    text-align: center !important;
  }
  
  /* Service feature cards */
  .service-feature-card {
    padding: 1.25rem !important;
    text-align: center !important;
  }
  
  /* Service process */
  .service-process {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Service pricing */
  .service-pricing {
    text-align: center !important;
    padding: 1.5rem !important;
  }
}

/* Universal Mobile Form Enhancements */
@media (max-width: 768px) {
  /* Form containers */
  .form-container {
    padding: 1.5rem !important;
    margin: 1rem !important;
  }
  
  /* Form fields */
  .form-field {
    margin-bottom: 1rem !important;
  }
  
  /* Form labels */
  label {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
  }
  
  /* Checkbox and radio buttons */
  input[type="checkbox"],
  input[type="radio"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-right: 0.75rem !important;
  }
  
  /* Form success messages */
  .success-message,
  .error-message {
    padding: 1rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.5rem !important;
  }
}

/* Universal Mobile CTA Sections */
@media (max-width: 768px) {
  /* CTA sections */
  .cta-section {
    padding: 3rem 0 !important;
    text-align: center !important;
  }
  
  .cta-title {
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  .cta-subtitle {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .cta-buttons {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: center !important;
  }
  
  .cta-button {
    width: 100% !important;
    max-width: 300px !important;
    padding: 1rem !important;
  }
}

/* Universal Mobile Badge Styles */
@media (max-width: 768px) {
  .section-badge,
  .section-badge-dark {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
    margin-bottom: 1rem !important;
  }
  
  .hero-badge,
  .hero-badge-enhanced {
    display: none !important; /* Hide on mobile as requested */
  }
}

/* ========================================= */
/* DESKTOP HERO LAYOUT REFINEMENTS (2025-09) */
/* Applied after main styles to ensure override precedence */
@media (min-width: 1024px) {
  /* Fluid hero heading sizes */
  .hero-title-new {
    font-size: clamp(32px, 3.2vw, 56px) !important;
    line-height: 1.15 !important;
  }
  .hero-subtitle-new {
    font-size: clamp(16px, 1.2vw, 20px) !important;
    max-width: 44rem;
  }
  /* Keep right column from pushing layout */
  .hero-form-new {
    width: 100%;
    max-width: 520px;
  }
  /* Slightly reduce column gap inside hero */
  .hero-new .lg\:gap-12 {
    gap: 2rem !important;
  }
  /* Reasonable vertical spacing */
  .hero-new {
    padding-top: 6rem;
    padding-bottom: 3rem;
  }
}
@media (min-width: 1440px) {
  .hero-form-new { max-width: 560px; }
}
/* ========================================= */
/* DESKTOP HERO REFINEMENT - narrower form for laptops (2025-09) */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  /* Make right column a bit narrower so columns never touch */
  .hero-form-new { max-width: 480px !important; }
  /* Nudge heading down a notch to increase room */
  .hero-title-new { font-size: clamp(30px, 3vw, 52px) !important; }
}
/* ========================================= */

/* Featured Portfolio Mobile Styles */
@media (max-width: 768px) {
  .featured-project-card {
    margin-bottom: 1.5rem;
  }
  
  .featured-project-card img {
    height: 200px;
  }
  
  .featured-project-card .p-6 {
    padding: 1rem;
  }
  
  .featured-project-card h3 {
    font-size: 1.125rem;
    line-height: 1.5;
  }
  
  .featured-project-card p {
    font-size: 0.875rem;
    line-height: 1.4;
  }
}

/* Logo Portfolio Mobile Styles */
@media (max-width: 768px) {
  .logo-card {
    margin-bottom: 1rem;
  }
  
  .logo-card img {
    height: 80px;
  }
  
  .logo-card .p-6 {
    padding: 0.75rem;
  }
}

@media (max-width: 640px) {
  .logo-card img {
    height: 60px;
  }
  
  .logo-card .p-6 {
    padding: 0.5rem;
  }
}

/* Branding Portfolio Mobile Styles */
@media (max-width: 768px) {
  .branding-card {
    margin-bottom: 1.5rem;
  }
  
  .branding-card img {
    height: 200px;
  }
  
  .branding-card .p-6 {
    padding: 1rem;
  }
  
  .branding-card h3 {
    font-size: 1.125rem;
    line-height: 1.5;
  }
  
  .branding-card p {
    font-size: 0.875rem;
    line-height: 1.4;
  }
}

/* Portfolio Filter Mobile Styles */
@media (max-width: 768px) {
  #portfolio-filters {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
  }
  
  .portfolio-filter-btn-dark {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 640px) {
  #portfolio-filters {
    gap: 0.25rem;
    padding: 0.5rem;
  }
  
  .portfolio-filter-btn-dark {
    font-size: 0.6875rem;
    padding: 0.375rem 0.5rem;
  }
}

/* Portfolio Grid Mobile Styles */
@media (max-width: 768px) {
  .portfolio-item {
    margin-bottom: 1.5rem;
  }
  
  .portfolio-card-dark img {
    height: 200px;
  }
  
  .portfolio-card-dark .p-6 {
    padding: 1rem;
  }
  
  .portfolio-card-dark h3 {
    font-size: 1.125rem;
    line-height: 1.5;
  }
  
  .portfolio-card-dark p {
    font-size: 0.875rem;
    line-height: 1.4;
  }
}

/* Section Badge Mobile Styles */
@media (max-width: 768px) {
  .section-badge {
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
  }
  
  .section-badge svg {
    width: 1rem;
    height: 1rem;
  }
  
  .section-badge span {
    font-size: 0.75rem;
  }
}

/* Section Title Mobile Styles */
@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
  }
}

@media (max-width: 640px) {
  .section-title {
    font-size: 1.75rem;
    line-height: 1.2;
  }
}

/* Section Subtitle Mobile Styles */
@media (max-width: 768px) {
  .section-subtitle {
    font-size: 1rem;
    line-height: 1.5;
  }
}

@media (max-width: 640px) {
  .section-subtitle {
    font-size: 0.875rem;
    line-height: 1.4;
  }
}

/* Button Mobile Styles */
@media (max-width: 768px) {
  .btn-primary-new,
  .btn-secondary-new {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 640px) {
  .btn-primary-new,
  .btn-secondary-new {
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
  }
}

/* CTA Section Mobile Styles */
@media (max-width: 768px) {
  .flex.flex-col.sm\\:flex-row {
    flex-direction: column;
    gap: 1rem;
  }
  
  .flex.flex-col.sm\\:flex-row a {
    width: 100%;
    text-align: center;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }
}

/* Portfolio Load More Button Mobile */
@media (max-width: 768px) {
  #portfolio-load-more {
    padding: 0.75rem 2rem;
    font-size: 0.875rem;
  }
}

/* Sticky Filter Mobile */
@media (max-width: 768px) {
  .sticky.top-16 {
    top: 4rem;
  }
}

/* Grid Responsive Adjustments */
@media (max-width: 1024px) {
  .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
  
  .grid.grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid.grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

/* Hover Effects Mobile Disable */
@media (max-width: 768px) {
  .group:hover .group-hover\\:scale-105,
  .group:hover .group-hover\\:scale-110 {
    transform: none;
  }
  
  .group:hover .group-hover\\:opacity-100 {
    opacity: 0;
  }
}

/* Touch-friendly spacing */
@media (max-width: 768px) {
  .py-16.sm\\:py-20 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .mb-12.lg\\:mb-16 {
    margin-bottom: 2rem;
  }
}

/* Improved mobile typography */
@media (max-width: 768px) {
  .text-3xl.sm\\:text-4xl.lg\\:text-5xl {
    font-size: 2rem;
  }
  
  .text-base.sm\\:text-lg.lg\\:text-xl {
    font-size: 1rem;
  }
}

/* Mobile-specific improvements */
@media (max-width: 640px) {
  .max-w-4xl.mx-auto {
    max-width: 100%;
    padding: 0 1rem;
  }
  
  .px-4.sm\\:px-6.lg\\:px-8 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}