@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&display=swap');
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

body{
  font-family: "Raleway", system-ui;
    color: #444444;
}

a{
    text-decoration: none;
    color: #49b5e7;
}

a:hover{
    color: #76c7ed;
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto Slab", system-ui;
}


.roboto-slab-uniq1 {
  font-family: "Roboto Slab", serif !important;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}


/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
    padding: 50px 0;
    overflow: hidden;
    display:block;
  }
  
  .section-title {
    text-align: center;
    padding-bottom: 30px;
  }
  .section-title h2 {
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 0;
    color: #0f394c;
  }
  .section-title h3 {
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 0;
    color: #0f394c;
  }
  .section-title p {
    margin-bottom: 0;
  }

  @media (max-width: 768px) {
    h1 {
        font-size: 26px;
        line-height: 34px;
      }
    h2 {
        font-size: 20px;
        line-height: 28px;
      }
    p {
        font-size: 13px;
        line-height: 20px;
      }
      h3 {
        font-size: 18px;
        line-height: 24px;
        
    }

  }

/*--------------------------------------------------------------
# HEADER
--------------------------------------------------------------*/
.main_h {
  position: fixed;
  top: 0px;
  max-height: 90px;
  z-index: 999;
  width: 100%;
  padding-top: 17px;
  background: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
  top: -100px;
  padding-bottom: 6px;
  font-family: "Montserrat", sans-serif;
}
@media only screen and (max-width: 766px) {
  .main_h {
    padding-top: 25px;
    overflow: hidden;
  }
}

.open-nav {
  max-height: 400px !important;
}
.open-nav .mobile-toggle {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.sticky {
  background-color: rgba(255, 255, 255, 0.93);
  opacity: 1;
  top: 0px;
  border-bottom: 1px solid gainsboro;
}
.row_h{
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  position: relative;
  padding: 0 2%;
}

.logo {
  width: 50px;
  font-size: 25px;
  color: #8f8f8f;
  text-transform: uppercase;
  float: left;
  display: block;
  margin-top: 0;
  line-height: 1;
  margin-bottom: 10px;
}
@media only screen and (max-width: 766px) {
  .logo {
    float: none;
  }
}

.main_h nav {
  float: right;
  width: 80%;
}
@media only screen and (max-width: 766px) {
  .main_h nav {
    width: 100%;
    
  }
}

.main_h nav ul {
  list-style: none;
  overflow: hidden;
  text-align: right;
  float: right;
}
@media only screen and (max-width: 766px) {
  .main_h nav ul {
    padding-top: 10px;
    margin-bottom: 22px;
    float: left;
    text-align: center;
    width: 100%;
  }
}
.main_h nav ul li {
  display: inline-block;
  margin-left: 35px;
  line-height: 1.5;
}
.main_h nav .dropdown ul{
  float:left;
  text-align: center;
}
.main_h nav .dropdown ul li{
  margin-left:0px;
}
.dropdown{
  text-align: center;
}
.dropdown a{
  color:#888888;
}
@media only screen and (max-width: 766px) {
  .main_h nav ul li {
    width: 100%;
    padding: 7px 0;
    margin: 0;
  }
}
.main_h nav ul a {
  color: #888888;
  text-transform: uppercase;
  font-size: 12px;
}

.mobile-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 22px;
  top: 0;
  width: 30px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}
@media only screen and (max-width: 766px) {
  .mobile-toggle {
    display: block;
  }
}
.mobile-toggle span {
  width: 30px;
  height: 4px;
  margin-bottom: 6px;
  border-radius: 1000px;
  background: #8f8f8f;
  display: block;
}

.mouse {
  display: block;
  margin: 0 auto;
  width: 26px;
  height: 46px;
  border-radius: 13px;
  border: 2px solid #e8f380;
  position: absolute;
  bottom: 40px;
  position: absolute;
  left: 50%;
  margin-left: -26px;
}
.mouse span {
  display: block;
  margin: 6px auto;
  width: 2px;
  height: 2px;
  border-radius: 4px;
  background: #e8f380;
  border: 1px solid transparent;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
  animation-name: scroll;
}

