:root {
      --primary-green: #2ecc71;
      --dark-green: #27ae60;
      --light-green: #a8e6cf;
      --accent-green: #00ff88;
      --dark-bg: #0a1612;
      --darker-bg: #050b09;
      --card-bg: #0f1f1a;
      --text-light: #e8f5e9;
      --text-gray: #b0bec5;
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      font-family: 'Roboto', sans-serif;
      background: var(--dark-bg);
      color: var(--text-light);
      overflow-x: hidden;
      padding-top: 80px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      font-family: 'Roboto', sans-serif;
  }

  a{
    text-decoration: none !important;
  }

  /* Navbar */
  .navbar {
      background: rgba(10, 22, 18, 0.08) !important;
      backdrop-filter: blur(10px);
      padding: 5px 0;
      transition: all 0.3s ease;
  }

  .navbar.scrolled {
      box-shadow: 0 5px 30px rgba(46, 204, 113, 0.2);
  }

  .navbar-brand {
      font-family: 'Roboto', sans-serif;
      font-size: 2rem;
      color: var(--primary-green) !important;
      letter-spacing: 3px;
      text-transform: uppercase;
  }

  .logowrapper {
      max-width: 70px;
  }

  .logowrapper img {
      width: 100%;
      height: auto;
      display: block;
  }

  .nav-link {
      color: var(--text-light) !important;
      font-weight: 500;
      font-size: 1.1rem;
      margin: 0 0.5rem;
      position: relative;
      transition: all 0.3s ease;
  }

  .nav-link::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      width: 80%;
      height: 2px;
      background: var(--primary-green);
      transition: transform 0.3s ease;
  }

  .nav-link:hover::after {
      transform: translateX(-50%) scaleX(1);
  }

  /* Hero Section */
  .hero-section {
      position: relative;
      min-height: 80vh;
      display: flex;
      align-items: center;
      background: linear-gradient(135deg, var(--darker-bg) 0%, var(--dark-bg) 50%, #0d2118 100%);
      overflow: hidden;
  }

  .hero-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background:
          radial-gradient(circle at 20% 50%, rgba(46, 204, 113, 0.1) 0%, transparent 50%),
          radial-gradient(circle at 80% 50%, rgba(0, 255, 136, 0.08) 0%, transparent 50%);
      pointer-events: none;
  }

  .hero-content {
      position: relative;
      z-index: 2;
      animation: fadeInUp 1s ease-out;
  }

  .hero-title {
      font-size: 3.5rem;
      line-height: 1.1;
      color: #fff;
      background-clip: text;
      font-weight: 800;
      animation: fadeInUp 1s ease-out 0.2s backwards;
  }

  .hero-title span {
      color: var(--primary-green);
      font-weight: 500;
  }

  .hero-subtitle {
      font-size: 20px;
      color: var(--text-gray);
      font-weight: 400;
      animation: fadeInUp 1s ease-out 0.4s backwards;
  }

  .hero-stats {
      display: flex;
      gap: 3rem;
      animation: fadeInUp 1s ease-out 0.6s backwards;
  }

  .stat-item {
      text-align: center;
  }

  .stat-number {
      font-size: 3rem;
      color: var(--primary-green);
      font-weight: 700;
      display: block;
  }

  .stat-label {
      color: var(--text-gray);
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 1px;
  }

  .btn-primary-custom {
      background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
      border: none;
      color: white;
      padding: 10px 30px;
      font-size: 1rem;
      font-weight: 600;
      text-transform: capitalize;
      border-radius: 50px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
  }

  .btn-primary-custom::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.5s ease;
  }

  .btn-primary-custom:hover::before {
      left: 100%;
  }

  .btn-primary-custom:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(46, 204, 113, 0.4);
  }

  .hero-image {
      position: relative;
      animation: fadeInRight 1s ease-out 0.3s backwards;
      margin-top: 2rem;
  }

  .hero-image::before {
      content: '';
      position: absolute;
      top: -20px;
      right: -20px;
      width: 100%;
      height: 100%;
      border: 3px solid var(--primary-green);
      border-radius: 20px;

  }

  .hero-image img {
      border-radius: 20px;
      width: 100%;
      height: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }

  /* Section Styling */
  section {
      padding: 40px 0;
      position: relative;
  }

  .section-title {
      font-size: 3.5rem;
      text-align: center;
      margin-bottom: 1rem;
      position: relative;
      display: inline-block;
      width: 100%;
      text-transform: capitalize;
  }

  .section-badge-wrap {
      position: relative;
      display: flex;
      justify-content: center;
      margin: 10px 0;
  }

  /* main badge */
  .section-badge {
      position: relative;
      padding: 3px 2.5rem;
      background: linear-gradient(135deg, rgba(15, 61, 102, .15), rgba(122, 196, 66, .15));
      color: #eaffea;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 1px;
      border-radius: 50px;
      border: 2px solid var(--primary-green);
      text-transform: uppercase;
  }



  .section-title span {
      color: var(--primary-green);
  }

  .section-subtitle {
      text-align: center;
      color: var(--text-gray);
      font-size: 1.2rem;
      margin-bottom: 3rem;
      font-weight: 400;
  }

  /* BMI Calculator */
  .bmi_section {
      background: linear-gradient(135deg, var(--darker-bg), var(--card-bg));
  }

  .bmi-calculator {
      background: var(--card-bg);
      border-radius: 20px;
      padding: 40px 15px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(46, 204, 113, 0.1);
  }

  .bmi-tabs {
      display: flex;
      gap: 1rem;
      margin-bottom: 2rem;
  }

  .bmi-tab {
      flex: 1;
      padding: 1rem;
      background: rgba(46, 204, 113, 0.1);
      border: 2px solid transparent;
      border-radius: 10px;
      cursor: pointer;
      text-align: center;
      font-size: 1.2rem;
      font-weight: 600;
      transition: all 0.3s ease;
  }

  .bmi-tab.active {
      background: var(--primary-green);
      color: white;
      border-color: var(--primary-green);
  }

  .bmi-tab:hover:not(.active) {
      border-color: var(--primary-green);
  }

  .form-control,
  .form-select {
      background: rgba(255, 255, 255, 0.05);
      border: 2px solid rgba(46, 204, 113, 0.2);
      color: var(--text-light);
      padding: 0.8rem;
      border-radius: 10px;
      font-size: 1.1rem;
  }

  .form-control:focus,
  .form-select:focus {
      background: rgba(255, 255, 255, 0.08);
      border-color: var(--primary-green);
      color: var(--text-light);
      box-shadow: 0 0 0 0.2rem rgba(46, 204, 113, 0.25);
  }

  .form-label {
      color: var(--text-gray);
      font-weight: 500;
      margin-bottom: 0.5rem;
      font-size: 1.1rem;
  }

  .bmi-result {
      background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), rgba(0, 255, 136, 0.1));
      border: 2px solid var(--primary-green);
      border-radius: 15px;
      padding: 2rem;
      margin-top: 2rem;
      text-align: center;
      display: none;
  }

  .bmi-result.show {
      display: block;
      animation: scaleIn 0.5s ease;
  }

  .bmi-value {
      font-size: 4rem;
      color: var(--accent-green);
      font-weight: 700;
      margin: 1rem 0;
  }

  .bmi-category {
      font-size: 1.8rem;
      color: var(--primary-green);
      font-weight: 600;
      text-transform: uppercase;
  }

  .bgmi_calc_hero_img {
      width: 100%;
      height: 100%;
      overflow: hidden;
  }

  .bgmi_calc_hero_img img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 10px;
  }


  /* Services */
  .service-card {
      background: var(--card-bg);
      border-radius: 20px;
      padding: 30px 15px;
      height: 100%;
      border: 2px solid rgba(46, 204, 113, 0.1);
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
  }

  .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(90deg, var(--primary-green), var(--accent-green));
      transform: scaleX(0);
      transition: transform 0.4s ease;
  }

  .service-card:hover::before {
      transform: scaleX(1);
  }

  .service-card:hover {
      transform: translateY(-10px);
      border-color: var(--primary-green);
      box-shadow: 0 20px 50px rgba(46, 204, 113, 0.2);
  }

  .service-icon {
      font-size: 3.5rem;
      color: var(--primary-green);
      margin-bottom: 1.5rem;
      display: inline-block;
      transition: all 0.3s ease;
  }

  .service-card:hover .service-icon {
      transform: scale(1.1) rotate(5deg);
  }

  .service-title {
      font-size: 1.8rem;
      margin-bottom: 1rem;
      color: var(--text-light);
  }

  .service-description {
      color: var(--text-gray);
      font-size: 1.1rem;
      line-height: 1.6;
  }

  /* Why Choose Us Redesign */
  .why-choose {
      background: radial-gradient(circle at top right, var(--card-bg), var(--darker-bg));
      overflow: hidden;
  }

  .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 2.5rem;
      margin-top: 4rem;
  }

  .feature-card {
      position: relative;
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(46, 204, 113, 0.1);
      border-radius: 24px;
      padding: 30px 15px;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
  }

  .feature-card:hover {
      transform: translateY(-15px) scale(1.02);
      border-color: var(--primary-green);
      background: rgba(46, 204, 113, 0.05);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }

  .card-number {
      position: absolute;
      top: -10px;
      right: 10px;
      font-size: 8rem;
      font-weight: 800;
      color: rgba(46, 204, 113, 0.04);
      line-height: 1;
      pointer-events: none;
      transition: all 0.5s ease;
  }

  .feature-card:hover .card-number {
      color: rgba(46, 204, 113, 0.08);
      transform: translateY(10px);
  }

  .card-icon-wrap {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: white;
      margin-bottom: 2rem;
      box-shadow: 0 10px 20px rgba(46, 204, 113, 0.3);
      transition: all 0.5s ease;
  }

  .feature-card:hover .card-icon-wrap {
      transform: rotateY(180deg);
      box-shadow: 0 15px 30px rgba(46, 204, 113, 0.5);
  }

  .card-content h4 {
      font-size: 1.5rem;
      font-weight: 700;
      color: white;
      margin-bottom: 1rem;
      letter-spacing: 1px;
      position: relative;
  }

  .card-content p {
      color: var(--text-gray);
      line-height: 1.7;
      font-size: 1.05rem;
      margin: 0;
  }

  .corner-accent {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, transparent 50%, var(--primary-green) 50%);
      opacity: 0;
      transition: all 0.3s ease;
  }

  .feature-card:hover .corner-accent {
      opacity: 1;
  }

  /* Pulse Button */
  .pulse-button-wrap {
      position: relative;
      display: inline-block;
  }

  .pulse {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      background: var(--primary-green);
      border-radius: 50px;
      opacity: 0.5;
      z-index: -1;
      animation: pulse-out 2s infinite;
  }

  @keyframes pulse-out {
      0% {
          transform: translate(-50%, -50%) scale(1);
          opacity: 0.5;
      }

      100% {
          transform: translate(-50%, -50%) scale(1.4);
          opacity: 0;
      }
  }

  @media (max-width: 768px) {
      .features-grid {
          gap: 1.5rem;
      }

      .feature-card {
          padding: 2rem;
      }

      .card-number {
          font-size: 5rem;
      }
  }



  /* Balanced Section */
  .balanced_features_section {
      background-color: var(--darker-bg);

  }

  .balanced_section_title {
      color: #fff;
      font-weight: 800;
      font-size: 2.5rem;
      margin-bottom: 30px;
  }

  /* Feature Items */
  .balanced_feature_item {
      display: flex;
      gap: 20px;
      margin-bottom: 25px;
      transition: transform 0.3s ease;
  }

  .balanced_feature_item:hover {
      transform: translateX(10px);
  }

  .balanced_icon_box {
      min-width: 45px;
      height: 45px;
      background: rgba(46, 204, 113, 0.1);
      border: 1px solid var(--primary-green);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-green);
      font-size: 1.2rem;
  }

  .balanced_feature_name {
      color: #fff;
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 5px;
  }

  .balanced_feature_desc {
      color: var(--text-gray);
      font-size: 1.05rem;
      line-height: 1.5;
      margin: 0;
  }

  /* CTA Styles */
  .balanced_tagline {
      font-size: 1.05rem;
      color: #fff;
      font-style: italic;
      margin-bottom: 20px;
  }

  .balanced_btn_primary {
      background: var(--primary-green);
      color: #000;
      padding: 14px 28px;
      border-radius: 8px;
      font-weight: 700;
      text-decoration: none;
      transition: 0.3s;
  }

  .balanced_btn_outline {
      border: 2px solid #fff;
      color: #fff;
      padding: 14px 28px;
      border-radius: 8px;
      font-weight: 700;
      text-decoration: none;
      transition: 0.3s;
  }

  .balanced_btn_outline i {
      color: #00ff88 !important;
      font-size: 20px;
  }

  .balanced_btn_primary:hover {
      background: var(--accent-green);
      color: #000;
  }

  .balanced_btn_outline:hover {
      background: #fff;
      color: #000;
  }

  /* Image Bento Grid */
  .balanced_image_bento .balanced_grid_top {
      display: flex;
      gap: 20px;
  }

  .balanced_img_card {
      border-radius: 25px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }

  .balanced_img_card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: scale 0.5s ease;
  }

  .balanced_img_card:hover img {
      scale: 1.1;
  }

  .small_card {
      flex: 1;
      height: 250px;
  }

  .large_card {
      width: 100%;
      height: 350px;
  }

  /* Mobile Adjustments */
  @media (max-width: 768px) {
      .balanced_section_title {
          font-size: 2rem;
      }

      .balanced_image_bento .balanced_grid_top {
          flex-direction: column;
      }

      .small_card {
          height: 200px;
      }

      .large_card {
          height: 250px;
      }
  }


  /* Benfits Section */
  /* Section Container */
  .fitness_benefits_section {
      background-color: var(--darker-bg);
      padding: 100px 0;
      overflow: hidden;
  }

  /* Image Styling */
  .fitness_benefits_image_wrapper {
      position: relative;
      z-index: 1;
  }

  .fitness_benefits_main_img {
      max-width: 100%;
      height: auto;
      filter: drop-shadow(0 0 30px rgba(46, 204, 113, 0.2));
      /* Use a transparent-background PNG for the best effect here */
  }

  .fitness_benefits_glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 300px;
      background: var(--primary-green);
      filter: blur(150px);
      opacity: 0.15;
      z-index: -1;
  }

  /* Benefit List Items */
  .fitness_benefits_item {
      display: flex;
      align-items: center;
      gap: 25px;
      margin-bottom: 40px;
      transition: transform 0.3s ease;
  }

  .fitness_benefits_item:hover {
      transform: translateX(15px);
  }

  /* Circular Thumbnails */
  .fitness_benefits_thumb {
      min-width: 100px;
      max-width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid var(--primary-green);
      box-shadow: 0 0 20px rgba(46, 204, 113, 0.3);
  }

  .fitness_benefits_thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  /* Text Styling */
  .fitness_benefits_title {
      color: #ffffff;
      font-size: 1.5rem;
      font-weight: 800;
      margin-bottom: 8px;
  }

  .fitness_benefits_desc {
      color: var(--text-gray);
      font-size: 1rem;
      line-height: 1.5;
      margin: 0;
      max-width: 450px;
  }

  /* Responsive Fixes */
  @media (max-width: 991px) {
      .fitness_benefits_item {
          flex-direction: column;
          text-align: center;
          gap: 15px;
      }

      .fitness_benefits_desc {
          margin: 0 auto;
      }

      .fitness_benefits_item:hover {
          transform: translateY(-5px);
      }
  }

  /* Benfits Section Ends */

  /* Gallery Redesign - Bento Box Layout */
  .gallery-section {
      background: var(--dark-bg);
  }

  .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 250px;
      gap: 1.5rem;
      margin-top: 3rem;
  }

  .gallery-item {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* Bento Grid Spans */
  .gallery-item[data-index="0"] {
      grid-column: span 2;
      grid-row: span 2;
  }

  .gallery-item[data-index="1"] {
      grid-column: span 1;
      grid-row: span 1;
  }

  .gallery-item[data-index="2"] {
      grid-column: span 1;
      grid-row: span 1;
  }

  .gallery-item[data-index="3"] {
      grid-column: span 1;
      grid-row: span 2;
  }

  .gallery-item[data-index="4"] {
      grid-column: span 2;
      grid-row: span 1;
  }

  .gallery-item[data-index="5"] {
      grid-column: span 1;
      grid-row: span 1;
  }

  .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.8s ease;
      filter: grayscale(20%);
  }

  .gallery-item:hover img {
      transform: scale(1.15);
      filter: grayscale(0%);
  }

  .gallery-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to top, rgba(10, 22, 18, 0.9) 0%, rgba(10, 22, 18, 0.4) 50%, transparent 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 2rem;
      opacity: 0;
      transition: all 0.4s ease;
      transform: translateY(20px);
  }

  .gallery-item:hover .gallery-overlay {
      opacity: 1;
      transform: translateY(0);
  }

  .gallery-overlay i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      font-size: 3rem;
      color: var(--primary-green);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      opacity: 0.8;
  }

  .gallery-item:hover .gallery-overlay i {
      transform: translate(-50%, -50%) scale(1);
  }

  .gallery-info h4 {
      font-size: 1.4rem;
      color: white;
      margin-bottom: 0.3rem;
      font-weight: 700;
      transform: translateY(20px);
      transition: all 0.4s ease 0.1s;
  }

  .gallery-info p {
      font-size: 0.95rem;
      color: var(--primary-green);
      margin: 0;
      transform: translateY(20px);
      transition: all 0.4s ease 0.2s;
  }

  .gallery-item:hover .gallery-info h4,
  .gallery-item:hover .gallery-info p {
      transform: translateY(0);
  }

  .gallery-item::after {
      content: '';
      position: absolute;
      inset: 0;
      border: 2px solid var(--primary-green);
      border-radius: 20px;
      opacity: 0;
      transition: all 0.4s ease;
      pointer-events: none;
      transform: scale(1.05);
  }

  .gallery-item:hover::after {
      opacity: 1;
      transform: scale(1);
  }

  @media (max-width: 1200px) {
      .gallery-grid {
          grid-template-columns: repeat(3, 1fr);
      }

      .gallery-item[data-index="0"] {
          grid-column: span 2;
      }

      .gallery-item[data-index="3"] {
          grid-column: span 1;
      }

      .gallery-item[data-index="4"] {
          grid-column: span 2;
      }
  }

  @media (max-width: 768px) {
      .gallery-grid {
          grid-template-columns: repeat(2, 1fr);
          grid-auto-rows: 200px;
      }

      .gallery-item {
          grid-column: span 1 !important;
          grid-row: span 1 !important;
      }
  }

  @media (max-width: 480px) {
      .gallery-grid {
          grid-template-columns: 1fr;
      }
  }

  /* Gallery Modal */
  .gallery-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.95);
      z-index: 10000;
      backdrop-filter: blur(10px);
      animation: fadeIn 0.3s ease;
  }

  .gallery-modal.active {
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .gallery-modal-content {
      position: relative;
      max-width: 90vw;
      max-height: 90vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .modal-image-container {
      position: relative;
      width: 100%;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .modal-image-container img {
      max-width: 100%;
      max-height: 70vh;
      object-fit: contain;
      border-radius: 10px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  }

  .modal-info {
      text-align: center;
      margin-top: 1.5rem;
      color: white;
  }

  .modal-info h3 {
      font-size: 2rem;
      margin-bottom: 0.5rem;
      color: var(--primary-green);
  }

  .modal-info p {
      font-size: 1.2rem;
      color: var(--text-gray);
      margin: 0;
  }

  .modal-close {
      position: absolute;
      top: -40px;
      right: 0;
      background: var(--primary-green);
      color: white;
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      font-size: 1.2rem;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 10001;
  }

  .modal-close:hover {
      background: var(--dark-green);
      transform: rotate(90deg);
  }

  .modal-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(46, 204, 113, 0.8);
      color: white;
      border: none;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 1.5rem;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 10001;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .modal-nav:hover {
      background: var(--primary-green);
      transform: translateY(-50%) scale(1.1);
  }

  .modal-prev {
      left: 20px;
  }

  .modal-next {
      right: 20px;
  }

  .modal-counter {
      position: absolute;
      bottom: -40px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--text-gray);
      font-size: 1rem;
      background: rgba(46, 204, 113, 0.2);
      padding: 0.5rem 1rem;
      border-radius: 20px;
      border: 1px solid var(--primary-green);
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  @keyframes slideIn {
      from {
          transform: translateX(50px);
          opacity: 0;
      }

      to {
          transform: translateX(0);
          opacity: 1;
      }
  }

  /* Pricing */
  .pricing-card {
      background: var(--card-bg);
      border-radius: 20px;
      padding: 30px 15px;
      text-align: center;
      border: 2px solid rgba(46, 204, 113, 0.1);
      transition: all 0.4s ease;
      position: relative;
      height: 100%;
  }

  .pricing-card.featured {
      border-color: var(--primary-green);
      transform: scale(1.05);
      box-shadow: 0 20px 60px rgba(46, 204, 113, 0.3);
  }

  .pricing-card.featured::before {
      content: 'MOST POPULAR';
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--primary-green);
      color: white;
      padding: 0.5rem 1.5rem;
      border-radius: 50px;
      font-size: 0.9rem;
      font-weight: 700;

  }

  .pricing-card:hover {
      transform: translateY(-10px) scale(1.02);
      border-color: var(--primary-green);
  }

  .pricing-plan {
      font-size: 1.5rem;
      color: var(--primary-green);
      margin-bottom: 1rem;
      text-transform: uppercase;
      letter-spacing: 2px;
  }

  .pricing-price {
      font-size: 3.5rem;
      color: var(--text-light);
      font-weight: 700;
      margin: 1rem 0;
  }

  .pricing-price span {
      font-size: 1.5rem;
      color: var(--text-gray);
  }

  .pricing-features {
      list-style: none;
      padding: 15px 0;
      margin: 0;
      text-align: left;
  }

  .pricing-features li {
      padding: 0.8rem 0;
      color: var(--text-gray);
      font-size: 1.1rem;
      border-bottom: 1px solid rgba(46, 204, 113, 0.1);
  }

  .pricing-features li:last-child {
      border-bottom: none;
  }

  .pricing-features i {
      color: var(--primary-green);
      margin-right: 0.5rem;
  }

  /* Trainers */
  .trainer-card {
      background: var(--card-bg);
      border-radius: 20px;
      overflow: hidden;
      border: 2px solid rgba(46, 204, 113, 0.1);
      /* transition: all 0.4s ease; */
      height: 100%;
      width: 100%;
  }

  .trainer-card:hover {
      transform: translateY(-10px);
      border-color: var(--primary-green);
      box-shadow: 0 20px 50px rgba(46, 204, 113, 0.2);
  }

  .trainer-image {
      position: relative;
      overflow: hidden;
      height: 350px;
      width: 100%;
  }

  .trainer-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
  }

  .trainer-card:hover .trainer-image img {
      transform: scale(1.1);
  }

  .trainer-social {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(10, 22, 18, 0.95), transparent);
      padding: 1.5rem;
      display: flex;
      gap: 1rem;
      justify-content: center;
      transform: translateY(100%);
      transition: transform 0.4s ease;
  }

  .trainer-card:hover .trainer-social {
      transform: translateY(0);
  }

  .trainer-social a {
      text-decoration: none;
      width: 40px;
      height: 40px;
      background: var(--primary-green);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      transition: all 0.3s ease;
  }

  .trainer-social a:hover {
      background: var(--accent-green);
      transform: translateY(-5px);
  }

  .trainer-info {
      padding: 15px;
      text-align: center;
  }

  .trainer-name {
      font-size: 1.8rem;
      margin-bottom: 0.5rem;
      color: var(--text-light);
  }

  .trainer-specialty {
      color: var(--primary-green);
      font-size: 1.1rem;
      margin-bottom: 0.5rem;
      text-transform: uppercase;
      letter-spacing: 1px;
  }

  .trainer-experience {
      color: var(--text-gray);
      font-size: 1rem;
  }

  /* Testimonials */
  .testimonial-card {
      background: var(--card-bg);
      border-radius: 20px;
      padding: 2.5rem;
      border: 2px solid rgba(46, 204, 113, 0.1);
      position: relative;
      height: 100%;
  }

  .testimonial-quote {
      font-size: 4rem;
      color: var(--primary-green);
      opacity: 0.3;
      position: absolute;
      top: 1rem;
      left: 1.5rem;
  }

  .testimonial-text {
      color: var(--text-gray);
      font-size: 1.2rem;
      line-height: 1.8;
      margin: 2rem 0;
      position: relative;
      z-index: 1;
  }

  .testimonial-author {
      display: flex;
      align-items: center;
      gap: 1.5rem;
  }

  .testimonial-avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.8rem;
      font-weight: 700;
  }

  .testimonial-author-info h5 {
      font-size: 1.3rem;
      color: var(--text-light);
      margin-bottom: 0.2rem;
  }

  .testimonial-stars {
      color: #ffd700;
      font-size: 1rem;
  }

  /* FAQ */
  .faq-item {
      background: var(--card-bg);
      border-radius: 15px;
      margin-bottom: 1.5rem;
      border: 2px solid rgba(46, 204, 113, 0.1);
      overflow: hidden;
      transition: all 0.3s ease;
  }

  .faq-item:hover {
      border-color: var(--primary-green);
  }

  .faq-question {
      padding: 1.5rem 2rem;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      user-select: none;
  }

  .faq-question h5 {
      font-size: 1.3rem;
      color: var(--text-light);
      margin: 0;
      font-weight: 600;
  }

  .faq-icon {
      font-size: 1.5rem;
      color: var(--primary-green);
      transition: transform 0.3s ease;
  }

  .faq-item.active .faq-icon {
      transform: rotate(45deg);
  }

  .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
  }

  .faq-answer-content {
      padding: 0 2rem 1.5rem 2rem;
      color: var(--text-gray);
      font-size: 1.1rem;
      line-height: 1.8;
  }

  .faq-item.active .faq-answer {
      max-height: 500px;
  }

  /* Footer */
  footer {
      background: var(--darker-bg);
      border-top: 2px solid rgba(46, 204, 113, 0.2);
      padding: 3rem 0 1rem;
  }

  .footer-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 3rem;
      margin-bottom: 2rem;
  }

  .footer-section h4 {
      position: relative;
      font-size: 1.3rem;
      color: var(--primary-green);
      margin-bottom: 10px;
      padding-bottom: 5px;

  }

  .footer-section h4::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;

      width: 55px;
      height: 2px;
      border-radius: 10px;

      background: linear-gradient(90deg,
              var(--accent-green),
              var(--primary-green),
              rgba(46, 204, 113, 0));

      box-shadow:
          0 0 8px rgba(0, 255, 136, 0.6),
          0 0 20px rgba(0, 255, 136, 0.25);
  }


  .footer-section p,
  .footer-section li {
      color: var(--text-gray);
      font-size: 1rem;
      line-height: 1.8;
  }

  .footer-section ul {
      list-style: none;
      padding: 0;
  }

  .footer-section ul li {
      margin-bottom: 0.8rem;
  }

  .services_footer li {
      transition: 0.3s ease;
  }

  .services_footer li i {
      rotate: 150deg;
      background: linear-gradient(135deg, #f5f5f5, #9e9e9e, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  }

  .services_footer li:hover i {
      transform: scale(1.15) rotate(150deg);
      transition: 0.3s ease;

      background: var(--primary-green);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow:
          0 0 6px rgba(0, 255, 136, 0.8),
          0 0 14px rgba(46, 204, 113, 0.6);
  }


  .footer_socials {
      display: flex;
      gap: 1rem;
  }

  .footer_socials a {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #fff;
      font-size: 1.3rem;
      transition: all 0.5s ease;
      box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.15);
  }


  .footer_socials a .fa-facebook-f {
      color: #1877f2;
  }

  .footer_socials a .fa-instagram {
      background: linear-gradient(45deg,
              #f58529,
              #dd2a7b,
              #8134af,
              #515bd4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  /* Twitter */
  .footer_socials a .fa-twitter {
      color: #1da1f2;
  }

  /* YouTube */
  .footer_socials a .fa-youtube {
      color: #ff0000;
  }


  .footer_socials a:hover {
      transform: translateY(-4px) scale(1.05);
      box-shadow:
          0 8px 20px rgba(0, 255, 136, 0.35),
          0 0 12px rgba(0, 255, 136, 0.5);
  }

  .footer_socials i {
      transition: 0.3s ease;
  }


  .footer-section a {
      color: var(--text-gray);
      text-decoration: none;
      transition: color 0.3s ease;
  }

  .footer-section a:hover {
      color: var(--primary-green);
  }

  .footer-bottom {
      text-align: center;
      padding-top: 2rem;
      border-top: 1px solid rgba(46, 204, 113, 0.1);
      color: var(--text-gray);
  }

  /* Animations */
  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(30px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  @keyframes fadeInRight {
      from {
          opacity: 0;
          transform: translateX(30px);
      }

      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  @keyframes scaleIn {
      from {
          opacity: 0;
          transform: scale(0.9);
      }

      to {
          opacity: 1;
          transform: scale(1);
      }
  }

  /* Responsive */
  @media (max-width: 768px) {
      .hero-title {
          font-size: 2rem;
      }

      .section-title {
          font-size: 2.5rem;
      }

      .hero-stats {
          gap: 1.5rem;
      }

      .pricing-card.featured {
          transform: scale(1);
      }

      .gallery-grid {
          grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
          gap: 1rem;
      }

      .modal-nav {
          width: 40px;
          height: 40px;
          font-size: 1.2rem;
      }

      .modal-prev {
          left: 10px;
      }

      .modal-next {
          right: 10px;
      }

      .modal-info h3 {
          font-size: 1.5rem;
      }

      .modal-info p {
          font-size: 1rem;
      }

      .modal-counter {
          bottom: -30px;
          font-size: 0.9rem;
      }
  }

  @media (max-width: 480px) {
      .gallery-grid {
          grid-template-columns: 1fr;
      }

      .gallery-modal-content {
          max-width: 95vw;
          max-height: 95vh;
      }

      .modal-nav {
          display: none;
      }
  }

  /* Common  Pages Hero Section */
  .common-hero-sec {
      background: linear-gradient(135deg, var(--darker-bg) 0%, var(--dark-bg) 0%, #0d2118 90%);
      padding: 80px 0 60px;
      position: relative;
      overflow: hidden;
  }

  .common-hero-sec::before {
      content: "";
      position: absolute;
      top: -50%;
      right: -10%;
      width: 500px;
      height: 500px;
      background: var(--accent-green);
      opacity: 0.1;
      border-radius: 50%;
      z-index: 0;
  }

  .common-hero-sec .container {
      position: relative;
      z-index: 1;
  }

  .common-hero-sec-content {
      padding-right: 30px;
  }

  .common-hero-sec-subtitle {
      position: relative;
      padding: 5px 1.5rem;
      background: linear-gradient(135deg,
              rgba(15, 61, 102, .15),
              rgba(122, 196, 66, .15));
      color: #eaffea;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 2px;
      border-radius: 50px;
      border: 2px solid var(--primary-green);
      text-transform: uppercase;
      z-index: 2;
      display: inline-flex;
      width: fit-content;
  }


  .common-hero-sec-title {
      font-size: 3.5rem;
      font-weight: 700;
      color: var(--text-gray);
      margin-bottom: 20px;
      line-height: 1.2;
  }

  .common-hero-sec-title span {
      color: var(--accent-green);
  }

  .common-hero-sec-description {
      font-size: 1.1rem;
      color: var(--text-gray);
      line-height: 1.8;
      margin-bottom: 0;
  }

  .common-hero-sec-image {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  }

  .common-hero-sec-image img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 20px;
      transition: transform 0.3s ease;
  }

  .common-hero-sec-image:hover img {
      transform: scale(1.05);
  }

  /* Common  Pages Hero Section End */


  /* Conatct Us */
   /* Scoped Custom Styles */
  .custom_contact_wrapper {
    background-color: var(--darker-bg);
  }

  .contact_main_heading {
    color: #fff;
    font-size: 3rem;
    font-weight: 800;
    margin: 20px 0;
  }

  .highlight_text {
    color: var(--primary-green);
  }

  .contact_description {
    color: var(--text-gray);
    font-size: 1.1rem;
    line-height: 1.6;
  }

  /* Info Cards */
  .custom_info_card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--card-bg);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    border-left: 4px solid var(--primary-green);
    transition: all 0.3s ease;
  }

  .custom_info_card:hover {
    border: 1px solid var(--primary-green);
    border-left: 4px solid var(--primary-green);
    box-shadow: 0 8px 20px rgba(46, 204, 113, 0.25);
  }

  .custom_info_card a{
     text-decoration: none !important;
  }


  .info_icon_circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(46, 204, 113, 0.25),
        rgba(46, 204, 113, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-green);
    box-shadow: 0 8px 20px rgba(46, 204, 113, 0.25);
  }


  .info_label {
    display: block;
    color: var(--primary-green);
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
  }

  .info_value {
    color: #fff;
    margin: 0;
    font-weight: 500;
  }

  /* Form Styles */
  .form_glass_container {
    background: var(--card-bg);
    padding: 30px 15px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
  }

  .custom_label {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: block;
  }

  .custom_input,
  .custom_input_textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 18px;
    color: #fff;
    transition: all 0.3s ease;
  }

  .custom_input:focus,
  .custom_input_textarea:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.2);
  }

  .form_submit_btn {
    background: var(--primary-green);
    color: #050b09;
    border: none;
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
  }

  .form_submit_btn:hover {
    background: var(--accent-green);
    transform: scale(1.02);
  }

  /* Map Holder */
  .map_frame_holder {
    border-radius: 30px;
    overflow: hidden;
    border: 2px solid var(--primary-green);
  }