/* GOYA Website Main Stylesheet */
/* Compiled Tailwind + Custom Styles */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Montserrat:wght@200;300;400;500;600;700;800;900&display=swap');

/* Custom Properties */
:root {
  --goya-gold: #D4AF37;
  --goya-gold-dark: #AA8C2C;
  --goya-gold-light: #F7E7CE;
  --goya-black: #050505;
  --goya-charcoal: #0F1115;
  --goya-blue: #1B263B;
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--goya-black);
  color: white;
  overflow-x: hidden;
  width: 100%;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--goya-black);
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--goya-gold);
}

/* Selection Styles */
::selection {
  background: var(--goya-gold);
  color: var(--goya-black);
}

::-moz-selection {
  background: var(--goya-gold);
  color: var(--goya-black);
}

/* Glassmorphism Effect */
.glass {
  background: rgba(15, 17, 21, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Text Effects */
.text-stroke {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
  color: transparent;
}

.shimmer-text {
  background: linear-gradient(90deg, var(--goya-gold), var(--goya-gold-light), var(--goya-gold));
  background-size: 500% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 3s ease-in-out infinite;
}

/* Gradient Border */
.gradient-border {
  position: relative;
  border-radius: 0.75rem;
  padding: 1px;
}

.gradient-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0.75rem;
  padding: 2px;
  background: linear-gradient(45deg, var(--goya-gold), var(--goya-gold-light), var(--goya-gold));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderGlow 2s ease-in-out infinite;
}

/* Hero Slider Responsive Heights */
.hero-slider {
  height: 100vh;
}

@media (max-width: 768px) {
  .hero-slider {
    height: 40vh;
    min-height: 300px;
  }
}

/* Swiper Customization */
.heroSwiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--goya-gold) !important;
  width: 50px !important;
  height: 50px !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 24px !important;
}

.swiper-pagination-bullet {
  background: white !important;
  opacity: 0.5 !important;
}

.swiper-pagination-bullet-active {
  background: var(--goya-gold) !important;
  opacity: 1 !important;
}

/* Testimonials Swiper */
.testimonialsSwiper .swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
}

/* Mobile Menu Animation */
#mobile-menu {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-menu:not(.translate-x-full) {
  transform: translateX(0);
}

/* Chat Widget */
.chat-enter {
  animation: slideInUp 0.3s forwards;
}

/* Countup Animation */
.countup {
  font-variant-numeric: tabular-nums;
}

/* Google Maps Container */
/* #map {
  border-radius: 0.75rem;
} */

/* Loading Animation */
@keyframes load {
  0% { width: 0%; }
  100% { width: 100%; }
}

.animate-\[load_1\.5s_ease-in-out_forwards\] {
  animation: load 1.5s ease-in-out forwards;
}

/* Custom Animations */
@keyframes pulseGlow {
  0%, 100% { 
    opacity: 1; 
    text-shadow: 0 0 10px var(--goya-gold);
  }
  50% { 
    opacity: 0.7; 
    text-shadow: 0 0 2px var(--goya-gold);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes textShimmer {
  0% { background-position: -500% 0; }
  100% { background-position: 500% 0; }
}

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.5); }
  50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.8); }
}

@keyframes slideInUp {
  from { 
    transform: translateY(20px); 
    opacity: 0; 
  }
  to { 
    transform: translateY(0); 
    opacity: 1; 
  }
}

/* Animation Classes */
.animate-pulse-glow {
  animation: pulseGlow 3s infinite;
}

.animate-float {
  animation: float 5s ease-in-out infinite;
}

.animate-text-shimmer {
  animation: textShimmer 3s ease-in-out infinite;
}

.animate-border-glow {
  animation: borderGlow 2s ease-in-out infinite;
}

/* Responsive Typography */
@media (max-width: 768px) {
  .hero-slider h1 {
    font-size: 3rem !important;
    line-height: 1.1 !important;
  }
  
  .hero-slider p {
    font-size: 1rem !important;
  }
}

/* Form Styles */
input, textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--goya-gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1);
}

/* Button Hover Effects */
.btn-primary {
  background: var(--goya-gold);
  color: var(--goya-black);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: white;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);
}

.btn-outline {
  border: 2px solid var(--goya-gold);
  color: var(--goya-gold);
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: var(--goya-gold);
  color: var(--goya-black);
  transform: translateY(-2px);
}

