/* Modern responsive styles for EuroPack */

/* Basic resets */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Use the imported Poppins typeface throughout the site for a cohesive, modern look. */
  font-family: 'Poppins', Arial, sans-serif;
  background: #f5f5f5;
  color: #333;
  line-height: 1.6;
}

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Header and navigation */
header {
  background: #ffffff;
  border-bottom: 1px solid #ddd;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.navbar-logo img {
  height: 60px;
}

.navbar-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.navbar-menu li {
  margin-left: 20px;
  position: relative;
}

.navbar-menu a {
  font-weight: bold;
  color: #333;
  padding: 8px 0;
  display: block;
}

.navbar-menu li:hover > a {
  color: #007bff;
}

/* Submenu styling */
.navbar-menu li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #ddd;
  padding: 10px 0;
  min-width: 200px;
  z-index: 1000;
}

.navbar-menu li:hover ul {
  display: block;
}

.navbar-menu li ul li {
  margin: 0;
}

.navbar-menu li ul a {
  padding: 8px 20px;
  font-weight: normal;
  color: #333;
}

.navbar-menu li ul a:hover {
  background: #f0f0f0;
  color: #007bff;
}

/* Hero section */
.hero {
  position: relative;
  background: url('img/euro3d-2.gif') no-repeat center/cover;
  /* Increase the hero's vertical footprint and provide a fallback minimum.
     A percentage of the viewport height gives the section breathing room on
     larger screens while the minimum ensures it never gets too small on
     mobile devices. */
  height: 65vh;
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

/*
 * Hero content panel
 *
 * The overlay inside the hero section contains the company name, tagline and call‑to‑action.  To
 * mirror the layout from the original blue style we align the contents to the left and constrain
 * the panel’s width so that it doesn’t stretch across the entire hero.  A slightly opaque dark
 * background provides separation between the text and the photo, while generous padding and a
 * subtle border radius give the panel a refined appearance.  The ::before pseudo‑element
 * defined below creates a thin vertical accent bar along the left edge using EuroPack’s brand
 * colours.  Relative positioning allows the pseudo‑element to be absolutely positioned within
 * the panel.
 */
.hero-overlay {
  position: relative;
  z-index: 2;
  /* Soften the overlay and enlarge it slightly to create a more spacious
     canvas for the headline and tagline. */
  background: rgba(0, 0, 0, 0.45);
  padding: 50px 60px;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/*
 * Accent bar for hero content
 *
 * A vertical bar on the left edge of the hero panel echoes EuroPack’s signature blue gradient.  The
 * bar is absolutely positioned within the panel and spans its full height.  A small border radius
 * softens the corners and ties the element into the rest of the design.
 */
.hero-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* Make the accent bar slightly wider to better anchor the overlay */
  width: 8px;
  height: 100%;
  background-image: linear-gradient(180deg, #00c6ff, #0072ff);
  border-radius: 4px;
}

.hero h1 {
  /* Increase the base hero heading size to better fill the hero section */
  /* Adopt the modern Poppins font declared in index.html and increase
     the size to command attention.  Adjust line height for improved
     readability. */
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.hero p {
  /* General paragraph styling within the hero */
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 15px;
}

/* Tagline styling: emphasise the motto with a semi‑bold weight and
   slightly larger font size. */
.hero .tagline {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 24px;
  margin: 0 0 10px;
  opacity: 0.9;
}

/* Subtitle styling: used for secondary one-line descriptions inside
   the hero. */
.hero .subtitle {
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 10px;
}

/* Slightly differentiate the first part of the company name */
.hero h1 span {
  font-weight: 600;
  letter-spacing: 1px;
  /* Apply a brand colour to the first part of the heading for contrast */
  color: #00c6ff;
}

/* Section common styles */
.section {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;
}

.section h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 20px;
  color: #333;
}

/* Values list */
.values-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.values-list li {
  width: calc(33.333% - 20px);
  margin: 10px;
  padding: 15px;
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .values-list li {
    width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .values-list li {
    width: 100%;
  }
}

/* Vision & Mission cards */
.vision-mission {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.vision-mission .card {
  flex: 1 1 300px;
  background: #ffffff;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.vision-mission .card h3 {
  margin-top: 0;
  font-size: 22px;
  margin-bottom: 10px;
}

/* ISO section */
.iso-section p {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 20px;
}

.iso-cards {
  /* Display ISO cards in a responsive grid layout */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  justify-items: center;
}

.iso-card {
  /* Card container with shadow and rounded edges for a professional look */
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  /* Limit the card width on larger screens for a balanced layout */
  max-width: 300px;
}

.iso-card img {
  /* Ensure images fill the card width and maintain aspect ratio */
  width: 100%;
  height: 200px;
  display: block;
  object-fit: cover;
}

.iso-title {
  /* Add padding and subtle background to separate the caption from the image */
  padding: 15px;
  font-weight: bold;
  font-size: 18px;
  background-color: #f5f5f5;
  /* Reset margin since padding handles spacing */
  margin: 0;
}

/* Footer */
footer {
  background: #333;
  color: #fff;
  padding: 20px 0;
}

footer .social {
  text-align: center;
  margin-bottom: 10px;
}

footer .social span {
  font-weight: bold;
  margin-right: 10px;
}

footer .social a {
  color: #fff;
  margin: 0 10px;
  font-weight: bold;
}

footer .social a:hover {
  color: #007bff;
}

footer .copyright {
  text-align: center;
  font-size: 0.9rem;
  color: #ccc;
}

/* --------------------------------------------------------------------------
 * ISO card hover animations
 *
 * Add subtle animations to the ISO cards to make the section feel more alive.
 * Cards lift slightly and cast a deeper shadow on hover, while images within
 * the cards gently scale up.  Transitions are applied on transform and
 * box-shadow properties to ensure smooth motion.
 * ------------------------------------------------------------------------ */
.iso-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.iso-card img {
  transition: transform 0.3s ease;
}

.iso-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.iso-card:hover img {
  transform: scale(1.05);
}

/* ---------------------------------------------------------------------------
 * Combined styles from modern-styleblue.css
 *
 * The content below has been merged directly from the previous
 * `modern-styleblue.css` file to consolidate all modern site-wide styles into
 * a single stylesheet. Consolidating the CSS files simplifies maintenance and
 * avoids the need to include multiple style sheets across different pages.
 * Paths to images remain relative to this file, so ensure this stylesheet
 * stays in the same directory as before to keep URLs valid.
 * ---------------------------------------------------------------------------*/
/* Modern responsive styles for EuroPack */

/* Basic resets */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  color: #333;
  line-height: 1.6;
}

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Header and navigation */
header {
  background: #ffffff;
  border-bottom: 1px solid #ddd;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.navbar-logo img {
  height: 60px;
}

.navbar-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.navbar-menu li {
  margin-left: 20px;
  position: relative;
}

.navbar-menu a {
  font-weight: bold;
  color: #333;
  padding: 8px 0;
  display: block;
}

.navbar-menu li:hover > a {
  color: #007bff;
}

/* Submenu styling */
.navbar-menu li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #ddd;
  padding: 10px 0;
  min-width: 200px;
  z-index: 1000;
}

.navbar-menu li:hover ul {
  display: block;
}

.navbar-menu li ul li {
  margin: 0;
}

.navbar-menu li ul a {
  padding: 8px 20px;
  font-weight: normal;
  color: #333;
}

.navbar-menu li ul a:hover {
  background: #f0f0f0;
  color: #007bff;
}

/* Hero section */
/*
 * The hero section sits at the very top of the page and is the first
 * impression visitors get of EuroPack. To give this area a more
 * contemporary feel we layer a subtle dark gradient over the existing
 * artwork. On top of that gradient we draw a fine grid using two
 * perpendicular repeating linear gradients. The grid adds visual
 * texture without overpowering the content and is barely noticeable
 * on smaller screens thanks to a low opacity. To ensure the pseudo
 * element stays contained within the section we set overflow hidden.
 */
/*
 * Hero section
 *
 * The hero area sets the stage for your brand, so instead of a flat colour
 * gradient we layer your supplied factory photograph underneath a dark
 * gradient. This technique produces a crisp, modern look while ensuring
 * the overlaid text remains legible on top of a busy background. The
 * background-size and background-position properties ensure the photo
 * covers the full width of the viewport and is nicely centered across
 * different screen sizes. Overflow hidden keeps any child effects (like
 * the subtle diagonal stripe pattern below) contained within the section.
 */
/*
 * Alternative hero treatment
 *
 * For a fresh creative approach we shift away from the full‑frame dark gradient
 * overlay. Instead we let the factory photograph shine and layer a large
 * tinted polygon over it to add visual dynamism. The angled shape draws
 * the eye toward the content area while leaving a portion of the image
 * unobstructed. The hero uses flex layout to align its content toward the
 * left of the viewport, giving the design a more editorial feel.
 */
/*
 * Dark hero with gradient accents
 *
 * This design takes inspiration from premium industrial sites that employ
 * high‑contrast backgrounds and vibrant accent colours. The hero image is
 * darkened uniformly, allowing the copy to stand out without additional
 * panels. Content is aligned to the left with generous horizontal padding.
 */
/*
 * Hero container
 *
 * The home page hero should mirror the look and feel of the original blue themed design.  In that
 * implementation the photograph spans the full width of the viewport and the copy is aligned
 * toward the left side of the section.  Generous horizontal padding ensures the text doesn’t run
 * into the edge of the screen, while a minimum height keeps the hero tall enough to make an impact
 * on large displays.  We retain the subtle desaturation and contrast filter to give the image an
 * industrial feel and maintain readability when white text is placed on top.  Because the hero may
 * grow taller than its minimum height on very tall screens, we specify a min-height instead of a
 * fixed height and allow the browser to determine the final height automatically.
 */
.hero {
  position: relative;
  /* Use your uploaded factory photo as the full‑bleed background.  To give it a more industrial feel we
   * desaturate the image slightly and increase contrast.  This makes the overlaid text and pattern stand
   * out while still celebrating the manufacturing environment.  The photo scales to cover the viewport.
   */
  background-image: url('images/gallery/factory/factory013.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Subtle filter to give the photograph a more industrial, cinematic quality. */
  filter: grayscale(15%) contrast(1.1) brightness(0.9);
  /* Provide a tall, flexible hero: minimum height ensures the section is impactful on large screens while
   * still allowing it to shrink gracefully on smaller devices.  Removing the fixed height allows the hero
   * to expand when content wraps.  */
  min-height: 500px;
  color: #fff;
  display: flex;
  align-items: center;
  /* Align the hero content toward the left to follow the editorial layout of the original design */
  justify-content: flex-start;
  /* Left‑align text inside the hero */
  text-align: left;
  overflow: hidden;
  /* Add generous horizontal padding to prevent text from hugging the edges */
  padding: 0 8%;
}

/*
 * Decorative overlay: tinted polygon
 *
 * A before pseudo‑element renders a tinted shape over a large portion of
 * the hero. The clip‑path definition draws a quadrilateral that slants
 * downward from the top right toward the bottom left, leaving the
 * bottom‑right corner of the photo exposed. Adjust the clip‑path
 * coordinates to alter the angle and coverage of the shape. A semi‑opaque
 * navy colour (with alpha) ties into EuroPack’s branding without
 * overwhelming the image.
 */
/*
 * The before pseudo‑element now renders a radial gradient to create a
 * spotlight. The gradient starts nearly transparent at the focal point
 * (40% across, 50% down) and becomes progressively darker toward the
 * edges. Adjust the position and colour stops to fine‑tune the effect.
 */
/*
 * The split panel is rendered via a before pseudo‑element anchored to
 * the right side of the hero. Its polygon clip‑path creates an
 * angled lower edge so the panel tapers toward the left. Adjust the
 * width and the final vertex to tweak the slope and coverage. The
 * semi‑opaque colour echoes EuroPack’s branding.
 */
/* Dark overlay across the entire hero to ensure the photo doesn’t overpower
 * the content. The overlay sits behind the glass card and above the
 * background image.
 */
/*
 * Radial spotlight overlay
 *
 * To keep the factory photograph legible while allowing the text to sit directly on the image, we lay a
 * radial gradient across the hero.  The gradient is brightest behind the copy and darkens toward the
 * edges, guiding the viewer’s attention without the need for additional cards or panels.  This follows
 * common hero section best practices: use a strong image, a clear headline and a concise CTA.
 */
/*
 * Radial spotlight overlay
 *
 * We still apply a subtle radial gradient over the background image to guide the viewer’s eye toward
 * the content area.  However, by aligning the hero content to the left we also shift the focal point
 * of the gradient to roughly one third across the hero.  The gradient starts relatively light at the
 * focal point and darkens toward the edges, improving contrast behind the text while leaving the
 * right portion of the image visible.  The overlay sits behind the text panel but above the photograph.
 */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 25% 50%, rgba(0, 35, 75, 0.6) 0%, rgba(0, 35, 75, 0.8) 50%, rgba(0, 35, 75, 0.9) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Remove the blueprint grid overlay: we no longer draw a secondary ::after element on the hero. */
.hero::after {
  display: none;
}

/* Semi‑transparent container for hero text. We lighten the overlay
 * slightly and add a blur effect to separate the text from the
 * underlying illustration. A soft border radius rounds the corners
 * for a more refined appearance.
 */
/*
 * The overlay panel sits on top of the hero background and houses the
 * company name, tagline and call-to-action button. To achieve a
 * contemporary 'glassmorphism' effect we use a slightly darker
 * semi-transparent background paired with a backdrop blur and subtle
 * saturation. A light border adds definition without being obtrusive.
 */
/*
 * The content panel inside the alternative hero
 *
 * With the tinted shape above taking care of contrast, we lighten the
 * overlay panel itself. A subtle translucent black background keeps text
 * separated from the photograph where the tint is absent. The panel
 * sits above the before pseudo‑element via z-index so that the tinted
 * polygon does not obscure the copy. Left alignment and a smaller
 * maximum width anchor the content in the left portion of the hero.
 */
/*
 * Overlay panel for spotlight design
 *
 * This panel contains the site title, tagline and call‑to‑action. We keep
 * it minimally intrusive: a semi‑transparent dark backdrop pairs with a
 * slight blur so the underlying photo softly shows through. An accent
 * bar on the left adds a pop of colour and references the brand’s palette.
 */
/*
 * Glass card overlay
 *
 * A frosted glass card sits at the centre of the hero, creating a focal
 * point for the copy. It uses a semi‑transparent white background with a
 * blur effect to subtly separate it from the image behind. The card has a
 * soft border and shadow to give the impression of depth. Text is
 * centre‑aligned to maintain balance within the card.
 */
/*
 * Hero content container
 *
 * Unlike the previous iteration that used a frosted glass card, this version allows the text to sit
 * directly on top of the tinted photograph.  We remove the panel’s background and blur so there are
 * no visible cards, creating a cleaner look.  A small vertical accent bar is added via the ::before
 * pseudo‑element to echo EuroPack’s brand colours.  We also add text shadow to improve legibility
 * against the darkened image.
 */
/*
 * Override of hero-overlay
 *
 * The primary styles for .hero-overlay are defined near the top of this file.  To avoid conflicting
 * declarations, this rule is deliberately left empty.  Additional typography rules for the
 * headings and text inside the overlay follow below.
 */
.hero-overlay {
  /* intentionally empty to defer to the earlier definition */
}

/* Accent bar for hero content
 *
 * The actual accent bar is defined near the start of this stylesheet.  We intentionally leave this
 * rule empty so that the earlier definition takes effect.  Removing the display:none declaration
 * here ensures that the bar remains visible in the merged stylesheet.
 */
.hero-overlay::before {
  /* Intentionally left blank to avoid overriding the accent bar defined earlier */
}

.hero-overlay h1 {
  /* Increased font size for the main heading to improve readability and impact */
  font-size: 60px;
  margin-bottom: 10px;
}

/* Gradient accent on the company name */

/* Tagline directly beneath the main heading */
.hero-overlay .tagline {
  /* Increase tagline size to better complement the larger heading */
  font-size: 26px;
  margin-bottom: 5px;
}

/* Additional subtitle or motto */
.hero-overlay .subtitle {
  /* Slightly larger subtitle for improved hierarchy */
  font-size: 20px;
  margin-bottom: 20px;
  color: #e0e0e0;
}

/* Call‑to‑action button styling */
/* Container for call-to-action buttons */
.cta-buttons {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  /* Align buttons to the left to follow the left‑aligned editorial layout */
  justify-content: flex-start;
}
/*
 * Buttons in the glass card
 *
 * We define two button styles: a primary button with a solid fill and a
 * secondary button with an outline. Both include transitions for a smooth
 * hover effect. Adjust the colour variables to align with your brand.
 */
.btn-primary {
  display: inline-block;
  /* Increase padding and font size for a more prominent call‑to‑action */
  padding: 14px 36px;
  font-size: 18px;
  background-image: linear-gradient(90deg, #00c6ff, #0072ff);
  color: #ffffff;
  border-radius: 4px;
  font-weight: bold;
  border: none;
  text-decoration: none;
  transition: background-image 0.3s ease;
}

.btn-primary:hover {
  background-image: linear-gradient(90deg, #00a6d6, #005fb3);
}

.btn-secondary {
  display: inline-block;
  padding: 14px 36px;
  font-size: 18px;
  background-color: transparent;
  color: #0072ff;
  border: 2px solid #0072ff;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-secondary:hover {
  background-image: linear-gradient(90deg, #00c6ff, #0072ff);
  color: #ffffff;
}

/*
 * Product category cards in the hero
 *
 * Many high‑performing industrial websites use iconography or small panels in
 * their hero sections to illustrate the industries they serve or products
 * they offer. Taking inspiration from these examples, we
 * introduce a row of translucent cards below the call‑to‑action. Each card
 * features a title and short description for EuroPack’s core product lines
 * and links directly to the relevant product page. A subtle backdrop blur
 * and border create a glass‑like effect, while a hover transition lifts
 * the card slightly to add interactivity. The flex container wraps on
 * smaller screens to maintain responsiveness.
 */
 .hero-cards {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   margin-top: 40px;
 }

 .hero-card {
   display: block;
   flex: 1 1 200px;
   max-width: 240px;
   padding: 20px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 8px;
   backdrop-filter: blur(6px);
   color: #fff;
   text-decoration: none;
   transition: transform 0.3s ease, background 0.3s ease;
 }

 .hero-card:hover {
   transform: translateY(-5px);
   background: rgba(255, 255, 255, 0.12);
 }

 .hero-card h4 {
   margin: 0 0 8px;
   font-size: 18px;
   font-weight: bold;
   color: #fff;
 }

 .hero-card p {
   margin: 0;
   font-size: 14px;
   color: #f0f0f0;
 }

 @media (max-width: 768px) {
   .hero-cards {
     justify-content: center;
   }
   .hero-card {
     flex: 1 1 calc(50% - 20px);
     max-width: none;
   }
 }


/* Responsive adjustments for hero */
@media (max-width: 768px) {
  .hero-overlay h1 {
    font-size: 40px;
  }
  .hero-overlay .tagline,
  .hero-overlay .subtitle {
    font-size: 16px;
  }
}

/* Section common styles */
.section {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;
}

.section h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 20px;
  color: #333;
}

/* Values list */
.values-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.values-list li {
  width: calc(33.333% - 20px);
  margin: 10px;
  padding: 15px;
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .values-list li {
    width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .values-list li {
    width: 100%;
  }
}

/* Vision & Mission cards */
.vision-mission {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.vision-mission .card {
  flex: 1 1 300px;
  background: #ffffff;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.vision-mission .card h3 {
  margin-top: 0;
  font-size: 22px;
  margin-bottom: 10px;
}

/* ISO section */
.iso-section p {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 20px;
}

.iso-cards {
  /* Display ISO cards in a responsive grid layout */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  justify-items: center;
}

.iso-card {
  /* Card container with shadow and rounded edges for a professional look */
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  /* Limit the card width on larger screens for a balanced layout */
  max-width: 300px;
}

.iso-card img {
  /* Ensure images fill the card width and maintain aspect ratio */
  width: 100%;
  height: 200px;
  display: block;
  object-fit: cover;
}

.iso-title {
  /* Add padding and subtle background to separate the caption from the image */
  padding: 15px;
  font-weight: bold;
  font-size: 18px;
  background-color: #f5f5f5;
  /* Reset margin since padding handles spacing */
  margin: 0;
}

/* Footer */
footer {
  background: #333;
  color: #fff;
  padding: 20px 0;
}

footer .social {
  text-align: center;
  margin-bottom: 10px;
}

footer .social span {
  font-weight: bold;
  margin-right: 10px;
}

footer .social a {
  color: #fff;
  margin: 0 10px;
  font-weight: bold;
}

footer .social a:hover {
  color: #007bff;
}

footer .copyright {
  text-align: center;
  font-size: 0.9rem;
  color: #ccc;
}/* Contact page specific styles appended below to override or extend existing styles for contact page */
/* Contact page custom styles for EuroPack */

/* Override the base hero for the contact page */
.hero.contact-hero {
  /* Use a vibrant gradient instead of a photographic background */
  background-image: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%);
  /* Provide enough height to make an impression without overwhelming the page */
  min-height: 360px;
  /* Center the content both horizontally and vertically */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Prevent background from repeating */
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  position: relative;
}

/* Dark overlay on the contact hero to improve text contrast */
.hero.contact-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

/* Style for the panel containing the hero text on the contact page */
.hero.contact-hero .contact-overlay {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.1);
  padding: 40px;
  max-width: 600px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  text-align: center;
}

/* Headline styling within the contact hero */
.hero.contact-hero .contact-overlay h1 {
  font-size: 50px;
  margin: 0 0 10px;
  letter-spacing: 2px;
}

/* Subtitle styling within the contact hero */
.hero.contact-hero .contact-overlay .subtitle {
  font-size: 20px;
  margin: 0;
}

/* Contact section styling */
.contact-section {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
}

.contact-section h2 {
  text-align: center;
  font-size: 32px;
  margin-bottom: 40px;
  color: #333;
}

/* Grid layout for the contact cards */
.contact-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* Individual contact card */
.contact-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 25px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  /* Prepare the element for animation */
  transform: translateY(20px);
}

/* Animated entrance for contact cards */
.contact-card.animate {
  animation: fadeInUp 0.6s forwards;
}

.contact-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.contact-card h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 24px;
  color: #0072ff;
  text-transform: uppercase;
}

/* Contact detail row */
.contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.contact-item i {
  font-size: 20px;
  color: #0072ff;
  margin-right: 12px;
  margin-top: 2px;
}

.contact-item p,
.contact-item a {
  margin: 0;
  font-size: 16px;
  color: #333;
}

/* Style links within contact cards */
.contact-item a {
  color: #0072ff;
  text-decoration: none;
}

.contact-item a:hover {
  text-decoration: underline;
}

/* Map container styling */
.map-container {
  margin-top: 15px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.map-container iframe {
  width: 100%;
  height: 250px;
  border: 0;
}

/* Call-to-action message */
.contact-cta {
  text-align: center;
  margin-top: 60px;
}

.contact-cta h4 {
  margin: 0;
  font-size: 20px;
  color: #0072ff;
  margin-bottom: 10px;
}

.contact-cta p {
  margin: 0;
  font-size: 16px;
  color: #555;
}

/* Highlight the active navigation link */
.navbar-menu a.active {
  color: #007bff;
}

/* Fade in animation definition */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}