@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;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}
#hamb {display: none;}
nav {
  width: 994px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
nav ul li {
  display: inline-block;
  color: #32cacd;
  padding: 58px 0;
  margin: 0 8px;
}
nav #scrolling li {
  display: inline-block;
  color: #32cacd;
  padding: 35px 0;
  margin: 0 8px;
}
nav ul li:hover {
  transform: scale(1.2);
  transition: linear .2s;
}
#banner, #banner-hm {
  width: 100%;
  height: 600px;
  background-color: #cceff1;
  position: relative;
}
#b-bg {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}
#popup {
	width: 350px;
	height: 100px;
	background-color: red;
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	position: fixed;
	top: 150px;
	right: 25px;
	z-index: 99999;
}
.start-pop-content {
  animation: popupShowContent 0.2s ease-in-out;
}
@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-hm {
  background: #a58c77;
}
#banner-hm .banner-title {
  color: #fff;
  border-color: #fff;
}
.container {
  width: 994px;
  position: relative;
  margin: 0 auto;
}
.container-banner {
  width: 994px;
  height: 600px;
  position: relative;
  margin: 0 auto;
}
#copy {
  font-size: 14px;
  width: 150px;
  position: absolute;
  bottom: 25px;
  right: 0;
}
#nurse {
  width: 198px;
  height: 508px;
  background: url('../img/nurse.webp') center center;
  background-size:  cover;
  position: absolute;
  right: 150px;
  bottom: 0;
  z-index: 9999;
}
#text-box {
  width: 450px;
  height: 250px;
  position: relative;
  top: 200px;
  left: 150px;
  text-align: center;
  z-index: 99999;
}


.banner-title {
  padding-top: 20px;
  font-size: 24px;
  color: #32cacd;
  border-bottom: 3px solid #32cacd;
  
}
.banner-text {
  padding-top: 25px;
  color:#333;
}
.btns {
  margin-top: 50px;
}
.btn {
  padding: 12px 25px;
  display: inline-block;
  margin: 10px;
  border: 2px solid #32cacd;
  color: #cceff1;
  background: #32cacd;
  border-radius: 4px;
}
.btn:hover {
  transition: linear .2s;
  transform: scale(1.2);
}
.team {
  background: none;
  color: #32cacd;
}
.btns .bso {
    background-image: linear-gradient(to left,#682fa5, #9444a0);
    border:none;
    color:#fff;
}
#logo {
  width: 380px;
  height: 150px;
  margin-top: 15px;
  background-image: url('../img/logo2.webp');
  background-position: center center;
  background-size: cover;
}
#background-video {
  min-width: 100%;
  height: 540px;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}
.arrow {
  width: 100%;
  height: 50px;
  font-size: 48px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.arrow a {color: #32cacd;}
#info {
  text-align: center;
  width: 1024px;
  margin: 150px auto 50px auto;
  height: 250px;
  display: flex;
  justify-content: space-between;
}
#mission, #counters {
  width: 50%;
}
.content-info1, .info, .content-info2 {
  font-size: 48px;
  color: #8bc0a2;
  display: block;
  padding: 15px 25px;
}
.info::before {content: "0"}

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

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



