* {
  box-sizing: border-box;
}

:root {
  --main-color: #28a228;
  --main-color-female: #ff288c;
  --secondary-color: #fff;
  --font-color: #5a5a5a;
  --main-height: 100vh;
  --main-padding-top: 100px;
  --main-padding-bottom: 100px;
  --title-font: "Montserrat", sans-serif;
  --female-font: "Niconne", cursive;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--secondary-color);
  position: relative;
}

.rtl-section {
  direction: rtl;
  text-align: right;
}

/* Start Main Section Style  */

.main-section,
.female-main-section,
.job-summary-main-section,
.login-section {
  background-image: url("../imgs/young-athletic-man-running-treadmill-gym\ 1.png");
  background-size: cover;
  background-position: center;
  height: var(--main-height);
  position: relative;
  color: var(--secondary-color);
}

.female-main-section {
  background-image: url("../imgs/Group.png");
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.navbar-custom {
  background: rgba(0, 0, 0, 0);
  z-index: 99999999;
}

.navbar-light {
  background: transparent;
  background-color: #f3f3f3;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  z-index: 99999999;
}

.nav-link {
  position: relative;
  color: var(--secondary-color) !important;
  font-weight: 500;
  padding-bottom: 5px;
  transition: color 0.3s ease;
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  z-index: 10000000;
}

.nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: var(--secondary-color);
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: var(--secondary-color) !important;
}

.navbar-light .nav-link::before {
  content: "";
  background-color: var(--font-color);
  transition: width 0.3s ease;
}

.navbar-light .nav-link:hover {
  color: #545454 !important;
}

.navbar-light .nav-link {
  color: var(--font-color) !important;
}

.nav-link:hover::before {
  width: 100%;
}