/* Image Hover Effects */
.image-hover-zoom {
  transition: transform 0.5s ease;
}

.image-hover-zoom:hover {
  transform: scale(1.05);
}

/* Stats Counter */
.stat-number {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Navigation Styles */
.nav-scrolled {
  background: rgba(5, 5, 5, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(212, 175, 55, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Mobile Optimization */
@media (max-width: 640px) {
  .container-padding {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .section-padding {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .text-responsive {
    font-size: 0.875rem;
  }
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .glass {
    background: rgba(15, 17, 21, 0.9);
    border: 2px solid white;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus Visible for Accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--goya-gold);
  outline-offset: 2px;
}

/* Custom Utility Classes */
.text-gold { color: var(--goya-gold); }
.bg-gold { background-color: var(--goya-gold); }
.border-gold { border-color: var(--goya-gold); }

.text-gold-dark { color: var(--goya-gold-dark); }
.bg-gold-dark { background-color: var(--goya-gold-dark); }

.text-gold-light { color: var(--goya-gold-light); }
.bg-gold-light { background-color: var(--goya-gold-light); }

.bg-black { background-color: var(--goya-black); }
.bg-charcoal { background-color: var(--goya-charcoal); }
.bg-blue { background-color: var(--goya-blue); }

/* Loading States */
.loading {
  opacity: 0.7;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--goya-gold);
  border-radius: 50%;
  border-right-color: transparent;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}




/* Footer Email Address Fix */
footer .text-gray-400.text-sm {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Specific fix for email addresses in contact info */
footer .flex.items-start .ml-3 .text-gray-400.text-sm {
  word-break: break-all;
  word-wrap: break-word;
  max-width: 100%;
}

/* Newsletter form responsiveness */
footer .flex.flex-col.md\:flex-row {
  align-items: flex-start;
}

footer .w-full.md\:w-64 {
  max-width: 100%;
}

@media (max-width: 768px) {
  footer .flex.flex-col.md\:flex-row {
    flex-direction: column;
    gap: 1rem;
  }
  
  footer .w-full.md\:w-auto {
    width: 100%;
  }
  
  footer input[type="email"] {
    width: 100%;
  }
}




/* ===== MOBILE FIRST MEDIA QUERIES ===== */

/* Extra small devices (phones, 320px and up) */
@media (min-width: 320px) and (max-width: 479px) {
  /* Preloader */
  .loader-screen h1 {
    font-size: 2.5rem !important;
  }
  
  .loader-screen .w-48 {
    width: 200px;
  }
  
  /* Hero Slider */
  .hero-slider {
    height: 45vh;
    min-height: 280px;
  }
  
  .hero-slider h1 {
    visibility: hidden;
    font-size: 2.5rem !important;
    line-height: 0.70 !important;
  }
  
  .hero-slider p {
    visibility: hidden;
    font-size: 0.875rem !important;
    padding: 0 0.70rem;
  }
  
  .hero-slider .px-8.py-3 {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
  }
  
  /* Navigation */
  nav .px-6 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  nav .py-4 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  
  /* Sections */
  .py-24 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .py-20 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  
  .py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Headings */
  .text-4xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }
  
  .text-6xl {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
  }
  
  .text-5xl {
    font-size: 2rem !important;
    line-height: 2.25rem !important;
  }
  
  /* Grid Layouts */
  .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  
  .gap-16 {
    gap: 2rem !important;
  }
  
  .gap-8 {
    gap: 1rem !important;
  }
  
  /* Footer */
  footer .grid-cols-1.md\:grid-cols-4 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  footer .space-y-8 {
    gap: 1.5rem;
  }
  
  footer .text-sm {
    font-size: 0.75rem;
  }
  
  /* Testimonials */
  .testimonialsSwiper .swiper-slide {
    padding: 0 0.5rem;
  }
  
  /* Stats Counter */
  .text-4xl.md\:text-5xl {
    font-size: 1.875rem !important;
  }
  
  .grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* Small devices (phones, 480px to 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  /* Hero Slider */
  .hero-slider {
    height: 40vh;
    min-height: 320px;
  }
  
  .hero-slider h1 {
    font-size: 3.5rem !important;
  }
  
  .hero-slider p {
    font-size: 1rem !important;
  }
  
  /* Navigation */
  nav .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  /* Sections */
  .py-24 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  
  /* Grid Layouts */
  .md\:grid-cols-2 {
    grid-template-columns: 1fr;
  }
  
  .md\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Footer */
  footer .md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* Medium devices (tablets, 768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Hero Slider */
  .hero-slider {
    height: 50vh;
  }
  
  .hero-slider h1 {
    font-size: 5rem !important;
  }
  
  /* Navigation */
  nav .lg\:px-12 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  /* Sections */
  .py-24 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  
  /* Grid Layouts */
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Footer */
  footer .lg\:grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* Large devices (desktops, 1024px to 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* Hero Slider */
  .hero-slider {
    height: 80vh;
  }
  
  /* Container adjustments */
  .max-w-7xl {
    max-width: 90%;
  }
}

/* Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
  .hero-slider {
    height: 100vh;
  }
}

/* ===== SPECIFIC COMPONENT MEDIA QUERIES ===== */

/* Preloader Responsive */
@media (max-width: 767px) {
  .loader-screen h1 {
    font-size: 3rem !important;
  }
  
  .loader-screen .w-48 {
    width: 250px;
  }
}

/* Hero Slider Specific */
@media (max-width: 767px) {
  .heroSwiper .swiper-button-next,
  .heroSwiper .swiper-button-prev {
    display: none !important;
  }
  
  .heroSwiper .swiper-pagination {
    bottom: 20px !important;
  }
}

/* Swiper Responsive Settings */
@media (max-width: 767px) {
  .heroSwiper {
    --swiper-navigation-size: 20px;
  }
  
  .testimonialsSwiper .swiper-pagination {
    bottom: 10px !important;
  }
}

/* Navigation Mobile Optimization */
@media (max-width: 767px) {
  #mobile-menu .text-2xl {
    font-size: 1.5rem;
  }
  
  #mobile-menu .space-y-8 {
    gap: 2rem;
  }
}

/* Footer Specific Fixes */
@media (max-width: 767px) {
  footer .flex.flex-col.md\:flex-row.justify-between {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  
  footer .flex.space-x-6 {
    justify-content: center;
  }
  
  footer .border-t.pt-8 {
    padding-top: 1.5rem;
  }
  
  /* Email address specific fix */
  footer .flex.items-start .ml-3 {
    margin-left: 0.5rem;
  }
  
  footer .text-gray-400.text-sm {
    font-size: 0.7rem;
    line-height: 1.2;
  }
}

/* Contact Section Mobile */
@media (max-width: 767px) {
  #contact .lg\:grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  #contact .h-96 {
    height: 300px;
  }
}

/* Newsletter Form Mobile */
@media (max-width: 767px) {
  #home-newsletter-form .max-w-md {
    max-width: 100%;
  }
  
  #home-newsletter-form .flex-col.sm\:flex-row {
    flex-direction: column;
  }
  
  #home-newsletter-form input[type="email"] {
    width: 100%;
    margin-bottom: 0.75rem;
  }
}

/* Stats Counter Mobile */
@media (max-width: 767px) {
  .countup {
    font-size: 2rem !important;
  }
}

/* Gallery Grid Mobile */
@media (max-width: 767px) {
  .grid.grid-cols-2.md\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
}

/* Testimonials Mobile */
@media (max-width: 767px) {
  .testimonialsSwiper .glass.p-8 {
    padding: 1.5rem;
  }
  
  .testimonialsSwiper .text-lg {
    font-size: 1rem;
  }
}

/* ===== ORIENTATION SPECIFIC ===== */

/* Landscape mode on mobile */
@media (max-width: 767px) and (orientation: landscape) {
  .hero-slider {
    height: 60vh;
    min-height: 250px;
  }
  
  .hero-slider h1 {
    font-size: 2.5rem !important;
  }
  
  #mobile-menu {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* Portrait mode on mobile */
@media (max-width: 767px) and (orientation: portrait) {
  .hero-slider {
    height: 40vh;
  }
}

/* ===== HIGH-DPI SCREENS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-slider {
    background-image: image-set(
      url('assets/images/hero-slide1.jpeg') 2x,
      url('assets/images/hero-slide1.jpeg') 2x
    );
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  .hero-slider,
  #chat-widget,
  #scrollToTop,
  #mobile-menu-btn {
    display: none !important;
  }
  
  body {
    color: black !important;
    background: white !important;
  }
  
  .glass {
    background: white !important;
    border: 1px solid #ccc !important;
  }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  /* Ensure dark mode compatibility */
  body {
    background-color: var(--goya-black);
    color: white;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .hero-slider {
    animation: none !important;
  }
  
  .swiper {
    transition: none !important;
  }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
  /* Improve touch targets */
  button, 
  a, 
  .swiper-button-next, 
  .swiper-button-prev {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Remove hover effects on touch devices */
  .hover\:bg-goya-gold:hover,
  .hover\:text-white:hover,
  .group:hover .group-hover\:bg-goya-gold {
    background-color: initial;
    color: initial;
  }
}




/* Homepage Responsive Fixes - With Animations */
/* Fix for layout shifts while keeping animations */

/* Ensure smooth transition from preloader */
/* body {
    overflow-x: hidden;
    width: 100%;
} */

/* Hero Section Mobile Fix */
.hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-slider .swiper-slide {
    position: relative;
    width: 100%;
}

.hero-slider .relative.z-20 {
    position: relative;
    z-index: 20;
    width: 100%;
    padding: 0 1rem;
}

/* Fix for text overflow in hero */
.hero-slider h1 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Mobile-specific hero fixes */
@media (max-width: 767px) {
    .hero-slider {
        height: 40vh !important;
        min-height: 300px;
    }
    
    .hero-slider h1 {
        font-size: 12vw !important;
        line-height: 1.1;
        margin-bottom: 0.5rem;
    }
    
    .hero-slider .max-w-5xl {
        max-width: 100%;
        padding: 0 1rem;
    }
    
    .hero-slider .mb-12 {
        margin-bottom: 2rem;
    }
    
    .hero-slider .text-\[12vw\] {
        font-size: 12vw;
    }
    
    .hero-slider .md\:text-\[8rem\] {
        font-size: 3rem !important;
    }
}

/* Fix for grid layouts on mobile - Keep animations */
@media (max-width: 767px) {
    .grid {
        gap: 1.5rem;
    }
    
    .grid-cols-1 {
        grid-template-columns: 1fr;
    }
    
    .md\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    .lg\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    /* Specific section padding fixes */
    section {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Fix for absolute positioned elements */
@media (max-width: 767px) {
    .absolute.inset-0 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    .absolute.top-0 {
        top: 0;
    }
    
    .absolute.bottom-0 {
        bottom: 0;
    }
}

/* Fix for glass morphism on mobile */
@media (max-width: 767px) {
    .glass {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    
    .glass.p-8 {
        padding: 1.5rem;
    }
    
    .glass.p-10 {
        padding: 2rem;
    }
}

/* Fix for aspect ratios on mobile */
@media (max-width: 767px) {
    .aspect-video {
        aspect-ratio: 16/9;
    }
    
    .aspect-\[3\/4\] {
        aspect-ratio: 3/4;
    }
}

/* Fix for overflow in sections */
section {
    overflow: hidden;
    position: relative;
}

/* Fix for AOS animations on mobile - KEEP THEM WORKING */
@media (max-width: 767px) {
    [data-aos] {
        /* Ensure animations work but don't cause layout shifts */
        
        backface-visibility: hidden;
        perspective: 1000px;
    }
}

/* Fix for Swiper on mobile */
@media (max-width: 767px) {
    .swiper {
        width: 100%;
        overflow: hidden;
    }
    
    .swiper-wrapper {
        width: 100%;
    }
    
    .swiper-slide {
        width: 100%;
    }
}

/* Fix for background images */
.bg-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Fix for max-width containers */
.max-w-7xl {
    max-width: 100%;
    width: 100%;
}

@media (min-width: 768px) {
    .max-w-7xl {
        max-width: 72rem;
    }
}

/* Fix for padding and margins */
@media (max-width: 767px) {
    .mb-20 {
        margin-bottom: 3rem;
    }
    
    .mb-12 {
        margin-bottom: 2rem;
    }
    
    .mb-8 {
        margin-bottom: 1.5rem;
    }
    
    .mb-6 {
        margin-bottom: 1rem;
    }
    
    .mb-4 {
        margin-bottom: 0.75rem;
    }
}

/* Fix for text sizes on mobile */
@media (max-width: 767px) {
    .text-3xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    
    .text-4xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    
    .text-5xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    
    .text-6xl {
        font-size: 2.5rem;
        line-height: 1;
    }
    
    .text-lg {
        font-size: 1rem;
    }
    
    .text-xl {
        font-size: 1.125rem;
    }
    
    .text-2xl {
        font-size: 1.25rem;
    }
}

/* Fix for buttons on mobile */
@media (max-width: 767px) {
    .px-8 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .py-3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    
    .py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Fix for navigation on mobile */
@media (max-width: 767px) {
    nav.fixed {
        position: fixed;
        width: 100%;
        z-index: 50;
    }
    
    /* Ensure content doesn't hide behind nav */
    section:first-of-type {
        padding-top: 80px;
    }
}

/* Fix for images */
img {
    max-width: 100%;
    height: auto;
}

/* Fix for overflow in text containers */
.text-center,
.text-left,
.text-right {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Fix for specific homepage sections */
@media (max-width: 767px) {
    /* Features section */
    #services .grid-cols-1 {
        gap: 1rem;
    }
    
    /* Testimonials */
    .testimonialsSwiper .swiper-slide {
        padding: 0 0.5rem;
    }
    
    /* Stats counter */
    .grid.grid-cols-2 {
        gap: 0.75rem;
    }
    
    /* Gallery */
    .grid.grid-cols-2 {
        gap: 0.5rem;
    }
}

/* Fix for viewport units on mobile */
@media (max-width: 767px) {
    .min-h-screen {
        min-height: 100vh;
        min-height: 100dvh;
    }
}











/* ===== ABOUT PAGE SPECIFIC STYLES ===== */

/* About Hero Section */
.about-hero {
    /* position: relative; */
    height: 100vh;
    min-height: 500px;
    padding-top: 180px; /* Push content below fixed navigation */
    padding-bottom: 160px;
    /* overflow-hidden */
}

@media (max-width: 767px) {
    .about-hero {
        height: 50vh;
        min-height: 400px;
        padding-top: 360px !important;  /* Ensure content starts below navigation */
    }
    
    .about-hero .relative.z-20 {
        padding-top: 1rem; /* Additional spacing for mobile */
        padding-bottom: 2rem;
    }
    
}

@media (max-width: 480px) {
    .about-hero {
        height: 45vh;
        min-height: 350px;
        padding-top: 80px;
    }
}

/* Timeline Grid Responsive */
@media (max-width: 767px) {
    .about-hero .grid.grid-cols-1.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .about-hero .glass.p-4 {
        padding: 1rem 0.5rem;
    }
    
    .about-hero .text-2xl.md\:text-3xl {
        font-size: 1.5rem;
    }
    
    .about-hero .text-xs {
        font-size: 0.65rem;
    }
}

@media (max-width: 320px) {
    .about-hero .grid.grid-cols-1.md\:grid-cols-4 {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* Our Story Section Mobile Fixes */
@media (max-width: 767px) {
    #our-story .grid.grid-cols-1.lg\:grid-cols-2 {
        gap: 2rem;
    }
    
    #our-story .space-y-6 {
        gap: 1rem;
    }
    
    #our-story .grid.grid-cols-1.sm\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    #our-story .text-3xl {
        font-size: 1.75rem;
    }
}

/* The Visionary Section Mobile Optimization */
@media (max-width: 767px) {
    #the-visionary .flex.flex-col.md\:flex-row {
        flex-direction: column;
    }
    
    #the-visionary .w-full.md\:w-5\/12,
    #the-visionary .w-full.md\:w-7\/12 {
        width: 100%;
    }
    
    #the-visionary .aspect-\[3\/4\] {
        aspect-ratio: 4/3;
        margin-bottom: 2rem;
    }
    
    #the-visionary .space-y-6 {
        gap: 1rem;
    }
    
    #the-visionary .grid.grid-cols-1.sm\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    #the-visionary .text-2xl {
        font-size: 1.5rem;
    }
}

/* Mission & Vision Section Mobile */
@media (max-width: 1023px) {
    #mission-vision .grid.grid-cols-1.lg\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 767px) {
    #mission-vision .glass.p-10 {
        padding: 1.5rem;
    }
    
    #mission-vision .w-20.h-20 {
        width: 3rem;
        height: 3rem;
    }
    
    #mission-vision .text-3xl {
        font-size: 1.75rem;
    }
    
    #mission-vision .text-lg {
        font-size: 1rem;
    }
    
    #mission-vision .text-base {
        font-size: 0.875rem;
    }
    
    #mission-vision .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Our Team Section Mobile Optimization */
