/*===================================================
Project: gymex - gym & fitness HTML website template
Auther: ERRAMIX
Version: 1.0
====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* start global classes */
:root {

  /* body bg color */
  --bodyColor: #FFFFFF;

  /* primary type color */
  --primary-color: #0E0E0E;

  /* primary brand color */
  --brand-color: #D71105;

  /* dark primary color */
  --dark-primary: #5e0c09;

  /* box color */
  --box-color: #F5F5F5;

  /* white color */
  --white: #fff;

  /* grey color */
  --grey: #686868;

  /* border radius */
  --border-radius: 10px;
}


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

body {
  font-family: 'Outfit', sans-serif;
  color: var(--primary-color);
  background-color: var(--bodyColor);
  text-align: left;
  position: relative;
  overflow-x: hidden;
  width: 100%;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

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

.grey-text {
  color: var(--grey, #cecece) !important;
}

.b-radius {
  border-radius: var(--border-radius);
}

.heading-1,
.heading-2,
.heading-3,
.heading-4 {
  color: var(--primary-color);
  text-transform: capitalize;
  line-height: auto;
}

.heading-1 {
  font-size: 48px;
  font-weight: bold;
  line-height: normal;
}

.heading-2 {
  font-size: 36px;
  font-weight: bold;
}

.heading-3 {
  font-size: 24px;
  font-weight: 600;
}

.heading-4 {
  font-size: 20px;
  font-weight: 600;
}


.body-1 {
  font-size: 18px;
  font-weight: 300;
  color: var(--grey);
  font-family: 'Outfit', sans-serif;
}

.body-2 {
  font-size: 16px;
  font-weight: 300;
  color: var(--grey);
  font-family: 'Outfit', sans-serif;
}

.breadcrubs .content,
.breadcrubs .content .container {
  background-color: var(--box-color) !important;
  color: var(--primary-color) !important;
}

.breadcrubs .content h1 {
  color: var(--primary-color);
}

.breadcrubs .content p {
  color: var(--grey);
}

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

input,
textarea {
  font-family: 'Outfit', sans-serif !important;
}

.gap-8 {
  gap: 8px;
}

.gap-16 {
  gap: 16px;
}

.gap-32 {
  gap: 32px;
}

.gap-64 {
  gap: 64px;
}

.bg-box {
  background-color: var(--box-color);
}

@media (max-width: 991.98px) {
  .heading-1 {
    font-size: 36px;
  }

  .heading-2 {
    font-size: 24px;
  }

  .heading-3 {
    font-size: 18px;
  }

  /* Body copy is set in Outfit 300 (Light) in mid-grey. That weight is already
     thin on a desktop monitor; shrinking it as well made phone text look faint
     and undersized. Keep the desktop size and carry a normal weight instead —
     small text needs more weight, not less. */
  .body-1 {
    font-size: 18px;
    font-weight: 400;
  }

  .body-2 {
    font-size: 16px;
    font-weight: 400;
  }

  .gap-8 {
    gap: 4px;
  }

  .gap-16 {
    gap: 8px;
  }

  .gap-32 {
    gap: 16px;
  }

  .padding-32 {
    padding: 16px;
  }

  .padding-16 {
    padding: 8px;
  }

  .padding-8 {
    padding: 4px;
  }

  .icon-lg {
    font-size: 48px;
  }

  .icon-md {
    font-size: 32px;
  }

  .icon-sm {
    font-size: 26px;
  }

  .section {
    padding-block: 3rem;
  }

}

a {
  text-decoration: none;
  text-transform: capitalize;
}

.w-fit {
  width: fit-content;
}

.padding-32 {
  padding: 32px;
}

.padding-16 {
  padding: 16px;
}

.padding-8 {
  padding: 8px;
}

.icon-lg {
  font-size: 48px;
}

.icon-md {
  font-size: 32px;
}

.icon-sm {
  font-size: 24px;
}

p {
  color: var(--grey);
  font-family: 'Outfit', sans-serif;
}

.section {
  padding-block: 6rem;
}

.unique-text {
  color: var(--brand-color);
}

input,
textarea {
  border: 0;
  outline: 0;
  color: var(--grey);
  background-color: var(--box-color);
  border-radius: var(--border-radius);
}

/* start buttons style */
.btn,
.btn-outline {
  background-color: var(--brand-color);
  color: var(--white);
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  border-radius: var(--border-radius);
  padding: 10px 28px;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  text-transform: capitalize;
  align-items: center;
  text-align: center;
  letter-spacing: .5px;
  outline: none;
  font-weight: bold;
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  z-index: 1;
  transition: color 300ms ease-in-out;
}


.btn-outline {
  background-color: transparent;
  color: var(--primary-color);
  border: .5px solid var(--brand-color);
}

.btn:hover {
  color: var(--primary-color);
  border: .5px solid var(--brand-color);
}

.learn-more {
  text-transform: capitalize;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  font-size: 18px;
  font-family: 'Outfit', sans-serif;
  font-weight: bold;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

.learn-more i {
  font-size: 22px;
  margin-left: 8px;
}

.learn-more:hover {
  letter-spacing: 1.5px;
  transition: all .5s;
  color: var(--grey);
}

/* end main button style */


ul {
  list-style: none;
}

img {
  width: 100%;
  height: auto;
  /* Without height:auto an <img height="98"> keeps that literal height while
     width:100% rescales it — the logo and any sized image distort as the
     viewport narrows. */
}


/* end global classes */

/* ==== start  preloader style  ===== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bodyColor);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preloader__content svg {
  width: 200px;
  height: 200px;
}

:root {
  --hue: 223;
  --bg: hsl(var(--hue), 10%, 90%);
  --fg: hsl(var(--hue), 10%, 10%);
  /* font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320)); */
}

main {
  padding: 1.5em 0;
}

.ap {
  width: 8em;
  height: 16em;
}

.ap__ring {
  stroke: hsla(var(--hue), 10%, 10%, 0.15);
  transition: stroke 0.3s;
}

.ap__worm1,
.ap__worm2 {
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.ap__worm1 {
  animation-name: worm1;
}

.ap__worm2 {
  animation-name: worm2;
  visibility: hidden;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue), 10%, 10%);
    --fg: hsl(var(--hue), 10%, 90%);
  }

  .ap__ring {
    stroke: hsla(var(--hue), 10%, 90%, 0.1);
  }
}

