@font-face {
  src: url(../poppins/Poppins-Bold.ttf);
  font-family: Poppins-Bold;
}
@font-face {
  src: url(../poppins/Poppins-Regular.ttf);
  font-family: Poppins;
}
@font-face {
  src: url(../poppins/Poppins-Thin.ttf);
  font-family: Poppins-Thin;
}
@font-face {
  src: url(../poppins/Poppins-Light.ttf);
  font-family: Poppins-Light;
}
@font-face {
  src: url(../poppins/Poppins-ExtraLight.ttf);
  font-family: Poppins-ExtraLight;
}

*{
  margin: 0;
  padding: 0;
}

a{
  text-decoration: none;
  color: #666;
}

html{
  scroll-behavior: smooth;
}

body{
  /* background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5)), url(../img/grabg.png);
  background-position: bottom;
  background-size: cover; */
  background-attachment: fixed;
  box-sizing: border-box;
  overflow-x: hidden;
  /* font-size: 25px; */
}
#star{
  margin-left: 50px;
}
.star2{
  margin-left: 50px;
}
.herocont{
  height: 100vh;
  /* background: url(../img/invert-2.jpg); */
  /* background: url(../img/capsules.jpg); */
  /* background:  linear-gradient(rgba(134, 155, 155, .4), rgba(34, 55, 55, .7)), url(../img/microt.jpg); */
  /* background:  linear-gradient(rgba(234, 155, 195, .2), rgba(234, 155, 195, .5)), url(../img/microt.jpg); */
  /* background:  linear-gradient(rgba(234, 155, 195, .2), rgba(234, 155, 195, .5)), url(../img/herofade.jpg); */
  background: url(../img/herofade.jpg);
  background-position: center;
  background-size: cover;
}
@media only screen and (max-width: 700px){
  .herocont{
    height: 100vh;
  }
}

li{
  list-style: none;
}
.title{
  background-color: maroon;
}


header{
  z-index: 2;
}
header .navbar-brand img{
  height: 80px;
}
header .navbar #kay-nav{
  justify-content: flex-end;
}
header .nav-item{
  padding: 0 25px;
  font-size: 18px;
}
header .navbar-toggler{
  width: 90px;
}
header .navbar-toggler span{
  width: 100%!important;
}
header .navbar-toggler span svg{
  width: 100%!important;
}
@media (max-width: 1000px) {
  .navbar{
    background: #fff;
  }
  .navbar .nav-link{
    color: #777!important;
  }
  header .nav-item{
    padding: 0 5px;
  }
}

/* header .navbar{
  position: relative;
  padding: 0;
  z-index: 10;
  background: #fff;
  height: 100px;
}
header .navbar .navbar-toggler-icon{
  height: 16px;
}
#navbarmenu1{
  height: 100%;
}
#navbarmenu1 .navbar-nav{
  height: 100%;
}
header .navbar .brand{
  font-family: Playfair;
  font-size: 24px;
  color: #fff;
  padding: 0;
  height: 90%;
}
header .navbar .brand img{
  height: 90%;
}
@media only screen and (min-width: 1200px){
  header .navbar{
    height: 100px;
  }
}
@media only screen and (max-width: 1000px){
  header .navbar{
    padding: 10px 0;
  }
  header .navbar .brand{
    font-family: Playfair;
    font-size: 24px;
    color: #fff;
    padding: 0;
    height: 90px;
  }
  header .navbar .brand img{
    display: inline;
    height: 100%;
  }
}
header .navbar ul li{
  position: relative;
}



header .navbar{
  position: relative;
}
header .navbar li{
  height: 100%;
  padding: 15px 20px 0 20px;
}
header .navbar .flink{
  color: #333;
  font-family: Ubuntu;
}
nav ul li:hover{
  background-color: #800000;
}
nav ul li:hover a{
  display: block;
  text-decoration: none;
  color: #fff!important;
}




header .navbar ul li ul{
  position: absolute;
  display: none;
  width: 220px;
  padding: 0;
  left: 0;
  z-index: 2;
  border-radius: 0 0 0 20px;
}
header .navbar ul li:hover ul{
  display: block;
}
header .navbar ul li ul:hover .round{
  border-radius: 0 0 0 20px;
}

header .navbar .navbar-nav{
  width: 100%;
}

header .navbar ul .nav-item a{
  font-size: 18px;
  display: block;
  text-decoration: none;
  height: 100%;
  padding: 20px 0px;
}
header .navbar ul li ul .nav-item a{
  padding: 8px 18px;
  color: #000!important;
}
header .navbar ul li ul .nav-item:hover a{
  color: #fff!important;
} */


