/* CSS Document */
* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  margin: 0;
  padding: 0;
}




/* =====================
   SHARED VISIBILITY
===================== */
.hidden {
  display: none !important;
}






/* Media query for MOBILE DEVICES*/
@media only screen and (max-width : 480px) {
	

.products_container {
  max-width: 1200px;
  margin: auto;
  padding: 40px 20px;
  text-align: center;
}

#products_heading {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 30px;	
	font-weight: bold;
	color: #052739;  
    margin-bottom: 5px;
	scroll-margin-top: 130px; /* Adjust this offset as needed so the links scroll to where you need them to be!!!! YAY */
}

.products_blurb {  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 16px;
  margin-top: 10px;
  color: #666;
}

	
 
/* =====================
   TOGGLE BUTTONS
==================== */	

.view-toggle {
  display: flex !important;
  flex-direction: row !important; /* always horizontal */
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  flex-wrap: nowrap;             /* prevent stacking */
}

/* General toggle button style */
.view-btn {
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 6px 0; /* tighter horizontal padding for logos button */
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;   /* force same width for all buttons */
  min-width: 40px;
  box-sizing: border-box;
}

.view-btn.active {
  border-color: #000;
}

	
/* Map button image */
.map-icon {
  width: 24px;       /* same size as your other buttons */
  height: 24px;
  object-fit: contain; /* preserves aspect ratio */
  display: block;
}	
	
	
/* Logos button specific tweaks */
.logos-btn {
  padding: 6px 0;  /* match general button */
}

/* 2 columns x 3 rows grid of cobalt blue ovals */
.logo-grid-icon {
  display: grid;
  grid-template-columns: repeat(2, 10px); /* 2 columns */
  grid-template-rows: repeat(3, 6px);     /* 3 rows */
  grid-gap: 4px;
  justify-items: center;  /* center each oval horizontally in its column */
  align-items: center;    /* center each row vertically */
}

/* individual ovals */
.logo-grid-icon span {
  width: 10px;
  height: 6px;
  background-color: #052739; /* matches products heading */
  border-radius: 50%;
  display: block;
}	
	
	




	
/* =====================
   MAP
===================== */
.map-wrapper {
  position: relative;
  max-width: 600px;
  margin: 20px auto;
}

.world-map {
  width: 100%;
}
	
.hotspot {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #1f3b4d;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
  z-index: 2;
}

/* Invisible hover precision zone */
.hotspot::marker { } /* ignored by browser */

/* Tooltip bubble */
.hotspot::after {
  content: attr(data-country);
  position: absolute;
  bottom: 170%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(31,59,77,0.95);
  color: #fff;
  padding: 5px 8px;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
  z-index: 1001;
}

/* Tooltip arrow */
.hotspot::before {
  content:'';
  position:absolute;
  bottom:145%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color: rgba(31,59,77,0.95);
  opacity:0;
  transition: opacity .15s ease;
  pointer-events: none;
  z-index: 1001;
}

/* Raise hovered hotspot above neighbours */
.hotspot:hover {
  z-index: 1000;
}

/* Show tooltip ONLY on direct hover */
.hotspot:hover::after,
.hotspot:hover::before {
  opacity: 1;
}

.hotspot:hover {
  box-shadow: 0 0 0 3px rgba(35,84,116,0.36);
}

	


 /* ==========
    ACCORDIAN
  ==================== */	
	