@-webkit-keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}


  
/*--------------------------------------------------------------
# Section0 
--------------------------------------------------------------*/

.section0 {
  position:relative;
  display: flex;
  width:100%;
  height: 100vh;
}

.section0 .container{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  overflow: hidden;
  text-transform: uppercase;
  color:#ffffff;
  font-weight: 700;
}

.section0 .learn_more{
  position:absolute;
  bottom:0%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  text-align:center;
  text-transform: uppercase;
  color:#ffffff;
  font-weight: 700;

}
.section0 .learn_more .learn-more-text{
  text-transform: uppercase;
  --bs-text-opacity: 1;
  color: #ffffff !important; 
}
.section0 .learn_more i{
  color:#fff;
  font-size:32px;
}
.section0 h1 {
  font-size: 4rem;
  letter-spacing: 0.2em;
  line-height:4.5rem;
  margin-top:0px;
}
.section0 h3{
  margin-top: 15px;
  color: rgb(194, 190, 190);
  font-size: 2rem;
  letter-spacing: 0.2em;

}
@media (max-width: 1080px){
  .section0 h1{
    font-size: 2.0rem;
    line-height: 2.2rem;
  }
  .section0 h3{
    font-size: 0.75rem;
    line-height: 1.5rem;
  }
}

@media(max-width: 580px){
  .section0 h1{
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
  .section0 h3{
    font-size: 0.7rem;
    line-height: 0.9rem;
  }
}

/*--------------------------------------------------------------
# Section1 
--------------------------------------------------------------*/

.section1 {
  width: 100%;
  min-height: 40vh;
  background: #f9f3f3;
}
.section1 h2 {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 2.5rem;
  color: #0f394c;
  text-transform: uppercase;
  padding-left:2rem;
  text-align: justify;
  text-justify: inter-word;
  padding-left:30px;
}
@media only screen  { 
  .section1 h2{
    padding-left:0px;
  }
  ul{
    padding-left:0px;
  }
}
.section1 h3 {
  color: #1c698c;
  margin: 10px 0 0 0;
  font-size: 1.625rem;
}
.section1 p {
  color: #000000;
  margin: 5px 0 0 0;
  font-size: 1.375rem;
}
.section1 .btn-get-started {
  font-family: "Roboto Slab", system-ui;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 3px;
  transition: 0.5s;
  margin-top: 25px;
  color: #ffffff;
  background: #652245;
  text-transform: uppercase;
}
.section1 .btn-get-started:hover {
  background: #f0c0cc;
}
@media (max-width: 991px) {
  .section1 {
    min-height: 80vh;
    text-align: center;
  }
  /*
  .section1 .section1-img img {
    width: 70%;
  }
  */
}
@media (max-width: 768px) {
  .section1 h2 {
    font-size: 16px;
    line-height: 22px;
  }
  .section1 h3 {
    font-size: 18px;
    line-height: 24px;
  }
  .section1 p {
      font-size: 14px;
      line-height: 20px;
    }
  /*
  .section1 .section1-img img {
    width: 80%;
  }
  */
}

.section1 .container-fluid{
  position: relative;
  min-height: 30vh;
  margin-top: 36px;
}
.section1 .halfwidth-desktop-image{
  /*background: url(../assets/img/section1_halfwidth.jpg) center center no-repeat;
  position: relative;
  min-height: 25rem;
  background-size: cover;*/
  
}
@media (min-width: 768px) {
  .section1 .halfwidth-desktop-image{
    position: absolute;

  }
  
}
.section2 ul, .section1 ul {
  list-style: none;
}

.section2 ul li.check_arrow::before,.section1 ul li.check_arrow::before {
  content: '✓';
  padding-right:5px;
  color: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);
}
.check_arrow{
  
}