.subscribe-btn,
.female-subscribe-btn {
  background: linear-gradient(178deg, #28a228, #28a228);
  color: var(--secondary-color);
  transition: background 0.4s ease, color 0.4s ease;
  border: none;
  padding: 0.5rem 1.2rem;
  border-radius: 5px;
  z-index: 10000000;
}

.subscribe-btn:hover {
  background: linear-gradient(178deg, #269626, #195a19);
  color: var(--secondary-color);
}

.main-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.overlay-content {
  z-index: 2;
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
  padding: 20px;
  color: var(--secondary-color);
}

.title .line1 {
  font-family: var(--title-font);
  font-size: 3rem;
  font-weight: bold;
  color: var(--secondary-color);
}

.title .line2 {
  font-family: var(--title-font);
  font-size: 3rem;
  font-weight: bold;
  color: var(--main-color);
}

.description {
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem;
  color: #eee;
}

.btn-main {
  background: linear-gradient(135deg, #28a228, #28a228);
  color: var(--secondary-color);
  border: none;
}

.btn-main:hover {
  background: linear-gradient(178deg, #269626, #195a19);
}

.btn-gradient-outline {
  background: linear-gradient(135deg, #8e8e8e, #5a5a5a);
  color: var(--secondary-color);
  border: none;
  transition: background 0.4s ease, color 0.4s ease;
}

.btn-gradient-outline:hover {
  background: linear-gradient(135deg, #28a228, #28a228) !important;
  color: var(--secondary-color) !important;
}

.navbar-brand {
  z-index: 10000000;
}

/* End Main Section Style  */

/* Start About Section Style  */
.about {
  padding-top: var(--main-padding-top);
  padding-bottom: var(--main-padding-bottom);
}

.about-title,
.service-title,
.discover-title,
.partners-title,
.journey-title,
.training-title,
.champion-title,
.jobs-title {
  font-family: var(--title-font);
  font-size: 3rem;
  color: var(--font-color);
  position: relative;
}

.about-title::after,
.service-title::after,
.discover-title::after,
.journey-title::after,
.training-title::after,
.champion-title::after,
.jobs-title::after {
  content: "";
  width: 5px;
  position: absolute;
  left: -20px;
  top: 0;
  height: 100%;
  background-color: var(--main-color);
  transition: height 0.5s ease;
}

.rtl-section .about-title::after,
.rtl-section .service-title::after,
.rtl-section .discover-title::after,
.rtl-section .journey-title::after,
.rtl-section .training-title::after,
.rtl-section .champion-title::after,
.rtl-section .jobs-title::after {
  left: auto;
  right: -10px;
}

.about-title:hover::after,
.service-title:hover::after,
.discover-title:hover::after,
.journey-title:hover::after,
.training-title:hover::after,
.champion-title:hover::after,
.jobs-title:hover::after {
  height: 0;
}

.about p,
.discover p {
  font-family: var(--title-font);
  font-size: 24px;
  color: var(--font-color);
  font-weight: 500;
}

/* End About Section Style  */

/* Start Our Section Style  */
.our-services,
.discover,
.our-partners,
.training,
.jobs {
  padding-bottom: var(--main-padding-bottom);
}

.our-services .card {
  border: none;
  transition: all 0.5s ease;
}

.our-services .card:hover {
  background: linear-gradient(179deg, #28a028 20%, #175117 80%);
  color: var(--secondary-color);
  transition: background 0.3s ease;
}

.our-services .card-title {
  font-family: var(--title-font);
  font-size: 24px;
  color: var(--font-color);
  font-weight: bold;
}

.our-services .card-text {
  font-family: var(--title-font);
  font-size: 20px;
  color: var(--font-color);
}

.our-services .card:hover .card-title,
.our-services .card:hover .card-text {
  color: var(--secondary-color);
}

.our-services .custom-card {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.our-services .custom-img {
  max-width: 100px;
  height: auto;
  background-color: var(--secondary-color);
  padding: 10px;
  border-radius: 50%;
  transition: transform 0.3s ease;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .our-services .custom-card {
    min-height: auto;
  }
}

/* End Our Service Section Style  */

/* Start Discover Section Style  */
.full-width-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* End Discover Section Style  */

/* Start Our Partners Section Style  */
.our-partners,
.our-packages,
.client-says {
  text-align: center;
}

.partners-title,
.packages-title,
.client-title {
  font-family: var(--title-font);
  font-size: 3rem;
  color: var(--font-color);
  text-align: center;
  display: inline-block;
  position: relative;
}

.partners-title::after,
.packages-title::after,
.client-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 5px;
  background-color: var(--main-color);
  transition: width 0.5s ease;
}

.partners-title:hover:after,
.packages-title:hover:after,
.client-title:hover:after {
  width: 0;
}

.our-partners p,
.our-packages p,
.client-says p {
  font-family: var(--title-font);
  font-size: 20px;
  color: var(--font-color);
}

/* End Our Partners Section Style  */

/* Start The Journey Section Style  */
.journey {
  padding-bottom: var(--main-padding-bottom);
}

.journey .custom-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 300px;
}

.journey .card-number {
  color: var(--main-color);
  font-size: 2rem;
  font-weight: bold;
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  padding: 0 10px;
  min-width: 45px;
}

.journey .custom-card:hover .card-number {
  background-color: var(--main-color);
  color: var(--secondary-color);
  text-align: center;
}

.journey .custom-card h5 {
  font-family: var(--title-font);
  color: var(--main-color);
  font-size: 20px;
  font-weight: bold;
}

.journey .custom-card p {
  font-family: var(--title-font);
  color: var(--font-color);
  font-size: 16px;
}

/* End The Journey Section Style  */

/* Start Training Programs Section Style  */
.training p,
.frequently p {
  font-family: var(--title-font);
  color: var(--font-color);
  font-size: 20px;
}

.training-overlay {
  background: rgba(0, 0, 0, 0.3);
}

.training-image-wrapper {
  /* height: 675px; */
  overflow: hidden;
}

.training-img {
  /* height: 100%; */
  object-fit: cover;
}

.training-overlay h2 {
  font-size: 2rem;
  color: #000;
}

.training .custom-carousel-btn {
  color: var(--main-color);
  border-radius: 50%;
  z-index: 10;
  font-size: 1.2rem;
  padding: 0 15px;
  opacity: 1;
  transition: background-color 0.3s ease;
}

.training .custom-carousel-btn:hover {
  color: darkgreen;
}

.training .carousel-inner {
  background: rgba(255, 255, 255, 0.2);
}

/* .carousel-item {
  height: 50em;
} */

.training .carousel-item h2 {
  font-family: var(--title-font);
  font-weight: bold;
  font-size: 24px;
  color: var(--secondary-color);
}

.training .carousel-item p {
  font-family: var(--title-font);
  /* font-weight: bold; */
  font-size: 20px;
  color: var(--secondary-color);
}

@media (max-width: 768px) {
  .training-image-wrapper {
    /* height: 400px; */
  }

  .training-overlay h2 {
    font-size: 1.4rem;
  }
}

/* End Training Programs Section Style  */
/* Start Our Packages Section Style  */
.our-packages {
  padding-bottom: var(--main-padding-bottom);
}

.our-packages .toggle-btn {
  background-color: var(--secondary-color);
  color: var(--font-color);
  padding: 4px 24px;
  min-width: 120px;
  transition: all 0.3s ease;
  font-size: 20px;
}

.our-packages .toggle-btn.active {
  background-color: var(--main-color);
  color: var(--secondary-color);
}

.our-packages .custom-card {
  border-radius: 5px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.our-packages .custom-card:hover {
  border: 1px solid var(--main-color);
}

.image-wrapper {
  position: relative;
}

.price {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  background-color: var(--main-color);
  color: var(--secondary-color);
  font-family: var(--title-font);
  font-weight: bold;
  font-size: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.our-packages .custom-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.our-packages .custom-card-body {
  padding: 1rem 3rem;
  flex-grow: 1;
}

.our-packages .custom-card-title {
  font-family: var(--title-font);
  color: var(--font-color);
  font-weight: bold;
  margin-bottom: 0.75rem;
  font-size: 24px;
}

.our-packages .custom-card-list {
  padding: 1rem;
  margin-bottom: 1rem;
  text-align: left;
}

.our-packages .custom-card-list li {
  font-family: var(--title-font);
  font-size: 20px;
  color: var(--font-color);
  font-weight: 400;
}

.our-packages .btn-join {
  border: 1px solid var(--main-color);
  color: var(--main-color);
  font-weight: var(--title-font);
  font-size: 20px;
  background-color: transparent;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.our-packages .btn-join:hover {
  background-color: var(--main-color);
  color: var(--secondary-color);
}

/* End Our Packages Section Style  */

/* Start Our Champions Section Style  */
.our-champion {
  background-image: url("../imgs/image\ 11.png");
  background-size: cover;
  background-position: center;
  position: relative;
  padding-top: var(--main-padding-top);
  padding-bottom: var(--main-padding-bottom);
}

.champion-title {
  color: var(--secondary-color);
}

.our-champion .lead {
  font-family: var(--title-font);
  font-size: 1.5rem;
  color: var(--secondary-color);
}

@media (max-width: 991.98px) {
  .our-champion .lead {
    font-size: 1.25rem;
  }

  .navbar-collapse img {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .our-champion .lead {
    font-size: 1.1rem;
  }
}

@media (max-width: 575.98px) {
  .our-champion .lead {
    font-size: 1rem;
  }
}

.our-champion h5 {
  font-family: var(--title-font);
  font-size: 2rem;
  font-weight: bold;
  color: var(--secondary-color);
}

.our-champion .carousel-inner {
  min-height: 80vh;
}

.our-champion .carousel-indicators button {
  border-radius: 12px;
  width: 5%;
  height: 6px;
  background-color: var(--secondary-color);
  border: none;
  transition: background-color 0.3s ease;
}

.carousel-indicators button.active {
  background-color: var(--main-color) !important;
}

.our-champion .modal .modal-title,
.our-champion .modal .second-title {
  color: var(--main-color);
}

.our-champion .modal .btn-modal-after,
.our-champion .modal .btn-modal-before {
  background-color: var(--main-color);
}

/* End Our Champions Section Style  */
/* Start Frequently Section Style  */
.frequently {
  padding-top: var(--main-padding-top);
  padding-bottom: var(--main-padding-bottom);
}

.accordion-button::after {
  background-image: none !important;
  mask-image: none !important;
  /* width: 28px;
  height: 28px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 1.25rem;
  color: var(--main-color);
  border: 2px solid var(--main-color);
  border-radius: 50%;
  margin-left: 1rem;
  flex-shrink: 0; */
}

/* .accordion-button.collapsed::after {
  content: "+";
}

.accordion-button:not(.collapsed)::after {
  content: "-";
} */

.accordion-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  font-family: var(--title-font);
  font-weight: bold;
  color: var(--font-color);
  font-size: 1.4rem;
}

.accordion-button > .accordion-title {
  flex-grow: 1;
  text-align: left;
}

.accordion-icon {
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 1.25rem;
  color: var(--main-color);
  border: 2px solid var(--main-color);
  border-radius: 50%;
  position: absolute;
  right: 2%;
  transition: all 0.3s ease;
}

.accordion-button.collapsed .accordion-icon::before {
  content: "+";
}

.accordion-button:not(.collapsed) .accordion-icon::before {
  content: "-";
}

.accordion-item {
  border: none;
  border-bottom: 1px solid #ccc;
}

.accordion-body {
  font-family: var(--title-font);
  font-weight: 400;
  color: var(--font-color);
  font-size: 1.2rem;
}

.accordion-button:not(.collapsed) {
  background-color: transparent !important;
  color: var(--font-color) !important;
}

.accordion-button:focus {
  box-shadow: none;
}

/* End Frequently Section Style  */

/* Start Client Section Style  */
.client-says {
  padding-top: var(--main-padding-top);
  padding-bottom: var(--main-padding-bottom);
  background: linear-gradient(to bottom, #34b233, #1f6e22);
}

.client-title {
  color: var(--secondary-color);
}

.client-title::after {
  background-color: var(--secondary-color);
}

.client-says p {
  color: var(--secondary-color);
}

/* End Client Section Style  */

/* Start Jobs Section Style  */
.jobs {
  padding-top: var(--main-padding-top);
}

.jobs .our-services .custom-card {
  min-height: unset !important;
}

/* End Jobs Section Style  */
/* Start Footer Style  */
footer {
  padding-top: var(--main-padding-top);
  padding-bottom: var(--main-padding-bottom);
  background-color: #082108;
}

footer .info {
  font-family: var(--title-font);
  font-size: 1.4rem;
  color: var(--font-color);
  font-weight: 500;
}

footer .social h3,
.contact .social h3 {
  font-family: var(--title-font);
  font-size: 1.4rem;
  color: var(--secondary-color);
  font-weight: bold;
}

footer .social .icons a,
.contact .social .icons a {
  font-size: 1rem;
  color: var(--secondary-color);
  background-color: var(--main-color);
  padding: 5px 10px;
  border-radius: 50%;
}

footer .pages {
  text-align: center;
}

footer h5 {
  font-family: "Outfit", sans-serif;
  font-size: 1.3rem;
  color: var(--font-color);
}

footer .pages li {
  margin: 1.5rem;
}

footer .pages li a {
  text-decoration: none;
  font-family: "Outfit", sans-serif;
  color: var(--secondary-color);
  font-size: 1.2rem;
  font-weight: 300;
}

footer .contact-info {
  font-size: 1.3rem;
  color: var(--secondary-color);
}

footer .contact-info i {
  color: var(--main-color);
}

/* End Footer Style  */

/* Start Price Page */

/* Start Price Main section */
.price-main-section .title-form,
.form-section .title-form,
.contact .title-form {
  font-family: var(--title-font);
  font-size: 2rem;
  font-weight: bold;
  color: var(--font-color);
}

.price-main-section .form-label,
.form-section .form-label,
.contact .form-label,
.free-plan-section .form-label,
.form-login label,
.form-signup label,
.number {
  font-family: var(--title-font);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--font-color);
  position: relative;
}

.price-main-section .form-label::after,
.form-section .form-label::after,
.number::after {
  content: "*";
  position: absolute;
  color: red;
  font-size: 1.3rem;
}

.price-main-section .form-control,
.form-section .form-control,
.contact .form-control,
.free-plan-section .form-control,
.form-login input,
.form-signup input,
.promo input {
  border: none;
  font-family: var(--title-font);
  font-size: 1.1rem;
  color: var(--font-color);
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.3s ease;
  width: 50%;
  border-radius: unset;
  outline: none;
}

.form-control:focus,
.form-section:focus,
.promo input:focus {
  box-shadow: none;
  border-bottom: 1px solid var(--main-color);
}

#phone {
  padding: 10px;
  font-size: 16px;
  border: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.3s ease;
  outline: none;
}

#phone:focus {
  border-bottom: 1px solid var(--main-color);
}

.iti.iti--allow-dropdown.iti--separate-dial-code {
  display: block !important;
  /* margin-top: 1rem; */
}

.content h4 {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--font-color);
}

.content .sale-price {
  font-weight: bold;
  font-weight: 1.5rem;
}

.save {
  background: linear-gradient(181deg, #ffe906 20%, #ffb600 80%);
  font-size: 0.9rem;
  font-weight: 500;
  border: none !important;
}

.vip .title-form {
  font-size: 1.5rem;
}

.vip h5 {
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--main-color);
}

.vip ul li {
  font-family: var(--title-font);
  color: var(--font-color);
  font-weight: 400;
  font-size: 1.1rem;
}

.promo h4 {
  font-family: var(--title-font);
  color: var(--font-color);
  font-weight: 500;
  font-size: 1.2rem;
}

.order-summary {
  border: 1px solid #ccc;
  border-radius: 5px;
}

.order-summary h4 {
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--font-color);
}

.order-summary .text {
  font-family: var(--title-font);
  font-size: 0.9rem;
  color: var(--font-color);
}

.order-summary .value,
.total-title,
.total-value {
  font-family: var(--title-font);
  font-size: 1.3rem;
  color: var(--font-color);
  font-weight: 600;
}

.total-value {
  color: var(--main-color);
}

.duration-details {
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color 0.3s ease;
  cursor: pointer;
}

.duration-details.selected {
  border-color: var(--main-color);
}

.duration-details .save {
  transition: 0.3s ease;
}

.duration-details.selected .save {
  background: linear-gradient(178deg, #269626, #195a19);
  color: var(--secondary-color);
}

.box-payment {
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: border-color 0.3s ease;
  cursor: pointer;
}

.box-payment.selected {
  border: 1px solid var(--main-color);
}

.box-payment input {
  border: 1px solid #ccc;
}

.form-check-input:checked {
  background-color: var(--main-color);
  box-shadow: none;
}

.box-payment label,
.form-section .form-check-label {
  font-family: var(--title-font);
  font-size: 1.2rem;
  color: var(--font-color);
  font-weight: 400;
}

/* End Price Main Page */
/* Start Jobs Main Page */
.jobs-main-section,
.free-plan-section {
  padding-top: var(--main-padding-top);
  padding-bottom: var(--main-padding-bottom);
}

.jobs-main-section h1,
.job-summary h2 {
  font-family: var(--title-font);
  font-size: 2rem;
  color: var(--font-color);
  font-weight: bold;
}

.jobs-main-section .card a {
  font-family: var(--title-font);
  font-size: 1.2rem;
  color: var(--font-color);
  font-weight: bold;
  text-decoration: none;
}

.jobs-main-section .card span {
  font-family: var(--title-font);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--font-color);
}

.jobs-main-section .card i {
  font-size: 1.2rem;
}

.jobs-main-section .card ul li,
.job-summary ul li {
  font-family: var(--title-font);
  font-size: 1rem;
  font-weight: 400;
  color: var(--font-color);
}

/* End Jobs Main Page */
/* Start Job Summary Page */
.job-summary-main-section,
.login-section {
  background-image: url("../imgs/image\ 21.png");
}

.job-summary-main-section .details span {
  font-family: var(--title-font);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--secondary-color);
}

.job-summary-main-section .details i {
  font-size: 1.2rem;
  color: var(--secondary-color);
}

.job-summary,
.form-section {
  padding-top: var(--main-padding-top);
  padding-bottom: var(--main-padding-bottom);
}

.requirement ul li {
  font-size: 1.5rem !important;
}

.not-important::after {
  content: "" !important;
}

/* End Job Summary Page */
/* Start Contact Us Page */
.contact {
  padding-top: var(--main-padding-top);
  padding-bottom: var(--main-padding-bottom);
  text-align: center;
}

.contact h1 {
  font-size: 3rem;
}

.box-contact {
  text-align: left;
}

.box-contact p {
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  color: var(--font-color);
}

.contact form {
  text-align: left;
}

.general-info {
  text-align: left;
}

.card-contact {
  border: 1px solid #ccc;
  border-radius: 30px;
}

.card-contact .icon i {
  font-size: 1.8rem;
  color: var(--main-color);
}

.card-contact .info {
  font-family: "Outfit", sans-serif;
  font-size: 0.9rem;
  color: var(--font-color);
}

.card-contact .info h6 {
  color: #070709;
}

.contact .social h3 {
  color: var(--font-color);
}

/* End Contact Us Page */
/* Start Free Plan Page */
.free-plan-section h1 {
  font-family: var(--title-font);
  font-size: 2.5rem;
  color: var(--font-color);
  font-weight: bold;
}

.free-plan-section p {
  font-family: var(--title-font);
  font-size: 1.5rem;
  color: var(--font-color);
}

.form-select:focus {
  border-color: var(--main-color);
  box-shadow: none;
}

.activity h3,
.goal h3 {
  font-family: var(--title-font);
  font-size: 2rem;
  color: var(--font-color);
  font-weight: bold;
}

.activity .card.custom-radio-card,
.goal .card.custom-radio-card {
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
  cursor: pointer;
}

.goal .card.custom-radio-card {
  background-color: #f3f3f3;
  border: 1px solid #ccc;
}

.activity .custom-radio-wrapper,
.goal .custom-radio-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.activity .custom-radio-card:has(input:checked),
.goal .custom-radio-card:has(input:checked) {
  border-color: var(--main-color);
}

.activity .form-check-input,
.goal .form-check-input {
  margin: 0;
}

.activity .form-check-label,
.goal .form-check-label {
  font-family: var(--title-font);
  font-size: 1.1rem;
  color: var(--font-color);
  font-weight: 500;
}

.activity .card.custom-radio-card p,
.goal .card.custom-radio-card p {
  font-family: var(--title-font);
  font-size: 1rem;
  color: var(--font-color);
}

.goal .card.custom-radio-card p,
.goal .form-check-label {
  font-weight: 600;
}

.free-plan-form,
.result-info h5,
.result-info .result {
  font-family: var(--title-font);
  font-size: 1.5rem;
  color: var(--font-color);
  font-weight: 600;
}

.free-plan-form .close {
  font-weight: 600;
  font-size: 1.2rem;
}

.result-info h5 {
  color: var(--main-color);
}

.result-info p,
.result-info h6 {
  font-family: var(--title-font);
  font-size: 1.1rem;
  color: var(--font-color);
  font-weight: 400;
}

.result-info .result {
  color: var(--main-color) !important;
}

.results-box {
  display: flex;
  align-items: center;
}

.carb-square,
.protien-square,
.fats-square {
  width: 25px;
  height: 25px;
  background-color: #9747ff;
  border-radius: 4px;
  flex-shrink: 0;
}

.protien-square {
  background-color: #ffed00 !important;
}

.fats-square {
  background-color: #1e90ff !important;
}

.result-text {
  font-family: var(--title-font);
  font-size: 1.3rem;
  color: var(--font-color);
  font-weight: 500;
}

.result-text small {
  font-family: var(--title-font);
  font-size: 1rem;
  color: var(--font-color);
}

/* End Free Plan Page */

/* Start Login Page */
.form-login,
.form-signup {
  min-width: 500px;
  background-color: var(--secondary-color);
  color: var(--font-color);
  padding: 40px 40px;
  border-radius: 10px;
}

.form-login h3,
.diet-plan-info h2,
.form-signup h3,
.store-header h1,
.exercise-header h1 {
  font-weight: bold;
  text-align: center;
  font-family: var(--title-font);
  font-size: 2rem;
  color: var(--font-color);
}

.form-login p,
.form-signup p {
  text-align: center;
  font-family: var(--title-font);
  font-weight: 400;
  font-size: 1.3rem;
}

.form-login .sign,
.form-signup .sign {
  color: var(--main-color);
  text-decoration: none;
}

.form-login input,
.form-signup input {
  width: 100%;
}

.login-section {
  height: auto;
  padding-top: var(--main-padding-top);
  padding-bottom: var(--main-padding-bottom);
}

@media (max-width: 576px) {
  .form-login,
  .form-signup {
    min-width: 50% !important;
    width: 80%;
    border-radius: 10px;
  }

  #editModal .form-signup {
    width: 100% !important;
  }

  .form-login .fa-solid {
    margin-top: 10px;
  }
}

/* End Login Page */

/* Start Diet Plan Page */
.diet-plan-section,
.product-section,
.profile-section {
  padding-top: var(--main-padding-top);
  padding-bottom: var(--main-padding-bottom);
}

.diet-plan-info h2 {
  font-size: 2.5rem;
}

.pdf-name {
  background-color: #ccc;
  padding: 20px 100px;
  font-family: var(--title-font);
  font-weight: 600;
  color: var(--font-color);
  font-size: 1.5rem;
  border-radius: 5px;
}

.diet-plan-info .buttons {
  min-width: 20%;
}

/* End Diet Plan Page */

.overlay-female {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
}

.female-subscribe-btn,
.female-main-section .subscribe-btn-female {
  background: transparent;
  background-color: var(--main-color-female) !important;
}

.female-subscribe-btn:hover,
.female-main-section .subscribe-btn:hover,
.female-main-section .female-btn:hover {
  background: linear-gradient(178deg, var(--main-color-female), #be1b66);
  color: var(--secondary-color);
}

.female-main-section .female-btn {
  background: linear-gradient(
    178deg,
    var(--secondary-color),
    var(--secondary-color)
  );
  color: var(--main-color-female);
  font-weight: 600;
}

.female-main-section .female-btn:hover {
  color: var(--secondary-color);
}

.female-main-section .overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.female-main-section .title .line1 {
  font-family: var(--female-font);
  font-size: 8rem;
  font-weight: 400;
  color: var(--main-color-female);
}

/* Ladies Story Section */
.ladies-stories h2 {
  font-family: var(--female-font);
  font-size: 5rem;
  color: var(--main-color-female);
}

.ladies-stories small {
  font-size: 1.5rem;
  color: var(--main-color-female);
}

.ladies-stories h6 {
  font-size: 1.3rem;
}

.border-pink {
  border: 1px solid var(--main-color-female) !important;
}

/* Subscription Section */
.subscription {
  background-image: url("../imgs/Frame 1261156387.png");
  background-size: cover;
  background-position: center;
  min-height: 75vh;
  position: relative;
}

.subscription h2 {
  font-family: var(--title-font);
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--secondary-color);
  z-index: 3;
}

.custom-border-pink {
  border-color: #e91e63 !important;
}

.step {
  position: relative;
  background-color: var(--main-color-female);
  width: 170px;
  height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  z-index: 2;
  margin: 40px 20px;
}

.step::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid var(--main-color-female);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.step-info {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--secondary-color);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  font-family: "Urbanist", sans-serif;
}

.step-info .step-num {
  font-weight: bold;
  font-size: 2.8rem;
}

.step-info .step-text {
  font-size: 1.3rem;
  font-weight: 500;
}

.outer-dots {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 4;
  pointer-events: none;
}

.dot {
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: white;
  border: 2px solid var(--main-color-female);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.left-dot {
  left: -22px;
}

.right-dot {
  right: -22px;
}

.subscription h4 {
  font-family: "Outfit", sans-serif;
  font-size: 1.3rem;
  color: var(--secondary-color);
  z-index: 2;
  font-weight: 300;
}

.step-pink {
  background: linear-gradient(178deg, var(--main-color-female), #be1b66);
}

.step-yl {
  background: linear-gradient(178deg, #fae006, #bf9504);
}

.step-gr {
  background: linear-gradient(178deg, #eef505, #50c335);
}

.step-sk {
  background: linear-gradient(178deg, #2ecde8, #2392a7);
}

.step-pink::before {
  border: 3px solid #be1b66;
}

.step-yl::before {
  border: 3px solid #bf9504;
}

.step-gr::before {
  border: 3px solid #50c335;
}

.step-sk::before {
  border: 3px solid #2392a7;
}

.step-pink .dot {
  border: 2px solid #be1b66;
}

.step-yl .dot {
  border: 2px solid #bf9504;
}

.step-gr .dot {
  border: 2px solid #50c335;
}

.step-sk .dot {
  border: 2px solid #2392a7;
}

/* female-partners Section */
.female-partners h2 {
  font-family: var(--female-font);
}

.female-partners .partners-title::after,
.female-packages .packages-title::after {
  background-color: var(--main-color-female);
}

/* female-packages Section */

.female-packages h2,
.female-packages p {
  color: #000;
}

.female-packages .toggle-btn.active {
  background-color: var(--main-color-female);
}

.female-packages .price {
  background-color: var(--main-color-female);
}

.female-packages .custom-card:hover {
  border: 1px solid var(--main-color-female);
}

.female-packages .btn-join {
  border: 1px solid var(--main-color-female);
  color: var(--main-color-female);
}

.female-packages .btn-join:hover {
  background-color: var(--main-color-female);
}

/* frequently-female Section */

.frequently-female h2,
.frequently-female .accordion-body,
.frequently-female .accordion-button,
.frequently-female p {
  color: #000;
}

.frequently-female .training-title::after {
  background-color: var(--main-color-female);
}

.frequently-female .accordion-icon {
  color: var(--main-color-female);
  border: 2px solid var(--main-color-female);
}

/* footer-female */
.footer-female {
  background-color: #4a0626;
}

.footer-female .social .icons a {
  background-color: var(--main-color-female);
}

.footer-female .contact-info i {
  color: var(--main-color-female);
}

.footer-female h5 {
  color: rgba(255, 255, 255, 0.5);
}

/* Model Story Ladies */

.modal-title,
.second-title {
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 1.5rem;
}

.second-title {
  color: var(--main-color-female);
}

.btn-modal-before,
.btn-modal-after {
  position: absolute;
  padding: 10px 20px;
  background-color: var(--main-color-female);
  color: var(--secondary-color);
  font-family: var(--title-font);
  font-weight: 500;
  border-radius: 8px;
  font-size: 1rem;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .btn-modal-before,
  .btn-modal-after {
    font-size: 0.9rem;
    padding: 8px 16px;
    bottom: 5px;
  }
}

/* exercise Page */
#filterToggle::after {
  display: none !important;
}

.exercise-header h1 {
  font-size: 2.5rem;
}

.exercise-header ul {
  border: none;
}

.exercise-header .dropdown-item {
  font-family: var(--title-font);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--font-color);
  border-radius: 5px;
}

.exercise-header .dropdown-item:hover {
  background-color: var(--main-color);
  color: var(--secondary-color);
}

.ex-title {
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--font-color);
}

/* Profile Page */
.profile-section h2,
.plan-header h4 {
  font-family: var(--title-font);
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--font-color);
  text-align: center;
}

.edit h5 {
  font-family: var(--title-font);
  font-size: 1.1rem;
  color: var(--main-color);
  font-weight: 400;
  margin: 0.5rem;
}

.plan-header h4 {
  font-size: 2rem;
  font-weight: 600;
}

.active-plan {
  align-self: center;
  padding: 12px 40px;
  background-color: var(--main-color);
  color: var(--secondary-color);
  font-family: var(--title-font);
  font-weight: 400;
  font-size: 1.2rem;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.your-plan .card {
  border: none;
}

.your-plan .card h4 {
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--main-color);
}

.your-plan .card .duration {
  font-size: 1.2rem;
  color: #000;
  font-weight: 400;
}

.date-package {
  font-size: 1rem;
  font-family: var(--title-font);
  color: var(--font-color);
}

#editModal .iti.iti--allow-dropdown.iti--separate-dial-code {
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .your-plan .card {
    width: 100% !important;
  }
}

/* Edits */
.transform h2 {
  font-family: var(--title-font);
  font-size: 2.5rem;
  color: #000;
  font-weight: bold;
}

.transform h5 {
  font-family: var(--title-font);
  font-size: 1.5rem;
  color: var(--main-color-female);
}

#applyModal .form-section {
  padding-top: 0;
  padding-bottom: 0;
}

.job-summary .subscribe-btn,
.free-plan-section .subscribe-btn {
  z-index: 1;
}

hr {
  width: 50%;
}

/* Resposive */

@media (max-width: 767.98px) {
  #dietResultModal .modal-dialog-scrollable .modal-content {
    max-height: none !important;
    overflow: auto !important;
  }

  /* .training .custom-carousel-btn {
    margin-bottom: 20rem;
  } */

  body {
    overflow-x: hidden;
  }

  .female-main-section .title .line1 {
    font-size: 3rem;
  }

  .female-main-section .buttons {
    flex-direction: column;
  }

  .training .carousel-item p,
  .training .carousel-item h2 {
    font-size: 12px;
  }

  .price-main-section .form-control,
  .form-section .form-control,
  .contact .form-control,
  .free-plan-section .form-control,
  .form-login input,
  .form-signup input,
  .promo input {
    width: 100%;
  }

  .requirement ul li {
    font-size: 0.9rem !important;
  }

  hr {
    width: 100% !important;
  }

  .form-login p,
  .form-signup p {
    font-size: 0.8rem;
  }

  .form-login h3,
  .form-signup h3 {
    font-size: 1.8rem;
  }

  footer .info {
    font-size: 1rem;
  }

  .navbar-collapse {
    text-align: center;
  }

  .navbar-collapse img {
    display: none;
  }

  .plan-header a {
    padding: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
  }

  .plan-header a img {
    width: 15px !important;
    height: 15px !important;
    margin-left: 4px;
  }

  .title .line1,
  .title .line2 {
    font-size: 2rem;
  }

  .main-section .description {
    font-size: 0.9rem;
  }

  .female-main-section .description {
    font-size: 0.8rem;
  }

  .navbar-collapse {
    background-color: #f3f3f3;
    padding: 10px;
    border-radius: 5px;
  }

  .nav-link {
    color: var(--font-color) !important;
  }

  .nav-link:hover {
    color: var(--font-color) !important;
  }

  .navbar-nav {
    padding: 0 !important;
  }
}