.accordion {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  text-align: left;
  margin-bottom: 100px;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-header { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  line-height: .8;
  color:#222222;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align items to the left */
  cursor: pointer;
  padding: 10px 15px 10px 55px; /* extra left padding so text doesn't overlap flag */
  background-color: #f7f7f7;
  position: relative;
  text-align: left; /* Ensure text is left-aligned */
}

.accordion-header img {
  width: 30px;
  height: 20px;
  object-fit: cover;
  border: 1px solid #ccc;
  margin-right: 10px;
  position: absolute;
  left: 15px; /* Flag stays on the left */
}
	
.accordion-header::after {
  content: "▸";
  margin-left: auto;
  transition: transform 0.3s ease;
}

.accordion-item.active .accordion-header::after {
  transform: rotate(90deg);
}	
	
.accordion-content {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: #fff;
}

.accordion-content ul {
  list-style: none;       /* Remove default bullets */
  padding: 10px 20px;
  margin: 0;
}

.accordion-content li {
  position: relative;     /* Needed for custom bullet */
  padding-left: 20px;     /* Space for bullet */
  margin-bottom: 5px;
  padding-top: 2px;       /* optional for better vertical alignment */
  padding-bottom: 2px;
}

.accordion-item.active .accordion-content {
  max-height: 1000px; /* big enough for your longest list */
	}
	
/* Small blue circle bullet */
.accordion-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;               /* Size of circle */
  height: 8px;
  background-color: #052739; /* Blue color */
  border-radius: 50%;        /* Make it circular */
}

	
/* Style links inside your accordion content */
.accordion-content li a {
  color: #2D2D2D;   /* Color of the list TEXT */
  text-decoration: none;  /* Remove underline */
  transition: color 0.2s; /* Smooth hover effect */
}	
.accordion-content li a:hover {
  color: #072546;         /* Darker blue on hover */
  text-decoration: underline; /* Optional: underline on hover */
}	


/* =====================
   LOGOS GRID – MOBILE
===================== */


.logos-view .grid-container {
  grid-template-columns: repeat(2, 1fr); /* 2 across on mobile */
}
	

.logos-view {
  max-width: 1000px;
  margin: 40px auto 100px;
  padding: 0 20px;
}

.grid-container {
  display: grid;
  gap: 2px;
  align-items: center;
  justify-items: center;
}

.grid-item img {
  max-width: 100%;
  max-height: 120px; /* keeps logos tidy */
  object-fit: contain;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.grid-item a:hover img {
  transform: scale(1.10);
}
	
/* =====================
   for Logos to stagger and fade in..
===================== */
	
.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
}

.logos-view { padding: 40px 20px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}	
	
.grid-item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.logos-view.show .grid-item {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 { transition-delay: 0.05s; }
.delay-2 { transition-delay: 0.12s; }
.delay-3 { transition-delay: 0.20s; }
.delay-4 { transition-delay: 0.35s; }	
	
	

	
/* =====================
   CAROUSEL
===================== */
.carousel {
  position: relative;
  margin-top: 0px;
  touch-action: pan-y;
}

.slides {
  
  overflow: visible;
}

/* =====================
   SLIDE ANIMATION
===================== */
.slide {
  display: none;
  width: 100%;
  box-sizing: border-box;
}

.slide.active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
	
.slide.active {
    flex-direction: column;
    gap: 15px;
  }
  .product-content {
    flex-direction: column;
    align-items: center;
    gap: 0px;
  }
  .map-wrapper {
    max-width: 90%;
  }
  .product-left .logo {margin-top:-30px; margin-bottom:-40px;
    height: 125px;
  }

	

.product-center {
  width: 100%;
  display: flex;
  justify-content: center;
}
	
	

 .product-center img.product-image {
    height: 230px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    opacity: 0;
  }

	

  .product-right {  gap: 10px; /* or 12px for more spacing */
    align-items: center;
	 
  }
  .product-right .product-name { color:#010E36; font-weight: bold;  font-size: 20px;  }
	
  .product-right .country-origin {
    font-size: 17px;
  }
  .product-right .flag { display:block; margin: 0 auto;
	 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.70));
    height: 30px;
  }	
	
.info-button {
  display: block;
  margin: 20px auto 0;
  width: fit-content;
  padding: 5px 9px;
  font-size: 13px; /* adjustment Point */
  text-decoration: none;
  color: white;
  background-color: #052739;   /* your site blue */
  border-radius: 4px;
  transition: 0.2s ease;
}

.info-button:hover {
  background-color: #6E6E6E;   /* grey */
}	

	
/* =====================
   PRODUCT IMAGE FADE 
===================== */

.slide.active .product-center img.product-image {
  animation: fadeInProduct 0.4s ease forwards;
}

@keyframes fadeInProduct {
  from { opacity: 0; }
  to   { opacity: 1; }
}


	
		
	
	
/* =====================
   NAVIGATION
===================== */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 40px;
  cursor: pointer;
  color: #999;
  z-index: 10;
}

.prev { left: 0; }
.next { right: 0; }
	
		


}








/* Media query for TABLETS*/
@media only screen and ( min-width : 481px ) and (max-width : 799px ){


.products_container {
  max-width: 1200px;
  margin: auto;
  padding: 40px 20px;
  text-align: center;
}

#products_heading {
  font-size: 35px;
  font-weight: bold;
  color: #052739;
  margin-bottom: -10px;
}

