index.css

@font-face {
    font-family: 'Acumin Pro';
    src: url('public/fonts/AcumenPro/fontsfree-net-acumin-pro-extralight-webfont.woff2') format('woff2'),
         url('public/fonts/AcumenPro/fontsfree-net-acumin-pro-extralight-webfont.woff') format('woff'),
         url("public/fonts/AcumenPro/FontsFree-Net-Acumin-Pro-ExtraLight.ttf  ");
    font-weight: thin;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'Acumin Pro';
  src:   url('public/fonts/AcumenPro/acumin-bditpro-webfont.woff2') format('woff2'),
         url('public/fonts/AcumenPro/acumin-bditpro-webfont.woff') format('woff'),
         url('public/fonts/AcumenPro/acumin-bditpro-webfont.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Acumin Pro';
  src: url('public/fonts/AcumenPro/acumin-bdpro-webfont.woff2') format('woff2'),
       url('public/fonts/AcumenPro/acumin-bdpro-webfont.woff') format('woff'),
       url("public/fonts/AcumenPro/acumin-bdpro-webfont.ttf") format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Acumin Pro';
  src: url('public/fonts/AcumenPro/acumin-itpro-webfont.ttf') format('woff2'),
       url('public/fonts/AcumenPro/acumin-itpro-webfont.woff') format('woff'),
       url("public/fonts/AcumenPro/acumin-itpro-webfont.ttf") format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;

}
@font-face {
  font-family: 'Acumin Pro';
  src: url('public/fonts/AcumenPro/acumin-rpro-webfont.woff2') format('woff2'),
       url('public/fonts/AcumenPro/acumin-rpro-webfont.woff') format('woff'),
       url("public/fonts/AcumenPro/acumin-rpro-webfont.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;

}
@font-face {
    font-family: 'Rounded Elegance';
    src: url('public/fonts/rounded_elegance/rounded_elegance-webfont.woff2') format('woff2'),
         url('public/fonts/rounded_elegance-webfont.woff') format('woff'),
         url('public/fonts/Rounded_Elegance.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
  font-display: swap;

} 

@font-face {
  font-family: 'Molde Compressed';
  src: url('public/fonts/molde/molde-compressed-medium-webfont.woff2') format('woff2'),
       url('public/fonts/molde/molde-compressed-medium-webfont.woff') format('woff'),
       url('public/fonts/molde/Molde-Compressed-Medium.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;

}

*{
  text-decoration: none!important;
  list-style-type: none;
}

hr{

  border: 1px solid white!important;
  color: white!important;
  width: 100%;
  
}
#header-navbar a{
  text-transform: uppercase;
}
#header-navbar .nav-link{
  color: var(--Accent-Color)!important;
}
.btn-primary{
  background-color: var(--Accent-Color) !important;
  border-color: var(--Accent-Color)!important;
}


.html{
    margin:  0;
    padding: 0;
    border: 0   ;
    overflow-y: auto!important;
}
.root{
    /* margin: 35px 45px!important; */
    --Title-Font: "Molde Compressed";
    --Logo-Font: 'Rounded Elegance';
    --Body-Font: 'Acumin Pro';
    --Primary-Color: white;
    --Seconday-Color: #6D6E70;
    --Accent-Color: #ED1C24;
    font-family: var(--Body-Font);
    background-color: white;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
  margin-right: 10px;
  margin-block: .2em;

}
::-webkit-scrollbar:hover::after {
  width: 10px;
  margin-right: 10px;

}
::-webkit-scrollbar-track:hover  {
  margin-block: .2em;
  border-radius: 100vw;



}
::-webkit-scrollbar-track:hover {
  margin-block: .2em;
  border-radius: 100vw;
  background: lightgray;




}
::-webkit-scrollbar-thumb:hover {
  background: #ED1C24;
  border-radius: 10px;
  margin-right: 10px;
  margin-block: .2em;

}
            
.title-font{
  font-family: var(--Title-Font)!important;
  font-size:xx-large;
  letter-spacing: 5px;
}
#Products .title-font{
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 51px;

}
.row{
  margin-right: 0!important;
}
.Balance-Pilates__Header{
  height: 100vh;
  align-items: center;
  justify-content : center;


}
.Balance-Pilates__Header-Big-Text {
  align-items: baseline;
  display: flex;
  top: 40%;
  position: relative;
  font-family: var(--Logo-Font);
  justify-content: center;
  font-size: 500% ;
  color: var(--Seconday-Color);
}
.dots{
  color: rgb(255, 0, 0);
  font-size: 9.495192307692308vw;
  letter-spacing: -1.2055455093429777vw;
  margin:  -5.408653846153846vw 0;
  
}


.Balance-Pilates__Header-Big-Text img{
    /* top:81px; 
    margin-top: 54px;
    
    width:  5.412296564195298vw;
    height: 2.3261vw;
    margin-left:  1.8072289156626506vw;  */
    height: 28px;
    margin-left: 29px;

}
.hover-underline-animation {
    display: inline-block;
    position: relative;
  }

.hover-underline-animation:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    top: 70px;
    bottom: 0;
    left: 0;
    background-color: var(--Accent-Color);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

  /*This is modifying the btn-primary colors but you could create your own .btn-something class as well*/
.btn-primary {
  color: var(--Accent-Color);
  background-color: white;
  border-color: var(--Accent-Color); /*set the color you want here*/
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
  color: white;
  background-color: var(--Accent-Color);
  border-color: var(--Accent-Color); /*set the color you want here*/
}
#small-navbar{
  font-family: var(--Title-Font);
  font-size:xx-large;
  font-weight: 900;
  letter-spacing: 2px;
}
#small-navbar .nav-link:active{
  color: var(--Accent-Color);
  background-color: white;
  border-color: var(--Accent-Color); /*set the color you want here*/
}
.navbar {
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    /* identical to box height */
    color: var(--Accent-Color)!important;
    position: absolute;
    justify-content: center;
    top: 60%;
    bottom: 40%;

} 
#small-navbar {
  border-bottom: 1px solid lightgrey;

  /* border:rgba(22, 22, 26, 0.18) solid 1px; */

} 
.navbar li {
  color: var(--Accent-Color);
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 2px;
  justify-self: center;

} 
.navbar ul {
  
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

  /* .container{
  width: 100%;
  margin: 2rem!important;
} */

.carousel-item{
  width: 100%;

  align-items: center;
  justify-content: center;
}

.Products{
  width: 100%; display: flex; flex-direction: column;
/*  margin: 1rem 2rem;
  padding: 6.75rem;
  */
} 
.Products-title{
  margin-top: 3.75rem; /*or 60px*/
  margin-bottom: 0;
  font-style: normal;
  font-weight: 900;
  font-size: 32px;
  line-height: 170.5%;
  /* identical to box height, or 55px */

  text-transform: uppercase;
}
#Products .carousel-control-next{
  top:20%;
  left: 95%;
}
#Products .carousel-control-prev{
  top:20%;

  left: -10%;
}

