body,
.fixed-top {
  background-color: #fbfbfb;
}

.bg-dark {
    background-color: #414646 !important;
}
.text-white-50 {
    color: rgb(255 255 255 / 75%) !important;
}

h2,
.h2 {
  font-size: 1.8rem;
}

h5,
.h5 {
  font-size: 1.125rem;
}

.f-xs {
  font-size: smaller;
}

/* .fa-twitter:before {
  content: "𝕏";
  font-family: system-ui, "Segoe UI Symbol", "Noto Sans Symbols", sans-serif;
  font-weight: 700;
} */

.navbar-brand img {
  height: 70px;
  /* default for large screens */
  width: auto;
  display: block;
}

.swal2-popup.small-swal-popup {
  font-size: 0.9rem;
}

.swal2-icon {
  width: 50px !important;
  height: 50px !important;
  margin: 0.6em auto 0.6em;
}

.small-swal-button {
  padding: 0.4em 1em !important;
  font-size: 0.85rem !important;
}

.qty-input-group {
  max-width: 150px;
}

.qty-input-group .btn {
  padding: .375rem .9rem;
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-input {
  -moz-appearance: textfield;
}

@media (max-width: 992px) {
  .navbar-brand img {
    height: 50px;
  }
}

@media (max-width: 576px) {
  .navbar-brand img {
    height: 40px;
  }
}

.carousel-item .content-link {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  font-size: inherit;
  display: inline-block;
}

.carousel-control-prev {
  margin-left: 1%;
}

.carousel-control-next {
  margin-right: 1%;
}

/* General rule for slider images */
.carousel-item img {
  object-fit: cover;
  /* crop and fill the container nicely */
  height: 400px;
  /* default for desktop */
}

/* Medium screens */
@media (max-width: 992px) {
  .carousel-item img {
    height: 300px;
  }
}

/* Small screens */
@media (max-width: 576px) {
  .carousel-item img {
    height: 200px;
  }
}

.topbar {
  padding: 10px 0;
  border-radius: 0;
}

.navbar {
  /* background: linear-gradient(
    to bottom,
    #8cc63f 10%,
    #f8f9fa 100%
  ); */
  /* background: linear-gradient(to right, #efefed 10%, #f8f9fa 90%); */
  /* background-color: #f1f1ef; */
  background-color: #ffffff;
  height: 90px;
  border-bottom: 1px solid rgb(189 182 182 / 22%);
  /* border-bottom: 0; */
}

.hero-header {
  /* background: radial-gradient(
    circle,
    #d1d5da 0%,
    #f8f9fa 100%
  ); */
  /* background: linear-gradient(to top,
      #d1d5da 0%,
      #f8f9fa 100%); */
  background: linear-gradient(to top, #efefef 0%, #f3f4f5 100%);
  color: #212529;
  padding: 1rem;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

@media (min-width: 992px) {

  .hero-header,
  .page-header {
    margin-top: 115px !important;
  }

  .mt-section-offset {
    margin-top: 125px;
  }
}

@media (max-width: 992px) {
  .navbar-collapse {
    background-color: #ffb524 !important;
  }
}

@media (max-width: 768px) {

  .hero-header,
  .page-header {
    margin-top: 60px !important;
    padding: 0.5rem 1rem;
  }

  .navbar {
    height: 60px;
    /* border-bottom: 0; */
  }

  .mt-section-offset {
    margin-top: 60px;
  }
}

@media (max-width: 468px) {
  .carousel-item .content-link {
    margin: 0 25%;
  }

  .btn-decrease-qty,
  .btn-increase-qty {
    border-radius: 0;
  }

  .btn-decrease-qty {
    border-top-right-radius: 10px !important;
    border-top-left-radius: 10px !important;
  }

  .btn-increase-qty {
    border-bottom-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
  }
}

section {
  /* box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.2); */
  box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.2);
  padding: 10px 15px;
}

/* Smooth hover shadow for event cards */
.card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  border-radius: 0.5rem;
  overflow: hidden;
  border-radius: 0;
}

.card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.card-title,
.card-text {
  display: block;
  /* or inline-block if needed */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Base: Card image wrapper */
.card-img-wrapper {
  height: 260px;
  /* desktop default */
  overflow: hidden;
  position: relative;
  /* needed for .stretched-link if used */
  border-radius: 0;
}

/* Card image itself */
.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* keeps images neat & cropped */
  display: block;
  transition: transform 0.5s ease;
  /* smooth zoom effect */
  border-radius: 0;
  /* match wrapper corners */
}

/* Tablet breakpoint */
@media (max-width: 992px) {
  .card-img-wrapper {
    height: 200px;
  }
}

/* Mobile breakpoint */
@media (max-width: 576px) {
  .card-img-wrapper {
    height: 150px;
  }
}


.card-title {
  margin-bottom: 0.5rem;
  /* title to subtext spacing */
}

.card-text {
  margin-bottom: 1.25rem;
  /* subtext to button spacing */
}

.card-footer .btn {
  margin-top: 0;
  /* no extra margin needed if you use .card-text spacing */
}