/* Reset and base styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  line-height: 1.5;
  color: #333;
  background: #fff;
}

a {
  text-decoration: none;
  color: inherit;
}

.full-width {
  width: 100%;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Section spacing */
section {
  padding: 0 0;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

/* =========================================================
   CTA BUTTON – reusable button for section call-to-actions
   ========================================================= */

.cta-button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: 2px solid #fff;
  border-radius: 4px;
  background: none;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.cta-button:hover,
.cta-button:focus {
  background: #fff;
  color: #003366;
}

.cta-button.dark {
  border: 2px solid #003366;
  color: #003366;
  background: none;
}

.cta-button.dark:hover,
.cta-button.dark:focus {
  background-color: #003366;
  color: #fff;
}
/* Mobile version of the hero button switches to dark theme */
@media (max-width: 767px) {
  .cta-button.responsive-dark {
    border-color: #003366 !important;
    color: #003366 !important;
    background: none !important;
  }

  .cta-button.responsive-dark:hover,
  .cta-button.responsive-dark:focus {
    background-color: #003366 !important;
    color: #fff !important;
  }
}

/* === TOP RIBBON === */
.top-ribbon {
  background-color: #3183b3;
  color: #fff;
  font-size: 0.9rem;
  padding: 0.5rem 0;
  width: 100%;
  z-index: 999;
}

.top-ribbon .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* Contact item layout */
.contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
}

/* Remove the left-hand offset only for the address block */
.contact-left .contact-item { margin-left: 0; }

.contact-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.contact-link {
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.icon {
  width: 24px;
  height: 24px;
}

/* Hide address on mobile */
.hide-on-mobile {
  display: block;
}

@media (max-width: 767px) {
  .hide-on-mobile {
    display: none;
  }

  .top-ribbon {
    position: sticky;
    top: 0;
  }

  .top-ribbon .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .contact-right {
    justify-content: center;
    margin-top: 0.5rem;
  }

  .contact-item {
    margin-left: 0;
    margin-right: 0.75rem;
  }
}

/* ==== Header Base ==== */
.main-header {
  background: #fff;
/* border-bottom: 1px solid #e5e5e5; /* subtle separator under header */
}

.header-inner { /* renamed wrapper (inherits .container) */
  display: flex;
  align-items: center; /* Vertically centers direct children (logo, nav, burger) */
  justify-content: space-between;
  padding: 0.5rem 1rem;
  position: relative;
  gap: 1rem;
}

/* Logo */
.logo-wrap { flex-shrink: 0; }
.logo {
  height: 70px;
  max-width: 150px;
  vertical-align: middle; /* Ensures the logo itself is vertically aligned */
}

/* ==== Desktop nav ==== */
.desktop-nav {
  display: block;
  /* flex-grow: 1; /* Optional: allows nav to take available space if needed */
}

.desktop-nav .nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  align-items: center; /* Vertically centers all direct list items (li) within the ul */
}

.desktop-nav .nav-links li {
  display: flex; /* Make each list item a flex container */
  align-items: center; /* Vertically centers the content (link or button) within the li */
  /* If elements still appear off, you might try: line-height: 1; or specific height: Xpx; */
}

.desktop-nav .nav-links li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  display: block; /* Important for padding to apply consistently */
  vertical-align: middle; /* Explicitly set vertical alignment for anchors */
  line-height: normal; /* Reset line-height if it's causing issues */
}

/* Ensure consistent vertical padding for non-button links to match the button */
.desktop-nav .nav-links li a:not(.cta-button) {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  /* Keep horizontal padding minimal if gap is handling spacing */
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

/* Specific styling for the CTA button when it's inside a desktop nav list item */
.desktop-nav .nav-links li .cta-button { /* Highly specific selector */
  padding: 0.75rem 1.25rem; /* Matches vertical padding of other links */
  background: #003366; /* Primary blue for the button */
  color: #fff;
  border: 2px solid #003366;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  display: inline-block; /* Ensure it behaves like a button */
  vertical-align: middle; /* Explicitly set vertical alignment */
  line-height: normal; /* Reset line-height */
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.desktop-nav .nav-links li .cta-button:hover,
.desktop-nav .nav-links li .cta-button:focus {
    background: #004488; /* Darker blue on hover */
    border-color: #004488;
}

/* IMPORTANT: Please remove this rule if it exists in your style.css */
/* It is an outdated rule and could be causing conflicts if the button now uses .cta-button */
/*
.desktop-nav .enquire-btn {
  background: #3183b3; color: #fff; padding: .5rem 1rem;
  border-radius: 4px; font-weight: bold;
}
*/

/* ==== Burger (mobile) ==== */
.burger {
  display: none; /* hidden until mobile MQ */
  font-size: 2rem;
  background: none; border: none;
  cursor: pointer; color: #333;
}

/* ==== Mobile nav panel ==== */
.mobile-nav {
  position: absolute;
  top: 100%; left: 0;
  background: #f9f9f9; /* Reverted background to light grey */
  border: 1px solid #ccc; /* Reverted border color */
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  display: none; /* Toggled by JS */
  z-index: 9999;
  width: max-content;
  min-width: 180px;
  padding: .5rem 1rem;
}
.mobile-nav.show { display: block; }

.mobile-nav .nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 0;
  padding: 1rem 0 0;
}

/* Style for primary mobile nav links (Products, About Us, Contact Us) */
.mobile-nav .nav-links li a {
  text-decoration: none;
  color: #333; /* Changed text color to dark grey for better contrast */
  font-weight: bold;
  display: block;
  padding: 0.5rem 1rem;
}

/* Style for the CTA button in the mobile nav */
.mobile-nav .cta-button {
  background: #3183b3; /* Keep button background blue */
  color: #fff; /* Keep button text white for contrast against its blue background */
  padding: .5rem 1rem;
  border-radius: 4px;
  font-weight: bold;
  display: block;
  text-align: center;
}


@media (max-width: 767px) {
  /* show burger, hide desktop nav */
  .burger { display: block; }
  .desktop-nav { display: none; }

  /* keep normal row direction – burger first, logo second */
  .header-inner { flex-direction: row; }

  /* push logo to the far right */
  .logo-wrap { margin-left: auto; }
  
  .logo {
  height: 50px; /* down from 70px */
  max-width: 120px; /* scales proportionally */
  }
}

/* Dropdown menu styling for desktop (no changes needed here as this is for desktop) */
.has-dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 100;
    list-style: none;
    padding: 0.5rem 0;
    border-radius: 4px;
    border-top: 3px solid #003366;
}