.frame1{
  margin-left: 15px;
  background: linear-gradient(rgba(150, 150, 50, 1), rgba(150, 150, 50, 1)), transparent;
  background-size: cover;
  /* background: linear-gradient(rgba(150, 100, 0, .8), rgba(150, 100, 0, .8)), url(../img/body.jpg); */
}
.frame2{
  margin-right: 15px;
  /* background-image: url(../img/body.);  */
  background: linear-gradient(rgba(50, 150, 150, 1), rgba(50, 150, 150, 1)), transparent;
}

#belie{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: 15px;
  width: 95%;
  /* margin-right: 25px; */
  height: 80vh;
  color: #fff;
}
#belie .para{
  width: 40%;
  color: #fff;
  border-radius: 14px;
  padding: 15px;
}
#belie .para h3{
  font-size: 55px;
  padding-bottom: 8px;
}
#belie .para .explore{
  box-shadow: 1px 1px 16px rgba(182, 192, 192, 1);
  width: 120px;
  /* font-size: 22px; */
  padding: 10px;
  margin-top: 8px;
  border-radius: 30px;
  background-color: #fff;
  /* color: #fac6c8; */
  color: #999;
  position: relative;
  overflow: hidden;
  transition: all .5s ease-in;
}
/* #belie .para .explore div{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 56;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 30px;
  background: linear-gradient(rgba(234, 155, 195), rgba(234, 155, 195));
  transform: translateX(-100%);
  transition: all 1.5s ease-in-out;
}
*/
#belie .para .explore a{
  color: rgba(234, 155, 195);
  z-index: 60;
}
#belie .para .explore:hover{
  transform: scale(1.02);
  box-shadow: 1px 1px 26px rgba(232, 192, 192, 1);
  z-index: 60;
  color: #e99ac2;
  text-decoration: none;
}
/* #belie .para .explore:hover div{
  opacity: .5;
  transform: translateX(0%);
} */

/*
main #belief{
  background: url(../img/dandelion.jpg);
  background-position: top;
  background-size: cover;
}
main .sticker .second-sticker{
  background: linear-gradient(rgba(128, 0, 0, .7), rgba(128, 0, 0, .9)) transparent;
  background-size: cover;
  border-radius: 15px;
  box-shadow: 0 0 10px 0 #bbc2c8;
}
.para {
  height: 40vh;
  font-size: 25px;
  line-height: 30px;
}
*/

@media (max-width: 1000px) {
  header{
    position: relative;
  }
  #belie {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 15px;
    height: auto;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -70%);
    color: #fff;
  }
  #belie .para{
    width: 100%;
    text-align: center;
    /* background: linear-gradient(rgba(234, 155, 195, .2), rgba(234, 155, 195, .5)); */
    /* background: linear-gradient(to right, #8a72b3, #7663ac); */
    background: rgba(41, 37, 49, .4);
    border-radius: 14px;
    padding: 15px;
  }
  #belie .para h3{
    font-size: 25px;
    padding-bottom: 8px;
    font-weight: bold;
  }
  #belie .para p{
    font-size: 15px;
    padding-bottom: 8px;
    /* font-weight: bold; */
  }
}


#about {
  border: solid 2px transparent;
  font-size: 20px;
  padding: 150px 0;
  background: linear-gradient(rgb(0,0,0,.6),rgb(0,0,0,.8)), url(../img/lab.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* box-shadow: 0px 3px 5px 0px black; */
}

#about .can{
  padding: 10px 20px;
  /* color: #ac965a; */
  color: #fffd;
  /* color: #fffd; */
}
#about h3{
  padding-bottom: 50px;
  font-size: 35px;
  /* color: #fff; */
}
#about .can .send{
  background-color: rgba(255, 255, 255, .3);
  color: #fff;
  border-radius: 0;
}
#about .can .send:hover{
  background: linear-gradient(rgba(128, 0, 0, .7), rgba(128, 0, 0, .9)), transparent;
  color: #fff;
}
@media only screen and (max-width: 900px) {
  #about{
    padding: 25px 10px;
  }
  #about h3{
    padding-bottom: 20px;
    font-size: 25px;
  }
}