.section1 button.with_arrow {
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s;
  padding: 10px 20px;
  color:#000;
  
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  font-size: 15px;
  background: #218a80;
}

.section1 button.with_arrow:hover {
  background: rgba(38,138,128,0.65);
}

.section1 button.with_arrow > svg {
  width: 34px;
  margin-left: 10px;
  transition: transform 0.3s ease-in-out;
}

.section1 button.with_arrow:hover svg {
  transform: translateX(5px);
}

.section1 button.with_arrow:active {
  transform: scale(0.95);
}


  /*--------------------------------------------------------------
# section4
--------------------------------------------------------------*/
.section4 {
  position: relative;
}

.section4 .title {
  position: relative;
  color: #0f394c;
  margin-bottom: 40px;
}

.section4 .counters span {
  font-size: 44px;
  font-weight: 700;
  display: block;
  color: #652245;
}
.section4 .counters p {
  padding: 0;
  margin: 0 0 20px 0;
  font-size: 15px;
  color: #444444;
}
@media (min-width: 1200px) {
  .section4 {
    background-attachment: fixed;
  }
}
/*
@media (max-width: 580px) {
  .section4 .title h3{
      font-size: 22px;
      line-height: 28px;
  }
}
*/


html {
	scroll-behavior: smooth;
}
      section{
    padding: 60px 0px 60px; 
    width:100%;
    }
body{
    font-family: "Raleway", system-ui;
    color: #444444;
    }
h1, h2, h3, h4, h5, h6{
    font-family: "Roboto Slab", system-ui;
    }

  @media (min-width: 1600px){
    .n0-section0 .container{
      left:70%;
    }
    .n0-section0 h1 {
      font-size:5rem;
      text-align: center;
    }
  }
@media (min-width: 1260px) and (max-width:1600px){
  .n0-section0 .container{
    left:70%;
    max-width: 800px;
  }
}
.n0-section0{
    background-color: rgba(0,0,0,0.2);
    position: relative;
    display:flex;
    }
.n0-section0::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url("../images/health_hero_bg.jpg")  center scroll no-repeat;
    background-position: center center;
    background-size: cover;
    z-index:-1; 
    }
.n0-section0 .learn_more i{
    color:#ffffff;
    font-size:2rem;
    }
.n0-section0 .learn_more .learn-more-text{
    color:#ffffff !important;
    font-weight:700;
    font-size:1rem; 
    }
.n0-section0 h1{
    font-size:3rem;
    line-height:4.5rem;
    color:#ffffff;
    font-weight:600;
    margin-top: 0rem;
    margin-bottom: 0rem;

    }
.n0-section0 h3{
    margin-top: 1.25rem;
    margin-bottom: 0rem;
    color:#000000;
    font-size:0.825rem;
    font-weight:400;
    }
.n0-section0 p.learn-more-text{
    margin-bottom: 0px;
}
.section2_bg_color{
    /*background-color: #FFF8F1;*/
    background-color: rgba(0,0,0,0.5);
    position: relative;
    display:flex;
}
.section2_bg_color:after{
    /*background-color: #FFF8F1;*/
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url("../images/sect2_bg.jpg")  center scroll no-repeat;
    background-position: center center;
    background-size: cover;
    z-index:-1; 
}
.icons-sect1{
    width:100px;
    height:100px;
}

