/* FITFocus Custom CSS */
/* 
I GLOBAL STYLES
II HOME PAGE STYLES
III ABOUT ME PAGE STYLES
IV SERVICES PAGE STYLES
V RESULTS PAGE STYLES
VI REVIEWS PAGE STYLES
VII CONTACT PAGE STYLES
VIII SHARED RESPONSIVE LAYOUT
*/

/*
II HOME PAGE STYLES - ITEMS
1. Navigation Styles
2. Hero Section Styles
3. About me Section Styles
4. Services Section Styles
5. Results of clients Section Styles
6. Contact track Section Styles
7. Footer Section Styles
*/



/* ================================= */
/* I GLOBAL STYLES */

:root {
  /* Color Variables */
  --primary-color: #abff00;
  --secondary-color: #00e5ff;
  --background-color: #0d1117;
  --background-card-color: #181e26;
  --background-dark-section-color: #12171c;
  --text-primary-color: #abff00;
  --text-secondary-color: #fff;

  /* Font Variables */
  --font-family: 'Roboto', sans-serif;

  /* Font sizes */
  --hero-font-size: 84px;
  --title-font-size: 62px;
  --subtitle-font-size: 44px;
  --paragraph-lg-font-size: 18px;
  --paragraph-md-font-size: 16px;
  --paragraph-sm-font-size: 14px;
}

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

body {
  font-family: var(--font-family);
  background-color: var(--background-color);
  color: #fff;
  line-height: 1.6;
}

.hero-title {
  font-size: var(--hero-font-size);
  font-weight: bold;
  font-style: italic;
  margin-bottom: 20px;
}

.title {
  font-size: var(--title-font-size);
  font-weight: bold;
  margin-bottom: 20px;
}

