/*--------------------------------------------------------------
# Global
--------------------------------------------------------------*/

/* FONT */

@font-face {
  font-family: emilio;
  src: url(../../fonts/emilio\ 20.ttf);
}

@font-face {
  font-family: Montserrat-Light;
  src: url(../../fonts/Montserrat-Light.ttf);
}

@font-face {
  font-family: Montserrat-SemiBold;
  src: url(../../fonts/Montserrat-SemiBold.ttf);
}

@font-face {
  font-family: Montserrat-Bold;
  src: url(../../fonts/Montserrat-Bold.ttf);
}

@font-face {
  font-family: raleway;
  src: url(../../fonts/Raleway-Regular.ttf);
}

@font-face {
  font-family: opilio;
  src: url(../../fonts/opilio.ttf);
}

@font-face {
  font-family: opilioboldital;
  src: url(../../fonts/opilioboldital.ttf);
}

@font-face {
  font-family: Lunatica;
  src: url(../../fonts/Lunatica.ttf);
}

@font-face {
  font-family: teko;
  src: url(../../fonts/Teko/Teko-VariableFont_wght.ttf);
}


.btn {
  padding: 5px 15px 5px 15px !important;
  border-radius: 20px !important;
}

/* Custom default button */
.btn-light,
.btn-light:hover,
.btn-light:focus {
  color: #333;
  text-shadow: none;
  /* Prevent inheritance from `body` */
}


.offcanvas-action {
  min-height: 60%;
}

/* .bg-primary{

  background-color:#c23f3b!important;

}

.border-primary
{
  color:#c23f3b!important;
} */

/*--------------------------------------------------------------
# Base Structure
--------------------------------------------------------------*/

body {
  /* text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); */
  /* box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); */
  font-family: raleway !important;
  width: 100vw;
  /* 100% of the viewport width */
  /* height: 100vh; */
}

.cover-container {
  max-width: 42em;
}

h1,h2,h3,h4,h5 {
  margin: auto;
  font-family: raleway !important;
}


a {
  text-decoration: none !important;
  color:#000 !important;
}

.offcanvas-custom{
  width:600px !important;
}

.offcanvas{
  transition: all 0.3s ease !important;
}



.card-hover{
  transition: all 0.2s ease;
    cursor: pointer;
}

.card-hover:hover{
  box-shadow: 3px 4px 4px 2px #e9ecef;
  transform: scale(1.01);
}

.success-animation { margin:50px auto;}



.checkmark {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #4bb71b;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #4bb71b;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  position:relative;
  top: 5px;
  right: 5px;
 margin: 0 auto;
}
.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #4bb71b;
  fill: #ffffff;

  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;

}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
      stroke-dashoffset: 0;
  }
}

@keyframes scale {
  0%, 100% {
      transform: none;
  }

  50% {
      transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
      box-shadow: inset 0px 0px 0px 30px #4bb71b;
  }
}




.cross__svg {
  border-radius: 50%;
  display: block;
  height: 154px;
  margin: 4rem auto;
  stroke-width: 3;
  width: 154px;
}
.cross__circle {
  animation: 0.6s ease 0s normal forwards 1 running stroke;
  fill: none;
  margin: 0 auto;
  stroke: #e55454;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
}
.cross__path {
  stroke: #e55454;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  transform-origin: 50% 50% 0;
}
.cross__path--right {
  animation: 0.3s ease 0.8s normal forwards 1 running stroke;
}
.cross__path--left {
  animation: 1s ease 0.8s normal forwards 1 running stroke;
}
@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
 }
}





.modal-dialog{
  min-width:60%;
}