.products_blurb {  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 18px;
  margin-top: 10px;
  color: #666;
}



/* =====================
   TOGGLE BUTTONS
==================== */	

.view-toggle {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}

/* General toggle button style */
.view-btn {
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 6px 0; /* tighter horizontal padding for logos button */
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

   width: 45px;   /* force same width for all buttons */
  min-width: 45px;
  box-sizing: border-box;
}

.view-btn.active {
  border-color: #000;
}

/* Map button image */
.map-icon {
  width: 24px;       /* same size as your other buttons */
  height: 24px;
  object-fit: contain; /* preserves aspect ratio */
  display: block;
}		
	
	
	
/* Logos button specific tweaks */
.logos-btn {
  padding: 6px 0;  /* match general button */
}

/* 2 columns x 3 rows grid of cobalt blue ovals */
.logo-grid-icon {
  display: grid;
  grid-template-columns: repeat(2, 10px); /* 2 columns */
  grid-template-rows: repeat(3, 6px);     /* 3 rows */
  grid-gap: 4px;
  justify-items: center;  /* center each oval horizontally in its column */
  align-items: center;    /* center each row vertically */
}

/* individual ovals */
.logo-grid-icon span {
  width: 10px;
  height: 6px;
  background-color: #052739; /* matches products heading */
  border-radius: 50%;
  display: block;
}

/* Globe SVG */
.globe-icon {
  width: 24px;
  height: 24px;
}
	
		
	
/* =====================
   MAP
===================== */
.map-wrapper {
  position: relative;
  max-width: 500px;
  margin: 0px auto;
}

.world-map {
  width: 100%;
}
	
	
	
.hotspot {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #1f3b4d;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
  z-index: 2;
}

/* Invisible hover precision zone */
.hotspot::marker { } /* ignored by browser */

/* Tooltip bubble */
.hotspot::after {
  content: attr(data-country);
  position: absolute;
  bottom: 170%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(31,59,77,0.95);
  color: #fff;
  padding: 5px 8px;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
  z-index: 1001;
}

/* Tooltip arrow */
.hotspot::before {
  content:'';
  position:absolute;
  bottom:145%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color: rgba(31,59,77,0.95);
  opacity:0;
  transition: opacity .15s ease;
  pointer-events: none;
  z-index: 1001;
}

/* Raise hovered hotspot above neighbours */
.hotspot:hover {
  z-index: 1000;
}

/* Show tooltip ONLY on direct hover */
.hotspot:hover::after,
.hotspot:hover::before {
  opacity: 1;
}

.hotspot:hover {
  box-shadow: 0 0 0 3px rgba(35,84,116,0.36);
}



 /* =====================
    ACCORDIAN
  ==================== */	
	
.accordion {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  text-align: left;
  margin-bottom: 100px;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-header { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.1;
  color:#222222;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align items to the left */
  cursor: pointer;
  padding: 8px 12px 8px 55px; /* extra left padding so text doesn't overlap flag */
  background-color: #f7f7f7;
  position: relative;
  text-align: left; /* Ensure text is left-aligned */
}

.accordion-header img {
  width: 30px;
  height: 20px;
  object-fit: cover;
  border: 1px solid #ccc;
  margin-right: 10px;
  position: absolute;
  left: 15px; /* Flag stays on the left */
}
	
.accordion-header::after {
  content: "▸";
  margin-left: auto;
  transition: transform 0.3s ease;
}

.accordion-item.active .accordion-header::after {
  transform: rotate(90deg);
}	
	
.accordion-content {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: #fff;
}

.accordion-content ul {
  list-style: none;       /* Remove default bullets */
  padding: 10px 20px;
  margin: 0;
}

.accordion-content li {
  position: relative;     /* Needed for custom bullet */
  padding-left: 20px;     /* Space for bullet */
  margin-bottom: 5px;
  padding-top: 2px;       /* optional for better vertical alignment */
  padding-bottom: 2px;
}

.accordion-item.active .accordion-content {
  max-height: 1000px; /* big enough for your longest list */
	}
	
/* Small blue circle bullet */
.accordion-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;               /* Size of circle */
  height: 8px;
  background-color: #052739; /* Blue color */
  border-radius: 50%;        /* Make it circular */
}


	
/* Style links inside your accordion content */
.accordion-content li a {
  color: #2D2D2D;   /* Color of the list TEXT */
  text-decoration: none;  /* Remove underline */
  transition: color 0.2s; /* Smooth hover effect */
}	
.accordion-content li a:hover {
  color: #072546;         /* Darker blue on hover */
  text-decoration: underline; /* Optional: underline on hover */
}	

	
	
