/* ========================================
   DESKTOP HERO
   ======================================== */
.hero-section { 
  position: relative; 
}

.hero-contact-top {
  position: absolute;
  top: 18px;
  right: 40px;
  z-index: 2;
  display: flex;
  gap: 12px;
  align-items: center;
}

.hero-contact-top a {
  color: var(--color-light-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Remove default underline */
.hero-contact-top a {
    text-decoration: none; /* already present, just to be sure */
    position: relative;    /* needed for the pseudo-element */
}

/* Custom animated underline */
.hero-contact-top a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 3px; /* thickness of the underline */
    background-color: var(--color-light-text); /* adjust colour if needed */
    transition: width 0.3s ease, opacity 0.3s ease; /* animation duration */
    transform: translateY(3px);
    border-radius: 1px;
}

.hero-contact-top a:hover::after,
.hero-contact-top a:focus-visible::after {
    width: 100%; /* expand underline from left to right */
  opacity: 0.8;
  }

.hero-contact-top svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  color: inherit;
}

.hero-contact-top a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;

}

.hero-contact-top a:hover {
  opacity: 0.8;
}
[data-hero-rotator] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--anim-medium) var(--ease-standard), 
              transform var(--anim-medium) var(--ease-standard);
}

[data-hero-rotator].is-transitioning {
  pointer-events: none;
}

[data-hero-rotator].is-hidden {
  opacity: 0;
  transform: translateY(-24px);
}

.hero-indicators {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.hero-indicator {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.36);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform var(--anim-fast) var(--ease-standard), 
              background-color var(--anim-fast) var(--ease-standard);
}

.hero-indicator.is-active {
  background-color: var(--color-background);
}

.hero-indicator:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
border-radius: 50px;
font-weight: 400;
    /* border: 2px solid var(--color-primary); */
}

.hero-btn-primary {
color: var(--color-light-text) !important;
background-color: var(--color-primary-dark);
}

.hero-btn-secondary {
    /* border: 2px solid var(--color-primary);
    color: var(--color-primary) !important; */
    background-color: #e55c0060;
    color: var(--color-light-text) !important;
}

.hero-btn-primary:hover,
.hero-btn-primary:focus-visible {
  background-color: var(--color-primary) !important;
    /* border-color: var(--color-primary-dark); */
text-decoration: none;
}

.hero-btn-secondary:hover,
.hero-btn-secondary:focus-visible {
  background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
color: var(--color-light-text) !important;
text-decoration: none;
}


/* .hero-btn .cta-arrow {
  transition: transform 0.3 ease;
} */

/* .hero-btn-primary:hover .cta-arrow,
.hero-btn-primary:focus-visible .cta-arrow {
  transform: translateX(4px);
}

.hero-btn-secondary:hover .cta-arrow,
.hero-btn-secondary:focus-visible .cta-arrow {
  transform: translateX(4px);
} */

/* ========================================
   FULL DESKTOP LAYOUT
   ======================================== */
@media (min-width: 769px) {
  .hero-section {
    text-align: left;
    padding: 100px 40px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9)), url('/images/gallery/backgroundimage.png');
    min-height: 500px;
    height: 70vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    max-height: 1200px;
    position: relative;
  }

  .hero-content {
    max-width: clamp(300px, 80%, 1400px);
    margin: 0 auto;
    color: var(--color-light-text);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
  }

  .hero-content h1 {
    font-size: clamp(40px, 6vw, 70px);
    margin-bottom: 20px;
    font-weight: 750;
    text-align: left;
  }

  .hero-content p {
    font-size: 24px;
    margin-bottom: 30px;
    line-height: 1.5;
    text-align: left;
  }

  .hero-content .cta-btn {
    font-size: 19px;
    padding: 15px 25px;
  }
}

/* ========================================
   MOBILE HERO
   ======================================== */
@media (max-width: 768px) {
  .hero-section {
    padding: 60px 15px;
    height: 70vh;
    background-attachment: scroll;
    text-align: left;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9)), 
                      url('/images/gallery/backgroundimage.png');
    background-size: cover;
    background-position: center;
    color: var(--color-light-text);
    align-content: center;
    justify-content: center;
  }

  .hero-content h1 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 15px;
  }

  .hero-content p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 0 10px;
  }

  .hero-content .cta-btn {
    font-size: 16px;
    padding: 12px 20px;
  }

  .hero-contact-top {
    display: none;
  }
}

