/* styles.css */

body {
  font-family: 'Segoe UI', sans-serif;
  scroll-behavior: smooth;
}

header nav a {
  color: #333;
  text-decoration: none;
}

header nav a:hover {
  color: #007bff;
}

.card-img-top {
  object-fit: cover;
  height: 200px;
}

/* Section Background Variants */
.bg-white {
  background-color: #ffffff !important;
}

.bg-lightblue {
  background-color: #e6f2ff; /* soft blue */
}

.bg-secondary-subtle {
  background-color: #f5f5f5; /* soft gray */
}


/* Ensure the carousel controls sit outside the image area */
#productCarousel {
  position: relative;
  padding: 0 3rem; /* Space for controls */
}

.carousel-control-prev,
.carousel-control-next {
  width: 2.5rem;
  height: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  z-index: 2;
}

.carousel-control-prev {
  left: -2rem; /* Outside the carousel */
}

.carousel-control-next {
  right: -2rem; /* Outside the carousel */
}

/* Optional: On small screens, keep arrows inside */
@media (max-width: 768px) {
  .carousel-control-prev {
    left: 0;
  }
  .carousel-control-next {
    right: 0;
  }
}
.
.bg-card1 {
    background-color: #0A1D37 !important; /* Dark Navy Blue */
    color: #ffffff !important;
	border-radius: 8px;
  }

  .bg-card2 {
    background-color: #1C1C1E !important; /* Charcoal */
    color: #ffffff !important;
	border-radius: 8px;
  }

  .bg-card3 {
    background-color: #2C2C54 !important; /* Deep Indigo */
    color: #ffffff !important;
	border-radius: 8px;
  }
  
  .bg-card1 {
  background-color: red !important;
  color: #ffffff !important;
  border-radius: 8px;
}
 
  .card:hover {
  transform: translateY(-5px);
  transition: 0.3s ease;
}

.ceo-logo {
  width: 50px;
  height: 100px;
  object-fit: contain;
  background-color: white;  /* Optional: makes small images more visible */
  padding: 5px;              /* Optional: adds spacing inside the box */
  border: 1px solid #ddd;    /* Optional: adds a subtle border */
  border-radius: 18px;        /* Optional: soft rounded corners */
}

.client-logo {
  width: 150px;
  height: 150px;
  object-fit: contain;
  background-color: white;  /* Optional: makes small images more visible */
  padding: 5px;              /* Optional: adds spacing inside the box */
  border: 1px solid #ddd;    /* Optional: adds a subtle border */
  border-radius: 18px;        /* Optional: soft rounded corners */
}
/* Additional styling for cleaner layout */
section {
  padding-top: 60px;
  padding-bottom: 60px;
}

.card-img-top {
  object-fit: cover;
  height: 200px;
  border-radius: 8px;
}

header.sticky-top {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 1030; /* ensures it stays on top */
}