#why {
  padding: 100px 0;
}
.standards{
  margin-bottom: 50px;
  background-color: #fff;
}
.standards img{
  height: 100px;
}
.standards .titleline{
  height: 2px;
  background-color: maroon;
  width: 200px;
}


.content-head-heavy{
  font-family: sans-serif;
  font-size: 60px;
  letter-spacing: 4px;
  font-weight: 900;
  color: #fff;
}
.content-head-light{
  font-family: sans-serif;
  font-size: 50px;
  letter-spacing: 1px;
  font-weight: 100;
  color: #fff;
}
.content-head{
  font-family: Ubuntu;
  font-size: 30px;
  letter-spacing: 1px;
  font-weight: 400;
}

#team{
  color: #000;
  overflow-x: hidden;
  /* height: 110vh; */
}
#team .row{
  /* height: 100%; */
}
#team .firsts{
  background: linear-gradient(rgba(128, 0, 0, .7), rgba(128, 0, 0, .7)), url(../img/doctor.jpg);
  background-position: center;
  background-size: cover;
  height: 100vh;
  padding: 250px 0;
  overflow-x: hidden;
}
@keyframes team-wall{
  0%{
    transform: translate(-100%, 0%);
    opacity: .5;
  }
  100%{
    transform: translate(0%, 0%);
    opacity: 1;
  }
}
#team .seconds{
  height: 100vh;
  padding: 100px 25px 25px 25px;
  background-color: #f5f5f5;
  /* position: relative; */
  overflow-x: hidden;
}
@keyframes team-about{
  0%{
    transform: translate(100%, 0%);
    opacity: .5;
  }
  100%{
    transform: translate(0%, 0%);
    opacity: 1;
  }
}
#team .seconds .team-img{
  padding-left: 45px;
}
#team .seconds .team-img .roundimg{
  height: 200px;
  border-radius: 50%;
}
#team .seconds .team-img .imgtext{
  height: 50px;
}
#team .seconds .team-text{
  font-family: 'Roboto', sans-serif;
  padding: 15px 10px 0 10px;
}
@media only screen and (max-width: 675px){
  #team .seconds{
    height: auto;
  }
  #team .seconds .team-img .imgtext{
    height: 40px;
  }
}
#team h3{
  font-size: 35px;
  margin: 0!important;
}
#team .blockquote .blockquote-footer{
  color: #696969;
}
#team .card{
  color: #000;
  border: 0px;
}
#team .card .card-body{
  font-size: 20px;
  font-size: 20px;
  padding: 2px 8px;
}
#team .card .card-footer{
  background-color: #ac965a;
  background-color: #fff;
}
#team .card .card-footer i{
  /* color: #ac965a; */
  color: #000a;
}
#team .card .card-footer i:hover{
  color: maroon;
}

#products{
  /* padding: 50px 0; */
  background-size: cover;
  background-position: center;
}
#products .container{
  padding: 100px 0;
  height: 100%;
}
#products .card .card-footer{
  color: #696969;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  text-transform: capitalize;
  letter-spacing: 2px;
  word-spacing: 5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
#products h3{
  font-size: 35px;
  margin-bottom: 40px;
  color: #888;
}
@media only screen and (max-width: 675px){
  #products h3{
    color: #000;
  }
}
#products a{
  /* display: block; */
  text-decoration: none;
  color: #fff;
}
#products .card .card-footer{
  color: #696969;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  text-transform: capitalize;
  letter-spacing: 2px;
  word-spacing: 5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
#products .send{
  background: transparent;
  color: #666;
  font-family: 'Poppins-Bold', sans-serif;
  font-size: 15px;
  text-transform: capitalize;
  letter-spacing: 2px;
  word-spacing: 5px;
  padding: 10px 18px;
  border-radius: 7px;
  box-shadow: 2px 2px 6px #d5d6c1;
}
#products .send:hover{
  /* background-color: #ac965a; */
  background: linear-gradient(rgba(128, 0, 0, .7), rgba(128, 0, 0, .9)), transparent;
  color: #fff;
}
#products .carousel .carousel-inner .carousel-item .card{
  border: solid 1px transparent;
  border-radius: 10px;
  box-shadow: 3px 3px 14px #eeea;
  transition: all .5s;
}
#products .carousel .carousel-inner .carousel-item .card:hover{
  transform: translateY(-4%);
  box-shadow: 1px 3px 24px #eeea;
}
/* @keyframes card-lift {
  0%{
    transform: translateY(0%);
  }
  100%{
    transform: translateY(12%);
  }
} */
#products .carousel .carousel-inner .carousel-item .card:hover .card-footer{
  background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), transparent;
  color: #fff;
  /* background-color: #000; */
}

