.distributor-container {
    padding: 40px 20px;
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .region-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  
  .region-buttons button {
    background-color: #00A186;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .region-buttons button:hover {
    background-color: #008F72;
  }
  
  .region-images {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  
  .region-image {
    width: 100%; /* Ensure all images are responsive */
    max-width: 300px; /* Set a consistent maximum width */
    height: auto; /* Maintain aspect ratio */
    margin: 10px auto; /* Center the images */
    display: block; /* Ensure images are block elements */
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  .region-image.hidden {
    display: none;
  }
  
  .region-section {
    background-color: white;
    text-align: center; /* Center-align text and images */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px; /* Add spacing between sections */
  }
  
  .region-section.hidden {
    display: none;
  }
  
  .region-section p {
    line-height: 1.7;
    font-size: 16px;
    margin-bottom: 15px; /* Add spacing between text and image */
  }

  .region-buttons button {
    padding: 10px 20px;
    margin: 5px;
    background-color: #00A186;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.region-buttons button:hover {
    background-color: #007d64;
}

.region-buttons button.active {
    background-color: #003d33; /* Darker when active */
}
.distributor-image {
  width: 100%;          /* The image fills the full width of the page */
  height: auto;         /* Maintains aspect ratio */
  display: block;       /* Removes any extra gaps below the image */
  max-width: 100%;      /* For safety: prevents it from becoming wider than the page */
}
.distributor-hero {
  text-align: center;
  padding: 20px;
}

.distributor-text {
  max-width: 800px;
  margin: 0 auto 20px auto;  /* Centers and adds a bit of spacing below */
  padding: 0 15px;
  color: #00A186;  /* Bioscreen green color */
}

.distributor-text h1 {
  font-size: 2em;
  margin-bottom: 10px;
  color: #00A186;  /* Bioscreen green color */
}

.distributor-text p {
  font-size: 1.1em;
  line-height: 1.6;
  color: #000000;
}

.distributor-image {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
/* Make the header section flex and center everything */
.distributor-header {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers horizontally */
  margin-bottom: 20px; /* Add spacing below */
}

/* Center the main heading text */
.distributor-main-heading {
  text-align: center;
  color: #00A186; /* Bioscreen green */
  margin-bottom: 15px;
}

.region-section p strong {
  font-size: 18px;      /* gör texten större */
  font-weight: 700;     /* gör den tydligt fet */
  text-transform: uppercase; /* (valfritt) gör länder i versaler */
  color: #000;          /* kan ändras om du vill ge dem färg */
}

/* --- DISTRIBUTOR TEXT STYLING --- */

/* Country name / heading */
.region-section p.distributor-country {
  color: #00A186;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 22px;      /* larger than 16px */
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 4px;   /* tighter spacing above the company name */
}

/* Company name */
.region-section p.distributor-company {
  color: #000;
  font-weight: 700;
  font-size: 18px;      /* matches the old <strong> style */
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 6px;
}

/* Extra spacing below each country's information block */
.region-section p:last-of-type {
  margin-bottom: 28px; /* adjust between 25–32px to your preference */
}