@media (max-width: 1023px) {
    #our-team .grid.grid-cols-1.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    #our-team .grid.grid-cols-1.lg\:grid-cols-4 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    #our-team .glass.p-6 {
        padding: 1.5rem 1rem;
    }
    
    #our-team .w-24.h-24 {
        width: 4rem;
        height: 4rem;
    }
    
    #our-team .text-xl {
        font-size: 1.25rem;
    }
}

/* Partner Organizations Grid */
@media (max-width: 767px) {
    #our-team .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    
    #our-team .w-32.h-16 {
        width: 5rem;
        height: 3rem;
    }
    
    #our-team .text-xs {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    #our-team .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Impact Metrics Section Mobile */
@media (max-width: 1023px) {
    #impact-metrics .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 640px) {
    #impact-metrics .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    #impact-metrics .glass.p-8 {
        padding: 1.5rem 1rem;
    }
    
    #impact-metrics .text-4xl.md\:text-5xl {
        font-size: 2.5rem;
    }
    
    #impact-metrics .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Success Stories Mobile */
@media (max-width: 767px) {
    #impact-metrics .glass.p-6 {
        padding: 1.5rem 1rem;
    }
    
    #impact-metrics .w-16.h-16 {
        width: 3rem;
        height: 3rem;
    }
    
    #impact-metrics .text-xl {
        font-size: 1.25rem;
    }
}

