/* Carousel styling */
#introCarousel,
.carousel-inner,
.carousel-item,
.carousel-item.active {
  height: 109vh;
}
#introCarousell,
.carousell-inner,
.carousell-item,
.carousell-item.active {
  height: 109vh;
}
.widthh{
  width: 7% !important;
  cursor: auto !important;
}

.white{
  background-color: white;
}


.carousell-item:nth-child(1) {
  background-image: url(img/backgroundIanuarie.jpeg) !important;
  background-position: 50% 10% ;
  background-repeat: no-repeat;
  background-size: cover;


}


.carousel-item:nth-child(1) {
  /*background-image: url(/Users/sebastianruff/Desktop/MDB5-STANDARD-UI-KIT-Free-4/img/11.jpeg);*/
  
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.carousel-item:nth-child(2) {
  /*background-image: url(/Users/sebastianruff/Desktop/MDB5-STANDARD-UI-KIT-Free-4/img/4.jpeg);*/
 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.carousel-item:nth-child(3) {
  /*background-image: url(/Users/sebastianruff/Desktop/MDB5-STANDARD-UI-KIT-Free-4/img/6.jpeg);*/
  
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.carousel-item:nth-child(4) {
 /* background-image: url(/Users/sebastianruff/Desktop/MDB5-STANDARD-UI-KIT-Free-4/img/12.jpeg);*/

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}




/* Height for devices larger than 576px */
@media (min-width: 0px) {
  #introCarousel {
    margin-top: -58.59px;
  }
}
@media (min-width: 0px) {
  #introCarousell {
    margin-top: -58.59px;
  }
}



.navbar .nav-link {
  color: #fff !important;
}






.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color:#CCAC71;
  margin: 6px 0;
  transition: 0.4s;
}
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color:#41414c;
  background-color: #41414c;
  opacity: 1;
  overflow-y: hidden;
  transition: 0.5s;
}
.containerBurger{
  padding-right: 15px;
  cursor:pointer;

}
.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #9f9f9f;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #CCAC71;
}
.sizeMatters{
  font-size: 13px;
  margin-bottom: 0px !important;
  color: #41414c;
}



.btn:hover{
color: #CCAC71;
border-color: #CCAC71;


}

.borderescu{
  border-radius: 0px !important;
}


.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
.despreNoi{
  width: 100%;
  height:auto;
  
}

.textCenter{
  position: absolute;
  bottom:8%;


}

.textDespreNoi{
  margin-right: 40px;


}
.textDespreNoi2{
  color:#CCAC71;
  font-size: 58px;
}
.textDespreNoi6{
  color:#CCAC71;
  font-size: 58px;
}

.textTratamente{
  color: #CCAC71;
  font-size: 58px;
  margin-bottom: 50px;
}
.textTratamente1{
  color:#41414c !important;
  font-size: 36px;

}
.textTratamente2{
  color: #41414c;
  font-size: 18px;
}

.cover{
  height: 100%;
  width: auto;
}
.textAparaturi{
  color: #CCAC71;
  font-size: 58px;
}
.textDespreNoi3{
  color: #CCAC71;
  font-size: 26px;
  text-align: center;
  
}
.textDespreNoi5{
  color:#000;
  font-size: 14px;
  text-align: left;
  margin: auto;
  
}

.textDespreNoi4{
  color: #CCAC71;
  font-size: 32px;
  text-align: left;
  
}

/*a{
  color: #fff;
  font-size: 18spx  !important;
  text-align: center !important;
  display: inherit;
  transition: 0.6s;
}
a:hover{
  color: #CCAC71;
  font-size: 20px !important;
}*/

.borderRadius{
  border-radius: 20px !important;
  min-height: 200px;
}
.row{
  margin-top: 200px;
  margin-bottom: 200px;
}

.special{
  margin-top: 40px !important;
}

.auto{
  margin: auto !important;
  vertical-align: middle !important;
  height: auto;
}

.color{
  background-color: #fff;
  height: 80vh;
  margin: auto 0px auto 0px;
}



.fixed{
  position: fixed !important;
  width: 100% !important;
  top:0px;

}
.new{
  margin-top: 15px !important;
  margin-bottom: 40px !important;
}
.new1{
  margin-top: 15px !important;
  margin-bottom: 0px;
}
.marginCard{
  margin-top: 20px !important;
  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;}
