@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
*{padding:  0;margin: 0;box-sizing: border-box;}
html, body {
  height: 100%;
  scroll-behavior: smooth;
}
body {font-family: 'Roboto', sans-serif;}
a {text-decoration: none;}
header {
  width: 100%;
  height: 80px;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}
nav {
  width: 994px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
nav ul li {
  display: inline-block;
  color: #614025;
  padding: 36px 0;
  margin: 0 8px;
  font-weight: 700;
}
nav ul li:hover {
  transform: scale(1.2);
  transition: linear .2s;
}
#banner {
  width: 100%;
  height: 155%;
  background-color: #a58c77;
  position: relative;
}
#banner-scroll {
  width: 100%;
  height: 100%;
  background: url('../img/rsz_1_new.webp') center center;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 400%;
  background-position: center;
  overflow-scroll: contain;
}
.container {
  width: 994px;
  position: relative;
  margin: 0 auto;
  z-index: 999;
}
.container-xp {
  width: 994px;
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.video-container {
  width: 600px;
  height: 450px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 999;
}
#text-box {
  width: 450px;
  height: 250px;
  position: relative;
  top: 200px;
  left: 150px;
  text-align: center;
}
.banner-title {
  padding-top: 20px;
  font-size: 24px;
  color: #f5d5bb;
  border-bottom: 3px solid #f5d5bb;
}
		@keyframes showIcon {
	0% {transform: scale(0.8);}
	50% {transform: scale(1.2);}
	100% {transform: scale(1.0);}
}
@keyframes popup {
	0% {
		width: 70%;
		opacity: 1;
		right: 50px;
	}
	100% {
		width: 0;
		opacity: 0;
		left: 100%;
	}
}
#popup {
	width: 350px;
	height: 100px;
	display: flex;
	background: none;
	justify-content: space-between;
	flex-direction: row-reverse;
	position: fixed;
	top: 150px;
	right: 25px;
}
#popup-icon {
	width: 64px;
	height: 64px;
	background-image: url('../img/popup.webp');
	background-position: center center;
	background-size: cover;
	background-color: #fff;
	margin-top: 15px;
	border-radius: 100%;
	padding: 5px;
	border: 4px solid gold;
	z-index: 2;
	position: fixed;
	animation: showIcon;
	animation-duration: .5s;
	cursor: pointer;
}
#popup-text {
	width: 70%;
	background-color: #fff;
	border: 4px solid gold;
	text-align: center;
	position: relative;
	right: 50px;
	z-index: 1;
	padding: 12px;
	animation-name: popup;
	animation-duration: .5s;
	animation-direction: reverse;
	display: none;
	user-select: none;
}
.banner-text {
  padding-top: 25px;
}
.btns {
  margin-top: 50px;
}
.btn {
  padding: 12px 25px;
  display: inline-block;
  margin: 15px;
  border: 2px solid #f5d5bb;
  color: #a58c77;
  background: #f5d5bb;
  border-radius: 4px;
}
.btn:hover {
  transition: linear .2s;
  transform: scale(1.2);
}
.team {
  background: none;
  color: #f5d5bb;
}
#logo {
  width: 380px;
  height: 150px;
  margin-top: 15px;
  background-image: url('../img/logo2.webp');
  background-position: center center;
  background-size: cover;
}
.arrow {
  width: 100%;
  height: 50px;
  font-size: 48px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.arrow a {color: #a58c77;}
#about {
 width: 994px;
 padding: 25px;
 margin: 150px auto 190px auto;
 display: flex;
 justify-content: space-between;
}

#about h1 {
  width: 450px;
  font-size: 36px;
  color: #a58c77;
  border-bottom: 4px solid #a58c77;
  margin-bottom: 25px;
}
#about-text {
  width: 50%;
}
#counters {
  width: 100%;
  text-align: center;
  margin: 80px auto 0 auto;
  display: flex;
  justify-content: space-between;
}
.info2 {
  font-size: 48px;
  color: #a58c77;
  display: block;
  padding: 5px 0;
}
.content-info1, .info, .content-info2, .info2 {
  font-size: 48px;
  color: #a58c77;
  display: block;
  padding: 5px 0;
}

