@import url('../fonts/unicons/unicons.css');
@import url('plugins.css');
@import url('../assets/style.css');
@import url('modified.css');
@import url('form.css');

:root {
  --futuristic-blue: #0082ff;
  --futuristic-purple: #7000ff;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.125);
  --font-primary: 'Manrope', sans-serif;
}

body,
button,
input,
textarea,
select,
label,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6,
.gym-branding-text,
.why-icon-box h4 {
  font-family: var(--font-primary) !important;
}

.solid.text-primary .fill-primary,
.solid.text-primary .fill-secondary {
  fill: #3f78e0 !important;
}

.swiper-container.clients .swiper-wrapper.ticker {
  transition-timing-function: linear !important;
}

.glass-card {
  background: rgba(246, 247, 249, 1);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 1.5rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-card:hover {
  transform: translateY(-10px);
  /* Keep generic hover effect for mobile/default */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.glass-card.no-hover:hover {
  transform: none !important;
  box-shadow: none !important;
  background: rgba(246, 247, 249, 1) !important;
}

/* Desktop: Fixed shadow, no shadow change on hover */
@media (min-width: 992px) {
  .glass-card {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    /* Permanent shadow */
  }

  .glass-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    /* No change on hover */
    /* Only transform remains if desired, or remove transform too if "fixed shadow" implies no movement. 
       User said "don't make those cards appear with shadow on cursor getting hovered", 
       implies shadow should be always there. */
  }

  /* Reduce spacing below service card descriptions in desktop view */
  #services .glass-card p {
    margin-bottom: 0.5rem !important;
  }

  /* Match service card borders with pricing section */
  #services .glass-card {
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
  }
}

/* Service Cards - Consistent Height Across All Viewports */
#services .glass-card {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Mobile view - smaller min-height */
@media (max-width: 767px) {
  #services .glass-card {
    min-height: 240px;
  }
}

/* Tablet view - medium min-height */
@media (min-width: 768px) and (max-width: 991px) {
  #services .glass-card {
    min-height: 300px;
  }
}

/* Desktop view - consistent larger min-height */
@media (min-width: 992px) {
  #services .glass-card {
    min-height: 200px;
    /* Reduced from 250px for closer fit */
    height: 100% !important;
    /* Force cards to stretch equally */
    padding-bottom: 1.5rem !important;
    /* Force smaller bottom padding on the card itself */
  }

  /* Standardize title height to prevent text push-down misalignment */
  #services .glass-card h3 {
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Add bottom spacing and responsive font size to service card descriptions */
#services .glass-card p {
  padding-bottom: 2rem !important;
  font-size: 0.85rem !important;
  /* Smaller text for better breathing room on small screens */
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

@media (min-width: 992px) {
  #services .glass-card p {
    font-size: 0.95rem !important;
    padding-bottom: 0 !important;
    /* Remove paragraph bottom padding on desktop */
    /* Standard size for desktop */
  }
}

/* Ensure centering on tablet views when cards wrap */
#services .flex-wrap {
  justify-content: center !important;
}

.icon-futuristic {
  font-size: 3rem !important;
  /* Default for mobile */
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .icon-futuristic {
    font-size: 4rem !important;
    /* For desktop */
  }
}

.text-gradient {
  background: linear-gradient(135deg, var(--futuristic-blue), var(--futuristic-purple));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.btn-futuristic {
  background: linear-gradient(135deg, var(--futuristic-blue), var(--futuristic-purple));
  color: white !important;
  border: none !important;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 130, 255, 0.3);
  transition: all 0.3s ease;
  font-weight: 600;
}

.btn-futuristic:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 130, 255, 0.5);
  filter: brightness(1.1);
}

.nav-futuristic .nav-link {
  position: relative;
  font-weight: 500;
  transition: color 0.3s ease;
  text-decoration: none !important;
}