/* =====================
   LOGOS GRID – TABLET
===================== */
@media only screen and (min-width: 481px) and (max-width: 799px) {

.logos-view .grid-container {
    display: grid; /* make sure grid is applied */
    grid-template-columns: repeat(4, 1fr); /* 4 logos across */
    gap: 7px; /* spacing between logos */
    align-items: center;
    justify-items: center;
  }

  .grid-item img {
    max-height: 110px;
    width: auto;
    object-fit: contain;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

	
.logos-view .grid-item a:hover img {
  transform: scale(1.25);
}	
	

/* =====================
   for Logos to stagger and fade in..
===================== */
	
.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
}

.logos-view { padding: 40px 20px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}	
	
.grid-item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.logos-view.show .grid-item {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 { transition-delay: 0.05s; }
.delay-2 { transition-delay: 0.12s; }
.delay-3 { transition-delay: 0.20s; }
.delay-4 { transition-delay: 0.35s; }	
	
		
	}
	

/* =====================
   CAROUSEL
===================== */
.carousel {
  position: relative;
  margin-top: 40px;
}

.slides {
  position: relative;
  overflow: hidden;
}

/* =====================
   SLIDE ANIMATION
===================== */
.slide {
  display: none;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  transform: translateX(50px);
  transition: transform 1s ease, opacity 1s ease;
}

.slide.active {
  display: flex;
  flex-wrap: wrap;              /* allows second row */
  justify-content: center;
  align-items: center;
  opacity: 1;
  transform: translateX(0);
  gap: 10px;
}


	
	
	
	#products_heading {  
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 35px;	
	font-weight: bold;
	color: #052739;
 	margin-bottom: 5px;
    scroll-margin-top: 140px; /* Adjust this offset as needed so the links scroll to where you need them to be!!!! YAY */
}
	
	
  .product-content {
    display: flex;
	width: 100%;  
    justify-content: center;
    align-items: flex-start;
    gap: clamp(30px, 6vw, 70px);
  }
	
	
.product-left {
  flex: 0 0 150px; /* keeps logo area fixed */
  display: flex;
  justify-content: center;
  align-items: center;
}	
  .product-left .logo {
	   height: 150px; /* your existing height */
       width: auto;;
  }

	
	
.product-center img.product-image {
    height: 260px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    opacity: 0;
  }	
	
  /* product info below row, centered */
  .product-right { width: 100%;     
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    gap: 10px;
  }
  .product-right .product-name { color:#010E36; font-weight: bold;  font-size: 20px;  }
  
  
   .product-right .country-origin {margin-top: 10px;
    font-size: 17px;
  }
  .product-right .flag { display:block; margin: 0 auto;
	  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.70));
    height: 25px;
  }	
	
	
	
.info-button {
  display: block;
  margin: 20px auto 0;
  width: fit-content;
  padding: 5px 9px;
  font-size: 13px; /* adjustment Point */
  text-decoration: none;
  color: white;
  background-color: #052739;   /* your site blue */
  border-radius: 4px;
  transition: 0.2s ease;
}

.info-button:hover {
  background-color: #6E6E6E;   /* slightly lighter blue */
}	
	
	
/* =====================
   NAVIGATION
===================== */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 40px;
  cursor: pointer;
  color: #999;
  z-index: 10;
}

.prev { left: 0; }
.next { right: 0; }
	
	
/* =====================
   PRODUCT IMAGE FADE 
===================== */

.slide.active .product-center img.product-image {
  animation: fadeInProduct 0.4s ease forwards;
}

@keyframes fadeInProduct {
  from { opacity: 0; }
  to   { opacity: 1; }
}

	

	
}