.imagine
{
  margin-top: 16px;
  background-image: url(/img/13.jpg);
  background-repeat:no-repeat;
   background-size:cover;
   min-height: 400px;
 background-position: center center;





}
.backgroundimg{
  background-image: url(img/11.jpeg) !important;
  background-size: cover;
  background-position: left;
}
.backgroundimg2{
  background-image: url(img/4.jpeg) !important;
  background-size: cover;
  background-position: left;
}

.imaginee
{

  background-image: url(img/13.jpg);
  background-repeat:no-repeat;
   background-size:cover;
   min-height: 300px;
 background-position: center center;

}
.product-device {
  position: absolute;
  right: 10%;
  bottom: -30%;
  width: 300px;
  height: 540px;
  background-color: #333;
  border-radius: 21px;
  transform: rotate(30deg);
}

.product-device::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color:#CCAC71;
  border-radius: 5px;
}

.product-device-2 {
  top: -25%;
  right: auto;
  bottom: 0;
  left: 5%;
  background-color:#CCAC71;
}


/*
 * Extra utilities
 */

.flex-equal > * {
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    flex: 1;
  }
}



.tratam{
  width: 80%;
   height: 300px; 
   border-radius: 21px 21px 0 0;
     background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.poza1{
  background-image: url(img/8.jpg);

}
.poza2{
  background-image: url(img/9.jpg);

}
.poza3{
  background-image: url(img/1.jpg);

}
.poza4{
  background-image: url(img/10.jpg);

}

.marginn{
  margin-top: 200px;
  margin-bottom: 300px;
}
.marginnAparaturi{
  margin-top: 200px;
}
.marginnLista{
  margin-top: 100px;
}
.float{
  float: right !important;
  color: #CCAC71 !important;
}
.marginnn{
  margin-top: 50px;
  
}
.marginnnn{
  margin-top: 50px;
}
@media(min-width: 768px){
.marginnn {
    flex: 0 0 auto;
    width: 45%;
    float: left;
  margin-right: 10%;}

}
@media(min-width: 768px){
  .marginnnn {
      flex: 0 0 auto;
      width: 45%;
    float: right;}
  }

.epilare{
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/1.jpg);
  background-position: center;
  background-size:cover;
  background-repeat: no-repeat;


}
.epilare1{
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/9.jpg);
  background-position: center;
  background-size:cover;
  background-repeat: no-repeat;


}


.mycarouseltext{

  align-content: center;
  right: 15%;
  bottom: 1.25rem;
  left: 15%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: left;
  width: 70%;
  margin: auto;

}

.nobottom{
  margin-bottom: 0px !important;
}
.nobottom1{
  margin-bottom: 20px !important;
}

.small{
  margin-bottom: 50px !important;
}

.roww {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
  margin-bottom: 300px;
  margin-top: 100px;
}

.rowwww{
  margin-top: 40px !important;
  width: 100% !important;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;

}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

.footer{
  width: 100%;
  background-color: #41414c;
  height: auto;
}


.detalii1{
  margin-top: 20px;
  
}
.detalii2{
  margin-top: 20px;
  
}
.detalii3{
  margin-top: 20px;
  
}

.futer{
  font-size: 26px;
color: #9f9f9f;
margin-top: 2rem;
margin-bottom: 2rem !important;
}
.futer1{
  font-size: 17px;
  color: #9f9f9f;
  margin-bottom: 6px !important;
}
.Copyright{
  margin: auto;
  text-align: center;
}

.social{
  margin-top: 40px;
  margin-bottom: 40px;
  align-content: center;
  font-size: 40px;
  text-align: center;
}

.social1{
  margin-top: 20px;
  margin-bottom: 20px;
  align-content: center;
  font-size: 40px;
  text-align: center;
}

.sizeControl{
  color: #CCAC71 !important;

}

.firstTreatmentPhoto{
  background-image: url(img/11.jpeg) !important;
  background-size: cover;
  height: 102vh;
  background-position: center;
}
.secondTreatmentPhoto{
  background-image: url(img/4.jpeg) !important;
  background-size: cover;
  height: 102vh;
  background-position: center;
}
.thirdTreatmentPhoto{
  background-image: url(img/12.jpeg) !important;
  background-size: cover;
  height: 102vh;
  background-position: center;
}
.secondTreatmentText{
background-color: #fff;
height: 70%;
width: 40%;
margin: 40px;
border-radius: 25px;
}

