/* 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 {
  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);
  min-height: 500px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  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【152090046992796†L520-L526】.
 */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 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.
 */
.hero-overlay {
  position: relative;
  z-index: 2;
  padding: 40px;
  max-width: 700px;
  color: #ffffff;
  text-align: left;
  /* Remove backgrounds and borders to eliminate the card appearance */
  background: transparent;
  border: none;
  backdrop-filter: none;
  box-shadow: none;
  /* Add text shadow to enhance legibility on the image */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  /* extra padding on the left for the accent bar */
  padding-left: 50px;
}

/* Accent bar for hero content */
.hero-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background-image: linear-gradient(180deg, #00c6ff 0%, #0072ff 100%);
  border-radius: 3px;
}

.hero-overlay h1 {
  font-size: 56px;
  margin-bottom: 10px;
}

/* Gradient accent on the company name */



/* Tagline directly beneath the main heading */
.hero-overlay .tagline {
  font-size: 22px;
  margin-bottom: 5px;
}

/* Additional subtitle or motto */
.hero-overlay .subtitle {
  font-size: 18px;
  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;
  padding: 12px 32px;
  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: 12px 32px;
  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【840343113029685†L505-L514】. 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: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.iso-card {
  text-align: center;
  max-width: 200px;
}

.iso-card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.iso-title {
  margin-top: 10px;
  font-weight: bold;
}

/* 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;
}