:root {
  --accent: #0f916f;
}

/* Global fallbacks for links/buttons/icons/text */
a, a:hover, a:active, a:focus,
.button, .btn, .primary-btn, .btn-normal, .pricing-btn, .appoinment-btn,
.primary-btn:hover, .pricing-btn:hover, .btn-normal:hover,
.thumb-icon, .gallery .thumb-icon, .thumb-icon.image-popup,
.section-title span, .bt-tips, .ci-text span, .cs-item span,
.ps-item h3, .pi-price h2, .pi-price span, .fw-recent h6 a,
.ts_text h4, .gettouch-section .gt-text i, .fa-social i,
.canvas-open i, .canvas-close i, .search-close-switch,
.fa-heart, .fa-picture-o, .fa-angle-right, .flaticon-034-stationary-bike,
.flaticon-033-juice, .flaticon-002-dumbell, .flaticon-014-heart-beat {
  color: var(--accent) !important;
  background-color: transparent !important;
  border-color: var(--accent) !important;
}

/* Buttons / badges / icon backgrounds */
.primary-btn, .btn-normal, .pricing-btn, .appoinment-btn,
.thumb-icon, .gallery .thumb-icon, .thumb-icon.image-popup {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* Price highlights and headings */
.pi-price h2, .pi-price span, .ps-item h3 {
  color: var(--accent) !important;
}

/* SVG fills and strokes */
svg *[fill], svg *[stroke] {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* Inline style containing the word "orange" (catch CSS inline color: orange) */
*[style*="orange"] {
  color: var(--accent) !important;
  background-color: transparent !important;
  border-color: var(--accent) !important;
}

/* Common hex/rgb orange values — force to new accent where used */
*[style*="#f39c12"]{ color:var(--accent) !important; background-color:transparent !important; border-color:var(--accent) !important; }
*[style*="#ff6600"]{ color:var(--accent) !important; background-color:transparent !important; border-color:var(--accent) !important; }
*[style*="#ff7b00"]{ color:var(--accent) !important; background-color:transparent !important; border-color:var(--accent) !important; }
*[style*="#ff8c00"]{ color:var(--accent) !important; background-color:transparent !important; border-color:var(--accent) !important; }
*[style*="rgb(255,165,0)"]{ color:var(--accent) !important; background-color:transparent !important; border-color:var(--accent) !important; }

/* Focus / outline */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.primary-btn:focus-visible,
.pricing-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(15,145,111,0.25);
}

/* Restore original-like logo placement and smoothing */
.header-section .row {
  align-items: center; /* vertically center columns (Bootstrap row is flex) */
}

.header-section .logo {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center; /* center logo inside its column */
  height: 100%;
}

.header-section .logo a {
  display: block;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.header-section .logo img {
  width: 120px;
  height: 120px;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0;
  padding: 0;
  transition: transform .12s ease, opacity .12s ease; /* small smoothing */
  -webkit-backface-visibility: hidden; /* smoother rendering */
  backface-visibility: hidden;
}

/* Keep logo square and responsive on smaller screens */
@media (max-width: 992px) {
  .header-section .logo img { width: 100px; height: 100px; }
}
@media (max-width: 576px) {
  .header-section .logo img { width: 80px; height: 80px; }
}

/* Slightly smaller square on medium screens */
@media (max-width: 992px) {
    .logo img {
        width: 100px;
        height: 100px;
    }
}

/* Small screens / mobile */
@media (max-width: 576px) {
    .logo img {
        width: 80px;
        height: 80px;
    }
}

/* Ensure the accent variable is the green you gave */
/* Text accents that were orange -> green */
.section-title span,
.bt-tips,
.ci-text span,
.cs-item span,
.ps-item h3,
.pi-price h2,
.pi-price span,
.fw-recent h6 a,
.ts_text h4,
.gettouch-section .gt-text i,
.fa-social a i,
.canvas-open i,
.canvas-close i,
.search-close-switch,
.hi-text h1 strong,
.flaticon-034-stationary-bike,
.flaticon-033-juice,
.flaticon-014-heart-beat {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Buttons / badges / icon backgrounds that were orange -> green */
.primary-btn,
.primary-btn.btn-normal,
.appoinment-btn,
.pricing-btn,
.btn,
.btn-normal,
.thumb-icon,
.gallery .thumb-icon,
.thumb-icon.image-popup {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}

/* Links fallback (where links used orange) */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
  color: var(--accent) !important;
}

/* SVG fills/strokes */
svg *[fill], svg *[stroke] {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* Inline style catches for common orange values or the word "orange" */
*[style*="orange"],
*[style*="#f39c12"],
*[style*="#ff6600"],
*[style*="#ff7b00"],
*[style*="#ff8c00"],
*[style*="rgb(255,165,0)"] {
  color: var(--accent) !important;
  background-color: transparent !important;
  border-color: var(--accent) !important;
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* Common hover / focus outlines */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.primary-btn:focus-visible,
.pricing-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(15,145,111,0.25);
}

/* If template uses overlay tints on gallery/hero sections */
.gallery .gs-item::before,
.hero-section::before,
.banner-section::before {
  background: none !important;
  opacity: 1 !important;
}

/* Move banner background down a bit so top of image is not shown */
.banner-section.set-bg {
  background-position: center 60% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Make offcanvas + header social icons white and slightly bigger */
.canvas-social a,
.to-social a,
.canvas-social a i,
.to-social a i {
  color: #ffffff !important;
  font-size: 20px !important; /* increased size */
}

/* Give icons a consistent circular hit area and center the glyph */
.canvas-social a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  margin-right: 8px !important;
  border-radius: 50% !important;
  background: transparent !important;
  text-align: center !important;
  line-height: 1 !important;
  transition: transform .12s ease, color .12s ease;
}

/* Hover state */
.canvas-social a:hover {
  color: rgba(255,255,255,0.95) !important;
  transform: translateY(-2px);
}

/* Slightly smaller on very small screens */
@media (max-width: 576px) {
  .canvas-social a,
  .canvas-social a i {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }
}

/* Make gallery items non-clickable and remove hover overlay / color fade */
.gallery .thumb-icon,
.gallery .thumb-icon.image-popup {
  display: none !important;      /* hide the clickable icon */
  pointer-events: none !important;
}

.gallery .gs-item,
.gallery .gs-item .set-bg {
  cursor: default !important;    /* not a clickable item */
  transition: none !important;   /* disable hover transitions */
}

/* Remove any pseudo-element overlays often used for hover tint */
.gallery .gs-item::before,
.gallery .gs-item::after {
  display: none !important;
  background: transparent !important;
  opacity: 1 !important;
}

/* Prevent JS-added anchors from being interactive if present */
.gallery .gs-item a {
  pointer-events: none !important;
  cursor: default !important;
  color: transparent !important;
  background: transparent !important;
}

/* Ensure background image stays centered and untinted */
.gallery .gs-item.set-bg {
  background-position: center center !important;
  background-size: cover !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Keep trainer photos centered inside team cards */
.team-section .ts-item.set-bg {
  background-position: center center !important;
}

/* Lift team-2 framing slightly upward */
.team-section .ts-item.set-bg[data-setbg="img/team/team-2.jpg"] {
  background-position: center 38% !important;
}

/* page-wide accent for class-details page (override orange -> green) */
:root { --accent: #0f916f; }

/* Target class-details related sections */
.breadcrumb-section,
.class-details-section,
.class-timetable-section,
.gettouch-section,
.footer-section,
.team-section,
.section-title span,
.section-title h2,
.class-details-section h1,
.class-details-section h2,
.class-details-section h3,
.class-timetable-section h3,
.class-timetable-section .ct-item,
.class-details-section .ci-text,
.class-details-section .cs-item,
.class-details-section .ps-item,
.class-details-section .pi-price h2,
.class-details-section .pi-price span,
.class-details-section .ps-item h3,
.class-details-section .hi-text h1 strong,
.class-details-section .section-title span,
.breadcrumb-section .section-title span {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Make icons green */
.class-details-section .fa,
.class-details-section i.fa,
.class-details-section .flaticon-034-stationary-bike,
.class-details-section .flaticon-033-juice,
.class-details-section .flaticon-014-heart-beat,
.breadcrumb-section .fa,
.breadcrumb-section i,
.gettouch-section .fa,
.footer-section .fa {
  color: var(--accent) !important;
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* Buttons / links on class-details page */
.class-details-section a,
.class-details-section a:link,
.class-details-section a:visited,
.breadcrumb-section a,
.gettouch-section a,
.primary-btn,
.pricing-btn,
.thumb-icon {
  color: var(--accent) !important;
  background-color: transparent !important;
  border-color: var(--accent) !important;
}

/* Button backgrounds if originally orange */
.primary-btn,
.pricing-btn,
.thumb-icon {
  background: var(--accent) !important;
  color: #fff !important;
}

/* SVG and inline style catches within the page */
.class-details-section svg *[fill],
.class-details-section svg *[stroke],
.class-details-section *[style*="orange"],
.class-details-section *[style*="#f39c12"],
.class-details-section *[style*="#ff6600"] {
  color: var(--accent) !important;
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Ensure breadcrumb/hero overlays don't tint with orange */
.breadcrumb-section.set-bg,
.class-details-section .set-bg {
  background-position: center center !important;
  background-size: cover !important;
  filter: none !important;
}

/* final fallback global catch for this page only */
body:has(.class-details-section) a,
body:has(.class-details-section) .fa,
body:has(.class-details-section) .flaticon-034-stationary-bike {
  color: var(--accent) !important;
}

/* Nav: replace orange underline with a soft green gradient shadow for the active item */

/* hide any existing underline/pseudo used by the template */
.nav-menu ul li::after,
.nav-menu ul li a::after,
.nav-menu .active::after {
  display: none !important;
}

/* Improved nav active/hover: attractive green gradient shadow, no load animation */

.nav-menu ul li a {
  position: relative;
  display: inline-block; /* prevents layout jump when hover styles apply */
  padding: 6px 8px;      /* stable spacing */
  z-index: 1;
  color: var(--accent) !important;
  transition: color .18s ease, transform .18s ease;
  transform: none !important; /* ensure no persistent translate on load */
}

/* re-enable ::after even if earlier rules hid it */
.nav-menu ul li a::after {
  content: "" ;
  display: block !important;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  bottom: -8px;
  width: 56%;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15,145,111,0.36) 0%, rgba(15,145,111,0.16) 35%, rgba(15,145,111,0) 100%);
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}

/* Hover: lift and reveal shadow with subtle motion */
.nav-menu ul li a:hover {
  transform: translateY(-3px);
}
.nav-menu ul li a:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  filter: blur(6px);
}

/* Active item: persistent green shadow and gentle background, but no lift animation */
.nav-menu ul li.active a {
  transform: none !important; /* no translate on page load */
  background: linear-gradient(180deg, rgba(15,145,111,0.06), rgba(15,145,111,0.02));
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(15,145,111,0.10);
}
.nav-menu ul li.active a::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  filter: blur(6px);
  transition: none; /* keep it static when page opens */
}

/* Smaller screens: reduce shadow width/blur */
@media (max-width: 768px) {
  .nav-menu ul li a::after { width: 42%; height: 10px; filter: blur(6px); bottom: -6px; }
  .nav-menu ul li a { padding: 4px 6px; }
}

/* Make pricing cards equal height and keep actions at the bottom */

/* Ensure the row/columns stretch to the same height */
.pricing-section .row,
.service-pricing .row {
  align-items: stretch;
}

/* Make each bootstrap column a flex container so child .ps-item can stretch */
.pricing-section .row > [class*="col-"],
.service-pricing .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

/* Let .ps-item fill the column and layout its internals vertically */
.pricing-section .ps-item,
.service-pricing .ps-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

/* Keep the main content flow and push CTA/buttons to the bottom */
.pricing-section .ps-item .pi-price,
.pricing-section .ps-item ul {
  /* spacing only; adjust if needed */
  margin-bottom: 12px;
}

/* Ensure any call-to-action sits at the bottom */
.pricing-section .ps-item .primary-btn,
.service-pricing .ps-item .primary-btn,
.pricing-section .ps-item .pricing-btn {
  margin-top: auto;
}

/* Optional: enforce a baseline card height so all look consistent (tweak value as needed) */
.pricing-section .ps-item {
  min-height: 340px;
}

/* Small screens: allow natural height to avoid excessive vertical space */
@media (max-width: 767.98px) {
  .pricing-section .ps-item { min-height: auto; }
}

/* Prevent absolutely positioned icons from affecting layout */
.pricing-section .ps-item .thumb-icon {
  position: relative;
}

/* Force all orange text/icons to the green accent */
:root { --accent: #0f916f; }

/* Common named elements that used orange */
.section-title span,
.section-title h2,
.hi-text h1 strong,
.cs-item span,
.ci-text span,
.ps-item h3,
.pi-price h2,
.pi-price span,
.fw-recent h6 a,
.ts_text h4,
.gettouch-section .gt-text i,
.canvas-social a i,
.to-social a i,
.thumb-icon i,
.fa, i,
[class^="flaticon-"] {
  color: var(--accent) !important;
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Links fallback where orange was used */
a, a:link, a:visited {
  color: var(--accent) !important;
}

/* Catch inline styles or hex/rgb uses of orange */
*[style*="orange"],
*[style*="#f39c12"],
*[style*="#ff6600"],
*[style*="#ff7b00"],
*[style*="#ff8c00"],
*[style*="rgb(255,165,0)"] {
  color: var(--accent) !important;
  background-color: transparent !important;
  border-color: var(--accent) !important;
}

/* Ensure timetable uses the green accent */
:root { --accent: #0f916f; }

/* Force orange -> green in the timetable area */
.class-time,
.class-time .day-name,
.class-time .day .day-name,
.class-time .slot,
.class-time .slot .type,
.class-time .slot .time,
.class-time .slot .info,
.class-time .slot .meta,
.class-time .day.today .day-name {
  color: var(--accent) !important;
  fill: var(--accent) !important;
  stroke: var(--accent) !important;

}

/* Catch inline styles that use common orange hexes */
.class-time *[style*="orange"],
.class-time *[style*="#f39c12"],
.class-time *[style*="#ff6600"],
.class-time *[style*="#ff7b00"],
.class-time *[style*="rgb(255,165,0)"] {
  color: var(--accent) !important;
}

/* Timetable: make only text/icons green, do NOT change borders */

/* ensure accent is set */
:root { --accent: #0f916f; }

/* apply green to text and font-icons inside the timetable */
.class-time,
.class-time .day-name,
.class-time .day .day-name,
.class-time .slot,
.class-time .slot .type,
.class-time .slot .time,
.class-time .slot .info,
.class-time .slot .meta,
.class-time .day.today .day-name,
.class-time i,
.class-time .fa,
.class-time [class^="flaticon-"] {
  color: var(--accent) !important;
}

/* explicitly prevent border color from being overridden to green */
.class-time * {
  border-color: unset !important;
  outline-color: unset !important;
}

/* ensure SVG fills/strokes are not changed here (leave them as original) */
.class-time svg *[fill],
.class-time svg *[stroke] {
  fill: unset !important;
  stroke: unset !important;
}

/* Keep this specific heading white even when global overrides set green */
.keep-white {
  color: #ffffff !important;
  /* prevent inherited text-shadow or effects */
  text-shadow: none !important;
  background: transparent !important;
}

/* Center the "ChoseUs" items (only this section) */
.choseus-section .container > .row:nth-of-type(2) {
  display: flex;
  justify-content: center; /* center the columns inside this row */
  gap: 24px; /* optional spacing between columns */
}

/* Ensure each column's content is centered */
.choseus-section .col-lg-3,
.choseus-section .col-lg-4,
.choseus-section .col-sm-6 {
  display: flex;
  justify-content: center;
}

/* Center the cs-item contents (icon, title, text) */
.choseus-section .cs-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Make the icon sit nicely centered and slightly larger */
.choseus-section .cs-item .flaticon-034-stationary-bike,
.choseus-section .cs-item .flaticon-033-juice,
.choseus-section .cs-item .flaticon-014-heart-beat {
  font-size: 42px;
  margin-bottom: 14px;
  color: var(--accent) !important;
}

/* Small screens: keep normal stacking */
@media (max-width: 767.98px) {
  .choseus-section .container > .row:nth-of-type(2) {
    display: block;
    gap: 0;
  }
  .choseus-section .col-lg-3,
  .choseus-section .col-sm-6 {
    display: block;
    width: 100%;
  }
  .choseus-section .cs-item { align-items: flex-start; text-align: left; }
}

/* Footer social icons styling */
.footer-section .footer-social {
  margin: 18px 0 6px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* Make footer social icons visible: white inner circle + green border, green icon.
   On hover the circle fills green and the icon becomes white. */
.footer-section .footer-social-link {
  background: #ffffff !important;                 /* white inner */
  color: var(--accent) !important;                /* fallback */
  border: 2px solid var(--accent) !important;    /* green ring */
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  font-size: 18px !important;
  box-shadow: 0 8px 20px rgba(15,145,111,0.06);
  transition: background .18s ease, transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

/* Ensure icon is green on default */
.footer-section .footer-social-link .fa {
  color: var(--accent) !important;
  line-height: 1;
}

/* Hover/focus: fill with green, icon -> white, remove border */
.footer-section .footer-social-link:hover,
.footer-section .footer-social-link:focus {
  background: linear-gradient(135deg,#0f916f 0%,#12b07a 100%) !important;
  border-color: transparent !important;
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(15,145,111,0.12);
}

/* Icon color on hover */
.footer-section .footer-social-link:hover .fa,
.footer-section .footer-social-link:focus .fa {
  color: #ffffff !important;
}

/* Email button: keep same visual system as other footer icons */
.footer-section .footer-mail-link {
  /* reuse base .footer-social-link styles but allow a slightly different color on hover */
  background: #ffffff !important;
  color: var(--accent) !important;
  border: 2px solid var(--accent) !important;
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  font-size: 18px !important;
  box-shadow: 0 8px 20px rgba(15,145,111,0.06);
  transition: background .18s ease, transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

/* Icon color for the envelope */
.footer-section .footer-mail-link .fa {
  color: var(--accent) !important;
}

/* Hover/focus: fill green and make icon white */
.footer-section .footer-mail-link:hover,
.footer-section .footer-mail-link:focus {
  background: linear-gradient(135deg,#0f916f 0%,#12b07a 100%) !important;
  border-color: transparent !important;
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(15,145,111,0.12);
}
.footer-section .footer-mail-link:hover .fa,
.footer-section .footer-mail-link:focus .fa {
  color: #ffffff !important;
}

/* Footer map button — match other footer icons */
.footer-section .footer-map-link {
  background: #ffffff !important;
  border: 2px solid var(--accent) !important;
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  font-size: 18px !important;
  box-shadow: 0 8px 20px rgba(15,145,111,0.06);
  transition: background .18s ease, transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

/* marker icon color by default */
.footer-section .footer-map-link .fa-map-marker {
  color: var(--accent) !important;
}

/* Hover/focus: fill with green and make icon white */
.footer-section .footer-map-link:hover,
.footer-section .footer-map-link:focus {
  background: linear-gradient(135deg,#0f916f 0%,#12b07a 100%) !important;
  border-color: transparent !important;
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(15,145,111,0.12);
}
.footer-section .footer-map-link:hover .fa-map-marker,
.footer-section .footer-map-link:focus .fa-map-marker {
  color: #ffffff !important;
}

/* small screens */
@media (max-width:480px){
  .footer-section .footer-social-link { width:40px; height:40px; font-size:16px; }
  .footer-section .footer-mail-link { width:40px; height:40px; font-size:16px; }
  .footer-section .footer-map-link { width:40px; height:40px; font-size:16px; }
}