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

:root {
  --dark-black: #000000;
  --neon-yellow: #f2ff00;
  --glass-bg: rgba(255, 255, 255, 0.1);
  --bg-dark: #121212;
  --container-bg: #1c1c1c;
  --brand-lime: #dfff00;
  --text-gray: #ffffff;
}

:root {
  --main-bg: #4c5400;
  --input-bg: rgba(255, 255, 255, 0.05);
  --neon-accent: #dfff00;
  /* Electric Lime */
  --border-style: 1px solid rgba(255, 255, 255, 0.2);
  /* Fluid typography using clamp */
  --font-size-base: clamp(0.9rem, 1vw + 0.5rem, 1.1rem);
}
@font-face {
  font-family: "Akira Expanded";
  src: url(fonts/akira-expanded/Akira\ Expanded\ Demo.otf) format(opentype);
}

@font-face {
  font-family: "Clash Display";
  src: url(fonts/clash-display-font/ClashDisplay-Regular.otf) format(opentype);
}

@font-face {
  font-family: "Clash Display Extra Light";
  src: url(fonts/clash-display-font/ClashDisplay-Extralight.otf)
    format(opentype);
}

@font-face {
  font-family: "Clash Display Bold";
  src: url(fonts/clash-display-font/ClashDisplay-Bold.otf) format(opentype);
}
@font-face {
  font-family: "Clash Display Semi Bold";
  src: url(fonts/clash-display-font/ClashDisplay-Semibold.otf) format(opentype);
}

@font-face {
  font-family: "Clash Display Medium";
  src: url(fonts/clash-display-font/ClashDisplay-Medium.otf) format(opentype);
}

body {
  font-family: "Clash Display";
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  background: var(--dark-black);
}