/* Client logos – dimension control only */
.clients .swiper-slide {
  height: 96px !important;
  /* uniform slide height */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

footer img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

@media (min-width: 640px) {
  footer .max-w-6xl>.flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }

  footer .max-w-6xl .social-icons {
    order: 2 !important;
    width: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  footer .max-w-6xl .copyright-left {
    order: 1 !important;
    width: auto !important;
    text-align: left !important;
    flex: 1 1 auto !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
}

.clients .swiper-slide img {
  max-height: 50px !important;
  /* control logo size */
  max-width: 80% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

/* Adjust for even smaller screens if needed */
@media (max-width: 575px) {
  .clients .swiper-slide {
    height: 80px !important;
  }

  .clients .swiper-slide img {
    max-height: 40px !important;
  }
}

/* Gym Hero Animation Sizing */
.gym-hero-lottie {
  width: 600px !important;
  height: 350px !important;
}

@media (min-width: 768px) {
  .gym-hero-lottie {
    width: 750px !important;
    height: 400px !important;
  }
}

@media (min-width: 992px) {
  .gym-hero-lottie {
    width: 900px !important;
    height: 450px !important;
  }
}

@media (min-width: 1280px) {
  .gym-hero-lottie {
    width: 1000px !important;
    height: 500px !important;
  }
}

/* Gym Hero Image & Layout */
.hero-image-wrapper {
  position: relative;
  display: flex !important;
  /* Force flex to center */
  justify-content: center !important;
  /* Center horizontally on mobile */
  align-items: center;
  width: 100%;
}

.gym-hero-image {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 280px;
  /* increased from 220px */
  background: transparent;
  display: block;
  margin: 0 auto !important;
  /* Force center */
  transform: translateX(-0.8rem);
  /* Visual correction for mobile centering */
  z-index: 1;
}

@media (min-width: 768px) {
  .gym-hero-image {
    max-height: 380px;
    /* increased from 300px */
  }
}

@media (min-width: 1024px) {
  .hero-image-wrapper {
    justify-content: flex-end;
    overflow: visible;
  }

  .gym-hero-image {
    max-height: 480px;
    /* increased from 380px */
    margin: 0;
    margin-left: auto;
    object-position: right center;
  }
}

@media (min-width: 1200px) {
  .gym-hero-image {
    max-height: 550px;
    /* increased from 420px */
  }
}

/* New Hero Heading Scaling */
.gym-hero-heading {
  font-size: calc(2rem + 1.5vw) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 1.0rem !important;
  /* Reduced margin for more vertical space */
  color: #0f172a !important;
  display: block;
}

@media (min-width: 992px) {
  .gym-hero-heading {
    font-size: 3rem !important;
  }
}

@media (min-width: 1200px) {
  .gym-hero-heading {
    font-size: 3.5rem !important;
  }
}

@media (min-width: 1400px) {
  .gym-hero-heading {
    font-size: 4rem !important;
  }
}

/* Robust Button Alignment Fix */
.gym-button-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  /* Default: Centered on mobile */
  width: 100% !important;
}

@media (min-width: 992px) {
  .gym-button-container {
    justify-content: flex-start !important;
    /* Left-align on desktop */
    margin-left: 0 !important;
    /* Reset to align button box with heading */
  }
}

/* Gym Page Logo & Branding Alignment */
.gym-branding {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Default: Centered on mobile */
  gap: 1rem !important;
  margin-bottom: 2rem !important;
  margin-left: 0.5rem !important;
  /* Visual correction for mobile centering with edge clearance */
}

@media (min-width: 992px) {
  .gym-branding {
    justify-content: flex-start !important;
    /* Left-align on desktop */
    margin-left: 0.6rem !important;
    /* Precise alignment with heading */
  }
}

.gym-logo-img {
  height: 1.6rem;
  /* Reduced from 2.2rem for mobile */
  width: auto;
  object-fit: contain;
}

@media (min-width: 992px) {
  .gym-logo-img {
    height: 2.4rem;
    /* Increased from 1.8rem */
  }
}

.gym-separator {
  border-left: 2px solid #1e293b;
  height: 1.4rem;
  /* Reduced from 1.8rem for mobile */
  border-radius: 2px;
  opacity: 0.8;
}

@media (min-width: 992px) {
  .gym-separator {
    height: 2.0rem;
    /* Increased from 1.4rem */
  }
}

.gym-branding-text {
  /* font-family: 'Space Grotesk', sans-serif; -- Replaced by global */
  font-family: var(--font-primary);
  font-weight: 900;
  /* Ultra bold for futuristic look */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* Slightly reduced tracking for mobile */
  font-size: 1rem;
  /* Reduced from 1.4rem for mobile */
  line-height: 1;
  white-space: nowrap !important;
  background: linear-gradient(135deg, var(--futuristic-blue), var(--futuristic-purple));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(63, 120, 224, 0.1));
}

@media (min-width: 992px) {
  .gym-branding-text {
    font-size: 1.4rem;
    /* Reduced from 1.8rem */
    letter-spacing: 0.15em;
  }
}

@media (min-width: 992px) {
  .gym-branding-text {
    font-size: 2.2rem;
    /* increased from 1.6rem */
  }
}

/* Why Choose Us Section */
.why-icon-box {
  padding: 1.5rem;
  transition: transform 0.3s ease;
}

.why-icon-box .icon-lg i {
  font-size: 2.2rem;
}

.why-icon-box h4 {
  /* font-family: 'Space Grotesk', sans-serif; -- Replaced by global */
  font-family: var(--font-primary);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Redesigned Pricing Section */
#pricing .glass-card {
  transition: all 0.3s ease;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  background: #f8f9fa !important;
}

#pricing .glass-card:hover {
  background: rgb(224, 242, 254) !important;
  color: #0f172a !important;
  border: 2px solid rgba(0, 0, 0, 0.15);
  transform: none !important;
}

