@charset "utf-8";
/* CSS Document */
/* Apply Roboto site-wide */
body, html, p, h1, h2, h3, h4, h5, h6, a, li, td, th, button, input, select, textarea, label, .navbar, .nav-link {
  font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}
    .bg-cardblue {
    background-color: #358ECB !important;
}
   .bg-cardblue2 {
    background-color: #67AAD8 !important;
}
   .bg-cardblue3 {
    background-color: #97C5E4 !important;
}
   .bg-cardblue4 {
    background-color: #C6DFF0 !important;
}
   .bg-graynav {
    background-color: #999999 !important;
}
  .bg-pastelred {
    background-color: #B76E95 !important;
}
.bg-pastelblue {
    background-color: #89D3F3 !important;
}
.bg-pastelyellow {
    background-color: #90E995 !important;
}
.bg-pastellilac {
    background-color: #B6A9ED !important;
}
.bg-pastelorange {
    background-color: #E5ACA4 !important;
}
.bg-imagegrey {
    background-color: #C9C9C9 !important;
}
.background2-image {
	background-image: linear-gradient(90deg, #358ECB, #C6DFF0);
	}
.cardbackground-image {
	background-image: linear-gradient(0deg, #358ECB, #C6DFF0);
	}
.background3-image {
	background-image: linear-gradient(270deg, #358ECB, #C6DFF0);
	}
.centerimage {
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto;
}
.navbar-nav .nav-link {
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 0.25rem;
  }

  .navbar-nav .nav-link:hover {
    background-color: rgba(0, 123, 255, 0.1);
    color: #0b5ed7;
  }

  .navbar-nav .nav-link.text-primary:hover {
    background-color: rgba(13, 110, 253, 0.15);
    color: #084298;
  }
/* Enhanced card styling */
/* Card Styling Enhancements for Homepage */
.cardbackground-image {
  background-image: linear-gradient(0deg, #358ECB, #C6DFF0);
  padding: 1rem;
  border-radius: 1rem;
  height: 100%;
}
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  z-index: 2;
  position: relative;
}

/* Ensure card-body is clean and padded */
.cardbackground-image .card-body {
  background-color: #fff;
  border-radius: 0.75rem;
  padding: 1rem 1rem 0.5rem;
  margin-top: 0.5rem;
}

/* Product images inside cards */
.cardbackground-image img {
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  object-fit: contain;
  max-height: 230px;
  width: auto;
  height: auto;
}

/* Ensure buttons are aligned consistently */
.cardbackground-image .btn {
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.hover-shadow:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: box-shadow 0.3s ease;
}
/* Ensure only the card changes on hover, not the whole row */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  z-index: 2;
  position: relative;
}
.bg-softwhite {
  background-color: #f9f9fc !important;
}
.btn-buy {
    background-color: #358ECB;
    color: white;
    font-weight: bold;
    border: 1px solid #358ECB;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .btn-buy:hover {
    background-color: #97C5E4;
    color: white;
	transform: scale(1.03);
    transition: all 0.2s ease-in-out;
  }
.card-product-image {
  display: block !important;
  width: 280px !important;
  height: auto !important;
  max-height: none !important;
  background-color: #C9C9C9 !important;
  border-radius: 0.5rem;
  margin: 0 auto 1rem auto;
}