/* @media only screen and (max-width: 400px){
  .first{
    display: none;
  }
  .second{
    display: none;
  }
  .third{
    display: block;
  }
  #products .carousel .carousel-inner .carousel-item .pic{
    height: 180px;
  }
} */
@media only screen and (max-width: 570px){
  .first{
    display: none;
  }
  .second{
    display: none;
  }
  .third{
    display: block;
  }
  #products .carousel .carousel-inner .carousel-item .pic{
    height: 220px;
  }
}
@media only screen and (min-width: 570px){
  .first{
    display: none;
  }
  .third{
    display: none;
  }
  .second{
    display: block;
  }
  #products .carousel .carousel-inner .carousel-item .pic{
    /* width: 200px; */
    height: 200px;
  }
}
@media only screen and (min-width: 800px){
  .first{
    display: none;
  }
  .third{
    display: none;
  }
  .second{
    display: block;
  }
  #products .carousel .carousel-inner .carousel-item .pic{
    /* width: 200px; */
    height: 280px;
  }
}
/* @media only screen and (min-width: 990px){
  .first{
    display: none;
  }
  .second{
    display: block;
  }

  #products .carousel .carousel-inner .carousel-item .pic{
    height: 200px;
  }
} */
@media only screen and (min-width: 1000px){
  .second{
    display: none;
  }
  .first{
    display: block;
  }
  #products .carousel .carousel-inner .carousel-item .pic{
    height: 280px;
  }
}

hr{
  background: #fff;
}

#tiles{
  margin-top: 100px;
  margin-bottom: 100px;
}
#tiles .container-fluid{
  background-color: white;
}
#tiles .tile a{
  display: block;
  /* text-decoration: none; */
  color: #000;
}

#contact{
  margin-bottom: 100px;
  padding: 100px 0;
  background: url(../img/body.jpg);
  background-position: center;
  background-size: cover;
}
#contact .container-fluid{
  width: 90%;
  padding: 0 100px;
}
#contact .card{
  color: #000;
  border: solid 2px transparent;
  border-radius: 15px;
  box-shadow: 0 0 10px 0 #bbc2c8;
}
#contact .card .send{
  background-color: #f37f81;
  color: #fff;
}
#contact .card .send:hover{
  background: linear-gradient(rgba(128, 0, 0, .7), rgba(128, 0, 0, .9)), transparent;
  color: #fff;
}
#contact .contact-head h4{
  font-size: 22px;
  font-family: 'Poppins-Light', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #555;
}
#contact .contact-head h2{
  font-size: 40px;
  font-family: 'Poppins-Bold', sans-serif;
  color: #555;
  padding-bottom: 15px;
  letter-spacing: 3px;
  word-spacing: 5px;
  /* text-align: left; */
  text-transform: capitalize;
}
#contact .contact-head .lifeline{
  height: 100px;
}
#contact .contact-links .contact-svg{
  height: 60px;
  opacity: .8;
}

#contact .contact{
  background-size: cover;
  background-position: bottom;
  font-size: 20px;
  /* height: 100%; */
}
#contact .contact .contact-links p{
  font-size: 16px;
  /* font-family: 'Poppins', sans-serif; */
  font-family: 'Ubuntu', sans-serif;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  color: #333;
  margin: 0;
}
#contact .contact .contact-links div a{
  box-shadow: 2px 2px 7px #eee;
  border-radius: 5%;
  height: 160px;
  width: 160px;
  background: #fff;
  margin-right: 20px;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  transition: all .4s;
}
#contact .contact .contact-links div a:hover{
  transform: scale(1.1);
}
#contact .contact a{
  display: inline;
  text-decoration: none;
  color: #fff;
}
@media only screen and (max-width: 900px){
  #contact .contact a{
    color: #696869;
  }
  #contact{
    margin-bottom: 100px;
    padding: 10px 0;
    background: url(../img/body.jpg);
    background-position: center;
    background-size: cover;
  }
  #contact .container-fluid{
    width: 100%;
    padding: 0 10px;
  }
  #contact .contact .contact-links div a{
    box-shadow: 2px 2px 7px #eee;
    border-radius: 5%;
    height: 100px;
    width: 100px;
    background: #fff;
    /* margin-right: 20px;     */
  }
  #contact .contact .contact-links p{
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
  }
  #contact .contact-links .contact-svg{
    height: 50px;
    opacity: .8;
  }
}
#contact img{
  transition: .5s all ease-in-out;
  transition-property: transform;
  opacity: 1;
  /* box-shadow: 2px 2px 8px #999; */
}
#contact img:hover{
  transform: scale3d(1.2, 1.2, 1.2);
  opacity: 1;
}
#contact #ad{
  color: #fff;
}