.info::after {content: "0 USERS";position;absolute;right: 0;}
.info2::after {content: "0 CLINICS";position;absolute;right: 0;}

#mission h1 {
  font-size: 36px;
  color: #a58c77;
  padding-bottom: 15px;
}

@property --num {
  syntax: "<integer>";
  initial-value: 6000;
  inherits: false;
}
@property --num2 {
  syntax: "<integer>";
  initial-value: 100;
  inherits: false;
}

.content-info1  {
  animation: counter 0.5s ease-in-out;
  counter-reset: num var(--num);
}
.content-info1::after {
  content: counter(num) " USERS";
}
.content-info2 {
  animation: counter2 0.5s ease-in-out;
  counter-reset: num var(--num2);
}
.content-info2::after {
  content: counter(num) " CLINICS";
}

@keyframes counter {
  from {--num: 0;}
  to {--num: 100;}
}
@keyframes counter2 {
  from {--num2: 0;}
  to {--num2: 60;}
}

#about-midia {
  width: 500px;
  height: 500px;
  position: relative;
  margin-left: 50px;
  margin-bottom: 150px;
}
.a-pic {
  width: 180px;
  height: 180px;
  background: #000;
  border: 6px solid #a58c77;
  border-radius: 100%;
  margin: 15px;
  display: inline-block;
}
#about-pic1 {
  background: url('../img/4.webp') center center;
  background-size: cover;
}
#about-pic2 {
  background: url('../img/5.webp') center center;
  background-size: cover;
}
#about-pic3 {
  background: url('../img/7.webp') center center;
  background-size: cover;
}
#about-pic4 {
  background: url('../img/9.webp') center center;
  background-size: cover;
}
#about-pic5 {
  background: url('../img/10.webp') center center;
  background-size: cover;
}
#about-pic6 {
  background: url('../img/11.webp') center center;
  background-size: cover;
}
#about-pic7 {
  background: url('../img/12.webp') center center;
  background-size: cover;
}
#about-pic8 {
  background: url('../img/5.webp') center center;
  background-size: cover;
}
#vajayjay {
  width: 100%;
  padding: 10%;
  text-align: center;
}
#vajayjay-content
{
  width: 1024px;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
}
#vajayjay-prod, #bebs-prod  {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}
#vajayjay-prod {
  flex-direction: row-reverse;
  justify-content: space-between;
}
#bebs-prod-info,#vajayjay-prod-info{
  width: 50%;
}
#bebs-t, #vajayjay-t {
  font-size: 32px;
  color: #a58c77;
  padding-bottom: 15px;
}
.visit-btn {
  width: 250px;
  padding: 10px 25px;
  background: #a58c77;
  color: #fff;
  margin-top: 50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#vajayjay-prod-pic, #bebs-prod-pic{
  width: 480px;
  height: 350px;
  background: url('../img/tottie1.webp') center center;
  background-size: cover;
  border: 4px solid #a58c77;
}
#vajayjay-prod-pic {
  background: url('../img/tottie2.webp') center center;
  background-size: cover;
}