/* Show desktop dropdown when 'show-dropdown' class is active (controlled by JS) */
.desktop-nav .has-dropdown.show-dropdown > .dropdown-menu {
    display: block;
}

.dropdown-menu li a {
    padding: 0.75rem 1rem;
    display: block;
    color: #333;
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    background-color: #f0f0f0;
    color: #003366;
}

/* Mobile specific dropdown adjustments - these need to be within this media query */
@media (max-width: 768px) {
    /* Hide desktop dropdown on mobile */
    .desktop-nav .dropdown-menu {
        display: none !important;
    }

    /* Override main nav-links li text-align for dropdown items */
    .mobile-nav .nav-links li {
        text-align: center; /* Keep main nav items centered */
    }

    /* Styling for the dropdown menu when in mobile mode */
    .mobile-nav .dropdown-menu {
        display: none; /* Hidden by default on mobile */
        position: static; /* Stacks normally within the flow */
        background-color: transparent; /* Keep transparent as parent (.mobile-nav) has light background */
        box-shadow: none;
        border-top: none;
        padding: 0; /* Reset specific padding to manage with li a */
        margin-top: 0.5rem;
    }

    /* THIS IS THE CRUCIAL RULE TO MAKE MOBILE DROPDOWN VISIBLE */
    .mobile-nav .has-dropdown.show-dropdown > .dropdown-menu {
        display: block;
    }

    .mobile-nav .dropdown-menu li a {
        padding: 0.5rem 2.5rem; /* Increased left padding for indentation */
        color: #333; /* Changed dropdown item text to dark grey */
        text-align: left; /* Ensure text is left-aligned within dropdown item */
    }

    .mobile-nav .dropdown-menu li a:hover {
        background-color: #f0f0f0; /* Subtle hover for mobile, dark on light */
    }

    /* Ensure dropdown parent takes full width in mobile nav */
    .mobile-nav .nav-links li.has-dropdown {
        display: block;
        width: 100%;
    }
    
    /* Ensure the main "Products" link in mobile nav remains clickable and has a visible indicator */
    .mobile-nav .has-dropdown > a {
        /* The key changes are here: */
        display: flex; /* Make it a flex container */
        justify-content: space-between; /* Distribute space between text and icon */
        align-items: center; /* Vertically center the text and icon */
        
        position: relative; /* Keep relative for any potential future absolute positioning of children */
        padding: 1rem 1.5rem; /* Added horizontal padding to give space at the edges */
        /* text-align: center; (removed as flexbox handles alignment) */
    }

    /* Add an up/down triangle indicator for dropdown on mobile */
    .mobile-nav .has-dropdown > a::after {
        content: '\25BC'; /* Down-pointing triangle for collapsed state */
        /* Removed absolute positioning; it's now a flex item */
        color: #333; /* Keep indicator dark grey */
        font-size: 0.8em; /* Slightly smaller size for triangles */
        line-height: 1; /* Helps with vertical alignment of the glyph */
        flex-shrink: 0; /* Prevent the icon from shrinking if text is long */
        margin-left: 0.5rem; /* Optional: adds a small gap between text and triangle */
        transition: content 0.3s ease; /* Transition content change */
    }
    .mobile-nav .has-dropdown.show-dropdown > a::after {
        content: '\25B2'; /* Up-pointing triangle for expanded state */
        /* No transform needed here, as the glyph itself changes direction */
    }
}
/* ========================================================= */
/*  HERO SECTION                                             */
/* ========================================================= */

.hero {
  position: relative;
  border-radius: 0px;
  overflow: hidden;
}

/* --- Background image ------------------------------------ */
.hero-image {
  width: 100%;        /* fills the hero container’s width */
  height: auto;       /* keeps natural aspect-ratio at all sizes */
  display: block;
}

