/* MAIN STYLES.CSS - Imports all other CSS files */

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

/* Import our CSS files in order */
@import url('base.css');
@import url('mobile.css');
@import url('desktop.css');

/* FIX HEADER AND FOOTER ISSUES - Replace the balanced positioning with this */

@media screen and (min-width: 769px) {
  /* FIX 1: RESTORE PROPER HEADER LAYOUT */
  body header {
    position: fixed !important;
    top: 25px !important;
    height: 120px !important;
    padding: 30px 0 !important;
    background: #fff !important;
    z-index: 1001 !important;
    overflow: visible !important; /* Allow content to show */
  }
  
  body .fixed-header-wrapper {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: row !important; /* Side by side layout */
    justify-content: space-between !important;
    align-items: flex-end !important; /* Align to bottom */
    height: 100% !important;
    overflow: visible !important;
  }
  
  /* FIX 2: RESTORE LOGO POSITIONING */
  body .logo {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  body .logo-sans {
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em !important;
    color: #333 !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: block !important;
    visibility: visible !important;
  }
  
  body .logo-serif {
    font-size: 3rem !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    margin: -8px 0 0 0 !important;
    color: #333 !important;
    display: block !important;
    visibility: visible !important;
  }
  
  /* FIX 3: RESTORE DESKTOP NAVIGATION */
  body nav {
    order: 2 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    align-items: flex-end !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    position: relative !important;
    left: auto !important;
  }
  
  body nav ul {
    list-style: none !important;
    display: flex !important;
    gap: 2rem !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
  }
  
  body nav li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
  }
  
  body nav a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    color: #555 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
    height: auto !important;
    width: auto !important;
  }
  
  body nav a.active {
    background-color: #222 !important;
    color: #fff !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 4px !important;
  }
  
  body nav a:hover {
    color: #333 !important;
  }
  
  /* FIX 4: HIDE MOBILE MENU ON DESKTOP */
  body .mobile-menu-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* FIX 5: RESTORE PROPER BANNER */
  body .banner,
  body .top-banner {
    position: fixed !important;
    top: 0 !important;
    height: 25px !important;
    z-index: 1002 !important;
    padding: 5px 0 !important;
    font-size: 0.875rem !important;
  }
  
  /* FIX 6: ADJUST BODY PADDING FOR PROPER HEADER */
  body {
    padding-top: 152px !important; /* 25px banner + 120px header + 7px buffer */
  }
  
  /* FIX 7: CONTENT POSITIONING - MORE CONSERVATIVE */
  body .page-content {
    margin-top: 0 !important; /* No negative margin */
    padding-top: 0 !important;
    background: none !important; /* Remove any debug background */
  }
  
  /* FIX 8: GALLERY POSITIONING */
  body .gallery {
    margin-top: 5rem !important; /* Reasonable spacing from header */
  }
  
  /* FIX 9: SECTION SPACING */
  body .section,
  body .portfolio-section,
  body .services-section,
  body .contact-section,
  body .quote-section,
  body .company-section {
    padding: 2rem 0 !important; /* Standard desktop padding */
    margin-top: 16px !important; /* Standard margin */
  }
  
  body .page-content > .section:first-child,
  body .page-content > section:first-child {
    margin-top: 0 !important;
    padding-top: 2rem !important;
  }
  
  /* FIX 10: SECTION TITLES */
  body .section-title {
    margin-top: 2rem !important;
    margin-bottom: 1.5rem !important;
    font-size: 1.25rem !important;
  }
}

/* CONTENT POSITIONING FIX - Add this to the bottom of styles.css */

