:root {
  /* Core Brand Colors */
  --main-blue: #13294B; /* Your original blue, now our Primary */
  --main-orange: #F0C419; /* Your original orange, now our Accent - This is your new secondary color accent */
  --main-green: #66CDAA; /* New accent green for balance if needed (e.g. success messages) */

  /* Text Colors */
  --text-dark: #333333; /* Dark text for primary content */
  --text-medium: #5B7089; /* A softer blue-gray for secondary text */
  --text-light: #F8F8F8; /* For text on dark backgrounds */
  --text-muted: #6c757d; /* Bootstrap default muted */
  --text-white: #ffffff;

  /* Background Colors */
  --bg-primary: #13294B; /* Dark blue background for primary sections */
  --bg-light: #F8F8F8; /* Light background for sections */
  --bg-white: #ffffff; /* Pure white for cards, navbar, etc. */

  /* Border & Shadow */
  --border-color: #D8D8D8; /* Light gray border */
  --shadow-light: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-medium: 0 4px 10px rgba(0,0,0,0.1);
  --shadow-dark: 0 4px 10px rgba(0,0,0,0.75); /* For hero text shadow */

  /* Bootstrap Overrides (using our brand colors) */
  --bs-primary: var(--main-blue);
  --bs-secondary: var(--main-orange); /* NOW EXPLICITLY YELLOW-ORANGE */
  --bs-success: #28a745; /* Standard green for success */
  --bs-danger: #dc3545; /* Standard red for danger */
  --bs-warning: #ffc107; /* Standard yellow for warning */
  --bs-info: #17a2b8; /* Standard blue for info */
}

body {
  font-family: 'Inter', Arial, sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
}

/* General Section Styling */
.section {
  padding: 60px 20px;
}
.section h2 {
  text-align: center;
  margin-bottom: 50px;
  font-weight: 700;
  color: var(--main-blue);
}

/* Bootstrap Color Overrides */
.bg-primary {
  background-color: var(--bg-primary) !important;
}
.text-primary, a:not(.btn) {
  color: var(--main-blue) !important;
}
.text-secondary {
  color: var(--main-orange) !important; /* This now correctly points to the yellow-orange */
}
.bg-light {
  background-color: var(--bg-light) !important;
}

/* --- Navigation --- */
.navbar {
  background-color: var(--bg-white);
  box-shadow: var(--shadow-light);
}
.navbar-brand {
  color: var(--main-blue);
  font-weight: 700;
}
.navbar-brand img {
  width: 50px;
  height: auto;
}
.navbar-nav .nav-link {
  color: var(--text-medium) !important; /* Softer text for nav links */
  font-weight: 600;
  margin: 0 10px;
  transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
  color: var(--main-blue) !important;
}

/* --- Hero Section --- */
.hero {
  /* Using main-orange for the accent part of the gradient */
  background: linear-gradient(150deg, var(--main-blue) 40%, var(--main-orange));
  background-image: url('/img/image04.png'); /* Ensure this path is correct */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; /* Center the background image */
  text-shadow: var(--shadow-dark);
  color: var(--text-white);
  padding: 100px 20px;
  text-align: center;
}
.hero h1 {
  font-size: 3em;
  font-weight: 700;
  text-transform: uppercase;
}
.hero p {
  font-size: 1.2em;
  max-width: 600px;
  margin: 20px auto;
}
.btn-main {
  background-color: var(--main-orange) !important; /* Button uses the yellow-orange */
  border: none;
  color: white;
  padding: 12px 25px;
  font-weight: 600;
  border-radius: 8px;
  transition: background-color, transform 0.3s ease;
  box-shadow: var(--shadow-medium);
}
.btn-main:hover {
  background-color: var(--main-blue) !important; /* Changed hover to main-blue for consistency */
  color: white;
  transform: scale(1.05);
}

/* --- Services Cards --- */
.card-service {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center; /* Center content in the card */
  background-color: var(--bg-white); /* Ensure cards have a white background */
}
.card-service:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Slightly stronger shadow on hover */
}
.card-service .card-title {
  color: var(--main-blue);
  font-weight: 600;
}
.card-service .card-title i {
  color: var(--main-orange); /* Service icons use the yellow-orange */
  font-size: 2.2rem; /* Slightly larger icon */
  display: block;
  margin-bottom: 15px;
}
.card-service ul {
  padding-left: 0; /* Remove default ul padding */
  text-align: left !important; /* Align list items left */
}
.card-service ul li {
  display: flex;
  align-items: flex-start; /* Align items to the top if text wraps */
  margin-bottom: 8px; /* Space between list items */
}
.card-service ul li i {
    color: var(--main-blue); /* Checkmark icons use main-blue */
    font-size: 1rem;
    margin-top: 4px; /* Adjust vertical alignment of icon */
}


