/* ================================
   Fixes for Webflow-free version
   ================================ */

/* Override CSS variables */
:root {
  --dark-sea-green: #007f98 !important;
}

/* Reduce the height of the box-shadow underline effect on navigation links */
.nav__link:hover {
  box-shadow: inset 0 -3px 0 0 var(--dark-sea-green) !important;
}

/* ================================
   Accessibility Improvements
   ================================ */

/* Focus states for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.nav__link:focus-visible,
.button:focus-visible,
.footer_link:focus-visible {
  outline: 2px solid #00d4ff !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}

/* Navigation link focus states */
.nav__link:focus {
  position: relative;
}

.nav__link:focus::after {
  width: 100% !important;
}

/* Button focus states */
.button:focus,
.btn:focus,
.btn-border:focus {
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.3) !important;
  transition: box-shadow 0.2s ease !important;
}

/* Form input focus improvements */
.form-input:focus {
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1) !important;
  outline: none !important;
}

/* Footer link hover and focus states */
.footer_link:hover,
.footer_link:focus {
  color: #00d4ff !important;
  text-decoration: underline !important;
  transition: color 0.2s ease !important;
}

/* Improve contrast for footer header */
.footer_link-header {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Skip to main content link (for screen readers) */
.skip-to-main {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: #005d6f;
  color: white;
  text-decoration: none;
}

.skip-to-main:focus {
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

/* Improve hover states for better interactivity - animated underline */
.nav__link {
  position: relative !important;
  text-decoration: none !important;
}

.nav__link::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 1px !important;
  background-color: #007f98 !important;
  transition: width 0.3s ease !important;
}

.nav__link:hover::after {
  width: 100% !important;
}

/* Logo link focus state */
.header__logo:focus-visible {
  outline: 2px solid #00d4ff !important;
  outline-offset: 4px !important;
  border-radius: 4px !important;
}

/* Mobile menu button focus state */
.header__btn-menu:focus-visible {
  outline: 2px solid #00d4ff !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* Team member cards accessibility */
.team-wrapper:focus-within {
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2) !important;
  transition: box-shadow 0.3s ease !important;
}

/* Gallery cell focus states */
.cell:focus-visible {
  outline: 3px solid #00d4ff !important;
  outline-offset: 3px !important;
}

/* Tab focus states for Products page */
.category__tab-link:focus-visible {
  outline: 2px solid #00d4ff !important;
  outline-offset: 2px !important;
}

/* Ensure sufficient color contrast */
.text-color-white {
  color: #ffffff !important;
}

/* Improve readability of small text */
.text-size-small {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}

/* Better focus management for form submit */
.button-2:focus-visible,
input[type="submit"]:focus-visible {
  outline: 2px solid #00d4ff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.2) !important;
}

/* Fix contact button - remove purple underline */
.button,
a.button,
.header .button,
.header__columns .button,
.nav + .button {
  color: white !important;
  text-decoration: none !important;
}

.button:hover,
a.button:hover,
.header .button:hover,
.header__columns .button:hover,
.nav + .button:hover {
  color: white !important;
  text-decoration: none !important;
}

.button:visited,
a.button:visited {
  color: white !important;
  text-decoration: none !important;
}

/* Hero person cards - hover expansion effect */
.hero__person {
  transition: all 0.5s ease;
}

/* ===== DEFAULT STATES (No Hover) ===== */

/* Default width states */
.hero__persons .hero__person.mod--1 {
  width: 58%;
}

.hero__persons .hero__person.mod--2,
.hero__persons .hero__person.mod--3 {
  width: 21%;
}

/* Image default states */
.hero__person-img {
  transition: all 0.5s ease;
}

.hero__person.mod--1 .hero__person-img {
  height: 115%;
}

.hero__person.mod--2 .hero__person-img,
.hero__person.mod--3 .hero__person-img {
  height: 100%;
}

/* Text visibility default states */
.hero__person-txt-less {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero__person-txt-more {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Ensure mod--1 "less" text is never hidden by the .hide class */
.hero__person-txt-less.mod--1 {
  display: flex !important;
}

/* First card (Eyeglasses) expanded by default - show "more" text, hide "less" text */
.hero__persons .hero__person.mod--1 .hero__person-txt-more {
  opacity: 1;
}

.hero__persons .hero__person.mod--1 .hero__person-txt-less {
  opacity: 0;
}

/* Other cards minimized by default - show "less" text, hide "more" text */
.hero__persons .hero__person.mod--2 .hero__person-txt-more,
.hero__persons .hero__person.mod--3 .hero__person-txt-more {
  opacity: 0;
}

.hero__persons .hero__person.mod--2 .hero__person-txt-less,
.hero__persons .hero__person.mod--3 .hero__person-txt-less {
  opacity: 1;
}

/* ===== HOVER STATES ===== */

/* Hovered card expands to 58% */
.hero__persons .hero__person:hover {
  width: 58% !important;
}

/* All non-hovered cards shrink to 21% */
.hero__persons:hover .hero__person:not(:hover) {
  width: 21% !important;
}

/* Hovered card image expands */
.hero__person:hover .hero__person-img {
  height: 115% !important;
}

/* Non-hovered cards have minimized image */
.hero__persons:hover .hero__person:not(:hover) .hero__person-img {
  height: 100% !important;
}

/* Hovered card is EXPANDED - hide "less" text, show "more" text */
.hero__person:hover .hero__person-txt-less {
  opacity: 0 !important;
}

.hero__person:hover .hero__person-txt-more {
  opacity: 1 !important;
}

/* Non-hovered cards are MINIMIZED - show "less" text (vertical with square), hide "more" text */
.hero__persons:hover .hero__person:not(:hover) .hero__person-txt-less {
  opacity: 1 !important;
}

.hero__persons:hover .hero__person:not(:hover) .hero__person-txt-more {
  opacity: 0 !important;
}

/* Mobile menu - ensure it starts hidden */
.menu {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.menu.active {
  height: 100vh;
}

.menu__content {
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
}

.menu.active .menu__content {
  opacity: 1;
}

/* Responsive - hide desktop hover effects on mobile */
@media (max-width: 991px) {
  .hero__persons {
    display: none;
  }
}

/* Make optometrist descriptions readable - change from gray to black */
.team-member-text,
.team-member-text strong,
.bold-text-5,
.bold-text-6,
.bold-text-7 {
  color: #1e1e2f !important; /* Dark text color for better readability */
}

/* Make service descriptions readable - change from gray to black */
.features-description p,
.paragraph-center {
  color: #1e1e2f !important; /* Dark text color for better readability */
}

/* ================================
   Contact Form Styling
   ================================ */

/* Success message styling */
.form-message-success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  color: #155724;
  padding: 1rem;
  margin-top: 1rem;
  animation: slideDown 0.3s ease-out;
}

.form-message-success .form-state-icon {
  color: #28a745;
}

/* Error message styling */
.form-message-error {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  color: #721c24;
  padding: 1rem;
  margin-top: 1rem;
  animation: slideDown 0.3s ease-out;
}

.form-message-error .form-state-icon {
  color: #dc3545;
}

/* Slide down animation for messages */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Form validation styling */
/* Default state - gray border */
.form-input {
  border-color: #ccc !important;
  transition: border-color 0.3s ease;
}

/* Keep gray border while untouched */
.form-input:not([data-touched]) {
  border-color: #ccc !important;
}

/* Only show validation colors after user has interacted with the field */
/* Red border for invalid fields (only after touched) */
.form-input[data-touched]:invalid {
  border-color: #dc3545 !important;
}

/* Green border only for email field when valid and touched */
.form-input[type="email"][data-touched]:valid {
  border-color: #28a745 !important;
}

/* Text inputs and textarea stay gray even when valid and touched */
.form-input[type="text"][data-touched]:valid {
  border-color: #ccc !important;
}

.form-input.is-text-area[data-touched]:valid {
  border-color: #ccc !important;
}

/* Submit button hover - similar shade to base color */
.button-2:hover {
  background-color: #007f98 !important;
  transition: background-color 0.3s ease;
}

/* Submit button disabled state */
.button-2:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ================================
   Mobile Navigation Fixes
   ================================ */

/* Center all mobile menu content */
.menu__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* Center mobile navigation links */
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-bottom: 20px;
}

.mobile-nav-links .nav__link {
  text-align: center;
  width: 100%;
  display: block;
}

/* Mobile navigation buttons container */
.menu__btns {
  display: flex !important;
  gap: 16px;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  justify-content: center;
}

/* Remove underline from mobile nav buttons */
.menu__btns .btn-border.mod--menu,
.menu__btns .btn.mod--menu {
  text-decoration: none !important;
  flex: 1 !important;
  min-width: 0 !important;
  padding: 12px 20px !important;
  font-size: 18px !important;
  border-radius: 100px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Forms button (outline style) */
.menu__btns .btn-border.mod--menu {
  background-color: transparent !important;
  color: #005d6f !important;
  border: 2px solid #005d6f !important;
  box-shadow: none !important;
}

.menu__btns .btn-border.mod--menu:hover {
  background-color: #005d6f !important;
  color: white !important;
  border-color: #005d6f !important;
  box-shadow: none !important;
}

/* Contact button (filled style) */
.menu__btns .btn.mod--menu {
  background-color: #005d6f !important;
  color: white !important;
  border: 2px solid #005d6f !important;
  box-shadow: none !important;
}

.menu__btns .btn.mod--menu:hover {
  background-color: #004a59 !important;
  color: white !important;
  border-color: #004a59 !important;
  box-shadow: none !important;
}

/* ================================
   Grid System (Webflow Replacement)
   ================================ */

/* Service grid */
.service-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.service-col {
    width: 100%;
}

@media (max-width: 768px) {
    .service-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Tab System (Webflow Replacement) */
.category__tab-link {
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 1rem 1.5rem;
    transition: all 0.3s ease;
}

.category__tab-link.active {
    border-bottom: 2px solid #97c680;
    font-weight: 600;
}

.category__tab {
    display: none;
}

.category__tab.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Content richtext (replaces w-richtext) */
.content-richtext {
    line-height: 1.8;
}

.content-richtext p {
    margin-bottom: 1rem;
}

.content-richtext h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* ================================
   Swiper Carousel Fixes
   ================================ */

/* Ensure swiper slides have proper spacing */
.swiper--persons .swiper-slide {
    width: 240px !important;
    margin-right: 24px !important;
}

.swiper--persons {
    overflow: visible !important;
    padding-bottom: 20px;
}

/* Enable touch/swipe gestures */
.swiper--persons .swiper-wrapper {
    cursor: grab;
}

.swiper--persons .swiper-wrapper:active {
    cursor: grabbing;
}

/* Mobile swiper spacing */
@media (max-width: 991px) {
    .swiper--persons {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .swiper--persons .swiper-slide {
        flex-shrink: 0;
    }
}

/* ================================
   Contact Page Improvements
   ================================ */

/* Section headings - WHITE on dark teal background */
.contact-section-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    font-family: Archia, Varela, "Open Sans", sans-serif;
}

/* Contact info text - WHITE on dark teal background */
.contact-info-text {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.8;
    color: #ffffff;
    font-family: "Open Sans", sans-serif;
}

/* Hours schedule */
.hours-schedule {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.hours-item {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem 0;
}

/* Day labels - WHITE (bold) */
.day-label {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    font-family: "Open Sans", sans-serif;
}

/* Time text - WHITE (lighter weight) */
.time-text {
    font-size: 1rem;
    color: #ffffff;
    font-weight: 400;
    line-height: 1.6;
    padding-left: 0.5rem;
    opacity: 0.95;
    font-family: "Open Sans", sans-serif;
}

/* Closed days - RED title, white text */
.hours-item.closed .day-label {
    color: #ff5252;
    font-weight: 700;
}

.hours-item.closed .time-text {
    color: #ffffff;
    font-size: 0.9375rem;
    opacity: 0.9;
}

/* Contact links */
.contact-phone {
    font-size: 1.625rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: "Open Sans", sans-serif;
    display: inline-block;
    padding: 0.25rem 0;
}

.contact-phone:hover {
    color: #97c680 !important;
    transform: translateX(4px);
}

.contact-email {
    font-size: 1.125rem !important;
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: "Open Sans", sans-serif;
    display: inline-block;
    padding: 0.25rem 0;
    opacity: 0.95;
}

.contact-email:hover {
    color: #97c680 !important;
    opacity: 1;
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-section-heading {
        font-size: 1.125rem;
    }
    
    .contact-info-text {
        font-size: 1rem;
    }
    
    .hours-schedule {
        gap: 1rem;
    }
    
    .day-label {
        font-size: 1.0625rem;
    }
    
    .time-text {
        font-size: 0.9375rem;
    }
    
    .contact-phone {
        font-size: 1.375rem !important;
    }
    
    .contact-email {
        font-size: 1.0625rem !important;
    }
}

@media (max-width: 480px) {
    .contact-section-heading {
        font-size: 1rem;
        letter-spacing: 0.75px;
    }
    
    .hours-item {
        padding: 0.375rem 0;
    }
    
    .day-label {
        font-size: 1rem;
    }
    
    .time-text {
        font-size: 0.875rem;
        padding-left: 0.375rem;
    }
}

/* ================================
   Footer Padding Fix
   ================================ */

/* Ensure footer has equal padding on both sides */
.footer_component .page-padding {
    padding-left: 5% !important;
    padding-right: 5% !important;
}

.footer_component .container-medium {
    max-width: 1200px;
    margin: 0 auto;
}

/* Responsive footer padding */
@media (max-width: 991px) {
    .footer_component .page-padding {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}

@media (max-width: 767px) {
    .footer_component .page-padding {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 480px) {
    .footer_component .page-padding {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ================================
   Responsive Navigation System
   ================================ */

/* Desktop Navigation (992px and up) */
@media (min-width: 992px) {
  /* Fixed sticky header */
  .header-block.mod--fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    z-index: 999 !important;
    background-color: #005d6f !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    padding: 18px 40px !important;
  }

  /* Absolute header for hero pages (homepage) */
  .header-block.mod--absolute {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    padding: 18px 40px !important;
  }

  /* Navigation links spacing */
  .nav__link {
    margin-left: 12px !important;
    margin-right: 12px !important;
    font-size: 18px !important;
  }

  /* Logo sizing */
  .logo-img {
    max-width: 180px !important;
  }

  /* Contact button */
  .header__columns .button {
    padding: 11px 30px !important;
    font-size: 18px !important;
  }
}

/* Tablet Navigation (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  /* Ensure header wrapper is visible */
  .header {
    display: block !important;
    position: fixed !important;
    z-index: 999 !important;
  }
  
  /* Both header types should be visible */
  .header-block.mod--fixed,
  .header-block.mod--absolute {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    padding: 16px 32px !important;
  }

  /* Tablet specific adjustments */
  .logo-img {
    max-width: 160px !important;
  }

  .header__btn-menu {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Mobile Navigation (below 768px) */
@media (max-width: 767px) {
  /* Ensure header wrapper is visible */
  .header {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
  }
  
  /* Both header types should be visible on mobile */
  .header-block.mod--fixed,
  .header-block.mod--absolute {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    padding: 12px 20px !important;
  }

  /* Mobile logo */
  .logo-img {
    max-width: 140px !important;
  }

  /* Mobile hamburger menu */
  .header__btn-menu {
    width: 32px !important;
    height: 32px !important;
  }

  /* Mobile menu buttons - stack on smaller screens */
  .menu__btns {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .menu__btns .btn-border.mod--menu,
  .menu__btns .btn.mod--menu {
    width: 100% !important;
    flex: none !important;
  }

  /* Mobile nav links */
  .mobile-nav-links {
    padding-bottom: 24px !important;
    width: 100% !important;
  }

  .mobile-nav-links .nav__link {
    padding: 16px 24px !important;
    font-size: 26px !important;
    line-height: 34px !important;
    text-align: center !important;
    display: block !important;
    transition: background-color 0.3s ease;
  }

  .mobile-nav-links .nav__link:hover,
  .mobile-nav-links .nav__link:active {
    background-color: rgba(151, 198, 128, 0.1);
  }
}

/* Extra small screens (below 480px) */
@media (max-width: 479px) {
  .header-block.mod--absolute {
    padding: 10px 16px !important;
  }

  .logo-img {
    max-width: 120px !important;
  }

  .nav__link {
    font-size: 32px !important;
    line-height: 40px !important;
  }
}

/* Large Desktop (1440px and up) */
@media (min-width: 1440px) {
  .header-block.mod--fixed {
    padding: 18px 80px !important;
  }

  .nav__link {
    margin-left: 16px !important;
    margin-right: 16px !important;
    font-size: 19px !important;
  }

  .logo-img {
    max-width: 200px !important;
  }
}

/* General Navigation Improvements Across All Sizes */
/* Smooth transitions */
.header-block,
.nav__link,
.button,
.header__btn-menu {
  transition: all 0.3s ease !important;
}

/* Better touch targets for mobile */
@media (max-width: 991px) {
  .header__btn-menu {
    padding: 8px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Ensure links are easily tappable */
  .nav__link,
  .menu__btns a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Prevent layout shift when navigation loads */
.header-block {
  contain: layout !important;
}

/* Optimize for performance */
.header-block.mod--fixed {
  will-change: transform !important;
}

/* Better spacing between nav items on medium desktop */
@media (min-width: 992px) and (max-width: 1199px) {
  .nav__link {
    margin-left: 10px !important;
    margin-right: 10px !important;
    font-size: 17px !important;
  }

  .header-block.mod--fixed {
    padding: 18px 30px !important;
  }
}

/* Tablet portrait adjustments */
@media (min-width: 768px) and (max-width: 991px) {
  .menu__btns {
    padding-top: 32px !important;
  }

  .mobile-nav-links .nav__link {
    font-size: 32px !important;
    padding: 18px 32px !important;
  }
}

/* ================================
   Gallery Responsive Improvements
   ================================ */

/* Gallery grid improvements */
.section-2 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.grid-2 {
  grid-column-gap: 16px !important;
  grid-row-gap: 16px !important;
  display: grid !important;
  grid-auto-flow: row dense !important;
}

/* All cells - responsive and centered */
.cell {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-radius: 8px !important;
  min-height: 300px !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.cell:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Specific cell variants - all centered */
.cell.v2,
.cell.v3,
.cell.v4,
.cell.v5,
.cell.v6 {
  background-position: center !important;
  min-height: 400px !important;
}

/* Logo cell - keep contain sizing */
.cell.v9 {
  background-size: contain !important;
  background-position: center !important;
  min-height: 300px !important;
}

/* 6th cell (girl with sunglasses) - focus right side of image */
.grid-2 > .cell:nth-child(6) {
  background-position: 70% center !important;
}

/* Desktop layout (992px and up) */
@media (min-width: 992px) {
  .grid-2 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .cell {
    min-height: 350px !important;
  }

  .cell.v2,
  .cell.v3,
  .cell.v4,
  .cell.v5,
  .cell.v6 {
    min-height: 450px !important;
  }
}

/* Tablet layout (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .cell {
    min-height: 300px !important;
  }

  .cell.v2,
  .cell.v3,
  .cell.v4,
  .cell.v5,
  .cell.v6 {
    min-height: 350px !important;
  }
}

/* Mobile layout (below 768px) */
@media (max-width: 767px) {
  .section-2 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .grid-2 {
    grid-template-columns: 1fr !important;
    grid-row-gap: 12px !important;
    grid-column-gap: 0 !important;
  }

  .cell {
    min-height: 250px !important;
  }

  .cell.v2,
  .cell.v3,
  .cell.v4,
  .cell.v5,
  .cell.v6 {
    min-height: 280px !important;
  }

  .cell.v9 {
    min-height: 200px !important;
  }
}

/* Extra small screens (below 480px) */
@media (max-width: 479px) {
  .grid-2 {
    grid-row-gap: 10px !important;
  }

  .cell {
    min-height: 220px !important;
    border-radius: 6px !important;
  }

  .cell.v2,
  .cell.v3,
  .cell.v4,
  .cell.v5,
  .cell.v6 {
    min-height: 250px !important;
  }

  .cell.v9 {
    min-height: 180px !important;
  }
}

/* Large desktop (1440px and up) */
@media (min-width: 1440px) {
  .cell {
    min-height: 400px !important;
  }

  .cell.v2,
  .cell.v3,
  .cell.v4,
  .cell.v5,
  .cell.v6 {
    min-height: 500px !important;
  }
}

/* ================================
   Our Story Page Responsive Improvements
   ================================ */

/* Main content area padding - only horizontal */
.section-4 .content-full-page {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* Banner section */
.banner.service .container-2 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Desktop improvements (992px and up) */
@media (min-width: 992px) {
  .section-4 .content-full-page {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}

/* Tablet layout (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .section-4 .content-full-page {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* Mobile layout (below 768px) */
@media (max-width: 767px) {
  .section-4 .content-full-page {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .banner.service .container-2 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Extra small screens (below 480px) */
@media (max-width: 479px) {
  .section-4 .content-full-page {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Large desktop (1440px and up) */
@media (min-width: 1440px) {
  .section-4 .content-full-page {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

/* ================================
   Services Page Responsive Improvements
   ================================ */

/* Services main content padding */
.service-features {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.services-section {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* Desktop improvements (992px and up) */
@media (min-width: 992px) {
  .service-features {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }

  .services-section {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}

/* Tablet layout (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .service-features {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .services-section {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* Mobile layout (below 768px) */
@media (max-width: 767px) {
  .service-features {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .services-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Extra small screens (below 480px) */
@media (max-width: 479px) {
  .service-features {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .services-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Large desktop (1440px and up) */
@media (min-width: 1440px) {
  .service-features {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }

  .services-section {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

/* ================================
   Products Page Responsive Improvements
   ================================ */

/* Products main content padding */
.category__tabs,
.category__content,
.products-wrapper {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* Desktop improvements (992px and up) */
@media (min-width: 992px) {
  .category__tabs,
  .category__content,
  .products-wrapper {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}

/* Tablet layout (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .category__tabs,
  .category__content,
  .products-wrapper {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* Mobile layout (below 768px) */
@media (max-width: 767px) {
  .category__tabs,
  .category__content,
  .products-wrapper {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Extra small screens (below 480px) */
@media (max-width: 479px) {
  .category__tabs,
  .category__content,
  .products-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Large desktop (1440px and up) */
@media (min-width: 1440px) {
  .category__tabs,
  .category__content,
  .products-wrapper {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

/* ================================
   Footer Spacing Improvements
   ================================ */

/* Better spacing for footer component */
.footer_component {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* Improved spacing for footer top wrapper */
.footer_top-wrapper {
  grid-column-gap: 4rem !important;
  grid-row-gap: 3rem !important;
}

/* Better spacing for footer logo section */
.footer_logo-wrapper {
  max-width: 24rem !important;
  padding-right: 2rem;
}

.footer_logo-wrapper p {
  margin-top: 1rem;
  line-height: 1.6 !important;
}

/* Improved spacing for footer link wrapper */
.footer_link-wrapper {
  grid-column-gap: 3rem !important;
  grid-row-gap: 2rem !important;
}

/* Better spacing between footer links */
.footer_link {
  margin-bottom: 0.75rem !important;
  line-height: 1.5 !important;
  transition: all 0.2s ease;
}

/* Better spacing for footer link headers */
.footer_link-header {
  margin-bottom: 1.25rem !important;
  display: block;
}

/* Responsive footer spacing for tablets */
@media (max-width: 991px) {
  .footer_component {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .footer_top-wrapper {
    grid-column-gap: 2rem !important;
    grid-row-gap: 2.5rem !important;
  }

  .footer_logo-wrapper {
    max-width: 100% !important;
    padding-right: 0;
    margin-bottom: 1rem;
  }

  .footer_link-wrapper {
    grid-column-gap: 2rem !important;
  }
}

/* Responsive footer spacing for mobile */
@media (max-width: 767px) {
  .footer_component {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .footer_top-wrapper {
    grid-row-gap: 2rem !important;
  }

  .footer_link-wrapper {
    grid-template-columns: 1fr !important;
    grid-column-gap: 0 !important;
    grid-row-gap: 2rem !important;
  }

  .footer_link {
    margin-bottom: 0.65rem !important;
  }

  .footer_link-header {
    margin-bottom: 1rem !important;
  }
}