/* --- Text overlay (desktop / large tablets) -------------- */
.hero-content {
  position: absolute;
  top: 3%;            /* tweak to taste */
  left: 5%;
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
  margin: 0 0 1rem 0;
  max-width: 65%;     /* keeps lines from stretching too wide */
}

.hero-content p {
  font-size: clamp(0.5rem, 2vw, 1.15rem);
  margin: 0 0 1.5rem 0;
  max-width: 35%;
}

.hero-button {
  border: 2px solid #fff;
  padding: 0.5rem 1rem;
  color: #fff;
  background: none;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  display: inline-block;
  transition: background 0.2s ease, color 0.2s ease;
}

.hero-button:hover,
.hero-button:focus {
  background: #fff;
  color: #003366;
}

/* ========================================================= */
/*  MOBILE LAYOUT  (≤ 767 px)                                */
/* ========================================================= */
@media (max-width: 767px) {

  /* Stack image and content vertically */
  .hero {
    display: flex;
    flex-direction: column;
  }

  /* Mobile-specific hero image */
  .hero-image {
    content: url('../images/hero-bg-mobile.jpg');
    width: 100%;
    max-width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 10px solid #e0e0e0;
  }

  /* Text content below image */
  .hero-content {
    position: static;
    padding: 1rem;
    text-align: center;
    color: #333;
    text-shadow: none;
    background: none;
    width: 100%;
  }

  .hero-content h1,
  .hero-content p {
    max-width: none;
    color: #333;
  }

  .hero-content p {
    font-size: clamp(0.85rem, 3.5vw, 1.05rem);
    line-height: 1.5;
  }

  .hero-button {
    margin-top: 1rem;
    border: none;
    background-color: #3183b3;
    color: #fff;
  }
}


/* ===========================
   INTRO SECTION STRUCTURE
   =========================== */

.intro-section {
  padding: 1rem 0;
}

/* ✅ Neutral wrapper – no styles */
.intro-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ✅ Visual container – grey background + watermark */
.intro-container {
  background-color: #cccccc;
  position: relative;
  padding: 2rem;
  display: flex;
  gap: 2rem;
  overflow: hidden;
  flex-direction: column; /* default for mobile */
}

/* ✅ Watermark background */
.intro-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/watermark-intro.svg') no-repeat center;
  background-size: contain;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

/* Align image and text in intro section (desktop only) */
@media (min-width: 768px) {
  .intro-container {
    flex-direction: row;     /* ✅ essential for side-by-side layout */
    align-items: center;     /* ✅ vertical alignment */
  }
}

/* Image column */
/* Outer image block */
.intro-image {
  flex: 0 0 auto;
  max-width: 323px;
}

/* Inner frame that blocks the watermark */
.intro-image-frame {
  background: #fff;
  padding: 10px 10px 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
}

.intro-image-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text column */
.intro-text {
  flex: 1;
  max-width: 600px;
  color: #333;
}
.intro-text h2 {
  margin-top: 0;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin-bottom: 1rem;
}
.intro-text p {
  margin-bottom: 1.5rem;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.6;
}

@media (max-width: 767px) {
  .intro-container {
    flex-direction: column;
    padding: 2rem 1rem;
    position: relative;
    align-items: center;
    text-align: center;
  }

  .intro-image {
    max-width: 50vw;           /* Scales image to 50% of screen width */
    margin-bottom: 1.5rem;
  }

  .intro-image img {
    width: 100%;               /* fills its .intro-image container */
    height: auto;
    margin: 0 auto;
    display: block;
  }

  .intro-text {
    max-width: 100%;
    position: relative;
    z-index: 1;
  }

  .intro-text h2,
  .intro-text p {
    text-align: center;
  }

  /* Watermark: scale it down and keep behind text */
.intro-container::before {
  background-size: 280px auto;         /* larger watermark on mobile */
  background-position: center center;  /* vertically centred */
  opacity: 0.05;
}
}

/* =========================================================
   EXCELLENCE IN EVERY LABEL SECTION – pale grey bg + wrap
   ========================================================= */

.why-section {
  padding: .5rem 0;
  background: none;
}

.why-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.why-container {
  background-color: #f6f6f6; /* pale grey */
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  z-index: 1;
}

/* Yellow section label */
.why-label {
  font-size: 0.9rem;
  font-weight: bold;
  color: #ffc857;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  text-align: left;
}

.why-heading {
  text-align: left;
  margin-bottom: 2.5rem;
}
.why-heading h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  color: #003366;
  margin-bottom: 1rem;
}
.why-heading p {
  max-width: 700px;
  font-size: 1.05rem;
  color: #333;
  line-height: 1.6;
}


/* Grid layout */
.why-grid {
  display: grid;
  gap: 2rem;
}

/* Modify this media query to apply 3 columns from 768px onwards */
@media (min-width: 768px) { /* Changed from 1024px */
  .why-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card styling */
.why-card {
  background: #f7f9fc;
  border: 1px solid #e1e6ef;
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: box-shadow 0.2s ease;
}
.why-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.why-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Icon image will be added via inline style or class */
}

.why-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: #3183b3;
}
.why-card p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.5;
}

/* =========================================================
   INDUSTRIES SECTION
   ========================================================= */