#labor-hud {width: 100%;height: 1000px;padding:0;position: relative;text-align: center;background: #a58c77;color: #fff;}
#doctor {
  width: 994px;
  padding: 50px;
  text-align: center;
  margin: 0 auto;
}
#labor-content {
  width: 994px;
  margin: 0 auto;
  position: relative;
  bottom: 50px;
  display: flex;
  justify-content: space-between;
}
#labor-v{
  width: 60%;
  left: 25px;
  border-radius: 4px;
}
.labor-title {
  font-size: 24px;
  margin: 25px 0;
}
#labor-text {
  width: 40%;
  min-height: 545px;
  /*background: #725d4a;*/
  padding: 15px;
  border-radius: 4px;
  margin-top: 50px;
  margin-left: 120px;
}
#labor-text ul {
  text-align: left;
  list-style: none;
  color: #fff;
}
#labor-text ul li {
  margin: 25px 0;
  text-transform: lowercase;
}
#hud-pic {
  width: 108px;
  min-height: 545px;
  background: url('../img/Birthing_HUD.webp') center center no-repeat;
  background-size: contain;
  position: absolute;
  top: 50px;
  left: 0;
  border-radius: 6px;
}
#hud-pic2 {
  width: 530px;
  height: 300px;
  background: url('../img/Labor1.webp') center center no-repeat;
  background-size: contain;
}
#social-media {
  position: fixed;
  bottom: 25px;
  right: 25px;
  font-size: 28px;
  z-index: 99985;
}
.media-icon {
  color: #fff;
  background: #000;
  padding: 5px 8px;
  border-radius: 100%;
}
#labor-v-container {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.yt {background: #f00;padding: 5px}
.fb {background: #4267B2;}
.insta {background: #d62977}
#labor-h {z-index: 2;width: 100%;}
#vajayjay-h h1, #labor-h h1, #doctor-h h1 {text-transform: uppercase;font-size: 36px;color: #a58c77;margin-bottom: 25px;}
#labor-h h1 {color: #fff; padding: 100px 0 25px 0;display: block;}
#vajayjay-h h1 {font-size: 28px;}
.buy-vajayjay {
  padding: 12px 25px;
  color: #fff;
  background: #a58c77;
  border-radius: 4px;
  margin-top: 25px;
}
#i-video {
  margin-top: 25px;
  border: 6px solid #a58c77;
}
#video {
  width: 100%;
  padding: 50px;
  background: #a58c77;
  padding: 50px 10%;
}
#video-h {
  width: 100%;
  padding: 0 10%;
}
#video-h h1 {
  font-size: 36px;
  color: #a58c77;
}
#videos {
  width: 1050px;
  margin: 25px auto;
}
#main-vid {
  width: 100%;
  margin-top: 25px;
  margin-left: 10%;
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;
}
#main {width: 80%;}
.others-videos {
  width: 30%;
  text-align: left;
}
.thumb {
  width: 150px;
  height: 75px;
  background-size: cover;
  display: inline-block;
  margin: 10px;
  cursor: pointer;
}
#thumb1 {background: url("../img/thumb1.webp") center center;background-size: cover;}
#thumb4 {background: url("../img/thumb4.webp") center center;background-size: cover;}
#thumb2 {background: url("../img/thumb2.webp") center center;background-size: cover;}
#thumb5 {background: url("../img/thumb5.webp") center center;background-size: cover;}
#thumb6 {background: url("../img/thumb6.webp") center center;background-size: cover;}
#thumb7 {background: url("../img/thumb7.webp") center center;background-size: cover;}
#thumb8 {background: url("../img/thumb8.webp") center center;background-size: cover;}
#thumb9 {background: url("../img/thumb9.webp") center center;background-size: cover;}
#thumb10 {background: url("../img/thumb10.webp") center center;background-size: cover;}


#doc-hr {
  width: 20%;
  margin: 0 auto;
  border: none;
  height: 4px;
  background: #a58c77;
}
#doctor-content {
  width: 100%;
  padding: 0 2%;
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}
#img-left, #img-right {
  width: 450px;
  height: 450px;
  background: #000;
}
.title {
  font-size: 36px;
  color: #a58c77;
}
#lamaze {
  margin-top: 150px;
  padding: 25px;
}
#lamaze p{
  font-size: 24px;
  color: #a58c77;
}
#img-left {
  background: url("../img/doctor.webp") center center no-repeat;
  background-size: contain;
}
#img-right {
  background: url("../img/doctor2.webp") center center no-repeat;
  background-size: contain;
}
#doctor-text {
  width: 40%;
  margin: 0 25px
}
#doctor-text p {margin-bottom: 25px;text-align: left;}
.doc-buy {
  padding: 10px 25px;
  background: #a58c77;
  color: #fff;
  border-radius: 4px;
}
#msg {
  margin-top: 25px;
  background: #000;
  border-radius: 4px;
  color:#fff;
  padding: 5px;
  position: relative;
  visibility: hidden;
}
#msg::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
.doc-buy:hover #msg {
  visibility: visible;
}
#experience {
  width: 100%;
  padding: 50px;
  background: #a58c77;
  text-align: center;
  display: flex;
  justify-content: space-between;
}
#xp-title {
  font-size: 36px;
  color: #fff;
}
#xp-info {
  width: 45%;
}
#xp-pic {
  width: 450px;
  height: 350px;
  background: url("../img/zoom.webp") center center;
  background-size: cover;
  margin-top: 25px;
  border: 6px solid #fff;
  display: inline-block;
}
#xp-text {
  width: 450px;
  text-align: left;
  margin-top: 50px;
}