ul li {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

h1 {
  font-family: "Akira Expanded";
  font-size: 141px;
  font-weight: 900;
}

h2 {
  font-family: "Clash Display";
  font-size: 48px;
  font-weight: 400;
}

p {
  font-family: "Clash Display";
  font-size: 18px;
  line-height: 1.55;
}

.container {
  max-width: 1750px;
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.col20 {
  max-width: 20%;
  flex: 0 0 20%;
  padding: 0 15px;
}
.col25 {
  max-width: 25%;
  flex: 0 0 25%;
  padding: 0 15px;
}
.col33 {
  max-width: 33.33%;
  flex: 0 0 33.33%;
  padding: 0 15px;
}
.col40 {
  max-width: 40%;
  flex: 0 0 40%;
  padding: 0 15px;
}
.col50 {
  max-width: 50%;
  flex: 0 0 50%;
  padding: 0 15px;
}
.col60 {
  max-width: 60%;
  flex: 0 0 60%;
  padding: 0 15px;
}

.col80 {
  max-width: 80%;
  flex: 0 0 80%;
  padding: 0 15px;
}
.col100 {
  max-width: 100%;
  flex: 0 0 100%;
  padding: 0 15px;
}


.neon_lines {
  color: var(--neon-yellow);
  font-family: "Akira Expanded";
  font-size: clamp(22px, 1.5vw + 16px, 28px);
  display: block;
  margin-bottom: 10px;
}
/* =======================This is Common Part ===================== */

/* ================================================ */
/*      Header Section  common for all page     */
/* ================================================ */
.header {
  position: absolute;
  width: 100%;
  z-index: 9000;
}

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand_logo a {
  max-width: 172px;
  display: block;
}

.nav_links {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.nav_links li a {
  color: #fff;
  padding: 12px 20px;
  font-size: 15px;
  transition: 0.3s;
  font-weight: 200;
}

.nav_links li a:hover {
  background-color: var(--neon-yellow);
  color: var(--bg-dark);
  border-radius: 50px;
  transition: 0.5s ease-in-out;
}
/* Search Box Styles */
.search_cart {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search_box {
  background-color: var(--dark-black);
  border-radius: 50px;
  /* Creates the pill shape */
  padding: 10px 25px;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 250px;
  /* Adjust based on your layout needs */
}

.search_box form {
  display: flex;
  align-items: center;
  width: 100%;
}

.search_box button {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.search_box input {
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: "Clash Display", sans-serif;
  font-size: 18px;
  outline: none;
  width: 100%;
}

.search_box input::placeholder {
  color: #ffffff;
  opacity: 1;
  /* Ensures text is visible */
}

.cart {
  background: var(--neon-yellow);
  color: var(--dark-black);
  padding: 5px;
  border-radius: 50px;
  margin-left: 5px;
}

.cart {
  background: var(--neon-yellow);
  color: #000;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
}
.login_btn {
  margin-left: 11px;
}

.login_btn a {
  color: var(--neon-yellow);
  border: 1px solid var(--neon-yellow);
  padding: 10px 10px 10px 25px;
  border-radius: 50px;
  display: inline-flex;
  /* Changed to inline-flex so it doesn't span full width */
  align-items: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  /* This clips the background fill so it stays inside the button */
  z-index: 1;
  transition: color 0.4s ease;
}

.login_btn .arrow_circle {
  margin-left: 15px;
}

/* ===Login btn Hover======= */
.login_btn a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  /* Start hidden to the left */
  width: 100%;
  height: 100%;
  background-color: var(--neon-yellow);
  transition: left 0.5s ease;
  z-index: -1;
  /* Keeps background behind the text */
}

/* Hover States */
.login_btn a:hover {
  color: #000;
  /* Dark text on hover */
}

.login_btn a:hover::before {
  left: 0;
  /* Background slides in */
}

.login_btn a:hover .arrow_circle {
  background-color: #000;
  /* Dark circle background */
}

.login_btn a:hover .arrow_circle i {
  color: var(--neon-yellow);
  /* Yellow arrow icon */
}

/* ======================== */
.arrow_circle {
  background: var(--neon-yellow);
  color: #000;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav_group {
  display: flex;
  align-items: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: 8px;
  border-radius: 100px;
  backdrop-filter: blur(10px);
}

.nav_links li.active a {
  background: var(--neon-yellow);
  color: var(--dark-black);
  border-radius: 50px;
}

.hamburger {
  display: none;
  /* Hidden by default on desktop */
  cursor: pointer;
  width: 30px;
  height: 20px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 1100;
  /* Higher than the drawer */
  position: relative;
  /* Changed from absolute to stay in the navbar flow */
}

.hamburger .bar {
  background-color: var(--neon-yellow);
  /* Use your defined variable */
  width: 100%;
  height: 3px;
  border-radius: 5px;
  transition: 0.3s;
}

.close_btn {
  display: none;
  /* Hidden on desktop */
  color: var(--neon-yellow);
  font-size: 30px;
  cursor: pointer;
  align-self: flex-end;
  /* Pushes it to the right of the drawer */
  margin-bottom: 20px;
}

.navbar {
  display: flex;
  justify-content: space-between;
  /* Brand on left, right_side_items on right */
  align-items: center;
  padding: 20px 0;
}

/* Style for the new wrapper */
.right_side_items {
  display: flex;
  align-items: center;
  gap: 20px;
  /* Space between Login button and Hamburger */
}

/* Ensure hamburger is only visible when needed */
.hamburger {
  display: none;
}

/* ==================================== */
/* Home page Banner Section Starts here */
/* ==================================== */

.home_banner {
  /* Using your background settings but ensuring it covers the viewport height */
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("images/banner_img.png");
  background-size: cover;
  background-position: center top;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  /* Aligns content to bottom */
  padding-bottom: 80px;
  position: relative;
}

.home_banner_content_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  flex-wrap: wrap;
}

/* LEFT SIDE */
.home_banner_left {
  flex: 1;
  min-width: 300px;
}

.home_banner_sub {
  color: #ffffff;
  font-size: clamp(16px, 2vw, 20px);
  margin-bottom: 25px;
  max-width: 400px;
}

/* RIGHT SIDE (The Large Title) */
.home_banner_right {
  flex: 2;
  text-align: right;
}

.home_main_title {
  font-size: clamp(40px, 8vw, 130px);
  line-height: 0.9;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.home_main_title span {
  color: var(--neon-yellow);
}
.home_neon_text {
  display: inline-block;
  font-size: 50px;
  color: var(--neon-yellow);
}

/* AVATAR OVERLAP FIX */
.user_avatars {
  display: flex;
  margin-bottom: 10px;
}

.user_avatars img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #000;
  margin-right: -15px;
  object-fit: cover;
}

.home_membership_info p {
  font-family: "Clash Display";
  font-size: 20px;
  color: #fff;
}

.home_membership_info p span {
  color: var(--neon-yellow);
}

/* ======================== */
/* Home Page Workout Section Styles   */
/* ========================= */
.home_workouts {
  background-color: var(--dark-black);
  padding-bottom: 150px;
}

.home_card_border {
  border: 0.2px solid var(--neon-yellow);
  padding: 15px 5px;
  position: relative;
}

.home_workout_card {
  position: relative;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  height: 330px;
  /* Fixed card height */
  overflow: visible;
  /* Allows images to pop out the top */
  display: flex;
  margin-top: 50px;
  /* Space for the athlete's head */
}

.home_workout_content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  z-index: 2;
  /* Sits above the card but below the athlete */
}

/* Background Ghost Number */
.home_workout_number {
  position: absolute;
  top: 60%;
  left: 20px;
  transform: translateY(-50%);
  font-family: "Akira Expanded";
  font-size: 130px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
  line-height: 1;
  z-index: 1;
  user-select: none;
}

/* Title and Neon Lines */
.home_workout_text_top {
  position: relative;
  z-index: 3;
  width: 100%;
  display: block;
}

.home_workout_text_top h3 {
  color: #fff;
  font-family: "Akira Expanded";
  font-size: 23px;
  line-height: 1.2;
  max-width: 100%;
  /* Keeps text from getting fully covered by athlete */
  display: block;
  margin: 0;
}

/* Athlete Image Positioning */
.home_workout_img {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
  /* Floats in front of everything */
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

/* Exact Dimensions and Individual Overflows */
.home_img_01 img {
  width: 196px;
  height: 370px;
  /* Overflows top by 40px */
  object-fit: contain;
}

.home_img_02 img {
  width: 201px;
  height: 414px;
  /* Overflows top by 84px */
  object-fit: contain;
}

.home_img_03 img {
  width: 450px;
  height: 365px;
  /* Overflows top by 35px */
  object-fit: contain;
  margin-right: -10px;
  /* Slight offset to match image style */
}

/* Subtle Hover Effect */
.home_workout_card:hover .home_workout_img img {
  transform: translateY(-10px);
  transition: 0.4s ease;
  filter: drop-shadow(0 0 15px rgba(242, 255, 0, 0.2));
}

/* ======================== */
/* About Section Styles   */
/* ========================= */
.home_about {
  padding: 0px 100px 80px;
}

.home_about_1st p {
  color: #fff;
  font-size: clamp(18px, 2vw, 27px);
  font-family: "Akira Expanded";
}

.home_about .neon_lines {
  color: var(--neon-yellow);
  font-family: "Akira Expanded";
  font-size: 27px;
  display: inline-block;
  margin-bottom: 10px;
}

.home_about .ellipse i {
  display: inline-block;
  color: var(--neon-yellow);
  margin-right: 15px;
  font-weight: 500;
}

.home_about_2nd p {
  font-family: "Clash Display";
  font-size: clamp(28px, 5vw, 40px);
  color: #fff;
  font-weight: 400;
}

.home_about_3rd figure {
  max-width: 820px;
  display: block;
}

.home_about_4th_header {
  margin-bottom: 40px;
}

.home_about_4th_header p {
  font-family: "Clash Display";
  font-size: clamp(24px, 2vw, 30px);
  color: #fff;
  font-weight: bold;
}

.home_about_4th_description_1 p,
.home_about_4th_description_2 p {
  font-family: "Clash Display";
  color: #fff;
}

.home_about_3rd,
.home_about_4th {
  margin-top: 90px;
}

.home_about_contact {
  margin-top: 33px;
}

.home_about_phone {
  display: block;
  border: 2px;
  padding: 10px 20px;
  background: var(--neon-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 24px;
  flex-shrink: 0;
}

.home_about_phone i {
  font-size: 20px;
}

.home_about_contact {
  display: flex;
}

.home_about_contact p {
  font-size: 23px;
  color: #fff;
}

.home_about_contact a {
  color: var(--neon-yellow);
  font-size: 30px;
}

/* ========================== */
/*      Service Section       */
/* ========================== */
.home_service {
  padding: 80px 100px;
}

.home_service_content .ellipse {
  display: inline-block;
  color: var(--neon-yellow);
  margin-right: 15px;
  font-weight: 500;
}

.home_service_content .neon_lines {
  color: var(--neon-yellow);
  font-family: "Akira Expanded";
  font-size: 27px;
  display: inline-block;
  margin-bottom: 10px;
}

.home_service_content P {
  font-family: "Akira Expanded";
  color: #fff;
  letter-spacing: 0.5px;
}

.home_service_content_list {
  display: flex;
  flex-direction: column;
}

.home_service_item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: color 0.3s;
}

.home_service_item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.home_service_title {
  color: rgba(255, 255, 255, 0.5);
  /* Semi-transparent white by default */
  font-family: "Akira Expanded", sans-serif;
  font-size: 40px;
  font-weight: 900;
  text-transform: uppercase;
  transition:
    color 0.3s,
    transform 0.3s;
  position: relative;
  z-index: 10;
  /* Keep text above the hover image */
}

/* Hover effect for the title */
.home_service_item:hover .home_service_title {
  color: #fff;
  /* Fully white on hover */
}

.home_service_arrow {
  color: rgba(255, 255, 255, 0.5);
  /* Semi-transparent white by default */
  font-size: 30px;
  transition:
    color 0.3s,
    transform 0.3s ease-in-out;
  display: flex;
  align-items: center;
}

/* Hover effect for the arrow */
.home_service_item:hover .home_service_arrow {
  color: #fff;
  /* Fully white on hover */
  transform: rotate(-45deg);
  /* Rise by 45 degrees */
}

/* The Tilted Hover Image */
.home_service_hover_img_wrapper {
  position: absolute;
  top: 50%;
  left: 60%;
  /* Adjust horizontal position */
  transform: translateY(-50%) rotate(-10deg) scale(0);
  /* Hidden and tilted */
  opacity: 0;
  transition:
    opacity 0.4s ease-out,
    transform 0.4s ease-out;
  pointer-events: none;
  /* Don't interfere with hover/clicks */
  z-index: 5;
  /* Place behind the text */
}

.home_service_hover_img_wrapper figure {
  max-width: 320px;
  /* Adjust image width */
  min-height: 150px;
  width: 100%;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
  /* Optional shadow */
}

.home_service_hover_img_wrapper img {
  display: block;
}

/* Show image on service item hover */
.home_service_item:hover .home_service_hover_img_wrapper {
  opacity: 1;
  transform: translateY(-50%) rotate(-10deg) scale(1);
}

/* ========================= */
/*    Second About Section    */
/* ========================= */
.home_second_about {
  padding: 100px 0;
  background-color: var(--dark-black);
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    #7a8000 0%,
    #3d4000 30%,
    #3d4000 50%,
    #000000 60%,
    #000000 100%
  );
}

.home_about_img_wrapper {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home_about_img_wrapper figure {
  max-width: 840px;
  display: block;
}

.home_second_about .neon_lines {
  display: inline-block;
}

.home_athlete_img {
  width: 100%;
  max-width: 600px;
  /* Glowing effect from the image */
  /* filter: drop-shadow(0 0 30px rgba(242, 255, 0, 0.2)); */
}

.home_section_subtitle {
  color: #fff;
  font-family: "Akira Expanded";
  font-size: clamp(18px, 4vw, 27px);
  margin-bottom: 20px;
}

.home_section_subtitle .ellipse {
  color: var(--neon-yellow);
}

.grid_main_title {
  color: #fff;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  margin-bottom: 50px;
  font-weight: 200;
}

/* Feature Grid Layout */
.features_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.feature_box {
  border: 1px solid rgba(242, 255, 0, 0.3);
  padding: 30px 20px;
  transition: 0.3s ease;
}

.feature_box:hover {
  background: rgba(242, 255, 0, 0.05);
  border-color: var(--neon-yellow);
}

.check_icon {
  color: var(--neon-yellow);
  font-size: 20px;
  margin-bottom: 15px;
  display: block;
}

.feature_box h3 {
  color: #fff;
  font-family: "Akira Expanded";
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.feature_box p {
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.6;
}

/* ========================== */
/*       Coaches Section      */
/* ========================== */
.coach {
  padding-bottom: 100px;
}

.coach_subtitle .ellipse {
  color: var(--neon-yellow);
}

.coach_header .neon_lines {
  display: inline-block;
}

.coach_subtitle {
  color: #fff;
  font-family: "Akira Expanded";
  font-size: clamp(16px, 3vw, 27px) !important;
  margin-bottom: 20px;
}

.coach_description p {
  color: #fff;
  font-size: clamp(20px, 4vw, 40px);
  line-height: 1.2;
  margin-bottom: 50px;
  font-weight: 200;
}

/*Card swiper*/
.slide_1,
.slide_2,
.slide_3 {
  padding: 24px;
  border: 0.5px solid var(--neon-yellow);
}

.coach_card {
  background: url(images/coach_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 592px;
  min-height: 400px;
  padding: 0 24px 35px;
  position: relative;
}

.coach_role {
  font-family: "Akira Expanded";
  font-size: clamp(10px, 4vw, 16px);
  color: #fff;
}

.coach_name {
  font-family: "Clash Display Extra Light";
  font-size: clamp(30px, 2vw, 50px);
  font-weight: 100;
  color: #fff;
}

.coach_info {
  position: absolute;
  top: 62%;
  left: 20px;
  right: 0;
}

.coach_img_box {
  position: absolute;
  bottom: 10%;
  right: 0;
  left: 0;
}

.slide_1 .coach_img_box {
  max-width: 388px;
  min-width: 388px;
  min-height: 230px;
  margin: 0 auto;
}

.slide_2 .coach_img_box {
  max-width: 250px;
  margin: 0 auto;
}

.slide_3 .coach_img_box {
  max-width: 250px;
  margin: 0 auto;
}

.coach_card:hover .coach_img_box img {
  transform: translateY(-10px);
  transition: 0.4s ease;
  filter: drop-shadow(0 0 15px rgba(242, 255, 0, 0.5));
}

.coach .swiper-pagination {
  display: none;
}

/* ========================== */
/*        Plan Section        */
/* ========================== */
.plan {
  padding: 24px 0 24px;
}

.coach_description p {
  font-family: "Clash Display Extra Light";
  background: linear-gradient(to right, #ffffff 0%, #ffffff 40%, #333333 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.price_cart {
  border: 0.5px solid rgb(45, 41, 41);
  padding: 24px;
}

.price_content {
  background: url(images/plan_bg.png);
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 550px;
  padding: 24px;
}

.plan .price_content .neon_lines {
  font-size: 13px;
}

.price_content_heading {
  font-family: "Akira Expanded";
  font-size: 16px;
  color: #fff;
}

.price_content_description {
  font-family: "Clash Display Extra Light";
  color: #fff;
  font-size: 16px;
  margin-bottom: 40px;
}

.desc_2 {
  margin-bottom: 20px;
}

.desc_3 {
  margin-bottom: 20px;
}

.plan_price {
  font-family: "Akira Expanded";
  color: #fff;
  font-size: clamp(20px, 4vw, 50px);
  display: flex;
}

.plan_price span {
  font-family: "Clash Display";
  display: block;
  font-size: 20px;
}

.feature_list li {
  color: #fff;
  font-size: clamp(14px, 1vw + 10px, 16px);
  margin-bottom: 10px;
}

.feature_list span {
  display: inline-block;
  margin-right: 10px;
}

.price_features {
  margin-bottom: 100px;
}

.membership_btn {
  border: 0.2px solid var(--neon-yellow);
  border-left: 5px solid var(--neon-yellow);
  border-right: 5px solid var(--neon-yellow);
  padding: 15px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.membership_btn a {
  font-family: "Clash Display";
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
}

.membership_btn:hover {
  cursor: pointer;
  background: var(--neon-yellow);
  transition: 0.5s ease-in-out;
}

.membership_btn:hover a {
  color: #000000;
}

/* =========================== */
/*    Location section         */
/* =========================== */
.location {
  padding: 80px 0;
  background: url(images/location.bg.png);
}

.location_header {
  font-family: "Clash Display";
  font-size: clamp(18px, 4vw, 45px);
  color: #ffffff;
}

.location_header span {
  display: inline-block;
  color: var(--neon-yellow);
}

.col20 {
  max-width: 20%;
  width: 0 0 20%;
  padding: 0 15px;
}

.col80 {
  max-width: 80%;
  width: 0 0 80%;
  padding: 0 15px;
}

.location_count {
  font-family: "Clash Display Bold";
  font-size: clamp(20px, 10vw, 80px);
  font-weight: 900;
  color: #ffffff;
}

.location_count span {
  display: inline-block;
  color: var(--neon-yellow);
}

.location_country {
  color: #948b8b;
  font-size: 32px;
  margin-top: 0;
}

.location_description {
  font-family: "Clash Display";
  font-size: clamp(16px, 2vw, 18px);
  color: #ffffff;
  line-height: 1.55;
}

.location_map figure {
  max-width: 1400px;
}

/* =========================== */
/*      Transformation         */
/* =========================== */
.transformation {
  padding-bottom: 80px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.transform_sec {
  background: url(images/transform_bg.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.transform_continer {
  position: absolute;
  top: 50%;
  /* Adjust this percentage to hit the face level */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  /* Ensures text stays on top */
  width: 100%;
  pointer-events: none;
  /* Allows clicking through text if needed */
}

.transform_desc {
  font-family: "Akira Expanded";
  font-size: clamp(15px, 3vw, 40px);
  color: #ffffff;
  text-align: center;
}

.transform_desc_2 {
  font-family: "Akira Expanded";
  font-size: clamp(20px, 4vw, 77px);
  color: var(--neon-yellow);
  text-align: center;
}

.transformation .neon_lines {
  text-align: center;
  font-size: clamp(16px, 3vw, 28px);
}

.transform_desc_3 {
  font-family: "Clash Display";
  font-size: clamp(16px, 3vw, 30px);
  color: #ffffff;
  text-align: center;
  max-width: 870px;
  margin: 0 auto;
}

/* ============================= */
/*        Footer Section         */
/* ============================== */
.footer {
  padding: 80px 0;
}

.footer_header {
  font-family: "Clash Display";
  color: #ffffff;
  font-size: clamp(20px, 4vw, 42px);
  font-weight: 400;
  max-width: 360px;
  background: #453f3f46;
  margin-bottom: 50px;
}
.footer_header span a{
  color:#fff;
}
.footer_header span a:hover{
  color:var(--neon-yellow);
}
.upper_footer {
  padding-bottom: 30px;
  border-bottom: 0.5px solid rgb(86, 80, 80);
}

.social_links {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.social_handle a {
  color: #ffffff;
  font-size: clamp(16px, 1.2vw, 20px);
}

.right_arrow i {
  color: #ffffff;
}

.footer_right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20px;
}

.footer_logo figure a {
  max-width: 600px;
  display: block;
}

.footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* Allows wrapping on small screens */
  padding: 40px 20px;
}

/* 3. Links Style */
.nav-item {
  color: #ffffff;
  text-decoration: none;
  font-size: clamp(14px, 4vw, 18px) !important;
  font-weight: 500;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}
.nav-item:hover {
  color: var(--neon-yellow);
  transition: 0.5s ease-in-out;
}

/* 4. The Separators (|) */
.separator {
  color: #ffffff;
  margin: 0 15px;
  font-size: 20px;
  font-weight: 300;
  display: flex;
  align-items: center;
}

.social_links a:hover {
  color: var(--neon-yellow);
}

.social_links a:hover i {
  color: var(--neon-yellow);
}
.footer_lower {
  padding-top: 35px;
}
.subscribe_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.input_container {
  background-color: var(--container-bg);
  display: flex;
  align-items: center;
  padding: 12px 12px 12px 30px;
  border-radius: 100px;
  /* Perfect pill shape */
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}

/* Input Field */
input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-gray);
  font-size: clamp(15px, 3vw, 20px);
  flex-grow: 1;
  min-width: 100px;
}

input::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

/* Inner Button Pill */
.subscribe_btn {
  background-color: rgba(223, 255, 0, 0.1);
  /* Subtle lime tint */
  border: 2px solid var(--brand-lime);
  color: var(--brand-lime);
  padding: 8px 8px 8px 25px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  font-size: 1rem;
}
.subscribe_btn span {
  margin-right: 20px; /* Creates a fixed minimum distance */
}
.subscribe_btn:hover {
  background-color: var(--brand-lime);
  color: black;
}

/* The Yellow Arrow Circle */
.icon_circle {
  background-color: var(--brand-lime);
  color: black;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.stay_update {
  font-family: "Clash Display";
  font-size: clamp(30px, 5vw, 50px);
  color: #ffffff;
}
.update_desc {
  font-family: "Clash Display";
  font-size: clamp(15px, 3vw, 20px);
  color: #ffffff;
  max-width: 450px;
}
/* =========================================================== */
/* ========================== */
/* Media Query Starts Here  */
/* ========================== */
@media (max-width: 1300px) {
  .hamburger {
    display: flex;
    z-index: 1001;
    cursor: pointer;
  }

  /* The entire group becomes the drawer */
  .nav_group {
    position: fixed;
    top: 0;
    right: -100%;
    /* Start off-screen to the right */
    width: 300px;
    height: 100vh;
    background: var(--dark-black);
    flex-direction: column;
    justify-content: flex-start;
    padding: 100px 20px;
    transition: 0.4s ease-in-out;
    z-index: 1000;
    border-radius: 0;
    /* Remove the pill shape on mobile */
    border-left: 1px solid var(--neon-yellow);
    backdrop-filter: none;
    display: flex;
  }

  .nav_group.active {
    right: 0;
    z-index: 1200;
  }

  .nav_links {
    flex-direction: column;
    width: 100%;
    margin-bottom: 30px;
    margin-right: 0;
  }

  .nav_links li {
    width: 100%;
    text-align: center;
    margin: 10px 0;
  }

  .search_cart {
    flex-direction: column;
    width: 100%;
  }

  .search_box {
    max-width: 100%;
  }

  /* Hide login button on small screens or move it into the drawer */
  .login_btn {
    /* display: none;  */
  }

  .navbar {
    justify-content: space-between;
    /* Ensures Logo, Hamburger, and Login are spread out */
  }

  .hamburger {
    display: flex;
    /* Shows on mobile/tablet */
  }

  .close_btn {
    display: block;
    /* Show inside the side drawer */
  }

  /* Optional: If you want the hamburger to hide when the menu is open */
  .nav_group.active ~ .hamburger {
    display: none !;
  }

  .hamburger {
    display: flex;
    order: 2;
    /* Ensures hamburger is to the right of the login button if desired */
  }

  .login_btn {
    order: 1;
  }

  /* Optional: Adjust login button size for mobile so it doesn't take too much space */
  .login_btn a {
    padding: 8px 15px;
    font-size: 14px;
  }

  .service {
    padding: 60px 50px;
  }
}

@media (max-width: 1199px) {
  /* =========================== */
  /* Home page about section     */
  /* =========================== */
  .home_about .col50 {
    max-width: 100%;
    flex: 0 0 100%;
    margin-bottom: 30px;
  }

  .home_about_1st {
    text-align: center;
  }

  .home_about_2nd {
    text-align: center;
  }

  .home_about_3rd figure {
    margin: 0 auto;
  }

  .home_about_4th .home_about_4th_header {
    text-align: center;
  }

  .home_about_4th_description_1,
  .home_about_4th_description_2 {
    text-align: center;
  }

  .home_about_contact {
    justify-content: center;
  }
  /* =============================== */
  /* =====Home Page service ===== */
  /* ================================= */
  .home_service .row {
    flex-direction: column;
    gap: 30px;
  }

  .home_service .col20,
  .home_service .col80 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0;
  }

  .home_service_content {
    justify-content: center;
  }
  /* ======================== */
  /* Home page second about   */
  /* ======================== */
  .second_about .col50 {
    max-width: 100%;
    flex: 0 0 100%;
  }

  .home_about_img_wrapper {
    margin-bottom: 50px;
  }

  .home_about_header {
    text-align: center;
  }

  .grid_main_title {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1024px) {
  /* ============================== */
  /* === Home page plan section */
  /* ============================== */
  .plan .col33 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }
  /* ====================== */
  /* Footer Section */
  /* ====================== */
  .footer .col40 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }

  .footer .col60 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }

  .footer_header {
    text-align: center;
  }
  .footer_lower .col50 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }
  .subscribe_wrapper {
    padding-top: 20px;
  }
  .footer_update {
    text-align: center;
  }
}

@media (max-width: 992px) {
  /* =========================== */
  /* Home Page Banner */
  /* ========================== */
  .home_banner {
    height: auto;
    min-height: 100vh;
    padding-top: 150px;
    /* Space for fixed header */
  }

  .home_banner_content_wrapper {
    flex-direction: column-reverse;
    /* Title goes on top for mobile */
    align-items: flex-start;
  }

  .home_banner_right {
    text-align: left;
    margin-bottom: 40px;
    width: 100%;
  }

  .home_banner_left {
    width: 100%;
  }

  /* =================== */
  /* Home Page workout  */
  /* =================== */
  .home_workouts .col33 {
    max-width: 100%;
    flex: 0 0 100%;
    margin-bottom: 30px;
  }
  .home_service_title {
    font-size: 30px;
  }

  .home_service_arrow {
    font-size: 24px;
  }

  .home_service_hover_img_wrapper {
    left: 60%;
    /* Move image closer to center on smaller tablet */
  }

  .col50 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }

  .coach_header {
    text-align: center;
  }

  .coach_description {
    text-align: center;
  }

  .location_header {
    text-align: center;
  }

  .location .col20 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }

  .location .col80 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }

  .location_count_country {
    text-align: center;
  }

  .location_description {
    text-align: center;
  }
}

@media (max-width: 786px) {
  /* ============================= */
  /* Home page 1st About section */
  /* ============================= */
  .home_about_3rd figure {
    padding: 0 10px;
  }

  .home_about_phone {
    padding: 5px 15px;
  }

  .home_about_contact p {
    font-size: 18px;
  }

  .home_about_contact a {
    font-size: 20px;
  }
  /* =============================== */
  /* Home page service section */
  /* =============================== */
  .home_service {
    padding: 40px 20px;
  }

  .home_service_content {
    font-size: 20px;
  }

  .home_service_item {
    padding: 20px 0;
  }

  .home_service_title {
    font-size: 22px;
  }

  .home_service_arrow {
    font-size: 20px;
  }
  /* ================================ */
  /* Home page second about section */
  /* ================================ */
  .features_container {
    grid-template-columns: 1fr;
    /* Stack features on mobile */
  }

  .feature_box {
    padding: 20px;
  }
  /* =========================== */
  /* Home Page coach section */
  /* =========================== */
  .coach .col50 {
    max-width: 100%;
    flex: 0 0 100%;
  }

  .coach_header {
    text-align: center;
  }

  .coach_description {
    text-align: center;
  }

  .coach_img_box {
    height: 400px;
  }

  .coach_card {
    height: 280px;
  }
  /* ======================== */
  /* Footer Section */
  /* ======================== */
  .footer-nav {
    flex-direction: column;
    /* Stack vertically on mobile */
    gap: 15px;
  }

  .separator {
    display: none;
    /* Hide pipes on mobile for better legibility */
  }

  .nav-item {
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  .brand_logo a {
    max-width: 120px;
    display: block;
  }

  .login_btn a {
    color: var(--neon-yellow);
    border: 2px solid var(--neon-yellow);
    padding: 5px 5px 5px 5px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    font-size: 10px;
    gap: 15px;
    text-align: center;
  }

  .login_btn a span {
    display: none;
  }
  /* ======================= */
  /* Home Service  */
  /* ======================= */
  .home_service_title {
    font-size: 18px;
  }

  .home_service_item {
    padding: 15px 0;
  }
}

@media (max-width: 480px) {
  /* ========================= */
  /* Home page navbar  */
  /* ========================= */
  .login_btn {
    width: 100px;
  }
  /* ======================= */
  /* Home Service  */
  /* ======================= */
  .home_service_title {
    font-size: 16px;
  }

  /* Optional: On very small screens, hide the hover image to save space */
  .home_service_hover_img_wrapper {
    display: none;
  }
  /* ========================= */
  /* footer section  */
  /* ========================= */
  .input_container {
    padding: 8px 8px 8px 20px;
  }

  .subscribe_btn span {
    display: none;
    /* Hide text on very small screens to keep it a pill */
  }

  .subscribe_btn {
    padding: 4px;
    border: none;
    background: transparent;
  }
}
/* =============================================================== */
/* =============================================================== */
/*                    ABOUT US PAGE CSS STARTS HERE                */
/* =============================================================== */
/* =============================================================== */

/* ================================== */
/* About Us ----- BANNER section  */
/* =================================== */
.about_banner {
  /* Using your background settings but ensuring it covers the viewport height */
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("about_images/about_bg.png");
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  /* Aligns content to bottom */
  padding-bottom: 80px;
  position: relative;
}

.about_banner_content_wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  z-index: 20;
}

.about_banner_content {
  text-align: center;
}

.about_banner_header {
  font-family: "Akira Expanded";
  color: #ffffff;
  font-size: clamp(40px, 12vw, 140px);
  text-align: center !;
}

.about_banner_header span {
  color: var(--neon-yellow);
}

.banner_about {
  background: #787373;
  max-width: 240px;
  margin: 0 auto;
  text-align: center;
  margin: 0 auto;
}

.banner_about a {
  font-family: "Akira Expanded";
  color: #ffffff;
  font-size: clamp(14px, 2vw, 18px);
}

.banner_about span a {
  color: var(--neon-yellow);
}

.about_banner .neon_lines {
  text-align: center;
  min-height: 50px;
  margin: 0 auto;
}

@media (max-width: 992px) {
  .about_banner {
    height: auto;
    padding-top: 150px;
  }
}

@media (max-width: 575px) {
  .introduction .neon_lines {
    font-size: 20px;
  }
}

/* =================================================== */
/*          About Us -----  INTRODUCTION  section      */
/* =================================================== */
.introduction {
  padding: 120px 0 80px 0;
}

.intro_header {
  font-family: "Akira Expanded";
  font-size: clamp(15px, 2vw, 27px);
  color: #ffffff;
}

.intro_header i {
  color: var(--neon-yellow);
}

.intro_desc {
  font-family: "Clash Display";
  font-size: clamp(16px, 4vw, 40px);
  color: #ffffff;
}

.intro_desc_2 {
  font-family: "Clash Display";
  font-size: clamp(16px, 2.5vw, 30px);
  font-weight: 700;
  color: #ffffff;
  max-width: 830px;
  padding-bottom: 30px;
  border-bottom: 0.5px solid rgb(93, 85, 85);
}

.intro_person {
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro_person figure {
  max-width: 580px;
  display: block;
}

.intro_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 0;
  border-bottom: 0.5px solid rgb(93, 85, 85);
}

.intro_lists li {
  font-family: "Clash Display";
  font-size: clamp(18px, 2vw, 23px);
  color: #ffffff;
  margin-bottom: 25px;
}

.intro_lists li i {
  color: var(--neon-yellow);
  margin-right: 15px;
}

.intro_contact {
  margin-top: 33px;
}

.intro_phone {
  display: block;
  border: 2px;
  padding: 10px 20px;
  background: var(--neon-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 24px;
  flex-shrink: 0;
}

.intro_phone i {
  font-size: 20px;
}

.intro_contact {
  display: flex;
}

.intro_contact p {
  font-size: 23px;
  color: #fff;
}

.intro_contact a {
  color: var(--neon-yellow);
  font-size: 30px;
}

@media (max-width: 1024px) {
  .introduction .col50 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }

  .intro_header {
    text-align: center;
  }

  .intro_desc {
    text-align: center;
    margin-bottom: 20px;
  }
  .intro_desc_2 {
    text-align: center;
  }
}
@media (max-width: 576px) {
  .intro_list {
    flex-direction: column;
  }
  .introduction {
    padding: 0;
  }
}

/* ============================================================= */
/* About us + Workout page ---- Workout section Starts here     */
/* ============================================================= */
.workout {
  padding-bottom: 80px;
}

.workout_header {
  font-family: "Akira Expanded";
  font-size: clamp(15px, 2vw, 27px);
  color: #ffffff;
}

.workout_header i {
  color: var(--neon-yellow);
}

.workout_desc_head {
  font-family: "Clash Display";
  font-size: clamp(32px, 5vw + 12px, 48px);
  color: #ffffff;
}

.workout_desc_head span {
  color: var(--neon-yellow);
}

.col10 {
  max-width: 10%;
  width: 0 0 10%;
  padding: 0 15px;
}

.col90 {
  max-width: 90%;
  width: 0 0 90%;
  padding: 0 15px;
}

.workout_count {
  font-family: "Clash Display Bold";
  font-size: clamp(20px, 10vw, 80px);
  font-weight: 900;
  color: #ffffff;
}

.workout_count span {
  display: inline-block;
  color: var(--neon-yellow);
}

.workout_country {
  color: #948b8b;
  font-size: clamp(24px, 2vw + 16px, 32px);
  margin-top: 0;
}

.workout_description {
  font-family: "Clash Display";
  font-size: clamp(16px, 2vw, 18px);
  color: #ffffff;
  line-height: 1.55;
}

.workout .row .col80 {
  display: flex;
  align-items: center;
}

.workout .row {
  margin-bottom: 50px;
}

.scroll-container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  gap: 15px;
  padding: 10px;
  /* Hides scrollbar for a cleaner look while keeping functionality */
  scrollbar-width: none;
  /* Firefox */
}

