/* main.css */

/* Basic Body Styling */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #333;
  margin-top: 56px; /* Offset for fixed navbar */
}

/* Navigation */
.navbar {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Center the Logo in the Nav */
.navbar .mx-auto {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Nav Link Styling */
.nav-link {
  color: #fff !important;
  transition: color 0.3s ease;
}
.nav-link:hover,
.nav-link.active {
  text-decoration: underline;
  color: #ffd700 !important;
}

/* Dropdown on Hover */
.navbar .dropdown:hover .dropdown-menu {
  display: block;
}

/* Hero Section */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero-content h1 {
  font-size: 4rem;
  margin-bottom: 20px;
}
.hero-content p {
  font-size: 1.5rem;
}

/* Section Styling */
.section {
  padding: 60px 0;
}

/* Products Cards */
.card img {
  height: 220px;
  object-fit: cover;
}

/* Sub-Footer Styles */
.sub-footer {
  background-color: #f8f9fa;
  padding: 40px 0;
}
.sub-footer h5 {
  margin-bottom: 15px;
  font-weight: bold;
}
.sub-footer ul {
  padding-left: 0;
  list-style: none;
}
.sub-footer ul li a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}
.sub-footer ul li a:hover {
  color: #007bff;
}

/* Footer */
.footer {
  background-color: #222;
  color: #fff;
  padding: 20px 0;
  text-align: center;
}

/* Center the large-screen brand absolutely */
@media (min-width: 992px) {
  #centerBrand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Force black text in offcanvas menu */
.offcanvas-end {
  background-color: #fff !important;
  color: #000 !important;
}

/* Override .navbar-dark forcing white text */
.offcanvas-end .nav-link,
.offcanvas-end .dropdown-item {
  color: #000 !important;
}

.offcanvas-end .nav-link:hover,
.offcanvas-end .nav-link:focus,
.offcanvas-end .dropdown-item:hover,
.offcanvas-end .dropdown-item:focus {
  background-color: #f8f9fa !important;
  color: #000 !important;
}

/* 1. Base Font Family for the whole site */
body {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem; /* You can tweak the base size as needed */
  color: #333;     /* or your preferred base color */
}

/* 2. Navbar & Dropdown Items (Desktop & Mobile) */
.navbar .nav-link,
.dropdown-item {
  font-size: 1.1rem;   /* Increase from default (~1rem) */
  font-weight: 500;    /* 400 = normal, 500 = medium, 600 = semi-bold */
}

/* 3. If you want the Offcanvas menu items even bigger */
.offcanvas .nav-link,
.offcanvas .dropdown-item {
  font-size: 1.2rem;   /* Slightly bigger in mobile menu */
  font-weight: 600;    /* A bit bolder for emphasis */
}

/* 4. Adjust hover/focus states if desired */
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.dropdown-item:hover,
.dropdown-item:focus {
  /* For example, a slightly darker background or color */
  background-color: #f8f9fa;
  color: #000 !important;
}