/* Animtions */
@keyframes worm1 {
  from {
    animation-timing-function: ease-in-out;
    stroke-dashoffset: -87.96;
  }

  20% {
    animation-timing-function: ease-in;
    stroke-dashoffset: 0;
  }

  60% {
    stroke-dashoffset: -791.68;
    visibility: visible;
  }

  60.1%,
  to {
    stroke-dashoffset: -791.68;
    visibility: hidden;
  }
}

@keyframes worm2 {

  from,
  60% {
    stroke-dashoffset: -87.96;
    visibility: hidden;
  }

  60.1% {
    animation-timing-function: cubic-bezier(0, 0, 0.5, 0.75);
    stroke-dashoffset: -87.96;
    visibility: visible;
  }

  77% {
    animation-timing-function: cubic-bezier(0.5, 0.25, 0.5, 0.88);
    stroke-dashoffset: -340;
    visibility: visible;
  }

  to {
    stroke-dashoffset: -669.92;
    visibility: visible;
  }
}

/* ==== end  preloader style  ===== */

/* ======== start scroll-to-top button style  =========== */

#progress {
  position: fixed;
  bottom: 20px;
  right: 10px;
  height: 70px;
  width: 70px;
  display: none;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 999;
}

#progress i {
  color: var(--grey);
  font-size: 20px;
}

#progress-value {
  display: block;
  height: calc(100% - 15px);
  width: calc(100% - 15px);
  border-radius: 50%;
  display: grid;
  background-color: var(--bodyColor);
  place-items: center;
  font-size: 35px;
  color: var(--brand-color);
}

/* ======== end scroll-to-top button style  =========== */

/*================== start navbar section ==================*/

.navbar-toggler,
.navbar-toggler:active,
.navbar-toggler:focus {
  border: none;
}

.header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
  width: 100%;
}

.header .bg-box {
  background-color: #f5f5f596;
  backdrop-filter: blur(8px);
}