.scroll-container::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.scroll-item {
  flex: 0 0 auto;
  /* Prevents items from shrinking */
  color: #fff;
  border: 1px solid #333;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: capitalize;
}

/* The highlighted "Transformation" style */
.scroll-item.active {
  background-color: #e2ff00;
  /* Neon yellow/green */
  color: #000;
  border-color: #e2ff00;
  font-weight: bold;
}

.scroll-item:hover:not(.active) {
  border-color: #666;
}

.scroll-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1600px;
  /* Adjust to your layout */
  margin: auto;
}

.nav-btn {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  padding: 15px;
  cursor: pointer;
  position: absolute;
  z-index: 10;
  height: 100%;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* Makes the JS scroll look fluid */
  gap: 10px;
  padding: 10px 40px;
  /* Extra padding so buttons don't cover text */
  scrollbar-width: none;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

/* athelets workouts */
.workout_persons {
  padding: 30px 0;
}

.athelets {
  margin-top: 100px;
}

.card {
  background-color: var(--dark-bg);
  border: 1px solid var(--gray-border);
  padding: 24px;
  position: relative;
}

.strength_badge {
  position: absolute;
  top: 30px;
  right: 30px;
  background-color: var(--neon-yellow);
  color: black;
  padding: 5px 15px;
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 14px;
}

.author_tag {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: white;
}

.author_name {
  font-family: "Akira Expanded";
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
}

/* Footer Section */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.content {
  display: flex;
  flex-direction: column;
}

.number_box .text_group {
  margin-top: 15px;
}

.number_box {
  background-color: var(--neon-yellow);
  color: black;
  width: 35px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
}

.text_group h2 {
  font-family: "Clash Display" !important;
  color: white;
  margin: 0;
  font-size: clamp(15px, 1.5vw, 25px);
  text-transform: capitalize;
}

.text_group p {
  font-family: "Clash Display";
  color: #888;
  margin: 5px 0 0 0;
  font-size: 16px;
}

/* Button */
.enroll_btn {
  background-color: var(--neon-yellow);
  color: black;
  text-decoration: none;
  padding: 20px 60px;
  font-weight: 900;
  font-size: 22px;
  display: flex;
  align-items: center;
  transition: transform 0.2s;
}

.enroll_btn:hover {
  transform: scale(1.05);
}

/* Update the container to allow the image to overflow */
.image_container {
  width: 100%;
  height: 400px;
  border: 1px solid var(--gray-border);
  position: relative;
  margin-bottom: 20px;
  /* Ensure overflow is visible so the head can pop out */
  overflow: visible;
  background-color: transparent;
}

/* Style the image to pop out */
.athlete_img {
  position: absolute;
  bottom: 0;
  /* Keep feet/waist at the bottom */
  left: 40%;
  transform: translateX(-50%);
  /* Center horizontally */
  height: 100%;
  /* Make it taller than the box */
  width: auto;
  object-fit: contain;
  pointer-events: none;
  /* Allows clicks to pass through to the badge if needed */
  z-index: 1;
}

/* Ensure badges stay on top of the image */
.strength_badge,
.author_tag {
  z-index: 2;
}

.workout_persons .col50:nth-child(4) .image_container figure {
  overflow: hidden;
}

.workout_persons .col50:nth-child(4) .image_container figure .athlete_img {
  position: absolute;
  bottom: 30px;
  /* Keep feet/waist at the bottom */
  left: 50%;
  transform: translateX(-50%);
  /* Center horizontally */
  height: 120%;
  /* Make it taller than the box */
  width: 600px;
  object-fit: contain;
  pointer-events: none;
  /* Allows clicks to pass through to the badge if needed */
  z-index: 1;
}

.workout_persons .col50:nth-child(7) .image_container .athlete_img {
  position: absolute;
  bottom: 30px;
  /* Keep feet/waist at the bottom */
  left: 50%;
  transform: translateX(-50%);
  /* Center horizontally */
  height: 110%;
  /* Make it taller than the box */
  width: 600px;
  object-fit: contain;
  pointer-events: none;
  /* Allows clicks to pass through to the badge if needed */
  z-index: 1;
}

.workout_persons .col50:nth-child(8) .image_container .athlete_img {
  position: absolute;
  bottom: 30px;
  /* Keep feet/waist at the bottom */
  left: 50%;
  transform: translateX(-50%);
  /* Center horizontally */
  height: 110%;
  /* Make it taller than the box */
  width: 600px;
  object-fit: contain;
  pointer-events: none;
  /* Allows clicks to pass through to the badge if needed */
  z-index: 1;
}

.workout_persons .row {
  display: block;
  /* Isotope handles its own positioning */
  width: 100%;
}

.scroll-item {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.workout_persons .row.grid {
  display: block;
  /* Isotope needs this to be block, not flex */
  position: relative;
  margin: 0 auto;
  width: 100%;
}

.athelets {
  margin-top: 50px;
  /* Reduced from 100px to keep layout tighter */
  width: 100%;
}

.intro_contact a {
  color: var(--neon-yellow);
  font-size: 30px;
}

.workout_persons .col50 {
  width: 50%;
  /* Explicit width for Isotope math */
  float: left;
  /* Required for Masonry layout mode */
  position: relative;
  padding: 15px;
  margin-bottom: 0px;
  /* Space between rows since flex-gap is gone */
}

.grid:after {
  content: "";
  display: block;
  clear: both;
}

.load_more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  border: 0.2px solid var(--neon-yellow);
  border-left: 5px solid var(--neon-yellow);
  border-right: 5px solid var(--neon-yellow);
}

.load_more a {
  font-family: "Clash Display";
  font-size: 16px;
  color: #ffffff;
  font-size: 800;
}

.load_more:hover {
  color: var(--bg-dark);
  background: var(--neon-yellow);
  transition: 0.5s ease-in-out;
}

.load_more:hover a {
  color: var(--bg-dark);
}

/*===========Media Query==========*/
@media (max-width: 1399px) {
  .workout_persons .col50 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 15px !important;
    width: 100% !important;
  }
}