.section3_bg_color{
    /*background-color: #FFF8F1;*/
    background-color: rgba(0,0,0,0.5);
    position: relative;
    display:flex;
}
.section3_bg_color:after{
    /*background-color: #FFF8F1;*/
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url("../images/sect3_bg.jpg")  center fixed no-repeat;
    background-position: center center;
    background-size: cover;
    z-index:-1; 
}
.format_text_sect3{
  font-size: 20px;
  color:black;
  font-weight: 400;
  position:relative;
}
.circles_sect3{
  position:absolute;
  background: #e0be9a;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  color: #000000;
  font-weight: bold;
  line-height: 80px;
  width: 80px;
  font-size:24px;
  left:0;
  right:0;
  margin:auto;
  top: 0%;
  transform: translateY(-50%);
}
.mt-10{
  margin-top:6rem !important;
}
.section4_bg_color{
    /*background-color: #FFF8F1;*/
    background-color: rgba(0,0,0,0.3);
    position: relative;
    display:flex;
}
.section4_bg_color:after{
    /*background-color: #FFF8F1;*/
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url("../images/sect4_bg.jpg")  center scroll no-repeat;
    background-position: 50% 0%;
    background-size: cover;
    z-index:-1; 
}

#section4 .row{
  padding-top:280px;
}
.format_text_sect4 span{
  font-weight: 700;
}

.section5_bg_color{
  background-color: #E6CAAC;
  display: flex;
}
#section5 .container{
  background-color: #ffffff;
}
.img_manager{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 2em;
}
#section5 h3{
  font-size:25px;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 22px;

}

#section5 p{
  font-size:20px;
  font-weight: 400;
  text-align: justify;
  text-justify: inter-word;
}
/*
#section6 label{
  display: inline-block;
  line-height: 1;
  margin-bottom:9px;
  padding: 0 20px 0 17px;
  word-break: break-word;
  font-size:14px;
}
#section6 label:focus{
  display: inline-block;
  line-height: 1;
  margin-bottom:9px;
  padding: 0 20px 0 17px;
  word-break: break-word;
  font-size:14px;
}*/
#section6 i{
  padding:10px;
}
#section6 a {
  text-decoration: none !important;
  color:#000000;
}
#section6 p{
  font-size:16px;
}
.btn-send{
  color: #fff;
  background-color: #5264AE;
  border-color: #5264AE;
}
.btn-send:hover{
  color: #5264AE;
  background-color: #fff;
}
.forms_row{
  width:300px;
}
.group 			  { 
  position:relative;
  display: inline-block;
  margin-bottom:25px;
}
input 				{
  font-size:16px;
  padding:10px 10px 10px 5px;
  display:inline-block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input.v1{
  width:145px;
}
input.question{
  height:300px;
  width: 300px;
  word-break: break-word;
}
input:focus 		{ outline:none; }

/* LABEL ======================================= */
label 				 {
  color:#999; 
  font-size:16px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:300px; }
.bar1 	{ width:145px; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
  z-index:9999; 
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight1 {
  width:145px; 
}

.highlight {
  position:absolute;
  height:60%; 
  width:300px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
/* END OF forms style ...*/

@media screen and (max-width: 991px){
.n0-section0 h1{
    font-size: 2rem;
    line-height: 2.4rem;
    }
.n0-section0 h3{
    font-size: 0.7rem;
    line-height: 1.2rem;
    }

}
@media screen and (max-width: 580px){
.n0-section0{
  background-color: rgba(255,255,255,0.1);
}
.n0-section0 h1{
    color:black;
    font-size: 1.3rem;
    line-height: 1.6rem;
    }
.n0-section0 h3{
    font-size: 0.65rem;
    line-height: 1rem;
    }
.n0-section0 .learn-more-text{
    font-size:0.75rem;
}

}
@media screen and (max-width:640px) and (orientation:portrait){
  .n0-section0::after{
        background: url("../images/health_hero_bg_mobile.jpg")  center scroll no-repeat;
      }
  #section0 .learn-more-text{
    font-size:0.75rem;
  }
  #section4 .row{
    padding-top:200px;
  }
  #section4 .mt-10{
    margin-top:3rem !important;
  }
  #section5 h3{
    font-size:20px;
    text-align: center;
  }
  #section5 p{
    font-size:13px;
  }
}

