/*---------------------------------------------------------------

        Template Name: Fusion Fitness - Personal Gym Trainer
        Description: Professional Gym Trainer and Body Building
        Author: Lucid Themeslab
        Author URL: https://www.templatemonster.com/store/lucid_themeslab/
        Version: 2.0.0

    -----------------------------------------------------------------

        CSS INDEX
        ==================

            01. Basic Styles
            02. Preloader Animation Style
            03. Color Palette Styles
            04. Header, Navigation Section Styles
            05. Traning Category Styles
            06. About Styles
            07. Our Latest Post Styles
            08. Choose Program Styles
            09. Timetable Section Styles
            10. Pricing Plan Section Styles
            11. FAQ Section Styles
            12. Subscribe Newsletter Styles
            13. Back to top Styles

        ----------------------------------------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");


/*==================
   Basic Styles
==================*/
:root {

  /* BG Colors */

  --primary-color: #6640FF;
  --secondary-color: #1D2125;
  --success-color: rgba(1, 208, 171, 1);
  --light-color: #575757;
  --dark-color: #101214;
  --white-color: #ffff;
  --card-color: #22272B;
  --card-box-color:#2C333A;
  --danger-color: #ff5151;
  --secondary-overlay: 16, 18, 20;
  --color1: #6640FF;
  --color2: #ff4066;
  --color3: #ff7240;
  --color4: #4089ff;
  --color5: #17a2b8;
  --color6: #B17604;
  --color7: #579055;
  --color8: #AC348E;
  
  /* Text Colors */
  --primary-text:#6640FF;

  /* font family */
  --PrimaryFont: "Oswald", sans-serif;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--secondary-color);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--light-color); 
}

::selection {
  background: var(--primary-color); 
  color: var(--white-color); 
}

* {
  box-sizing: border-box;
  font-family: var(--PrimaryFont);
  word-break: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

body {
  overflow-x: hidden;
}

.fs-0 {
  font-size: 0px;
}

.primary-btn {
  padding: 27px 44px;
  cursor: pointer;
  display: inline-block;
  line-height: 0;
  cursor: pointer;
  transition: color 0.4s linear;
  z-index: 1;
}

.primary-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 101%;
  height: 101%;
  background: var(--card-box-color);
  z-index: 1;
  border-radius: 5px;
  transition: transform 0.5s;
  transition-timing-function: ease;
  transform-origin: 0 0;
  transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
  transform: scaleX(0);
}

.primary-btn:hover::before {
  transform: scaleX(1);
  color: var(--whiteColor) !important;
  z-index: -1;
}

.primary-btn:hover {
  background-position: right;
}

.primary-btn.focus,
.primary-btn:focus {
  outline: 0;
  box-shadow: none;
}

.btn-outline-primary {
  padding: 27px 44px;
  cursor: pointer;
  display: inline-block;
  line-height: 0;
  cursor: pointer;
  transition: color 0.4s linear;
  position: relative;
  z-index: 1;
}

.border-primary {
  border-color: var(--primary-color) !important;
}

.btn-outline-primary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 101%;
  height: 101%;
  background: var(--card-box-color);
  z-index: 1;
  border-radius: 5px;
  transition: transform 0.5s;
  transition-timing-function: ease;
  transform-origin: 0 0;
  transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
  transform: scaleX(0);
}

.btn-outline-primary:hover::before {
  transform: scaleX(1);
  color: var(--white-color) !important;
  z-index: -1;
}