@media (max-width: 992px) {
  .workout .row .col20 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }

  .workout .row .col80 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }
  .workout_header {
    text-align: center;
  }
  .workout_desc_head {
    text-align: center;
  }
  .workout_count_country {
    text-align: center;
  }
  .workout_description {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .card {
    padding: 40px;
  }
}

@media (max-width: 768px) {
  /* 1. Stack the footer content and button vertically */
  .footer {
    flex-direction: column;
    align-items: flex-start;
    /* Align everything to the left */
    gap: 25px;
  }

  /* 2. Make the button full-width on mobile */
  .enroll_btn {
    width: 100%;
    justify-content: center;
    padding: 15px 30px;
    font-size: 18px;
  }

  /* 3. Adjust the image container height so it doesn't take too much vertical space */
  .image_container {
    height: 300px;
  }

  /* 4. Adjust the athlete position for a smaller box */
  .athlete_img {
    left: 50%;
    /* Center the athlete on mobile */
    height: 110%;
    /* Slightly less "pop out" to avoid overlapping other text */
  }

  /* 5. Scale down the badge and author tag */
  .strength_badge {
    top: 15px;
    right: 15px;
    font-size: 12px;
  }

  .author_tag {
    bottom: 10px;
    right: 10px;
  }

  .author_name {
    font-size: 12px;
  }
}