.color1{
  background-color: #fff;
height: auto;
margin: 40px;
border-radius: 25px;
opacity: 90%;
padding: 20px;

}
.color2{

  height: 102vh;
}

@media screen and (max-width: 800px) {
  .color1 {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    margin-bottom: 100%;

  }
  .color2{
    -ms-flex: 0%;
    flex: 0%;
    max-width: 0%;
  }
  .left{
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    margin-bottom: 100%;
    height: 300px !important;
    border-radius: 50px !important;
  }
  .pic1{
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    margin-bottom: 100%;
    height: 350px !important;
  }
  .pic2{
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    margin-bottom: 100%;
    height: 350px !important;

  }
  .pic3{
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    margin-bottom: 100%;
    height: 350px !important;

  }
  .pic4{
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    margin-bottom: 100%;
    height: 350px !important;

  }
  .pic5{
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    margin-bottom: 100%;
    height: 350px !important;

  }
  .pic6{
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    margin-bottom: 100%;
    height: 350px !important;


  }
  .pic7{
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    margin-bottom: 100%;
    height: 350px !important;

  }
}
.trtmtmargin{
  margin-bottom: 120px !important;
}
.firstTreatment{
  height: auto;
  background-image: url(img/4.jpeg) !important;
  width: 100%;
  background-size: cover;
  background-position: center;
}
.try{
  height: auto;
  background-color: #fff;
  width: 100%;
}
.left{
  background-image: url(img/4.jpeg) !important;
  width: 100%;
  background-size: cover;
  background-position: center;
height: 100%;
border-radius: 80px 80px 80px 80px;
padding: 20px;
margin: 0px !important;
}
.right{
  background-color:#fff;
  height: auto;
}
.secondTreatment{
  height: auto;
  background-size: cover;
  background-image: url(img/11.jpeg) !important;
  background-position: center;
  background-color:crimson;
  width: 100%;
}
.thirdTreatment{
  height: auto;
  background-size: cover;
  background-image: url(img/12.jpeg) !important;
  background-position: center;
  background-color:crimson;
  width: 100%;
}
.try1{
  height: auto;
  background-image: url(img/12.jpeg) !important;
  width: 100%;
  background-size:contain;
  background-position: left;
}
.try2{
  height: auto;
  background-image: url(img/12.jpeg) !important;
  width: 100%;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: right;
}
.newleft{
background-color: aquamarine;
height: auto;
margin: 0px !important;
margin-left: 50px !important;
}
.nopad{
  padding: 0px !important;
}
.newright{
background-color: white;
height: auto;
margin: 0px !important;
border-radius: 60px 0px 0px 60px;
padding: 30px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;

}

.tot{
  border-radius: 0px 60px 60px 0px !important;
}



.jos{
  margin-top: 200px;
  background-color: #41414c;
}
.boldText{
  font-weight: 1000 !important;
}
.scene {
  width: 400px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 0;
  perspective: 600px;
}

.card {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;

}

.card.is-flipped {
  transform: rotateY(180deg);
}


.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card__face--front {
  background: red;
}

.card__face--back {
  background: blue;
  transform: rotateY(180deg);
}



#myImg {
  border-radius: 5px;
  opacity: 0.7;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */

}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 7%;
  right: 5%;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
      width: 100%;
  }
}