/*  SCREEN SIZE  - DESKTOPS */
@media only screen and (min-width: 800px) {

  /* Container */
  .products_container {
    max-width: 900px;       /* narrower for tighter layout */
    margin: auto;
    padding: 40px 20px;
    text-align: center;
  }

  /* Heading */
  #products_heading {
    font-size: 40px;
    font-weight: bold;
    color: #052739;
	margin-top: 50px;
    margin-bottom: 5px;
	scroll-margin-top: 50px; /* Adjust this offset as needed so the links scroll to where you need them to be!!!! YAY */	
  }

  /* Subtitle */
  .products_blurb{
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 18px;
    margin-top: 10px;
    color: #666;
  }


/* =====================
   TOGGLE BUTTONS
==================== */	

.view-toggle {
  display: flex !important;       /* force flex */
  flex-direction: row !important; /* horizontal */
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}

/* General toggle button style */
.view-btn {
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 6px 0; /* tighter horizontal padding for logos button */
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 50px;   /* force same width for all buttons */
  min-width: 50px;
  box-sizing: border-box;
}

.view-btn.active {
  border-color: #000;
}

/* Map button image */
.map-icon {
  width: 24px;       /* same size as your other buttons */
  height: 24px;
  object-fit: contain; /* preserves aspect ratio */
  display: block;
}	
	
/* Logos button specific tweaks */
.logos-btn {
  padding: 6px 0;  /* match general button */
}

/* 2 columns x 3 rows grid of cobalt blue ovals */
.logo-grid-icon {
  display: grid;
  grid-template-columns: repeat(2, 10px); /* 2 columns */
  grid-template-rows: repeat(3, 6px);     /* 3 rows */
  grid-gap: 4px;
  justify-items: center;  /* center each oval horizontally in its column */
  align-items: center;    /* center each row vertically */
}

/* individual ovals */
.logo-grid-icon span {
  width: 10px;
  height: 6px;
  background-color: #052739; /* matches products heading */
  border-radius: 50%;
  display: block;
}

/* Globe SVG */
.globe-icon {
  width: 24px;
  height: 24px;
}
	
	
	
	
	
  /* =====================
     MAP
  ==================== */
  .map-wrapper {
    position: relative;
    max-width: 600px;
    margin: 20px auto;
  }

  .world-map {
    width: 100%;
  }
	
	
	
.hotspot {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #1f3b4d;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
  z-index: 2;
}

/* Invisible hover precision zone */
.hotspot::marker { } /* ignored by browser */

/* Tooltip bubble */
.hotspot::after {
  content: attr(data-country);
  position: absolute;
  bottom: 170%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(31,59,77,0.95);
  color: #fff;
  padding: 5px 8px;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
  z-index: 1001;
}

/* Tooltip arrow */
.hotspot::before {
  content:'';
  position:absolute;
  bottom:145%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color: rgba(31,59,77,0.95);
  opacity:0;
  transition: opacity .15s ease;
  pointer-events: none;
  z-index: 1001;
}

/* Raise hovered hotspot above neighbours */
.hotspot:hover {
  z-index: 1000;
}

/* Show tooltip ONLY on direct hover */
.hotspot:hover::after,
.hotspot:hover::before {
  opacity: 1;
}

.hotspot:hover {
  box-shadow: 0 0 0 3px rgba(35,84,116,0.36);
}

 /* =====================
    ACCORDIAN
  ==================== */	
	
.accordion {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  text-align: left;
  margin-bottom: 100px;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-header { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.1;
  color:#222222;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align items to the left */
  cursor: pointer;
  padding: 8px 12px 8px 55px; /* extra left padding so text doesn't overlap flag */
  background-color: #f7f7f7;
  position: relative;
  text-align: left; /* Ensure text is left-aligned */
}

.accordion-header img {
  width: 30px;
  height: 20px;
  object-fit: cover;
  border: 1px solid #ccc;
  margin-right: 10px;
  position: absolute;
  left: 15px; /* Flag stays on the left */
}
	
.accordion-header::after {
  content: "▸";
  margin-left: auto;
  transition: transform 0.3s ease;
}

.accordion-item.active .accordion-header::after {
  transform: rotate(90deg);
}	
	
.accordion-content {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: #fff;
}

.accordion-content ul {
  list-style: none;       /* Remove default bullets */
  padding: 10px 20px;
  margin: 0;
}

.accordion-content li {
  position: relative;     /* Needed for custom bullet */
  padding-left: 20px;     /* Space for bullet */
  margin-bottom: 5px;
  padding-top: 2px;       /* optional for better vertical alignment */
  padding-bottom: 2px;
}

.accordion-item.active .accordion-content {
  max-height: 1000px; /* big enough for your longest list */
	}
	
/* Small blue circle bullet */
.accordion-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;               /* Size of circle */
  height: 8px;
  background-color: #052739; /* Blue color */
  border-radius: 50%;        /* Make it circular */
}


	
/* Style links inside your accordion content */
.accordion-content li a {
  color: #2D2D2D;   /* Color of the list TEXT */
  text-decoration: none;  /* Remove underline */
  transition: color 0.2s; /* Smooth hover effect */
}	
.accordion-content li a:hover {
  color: #072546;         /* Darker blue on hover */
  text-decoration: underline; /* Optional: underline on hover */
}	