/* ======================================== */
/*  About us ------ Enrollment   section    */
/* ======================================== */
.enrollment {
  background-image: url("about_images/form_bg.png");
  /* Placeholder */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--neon-yellow);
  color: black;
  position: relative;
  min-height: 520px;
}

.promo_card {
  background: linear-gradient(180deg, #4f571c 0%, #818d30 100%);
  padding: 36px;
  border: 1px solid #444;

  /* THE POP OUT MAGIC */
  position: relative;
  /* Required for z-index to work */
  z-index: 10;
  /* Ensures it stays above the yellow background */
  margin-top: -50px;
  /* Pulls it UP into the section above */
  margin-bottom: -50px;
  /* Pushes it DOWN into the section below */
  margin-left: 10px;
  /* Pulls it slightly to the LEFT */

  box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.5);
  /* Adds depth */
}

.header_accent {
  width: 100%;
  font-family: "Akira Expanded";
  font-size: clamp(20px, 1.5vw, 27px);
  color: var(--neon-yellow);
  margin-bottom: 40px;
}

.circle_icon {
  display: inline-block;
}

.enrollment .neon_lines {
  display: inline-block;
}

.enrol_header {
  font-family: "Akira Expanded";
  font-size: clamp(14px, 1vw, 16px);
  color: #ffffff;
  margin-bottom: 30px;
}