#pricing .card-header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 0.5rem;
  gap: 0.75rem;
  flex-wrap: wrap;
  text-align: center;
}

#pricing .glass-card h4 {
  margin-bottom: 0 !important;
  font-weight: 700;
  font-size: 1.6rem !important;
}

#pricing .plan-name {
  white-space: nowrap;
}

#pricing .glass-card:hover h4,
#pricing .glass-card:hover p,
#pricing .glass-card:hover .price-text,
#pricing .glass-card:hover .feature-item,
#pricing .glass-card:hover .feature-item iconify-icon {
  color: #0f172a !important;
}


/* internal mobile styling for pricing */
@media (max-width: 768px) {
  #pricing .glass-card {
    padding: 1.25rem !important;
    text-align: center !important;
  }

  #pricing .glass-card h4 {
    font-size: 1.5rem !important;
    margin-bottom: 0.25rem !important;
  }

  #pricing .glass-card p {
    font-size: 0.72rem !important;
    margin-bottom: 0.75rem !important;
    text-align: center !important;
  }

  #pricing .card-header {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.15rem !important;
    margin-bottom: 0.75rem !important;
  }

  #pricing .price-text {
    font-size: 1.05rem !important;
    justify-content: center;
  }

  #pricing .price-text span {
    font-size: 0.72rem !important;
  }

  #pricing .plan-name {
    white-space: normal;
    text-align: center;
  }

  #pricing .feature-list {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
    margin: 1rem 0 !important;
  }

  #pricing .feature-item {
    font-size: 0.72rem !important;
    justify-content: center !important;
  }

  #pricing .feature-item iconify-icon {
    font-size: 0.9rem !important;
    margin-right: 0.25rem !important;
  }

  #pricing .pricing-btn {
    width: 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    padding: 0.4rem !important;
    font-size: 0.75rem !important;
    border-radius: 40px !important;
  }
}

#pricing .feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin-bottom: 2rem;
  justify-items: center;
  text-align: center;
}

#pricing .feature-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #4b5563;
  text-align: center;
}

#pricing .feature-item iconify-icon {
  margin-right: 0.4rem;
  font-size: 0.9rem;
}

#pricing .pricing-btn {
  width: 100%;
  padding: 0.6rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  transition: all 0.3s ease;
  display: block;
}

#pricing .secondary-card .pricing-btn {
  background: #000000;
  color: #ffffff !important;
}

#pricing .secondary-card .pricing-btn:hover {
  background: #1a1a1a;
}

/* Hover state for the card determines button style */
#pricing .glass-card:hover .pricing-btn {
  background: #0f172a !important;
  color: #ffffff !important;
}

#pricing .glass-card:hover .pricing-btn:hover {
  background: #1e293b !important;
}

.price-text {
  font-weight: 700;
  font-size: 1.2rem !important;
  line-height: 1.1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
}

.price-text .price-currency {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.price-text .price-amount {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.price-text .price-duration {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.7;
}

#pricing .glass-card:hover {
  transform: none;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Contact Animation Sizing - Strictly Enforced */
/* Mobile/Default relies on Tailwind classes in HTML */

@media (min-width: 992px) {
  .contact-animation-figure {
    width: 400px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    mix-blend-mode: multiply;

  }
}

@media (min-width: 1200px) {
  .contact-animation-figure {
    width: 450px !important;
    mix-blend-mode: multiply;


    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }
}