/* ===== EXTRA SMALL DEVICE OPTIMIZATIONS ===== */

/* Phones 320px - 375px */
@media (min-width: 320px) and (max-width: 375px) {
    .about-hero h1 {
        font-size: 2.5rem !important;
    }
    
    .about-hero p {
        font-size: 0.875rem !important;
    }
    
    .about-page section .text-4xl.md\:text-6xl {
        font-size: 2rem !important;
    }
    
    .about-page section .text-3xl {
        font-size: 1.5rem !important;
    }
}

/* Phones 376px - 414px */
@media (min-width: 376px) and (max-width: 414px) {
    .about-hero h1 {
        font-size: 3rem !important;
    }
    
    .about-page section .text-4xl.md\:text-6xl {
        font-size: 2.25rem !important;
    }
}

/* Phones 415px - 480px */
@media (min-width: 415px) and (max-width: 480px) {
    .about-hero h1 {
        font-size: 3.5rem !important;
    }
    
    .about-page section .text-4xl.md\:text-6xl {
        font-size: 2.5rem !important;
    }
}

/* ===== TABLET OPTIMIZATIONS ===== */

/* Tablets 768px - 834px */
@media (min-width: 768px) and (max-width: 834px) {
    .about-hero {
        height: 60vh;
    }
    
    .about-hero h1 {
        font-size: 5rem !important;
    }
    
    #the-visionary .flex.flex-col.md\:flex-row {
        flex-direction: column;
    }
    
    #the-visionary .w-full.md\:w-5\/12,
    #the-visionary .w-full.md\:w-7\/12 {
        width: 100%;
    }
}