.enrol_desc {
  font-family: "Clash Display";
  font-size: clamp(14px, 1vw, 18px);
  color: #ffffff;
  margin-bottom: 30px;
}

.benefits {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--text-gray);
  margin-bottom: 45px;
}

.benefits li {
  font-family: "Clash Display";
  font-size: clamp(14px, 1vw, 18px);
}

.benefits li i {
  color: var(--neon-yellow);
}

.benefits li:first-child {
  margin-right: 40px;
}

.benefits li i {
  margin-right: 10px;
}

.price_tag {
  text-align: center;
  margin: 30px 0;
}

.price_tag .currency {
  font-family: "Clash Display";
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
}

.price_tag .amount {
  font-family: "Clash Display";
  font-size: clamp(50px, 6.3vw, 108px);
  line-height: 1;
  color: #ffffff;
  font-weight: 800;
}

.price_sub {
  font-family: "Clash Display";
  border-bottom: 1px solid var(--neon-yellow);
  padding-bottom: 5px;
  letter-spacing: 4px;
  color: var(--neon-yellow);
}

.btn {
  text-align: center;
  margin: 0 auto;
  width: 100%;
  background: var(--neon-yellow);
  padding: 20px 0;
  cursor: pointer;
  border-right: 5px solid var(--bg-dark);
  border-left: 5px solid var(--bg-dark);
}

.btn_enroll {
  font-family: "Clash Display Bold";
  font-size: 600;
  color: var(--dark-bg);
  width: 100%;
}

.terms {
  font-size: 14px;
  margin-top: 20px;
  color: #3e3939;
}

/* Form Styling */
.form_section {
  padding: 50px 40px;
  max-width: 940px;
}

.form-row {
  display: flex;
  gap: 20px;
}

.input-group {
  flex: 1;
  margin-bottom: 25px;
}

.input-group label {
  font-family: "Akira Expanded";
  display: block;
  font-size: clamp(14px, 0.5vw + 12px, 16px);
  margin-bottom: 8px;
  font-weight: bold;
}