/* --- Pricing Table --- */
.table th, .table td {
    vertical-align: middle;
}
.table thead th {
    background-color: var(--main-blue);
    color: var(--text-white);
    border-color: var(--main-blue);
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-light); /* Light stripes */
}
.table-hover tbody tr:hover {
    background-color: rgba(var(--main-blue), 0.05); /* Subtle hover effect */
}


/* --- Why Choose Us Section --- */
/* The existing styling for this section seems fine, relying on Bootstrap utility classes.
   Ensure the text-white and bg-primary utilities are correctly mapped as per :root variables. */


/* --- Contact & Map --- */
#contact p {
  font-size: 1.1rem;
  margin-bottom: 15px;
  color: var(--text-dark); /* Ensure text color is consistent */
}
#contact p i {
    color: var(--main-blue); /* Icons in contact section */
}
#contact iframe {
  width: 100%;
  height: 350px;
  border: 0;
  border-radius: 8px;
  box-shadow: var(--shadow-medium); /* Add shadow to map */
}
/* Responsive map height */
@media (max-width: 767.98px) {
  #contact iframe {
    height: 250px;
  }
}

/* --- Footer --- */
.footer {
  background-color: var(--text-dark); /* Using text-dark for footer background, which is a dark gray */
  color: var(--text-light);
  padding: 40px 20px;
  font-size: 0.9rem;
}
.footer a {
  color: var(--main-orange) !important; /* Footer links now use the yellow-orange */
  text-decoration: none;
  transition: text-decoration 0.3s ease;
}
.footer a:hover {
  text-decoration: underline;
}

/* --- WhatsApp Button --- */
#whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366; /* Standard WhatsApp Green */
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* Stronger shadow for floating button */
  transition: transform 0.3s ease;
}
#whatsapp-float:hover {
  transform: scale(1.15); /* Slightly larger hover scale */
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* Responsive adjustments */
@media (max-width: 991.98px) { /* Medium devices down */
  .navbar-nav {
    text-align: center;
  }
  .navbar-nav .nav-link {
    margin: 5px 0;
  }
}

@media (max-width: 767.98px) { /* Small devices down */
  .hero {
    padding: 80px 15px;
  }
  .hero h1 {
    font-size: 2.5em;
  }
  .hero p {
    font-size: 1.1em;
  }
  .section {
    padding: 40px 15px;
  }
  .section h2 {
    font-size: 2em;
    margin-bottom: 40px;
  }
}

/* Specific timeline styles (from previous code, included for completeness if needed) */
/*--------------------------------------------------------------
# Section "Notre Approche" (Timeline Corrigée)
--------------------------------------------------------------*/
.timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

/* La ligne centrale de la timeline */
.timeline::after {
  content: '';
  position: absolute;
  width: 3px;
  background-color: var(--main-blue);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1.5px;
}

/* Le conteneur de chaque étape */
.timeline-container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* Le cercle sur la timeline */
.timeline-container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -12.5px;
  background-color:  var(--main-green); /* Using main-green from palette */
  border: 4px solid var(--main-blue);
  top: 25px;
  border-radius: 50%;
  z-index: 1;
}

/* Positionnement des conteneurs (gauche/droite) */
.timeline-left {
  left: 0;
}

.timeline-right {
  left: 50%;
}

/* Ajustement des flèches (petits triangles) */
.timeline-left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 32px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

.timeline-right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 32px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

.timeline-right::after {
  left: -12.5px;
}

/* La boîte de contenu */
.timeline-content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.1);
  /* Animation d'apparition */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn-up 0.6s forwards;
}
/* Animation Keyframes */
@keyframes fadeIn-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive pour mobile */
@media screen and (max-width: 768px) {
  .timeline::after {
    left: 31px;
  }

  .timeline-container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  .timeline-container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

  .timeline-left::after, .timeline-right::after {
    left: 18px;
  }

  .timeline-right {
    left: 0%;
  }
}