/* Page hero band. Bootstrap's .breadcrumb also sets `flex-wrap: wrap`, and the
   heroes add `d-flex flex-column`, so a fixed height made any hero whose content
   ran past 300px wrap into a *second column* instead of growing. That pushed the
   whole stack (h1 included) left of page centre, out of line with the article
   text below. min-height keeps the 300px band; nowrap keeps it one column. */
.breadcrumb {
  min-height: 300px;
  flex-wrap: nowrap;
}

.navbar {
  background-color: rgba(255, 255, 255, 0.678);
  backdrop-filter: blur(8px);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
  width: 100%;
}


.navbar i {
  font-size: 20px;
  color: var(--grey);
}

.navbar>* {
  z-index: 999;
}

.navbar .logo {
  width: 9rem;
}

/* The logo image sits in a shrink-to-fit flex item, so its `width: 100%`
   resolves against a container whose width depends on the image itself — which
   CSS treats as `auto`. The height="98" attribute used to supply the missing
   constraint, giving 150x98. Adding img{height:auto} removed that constraint,
   so the image fell back to its intrinsic 450x294 and the header tripled.
   Pin the size explicitly rather than depend on the attribute. */
.navbar .heading-2 img {
  width: 150px;
  height: auto;
}

.navbar ul li a {
  font-weight: 600;
  color: var(--grey);
  font-family: 'Outfit', sans-serif;
}

.navbar ul li a:hover,
.navbar ul li a.active {
  color: var(--primary-color) !important;
}

.navbar i {
  font-size: 24px;
  color: var(--grey);
  z-index: 999 !important;
}



/*================== End navbar section ==================*/

/*================== start hero section ==================*/
.hero {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}


.hero .heading-hero {
  font-size: 56px;
}


@media (max-width: 991.98px) {
  .hero .heading-hero {
    font-size: 40px;
  }
}

@media (max-width: 720px) {
  .hero .heading-1 {
    font-size: 30px;
  }
}

/*================== end hero section =====================*/

.classes .overlay {
  background-color: var(--box-color);
  border-radius: var(--border-radius);
  width: 100%;
  max-width: 400px;
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 10%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.classes .img {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  z-index: 2;
  width: 100%;
}

.classes .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.classes .img:hover .overlay {
  opacity: 1;
}

.pricing .bg-box {
  min-height: 450px;
}

.testimonials .text {
  position: relative;
  color: var(--white);
  z-index: 2;
}

.testimonials .bg-box {
  position: relative;
  min-height: 400px;
  border-radius: var(--border-radius);
}

.testimonials .text .heading-3 {
  color: var(--bodyColor);
}

.testimonials .text p {
  color: var(--box-color);
}

.testimonials .bg-box::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background-color: var(--dark-primary);
  border-radius: var(--border-radius);
}

.testimonials .text .img {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

.cta .container {
  background: url('./../images/cta/cta.jpg');
  background-size: cover;
  background-position: center;
  min-height: 400px;
  position: relative;
  z-index: 1;
  border-radius: var(--border-radius);
}

.cta .container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(12, 12, 12, 0.5);
  border-radius: var(--border-radius);
}

.cta .container h2 {
  color: var(--white);
  z-index: 9;
}

/*============== Start testimonials section ==========*/

.testimonials i {
  font-size: 20px;
  color: rgb(223, 223, 0);
}

.testimonials .img {
  width: 55px;
  height: 55px;
}

/*============== End testimonials section ==========*/


/*============== start FAQ section ==========*/


.faq .btn {
  padding: 0;
  margin: 0;
  width: 100%;
  background-color: transparent !important;
  border: none !important;
}

.rotate-icon {
  transition: transform 0.3s ease-in-out;
}

.rotate-icon.rotated {
  transform: rotate(180deg);
}

/*============== End FAQ section ==========*/

/*============== Start contact section ==========*/

.contact input,
.contact textarea {
  background-color: var(--box-color);
}

.contact .container {
  background-color: var(--white);
  border-radius: var(--border-radius);
}


.done-msg {
  color: var(--white);
  font-family: 'Outfit', 'sans serif';
}

.toast-success {
  background-color: #0d9700 !important;
  opacity: 1 !important;
}

.toast-error {
  background-color: #8b0500 !important;
  opacity: 1 !important;
}

.toast {
  border-radius: var(--border-radius) !important;
  color: var(--bodyColor) !important;
  font-family: 'Outfit', sans-serif;
  box-shadow: none !important;
}