#Products-carousel .card-image{
  margin:1rem;
  border: 3px solid #ED1C24;
  border-radius: 7px;     display: flex;
  justify-content: center; padding: 20px;
  background:white;
}
#Products-carousel .owl-nav{
  display: none!important;
}
#Products .card-image img{ min-height: 200px;}
.card-title{
  color:#ED1C24;
  font-style: normal;
font-weight: 300;
letter-spacing: 0px;
font-size: 44px;
line-height: 170.5%;
/* or 68px */

text-transform: uppercase;
  font-family: var(--Title-Font);
}

#Products-carousel a{
  font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 170.5%;
/* identical to box height, or 31px */
text-transform: uppercase;
color: #000000;
}
.Products-read-more-arrow{
  display: inline!important;
  width: unset!important;
  margin-left: 11px;
  width: 21.88px!important;
  height: 10.75px;
  margin-bottom: 2px;

}
.card-text{
  line-height: 170.5%;
  font-weight: 500;

}
/* makes it var(--Accent-Color) and round changes top position to add margin */
.carousel-indicators{
  top: 90%!important;

}
.carousel-indicators [data-bs-target] {

  width: 10px!important;
  height: 10px!important;
  margin-top: 1rem!important;
  border-radius: 50%;
  top: 90%!important;
}
.cards-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* this does probably nothing */
#Products .card {
  display: flex;
  flex-direction: row;
  /* box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18); */
  border: none!important; 
  align-items: center;
  border-radius: 0;
}
#Features h1 {
  font-family: var(--Title-Font);
  color: var(--Accent-Color);
  font-style: normal;
  font-weight: 700;
  filter: saturate(.9);
  font-size: 111px;
  line-height: 98%;
  text-transform: uppercase;
}
#Features h2 {
  font-family: var(--Title-Font);
  font-style: normal;
  font-weight: 900;
  font-size: 51px;
  text-transform: uppercase;
  color: var(--Seconday-Color);
}

#Features h3 {
  font-style: normal;
  font-family: var(--Title-Font);
  font-style: normal;
  font-weight: 700;
  font-size: 52px;
  line-height: 52px;
  color: var(--Accent-Color);
  /* text-transform: capitalize; */
}
#Features p{
  
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  /* or 136% */


  color: #4A4A4A;
}
#Features h5 {
 
    font-weight: 900;
    text-transform: uppercase;

  
}
#Features .p_special{
  font-style: normal !important;
  font-weight: 500!important;
  font-size: 22px!important;
  line-height: 30px!important;
  /* or 136% */


  color: #4A4A4A!important;

}



#Instructors-container{
  margin-top: 80px;
  margin-bottom: 97px;
}
#Instructors-container .owl-nav{
  display: none;
}
#Instructors-container h2{
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 51px;
  color: black;
}

#Instructors .card,#recipeCarousel .card{
  overflow: hidden;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
  border-radius: 8px;
  margin: 1rem;
}
  /* #Instructors .card img,#recipeCarousel img{
    clip-path: url("./assets/images/svg/Rectangle 22.svg"); max-height: 350px;
  } */