/* =====================
   LOGOS VIEW – BASE
===================== */


.logos-view .grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  align-items: center;
  justify-items: center;
}

.logos-view .grid-item img {
  max-width: 100%;
  height: auto;
  display: block;
  transition: transform 0.2s ease;
}

.logos-view .grid-item a:hover img {
  transform: scale(1.4);
}

/* =====================
   for Logos to stagger and fade in..
===================== */
.hidden {
  opacity: 0;
  pointer-events: none;
}

.logos-view {
  display: block;
  opacity: 1;
}

.grid-item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.logos-view.show .grid-item {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 { transition-delay: 0.05s; }
.delay-2 { transition-delay: 0.12s; }
.delay-3 { transition-delay: 0.20s; }
.delay-4 { transition-delay: 0.35s; }
	
	
  /* =====================
     CAROUSEL
  ==================== */
  .carousel {
    position: relative;
    margin-top: 40px;
  }

  .slides {
    position: relative;
    overflow: hidden;
  }

  /* =====================
     SLIDE ANIMATION
  ==================== */
  .slide {
    display: none;
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
    transform: translateX(50px);
    transition: transform 1s ease, opacity 1s ease;
  }

  .slide.active {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px; /* horizontal spacing between logo, image, info */
    opacity: 1;
    transform: translateX(0);
  }

  /* ===== Logo ===== */
  .product-left {
    flex: 0.8;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
  }

  .product-left .logo {
    height: 200px;
    opacity: 0;
    transform: translateY(-20px);
    transition: transform 0.8s ease, opacity 0.8s ease;
  }

  .slide.active .product-left .logo {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s; /* first element appears immediately */
  }

  /* ===== Product Image ===== */
  .product-center {
    flex: 1.2;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .product-center img.product-image {
    max-height: 280px;
    object-fit: contain;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.8s ease 0.2s, opacity 0.8s ease 0.2s;
  }

  .slide.active .product-center img.product-image {
    opacity: 1;
    transform: translateY(0);
  }

	
	
	
	
  /* ===== Product Info ===== */
  .product-right {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* closer to center image */
    padding-left: 5px;
    gap: 10px;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.8s ease 0.4s, opacity 0.8s ease 0.4s;
  }

  .slide.active .product-right {
    opacity: 1;
    transform: translateY(0);
  }


	
	
  .product-right .product-name { color:#010E36; font-weight: bold;  font-size: 22px;  }
   
       
  .product-right .country-origin {
    font-size: 18px;
    color: #333;
  }

  .product-right .flag { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.70));
    height: 30px;
  }

	
.info-button {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 9px;
  font-size: 13px; /* adjustment Point */
  text-decoration: none;
  color: white;
  background-color: #052739;   /* your site blue */
  border-radius: 4px;
  transition: 0.2s ease;
}

.info-button:hover {
  background-color: #6E6E6E;  /* lighter grey */
}
	
	
/* =====================
   PRODUCT IMAGE FADE 
===================== */

.slide.active .product-center img.product-image {
  animation: fadeInProduct 0.4s ease forwards;
}

@keyframes fadeInProduct {
  from { opacity: 0; }
  to   { opacity: 1; }
}

	
	
	
  /* =====================
     NAVIGATION
  ==================== */
  .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 40px;
    cursor: pointer;
    color: #999;
	z-index: 10;
  }

  .prev { left: 0; }
  .next { right: 0; }

  /* Optional: hover effect on center image */
  .product-center img.product-image:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease;
  }


	
	
	
	
}