.industries-section {
  padding: 0.5rem 0;
  background: none;
}

.industries-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.industries-container {
  background-color: #4a4a4a;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 0;
  color: #fff;
}

.industries-container::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: url('../images/watermark-honey.svg') no-repeat bottom left;
  background-size: contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.industries-label {
  font-size: 0.9rem;
  font-weight: bold;
  color: #ffc857;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  text-align: left;
}

.industries-heading {
  font-size: clamp(2rem, 4vw, 2.5rem);
  text-align: left;
  margin-bottom: 1rem;
}

.industries-intro {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 800px;
}

/* Grid layout */
.industries-grid {
  display: grid;
  gap: 2rem;
  z-index: 1;
  position: relative;
}

@media (min-width: 768px) {
  .industries-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.industry-card {
  background: #fff;
  padding: 1rem;
  border-radius: 4px;
  color: #333;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.industry-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.industry-card h3 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  color: #003366;
}

.industry-card p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* =========================================================
   WHAT CUSTOMERS SAY – grey bg, left-aligned, testimonials
   ========================================================= */

.reviews-section {
  padding: .5rem 0;
  background: none;
}

.reviews-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.reviews-container {
  background-color: #cccccc;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}

/* Optional watermark */
.reviews-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('../images/watermark-reviews.svg') no-repeat center;
  background-size: contain;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* Section label – no bars */
.reviews-label {
  font-size: 0.9rem;
  font-weight: bold;
  color: #e3a900; /* Mid-gold for better legibility on grey */
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  text-align: left;
}

/* Heading */
.reviews-heading {
  font-size: clamp(2rem, 4vw, 2.5rem);
  color: #003366;
  margin-bottom: 2.5rem;
  text-align: left;
  position: relative;
  z-index: 1;
}

/* Grid of review cards */
.reviews-grid {
  display: grid;
  gap: 2rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .reviews-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Individual review card */
.review-card {
  background: #fff;
  color: #333;
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: left;
  font-size: 1rem;
}

.review-card .quote {
  font-style: italic;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.review-card .stars {
  color: #ffc857;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.review-card .attribution {
  font-size: 0.9rem;
  color: #444;
  font-weight: bold;
}

/* Footer link to Google */
.reviews-footer {
  margin-top: 3rem;
  font-size: 1.1rem;
  text-align: left;
  position: relative;
  z-index: 1;
}

.reviews-footer a {
  color: #003366;
  text-decoration: underline;
}

.reviews-footer a:hover {
  color: #3183b3;
}


/* =========================================================
   ENQUIRY SECTION
   ========================================================= */

.enquiry-section {
  padding: .5rem 0;
  background: none;
}

.enquiry-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* This defines the visual background */
.enquiry-container {
  background-color: #4a4a4a;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 0;
  color: #fff;
}

/* Optional watermark */
.enquiry-container::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: url('../images/watermark-honey.svg') no-repeat bottom left;
  background-size: contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}


.enquiry-label {
  font-size: 0.9rem;
  font-weight: bold;
  color: #ffc857;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  text-align: center;
}

.enquiry-heading {
  font-size: clamp(2rem, 4vw, 2.5rem);
  text-align: center;
  margin-bottom: 2.5rem;
}

.enquiry-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.enquiry-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.form-group {
  flex: 1 1 100%;
  margin-bottom: 1rem; /* Keeping existing margin-bottom */
}

@media (min-width: 768px) {
  .form-group {
    flex: 1 1 calc(33.333% - 1rem);
  }
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #000; /* Original color for label */
}

/* Unified styling for all input, textarea, and now SELECT elements */
input,
textarea,
select { /* <-- SELECT added here */
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  box-sizing: border-box; /* Added for consistency with padding/border sizing */
  background-color: #fff; /* Ensure consistent background color */
  color: #333; /* Ensure consistent text color for inputs/selects */
}

/* Specific styling for select elements to remove default browser appearance
   and add a custom arrow */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); /* Custom dropdown arrow */
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem; /* Size of the custom arrow */
  max-width: 250px; /* Adjust this value as needed.
                       250px is an example to make it visibly narrower.
                       You can try a percentage like 60% if preferred: max-width: 60%;
                       Or a smaller fixed width like 200px. */
  margin: 0 auto; /* This will center the select field within its flex column */
}

@media (max-width: 767px) {
  select {
    max-width: 100%; /* Ensure it expands to full width on small screens */
    margin: 0; /* Remove auto margin on mobile */
  }
}

/* Focus styles for input, textarea, and select */
input:focus,
textarea:focus,
select:focus { /* <-- SELECT added here */
  border-color: #007bff; /* Example focus color, adjust to match your site's brand */
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* Example focus shadow */
}


/* Styling for the submit button - using the existing .submit-button class */
.submit-button {
  padding: 1rem;
  background-color: #ffc857;
  color: #000;
  font-weight: bold;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
}

.submit-button:hover {
  background-color: #e0ac32;
}


/* Responsive grid layouts (these seem unrelated to the form, but kept as per your original) */
@media (min-width: 768px) {
  .why-choose-us .grid,
  .industries .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* The following rules were redundant and have been merged/removed for efficiency */
/*
.form-group {
  margin-bottom: 1rem; // Merged into the main .form-group rule above
}

form input, // Merged into the general input, textarea, select rule above
form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

form button { // This targets general buttons in forms, consider if it should be .submit-button
  background-color: #003366;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}
*/



/* Responsive adjustments for file upload on mobile */
@media (max-width: 767px) {
  .custom-file-upload {
    flex-direction: column; /* Stack button and file name on mobile */
    align-items: flex-start; /* Align items to the left on mobile */
    gap: 0.5rem; /* Smaller gap on mobile */
  }

  .upload-button {
    width: 100%; /* Make button full width on mobile */
    text-align: center; /* Center text in button */
  }

  .file-name {
    width: 100%; /* Make file name span full width on mobile */
    text-align: left; /* Keep file name left-aligned below button */
  }
}

.detailed-toggle {
  margin-top: 2rem;
  text-align: center;
}

.toggle-button {
  background-color: #3183b3;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease;
}

.toggle-button:hover {
  background-color: #226c94;
}

.detailed-enquiry {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #ccc;
}

/* ========================================================= */
/* PRODUCT SECTIONS (from thermal-printer-labels.php)       */
/* ========================================================= */

.product-section {
  padding: 1rem 0;
}



.product-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.product-container {
  max-width: 1200px;
  background-color: #f0f0f0;
  margin: 0 auto;
  position: relative;
  /* Keep padding for the overall container gap from edges */
  padding: 2rem;
  display: flex;
  gap: 2rem;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}


.product-section.section-1 .product-container { background-color: #D3D3D3; } /* Medium-light grey */
.product-section.section-2 .product-container { background-color: #F7F7F7; } /* Very light grey */
.product-section.section-3 .product-container { background-color: #A9A9A9; } /* Darker grey (DarkGrey) */
.product-section.section-4 .product-container { background-color: #E8E8E8; } /* Lighter grey */
.product-section.section-5 .product-container { background-color: #808080; } /* Medium dark grey (Grey) */
.product-section.section-6 .product-container { background-color: #C0C0C0; } /* Medium grey (Silver) */


/* Keep your general product-container::before styles as a base */
.product-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat; /* Ensure no repeat for all watermarks */
  background-position: center;
  background-size: contain;
  opacity: 0.05; /* Adjust opacity as needed for watermarks */
  z-index: 0;
  pointer-events: none;
}

/* Apply the same watermark-intro.svg to each specific section */

.product-section.section-1 .product-container::before {
  background-image: url('../images/watermark-intro.svg');
}

.product-section.section-2 .product-container::before {
  background-image: url('../images/watermark-intro.svg');
}

.product-section.section-3 .product-container::before {
  background-image: url('../images/watermark-intro.svg');
}

.product-section.section-4 .product-container::before {
  background-image: url('../images/watermark-intro.svg');
}

.product-section.section-5 .product-container::before {
  background-image: url('../images/watermark-intro.svg');
}

.product-section:nth-of-type(even) .product-container {
  flex-direction: row-reverse;
}

.product-label {
  font-size: 0.9rem;
  font-weight: bold;
  color: #ffc857; /* gold/yellow */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  text-align: left;
}

.product-image {
  flex: 0 0 auto;
  /* Use a consistent percentage based on your intro-image */
  max-width: 323px; /* Set to match .intro-image or desired split */
  /* Remove the direct img styling here, we'll put it in a nested div like intro-image */
}

/* NEW: Add a wrapper div for the image to apply the frame style */
/* This mimics the .intro-image-frame structure for consistency */
.product-image-frame { /* This class would need to be added to your HTML around the <img> */
  background: #fff;
  padding: 10px 10px 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  position: relative; /* Keep if you need z-index, otherwise not strictly necessary */
  z-index: 1; /* Keep if you need z-index, otherwise not strictly necessary */
}

.product-image-frame img { /* Ensure image fills its frame */
  width: 100%;
  height: auto;
  display: block;
}

.product-text {
  flex: 1;
  max-width: 600px;
  color: #333;
  position: relative;
  z-index: 1;
}

.product-text h2 {
  margin-top: 0;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.product-text p {
  margin-bottom: 1.5rem;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.6;
}
.product-text ul{
  /* 1️⃣ kill the big default indent */
  margin: 1rem 0 1.5rem 0;      /* keep your vertical rhythm */
  padding-left: 1.25rem;        /* bullet + text now line-up with the p’s left edge */
  list-style: disc;             /* keep regular round bullets */
  list-style-position: outside; /* (default) – bullet sits in the padding we just set */
}

.product-text li{
  margin-left: 0;               /* be explicit – no extra indent on <li> */
}


/* ========================================================= */
/* MOBILE LAYOUT  (≤ 767 px)                                */
/* ========================================================= */
@media (max-width: 767px) {
  .intro-container,
  .product-container {
    flex-direction: column;
    padding: 1rem;
    gap: 1.5rem;
  }

  .intro-image,
  .product-image {
    max-width: 80%; /* Adjust image width for mobile stacking */
    margin: 0 auto; /* Center image on mobile */
  }

  .intro-text,
  .product-text {
    max-width: 100%;
    text-align: center;
  }

  /* Adjust product image frame on mobile if needed */
  .product-image-frame {
    padding: 5px 5px 20px; /* Smaller frame on mobile */
    box-shadow: 0 0 10px rgba(0,0,0,0.05); /* Lighter shadow on mobile */
  }
  
  .product-text ul{
    list-style: none;          /* remove bullets */
    padding-left: 0;           /* align text flush */
    margin-bottom: 1.75rem;    /* extra space after the list */
  }

  .product-text li{
    font-weight: 600;          /* semi-bold for emphasis */
    margin: .35rem 0;          /* a little vertical breathing room */
  }
  
  .intro-container,
  .product-section .product-container, /* Target all product containers within product sections */
  .product-section:nth-of-type(even) .product-container { /* Explicitly ensure even ones are caught */
    flex-direction: column; /* This will force stacking on mobile for ALL of them */
    padding: 1rem;
    gap: 1.5rem;
    }
  .product-label {
    text-align: center;
  }
  .product-container::before, /* General rule for any .product-container::before */
  .product-section.section-1 .product-container::before,
  .product-section.section-2 .product-container::before,
  .product-section.section-3 .product-container::before,
  .product-section.section-4 .product-container::before,
  .product-section.section-5 .product-container::before,
  .product-section.section-6 .product-container::before { /* Add for all sections */
    background-image: none !important;
  }
}

/* Leave the rest of the CSS unchanged below this comment */

/* =========================================================
   UNDERSTANDING BARCODE LABELS SECTION
   ========================================================= */

.understanding-section {
  padding: 0.5rem 0; /* Consistent with other sections */
  background: none; /* No specific background at section level */
}

.understanding-wrap {
  max-width: 1200px; /* Consistent container width */
  margin: 0 auto;
  padding: 0 1rem;
}

.understanding-container {
  background-color: #f6f6f6; /* Pale grey background, similar to why-section */
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 0;
  color: #333; /* Dark text for light background */
}

/* Optional watermark (can be customized later if needed) */
.understanding-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('../images/watermark-intro.svg') no-repeat center; /* Reusing intro watermark for now */
  background-size: contain;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* Section label */
.understanding-label {
  font-size: 0.9rem;
  font-weight: bold;
  color: #ffc857; /* Gold/yellow accent color */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  text-align: center; /* Centered as per screenshot */
}

/* Main Heading */
.understanding-heading {
  font-size: clamp(2rem, 4vw, 2.5rem);
  color: #003366; /* Dark blue heading color */
  margin-bottom: 1.5rem; /* Space before intro paragraph */
  text-align: center; /* Centered as per screenshot */
}

/* Intro Paragraph */
.understanding-intro {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2.5rem; /* Space before grid */
  max-width: 800px; /* Constrain width for readability */
  margin-left: auto; /* Center paragraph if max-width is less than container */
  margin-right: auto;
  text-align: center; /* Centered as per screenshot */
}

/* Grid layout for cards */
.understanding-grid {
  display: grid;
  gap: 2rem; /* Space between cards */
  z-index: 1;
  position: relative; /* Ensure grid is above watermark */
}

/* Responsive grid columns */
@media (min-width: 768px) {
  .understanding-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on larger screens */
  }
}

/* Individual card styling */
.understanding-card {
  background: #fff; /* White background for cards */
  border: 1px solid #e1e6ef; /* Light border */
  border-radius: 8px; /* Rounded corners */
  padding: 1.5rem; /* Padding inside cards */
  text-align: left; /* Text alignment within cards */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow */
  transition: box-shadow 0.2s ease, transform 0.2s ease; /* Smooth hover effect */
}
.understanding-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* Lift effect on hover */
  transform: translateY(-3px);
}

.understanding-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: #3183b3; /* Blue heading color for cards */
}

.understanding-card p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.5;
}

/* Concluding paragraph */
.understanding-conclusion {
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 2rem; /* Space after grid */
  margin-bottom: 1.5rem; /* Space before CTA button */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #333;
}

/* =========================================================
   ASSET OPTIONS SECTION (Three Options to Suit Different Needs)
   ========================================================= */

.asset-options-section {
  padding: 0.5rem 0;
  background: none; /* Inherit background from the product-section.section-X if needed */
}

.asset-options-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.asset-options-container {
  background-color: #f6f6f6; /* Pale grey background, similar to why-section/understanding-section */
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 0;
  color: #333;
}

/* Watermark */
.asset-options-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('../images/watermark-intro.svg') no-repeat center; /* Example watermark */
  background-size: contain;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* Section Label */
.asset-options-label {
  font-size: 0.9rem;
  font-weight: bold;
  color: #ffc857;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Main Heading */
.asset-options-heading {
  font-size: clamp(2rem, 4vw, 2.5rem);
  color: #003366;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Intro Paragraph */
.asset-options-intro {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 3rem; /* Space before the first option block */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Individual Option Block (e.g., General Use, Durable, Tamper-Evident) */
.asset-option {
  display: flex;
  align-items: center; /* Vertically align image and text */
  gap: 2rem; /* Space between image and text */
  margin-bottom: 3rem; /* Space between option blocks */
  padding-bottom: 1.5rem; /* Padding for separator */
  border-bottom: 1px solid #e0e0e0; /* Subtle separator line */
}

.asset-option:last-of-type {
  margin-bottom: 0; /* No margin after the last one */
  border-bottom: none; /* No border after the last one */
}

/* Image container for each option (general styles) */
.asset-option-image {
  flex: 0 0 auto; /* Don't grow or shrink */
  max-width: 35%; /* Adjust as needed for image width relative to text */
  position: relative; /* For nested images */
  z-index: 1;
}

/* Frame for single images (labels-7, labels-8) - This remains for other sections */
.asset-option-image-frame {
  background: #fff;
  padding: 10px 10px 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  border-radius: 8px; /* Slightly rounded corners */
}

.asset-option-image-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px; /* Slight round on image inside frame */
}

/* Text container for each option */
.asset-option-text {
  flex: 1; /* Allow text to fill remaining space */
  max-width: 600px; /* Max width for readability */
}

.asset-option-text h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: #003366;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.asset-option-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

/* Alternating layout (image on right, text on left) */
.asset-option.reverse-layout {
  flex-direction: row-reverse;
}

/* ===== Specific layout for Overlapping Security Images (applied directly to img tags) ===== */
.asset-option-image--security-overlap {
  position: relative;
  width: 360px;          /* Defined width for the container of the overlapping images */
  min-height: 320px;     /* Minimum height to accommodate the overlap */
  flex-shrink: 0;        /* Prevent shrinking in flex parent */
  max-width: 40%;        /* Adjust as needed for image width relative to text */
}

.asset-option-image--security-overlap .img-frame { /* This now targets the <img> tags directly */
  position: absolute;
  background: #fff;
  box-shadow: 0 0 20px rgba(0,0,0,.05);
  overflow: hidden; /* Ensures content is clipped by border-radius */
  display: block; /* Ensure the img behaves as a block for positioning */
  width: auto; /* Reset any default img width, properties below will set it */
  height: auto; /* Reset any default img height */
}

/* rear (large) image within the security overlap layout */
.asset-option-image--security-overlap .img-frame.large {
  width: 75%; /* Width of the large image relative to its parent container */
  top: 0;
  left: 0;
  padding: 10px 10px 40px;
  border-radius: 8px; /* Apply border-radius directly to the image */
}

/* front (small) image within the security overlap layout */
.asset-option-image--security-overlap .img-frame.small {
  width: 50%;           /* Width of the small image relative to its parent container */
  top: 120px;           /* Pushed down from top */
  left: 140px;          /* Pushed right from left */
  padding: 8px 8px 32px; /* Original padding */
  z-index: 2; /* Ensure the small image is on top */
}

/* Specific styles for circular small image with border */
.asset-option-image--security-overlap .img-frame.small.circle {
  border-radius: 50%; /* Makes the image circular */
  border: 4px solid #fff; /* White border */
  box-shadow: 0 0 15px rgba(0,0,0,0.15); /* Slightly stronger shadow */
  object-fit: cover; /* Ensures the image fills the circular area without distortion */

  aspect-ratio: 1 / 1; /* Force square aspect ratio for perfect circle */
  padding: 8px; /* Symmetrical padding for circular images to ensure correct shape */
}

/* Mobile-specific adjustments for general asset options */
@media (max-width: 767px) {
  .asset-option {
    flex-direction: column; /* Stack image and text vertically for general options */
    text-align: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
  }
  .asset-option:last-of-type {
    margin-bottom: 0;
    border-bottom: none;
  }

  /* Force column stacking for reversed layouts on mobile */
  .asset-option.reverse-layout {
    flex-direction: column;
  }

  /* --- REVISED: Mobile-specific rules for single image containers (.asset-option-image) --- */
  .asset-option-image {
    flex: 1 1 auto; /* Allows it to grow and shrink, respecting its width/max-width */
    width: 100%; /* Make it attempt to take full width of the parent column */
    max-width: 80%; /* Limit its maximum size for centering */
    margin: 0 auto; /* Center it horizontally */
    align-self: center; /* Ensures it's centered along the cross-axis if margin auto is insufficient */
  }

  /* Ensure the frame for single images also scales and centers on mobile */
  .asset-option-image-frame {
    width: 100%; /* Make sure the frame fills the .asset-option-image's width */
    padding: 8px 8px 25px; /* Adjust padding for mobile to be less deep */
    margin: 0 auto; /* Center the frame within its parent (.asset-option-image) */
  }

  /* --- Mobile-specific adjustments for Overlapping Security Images layout (.asset-option-image--security-overlap) --- */
  .asset-option-image--security-overlap {
    width: 90vw;           /* 90% of the viewport width */
    min-height: 80vw;      /* Enough height for the overlap */
    margin: 0 auto 2.5rem; /* Center and add space below */
    flex-shrink: 0; /* NEW: Prevent it from shrinking */
    flex-grow: 0; /* NEW: Prevent it from growing, rely on its explicit width/height */
    /* flex-basis: auto; (default, no need to explicitly add unless overriding) */
  }

  /* rear / large (mobile) */
  .asset-option-image--security-overlap .img-frame.large {
    width: 80%;            /* Fills most of the column */
    top: 0;
    left: 0;
    padding: 8px 8px 28px;
  }

  /* front / small (mobile) – using percentages for responsive positioning */
  .asset-option-image--security-overlap .img-frame.small {
    width: 55%;            /* ~½ the column */
    top: 75%;              /* 55% down the container */
    left: 35%;             /* 35% from the left edge */
    transform: translateY(-50%);  /* Fine-tune vertical center */
    padding: 6px 6px 24px; /* Corrected potential typo from previous iteration */
  }

  /* Mobile specific adjustments for circular small image with border */
  .asset-option-image--security-overlap .img-frame.small.circle {
    border: 3px solid #fff; /* Slightly thinner border on mobile */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    aspect-ratio: 1 / 1;
    padding: 6px; /* Symmetrical padding for circular images on mobile */
  }
}
/* ------------------------------------------ */
/* -------Contact Page Specific Styles------- */
/* ------------------------------------------ */

.contact-hero {
    padding: 3rem 0; /* Adjust as needed */
    text-align: center;
    background-color: #f9f9f9; /* Light background for the hero */
}

.contact-hero h1 {
    font-size: 2.5rem; /* Or use clamp() for responsive sizing */
    color: #003366;
    margin-bottom: 1rem;
}

.contact-hero p {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto;
}

.contact-details-section {
    padding: 3rem 0;
}

.contact-details-section .grid {
    /* Desktop layout */
    grid-template-columns: 2fr 1fr; /* Form column wider than info column */
    gap: 3rem; /* Space between columns */
    align-items: start; /* Align content to the top */
}

@media (max-width: 768px) {
    .contact-details-section .grid {
        grid-template-columns: 1fr; /* Stack columns on mobile */
        gap: 2rem; /* Space between stacked sections */
    }
}

.contact-form-column,
.contact-info-column {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.contact-form-column h2,
.contact-info-column h2 {
    color: #003366;
    margin-bottom: 1.5rem;
}

/* Form styling */
.contact-form .form-group {
    margin-bottom: 1.2rem;
}

.contact-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #555;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

.contact-form textarea {
    resize: vertical; /* Allow vertical resizing */
    min-height: 120px;
}

.contact-form .cta-button {
    /* Inherits general cta-button styles, but ensure it's not transparent */
    background-color: #003366;
    border-color: #003366;
    color: #fff;
    width: auto; /* Allow button to size itself */
    display: inline-block; /* Keep it inline-block if not full width */
    margin-top: 1rem;
}

.contact-form .cta-button:hover {
    background-color: #004488;
    border-color: #004488;
}


/* Contact Info Styling */
.contact-info-column .info-block {
    margin-bottom: 1.5rem;
}

.contact-info-column .info-block h3 {
    color: #003366;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.contact-info-column .info-block p,
.contact-info-column address {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
}

.contact-info-column .info-block a {
    color: #003366;
    text-decoration: underline;
}

.social-media-links {
    margin-top: 2rem;
}

.social-media-links a {
    display: inline-block;
    margin-right: 15px;
}

.social-media-links img {
    width: 32px; /* Adjust size as needed */
    height: 32px;
    transition: transform 0.2s ease;
}

.social-media-links img:hover {
    transform: translateY(-3px);
}

/* Map Section */
.map-section {
    padding: 0 0 3rem; /* Adjust top padding if map is close to content */
}

.map-section h2 {
    text-align: center;
    color: #003366;
    margin-bottom: 1.5rem;
}

.map-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.map-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ------------------------------------------ */
/* ----------------Breadcrumbs--------------- */
/* ------------------------------------------ */



.breadcrumb {
  font-size: 0.9rem;
  margin: 1rem 0;
  color: #666;
}

.breadcrumb a {
  color: #666;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb::before {
  content: "You are here: ";
  font-weight: bold;
}

.breadcrumb-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 1rem 0; /* Less space above & below */
}

.breadcrumb {
  font-size: 0.9rem;
  color: #555;
  margin: 0; /* remove extra margin if any */
}

.breadcrumb a {
  text-decoration: none;
  color: #555;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* Default (desktop) */
.mobile-breadcrumb {
  display: none;
}
.desktop-breadcrumb {
  display: block;
}

@media (max-width: 768px) {
  .mobile-breadcrumb {
    display: block;
  }
  .desktop-breadcrumb {
    display: none;
  }
  .breadcrumb-wrap {
    order: -1; /* Only works if using flex */
    padding: 1rem;
  }

  .breadcrumb {
    font-size: 0.85rem;
    text-align: center;
  }
}




/* ------------------------------------------ */
/* -------------------VIDEO------------------ */
/* ------------------------------------------ */


.media-frame {
  background: #fff;
  padding: 10px 10px 40px;
  border-radius: 0px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  display: inline-block;
  max-width: 360px;
  margin: 0 auto;
}

.video-style {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0px;
}

@media screen and (max-width: 768px) {
  .media-frame {
    max-width: 100%;
    padding: 8px 8px 24px;
    margin: 1.5rem auto;
  }

  .video-style {
    width: 100%;
    height: auto;
  }
}

}footer {
  background-color: #eee;
  padding: 2rem 0;
  text-align: center;
}