.form_section input,
.form_section textarea {
  width: 100%;
  padding: 15px;
  border: none;
  outline: none;
  background: white;
}

.btn-primary,
.btn-submit {
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.3s;
}

.btn-primary {
  width: 100%;
  background: var(--neon-yellow);
  border: none;
  padding: 15px;
}

.btn-submit {
  background: var(--neon-yellow);
  border: 2px solid black;
  padding: 12px 30px;
  box-shadow: 4px 4px 0px black;
}

.btn-submit:active {
  box-shadow: 0px 0px 0px black;
  transform: translate(2px, 2px);
}

/* RESPONSIVE DESIGN */
@media (max-width: 991px) {
  .container {
    flex-direction: column;
  }

  .promo-card,
  .form-container {
    width: 100%;
  }

  .form-row {
    flex-direction: column;
  }

  .promo_card {
    margin: 0 auto;
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .enrollment .col40 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }

  .enrollment .col60 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }

  .enrollment {
    padding: 80px 15px;
  }
  .form_section {
    padding-top: 30px;
  }
}

/*=========================================*/
/*  About Us ---- Working Out Section     */
/*=========================================*/
.working {
  padding: 200px 0 80px;
}

.working_header {
  font-family: "Akira Expanded";
  font-size: clamp(16px, 1.5vw, 27px);
  color: var(--neon-yellow);
}

.working_header .neon_lines {
  display: inline;
}

.working_description {
  font-family: "Clash Display";
  color: #ffffff;
  font-size: clamp(24px, 2.7vw, 48px);
}

.working_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 0 20px 0;
}

.target i {
  color: var(--neon-yellow);
  font-size: clamp(20px, 1.56vw, 27px);
}

.working_content_head {
  font-family: "Clash Display Semi Bold";
  font-size: clamp(21px, 1.04vw, 25px);
  color: #ffffff;
}

.working_content_description {
  font-family: "Clash Display";
  font-size: clamp(14px, 1.45vw, 18px);
  color: #ffffff;
  text-align: center;
}

@media (max-width: 1024px) {
  .working_header {
    text-align: center;
  }

  .working_description {
    text-align: center;
  }

  .working .col50 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }

  .working .col33 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }
}
@media (max-width: 1024px) {
  .working {
    padding: 0;
  }
}

@media (max-width: 480px) {
  .working_container {
    padding: 15px 0px;
  }
  .working {
    padding: 0;
  }
}

/* ========================================= */
/*  About us ------------ Discover Section   */
/* ========================================= */
.discover {
  background: url(about_images/discover_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  display: flex;
}

.discover .container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.discover_container {
  max-width: 1300px;
  background: #ffffff;
  opacity: 0.6;
  padding: 40px 60px;
}

.discover_header {
  font-family: "Clash Display Bold";
  color: #9f9898;

  font-size: clamp(20px, 2.6vw, 45px);

  margin-bottom: 40px;
}

.discover_desc {
  font-family: "Clash Display";
  font-size: clamp(18px, 2.03vw, 35px);

  color: #3c3838;
  margin-bottom: 40px;
}

.discover_btn {
  font-family: "Clash Display Medium";
  font-size: clamp(20px, 2.03vw, 37px);

  color: var(--bg-dark);
  padding: 23px 35px;
  background: var(--neon-yellow);
}

.discover_btn:hover {
  background: var(--bg-dark);
  color: var(--neon-yellow);
  transition: 0.5s ease-in-out;
}

@media (max-width: 1024px) {
  .discover_header {
    margin-bottom: 20px;
  }

  .discover_desc {
    margin-bottom: 30px;
  }

  .discover_btn {
    padding: 16px 20px;
  }
}

/* ================================= */
/*  About Us -----  BMI Calculator   */
/* =============================== */
.bmi_header {
  color: #ffffff;
}
.bmi_header span i {
  color: var(--neon-yellow);
}
.bmi_calculator {
  padding: 80px 0;
  background: url(about_images/bmi_bg.png);
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}

.bmi_header {
  font-family: "Akira Expanded";
  font-size: clamp(16px, 1.5vw, 27px);
  margin-bottom: 20px;
}

.form_container {
  display: flex;
  flex-wrap: wrap;
  /* Negative margin on container offsets the padding on items 
               to keep the edges aligned with the rest of your site */
  margin: 0 -15px;
}
.bmi_input_field {
  /* 50% width for desktop */
  flex: 0 0 50%;
  max-width: 50%;
  box-sizing: border-box;
  /* Padding creates the "gap" without using the gap property */
  padding: 15px;
}
.input_field .neon_lines {
  margin-bottom: 0;
}
.bmi_calculator label {
  font-family: "Akira Expanded";
  font-size: clamp(14px, 0.5vw + 12px, 16px);
  display: block;
  color: #ffffff;
  margin-bottom: 10px;
}
.bmi_calculator input,
.bmi_calculator select {
  width: 100%;
  height: 55px;
  border: none;
  padding: 5px 15px;
  font-size: 1rem;
  font-weight: bold;
  background-color: #ffffff;
  box-sizing: border-box;
  outline: none;
}
.calculate_btn {
  font-family: "Clash Display Semi Bold";
  font-size: 16px;
  display: inline-block;
  padding: 20px 50px;
  background: var(--neon-yellow);
}
.calculate_btn:hover {
  background: #ffffff;
  color: #000;
  transition: 0.5s ease-in-out;
}
.bmi_right figure {
  max-width: 770px;
  display: block;
}
.bmi_header_lower {
  font-family: "Clash Display";
  color: #ffffff;
  font-size: clamp(30px, 2.8vw, 48px);
  margin-bottom: 30px;
}
.bmi_header_lower span {
  display: inline-block;
  color: var(--neon-yellow) !important;
}
.bmi_desc {
  font-family: "Clash Display";
  font-size: 18px;
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 30px;
}
@media (max-width: 991px) {
  .bmi_calculator .col50 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }
  .bmi_right figure {
    margin: 0 auto;
  }
  .calculate_btn {
    padding: 10px 20px;
  }
}

/* =============================== */
/*  About Us -------- Sponsorship  */
/* =============================== */
.sponsorship {
  padding-bottom: 80px;
}
.sponsor_header {
  color: #ffffff;
}
.sponsor_header span i {
  color: var(--neon-yellow);
}
.sponsor_header {
  font-family: "Akira Expanded";
  font-size: clamp(16px, 1.5vw, 27px);
}
.logo-slider {
  overflow: hidden;
  padding: 40px 0;
  background: #000; /* Matching your image background */
  white-space: nowrap;
  position: relative;
}

/* Optional: Adds a fade effect on the left and right edges */
.logo-slider::before,
.logo-slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: 150px;
  height: 100%;
  z-index: 2;
}
.logo-slider::before {
  left: 0;
  background: linear-gradient(to right, black, transparent);
}
.logo-slider::after {
  right: 0;
  background: linear-gradient(to left, black, transparent);
}

.logo-track {
  display: flex;
  width: calc(250px * 12); /* Width of 1 slide * total number of slides */
  animation: scroll 30s linear infinite;
}

.slide {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide img {
  height: 40px; /* Adjust based on your preference */
  width: auto;
  filter: grayscale(100%) brightness(0.8); /* Uniform look */
  transition: 0.3s;
}

.slide img:hover {
  filter: grayscale(0%) brightness(1);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 6));
  } /* Move by half the total track length */
}

/* =============================================================== */
/* =============================================================== */
/*                    WORKOUT PAGE CSS STARTS HERE                */
/* =============================================================== */
/* =============================================================== */

/* ==================================== */
/* Wotkout --- Banner Section Starts here */
/* ==================================== */

.workout_banner {
  /* Using your background settings but ensuring it covers the viewport height */
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("workout_images/workout_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  /* Aligns content to bottom */
  padding-bottom: 80px;
  position: relative;
}

.workout_banner_content_wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  z-index: 20;
}

.workout_banner_content {
  text-align: center;
}

.workout_banner_header {
  font-family: "Akira Expanded";
  color: #ffffff;
  font-size: clamp(40px, 12vw, 140px);
  text-align: center !;
}