#form .send{
  background-color: #000;
  color: #fff;
}
#form .send:hover{
  background-color: orange;
  color: #000;
}
#address .map{
  width: 100%;
  height: 400px;
}
#address .site{
  font-size: 18px;
  /* font-style: Playfair; */
  margin-top: 40px;
  /* line-height: 35px; */
}
#address .ad p{
  margin: 0;
}

@media only screen and (max-width:700px){

  #about{
    font-size: 20px;
  }
  #team .card .card-body{
    /* font-size: 16px; */
  }
}


footer .cap{
  color: #000;
  background: #fff;
  margin: 0;
  box-shadow: 3px 3px 14px 2px #c0c5ce;
}
.footer-cap{
  margin: 0!important;
  background: #fff;
}

.footerend{
  background: linear-gradient(rgba(111, 111, 111, .5), rgba(111, 111, 111, .5)), url('../img/body-white.jpg');
  background-position: center;
  background-size: cover;
  color: #fff;
  margin: 0!important;
  padding: 0!important;
}
footer .footer-cap p a{
  display: inline;
  text-decoration: none;
  color: #696969;
}
footer .footer-cap p a:hover{
  color: orange;
}
footer .footerend a{
  display: inline;
  text-decoration: none;
  color: #fff;
  /* color: #ac965a; */
}
footer .footerend a:hover{
  color: orange;
}
footer .footerend i{
  color: #fff;
}
footer .footerend .row i:hover{
  color: orange;
}
footer .footerend .footer-font{
  font-size: 20px ;
}
footer .footerend .footer-fonta{
  font-size: 16px ;
}


#about .more a{
  display: inline;
  text-decoration: none;
  color: maroon;
}
#about .more a:hover{
  color: navy;
}
#products .more a:hover{
  color: navy;
}
#products .more a{
  font-size: 20px;
  display: inline;
  text-decoration: none;
  color: maroon;
}






#flexing{
  width: 100%;
  /* background: linear-gradient(rgba(234, 155, 195, .5), #fff); */
  background: linear-gradient(to right, rgba(222, 232, 232, .3) 10%, rgba(255, 255, 255, .3));
}
#flexing .flexing-container{
  width: 75%;
  margin: 0 auto;
  padding: 50px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 3em;
}
#flexing .flexo{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
#flexing .flexo .flexo-svg svg{
  height: 100px;
}
#flexing .flexo .product-txt{
  padding: 2em 0;
  text-align: center;
}
#flexing .product-txt h1{
  font-family: 'Ubuntu', sans-serif;
  font-size: 22px;
  text-transform: capitalize;
}
.product-head h3{
  font-family: 'Ubuntu', sans-serif;
  font-size: 42px;
  text-transform: capitalize;
}
#flexing .product-txt h2{
  /* font-family: sans-serif; */
  font-family: 'Poppins-Light', sans-serif;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 1px;
  word-spacing: 2px;
  padding-bottom: 10px;
}

#productlist a{
  text-decoration: none;
  color: #777;
}
#productlist .card{
  box-shadow: 2px 2px 18px #eee;
  border-radius: 8px;
  border: none;
  margin: 10px 30px;
}
#productlist .card img{
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}
#productlist a .med-name{
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  color: #666;
  /* padding-bottom: 15px; */
  letter-spacing: 2px;
  word-spacing: 4px;
  text-transform: capitalize;
  height: 40px;
}
#productlist a .med-about{
  font-size: 15px;
  font-family: 'Poppins-Light', sans-serif;
  letter-spacing: 1px;
  /* text-transform: uppercase; */
  color: #555;
}

@media (max-width: 1000px) {
  #productlist .card{
    box-shadow: 2px 2px 18px #eeea;
    border-radius: 8px;
    width: 300px;
    margin: 10px auto;
  }
}
