:root {
  --brand-primary: #ff6b35;
  --brand-primary-dark: #e5511d;
  --brand-secondary: #2c3e50;
  --brand-light: #f8f9fa;
  --brand-dark: #1a1a1a;

  /* Override Bootstrap theme colors */
  --bs-primary: var(--brand-primary);
  --bs-secondary: var(--brand-secondary);
  --bs-dark: var(--brand-dark);
  --bs-light: var(--brand-light);
}
/* Make Bootstrap .btn-primary use  brand  color palette & darker hover everywhere */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-dark);
  --bs-btn-hover-border-color: var(--brand-primary-dark);
  --bs-btn-active-bg: var(--brand-primary-dark);
  --bs-btn-active-border-color: var(--brand-primary-dark);
}

/* ******** global styles**********************  */
/* button style  */
a.btn {
  color: white;
  font-weight: 500;
  letter-spacing: 1.2px;
}
/* bg-light */

#about-preview,
#our-story,
#stats-bar-section,
#classes,
#benefits,
#membership,
section.cta,
#contact-cards,
#core-values {
  background-color: var(--brand-light);
}
body {
  color: var(--brand-secondary);
}

/* headings */
#classes-overview h3,
#our-trainers .card h3,
#classes .card h3,
#membership .card h3 {
  font-size: 1.25rem;
}
#our-trainers .card h4,
footer h3 {
  font-size: 1rem;
}
/* *******************************************  */
/* Navbar  + footer background-colors */
.navbar,
footer {
  background-color: var(--brand-dark);
}

/* Brand stays white always */
.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Brand icon rotated */
.navbar-brand i {
  transform: rotate(45deg);
  display: inline-block;
  color: var(--brand-primary-dark);
}

/* Nav links */
.navbar .nav-link {
  color: #fff;
}

/* Only nav links change on hover (not the brand) */

.navbar .nav-link:active,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--brand-primary);
}
/* Active nav link (current page) */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  color: var(--brand-primary);
  font-weight: 600;
}

/* header */
header .container-fluid {
  min-height: 60vh;
  background: url("../assets/images/hero-1.webp") center / cover no-repeat;
  position: relative;
  margin-top: 50px;
}
header .container-fluid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

header .container-fluid > * {
  position: relative;
  z-index: 2;
}
/* classes  */
#classes-overview {
  background-color: var(--brand-light);
}
.card {
  border: none;
  box-shadow: 5px 10px 12px rgba(0, 0, 0, 0.15);
}
/* make images all one height so that cards can be same heigt */
#classes-overview .card-img-top,
#classes .card-img-top {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
/* min-gallery  */
/* images are different sizes so gave the container a fixed heigt then 100% for the image to fill container */
.gallery-item {
  height: 220px;
}
#min-gallery img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: all 0.3s;
}
.gallery-item:hover img {
  transform: scale(1.05);
}
/* about */
#about-preview .card,
#benefits .card,
#core-values .card {
  border: none;
  background-color: var(--brand-light);
  text-align: center;
}
#about-preview .card h3,
#benefits .card h3,
#perks .card h3,
#contact-cards .card h3 {
  font-size: 1.5rem;
}
#about-preview .card .icon-circle,
#benefits .card .icon-circle,
#membership .card .icon-circle,
#perks .card .icon-circle,
#contact-cards .card .icon-circle,
#mission-vision-promise .card .icon-circle,
#core-values .card .icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--brand-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}
#about-preview .card .icon-circle i,
#benefits .card .icon-circle i,
#perks .card .icon-circle i,
#contact-cards .card .icon-circle i,
#mission-vision-promise .card .icon-circle i,
#core-values .card .icon-circle i {
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
}
#about-preview .stats-bar,
#stats-bar-section .stats-bar,
section .stats-bar,
section .cta {
  background-color: var(--brand-primary);
}

.stats-item {
  color: white;
}

/* footer */
footer address {
  color: var(--brand-light);
}

.footer-link {
  color: var(--brand-light);
  text-decoration: none;
}
.footer-link:hover {
  color: var(--brand-primary);
}
footer li {
  margin-bottom: 0.5rem;
}
footer .social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

footer .social-btn:hover,
footer .social-btn:focus {
  background: var(--brand-primary-dark);
  transform: translateY(-2px);
}

footer .social-btn i {
  font-size: 1.4rem;
}
footer i.fa-dumbbell {
  font-size: 1.8rem;
  rotate: 45deg;
  color: var(--brand-primary-dark);
}