.note-noneditable p {
  margin-bottom: 5px;
  text-overflow: ellipsis;
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.navbar-nav {
  font-size: 0.95rem;
}

.navbar-collapse {
  transition: all .5s !important;
}



.navbar-collapse.show, .navbar-collapse.collapsing {
  text-align: center;
  font-size: 1.5rem;
}

.navbar-custom {
  display: inline-flex !important;
  height: auto;
}

.nav-custom {
  background-color: rgba(254,253,251,0.85);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

.custom-profile-nav {
  width: 280px;
  left: -170px !important;
  height: auto;
  font-size: 1.1rem;
}



.nav-link:hover {
  transition: 0.3s;
  color: #CE5A67 !important;
}



/*----------------------Landing Page ---------------------------*/
.section-1 {
  height:100vh;
  position: relative;
}

.section-1-caption {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: center;
  background-color: rgba(0,0,0,.3);
}

.section-1-gradient {
  background-image: linear-gradient(to right, rgba(61,64,95,0), rgba(61,64,95,0.25), rgba(61,64,95,0.50), rgba(61,64,95,0.85));
  z-index: 1;
}

.section-1-title {
  width: 70%;
  font-size: 4rem;
}

.section-1-title-cover {
  top: 50%!important;
  width: 50%!important;
  padding-right: 3rem!important;
  transform: translateY(-50%)!important;
}

.section-1-title {
  margin-left: auto;
  margin-right: auto;
}

.section-1-word2{
  letter-spacing: 4.6px;
  margin-right: 4px;
}

.section-1-word4{
  letter-spacing: 7.3px;
  margin-right: 4px;
}

.main-color {
  background-color:#CE5A67 !important;
}

.main-text-color{
  color: #CE5A67;
}

.main-divider {
  border-width: medium;
  border-color: #CE5A67;
}


.section-2 {
  padding: 3rem!important;
}

.section-2-card-img {
  height:35vh;
}


.section-3 {
  background-color: #fff;
  height: 55vh;
}

.section-3-word{
  padding-left: 3rem!important;
  padding-right: 3rem!important;
}

.section-3-img > img {
  object-position: top;
  margin-left: 3rem!important;
}

.section-4 {
  height: 100%;
  padding: 3rem!important;
}

.section-4-sub {
  height: 60vh;
  background-color: #FCF5ED;
}

.section-4-carousel-img {
  height: 100%!important;
}

.section-4-carousel-info {
  height: 100%!important;
  padding: 3rem!important;
}

.section-4-carousel-info > h1 {
  font-size:2.8rem;
  margin-left: 1rem!important;
}

.custom-carousel-indicator{
  width: 6% !important;
  height: 7px !important;
  background-color: #ffc107;
}

.carousel-item{
  transition: -webkit-transform .6s ease !important;
  transition: transform .6s ease !important;
  transition: transform .6s ease,-webkit-transform .6s ease !important;
} 

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 3;
}

.section-header {
  height: 33vh;
}

.section-header-gradient {
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1;
}

.card-img-overlay-gradient {
  background-image: linear-gradient(to bottom, rgba(61,64,95,0), rgba(61,64,95,0.15), rgba(61,64,95,0.35), rgba(61,64,95,0.75));
}

.trainer-main-section {
  height:auto; 
  background-color:#FCF5ED;
}

.trainer-main-intro {
  padding-left: 2rem !important;
}

.coach-img {
  width: 85%;
}

.course-img {
  height: 25vh;
}

.location-hover:hover{
  transition: 0.3s;
  color: #cfb46f !important;
}

.footer-a-hover:hover{
  transition: 0.3s;
  color: #cfb46f !important;
}


.bg-primary-mid {
  background-color: #5fc4f3 !important;
}

.bg-primary-light {
  background-color: #E6F0FE !important;
}


.modified-accordion .card-header{ position: relative;}
.modified-accordion .card-header:after{ content: ''; position: absolute; width: 100%; 
 height: 100%; left: 0; top: 0;}
.modified-accordion .collapse:not(.show){ display: block;}


.step-4-th{
  width:14.2%
}


.carousel-indicators.carousel-indicators-2 {
  position: absolute;
  right: 0;
  top :0;
  bottom: unset !important;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-right: 15%;
  margin-bottom: 1rem;
  margin-left: 15%;
}


.fade-anim {
  animation: fadeIn 5s;
  -webkit-animation: fadeIn 5s;
  -moz-animation: fadeIn 5s;
  -o-animation: fadeIn 5s;
  -ms-animation: fadeIn 5s;
}





.rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
}

.rating>input {
  display: none
}

.rating>label {
  position: relative;
  width: 1em;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 30px;
  font-weight: 300;
  color: #FFD600;
  cursor: pointer
}

.rating>label::before {
  content: "\2605";
  position: absolute;
  opacity: 0
}

.rating>label:hover:before,
.rating>label:hover~label:before {
  opacity: 1 !important
}

.rating>input:checked~label:before {
  opacity: 1
}

.rating:hover>input:checked~label:before {
  opacity: 0.4
}



@media only screen and (max-width: 1199px) {

  .custom-collapse-nav {
    width: auto;
    left: 0px !important;
    height: auto !important;
    border-width: 0px !important;
    background-color: rgba(0, 0, 0, 0) !important;
    text-align: center !important;
    font-size: 1.3rem !important;
    min-height: auto!important;
  }
  
  .custom-collapse-nav > li {
    padding: 0.25rem !important;
  }

  .custom-profile-nav {
    width: auto;
    left: 0px !important;
    height: auto !important;
    border-width: 0px !important;
    background-color: rgba(0, 0, 0, 0) !important;
    text-align: center !important;
    font-size: 1.3rem !important;
  }

  .custom-profile-nav-btn {
    font-size: 1.3rem !important;
  }

  .custom-profile-nav-btn-2 {
    margin-bottom: 100px;
  }
  
  .custom-profile-nav > li {
    padding: 0.25rem !important;
  }

  .navbar-collapse {
    position: relative !important;
    overflow-x: auto;
    height: 100vh;
  }
  .navbar-collapse ul {
    margin-top: 1.5rem;
    min-height: 45vh;
  }

  .navbar-custom {
    display: inline-flex !important;
    margin-top: 50px;
    padding: 0rem 1.8rem 1.8rem 1.8rem;
    min-height: 55vh;
  }
  
  .navbar-custom > a {
    display: block;
    margin: 1rem !important;
    font-size: 1.3rem;
    margin-top: 1.5rem !important;
  }
}