/* ========================================
   HERO BUTTON GROUP RESPONSIVE
   ======================================== */
.hero-btn-group {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .hero-btn-group {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    gap: 10px;
  }

  .hero-btn-group .cta-btn {
    min-width: 120px;
    width: auto;
    text-align: left;
    padding: 12px 12px;
    font-size: 15px;
  }
}

/* ========================================
   VERY SMALL SCREEN FIXES
   ======================================== */
@media (max-width: 520px) {
  .hero-content {
    padding-left: 12px;
    padding-right: 12px;
    max-width: 100%;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .hero-content h1 {
    font-size: clamp(30px, 9.5vw, 40px);
    line-height: 1.12;
  }

  .hero-btn-group {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .hero-btn-group .cta-btn {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    padding: 12px 16px;
    font-size: 16px;
  }

  .hero-contact-top,
  .hero-contact-top a {
    white-space: normal;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ========================================
   FEATURE SERVICES
   ======================================== */
.feature-services {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 20px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch; /* ensure links align at card bottom */
}

a.anchor {
    display: block;
    position: relative;
    top: -95px;
    visibility: hidden;
}

.feature-card-wrapper {
  text-decoration: none;
  color: inherit;
  height: 100%;
  display: block;
}

.feature-card {
    display: block;
  background: var(--color-background);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 15px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  transition: all 0.2s ease-in-out;
  height: 100%;
}

.feature-card h3 {
  font-size: 20px;
  margin: 0;
  padding: 0;
}

.feature-card:hover {
  transform: translateY(-4px);
  background-color: #080c1148;
}

.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--color-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.feature-icon svg {
  width: 32px;
  height: 32px;
}

.feature-icon i {
  font-size: 28px;
  line-height: 1;
}

.feature-icon i.small {
  font-size: 18px;
  opacity: 0.85;
  margin-left: 6px;
}

.feature-text {
  display: flex;
  flex-direction: column;
  
  flex: 1 1 auto;
  width: 100%;
}

.feature-card h3,
.feature-card p {
  text-align: left;
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto; /* push link to bottom */
  margin-bottom: 20px;
  padding-top: 10px;
  left: auto;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}

.feature-link::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  mask: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2222%22 height=%2222%22 viewBox=%220 0 22 22%22 fill=%22none%22><path d=%22M6 11H16M16 11L12 7M16 11L12 15%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/></svg>') no-repeat center;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2222%22 height=%2222%22 viewBox=%220 0 22 22%22 fill=%22none%22><path d=%22M6 11H16M16 11L12 7M16 11L12 15%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/></svg>') no-repeat center;
  background: currentColor;
}

.feature-link:hover {
  color: var(--color-secondary);
  transform: translateX(2px);
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .features-grid { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
  .feature-card { border-color: rgba(240,240,240,0.12); }
  .feature-icon { background: var(--color-gray); }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card { transition: none; }
  .feature-card:hover { transform: none; box-shadow: none; }
}

.other-services-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 50px;
}

.other-services-container {
  border-radius: 15px;
   border: 1px solid rgba(0,0,0,0.08);
  padding: 15px 15px;
}

.other-services-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.other-services-title {
  font-size: 24px;
  margin: 0;
  padding: 0;
}

.other-services-subheading {
  font-size: 16px;
  margin: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  .other-services-container { border-color: rgba(240,240,240,0.12); }
 
}

.services-cta-link {
  margin: 0;
  padding: 0;
}

.other-services-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  justify-content: left;
}

.other-services-list li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 520px) {
  .other-services-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .other-services-title {
    font-size: 20px;
  }

  .services-cta-link {
    font-size: 15px;
  }
}

.fa-circle-check {
  color: var(--color-primary);
}

/* Visibility rules for desktop and mobile "View All Services" links */
.other-services-link-desktop {
  display: inline-flex;
}

.other-services-link-mobile {
  display: none;
}

