.hero {
  background: url(/IMAGES/mainIMAGES/imgBANNER/HeroSecurity01.jpg) center center/cover no-repeat;
  min-height: 90vh;
  padding: 60px 20px;
  cursor: default;
}

.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #d9534f;
}

h4 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 20px;
}

.paragrapheb{
  font-size: 1.2rem;
  line-height: 1.6;
  color: #db0d0d;
  margin-bottom: 20px;
  margin-top: 20px;
}

.paragraphe{
  font-size: 1.2rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 10px;
}

img{
  margin-left: auto;
  margin-right: auto;
  border-radius: 7px;
  box-shadow: 0 4px 16px rgba(238, 5, 5, 0.322);
}

.hover-glow {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-glow:hover {
  transform: scale(1.03); /* slight zoom */
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.6); /* more intense */
  transform: scale(1.03) rotate(0.3deg);

}


.red-shadow-left-only {
  box-shadow: -4px 0 10px red; /* shadow only to the left */
}

.red-shadow-right-only {
  box-shadow: 4px 0 10px red; /* shadow only to the right */
}



@media (min-width: 1300px) {
  .responsive-img {
    max-width: 1300px;
  }
}

.display-4 {
  margin-top: 20px;
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--text-light);
  text-align: center;
  margin-top: 20px;
}


.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand-blue);
}

.product-card {
  /*transition: transform 0.3s ease, box-shadow 0.3s ease;*/
  transition: background-color 0.3s ease, transform 0.2s ease;
  cursor: pointer;
  border: 4px solid #eaeaea;
  background-color: #fff;
  text-align: center;
}

.product-card:hover {
  /*transform: translateY(-5px);*/
  background-color: #f1f1ff;
  border-color: #d4cfcf;
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.product-card a{
    transition: color 0.2s ease;
}

.product-card:hover a{
    color: var(--brand-blue);
    text-decoration: underline;
}
/*--------------------------------------------------------------------------------------------------------------*/


.btn-primary{
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--text-light);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary:hover{
    background-color: var(--brand-blue-light);
    border-color: var(--brand-blue-light);
    color: var(--text-light);
}
/*--------------------------------------------------------------------------------------------------------------*/





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