/* DESKTOP: Raise all content closer to header */
@media screen and (min-width: 769px) {
  /* Reduce body padding to bring content higher */
  body {
    padding-top: 120px !important; /* Reduced from 152px */
  }
  
  /* Bring all page content up significantly */
  .page-content {
    margin-top: -7rem !important; /* Pull content up */
    padding-top: 0 !important;
    padding-bottom: 150px !important;
  }
  
  /* Reduce spacing for all sections */
  .section,
  .portfolio-section,
  .services-section, 
  .contact-section,
  .quote-section,
  .company-section,
  .thank-you-section {
    padding: 0.5rem 0 1.5rem !important; /* Reduced top padding */
    margin-top: 0 !important;
  }
  
  /* First section gets minimal padding */
  .page-content > .section:first-child,
  .page-content > section:first-child {
    padding-top: 0.25rem !important; /* Minimal top padding */
    margin-top: 0 !important;
  }
  
  /* Bring section titles much higher */
  .section-title,
  h1, h2.section-title {
    margin-top: 0.25rem !important; /* Minimal top margin */
    margin-bottom: 1.5rem !important;
    padding-top: 0 !important;
  }
  
  /* Specific page adjustments */
  
  /* HOME PAGE: Bring gallery way up */
  .gallery {
    margin-top: 1rem !important; /* Reduced from 5-6rem */
    margin-bottom: 1rem !important;
  }
  
  /* PORTFOLIO PAGE: Minimal spacing */
  .portfolio-section .section-title {
    margin-top: 0.1rem !important;
    margin-bottom: 1.25rem !important;
  }
  
  .portfolio-grid {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* SERVICES PAGE: Minimal spacing */
  .services-section .section-title {
    margin-top: 0.1rem !important;
    margin-bottom: 1.25rem !important;
  }
  
  .services-grid {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* CONTACT PAGE: Minimal spacing */
  .contact-section {
    padding: 0.25rem 0 1.5rem !important;
  }
  
  .contact-section .section-title {
    margin-top: 0.1rem !important;
    margin-bottom: 1.25rem !important;
  }
  
  .contact-grid {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* QUOTE PAGE: Minimal spacing */
  .quote-section {
    padding: 0.25rem 0 1.5rem !important;
  }
  
  .quote-section .section-title {
    margin-top: 0.1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .quote-section .contact-form {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* COMPANY PAGE: Minimal spacing */
  .company-section {
    padding: 0.25rem 0 1.5rem !important;
  }
  
  .company-section .section-title {
    margin-top: 0.1rem !important;
    margin-bottom: 1.25rem !important;
  }
  
  /* THANK YOU PAGE: Minimal spacing */
  .thank-you-section {
    padding: 0.25rem 0 1.5rem !important;
  }
  
  .thank-you-section .section-title {
    margin-top: 0.1rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Remove any inherited spacing from containers */
  .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Ensure no extra spacing on any first elements */
  .section .container *:first-child,
  .portfolio-section .container *:first-child,
  .services-section .container *:first-child,
  .contact-section .container *:first-child,
  .quote-section .container *:first-child,
  .company-section .container *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* MOBILE: Keep mobile spacing reasonable */
@media screen and (max-width: 768px) {
  .page-content {
    padding-top: 15px !important;
    margin-top: 0 !important;
  }
  
  .section {
    padding: 0.75rem 0 !important;
  }
  
  .page-content > .section:first-child {
    padding-top: 15px !important;
  }

  .top-banner .container {
    font-size: 0.7rem; /* Adjust this until it looks right on your phone */
    line-height: 1.2;   /* Keeps multi-line text from overlapping */
  }
}

/* HOME PAGE ONLY: Lower the gallery images */
@media screen and (min-width: 769px) {
  body[class*="index"] .gallery,
  body:not([class*="portfolio"]):not([class*="services"]):not([class*="contact"]):not([class*="quote"]):not([class*="company"]) .gallery {
    margin-top: 3rem !important; /* Adjust this value as needed */
  }
}

/* BANNER LANGUAGE SWITCHER - Enhanced banner layout with language switcher */
.banner .container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Main banner text (center) */
.banner-main-text {
  flex: 1;
  text-align: center;
  margin: 0;
  padding: 0;
}

.banner-main-text a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block;
}

.banner-main-text a:hover {
  color: #1e90ff;
}

/* Language switcher text (absolute positioned right) */
.banner-language {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 3px !important;
  background: rgba(255,255,255,0.1) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  user-select: none !important;
  z-index: 10 !important;
}

.banner-language:hover {
  background: rgba(255,255,255,0.2) !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: #1e90ff !important;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 768px) {
  .banner .container {
    padding: 0 10px !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  .banner-main-text {
    text-align: center !important;
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 50px 0 0 !important; /* Make room for language switcher */
  }
  
  .banner-main-text a {
    font-size: 0.8rem !important;
    display: inline-block !important;
    color: #fff !important;
    text-decoration: none !important;
  }
  
  .banner-language {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.7rem !important;
    padding: 1px 6px !important;
    min-width: 35px !important;
    text-align: center !important;
    z-index: 100 !important;
  }
}

@media screen and (max-width: 480px) {
  .banner-main-text {
    padding-right: 45px !important;
  }
  
  .banner-main-text a {
    font-size: 0.75rem !important;
  }
  
  .banner-language {
    right: 8px !important;
    font-size: 0.65rem !important;
    padding: 1px 5px !important;
    min-width: 30px !important;
  }
}

/* OVERRIDE any existing banner styles */
.banner.top-banner .container {
  text-align: center !important;
  display: flex !important;
  position: relative !important;
  justify-content: center !important;
  align-items: center !important;
}

.banner.top-banner .banner-language {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* FORCE language switcher to right position */
.banner .container,
.top-banner .container,
.banner.top-banner .container {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* Force main text to center with space for language switcher */
.banner-main-text,
.banner .banner-main-text,
.top-banner .banner-main-text {
  position: relative !important;
  text-align: center !important;
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 50px 0 0 !important;
  z-index: 1 !important;
}

.banner-main-text a,
.banner .banner-main-text a,
.top-banner .banner-main-text a {
  color: #fff !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  font-weight: bold !important;
  display: inline-block !important;
}

/* FORCE language switcher to absolute right position */
.banner-language,
.banner .banner-language,
.top-banner .banner-language {
  position: absolute !important;
  top: 0 !important;
  right: 20px !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 3px !important;
  background: rgba(255,255,255,0.1) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  user-select: none !important;
  z-index: 100 !important;
  height: auto !important;
  width: auto !important;
  min-width: 35px !important;
  text-align: center !important;
}

.banner-language:hover,
.banner .banner-language:hover,
.top-banner .banner-language:hover {
  background: rgba(255,255,255,0.2) !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: #1e90ff !important;
}

/* Mobile specific overrides */
@media screen and (max-width: 768px) {
  .banner .container,
  .top-banner .container,
  .banner.top-banner .container {
    padding: 0 10px !important;
  }
  
  .banner-main-text,
  .banner .banner-main-text,
  .top-banner .banner-main-text {
    padding-right: 45px !important;
  }
  
  .banner-main-text a,
  .banner .banner-main-text a,
  .top-banner .banner-main-text a {
    font-size: 0.8rem !important;
  }
  
  .banner-language,
  .banner .banner-language,
  .top-banner .banner-language {
    right: 10px !important;
    font-size: 0.7rem !important;
    padding: 1px 6px !important;
    min-width: 30px !important;
  }
}

@media screen and (max-width: 480px) {
  .banner-main-text,
  .banner .banner-main-text,
  .top-banner .banner-main-text {
    padding-right: 40px !important;
  }
  
  .banner-main-text a,
  .banner .banner-main-text a,
  .top-banner .banner-main-text a {
    font-size: 0.75rem !important;
  }
  
  .banner-language,
  .banner .banner-language,
  .top-banner .banner-language {
    right: 8px !important;
    font-size: 0.65rem !important;
    padding: 1px 5px !important;
    min-width: 28px !important;
  }
}

/* Mobile menu language switcher styling */
@media screen and (max-width: 768px) {
  .mobile-menu-dropdown .language-switch {
    background: #1e90ff !important;
    color: white !important;
    font-weight: 700 !important;
    margin-top: 10px !important;
    border: 2px solid #fff !important;
    text-transform: none !important;
    font-size: 0.9rem !important;
  }
  
  .mobile-menu-dropdown .language-switch:hover {
    background: #0066cc !important;
    transform: translateY(-1px) !important;
    color: white !important;
  }
  
  .mobile-menu-dropdown .language-switch:active {
    background: #0052a3 !important;
    transform: translateY(0px) !important;
  }
}

/* Banner language switcher hover effects */
.banner-language:hover {
  background: #555 !important;
  color: #1e90ff !important;
}

.banner-language:active {
  background: #222 !important;
  transform: translateY(-50%) scale(0.95) !important;
}


/* DESKTOP-ONLY FOOTER FIX - Restores original positioning */
@media screen and (min-width: 769px) {
  
  /* Desktop footer base */
  footer {
    position: fixed !important;
    bottom: 0 !important;
    padding: 15px 0 !important;
    background-color: #333 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }
  
  .footer-content {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* Back to space-between for proper positioning */
    align-items: flex-start !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    gap: 1rem !important; /* Smaller gap */
  }
  
  /* Left footer section */
  .footer-left {
    flex: 1 !important;
    min-width: 280px !important;
    max-width: 60% !important; /* Limit width to push right section left */
  }
  
  .footer-left .footer-title {
    font-size: 1.1rem !important;
    margin-bottom: 5px !important;
    color: #fff !important;
  }
  
  .footer-left .footer-text,
  .footer-left .footer-copyright,
  .footer-left .footer-contact {
    font-size: 0.75rem !important;
    color: #ccc !important;
    margin: 2px 0 !important;
    line-height: 1.4 !important;
  }
  
  /* Right footer section - position closer to center */
  .footer-right {
    flex: 0 0 auto !important;
    min-width: 180px !important;
    max-width: 220px !important; /* Constrain width to move it left */
    text-align: left !important;
    margin-left: -8rem !important; /* Pull the entire section left */
  }
  
  .footer-right .footer-title {
    text-align: left !important;
    margin-bottom: 10px !important;
    color: #fff !important;
    font-size: 1.1rem !important;
  }
  
  .footer-social-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  /* Center social icons under the title */
  .footer-social {
    display: flex !important;
    justify-content: center !important; /* Center icons under title */
    align-items: center !important;
    gap: 8px !important;
    margin: 5px 0 !important;
    flex-direction: row !important;
    width: 100% !important;
  }
  
  /* Icon styling */
  .footer-social a {
    color: #1e90ff !important;
    font-size: 1.1rem !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }
  
  /* Yelp icon adjustment */
  .footer-social-icon .yelp-icon {
    height: 1.3rem !important;
    width: auto !important;
    position: relative !important;
    top: -2px !important;
  }
  
  /* Hide mobile contact info on desktop */
  .mobile-contact-info {
    display: none !important;
  }
}

/* MOBILE FOOTER FIX - Restore missing text */
@media screen and (max-width: 768px) {
  
  /* Show mobile contact info that was hidden */
  .mobile-contact-info {
    display: block !important;
    visibility: visible !important;
    font-size: 0.7rem !important;
    color: #ccc !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin: 0.15rem 0 0 0 !important;
    padding: 0 8px !important;
  }
  
  /* Ensure footer structure shows mobile info */
  .footer-social-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  .footer-social {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0.15rem 0 !important;
  }
}
  
  /* Left footer section - keep as is */
  .footer-left {
    flex: 1 !important;
    min-width: 280px !important;
  }
  
  .footer-left .footer-title {
    font-size: 1.1rem !important;
    margin-bottom: 5px !important;
    color: #fff !important;
  }
  
  .footer-left .footer-text,
  .footer-left .footer-copyright,
  .footer-left .footer-contact {
    font-size: 0.75rem !important;
    color: #ccc !important;
    margin: 2px 0 !important;
    line-height: 1.4 !important;
  }
  
  /* Right footer section - fix alignment */
  .footer-right {
    flex: 1 !important;
    min-width: 200px !important;
    text-align: right !important; /* Right align the section */
  }
  
  .footer-right .footer-title {
    text-align: right !important; /* "CONNECT WITH US" stays right */
    margin-bottom: 10px !important;
    color: #fff !important;
    font-size: 1.1rem !important;
  }
  
  .footer-social-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; /* Right align wrapper */
  }
  
  /* Center social icons under the title */
  .footer-social {
    display: flex !important;
    justify-content: center !important; /* Center icons under title */
    align-items: center !important;
    gap: 8px !important; /* Tight spacing like "before" image */
    margin: 5px 0 !important;
    flex-direction: row !important;
  }
  
  /* Icon styling */
  .footer-social a {
    color: #1e90ff !important;
    font-size: 1.1rem !important;
    padding: 6px !important; /* Compact padding */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }
  
  /* Yelp icon adjustment */
  .footer-social-icon .yelp-icon {
    height: 1.3rem !important;
    width: auto !important;
    position: relative !important;
    top: -2px !important;
  }
  
  /* Hide mobile contact info on desktop */
  .mobile-contact-info {
    display: none !important;
  }
}

/* AGGRESSIVE FOOTER FIX - Replace previous fix with this */
/* Use maximum specificity to override everything */

/* MOBILE: Force mobile text to show */
@media screen and (max-width: 768px) {
  body footer .footer-content .footer-right .footer-social-wrapper .mobile-contact-info,
  footer .footer-content .footer-right .footer-social-wrapper .mobile-contact-info,
  .footer-content .footer-right .footer-social-wrapper .mobile-contact-info,
  .footer-right .footer-social-wrapper .mobile-contact-info,
  .footer-social-wrapper .mobile-contact-info,
  .mobile-contact-info {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.7rem !important;
    color: #ccc !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin: 0.15rem 0 0 0 !important;
    padding: 0 8px !important;
    background: transparent !important;
    border: none !important;
    position: static !important;
    z-index: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* Mobile footer structure */
  body footer,
  footer {
    padding: 4px 0 !important;
    display: block !important;
    visibility: visible !important;
    background-color: #333 !important;
  }
  
  body footer .footer-content,
  footer .footer-content,
  .footer-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.2rem !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Hide left section on mobile */
  body footer .footer-left,
  footer .footer-left,
  .footer-left {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Show right section on mobile */
  body footer .footer-right,
  footer .footer-right,
  .footer-right {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
  }
  
  /* Hide "CONNECT WITH US" title on mobile */
  body footer .footer-right .footer-title,
  footer .footer-right .footer-title,
  .footer-right .footer-title {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Mobile social icons */
  body footer .footer-social,
  footer .footer-social,
  .footer-social {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0.15rem 0 !important;
  }
  
  body footer .footer-social a,
  footer .footer-social a,
  .footer-social a {
    color: #1e90ff !important;
    font-size: 0.85rem !important;
    padding: 2px !important;
  }
}

/* DESKTOP: Aggressive positioning fix */
@media screen and (min-width: 769px) {
  /* Hide mobile contact info on desktop */
  body footer .mobile-contact-info,
  footer .mobile-contact-info,
  .mobile-contact-info {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Desktop footer base */
  body footer,
  footer {
    position: fixed !important;
    bottom: 0 !important;
    padding: 15px 0 !important;
    background-color: #333 !important;
  }
  
  /* Desktop footer content - use table layout for precise control */
  body footer .footer-content,
  footer .footer-content,
  .footer-content {
    display: table !important;
    width: 100% !important;
    max-width: 800px !important; /* Smaller width brings sections closer */
    margin: 0 auto !important;
    padding: 0 20px !important;
    table-layout: fixed !important;
  }
  
  /* Left section as table cell */
  body footer .footer-left,
  footer .footer-left,
  .footer-left {
    display: table-cell !important;
    visibility: visible !important;
    width: 50% !important;
    vertical-align: top !important;
  }
  
  body footer .footer-left .footer-title,
  footer .footer-left .footer-title,
  .footer-left .footer-title {
    color: #fff !important;
    font-size: 1.1rem !important;
    margin-bottom: 5px !important;
  }
  
  body footer .footer-left .footer-text,
  body footer .footer-left .footer-copyright,
  body footer .footer-left .footer-contact,
  footer .footer-left .footer-text,
  footer .footer-left .footer-copyright,
  footer .footer-left .footer-contact,
  .footer-left .footer-text,
  .footer-left .footer-copyright,
  .footer-left .footer-contact {
    display: block !important;
    visibility: visible !important;
    font-size: 0.75rem !important;
    color: #ccc !important;
    margin: 2px 0 !important;
  }
  
  /* Right section as table cell - positioned closer to center */
  body footer .footer-right,
  footer .footer-right,
  .footer-right {
    display: table-cell !important;
    visibility: visible !important;
    width: 50% !important;
    vertical-align: top !important;
    text-align: left !important;
    padding-left: 2rem !important; /* Move it slightly right from center */
  }
  
  body footer .footer-right .footer-title,
  footer .footer-right .footer-title,
  .footer-right .footer-title {
    display: block !important;
    visibility: visible !important;
    color: #fff !important;
    font-size: 1.1rem !important;
    margin-bottom: 10px !important;
    text-align: left !important;
  }
  
  /* Center social icons under title */
  body footer .footer-social,
  footer .footer-social,
  .footer-social {
    display: flex !important;
    justify-content: center !important; /* Center under the title */
    gap: 8px !important; /* Tight spacing */
    margin: 5px 0 !important;
    width: 100% !important;
  }
  
  body footer .footer-social a,
  footer .footer-social a,
  .footer-social a {
    color: #1e90ff !important;
    font-size: 1.1rem !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* FINAL FOOTER ADJUSTMENTS - Add this to bottom of styles.css */

/* MOBILE: Add missing contact text manually */
@media screen and (max-width: 768px) {
  /* If mobile-contact-info isn't showing, create it with CSS content */
  .footer-social-wrapper::after {
    content: "© 2025 J. Ureno Construction\A Los Angeles, CA, 90065 | (213) 771-2103" !important;
    display: block !important;
    font-size: 0.7rem !important;
    color: #ccc !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin: 0.15rem 0 0 0 !important;
    padding: 0 8px !important;
    white-space: pre-line !important; /* Allows line breaks with \A */
  }
  
  /* Also try to force the original mobile-contact-info to show */
  .mobile-contact-info {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.7rem !important;
    color: #ccc !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin: 0.15rem 0 0 0 !important;
    padding: 0 8px !important;
    position: relative !important;
    z-index: 9999 !important;
  }
}

/* DESKTOP: Fine-tune social icon positioning */
@media screen and (min-width: 769px) {
  /* Move social icons slightly more left to center under title */
  body footer .footer-social,
  footer .footer-social,
  .footer-social {
    display: flex !important;
    justify-content: flex-start !important; /* Changed from center to flex-start */
    gap: 8px !important;
    margin: 5px 0 !important;
    width: 100% !important;
    padding-left: 1.5rem !important; /* Add left padding to center them under title */
  }
  
  /* Alternative: if the above doesn't work, try this approach */
  body footer .footer-right,
  footer .footer-right,
  .footer-right {
    display: table-cell !important;
    visibility: visible !important;
    width: 50% !important;
    vertical-align: top !important;
    text-align: left !important;
    padding-left: 1rem !important; /* Reduced from 2rem to move section slightly left */
  }
}

/* FINAL FOOTER ADJUSTMENTS - Add this to bottom of styles.css */

/* MOBILE: Show contact text (remove duplicate) */
@media screen and (max-width: 768px) {
  /* Remove the CSS-generated content since the original is now showing */
  .footer-social-wrapper::after {
    display: none !important;
    content: none !important;
  }
  
  /* Keep the original mobile-contact-info showing */
  .mobile-contact-info {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.7rem !important;
    color: #ccc !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin: 0.15rem 0 0 0 !important;
    padding: 0 8px !important;
    position: relative !important;
    z-index: 9999 !important;
  }
}

/* DESKTOP: Fine-tune social icon positioning */
@media screen and (min-width: 769px) {
  /* Move social icons slightly more left to center under title */
  body footer .footer-social,
  footer .footer-social,
  .footer-social {
    display: flex !important;
    justify-content: flex-start !important; /* Changed from center to flex-start */
    gap: 8px !important;
    margin: 5px 0 !important;
    width: 100% !important;
    padding-left: 1.5rem !important; /* Add left padding to center them under title */
  }
  
  /* Alternative: if the above doesn't work, try this approach */
  body footer .footer-right,
  footer .footer-right,
  .footer-right {
    display: table-cell !important;
    visibility: visible !important;
    width: 50% !important;
    vertical-align: top !important;
    text-align: left !important;
    padding-left: 1rem !important; /* Reduced from 2rem to move section slightly left */
  }
}

/* FOOTER ALIGNMENT FINAL FIX - Add to bottom of styles.css */

@media screen and (min-width: 769px) {
  /* Fix footer content layout - ensure proper text wrapping */
  body footer .footer-content,
  footer .footer-content,
  .footer-content {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    gap: 4rem !important; /* Reduced gap since text will be properly wrapped */
  }
  
  /* Left section - ensure proper text wrapping */
  body footer .footer-left,
  footer .footer-left,
  .footer-left {
    display: block !important;
    visibility: visible !important;
    flex: 0 0 auto !important;
    width: 350px !important; /* Fixed width to force text wrapping like original */
    min-width: 350px !important;
    max-width: 350px !important;
  }
  
  /* Fix the footer text wrapping */
  body footer .footer-left .footer-text,
  footer .footer-left .footer-text,
  .footer-left .footer-text {
    display: block !important;
    visibility: visible !important;
    font-size: 0.75rem !important;
    color: #ccc !important;
    margin: 2px 0 !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important; /* Allow text to wrap normally */
    width: 100% !important;
  }
  
  /* Right section - position where green line is */
  body footer .footer-right,
  footer .footer-right,
  .footer-right {
    display: block !important;
    visibility: visible !important;
    flex: 0 0 auto !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 2rem !important; /* Position at the green line */
  }
  
  body footer .footer-right .footer-title,
  footer .footer-right .footer-title,
  .footer-right .footer-title {
    text-align: left !important;
    margin-bottom: 10px !important;
    color: #fff !important;
    font-size: 1.1rem !important;
  }
  
  .footer-social-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  /* Center social icons under the "CONNECT WITH US" title */
  body footer .footer-social,
  footer .footer-social,
  .footer-social {
    display: flex !important;
    justify-content: center !important; /* Center under the title */
    gap: 8px !important;
    margin: 5px 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
  }
  
  body footer .footer-social a,
  footer .footer-social a,
  .footer-social a {
    color: #1e90ff !important;
    font-size: 1.1rem !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* SOCIAL ICONS SPACING FIX - Add to bottom of styles.css */

@media screen and (min-width: 769px) {
  /* Bring social icons closer together */
  body footer .footer-social,
  footer .footer-social,
  .footer-social {
    display: flex !important;
    justify-content: center !important;
    gap: 0px !important; /* Reduced from 8px to 4px for tighter spacing */
    margin: 5px 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
  }
  
  /* Reduce padding on individual icons for even tighter spacing */
  body footer .footer-social a,
  footer .footer-social a,
  .footer-social a {
    color: #1e90ff !important;
    font-size: 1.1rem !important;
    padding: 0px !important; /* Reduced from 6px to 4px */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important; /* Ensure no extra margin */
  }
}

/* ULTRA TIGHT SOCIAL ICONS SPACING - Add to bottom of styles.css */

@media screen and (min-width: 769px) {
  /* Super tight social icons with negative margins */
  body footer .footer-social,
  footer .footer-social,
  .footer-social {
    display: flex !important;
    justify-content: center !important;
    gap: 0px !important;
    margin: 5px 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
  }
  
  /* Use negative margins to pull icons even closer */
  body footer .footer-social a,
  footer .footer-social a,
  .footer-social a {
    color: #1e90ff !important;
    font-size: 1.1rem !important;
    padding: 0px !important;
    margin: 0 4px !important; /* Negative margin pulls icons closer */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important; /* Ensure minimum clickable area */
    min-height: 20px !important;
  }
  
  /* Make the icons themselves smaller if needed */
  body footer .footer-social a i,
  footer .footer-social a i,
  .footer-social a i {
    font-size: 1rem !important; /* Slightly smaller icon size */
  }
  
  /* Adjust Yelp icon specifically */
  body footer .footer-social-icon .yelp-icon,
  footer .footer-social-icon .yelp-icon,
  .footer-social-icon .yelp-icon {
    height: 1.1rem !important; /* Slightly smaller to match other icons */
    width: auto !important;
  }
}

/* ALIGN SOCIAL ICONS WITH TEXT ABOVE - Add to very bottom of styles.css */

@media screen and (min-width: 769px) {
  /* Align social icons with the left edge of "CONNECT WITH US" text */
  body footer .footer-social,
  footer .footer-social,
  .footer-social {
    display: flex !important;
    justify-content: flex-start !important; /* Left align instead of center */
    gap: 4px !important; /* Comfortable spacing between icons */
    margin: -7px 0 !important;
    width: 100% !important;
    padding-left: 0 !important; /* Remove any left padding */
  }
  
  /* Social icon styling with proper spacing */
  body footer .footer-social a,
  footer .footer-social a,
  .footer-social a {
    color: #1e90ff !important;
    font-size: 1.1rem !important;
    padding: 4px !important; /* Small padding for comfortable spacing */
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }
  
  /* Ensure the social wrapper doesn't add extra alignment */
  body footer .footer-social-wrapper,
  footer .footer-social-wrapper,
  .footer-social-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Left align the wrapper */
  }
}

/* MOVE CONNECT WITH US SECTION TO RED BOX - Add to very bottom of styles.css */

@media screen and (min-width: 769px) {
  /* Move the entire right section to align with red box left edge */
  body footer .footer-right,
  footer .footer-right,
  .footer-right {
    display: block !important;
    visibility: visible !important;
    flex: 0 0 auto !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 8rem !important; /* Increased from 2rem to move right section toward red box */
  }
  
  /* Keep the title and social icons aligned as they are */
  body footer .footer-right .footer-title,
  footer .footer-right .footer-title,
  .footer-right .footer-title {
    text-align: left !important;
    margin-bottom: 10px !important;
    color: #fff !important;
    font-size: 1.1rem !important;
  }
  
  /* Keep social icons aligned with text (no changes to alignment) */
  body footer .footer-social,
  footer .footer-social,
  .footer-social {
    display: flex !important;
    justify-content: flex-start !important; /* Keep left aligned */
    gap: 4px !important;
    margin: -7px 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
  }
  
  /* Keep social icon spacing as is */
  body footer .footer-social a,
  footer .footer-social a,
  .footer-social a {
    color: #1e90ff !important;
    font-size: 1.1rem !important;
    padding: 4px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }
}

/* FIX SPANISH FOOTER TEXT WRAPPING - Add to very bottom of styles.css */

@media screen and (min-width: 769px) {
  /* Increase width of right section to accommodate longer Spanish text */
  body footer .footer-right,
  footer .footer-right,
  .footer-right {
    display: block !important;
    visibility: visible !important;
    flex: 0 0 auto !important;
    width: 250px !important; /* Increased from 200px to 250px */
    min-width: 250px !important; /* Increased from 200px to 250px */
    max-width: 250px !important; /* Increased from 200px to 250px */
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 8rem !important; /* Keep same positioning */
  }
  
  /* Ensure title doesn't wrap */
  body footer .footer-right .footer-title,
  footer .footer-right .footer-title,
  .footer-right .footer-title {
    text-align: left !important;
    margin-bottom: 10px !important;
    color: #fff !important;
    font-size: 1.1rem !important;
    white-space: nowrap !important; /* Prevent text wrapping */
    overflow: visible !important; /* Allow text to show fully */
  }
  
  /* Keep social icons aligned with text */
  body footer .footer-social,
  footer .footer-social,
  .footer-social {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin: -7px 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
  }
  
  /* Keep social icon spacing as is */
  body footer .footer-social a,
  footer .footer-social a,
  .footer-social a {
    color: #1e90ff !important;
    font-size: 1.1rem !important;
    padding: 4px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }
}

/* FIX SERVICE ICONS AND TITLES ALIGNMENT - Add to bottom of styles.css */

@media screen and (min-width: 769px) {
  /* Ensure consistent service card layout */
  .service-card {
    padding: 1.5rem !important;
    border: 1px solid #eee !important;
    background: white !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  
  /* Fix service header alignment - move content down */
  .service-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0.75rem !important;
    min-height: 40px !important; /* Increased height to push content down */
    margin-top: 0.5rem !important; /* Add top margin to push down */
  }
  
  /* Standardize service icon container */
  .service-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 0.75rem !important;
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
  }
  
  /* Standardize all service icons */
  .service-icon i,
  .service-icon svg {
    width: 24px !important;
    height: 24px !important;
    color: #555 !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  
  /* Ensure consistent title positioning */
  .service-title {
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Service description styling */
  .service-description {
    font-size: 0.875rem !important;
    color: #666 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    flex: 1 !important;
  }
  
  /* Specific fix for first service card if it's still misaligned */
  .service-card:first-child .service-header {
    margin-top: 1.5rem !important; /* Extra push down for first card */
  }
}

/* Mobile service cards */
@media screen and (max-width: 768px) {
  .service-card {
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
  }
  
  .service-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0.75rem !important;
    min-height: 32px !important;
  }
  
  .service-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 0.75rem !important;
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
  }
  
  .service-icon i,
  .service-icon svg {
    width: 24px !important;
    height: 24px !important;
    color: #555 !important;
  }
  
  .service-title {
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .service-description {
    font-size: 0.875rem !important;
    color: #666 !important;
    line-height: 1.4 !important;
  }
}

/* REDUCE MOBILE FOOTER HEIGHT - Add to bottom of styles.css */

/* Mobile only - reduce footer height without affecting desktop */
@media screen and (max-width: 768px) {
  /* Make mobile footer smaller */
  body footer,
  footer {
    padding: 2px 0 !important; /* Reduced from 4px to 2px */
    min-height: auto !important;
    height: auto !important;
  }
  
  /* Tighter spacing for mobile footer content */
  body footer .footer-content,
  footer .footer-content,
  .footer-content {
    gap: 0.1rem !important; /* Reduced gap */
    margin: 0 !important;
    padding: 0 5px !important; /* Reduced horizontal padding */
  }
  
  /* Tighter spacing for social icons */
  body footer .footer-social,
  footer .footer-social,
  .footer-social {
    gap: 10px !important; /* Slightly reduced gap */
    margin: 0.1rem 0 !important; /* Reduced vertical margin */
  }
  
  /* Smaller social icons for mobile */
  body footer .footer-social a,
  footer .footer-social a,
  .footer-social a {
    font-size: 0.8rem !important; /* Slightly smaller icons */
    padding: 1px !important; /* Minimal padding */
    min-height: 20px !important; /* Smaller touch targets */
    min-width: 20px !important;
  }
  
  /* Tighter mobile contact info */
  .mobile-contact-info {
    font-size: 0.65rem !important; /* Slightly smaller text */
    line-height: 1.2 !important; /* Tighter line height */
    margin: 0.1rem 0 0 0 !important; /* Reduced margin */
    padding: 0 5px !important; /* Reduced padding */
  }
}

/* CENTER MOBILE SOCIAL ICONS - Add to bottom of styles.css */

@media screen and (max-width: 768px) {
  /* Fix mobile footer structure to center social icons properly */
  body footer .footer-content,
  footer .footer-content,
  .footer-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.1rem !important;
    margin: 0 !important;
    padding: 0 !important; /* Remove horizontal padding that was shifting icons */
    width: 100% !important;
  }
  
  /* Center the footer right section */
  body footer .footer-right,
  footer .footer-right,
  .footer-right {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    text-align: center !important;
  }
  
  /* Center social wrapper */
  body footer .footer-social-wrapper,
  footer .footer-social-wrapper,
  .footer-social-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Center social icons perfectly */
  body footer .footer-social,
  footer .footer-social,
  .footer-social {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0.1rem 0 !important;
    padding: 0 !important;
    width: auto !important; /* Let it size naturally */
  }
  
  /* Mobile contact info centered */
  .mobile-contact-info {
    display: block !important;
    visibility: visible !important;
    font-size: 0.65rem !important;
    color: #ccc !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin: 0.1rem 0 0 0 !important;
    padding: 0 5px !important;
    width: 100% !important;
  }
}

/* MOVE QUOTE PAGE TITLE DOWN - Add to bottom of styles.css */

@media screen and (min-width: 769px) {
  /* More specific targeting for quote pages */
  main.page-content .quote-section .section-title,
  .page-content .quote-section .section-title,
  main .quote-section .section-title {
    margin-top: 0rem !important; /* Increased to push title down more */
    margin-bottom: 1.5rem !important;
    padding-top: 0rem !important; /* Added padding for extra push */
  }
  
  /* Override any existing quote section spacing */
  main.page-content .quote-section,
  .page-content .quote-section,
  main .quote-section {
    padding: 2rem 0 1.5rem !important; /* Increased top padding */
    margin-top: 0 !important;
  }
  
  /* Override container spacing for quote pages */
  main.page-content .quote-section .container,
  .page-content .quote-section .container,
  main .quote-section .container {
    padding-top: 1rem !important; /* Add padding to push content down */
    margin-top: 0 !important;
  }
  
  /* Override any global section title rules for quote pages */
  main .quote-section h2.section-title {
    margin-top: 3rem !important;
    padding-top: 1rem !important;
  }
}

@media screen and (max-width: 768px) {
  /* Mobile quote title spacing */
  main.page-content .quote-section .section-title,
  .page-content .quote-section .section-title,
  main .quote-section .section-title {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    padding-top: 0.5rem !important;
  }
}

/* newnew MOBILE QUOTE PAGE SPACING FIX - Add this to the bottom of your styles.css */

/* Mobile specific fixes for quote page - raise content higher */
@media screen and (max-width: 768px) {
  
  /* Target quote page specifically */
  .quote-section {
    padding: 0.25rem 0 1rem !important; /* Reduced top padding significantly */
    margin-top: -1rem !important; /* Pull section up with negative margin */
  }
  
  /* Pull quote page title much higher */
  .quote-section .section-title {
    margin-top: -0.5rem !important; /* Negative margin to raise title */
    margin-bottom: 1rem !important;
    padding-top: 0 !important;
  }
  
  /* Pull quote page container up */
  .quote-section .container {
    padding-top: 0 !important;
    margin-top: -0.5rem !important; /* Additional negative margin */
  }
  
  /* Ensure first elements in quote section are raised */
  .quote-section .container > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Pull form description text up closer to title */
  .quote-section p {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
  }
  
  /* Tighten spacing for form elements */
  .quote-section .contact-form {
    margin-top: 0.5rem !important;
    padding-top: 0 !important;
  }
  
  /* Override any page-content spacing for quote page */
  .page-content .quote-section {
    padding-top: 0.25rem !important; /* Even less top padding */
    margin-top: -1rem !important;
  }
  
  /* Target main element if it exists */
  main.page-content .quote-section {
    padding-top: 0.25rem !important;
    margin-top: -1rem !important;
  }
  
  /* Also target Spanish quote page (cotizar) */
  main.page-content .quote-section h2,
  .page-content .quote-section h2,
  .quote-section h2 {
    margin-top: -0.5rem !important;
    padding-top: 0 !important;
  }
}

/* Extra small mobile screens - even more aggressive spacing */
@media screen and (max-width: 480px) {
  
  .quote-section {
    padding: 0.1rem 0 1rem !important; /* Even less top padding */
    margin-top: -1.25rem !important; /* Pull up even more */
  }
  
  .quote-section .section-title {
    margin-top: -0.75rem !important; /* More negative margin for smaller screens */
    margin-bottom: 0.75rem !important;
  }
  
  .quote-section .container {
    margin-top: -0.75rem !important;
  }
}