.contact-map {
  width: 100%;
  height: 300px;
}

/*============== End contact section ==========*/

/*============== start Footer section ==========*/

.footer {
  background-color: var(--dark-primary);
  color: var(--bodyColor);
}

.footer p {
  color: var(--bodyColor);
}

.footer h2 {
  color: var(--bodyColor);
}

.footer-link {
  font-size: 16px;
  color: var(--grey);
  font-family: 'Outfit', sans-serif;
}

.footer a {
  font-size: 16px;
  font-family: 'Outfit', sans-serif;
  color: var(--bodyColor);
}


.copy {
  font-size: 14px;
  color: var(--bodyColor);
}

/*============== End Footer section ==========*/
/*============== start mobile / small-screen refinements ==========

   The template shipped with two breakpoints (990px and 720px) and almost
   everything below them was left at desktop values. These rules cover the
   phone range properly. Breakpoints match Bootstrap's own (991.98 = lg,
   575.98 = sm) so the type scale and the navbar collapse flip together
   instead of two pixels apart.
   ================================================================ */

/* Anchor links (#hero, #services, #faq ...) land under the fixed header
   without this, because the header is out of document flow. */
html {
  scroll-padding-top: 140px;
}

/* Long technical strings — CVE ids, product names, URLs — must not force
   a horizontal scroll. body/html use overflow-x:hidden, which would hide
   the overflow rather than fix it. */
.heading-1,
.heading-2,
.heading-3,
.heading-4,
p,
a {
  overflow-wrap: break-word;
}

@media (max-width: 991.98px) {

  /* The logo is 150x98, so the fixed header stood ~122px tall on a phone —
     roughly a fifth of the screen, permanently, and tall enough to cover the
     top of the page content beneath it. Half height gives the content real
     clearance. Desktop is untouched. */
  .navbar .heading-2 img {
    width: auto;
    height: 48px;
  }

  /* The h3 wrapping the logo carries Bootstrap's .5rem heading margin, which
     is 8px of pure header height on a phone. */
  .navbar .heading-2 {
    margin-bottom: 0;
  }

  /* Translucent white over blurred page content is hard to read on a small
     screen, and it is what makes the expanded menu look broken. Opaque, with
     a hairline to separate it from the page. */
  .navbar {
    background-color: var(--bodyColor);
    border-bottom: 1px solid #e6e6e6;
    backdrop-filter: none;
  }

  /* A tall menu (Learn alone has eight entries) must scroll rather than run
     off the bottom of the screen. */
  .navbar-collapse {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding-bottom: .5rem;
  }

  /* 44px minimum touch targets. */
  .navbar-nav .nav-link {
    padding-top: .65rem;
    padding-bottom: .65rem;
  }

  .navbar .dropdown-menu {
    border: 0;
    box-shadow: none;
    padding-left: 1rem;
    background-color: transparent;
  }

  .btn,
  .btn-outline {
    min-height: 44px;
  }

  /* 12px of container gutter leaves text almost touching the screen edge. */
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 70px of fixed circle over the content is a lot of a phone screen. */
  #progress {
    height: 52px;
    width: 52px;
    bottom: 14px;
    right: 14px;
  }

  #progress-value {
    font-size: 24px;
  }

  html {
    scroll-padding-top: 80px;
  }
}

@media (max-width: 575.98px) {

  /* Trimmed from 36px so a long article title does not eat the screen, but
     kept clearly headline-sized. .heading-2 (24px) and .heading-4 (20px) are
     left alone — article section heads need to stay well clear of body copy. */
  .heading-1 {
    font-size: 32px;
  }

  /* Icons were set *larger* on mobile than on desktop (26px vs 24px). */
  .icon-lg {
    font-size: 36px;
  }

  .icon-md {
    font-size: 26px;
  }

  .icon-sm {
    font-size: 20px;
  }

  /* The hero band sizes itself to its content; 300px of minimum only forces
     empty space on a short heading. */
  .breadcrumb {
    min-height: 220px;
  }

  .section {
    padding-block: 2.5rem;
  }

  /* Stacked full-width cards do not need 6rem of air between sections. */
  .gap-64 {
    gap: 32px;
  }
}

/*============== end mobile / small-screen refinements ========== */