@media screen and (max-width: 920px) and (orientation:landscape){
  #section5 h3{
    font-size:20px;
    text-align: center;
  }
  #section5 p{
    font-size:13px;
  }
}
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/*........................
Loading circle
........................*/


.lds-hourglass,
.lds-hourglass:after {
  box-sizing: border-box;
}
.lds-hourglass {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-hourglass:after {
  content: " ";
  display: block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 8px;
  box-sizing: border-box;
  border: 32px solid currentColor;
  border-color: currentColor transparent currentColor transparent;
  animation: lds-hourglass 1.2s infinite;
}
@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(1800deg);
  }
}

/*......................
Gradient borders
......................*/

.gradient-border {
  --border-width: 2px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5rem;
  text-transform: uppercase;
  color: white;
  background: #222;
  border-radius: 10px;
}
.gradient-border::after {
  position: absolute;
  content: "";
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  z-index: 2;
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  background: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);
  background-size: 300% 300%;
  background-position: 0 50%;
  border-radius: 10px;
  animation: moveGradient 4s alternate infinite;
}
.gradient-border > *,img{
  width:calc(100% - 1px);
  height:calc(100% - 1px);
  display:block;
  border-radius: 10px;
  z-index: 99;
  
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}

.box {

  display: grid;
  place-content: center;
  color: white;
  text-shadow: 0 1px 0 #000;
  --border-angle: 0turn;
  --main-bg: conic-gradient(
      from var(--border-angle),
      #213,
      #112 5%,
      #112 60%,
      #213 95%
    );
  border: solid 5px transparent;
  border-radius: 2em;
  --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);
  background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
  background-position: center center;
  -webkit-animation: bg-spin 3s linear infinite;
          animation: bg-spin 3s linear infinite;
}
@-webkit-keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
.box:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}



/*.............................................................
...........................Gallery in circle...................
.............................................................*/

.gallery_circle {
  --d: 100vmin;
  --f: .2;
  --ty: calc(.5rem + var(--d));
  --tx: calc(50vmin - .5*var(--f)*var(--d));
  --oy: 1rem;
  display: flex;
  overflow-x: hidden;
  flex-direction: column;
  min-width: .75rem;
  min-height: 60vh;
  background: gainsboro;
  font-size: .75rem;
  min-width: 0;
}
@media screen and (max-width: 559px) and (min-height:461px){
  .gallery_circle{
    height:950px;
  }
}
@media screen and (max-width: 461px) and (min-height:413px){
  .gallery_circle{
    height:850px;
  }
}
@media screen and (max-width: 412px) and (min-height:326px){
  .gallery_circle{
    height:750px;
  }
}
@media screen and (max-height:325px){
  .gallery_circle{
    height:620px;
  }
}

@media (min-width: 23rem) and (min-height: 23em) {
  .gallery_circle {
    --d: 22.5rem;
    --ty: calc(2*var(--tx) + 1rem);
    font-size: 4vmin;
  }
}
@media (min-width: 35rem) and (min-height: 35em) {
  .gallery_circle {
    --tx: calc((0.70711 + .5*var(--f))*var(--d));
    --ty: 0;
    --oy: calc(var(--tx) - .5*(1 - var(--f))*var(--d) + 1rem);
    font-size: 1.5rem;
  }
}



.gallery_circle .gallery{
  min-height:700px;
}



.gallery_circle input {
  position: absolute;
  left: -200vw;
  display: none;
}

.gallery_circle div {
  font-size: 0;
  cursor: pointer;
}

.gallery_circle img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.gallery_circle p {
  margin: .75em 1em;
  transform: scale(0) translate(50%);
  opacity: 0;
  transition: 0.3s calc(var(--k, 0)*.1s);
}
.gallery_circle  p:nth-child(2) {
  --k: 1;
}
.gallery_circle  p:nth-child(3) {
  --k: 2;
}
.gallery_circle  p:nth-child(4) {
  --k: 3;
}
.gallery_circle  p:nth-child(5) {
  --k: 4;
}