/* our trainers section - about.html*/
#our-trainers .card-img-top {
  width: 100%;
  height: 320px;
  display: block;
  object-fit: cover;
}
#our-trainers .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#our-trainers span.badge {
  background-color: var(--brand-primary);
}

/* ============testimonials =========== */
/* Carousel controls  */

#testimonialsCarousel .carousel-indicators button {
  background-color: var(--brand-primary);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  opacity: 0.5;
  transition: all 0.3s ease;
}

#testimonialsCarousel .carousel-indicators button.active {
  opacity: 1;
  transform: scale(1.2);
}
/* Stars styling */
.stars {
  font-size: 1.5rem;
}

/* Testimonial card smooth transition */
#testimonialsCarousel .carousel-item {
  transition: transform 0.6s ease-in-out;
}
#testimonials .card-body {
  background-color: var(--brand-light);
}

/* ==========class timetable =============*/
#schedule .schedule-class {
  background-color: var(--brand-primary);
  border-radius: 0.5rem;
  color: white;
  font-weight: 600;
  padding: 0.5rem;
}
/* ========CTA button inside the orange cta background===== */

.cta .btn {
  width: auto;
  display: inline-flex;
}

.cta .cta-btn {
  background-color: var(--bs-light);
  color: var(--bs-secondary);
  border: 2px solid #fff;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.cta .cta-btn:hover,
.cta .cta-btn:focus {
  background-color: var(--bs-secondary);
  color: #fff;
}
/* =================membership=============== */
#membership .card i.fa-dumbbell,
#membership .card i.fa-users,
#membership .card i.fa-crown {
  font-size: 1.5rem;
  color: white;
}
#membership .card i.fa-dumbbell {
  background-color: var(--bs-secondary);
}
#membership .card i.fa-users {
  background-color: var(--bs-primary);
}
#membership .card i.fa-crown {
  background-color: var(--bs-warning);
}
#membership .card i.fa-check {
  color: var(--bs-success);
}
#membership .card i.fa-xmark {
  color: var(--brand-secondary);
}
#membership .badge-popular {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%); /*lifts it above the border */

  display: inline-flex;
  width: auto;
  padding: 0.35rem 0.65rem;
  margin-top: -1rem;
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
}
#membership .plan-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
#membership li {
  padding: 0.4rem 0;
}
#membership li i {
  margin: 0 0.3rem 0 0;
}

/* ======= membership – special offer ========= */
#membership .special-offer {
  background-color: rgb(182, 225, 239);
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0.75rem 1rem;
}

#membership .special-offer p {
  margin: 0;
}

/* ============perks========== */
#perks .card {
  text-align: center;
}
/* cta membership page */
/* Contact CTA button */
.cta .cta-btn-contact {
  background-color: transparent;
  color: white;
  border: 2px solid var(--bs-light);
  border-radius: 0.5rem;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Hover: whole button becomes light */
.cta-btn-contact:hover,
.cta-btn-contact:focus {
  background-color: var(--bs-light);
  color: var(--bs-secondary);
  border-color: var(--bs-light);
  text-decoration: none;
}
/* contact  -- overide card styling from above sections*/
#contact .card {
  border: 0;
  box-shadow: var(--bs-box-shadow-sm);
}
.contact-map iframe {
  width: 100%;
  height: 180px;
}
/* ===========Gallery============ */
#gallery .gallery-card {
  border-radius: 0.5rem;
  position: relative;
}

#gallery .gallery-img {
  width: 100%;
  height: 240px; /* set fixed height on all images */
  object-fit: cover;
  display: block;
}

/* Overlay at bottom */
#gallery .gallery-overlay {
  position: absolute;
  inset: 0; /* stretches the overlay over the parent container */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0) 55%
  ); /* i have learnt about gradinet backgrounds previously but had to look this up*/
}

#gallery .gallery-badge {
  align-self: flex-start;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

#gallery .gallery-caption {
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.2;
}
figure.gallery-card {
  margin: 0;
}

/* media query */
@media (min-width: 768px) {
  header {
    background-image: url("/src/assets/images/hero-tablet.webp");
  }
}
@media (min-width: 576px) {
  header {
    background-image: url("/src/assets/images/hero-mobile.webp");
  }
}
@media (max-width: 576px) {
  .row {
    --bs-gutter-x: 1rem;
  }
}