.input-group-text {
  background-color: var(--primary-color); 
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-light {
  color: var(--light-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
}

.bg-dark {
  background-color: var(--dark-color) !important;
}

.border-primary {
  color: var(--primary-color) !important;
}

.section-tittle h6 {
  font-size: 24px;
  margin-left: 72px;
  color: var(--primary-color);
  display: inline-block;
  position: relative;
}

.section-tittle h6::before {
  position: absolute;
  content: "";
  width: 50px;
  height: 2px;
  background: var(--white-color);
  top: 0;
  left: -67px;
  top: 50%;
  transform: translateY(-50%);
}

.section-tittle h2 {
  -webkit-text-stroke: 2px var(--primary-color);
  -webkit-text-fill-color: transparent;
}

select option {
  background-color: var(--primary-color) !important;
}

.form-select option:hover {
  background-color: var(--primary-color) !important;
}
input:focus, select:focus, textarea:focus{
  border: 1px solid var(--primary-color)!important;
}

input::placeholder,
textarea::placeholder {
  color: #cccccc !important;
}

/* .form-control:focus {
  color: var(--light-color) !important;
} */

.offcanvas {
  background: var(--secondary-color);
  max-width: 100%;
}

.error {
  color: var(--danger-color);
  background-color: var(--dark-color);
  padding: 4px;
}

#newsletter


#callback {
  position: relative;
}

#callback #request-error {
  position: absolute;
  width: 100%;
  top: 100%;
}

/*=======================
 Preloader Animation Style
=========================*/

.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--secondary-color);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.gym-loader {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.8s ease-in-out;
}

.arm {
  font-size: 50px;
  margin-bottom: 10px;
  animation: flex 1.5s infinite alternate ease-in-out;
}

.dumbbell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

@keyframes lift {
  0% { transform: translateY(0); }
  100% { transform: translateY(-15px); }
}

@keyframes flex {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out;
}

/*============================
   Color Switcher Palette Styles
================================*/

.color-switcher-container {
  position: fixed;
  transform: translateY(-50%);
  border-radius: 0 10px 10px 0;
  background-color: #ffff;
  padding: 15px;
  top: 350px;
  left: -222px;
  z-index: 2;
  width: 222px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  transition: left 0.6s ease-in-out;
}

.color-switcher-container.open {
  left: 0;
}

.toggle-btn {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary-color);
  border: none;
  width: 40px;
  height: 40px;
  color: white;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.color-btn {
  width: 30px;
  height: 30px;
  border: none;
  margin: 5px;
  cursor: pointer;
  border-radius: 5px;
  display: inline-block;
}
.color-btn:nth-child(1) { background-color: var(--color1); }
.color-btn:nth-child(2) { background-color: var(--color2); }
.color-btn:nth-child(3) { background-color: var(--color3); }
.color-btn:nth-child(4) { background-color: var(--color4); }
.color-btn:nth-child(5) { background-color: var(--color5); }
.color-btn:nth-child(6) { background-color: var(--color6); }
.color-btn:nth-child(7) { background-color: var(--color7); }
.color-btn:nth-child(8) { background-color: var(--color8); }