/* Tablets 835px - 1023px */
@media (min-width: 835px) and (max-width: 1023px) {
    .about-hero {
        height: 65vh;
    }
    
    #the-visionary .aspect-\[3\/4\] {
        aspect-ratio: 4/5;
    }
}

/* ===== LANDSCAPE MODE OPTIMIZATIONS ===== */

@media (max-width: 767px) and (orientation: landscape) {
    .about-hero {
        height: 70vh;
        min-height: 400px;
    }
    
    .about-hero h1 {
        font-size: 3rem !important;
    }
    
    .about-hero .grid.grid-cols-1.md\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .about-page section .py-24 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* ===== HIGH-DPI SCREENS ===== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .about-hero {
        background-image: image-set(
            url('assets/images/about-hero.jpeg') 2x,
            url('assets/images/about-hero.jpeg') 2x
        );
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */

@media (hover: none) and (pointer: coarse) {
    .about-page .glass:hover {
        transform: none;
    }
    
    .about-page .group:hover .group-hover\:bg-goya-gold {
        background-color: initial;
    }
}

/* ===== LOADING OPTIMIZATIONS ===== */

.about-page img {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.about-page img.loaded {
    opacity: 1;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

@media (prefers-reduced-motion: reduce) {
    .about-page [data-aos] {
        transition: none !important;
        animation: none !important;
    }
    
    .about-page .group:hover .group-hover\:grayscale-0 {
        filter: none;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .about-hero {
        height: auto;
        min-height: auto;
    }
    
    .about-hero .absolute.inset-0 {
        display: none;
    }
    
    .glass {
        background: white !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}