#info-hr {
  width: 50%;
  border: none;
  height: 2px;
  background: #8bc0a2;
  margin: 25px auto;
}
#handsonmommy {
  width: 100%;
  margin: 0 auto 0 auto;
  background: #cceff1;
  position: relative;
}
#handsonmommy h1 {
  width: 350px;
  text-align: left;
  color: #32cacd;
  padding: 25px 0;
  font-size: 36px;
  z-index: 904;
}
#handsonmommy .btn {
  margin: 15px 25px 80px 25px;
  position: relative;
  bottom: 60px;
}
.h-title {z-index: 995;}
.img-container, .video-container {
  width: 500px;
  height: 400px;
  overflow: hidden;
  z-index: 903;
}
.text-slider {
  width: 100%;
  height: 540px;
  text-align: center;
  margin: 0 auto;
  position: relative;
}
#slider-video-background {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  object-fit: cover;
  overflow: hidden;
  filter: sepia(50%);
}
.slider-title {
  background:#8bc0a2;
  padding: 12px;
  border-radius: 8px;
}
.slider-container {
  padding-top: 240px;
  z-index: 99;
}
.slider-container article{
  padding: 12px;
  font-size: 48px;
  color: #fff;
}
.slick-dots {
  position: absolute;
  bottom: 250px;
  left: 50%;
  transform: translateX(-50%);
}
.slick-dots li {
  display: inline-block;
  margin: 10px;
}
.slick-dots li button {
  background: #8bc0a2;
  color: #8bc0a2;
  border: none;
  padding: 1px 5px;
  border-radius: 100%;
}
.slick-dots .slick-active button {
  background: #fff;
  color: #fff;
  transition: linear .2s;
}
#hm-video {
  width: 500px;
  height: 400px;
  background-size: cover;
  position: relative;
  bottom: 60px;
  z-index: 903;
  margin-top: 35px;
  margin-left: 35px;
}
#testimonials {
  width: 100%;
  margin: 0 auto;
  padding: 5%;
  text-align: center;
}
.t-title {
  font-size: 36px;
  color: #8bc0a2;
  padding-bottom: 25px;
}
.item {
  width: 350px;
  height: 850px;
  border: 2px solid #8bc0a2;
  background: #fff;
  display: inline-block;
  margin: 0 10px;
  vertical-align: top;
  text-align: left;
}
.client-info {
  width: 80%;
  margin: 0 auto;
  border-bottom: 2px solid #8bc0a2;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.client-pic {
  width: 64px;
  height: 64px;
  border: 1px solid #8bc0a2;
  border-radius: 100%;
  margin-bottom: 15px;
}
#t1 {
  background: url("../img/Testimonial1.webp") center center;
  background-size: cover;
}
#t2 {
  background: url("../img/Darkstar_Family.jpeg") center center;
  background-size: cover;
}
#t3 {
  background: url("../img/Testimonal_4.webp") center center;
  background-size: cover;
}
.client-name {
  color: #8bc0a2;
  font-size: 18px;
}
.client-cite {
  width: 80%;
  margin: 15px auto;
}
cite i {
  font-size: 24px;
  color: #8bc0a2;
  padding: 0 5px;
}
.hm-pics {
  width: 250px;
  height: 250px;
  background: url("../img/zoom_out.webp") center center;
  background-size: cover;
}
#hm-info {
  width: 100%;
  height: 750px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 102;
}
#hm-market {
  width: 600px;
  min-height: 100%;
  background: url("../img/bebspic.webp") bottom left;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 100;
}
.marketplace {margin-left: 25px;color: #fff;}
.hm-text-box {padding: 15px;line-height: 20px}
.hm-text-box, .team-text-box {
  width: 45%;
  z-index: 901;
}
.more {
  color:  #fff;
  margin: 25px 0 0 0 ;
}
#team {
  width: 100%;
  margin: 0 0 50px 0;
  position: relative;
}
#team .img-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
#team-pic {
  width: 100%;
  height: 100%;
  background: url('../img/team-pic2.webp');
  background-size: 400%;
  background-position: center;
  overflow-scroll: contain;
}
#team h1 {
  margin-top: 25px;
  font-size: 36px;
  color: #32cacd;
  padding-bottom: 25px;
}
#team-info {
  width: 100%;
  padding: 0 50px;
  text-align: center;
}
.contact {
  background: #32cacd;
  border-color: #32cacd;
  color: #fff;
  margin: 25px 0 0 0;
}
#faq {
  width: 100%;
  padding: 50px 10%;
  text-align: center;
}
.faq-title {
  font-size: 36px;
  color: #32cacd;
}
.question h1 {
  color: #fff;
  padding: 12px;
  position: relative;
  cursor: pointer;
  background: #32cacd;
  margin: 25px 0;
  text-align: left;
}
#faq h1 i {position: absolute;right: 12px;}
.response {display: none;padding: 25px 0;text-align: left;}

#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%;
}
.yt {background: #f00;padding: 5px}
.fb {background: #4267B2;}
.insta {background: #d62977}
footer {
  width: 100%;
  text-align: center;
  color: #fff;
  background: #32cacd;
  padding: 12px;
}

#error {
  width: 100%;
  height: 100%;
  background: #fe978e;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#error-num {
  font-size: 150px;
  color: #fff;
}
#title-msg {
  font-size: 36px;
  color: #fff;
}
#err-btn {
  padding: 12px 25px;
  font-size: 18px;
  color: #fff;
  border: 4px solid #fff;
  border-radius: 6px;
  margin-top: 25px;
  animation: pulse 0.5s infinite alternate ease-in-out;
}
#err-btn i {margin-right: 15px;}
#err-btn:hover {
  background: #fff;
  color: #fe978e;
  transition: linear .2s;
}

@keyframes pulse {
  from {transform: scale(1.0);}
  to {transform: scale(1.4)}
}
@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%;height: 700px;}
  #banner {height: 700px;}
  #copy {left:25px;}
  .container{width: 100%;}
  #text-box {left: 0;width: 100%;z-index: 999;top: 100px}
  #nurse {z-index: 99;right: 0;}
  .banner-text {width: 90% ;background: rgba(0, 0, 0, .5);margin: 25px auto 0 auto;padding: 12px;color: #fff;}
  #popup{display: none;}
  #info {width: 90%;flex-direction: column;margin-bottom: 400px}
  #mission {width: 100%;}
  #counters {width: 90%;}
  .team {background: #32cacd;color: #fff}
  #handsonmommy {width: 100%;padding-bottom: 155px}
  #h-title {text-align: center;z-index: 999999;}
  #handsonmommy h1 {width: 100%;text-align: center;}
  #hm-market {display: none;}
  #handsonmommy .btn {margin: 0 0 0 25px }
  #handsonmommy
  .item {width: 90%;margin: 25px 0}
  #social-media {right: 0;}
  #team-pic {height: 50%;}
  #team{margin: 0}
  .video-container {width: 100%;text-align: center;}
  .hm-text-box {width: 100%;margin-bottom: 50px}
  .hm-text-box p {margin:  0}
  #hm-video {display:block;width: 90%;height: 300px;margin:  0 auto}
  .btn.marketplace {margin-left: 25px !important}
  #team .img-container {height: auto;}
  #team-info {margin-bottom: 50px}
  .slider-title {font-size: 24px}
  #logo {width: 150px;}
  .text-slider ul{background: transparent;}
  #i3 {height: 950;}
  #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;
  }
}