@keyframes rotateGear {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.rotate-icon {
  animation: rotateGear 3s linear infinite;
}


/*===============================
  Header, Navigation Section Styles
===================================*/

.slider-height {
  height: 100vh;
min-height:600px;
}


.slider-area .hero__caption span {
  -webkit-text-stroke: 1px var(--white-color);
  -webkit-text-fill-color: transparent;
}

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

.nav-link:hover, .nav-item.active .nav-link{
  color: var(--primary-color) !important;
  box-shadow: none;
}

.navbar-nav .nav-link {
  position: relative;
  padding-bottom: 5px;
}

.navbar-nav .nav-link::after, .nav-item.active .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after,
.nav-item.active .nav-link::after {
  width: 100%;
}

.navbar-brand img{
  width: 180px;
}
@media(max-width:1200px){
  .navbar-brand img{
    width: 140px;
  } 
}

.single-banner-slide {

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

/* Mobile screens ke liye height kam karein */
@media (max-width: 768px) {
  .slider-height{
    height: unset;
    /* min-height: 650px; */
  }
  .hero__caption span,
  .hero__caption h1 {
  font-size: 28px;
}

.hero__caption p{
  font-size: 16px!important;
}
  .single-banner-slide{
    /* min-height: 500px;  */
  }
}
/* Mobile screens ke liye height kam karein */
@media (max-width: 480px) {
  .slider-height{
    height: unset;
    min-height: 550px;
  }
  .single-banner-slide{
    min-height: 400px; 
  }
  .hero__caption p{
    font-size: 16px!important;
  }
}

.owl-dots {
  display: none !important;
}

/*=========================
  Hero Banner Section Styles
============================*/

.home-slides .owl-item {
  width: 100%;
}

.item-bg_1 {
  background: linear-gradient(0deg, rgba(var(--secondary-overlay), 0.8), rgba(var(--secondary-overlay), 0.7)),
    url(../../assets/img/hero/hero_slides_01.webp) no-repeat;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.item-bg_2 {
  background: linear-gradient(0deg, rgba(var(--secondary-overlay), 0.8), rgba(var(--secondary-overlay), 0.7)),
    url(../../assets/img/hero/hero_slides_02.webp) no-repeat;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.item-bg_3 {
  background: linear-gradient(0deg, rgba(var(--secondary-overlay), 0.8), rgba(var(--secondary-overlay), 0.7)),
    url(../../assets/img/hero/hero_slides_03.webp) no-repeat;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.main-slides-item {
  display: flex;
  align-items: center;
}

.banner-details{
 max-width: 700px;
}

@media(max-width:992px) {
  .main-slides-content h1 {
    font-size: 50px;
  }
}

@media(max-width:500px) {
  .main-slides-content h1 {
    font-size: 35px;
  }

  .main-slides-content p {
    font-size: 16px !important;
  }
}

.main-slides-content p {
  max-width: 800px;
}

.hero-section h1 span {
  font-weight: bold;
  color: var(--primary-text);
}

.hero-section p {
  max-width: 700px;
  margin: 0 auto 20px;
}

.header-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa {
  overflow: visible;
  box-sizing: content-box;
}

.sticky-nav {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.9); /* Adjust color */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 999;
  transition: all 0.3s ease-in-out;
}

/*=======================
   Traning Category Styles
==========================*/

.traning-categories .single-topic::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.traning-categories .single-topic .topic-content-box {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  height: 100%;
  width: 100%;
  transition: .4s;
  z-index: 2;
}

.traning-categories .single-topic .topic-content-box .topic-content {
  top: 40%;
  transform: translateY(-47%);
}

/*==================
   About Styles
==================*/

.image-wrapper img {
  border-radius: 5px;
  box-shadow: -20px -20px 0px 4px var(--primary-color);
}

/*======================
   Our Latest Post Styles
========================*/

.hcf-masonry-card {
  display: block;
  position: relative;
  overflow: hidden
}

.hcf-masonry-card .card-img {
  object-fit: cover;
  transform: scale(1);
  transition: transform 150ms linear
}

.hcf-masonry-card .card-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0
}

.hcf-masonry-card .card-overlay .card-title {
  display: inline-block;
  transform: translateY(10px);
  opacity: 0
}

.hcf-masonry-card .card-overlay .card-category {
  transform: translateY(10px);
  opacity: 0
}

.hcf-masonry-card:hover .card-img {
  transform: scale(1.05);
  transition: transform 150ms linear
}

.hcf-masonry-card:hover .card-overlay {
  opacity: 1;
  transition: opacity 150ms linear
}

.hcf-masonry-card:hover .card-overlay .card-title {
  opacity: 1;
  transform: translateY(0);
  transition: transform 150ms linear .1s, opacity 150ms linear .1s
}

.hcf-masonry-card:hover .card-overlay .card-category {
  opacity: 1;
  transform: translateY(0);
  transition: transform 150ms linear .2s, opacity 150ms linear .2s
}

/*===================
Choose Program Styles
====================*/

.team-item {
  position: relative;
  overflow: hidden;
  background: var(--card-color);
  border: 1px solid var(--primary-color);
  border-radius: 10px;
}

.team-item .team-inner {
  transition: 0.5s;
}
.team-inner{
  background-color: var(--card-box-color);
}
.team-item:hover .team-inner {
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
  background-color: var(--secondary-color);
}

.team-item .team-inner .team-img {
  position: relative;
  z-index: 2;
}

/*======================= 
  Timetable Section Styles
==========================*/

.schedule-table table tbody td {
  vertical-align: middle;
  border: 1px solid #E2EDF8;
  padding: 35px 15px;
}

.schedule-table table tbody td.day {
  background: #f3f0f0;
  border: 1px solid #e4e4e4;
  transition: all 0.3s linear 0s;
  min-width: 140px
}

.schedule-table table tbody td.active {
  transition: all 0.3s linear 0s;
  min-width: 140px
}

.schedule-table table tbody td .hover {
  position: absolute;
  width: 85%;
  top: 20%;
  background: var(--primary-color) !important;
  border-radius: 0.25rem;
  opacity: 0;
  transition: all 0.3s linear 0s
}

.schedule-table table tbody td.active:hover .hover {
  transform: translate(-90%, -70%) scale(1);
  visibility: visible;
  opacity: 1;
}

.schedule-table table tbody td.day:hover {
  background: var(--dark-colorColor);
  color: var(--white-color);
  border: 1px solid var(--dark-color)
}

/*=========================
  Pricing Plan Section Styles
============================*/

.properties .about-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--primary-color);
  transition: 0.3s ease-in-out;
  box-shadow: 0px 15px 25px rgba(66, 85, 164, 0.08);
}

.about-icon:hover {
  background: var(--success-color);
  color: var(--white-color);
}

 .properties__caption span.month {
  font-size: 30px;
  color: var(--white-color);
  text-transform: uppercase;
}

 .properties__caption P {
  color: var(--primary-color);
  font-size: 30px;
  text-transform: uppercase;
}

 .properties__caption P > span {
  color: var(--white-color);
  font-size: 14px;
}

 .properties .single-features {
  display: flex;
}

 .properties .single-features .features-caption {
  padding-left: 19px;
}

 .properties .single-features .features-caption p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--white-color);
  text-transform: capitalize;
}

 .properties__card {
  box-shadow: 0px 6px 6px 0px rgba(2, 25, 65, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 36px 24px 0px 24px;
}


@media (max-width: 768px) {

  .properties {
    text-align: center;
  }

  .about-icon {
      margin: 0 auto; 
  }

  .properties__caption {
    text-align: center;
  }
}

/*==================
  FAQ Section Styles
=====================*/

.accordion-item {
  border: none;
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.accordion-button:not(.collapsed) {
  color: var(--primary-color);
  box-shadow: none;
}

.accordion-button:focus {
  z-index: 3;
  border-color: unset;
  outline: 0;
  box-shadow: none;
}

.accordion-item {
  border: none;
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: var(--card-color);
}

.accordion-button {
  background-color: var(--card-color);
  color: var(--white-color);
  transition: color 0.3s ease-in-out;
}

.accordion-button:not(.collapsed) {
  color: var(--primary-color); 
  background-color: var(--card-color);
  box-shadow: none;
}

.accordion-button:hover {
  color: var(--primary-color);
}

.accordion-button:not(.collapsed)::after {
  content: '\f078';
  font-family: 'FontAwesome';
  background-image: unset;
  transform: var(--bs-accordion-btn-icon-transform);
}

.accordion-button::after {
  content: '\f077';
  font-family: 'FontAwesome';
  background-image: unset;
  transform: var(--bs-accordion-btn-icon-transform);
}

.accordion-button {
  background-color: var(--card-color);
}

.accordion-button:not(.collapsed) {
  background-color: var(--card-color);
  box-shadow: none;
}

.accordion-button:focus {
  border-color: unset;
  outline: 0;
  box-shadow: none;
}

.accordion-button .faq-button:hover {
  background-color: var(--primary-color) !important;
}

.accordion_wrapper .accordion-body {
  padding: 26px;
  padding-right: 28px;
  padding-top: 0;
  background-color: var(--card-color);
  color: var(--white-color);
  font-size: 16px;
  line-height: 1.75;
}

.checklist-icon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: rgba(var(--primary-rgba-color), 0.2);
}

/*========================== 
  Subscribe Newsletter Styles
=============================*/

#subscription #subscribe-error {
  position: absolute;
  width: 100%;
  top: 100%;
}

#newsletter input:focus, select:focus, textarea:focus{
  border: 1px solid var(--white-color)!important;
}


.btn-transparent::before {
  background-color: unset !important;
}

/* ==================
  Back to top Styles
=====================*/

#backtotop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: var(--primary-color);
  opacity: 0;
  visibility: hidden;
  z-index: 2;
}
#backtotop:hover {
  cursor: pointer;
}
#backtotop.show {
  opacity: 1;
  visibility: visible;
}
.headeralert{
  z-index: 50;
}