@media (max-width: 320px) {
  .title .line1 {
    font-size: 2rem;
  }

  .title .line2 {
    font-size: 2rem;
  }

  .female-main-section .title .line1 {
    font-size: 2rem;
  }

  .female-main-section .description {
    font-size: 0.7rem;
  }

  .training .carousel-item p {
    font-size: 10px;
  }

  .partners-title::after,
  .packages-title::after,
  .client-title::after {
    width: 0;
  }

  .about-title,
  .service-title,
  .discover-title,
  .partners-title,
  .journey-title,
  .training-title,
  .champion-title,
  .jobs-title {
    font-size: 1.8rem;
  }

  .description {
    font-size: 0.8rem;
  }

  .price-main-section .form-control,
  .form-section .form-control,
  .contact .form-control,
  .free-plan-section .form-control,
  .form-login input,
  .form-signup input,
  .promo input {
    width: 100%;
  }

  .price-main-section .form-label,
  .form-section .form-label,
  .contact .form-label,
  .free-plan-section .form-label,
  .form-login label,
  .form-signup label,
  .number {
    margin-top: 1rem;
  }

  .result-text,
  .activity .form-check-label,
  .goal .form-check-label,
  .requirement ul li {
    font-size: 0.9rem !important;
  }

  .result-text small,
  .activity .card.custom-radio-card p,
  .goal .card.custom-radio-card p,
  .job-summary-main-section .details span {
    font-size: 0.8rem;
  }

  .result-info .card {
    padding: 0.2rem !important;
  }
}