.gallery_circle  .gallery {
  flex: 1;
  position: relative;
  transform-style: preserve-3d;
}
.gallery_circle  .gallery__item {
  overflow: hidden;
  position: absolute;
  top: var(--oy);
  left: 50%;
  margin: 0 calc(-.5*var(--d));
  width: var(--d);
  height: var(--d);
  border: solid calc(.02*var(--d)) whitesmoke;
  border-radius: 50%;
  --a: calc(var(--k)*36deg);
  transform: translateY(var(--ty)) rotate(var(--a)) translate(var(--tx)) scale(var(--f)) rotateX(10deg) scaleY(1.01543) rotate(calc(-1*var(--a)));
  filter: grayscale(1);
  transition: .3s;
}
.gallery__item:hover{
  filter: none;
}
.gallery_circle .gallery__item:nth-child(2) {
  --k: 0;
}
.gallery_circle .gallery__item:nth-child(4) {
  --k: 1;
}
.gallery_circle .gallery__item:nth-child(6) {
  --k: 2;
}
.gallery_circle .gallery__item:nth-child(8) {
  --k: 3;
}
.gallery_circle .gallery__item:nth-child(10) {
  --k: 4;
}
.gallery_circle .gallery__item:nth-child(12) {
  --k: 5;
}
.gallery_circle .gallery__item:nth-child(14) {
  --k: 6;
}
.gallery_circle .gallery__item:nth-child(16) {
  --k: 7;
}
.gallery_circle .gallery__item:nth-child(18) {
  --k: 8;
}
.gallery_circle .gallery__item:nth-child(20) {
  --k: 9;
}
.gallery_circle [type='radio']:focus + .gallery__item, .gallery__item:hover {
  filter: none;
}
.gallery_circle [type='radio']:checked + .gallery__item {
  border-radius: 1rem;
  transform: rotate(0deg) translate3d(0, 0, -1rem) rotatex(0deg) scale(1);
  filter: none;
}
.gallery_circle .centered_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: none;
}
.centered_text.active{
  display:block;
  background: rgba(0,0,0,0.6);
  z-index:99999;
  font-size:16px;
  width: 100%;
  height: 100%;
  color:#fff;
  padding:20px;
}
.centered_text.active span{
  font-size:20px;
  font-weight: 700;
}
.section2{
  background:gainsboro;
}
.section2 h2{
  margin: 0;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 2.5rem;
  color: #0f394c;
  text-transform: uppercase;
  text-align: center;
}
.specific_text{
  text-align: center;
}
.specific_text span{
  font-family: "Roboto Slab", system-ui;
  font-size:1.25rem; 
}

.counter{
  display:inline-block;
}
.specific_text span {
  display: none;
}

/*****************************PROGRESS BAR *********************************/
.container-progress-bar {
  width: 100%;
  text-align: center;
}

.progress {
  padding: 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress2 {
  padding: 6px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.25);  
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}


.progress-bar ,.progress-bar2,.progress-bar3 {
  height: 18px;
  border-radius: 30px;
  background-image: 
    linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;  
  transition-property: width, background-color;    
}

.progress-moved .progress-bar {
  width: 88%; 
  background-color: #652245;  
  
}

.progress-moved .progress-bar2 {
  width: 68%; 
  background-color: #652245;  
  
}

.progress-moved .progress-bar3 {
  width: 56%; 
  background-color: #652245;  
  
}

@keyframes progressAnimation {
  0%   { width: 5%; background-color: #F9BCCA;}
  100% { width: 88%; background-color: #652245; }
}
@keyframes progressAnimation2 {
  0%   { width: 5%; background-color: #F9BCCA;}
  100% { width: 68%; background-color: #652245; }
}

@keyframes progressAnimation3 {
  0%   { width: 5%; background-color: #F9BCCA;}
  100% { width: 56%; background-color: #652245; }
}