.subtitle {
  font-size: var(--subtitle-font-size);
  background-image: linear-gradient(to right, #abff00, #4aff7a, #00fcbd, #00f3eb, #00e5ff);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

p {
  font-size: var(--paragraph-lg-font-size);
  color: var(--text-secondary-color);
  margin-bottom: 20px;
}

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

.secondary-text {
  color: var(--text-secondary-color);
}

.fitfocus-card {
  background-color: var(--background-card-color);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fitfocus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.fitfocus-card h3 {
  color: var(--text-secondary-color);
  font-weight: bold;
}

.fitfocus-card p {
  color: var(--text-secondary-color);
  font-size: var(--paragraph-md-font-size);
}

.btn {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fitfocus-primary-button {
  background-image: linear-gradient(to right, #abff00, #4aff7a, #00fcbd, #00f3eb, #00e5ff);
  color: var(--background-color);
  font-weight: bold;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s ease;
}

.fitfocus-primary-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: var(--background-color);
}

.fitfocus-secondary-button {
  background-color: transparent;
  color: var(--primary-color);
  font-weight: bold;
  border: 1px solid;
  border-image: linear-gradient(to right, #abff00, #4aff7a, #00fcbd, #00f3eb, #00e5ff) 1;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s ease;
}

.fitfocus-secondary-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: var(--text-secondary-color);
}

#tsparticles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

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

::-webkit-scrollbar-track {
  background: var(--background-color);
}

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

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

/* ================================= */
/* II HOME PAGE STYLES */
/* ================================= */

/* 1. Navigation Styles */

.navbar .nav-link {
  color: var(--text-secondary-color);
}
.navbar .nav-link.active {
  color: var(--primary-color);
}
.navbar .nav-link.disabled {
  color: var(--text-secondary-color);
}

.navbar .nav-link::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #abff00, #4aff7a, #00fcbd, #00f3eb, #00e5ff);
  transition: width .3s;
}

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

.navbar-toggler {
  border-color: var(--primary-color);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(171, 255, 0, 1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-brand img {
  width: 300px; 
}

/* ================================= */
/* 2. Hero Section Styles */


/* ================================= */
/* 3. About me Section Styles */
.about-me-wrapper {
  background-color: var(--background-dark-section-color);
}


.fitfocus-trainer-image img {
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

/* ================================= */
/* 4. Services Section Styles */

/* ================================= */
/* 5. Results of clients Section Styles */
.slider-container {
  position: relative;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  /* Svaka slika zauzima tačno jednu trećinu ekrana/kontejnera */
  min-width: 33.3333%; 
  box-sizing: border-box;
  padding: 0 8px; /* Mali razmak između slika */
}

.slide img {
  width: 100%;
  display: block;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
}

/* Dugmad */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 50%;
  z-index: 10;
  transition: background 0.3s;
}

.slider-btn:hover {
  background-color: #abff00;
  color: black;
}

.prev { left: 10px; }
.next { right: 10px; }


/* ================================= */
/* 6. Contact track Section Styles */
.contact-track-wrapper {
  height: 350px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../img/contact-track.jfif);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}


/* ================================= */
/* 7. Footer Section Styles */

footer a {
  color: var(--text-secondary-color);
}

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

/* ================================= */
/* III ABOUT ME PAGE STYLES */
/* ================================= */

.fitfocus-header-image-about-me img {
  border-radius: 800px 50px 1200px 50px;
}

.coach-page-header {
  min-height: 560px;
}

.coach-portrait img {
  max-height: 560px;
  object-fit: contain;
}

.coach-value-card {
  margin-bottom: 0;
}

.coach-value-card p {
  margin-bottom: 0;
}

.coach-stats {
  background-color: var(--background-dark-section-color);
}

.coach-stat-number,
.coach-stats span {
  display: block;
}

.coach-stat-number {
  color: var(--primary-color);
  font-size: 42px;
  line-height: 1.2;
}

.coach-stats span {
  margin-top: 8px;
  color: var(--text-secondary-color);
  font-size: var(--paragraph-sm-font-size);
}


/* ================================= */
/* IV SERVICES PAGE STYLES */
/* ================================= */

.fitfocus-header-image-services img {
  border-radius: 50px 800px 50px 1200px;
}

.service-detail {
  padding: 30px;
  margin-bottom: 0;
}

.service-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--primary-color);
}

.service-icon span {
  color: var(--secondary-color);
  font-weight: bold;
}

.service-detail h3 {
  margin-top: 28px;
  color: var(--text-secondary-color);
  font-weight: bold;
}

.service-detail ul {
  padding-left: 20px;
  margin: 0 0 28px;
  color: var(--text-secondary-color);
}

.service-detail li {
  margin-bottom: 8px;
}

.how-it-works {
  background-color: var(--background-dark-section-color);
}

.process-step {
  display: flex;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.process-step:last-child {
  border-bottom: 0;
}

.process-step > strong {
  color: var(--primary-color);
  font-size: 22px;
}

.process-step h3 {
  color: var(--text-secondary-color);
  font-size: 22px;
  font-weight: bold;
}

.process-step p {
  margin-bottom: 0;
  font-size: var(--paragraph-md-font-size);
}


/* ================================= */
/* V RESULTS PAGE STYLES */
/* ================================= */
.fitfocus-header-image-results img {
  border-radius: 30% 70% 70% 30% / 70% 19% 81% 30% ;
}

.results-gallery p { 
  max-width: 650px; 
  margin-right: auto; 
  margin-left: auto; 
}

.results-stories { 
  background-color: var(--background-dark-section-color); 
}

.result-story { 
  display: flex; 
  gap: 24px; 
  padding: 20px 0; 
  border-bottom: 1px solid rgba(255, 255, 255, .16); 
}

.result-story:last-child { 
  border-bottom: 0; 
}

.result-story > strong { 
  color: var(--primary-color); 
  font-size: 22px; 
}

.result-story h3 { 
  color: var(--text-secondary-color); 
  font-size: 22px; 
  font-weight: bold; 
}

.result-story p { 
  margin-bottom: 0; 
  font-size: var(--paragraph-md-font-size); 
}

.results-metrics span { 
  display: block; 
  margin-top: 8px; 
  font-size: var(--paragraph-sm-font-size); 
  color: var(--text-secondary-color);
  font-weight: bold;
}

.result-metric {
  height: 100%;
  padding: 28px 16px;
  background-color: var(--background-card-color);
  border-bottom: 3px solid var(--primary-color);
}


/* ================================= */
/* VI REVIEWS PAGE STYLES */
/* ================================= */
.fitfocus-header-image-reviews img {
  border-radius: 3% 97% 29% 71% / 85% 19% 81% 15% ;
}

.reviews-rating { 
  min-height: 280px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-direction: column; 
  border: 1px solid rgba(171, 255, 0, .35); 
  background-color: var(--background-card-color); 
  box-shadow: 18px 18px 0 rgba(0, 229, 255, .14); 
}

.reviews-rating strong { 
  color: var(--primary-color); 
  font-size: 82px; 
  line-height: 1; 
}

.stars { 
  color: var(--primary-color); 
  font-size: 22px; 
  letter-spacing: 4px; 
}

.reviews-rating small { 
  margin-top: 14px; 
  color: var(--text-secondary-color); 
  font-weight: bold; 
}

.reviews-list > .text-center p { 
  max-width: 620px; 
  margin-right: auto; 
  margin-left: auto; 
}

.review-card { 
  display: flex; 
  flex-direction: column; 
  padding: 32px; 
  background-color: var(--background-card-color); 
  border-top: 3px solid var(--secondary-color); 
}

.featured-review { 
  border-top-color: var(--primary-color); 
  transform: translateY(-14px); 
}

.review-card blockquote { 
  flex-grow: 1; 
  margin: 22px 0 32px; 
  color: var(--text-secondary-color); 
  font-size: 19px; 
}

.review-author { 
  display: flex; 
  flex-direction: column; 
  gap: 4px; 
}

.review-author strong { 
  color: var(--primary-color); 
}

.review-author span { 
  color: var(--secondary-color); 
  font-size: var(--paragraph-sm-font-size); 
}

.review-promise { 
  background-color: var(--background-dark-section-color); 
}

.review-large-quote { 
  max-width: 650px; 
  color: var(--text-secondary-color); 
  font-size: 25px; 
}

@media (max-width: 767px) {
  .reviews-rating { 
    min-height: 220px; 
  }
  .reviews-rating strong { 
    font-size: 62px; 
  }
  .featured-review { 
    transform: none; 
  }

  .contact-page-footer {
    text-align: center;
  }

  .contact-page-footer .row > div,
  .contact-page-footer .fitfocus-footer-social {
    align-items: center;
    justify-content: center;
  }

  .contact-page-footer .fitfocus-footer-logo,
  .contact-page-footer .footer-links {
    text-align: center;
  }

  .contact-page-footer .footer-links {
    margin-bottom: 0;
  }
}

/* ================================= */
/* VII CONTACT PAGE STYLES */
/* ================================= */

.fitfocus-header-image-contact img {
  border-radius: 120px 60px 140px 80px / 180px 80px 60px 120px;
}

.contact-details { 
  display: flex; 
  flex-direction: column; 
  gap: 18px; 
  margin-top: 34px; 
}

.contact-details a, 
.contact-details > span { 
  display: flex; 
  align-items: center; 
  gap: 14px; 
  color: var(--text-secondary-color); 
}

.contact-details i { 
  width: 24px; 
  color: var(--primary-color); 
}

.contact-form { 
  padding: 34px; 
  background-color: var(--background-card-color); 
  border-top: 3px solid var(--primary-color); 
  border-radius: 10px;
}

.contact-form label { 
  display: block; 
  margin-bottom: 8px; 
  color: var(--secondary-color); 
  font-size: var(--paragraph-sm-font-size); 
  font-weight: bold; 
}

.contact-form input, 
.contact-form select, 
.contact-form textarea { 
  width: 100%; 
  padding: 12px 14px; 
  color: var(--text-secondary-color); 
  background-color: var(--background-color); 
  border: 1px solid rgba(255, 255, 255, .2); 
  border-radius: 10px;
}

.contact-form input:focus, 
.contact-form select:focus, 
.contact-form textarea:focus { 
  outline: 1px solid var(--primary-color); 
  border-color: var(--primary-color); 
}

.contact-form select option { 
  color: #fff; 
  background-color: var(--background-color); 
}

.contact-form button { 
  border: 0; 
}

.contact-form button i { 
  margin-left: 10px; 
}

.contact-expectations { 
  background-color: var(--background-dark-section-color); 
}

.expectation { 
  padding: 26px; 
  border-left: 3px solid var(--secondary-color); 
  background-color: var(--background-card-color); 
}

.expectation strong { 
  color: var(--primary-color); 
  font-size: 22px; 
}

.expectation h3 { 
  margin-top: 18px; 
  color: var(--text-secondary-color); 
  font-size: 20px; 
  font-weight: bold; 
}

.expectation p { 
  margin-bottom: 0; 
  font-size: var(--paragraph-md-font-size); 
}

@media (max-width: 767px) {
  .contact-hero-symbol { 
    min-height: 220px; 
  }
  .contact-hero-symbol i { 
    font-size: 82px; 
  }
  .contact-form { 
    padding: 24px; 
  }
}

/* ================================= */
/* VIII SHARED RESPONSIVE LAYOUT */
/* ================================= */

html {
  overflow-x: hidden;
}

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

.navbar-brand img {
  max-width: 220px;
}

.fitfocus-header-text,
.fitfocus-trainer-text,
.contact-track,
.contact-content,
.services-page-hero .container,
.results-page-hero .container,
.reviews-page-hero .container,
.contact-page-hero .container {
  min-width: 0;
}

@media (max-width: 991px) {
  .navbar .navbar-nav {
    align-items: stretch !important;
    padding: 16px 0;
  }

  .navbar .nav-item .fitfocus-secondary-button {
    width: fit-content;
    margin-top: 12px;
  }

  .fitfocus-header,
  .coach-page-header,
  .services-page-hero,
  .results-page-hero,
  .reviews-page-hero,
  .contact-page-hero {
    min-height: auto;
  }

  .fitfocus-header-image,
  .coach-portrait {
    text-align: center;
  }

  .fitfocus-header-image img,
  .coach-portrait img {
    max-height: 430px;
  }

  .fitfocus-trainer-image,
  .fitfocus-trainer-text {
    width: 100%;
  }

  .about-me .row {
    gap: 2rem !important;
  }

  .contact-track .col-7,
  .contact-track .col-5 {
    width: 100%;
  }

  .contact-track .col-5 {
    justify-content: flex-start !important;
  }
}

@media (max-width: 767px) {
  :root {
    --hero-font-size: clamp(40px, 13vw, 58px);
    --title-font-size: clamp(32px, 10vw, 44px);
    --subtitle-font-size: clamp(26px, 8vw, 34px);
    --paragraph-lg-font-size: 16px;
  }

  body {
    overflow-x: hidden;
  }

  .container {
    --bs-gutter-x: 1.5rem;
  }

  .navbar-brand img {
    max-width: 180px;
  }

  .hero-title {
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .title {
    line-height: 1.12;
  }

  .subtitle {
    line-height: 1.15;
  }

  .fitfocus-header-buttonHolder {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 14px !important;
  }

  .fitfocus-header-buttonHolder .btn,
  .fitfocus-header-text > .btn,
  .contact-track .btn,
  .contact-form button {
    width: 100%;
  }

  .fitfocus-header-skills .row > div {
    align-items: center !important;
    text-align: center;
  }

  .fitfocus-header-skills p {
    font-size: var(--paragraph-sm-font-size);
  }

  .fitfocus-trainer-image img {
    width: 100%;
    clip-path: none;
  }

  .services .fitfocus-card {
    width: 100%;
  }

  .fitfocus-card,
  .service-detail,
  .review-card,
  .contact-form {
    padding: 24px;
  }

  .slider-container {
    margin-right: -8px;
    margin-left: -8px;
  }

  .slide {
    min-width: 100%;
    padding: 0 8px;
  }

  .slide img {
    height: 260px;
  }

  .slider-btn {
    padding: 9px 12px;
  }

  .contact-track-wrapper {
    height: auto;
    min-height: 360px;
    padding: 56px 0;
  }

  .contact-track .title,
  .contact-track h3 {
    overflow-wrap: anywhere;
  }

  .contact-details a,
  .contact-details > span {
    overflow-wrap: anywhere;
  }

  .featured-review {
    transform: none;
  }
}