.modal {
  z-index: 999999999 !important;
}

.modal-backdrop {
  z-index: 999999998 !important;
}

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  cursor: pointer;
}

.whatsapp-float img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  filter: brightness(0.9);
}

.filter-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  padding: 0 15px;
}

.filter-exercise {
  display: flex;
  flex-wrap: wrap;
  border-radius: 6px;
  overflow: hidden;
  gap: 0;
  /* نمنع أي مسافات */
  justify-content: center;
}

.filter-btn {
  padding: 10px 20px;
  background: #f3f3f3;
  border: 1px solid rgba(132, 132, 132, 0.4);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 20px;
  color: #000;
  cursor: pointer;
  transition: 0.3s ease;
  border-radius: 0;
  flex: 1 1 auto;
  min-width: 120px;
  text-align: center;
}

.filter-btn:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.filter-btn:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.rtl-section .filter-btn:first-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rtl-section .filter-btn:last-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.filter-btn.active {
  background: var(--main-color);
  color: white;
}

@media (max-width: 576px) {
  .filter-exercise {
    flex-direction: column;
    width: 100%;
  }

  .filter-btn {
    /* border-right: 1px solid var(--main-color); */
    border-bottom: none;
    width: 100%;
  }

  .filter-btn:last-child {
    border-bottom: 1px solid rgba(132, 132, 132, 0.4);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 0;
  }

  .filter-btn:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

/* Start Deal Section */
.deal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  min-height: 80px;
  width: 100%;
  background: linear-gradient(178deg, #269626, #195a19);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.deal-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.deal-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
  color: #fff;
}

.deal-body {
  min-height: 120px;
  background-color: #f3f3f3;
  border-radius: 5px;
  padding: 2rem;
}

.offer-text-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.offer-text {
  position: relative;
  display: inline-block;
}

.offer-text h4 {
  font-family: var(--title-font);
  font-weight: bold;
  font-size: 3rem;
  color: #5a5a5a;
  margin: 0;
}

.off-label {
  position: absolute;
  top: 100%;
  right: 0;
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.5rem;
  color: #5a5a5a;
  line-height: 1;
}

.custom-code-box h4 {
  font-family: var(--title-font);
  font-weight: bold;
  font-size: 1.3rem;
  color: #5a5a5a;
}

.code-input-group label,
.custom-code-box small {
  font-family: var(--title-font);
  font-weight: 400;
  font-size: 1.5rem;
  color: #5a5a5a;
}

.custom-code-box small {
  font-size: 1.2rem;
}

.code-input-group input:focus {
  box-shadow: none;
  border: 1px solid var(--main-color);
}

.copy-icon {
  color: #5a5a5a;
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.copy-icon:hover {
  color: var(--main-color);
}

.time {
  background: linear-gradient(178deg, #269626, #195a19);
  min-height: 120px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.time h6 {
  color: var(--secondary-color);
  font-family: var(--title-font);
  font-weight: 400;
  font-size: 1.5rem;
}

@media (max-width: 991px) and (min-width: 768px) {
  .time h6 {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .deal-header {
    flex-direction: column;
  }
}

/* End Deal Section */

/* Start Deal Section Female*/
.isFemale .deal-header,
.isFemale .time {
  background: linear-gradient(178deg, var(--main-color-female), #be1b66);
}

/* End Deal Section */

/* Start Store */
.product-card {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
}

.product-img {
  max-width: 100px;
  height: auto;
}

.containCart {
  max-height: 42.5rem;
}

.product-name {
  font-family: var(--title-font);
  font-size: 1.5rem;
  font-weight: 600;
  color: #5a5a5a;
}

.product-price {
  font-family: var(--title-font);
  color: var(--main-color);
  font-size: 1rem;
  font-weight: 500;
}

.divider {
  height: 1px;
  background-color: #eee;
  margin: 20px 0;
}

/* End Store */

/* Start Product */
.product-section .product-img {
  max-width: 100%;
  max-height: 410px;
  min-height: 410px;
}

.product-section .product-name {
  font-size: 2rem;
  font-weight: 600;
  color: #5a5a5a;
}

.product-section .product-price {
  color: var(--main-color);
  font-size: 2.5rem;
  font-weight: 500;
}

.product-section .old-price {
  text-decoration: line-through;
  color: rgba(255, 0, 0, 0.4);
  font-size: 1.5rem;
  margin-left: 10px;
}

.product-section p {
  color: #848484;
  font-family: var(--title-font);
  font-size: 1.3rem;
  font-weight: 400;
}

.product-section hr {
  width: 100%;
}

.product-section h6 {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.3rem;
  color: #5a5a5a;
}

.product-section .quantity-options .btn {
  background-color: #f3f3f3;
  color: #5a5a5a;
  border: none;
  padding: 1rem 2rem;
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.3rem;
  transition: 0.3s;
}

.product-section .quantity-options .btn.active {
  color: var(--main-color);
  border: 1px solid var(--main-color);
  background-color: #fff;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.quantity-control input {
  width: 50px;
  text-align: center;
}

.product-section .btn-add {
  background: linear-gradient(178deg, #28a228, #28a228);
  color: white;
  width: 100%;
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.3rem;
}

.product-section .btn-add:hover {
  background: linear-gradient(178deg, #269626, #195a19);
  color: var(--secondary-color);
}

.product-section .btn-add .btn-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.product-section hr {
  margin: 1rem 0;
}

/* End Product */

/* Partners Slider Styles */
.partners-slider {
  padding: 20px 0;
}

.partners-slider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.partners-slider .swiper-slide img {
  max-height: 80px;
  width: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.partners-slider .swiper-slide:hover img {
  opacity: 1;
}