@media (max-width: 520px) {
  .other-services-link-desktop {
    display: none;
  }
  .other-services-link-mobile {
    display: inline-flex;
  }
}

@media (max-width: 520px) {
  /* Reduce spacing between list items */
  .other-services-list {
    gap: 8px 16px;
  }

  /* Add margin to bottom link */
  .other-services-bottom-link {
    margin-top: 10px;
    margin-bottom: 20px;
  }

  /* Add padding to mobile "View All Services" link like featured cards */
  .other-services-link-mobile {
    display: inline-flex;
    padding: 12px 0px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: 600;
  }
}

/* FAQ SECTION */
.faq-section {
  background-color: var(--color-background-secondary);
  padding: 40px 20px;
}

.faq-container {
  padding: 15px;
   max-width: 800px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.faq-question {
  transition: color 0.2s ease;
}

.faq-title {
  font-size: 29px;
  margin-bottom: 20px;
  text-align: center;
}

.faq-subtitle {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
  justify-self: center;
  background-color: #fa64003c;
  width: fit-content;
  padding: 5px;
  color: #fa6400bd;
  border-radius: 7px;
    display: block;
  margin-left: auto;
  margin-right: auto;
}

.faq-item {
  margin-bottom: 15px;
  width: 100%;
  display: block;
}

.faq-question {
  background: none;
  border: none;
  padding: 12px 15px;
  width: 100%;
  font-size: 18px;
  cursor: pointer;
  position: relative;
color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
  padding: 0 15px;
}

.faq-item.open .faq-answer {
  padding: 12px 15px;
}
.faq-question .faq-icon {
  transition: transform 0.25s ease;
}

.faq-item:hover .faq-question {
  color: grey;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.faq-item.open .faq-question .faq-icon {
  transform: rotate(45deg);
}

.faq-cta-btn {
  display: block;
  width: fit-content;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 400;
  border: 2px solid var(--color-primary);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  margin-top: 20px;
  background-color: #00000000;
  color: var(--color-primary) !important;
  padding: 10px 20px;
  font-size: 14px;
  margin-left: auto;
  margin-right: auto;
}

.faq-more-info {
  display: flex;
  justify-content: center;  /* center buttons horizontally */
  gap: 15px;                /* space between buttons */
  flex-wrap: wrap;          /* wrap on small screens if needed */
  margin-top: 20px;
}

.faq-cta-btn {
  display: inline-flex;     /* ensures buttons align nicely */
  width: auto;              /* remove block width */
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 520px) {
  .faq-more-info {
    flex-wrap: nowrap;       /* prevent wrapping */
    overflow-x: auto;        /* allow horizontal scroll if needed */
    justify-content: flex-start; /* align left if space is limited */
  }

  .faq-cta-btn {
    flex: 0 0 auto;          /* prevent buttons from stretching */
    white-space: nowrap;     /* prevent text from wrapping */
    margin: 0;               /* remove default margins */
  }
  .faq-container {
    padding: 0 10px;         /* reduce side padding on small screens */
  }
}

.faq-cta-btn:hover,
.faq-cta-btn:focus-visible {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-light-text) !important;
  text-decoration: none;
}

.commercial-cta-section {
  background-color: var(--color-primary);
  padding: 40px 20px;
}

.commercial-cta-container {
  padding: 15px;
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
  text-align: center;
}

.commercial-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 700;
  border: 2px solid var(--color-light-text);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  margin-top: 20px;
  background-color: #ffffff;
  color: var(--color-primary) !important;
  padding: 10px 20px;
  font-size: 14px;
}

.commercial-cta-btn:hover,
.commercial-cta-btn:focus-visible {
  background-color: var(--color-primary);
  border-color: var(--color-light-text);
  color: var(--color-light-text) !important;
  text-decoration: none;
}

/* Repeating background words for commercial CTA */
.commercial-cta-section {
  position: relative;
  overflow: hidden;
  color: var(--color-light-text);
}