#faq {
  width: 100%;
  margin-top: 50px;
  text-align: center;
  padding: 50px;
}
#faq-h h1 { color: #a58c77;font-size: 36px}
#questions {
  text-align: left;
  padding: 25px;
}
.question {
  background: #a58c77;
  padding: 12px;
  color: #fff;
  position: relative;
  margin: 25px 0 0 0;
  user-select: none;
  cursor: pointer;
}
.question i {position: absolute;color: #fff;font-size: 24px;right: 25px;}
.response1,.response2,.response3 {
  background: #f5d5bb;
  padding: 12px ;
  display: block;
  user-select: none;
}
footer {
  width: 100%;
  text-align: center;
  color: #fff;
  background: #a58c77;
  padding: 12px;
}

@media only screen and (max-width: 900px) {
  ul {width: 100%;display: none;position: fixed;left: 0;top: 0;background: #cceff1;}
  nav {display: block;width: 100%;}
  nav ul li {display: block;border-bottom: 1px solid #32cacd}
  header {width: 100%;}
  .container-banner {width: 100%;}
  .container{width: 100%;}
  #banner {height: 100%;}
  #text-box {left: 0;width: 100%;z-index: 999;}
  #nurse {z-index: 99;}
  .banner-text {width: 90% ;background: rgba(0, 0, 0, .5);margin: 25px auto 0 auto;padding: 12px}
  #counters {width: 90%;flex-direction: column;}
  .content-info1{margin-bottom: 25px}
  #popup{display: none;}
  .item {width: 90%;margin: 25px 0}
  #social-media {right: 0;}
  #menu-ul {background: #a58c77;color: #614025}
  #menu-ul li {border-color: #614025}
  #logo {width: 150px;}
  #questions {padding:0;}
  #hamb {
    display: block;
    width: 64px;
    height: 64px;
    background: url('../img/hamb.webp') center center;
    background-size: cover;
    margin-left: auto;
    position: fixed;
    right: 25px;
    top: 25px;
    z-index: 999;
  }
  #lamaze, #about,#about-text,#about h1, #about-midia {width: 100%;}
  #about {flex-direction: column;}
  #i-video {margin:  25px auto}
  #about-midia {margin: 0;text-align: center;margin-bottom: 1050px}
  #labor-content {width: 100%;flex-direction: column;}
  #labor-text {width: 90%;margin: 0 auto;min-height: 750px;}
  #labor-text ul {display: block;background: none;padding: 12px;}
  #labor-v {width: 100% !important;margin-top: 25px;left: 0;top: 0}
  #labor-hud {height: 1300px;}
  #hud-pic, #hud-pic2 {
    display: none;
  }
  #videos {
    width: 100%;
  }
  #main-vid {
    flex-direction: column;
    margin: 0;
  }
  #lamaze iframe, #xp-text iframe {
      width: 100% !important;
  }
  #vajayjay-content {
      width: 100%;
  }
  #bebs-prod, #vajayjay-prod {
      width: 100%;
      flex-direction: column;
      text-align: center;
  }
  #bebs-prod-info, #vajayjay-prod-info {width:100%;text-align:center;}
  #bebs-prod-pic, #vajayjay-prod-pic {width:100%;}
  .others-video {text-align: center;width: 100%;}
  #doctor {width: 100%;padding: 0;}
  #main {width: 100%;}
  #doctor-content {flex-direction: column;padding: 0}
  #img-left, #img-right {width: 100%;background-size: cover;margin: 0}
  #doctor-text{width: 100%;margin:0;}
  #doctor-text p {padding: 5px;text-align: center;margin-top: 25px}
  #msg {display: none;}
  #img-right {margin: 25px 0}
  #experience {width: 100%;padding: 0}
  .container-xp {
    width: 100%;
    flex-direction: column;
  }
  #xp-info {width: 100%;}
  #xp-pic {width: 100%;}
  #xp-text {
    width: 100%;
    text-align: center;
    padding: 5px;
    margin-bottom: 25px;
  }
}