.pic1{
  background-image: url(img/termo1-2.jpg) !important;
  width: 100%;
  background-size: cover;
  background-position: bottom;
height: 350px;
padding: 20px;
margin: 0px !important;


-webkit-filter: brightness(80%);
filter: brightness(80%);
	-webkit-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.pic1:hover{
  -webkit-filter: brightness(1);
filter: brightness(1);
transform: translate(0, -10px);
}
.pic2:hover{
  -webkit-filter: brightness(1.1);
filter: brightness(1.1);
transform: translate(0, -10px);
}
.pic3:hover{
  -webkit-filter: brightness(1.1);
filter: brightness(1.1);
transform: translate(0, -10px);
}
.pic4:hover{
  -webkit-filter: brightness(1.1);
filter: brightness(1.1);
transform: translate(0, -10px);
}
.pic5:hover{
  -webkit-filter: brightness(1.2);
filter: brightness(1.2);
transform: translate(0, -10px);

}
.pic7:hover{
  -webkit-filter: brightness(1);
filter: brightness(1);
transform: translate(0, -10px);

}
.pic6:hover{
  -webkit-filter: brightness(1.2);
filter: brightness(1.2);
transform: translate(0, -10px);
}
.pic2{
  background-image: url(img/N4D_5996.jpg) !important;
  width: 100%;
  background-size: cover;
  background-position: center;
height: 350px;

padding: 20px;
margin: 0px !important;
-webkit-filter: brightness(80%);
filter: brightness(80%);
	-webkit-transition: .6s ease-in-out;
	transition: .6s ease-in-out;

  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.pic3{
  background-image: url(img/mesosonix.jpeg) !important;
  width: 100%;
  background-position: bottom;
  background-size: cover;
height: 350px;

padding: 20px;
margin: 0px !important;
-webkit-filter: brightness(80%);
filter: brightness(80%);
	-webkit-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.pic4{
  background-image: url(img/MessoPentest.jpeg) !important;
  width: 100%;
  background-size: cover;
  background-position: center;
height: 350px;

padding: 20px;
margin: 0px !important;
-webkit-filter: brightness(80%);
filter: brightness(80%);
	-webkit-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.pic5{
  background-image: url(img/hdrtq.jpeg) !important;
  width: 100%;
  background-size: cover;
  background-position: center;
height: 350px;

padding: 20px;
margin: 0px !important;
-webkit-filter: brightness(1);
filter: brightness(1);
	-webkit-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

.pic6{
  background-image: url(img/altesse12.jpeg) !important;
  width: 100%;
  background-size: cover;
  background-position: center;
height: 350px;

padding: 20px;
margin: 0px !important;
-webkit-filter: brightness(80%);
filter: brightness(80%);
	-webkit-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

.pic7{
  background-image: url(img/Lympha.jpg) !important;
  width: 100%;
  background-size: cover;
  background-position: center;
height: 350px;

padding: 20px;
margin: 0px !important;
-webkit-filter: brightness(0.9);
filter: brightness(0.9);
	-webkit-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}



.citeste{
  color:#41414c;
  transition: 0.8s;
  font-size:large;
  font-weight: bolder;
}

.citeste:hover{
  color:#CCAC71 !important;
  transition: 0.5s;
}
.center{
  margin: auto;
  padding-left: 10px;
}




:root {
  --surface-color: #fff;
  --curve: 40;
}

* {
  box-sizing: border-box;
}



.cards {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 0;
  list-style-type: none;
}

.card {
  position: relative;
  display: block;
  height: 100% !important;  
  overflow: hidden;
  text-decoration: none;
  border-radius: 0px !important;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

.card__image {      
  width: 100%;
  height: 97%;
  -webkit-filter: brightness(80%);
  filter: brightness(80%);
  transition: all .4s ease-in-out;

}
.card:hover .card__image{
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
  transition: all .4s ease-in-out;
}
.laminare{
  height: 80% !important;
}


.card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;     
  width: 102%;  
  background-color: var(--surface-color);      
  transform: translateY(100%);
  transition: .4s ease-in-out;
  height: auto;
}

.card:hover .card__overlay {
  transform: translateY(0);
}

.card__header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2em;
  padding: 2em; 
  background-color: var(--surface-color);
  transform: translateY(-100%);
  transition: .4s ease-in-out;
  height: 90px;
  border-style: solid;
  border-width: 3px;
  border-color: white;

}

.card__arc {
  width: 80px;
  height: 80px;
  position: absolute;
  bottom: 100%;
  right: 0;      
  z-index: 1;
}

    

.card:hover .card__header {
  transform: translateY(0);
}

.card__thumb {
  flex-shrink: 0;
  width: 50px;
  height: 50px;      
  border-radius: 50%;      
}



.card__title {
  font-size: 1em;
  margin: 0 0 .3em;
  color: #6A515E;
}

.card__tagline {
  display: block;
  margin: 1em 0;
  font-size: 13px; 
  color: #41414c;  
}

.card__status {
  font-size: .8em;
  color: #D7BDCA;
}

.card__description {
  padding: 0 2em 2em;
  margin: 0;
  color: #41414c; 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
  font-size: 13px; 
}