.commercial-cta-section::before {
  content:
"Catering   Plumbing   Gas  Heating   Commercial   Repairs   Catering   Plumbing   Gas  Heating   Commercial   Repairs   Catering   Plumbing   Gas  Heating   Commercial   Repairs\A"
"Plumbing   Gas  Heating   Commercial   Maintenance   Catering   Plumbing   Gas  Heating   Commercial   Maintenance   Catering   Plumbing   Gas  Heating   Commercial   Maintenance   Catering\A"
"Gas  Heating   Catering   Repairs   Catering   Plumbing   Commercial   Gas  Heating   Catering   Repairs   Catering   Plumbing   Commercial   Gas  Heating   Catering   Repairs   Catering   Plumbing   Commercial\A"
"Commercial   Maintenance   Plumbing   Gas   Commercial   Repairs   Commercial   Maintenance   Plumbing   Gas   Commercial   Repairs   Commercial   Maintenance   Plumbing   Gas   Commercial   Repairs\A"
"Catering   Commercial   Gas  Heating   Plumbing   Maintenance   Catering   Commercial   Gas  Heating   Plumbing   Maintenance   Catering   Commercial   Gas  Heating   Plumbing   Maintenance\A"
"Plumbing   Gas  Heating   Catering   Commercial   Repairs   Plumbing   Gas  Heating   Catering   Commercial   Repairs   Plumbing   Gas  Heating   Catering   Commercial   Repairs\A"
"Commercial   Plumbing   Maintenance   Gas  Heating   Catering   Commercial   Plumbing   Maintenance   Gas  Heating   Catering   Commercial   Plumbing   Maintenance   Gas  Heating   Catering\A"
"Gas  Heating   Commercial   Repairs   Plumbing   Catering   Gas  Heating   Commercial   Repairs   Plumbing   Catering   Gas  Heating   Commercial   Repairs   Plumbing   Catering\A"
"Catering   Maintenance   Commercial   Gas  Heating   Plumbing   Catering   Maintenance   Commercial   Gas  Heating   Plumbing   Catering   Maintenance   Commercial   Gas  Heating   Plumbing\A"
"Plumbing   Commercial   Repairs   Catering   Gas  Heating   Plumbing   Commercial   Repairs   Catering   Gas  Heating   Plumbing   Commercial   Repairs   Catering   Gas  Heating\A"
"Commercial   Gas  Heating   Maintenance   Plumbing   Catering   Commercial   Gas  Heating   Maintenance   Plumbing   Catering   Commercial   Gas  Heating   Maintenance   Plumbing   Catering\A"
"Catering   Plumbing   Commercial   Repairs   Gas  Heating   Catering   Plumbing   Commercial   Repairs   Gas  Heating   Catering   Plumbing   Commercial   Repairs   Gas  Heating";
  position: absolute;
  top: -250px;
  left: -20%;
  width: 250%;
  height: 350%;

  font-size: 60px;
  font-weight: 700;
  line-height: 1.4;
  white-space: pre;

  opacity: 0.06;
  color: #ffffff;

  pointer-events: none;
  z-index: 0;

  transform: rotate(-8deg);
}

.commercial-cta-container {
  position: relative;
  z-index: 2;
}

/* ========================================
   CONTACT CTA SECTION
   ======================================== */
.contact-cta-section {
  background-color: var(--color-background-secondary);
  padding: 40px 20px;
} 

.contact-cta-title {
  font-size: 29px;
  margin-bottom: 24px;
  text-align: left;
}

.contact-cta-container {
  padding: 0 20px;
  max-width: 1000px;
  margin: 0 auto 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  gap: 30px;
}

.contact-cta-container .contact-cta-landline, 
.contact-cta-container .contact-cta-email, 
.contact-cta-container .contact-cta-whatsapp {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.7;
  width: fit-content;
}

.contact-cta-container .contact-cta-landline:hover, 
.contact-cta-container .contact-cta-email:hover, 
.contact-cta-container .contact-cta-whatsapp:hover {
  text-decoration: underline;
}

.contact-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 700;
  border: 2px solid var(--color-primary);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  margin-top: 20px;
  background-color: var(--color-primary);
  color: var(--color-light-text) !important;
  padding: 10px 20px;
  font-size: 14px;
  width: fit-content;
}

.contact-cta-btn:hover,
.contact-cta-btn:focus-visible {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-light-text) !important;
  text-decoration: none;
}