@media only screen and (max-width: 991px){


  .section-1 {
    height:98vh;
    position: relative;
  }
  
  

  .section-1-gradient {
    background-image: linear-gradient(to bottom, rgba(61,64,95,0), rgba(61,64,95,0.25), rgba(61,64,95,0.50), rgba(61,64,95,0.85));
    z-index: 1;
  }

  .section-1-title {
    font-size: 2.5rem;
    width: 100%;
  }

  .section-1-subtitle{
    font-size: 0.8rem;
  }

  .section-1-title-cover {
    width: 100%!important;
    padding-right: 1rem!important;
    transform: none;
    top: 60%!important;
  }

  .section-1-word2{
    letter-spacing: 5px;
    margin-right: 4.5px;
    font-size: 2.47rem;
  }
  
  .section-1-word4{
    letter-spacing: 7.6px;
    margin-right: 5px;
    font-size: 2.47rem;
  }


  .section-3 {
    background-color: #FCF5ED;
    height: 100%;
  }


  .section-4-sub {
    height: 48vh;
    background-color: #FCF5ED;
  }

  .section-4-carousel-info > h1 {
    font-size:1.5rem;
    margin-left: 1rem!important;
  }

}


@media only screen and (max-width: 768px) {

  .offcanvas-custom{
    width:100% !important;
  }

  .navbar-custom {
    display: block !important;
  }

  .header-login-btn {
    margin-top: 30px !important;
  }

  .custom-collapse-nav {
    width: auto;
    left: 0px !important;
    height: auto !important;
    border-width: 0px !important;
    background-color: rgba(0, 0, 0, 0) !important;
    text-align: center !important;
    font-size: 1.3rem !important;
    min-height: auto!important;
  }
  
  .custom-collapse-nav > li {
    padding: 0.25rem !important;
  }

  .custom-profile-nav {
    width: auto;
    left: 0px !important;
    height: auto !important;
    border-width: 0px !important;
    background-color: rgba(0, 0, 0, 0) !important;
    text-align: center !important;
    font-size: 1.3rem !important;
  }

  .custom-profile-nav-btn {
    font-size: 1.3rem !important;
  }

  .custom-profile-nav-btn-2 {
    margin-bottom: 100px;
  }
  
  .custom-profile-nav > li {
    padding: 0.25rem !important;
  }

  .navbar-collapse {
    position: relative !important;
    overflow-x: auto;
    height: 100vh;
  }
  .navbar-collapse ul {
    margin-top: 1.5rem;
    min-height: 45vh;
  }

  .navbar-custom {
    margin-top: 50px;
    padding: 0rem 1.8rem 1.8rem 1.8rem;
    min-height: 42vh;
  }
  
  .navbar-custom > a {
    display: block;
    margin: 1rem !important;
    font-size: 1.3rem;
    margin-top: 1.5rem !important;
  }

  
  .section-1-title-cover {
    width: 100%!important;
    padding-right: 1rem!important;
    transform: none;
    top: 75%!important;
  }

  .section-2 {
    padding: 3rem 0rem 3rem 0rem !important;
  }

  .section-2-card-img {
    height:25vh;
  }

  .section-3 {
    background-color: #FCF5ED;
    height: auto;
  }

  .section-3-word{
    padding: 3rem 0rem 1rem 0rem !important;
  }

  .section-3-img{
    margin-bottom: 3rem !important;
  }

  .section-3-img > img {
    object-position: top;
    width: 100% !important;
    margin-left: 0rem!important;
  }

  .section-4 {
    height: 100%;
    padding: 3rem 0rem 3rem 0rem !important;
  }

  .section-4-sub {
    height: 65vh !important;
    background-color: #FCF5ED !important;
  }

  .section-4-carousel-img {
    height: 35%!important;
  }

  .section-4-carousel-info {
    height: 100%!important;
    padding: 2rem 0.6rem 2rem 0.6rem !important;
  }

  .section-4-carousel-info > h1 {
    font-size:1.8rem !important;
    margin-left: 0.6rem!important;
  }

  .trainer-main-section {
    height:auto; 
    background-color:#FCF5ED;
  }
  
  .trainer-main-intro {
    padding-left: 1rem !important;
  }
  
  .coach-img {
    width: 100%;
  }

  .course-img {
    height: 25vh;
  }

  .modified-accordion .collapse:not(.show){ display: none;}
  .modified-accordion .card-header:after{ display: none;}

  .step-4-th{
    width: auto !important;
  }  

}