.workout_banner_header span {
  color: var(--neon-yellow);
}

.workout_banner_about {
  background: #787373;
  max-width: 240px;
  margin: 0 auto;
  text-align: center;
  margin: 0 auto;
}

.workout_banner_about a {
  font-family: "Akira Expanded";
  color: #ffffff;
  font-size: clamp(14px, 2vw, 18px);
}

.workout_banner_about span a {
  color: var(--neon-yellow);
}

.workout_banner .neon_lines {
  text-align: center;
  min-height: 50px;
  margin: 0 auto;
}

@media (max-width: 992px) {
  .workout_banner {
    height: auto;
    padding-top: 150px;
  }
}

@media (max-width: 575px) {
  .introduction .neon_lines {
    font-size: 20px;
  }
}
/* ============================================= */
/* Workout page ---  Review Section Starts here  */
/* ============================================= */
.review {
  padding: 50px 0;
}
.review_container {
  border-left: 2px solid rgb(66, 63, 63);
  padding-left: 25px;
}
.review_counter {
  font-family: "Akira Expanded";
  font-size: clamp(14px, 1.9vw, 16px);
  color: #ffffff;
}
.review_name {
  font-family: "Clash Display Medium";
  font-size: clamp(20px, 1.9vw, 33px);
  color: #ffffff;
}
@media (max-width: 991px) {
  .review .col25 {
    max-width: 50%;
    flex: 0 0 50%;
    padding: 0 15px;
  }
  .review_container {
    text-align: center;
  }
}
@media (max-width: 576px) {
  .review .col25 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }
  .review_container {
    text-align: center;
  }
}

/*==============================================*/
/* Workout page ----- workout sections */
/*==============================================*/

.workout_header {
  font-family: "Akira Expanded";
  font-size: 27px;
  color: #ffffff;
  margin-bottom: 80px;
}
.workout_header span i {
  color: var(--neon-yellow);
}
.drp_btn {
  font-family: "Akira Expanded";
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
}
.workout_container {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid #333;
  padding: 20px;
  width: 100%;
  margin-bottom: 20px;
}
.dropdown_content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: white;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 50;
  border: 1px solid #ddd;
}
.workout_container:hover .dropdown_content {
  display: block;
}
.dropdown_content li {
  border-bottom: 1px solid #eee;
}

.dropdown_content li a {
  display: block;
  padding: 12px 15px;
  color: #000;
  text-decoration: none;
  font-family: sans-serif;
}

.dropdown_content li a:hover {
  background-color: #f9f9f9;
}
@media (max-width: 992px) {
  .workout .col25 {
    max-width: 50%;
    flex: 0 0 50%;
    padding: 0 15px;
  }
}
@media (max-width: 786px)
{
  .workout .col25{
    max-width: 100%;
    flex:0 0 100%;
    padding:0 15px;
  }
}
/* ============================= */
/* Common Questions */
/* ============================= */
.common_ques {
  padding: 80px 0;
}
.common_ques_header {
  font-family: "Akira Expanded";
  font-size: clamp(18px, 1.5vw, 27px);
  color: #ffffff;
  margin-bottom: 50px;
}
.common_ques_header span {
  color: var(--neon-yellow);
}
.common_header {
  font-family: "Clash Display";
  font-size: clamp(28px, 4vw, 50px);
  color: #ffffff;
  margin-bottom: 50px;
}
.question_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.question_content {
  background: grey;
  padding: 35px 20px;
  border-radius: 10px;
  margin-bottom: 40px;
  text-align: center;
}
@media (max-width: 576px) {
  .common_ques_header {
    text-align: center;
  }
  .common_header {
    text-align: center;
  }
  .common_ques .col50 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }
}

/* =============================================================== */
/* =============================================================== */
/*                    CREAT ACCOUNT PAGE CSS STARTS HERE                */
/* =============================================================== */
/* =============================================================== */

/* =============================== */
/*         Login Form              */
/* =============================== */
.login_form {
  background: linear-gradient(180deg, #808000 0%, #404000 40%, #000000 100%);

  color: #fff;
  display: flex;
}

.login_form .form_header {
  font-family: "Akira Expanded";
  color: #ffffff;
}

.login_form .form_content_section {
  padding: 50px 0;
}

.login_form .login_form_container {
  padding: 20px;
  /* 1. Semi-transparent background (Glass effect needs transparency) */
  background: rgba(255, 255, 255, 0.05);

  /* 2. The blur effect on the background behind the element */
  backdrop-filter: blur(15px);

  /* 3. Aesthetic border and rounding */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;

  /* 4. Subtle inner shadow for depth */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.login_form .form_header {
  font-family: "Akira Expanded";
  color: #ffffff;
  font-size: 27px;
  margin-bottom: 20px;
}

.login_form .form_desc {
  font-family: "Clash Display";
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 50px;
}
 .login_form .form-section{
  width: 100%;
}

/* Input Styling */
.login_form .input_field {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.login_form label.error {
  color: #ff4d4d;
  /* Bright red for visibility on dark bg */
  font-size: 14px;
  font-family: "Clash Display";
  margin-top: 5px;
  font-weight: 500;
  display: block;
  /* Ensures it starts on a new line below the wrapper */
  order: 2;
  /* Forces it below the input_wrapper */
}

.login_form input.error {
  border: none;
  /* Keep transparent inside the wrapper */
}

.login_form .input_wrapper:has(input.error) {
  border: 1px solid #ff4d4d;
  /* Highlight the wrapper instead */
}

.login_form .input_wrapper {
  background: var(--input-bg);
  border: var(--border-style);
  display: flex;
  align-items: center;
  padding: 15px;
}

.login_form .input_wrapper .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--bg-dark);
  font-size: 24px;
  margin-right: 10px;
  flex-shrink: 0;
  border: 1px solid var(--neon-yellow);
  padding: 2px;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  flex-shrink: 0;
  background: var(--neon-yellow);
}

.login_form .input_wrapper input {
  background: transparent;
  border: none;
  color: #fff;
  outline: none;
  font-size: 13px;
}

.login_form .input-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.login_form .term_policy {
  font-family: "Clash Display";
  color: #585050;
  font-size: 17px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.login_form .term_policy i {
  color: var(--neon-yellow);
}

.login_form .term_policy span {
  color: #ffffff;
}

.login_form .submit_btn {
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* Dimensions & Shape */
  width: 100%;
  padding: 10px 15px;
  border-radius: 100px;
  /* Creates the pill shape */

  /* Colors & Border */
  background-color: #e2f901;
  /* Electric Lime */
  border: none;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.login_form .btn_text {
  color: #000;
  font-size: 1.5rem;
  font-weight: 500;
  margin-left: 20px;
  font-family: sans-serif;
}

.login_form .arrow-wrapper {
  background-color: #000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e2f901;
  /* Arrow matches the button background */
}

/* Hover Effects */
.login_form .submit_btn:hover {
  background-color: #d4e800;
  transform: scale(1.02);
}

.login_form .submit_btn:active {
  transform: scale(0.98);
}

/*============right form part==========*/
.form_container_right {
  background: url(workout_images/form_right_bg.png);
  min-height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50px;
  padding: 50px;
  display: flex;
}

.right_container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.brand_logo {
  display: flex;
  justify-content: flex-end;
}

.right_container_desc {
  font-family: "Clash Display Medium";
  font-size: clamp(14px, 2vw, 18px);
}

.name_venture {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}

.right_container_desc .name {
  font-family: "Clash Display Semi Bold";
  font-size: clamp(16px, 1.25vw, 24px);
}

/* Responsive Mobile Rules */
@media (max-width: 1260px) {
  .input_field .col50,
  .input_field .col25,
  .input_field .col40,
  .input_field .col60 {
    margin-bottom: 20px;
    /* Adjust this value for more or less gap */
  }

   .input_field  .col25 {
    max-width: 50%;
    flex: 0 0 50%;
    padding: 0 15px;
  }

  .input_field .col40 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }

  .input_field .col60 {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
  }

  .input-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.7);
  }
}

@media (max-width: 768px) {
  .form-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 15px;
  }

  .form-row {
    margin-bottom: 0;
    /* Let the columns handle the bottom spacing on mobile */
  }
}