.instructor-title{
  font-style: normal;
  font-weight: 700;
  font-size: 18.7826px;
  line-height: 23px;
  letter-spacing: 0.105em;
  text-transform: capitalize;
}
#Instructors .carousel-control-prev{
  left: -6%;
}
#Instructors .carousel-control-next{
  right: -6%;
}
.instructor-text{
  font-style: normal;
  font-weight: 700;
  font-size: 15.7143px;
  line-height: 20px;
  /* identical to box height */

  letter-spacing: 0.105em;
  text-transform: uppercase;

  color: #838EA4;
}
.carousel-inner button{
  padding: 1em;
}
.carousel-indicators [data-bs-target],.carousel-control-next, .carousel-control-prev {
  filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);  
}






/* linear-gradient(180deg, rgba(113, 70, 116, .75) 0%, rgba(137, 95, 103, .75) 100%) */

#Testimonials{
  background: url("./assets/images/sunset.jpg");
  background-size: cover;
  position: relative;
  /* height is temporarily set to 750px */
  padding: 2rem 0;
  line-height: 30px;
  color: white!important;
  }
#Testimonials:after{ content: ''; position: absolute; left: 0; 
top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 0;}
#Testimonials .carousel-caption{
  position: relative!important;
  left:0%;
}

.owl-dots:active span{
  color: var(--Accent-Color)!important;
  background: var(--Accent-Color)!important;
}


#Testimonials .circlify {
  position: relative !important;
  width: 128px;
  
  transform-origin: 50% top;
  margin: 1rem;
  border: thick solid rgb(255, 255, 255); 
  border-radius: 50%;
}

#Testimonials .h5{


  display: block!important;
  margin-top: 20%!important;
  padding-top: 40%!important;
  color: white!important;

}

.Testimonials p{


  color: white!important;
  line-height: 30px!important;

}
.Testimonials h6{
  color: white!important;
}
/* #Testimonials .carousel-item:active{
  margin: 0!important;
  display: flex!important;
  flex-direction: column!important;
  text-align: center!important;
  
} */
/* 
sticky footer
#footer{
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
} */
.footer {
  background-color: rgb(45, 45, 45);
  color: white!important;
  
  /* width: 100%; */
}
.footer strong{
  color: white!important;
}
.footer p{
  color: white!important;

}
.footer h5{
  color: white!important;
  text-transform: uppercase;

}
.footer form{
  color: white!important;
  /* line-height: 2rem; */
}
.footer label{
  color: white!important;

}

#footer .dots{
  margin-left: 13px;
  height: 8px;
  width: 33.3px;
}


#footer .container{
  padding-top: 70px;
}

.footer-navbar a{
  font-family: var(--Title-Font)!important;
  text-transform: capitalize;
  text-decoration: none!important;
  color: white!important;
}
#footer-navbar-id .navbar{
  top:-265.178571%;
  left: 30%;
}
.footer-navbar-para {

  color: rgb(255, 255, 255);
  text-align: center;
}
.footer-logo{
  justify-content: center;
}
#footer-cta-id {
    justify-content: center;
    display: flex;
    align-content: center;
    flex-direction: column;
    padding: .5rem;
    align-items: center;
    margin-bottom: 2rem;
}
#footer-cta-id input{
  width: 100%;
  height: 50px;
  background: #999;
  color: white;
  border: none;
  padding-left: 15px;
  border-radius: 30px;
}
#footer-cta-id button{
  border-radius: 50%;
  border: none;
}
#footer-cta-id .socials{
  border-radius: 50%;
  flex-direction: row;
  width: 50px;
  margin: 10px 2px;
}
#footer-cta-id .facebook{
  margin-top: 1.2rem;
  margin-top: 1.2rem;
  margin-right: 2rem;
}
#footer-cta-id .instagram{
  margin:1.2rem 0;

}


#footer h5{
  color: white !important;
}
#footer-links .navbar li{
  font-weight: 900;
}
.footer-end{
  width: 100%;
  padding: 1rem 0;
}
img.footer-cta{
  height: 20px;
}
#footer-middle-links .title-font a{
  font-family: var(--Title-Font)!important;
  font-size: small!important;
}

.searchBtn{ position: relative;display: block;}
.searchBtn input[type=email]{ width: 100%;padding-left: 1rem; color: white !important;}

.searchBtn button{ position: absolute; right: 0; top: 0;height: 50px;width: 50px;}
@media (min-width: 768px) {
  #recipeCarousel .card img {
    height: 25rem;
  }

}
@media screen and (max-width:990px){
#Testimonials{
  overflow: hidden;
  padding: 2rem;
  
}
.Balance-Pilates__Header-Big-Text {
  font-size: 4.8076923076923075vw ;
}
.Balance-Pilates__Header-Big-Text img{
  width: 6vw;
  height: auto;
  margin-left: 9px;
}
/* .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  max-width: 1592px!important;
} */

}
/* .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  max-width: 100%!important;
} */

/* changes navbar to be visible on mobile and displays it in a col */
/* .navbar-expand-lg .navbar-collapse {
  display: flex!important;
  flex-basis: auto;
  justify-content: center;
} */