.contact-cta-section-left-side  {
  flex: 3;
}

.contact-cta-section-right-side {
  flex: 1;
  display: flex;
  align-items: right;
  text-align: right;
  flex-direction: column;
  margin-top: 50px;
}

.gas-safe-badge {
  display: flex;
  justify-content: flex-start;
  font-size: 15px;
  text-align: center;
  margin-left: 0;
  align-items: center;
     background-color: rgba(255, 208, 0, 0.18);
  font-weight: 600;
  padding: 11px;
  border-radius: 12px;
}

.gas-safe-badge img {
  height: 57px;
  width: auto;
  margin-right: 20px;
  display: block;
  border-radius: 5px;
}

/* ========================================
   SERVICE AREA SUBSECTION
   ======================================== */
.service-area-subsection {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 50px;
}

.service-area-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 18px 32px;
  justify-content: space-around;
  align-items: center;
  font-size: 1.08rem;
  max-width: 900px;
  width: 100%;
  padding-left: 20px;
}

.service-area-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  font-weight: 500;
  text-align: left;
}

.service-area-list i.fa-circle-check {
  color: #e55c00;
  font-size: 1.1em;
}

/* ========================================
   MOBILE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
  /* Contact CTA section: info left, button right */
  .contact-cta-container {
    flex-direction: row;       
    justify-content: space-between; 
    text-align: left;          
    gap: 20px;
    flex-wrap: wrap;           
  }

  .contact-cta-section-left-side {
    flex: 1 1 auto;
    text-align: left;          
  }

  .contact-cta-section-right-side {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end; 
    margin-top: 0;             
  }

  /* Service area list on mobile: left-aligned */
  .service-area-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    gap: 12px;
    padding-left: 0;
    padding-right: 0;
  }

  .service-area-list li {
    justify-content: flex-start; 
    width: 100%;
  }
}

/* Hide mobile badge on desktop */
.gas-safe-badge.mobile-only {
    display: none;
}

/* Hide desktop badge on mobile */
.gas-safe-badge.desktop-only {
    display: flex;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .gas-safe-badge.mobile-only {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        font-size: 15px;
        margin-top: 20px;
        padding: 11px;
        border-radius: 12px;
        font-weight: 600;
    }

    .gas-safe-badge.desktop-only {
        display: none;
    }
} 

/* ========================================
   GALLERY SECTION
   ======================================== */
.gallery-section {
  padding: 40px 20px;
  max-width: 1400px;
  margin: 0 auto 60px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.gallery-grid img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}
.gallery-grid img { 
  transition: transform 0.3s ease;
}
.gallery-grid img:hover {
  transform: scale(1.05);
} 

.gallery-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 20px;
  border-radius: 12px;
  height: 51%;
  background-image: url('/images/gallery/gallery5.JPG');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.gallery-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1;
}

.gallery-cta a {
  position: relative;
  z-index: 2;
}

.gallery-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 700;
  border: 2px solid var(--color-light-text);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  color: var(--color-primary) !important;
  padding: 10px 20px;
  font-size: 14px;
}

.gallery-cta-btn {
  text-decoration: none;
}

/* MOBILE GALLERY ADJUSTMENTS */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .gallery-grid img {
    object-fit: cover;
    cursor: pointer;
  }

  .gallery-cta-btn {
    font-size: 12px;
    padding: 8px 16px;
  }

  .gallery-cta {
margin-top: 7px;
}

.gallery-grid img:hover {
  transform: scale(1.00);
} 
}

/* LIGHTBOX STYLES */
#lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

#lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}

#lightbox-overlay .close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 30px;
  color: white;
  cursor: pointer;
  font-weight: bold;
}


/* supplier section */

  .suppliers-section {
    padding: 50px 0;
    border-bottom: 2px solid rgba(218, 218, 218, 0.35);
  }
/* Suppliers Section Dark Mode */
@media (prefers-color-scheme: dark) {
  .suppliers-section {
    background: #23242a !important;
     border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  }
  .suppliers-title {
    color: #f0f0f0 !important;
  }
  .suppliers-logos img {
    background: #181a20 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  }
}