.header-content {
  background-color: #001f3f;
  background-size: contain;
  /* background-size: cover; */
  /* TO MODIFY */
  background-image: url(../../../../IMAGES/mainIMAGES/imgPETROLEUM/PRODUCT_EN590_01.png);
  /**/
  background-position: center;

  /* height: 100vh; /* or 97vh if you want a slight margin */
  min-height: 100vh; 
  width: 100%;
  padding: 1px;
  display: flex;
  align-items: center; /* vertically center content */
  justify-content: center;
  text-align: center;
  /* box-sizing: border-box; */
  color: #eff0eb;
  position: relative; /* relative Or fixed, depending on layout */
  overflow: hidden;
  margin: 0; /* remove extra spacing */
  left: 0;
}


.hero {
  /* TO MODIFY */
  background: url(../../../../IMAGES/mainIMAGES/imgPETROLEUM/PRODUCT_EN590_02.jpg) center center/cover no-repeat;
  background-size: cover;       /* Makes sure image covers entire section */
  background-position: center;  /* Centers the image */
  background-repeat: no-repeat; /* No repeating */
  /* CHANGER ICI */
  color: #f4f4f4;                 /* Make sure text is visible */
  padding: 100px 0;             /* Add vertical spacing */
  text-align: center;
}

.glossy-text-wrapper {
  background-color: rgba(0, 0, 0, 0.35); /* Semi-transparent black */
  padding: 40px 30px;
  border-radius: 7px;
  display: inline-block;
  max-width: 90%;
}

.glossy-text {
  font-weight: 400;
  font-size: 1.5em;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}


h1 span[aria-hidden="true"] {
  margin-right: 0.3rem;
  vertical-align: middle;
}

.product-detail{
  color: var(--brand-blue-light);
}

.firstline {
  background-color: var(--footer-border); /* example blue */
  color: var(--text-footer);
}

.ParentForm {
  display: flex;
  justify-content: flex-start;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  padding-bottom: 50px;
}

.SecondForm {
  width: 100%;
  max-width: 430px;
  font-size: large;
  font-weight: 600;
  color: #f4f4f4;
  padding: 20px;
  margin: 40px auto 20px auto;
  background-color: #614d04;
  border: 2px solid #fedd62;
  box-shadow: 0 0 10px #413818;
  border-radius: 7px;
}

.ParentFormEn590 {
  display: flex;
  justify-content: flex-start;
  max-width: 1000px; /* 🚨 box size */
  padding: 16px 16px;
  margin: 0 auto;
  margin-bottom: 0;
  background-color: #f1f0f0;
  border: 1px solid #ddd;
  border-radius: 7px;
  box-shadow: 0 0 10px #a9bfeb;
}

.EmbeddedEN590{
  font-size: large;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 30px;
  border-radius: 7px;
}

.EmbeddedEN590 h2{
  text-align: center;
  font-weight: 700;
}

.EmbeddedEN590 h3{
  color: var(--brand-blue-light);
  font-weight: 200;
  padding-top: 30px;
  padding-bottom: 20px;
  text-align: left;
}

.EmbeddedEN590 h4{
  display: inline;
  color: var(--brand-blue);
  font-weight: 700;
  padding-top: 10px;
  margin-bottom: 1px;
}

.EmbeddedEN590 p{
  font-weight: 300;
  margin-top: 0;
  font-size: 21px;
}

.listEN590 {
  line-height: 1.9;
}

.tableEN590 {
  width: 100%;
  border-collapse: collapse;
  padding: 15px 15px;
}

.tableEN590 th{
  text-align: left;
  padding: 0 15px;
}

.tableEN590 td{
  text-align: left;
}

.img-fluid {
  border-radius: 7px;
  background-color: rgba(0, 0, 0, 0.35); /* Semi-transparent black */
}


/* ✅ Mobile responsiveness */
@media screen and (max-width: 768px) {
.ParentForm  {
  justify-content: center; /* Center on small screens */
  padding: 10px; /* Reduce padding */
}

.SecondForm {
  margin: 20px auto; /* Center and reduce margin */
  padding: 15px; /* Reduce padding */
  font-size: 1rem; /* Adjust font size */
}  
}





/* ✅ 1. Primary Brand Color */
:root {
  --brand-blue: #002f81;
  --brand-blue-light: #1947a1; /* lighter variant for hover */
  --brand-blue-dark: #001d4f;  /* darker variant */
  --text-light: #ffffff;
  --text-footer: #93d2f7;
  --text-dark: #1a1a1a;
  --light-blue-hover: #a5c9ff; /* light blue on hover */
  --footer-border: #360000; /* Plainte en rouge */
}