body,
html {
  overflow-x: hidden;
  background-color: whitesmoke;
  font-family: Pacifico;
}

a{
  text-decoration: none;
}

.btn {
  cursor: pointer;
}





/*********************************************************Navbar**************************************************/

.navbar {
  background-color:white;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* .navbar-toggler {
  color:black;
  border:2px solid rgb(222, 52, 14);
} */

.navbar .navbar-nav .nav-link {
  color: rgb(222, 52, 14);
  font-weight: 600;
  font-size: 16px;
}
.navbar .navbar-nav .nav-link:hover {
color: black;
}

/* .navbar .navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
} */

.navbar .navbar-collapse {
  background-color:white;
  justify-content: center;
}

.navbar ul {
   /* padding-top: 38px; */
}
@media (max-width: 768px){
  .navbar ul {
   padding-left: 18px;
  }
}

.navbar .dropdown-menu {
  background-color:white;
}

.navbar .dropdown-item {
  font-weight: bold;
  color: rgb(222, 52, 14);
}
.navbar .dropdown-item:hover{
  color: black;
}


nav .btn{
  background-color: rgb(222, 52, 14);
  color: white;
  font-weight: bold;
  border-radius: 30px;
}

 .social-icon-nav{
  padding: 5px;
  font-size: 25px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  font-family: Arial, Helvetica, sans-serif;
}  

.circle-effect{
  width: 50px;
  height: 50px;
  border: 5px solid rgb(222, 52, 14);
  background-color: transparent;
  border-radius: 80px;
  position:relative ;
  left: 40%;
  z-index: 1;
  animation:effect 2s infinite linear;
}

@keyframes effect {
  0% {
    transform: scale(1,1);
    opacity: 0.9;
  }
  25% {
    transform: scale(1.2,1.2);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.4,1.4);
    opacity: 0.6;
  }
  75% {
    transform: scale(1.6,1.6);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.8,1.8);
    opacity: 0.2;
  }
}


@media (max-width: 992px){
  .circle-effect{
    display: none;
  }
}
.what{
  color:rgb(38, 212, 102);
  font-size: 40px;
  transition: 0.5s;
}
.what:hover{
  transform: scale(1.3);
}

/************************************************************* End Navbar *****************************************************/





/******************************************** Carousal ***********************************************************/

.opacity {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  /* Adjust the opacity here */
}

.caro-animation {
  animation: caro-animation 6s infinite;
}

@keyframes caro-animation {
  from {
    transform: scale(1, 1);
  }

  to {
    transform: scale(1.2, 1.2);
  }
}

/********************************************End Carousal ***********************************************************/


.video-heading{
  position: absolute; 
  top: 50%;
   left: 50%; 
  transform: translate(-50%, -50%);
  color: white;
  font-size: calc(2vw + 0.8rem);
  border: solid 2px white;
  box-shadow: 0px 0px 10px 0px white;
  background-color:rgb(222, 52, 14);
  padding: 20px;
  border-radius: 30px;
  white-space: nowrap;
  font-family: Pacifico;
  transition: 0.5s;
  cursor: pointer;
}
.video-heading:hover{
  color: rgb(245, 78, 41);
  font-size: calc(1vw + 1.5rem);
  border: solid 2px rgb(245, 78, 41);
  box-shadow: 0px 0px 10px 0px rgb(245, 78, 41);
  background-color:white;

}

@media (max-width:700px){
  .video-heading{
    top:30%
  }
}


.healthcare-heading{
  position: absolute; 
  top: 50%;
   left: 50%; 
  transform: translate(-50%, -50%);
  color: white;
  font-size: calc(2vw + 0.8rem);
  border: solid 2px white;
  box-shadow: 0px 0px 10px 0px white;
  background-color:rgb(222, 52, 14);
  padding: 20px;
  border-radius: 30px;
  white-space: nowrap;
  font-family: Pacifico;
  transition: 0.5s;
  cursor: pointer;
}
.healthcare-heading:hover{
  color: rgb(245, 78, 41);
  font-size: calc(1vw + 1.5rem);
  border: solid 2px rgb(245, 78, 41);
  box-shadow: 0px 0px 10px 0px rgb(245, 78, 41);
  background-color:white;

}

@media (max-width:700px){
  .healthcare-heading{
    padding: 10px;
  }
}


.controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.controls button {
  padding: 5px 10px;
  font-size: 12px;
  background-color: black;
  border-radius: 50%;
  margin-right: 10px;
  cursor: pointer;
}







/************************************************* 2 cricle photo **************************************************/

.circle-photo{
width:80%;
height:450px;
margin: auto;
overflow: hidden;
border-top-left-radius: 70px;
border-bottom-right-radius: 70px;
/* clip-path: circle(50% at 50% 50%); */
transition:0.5s;
background-color: red;
}
.circle-photo img:hover{
transform: scale(1.2,1.2);
transition: 1s;
}

/*************************************************End 2 cricle photo **************************************************/


/*************************************************WELCOME TO SUSHMA **************************************************/
.welcome .btn{
  padding: 7px 25px;
  background-color:rgb(222, 52, 14);
  color: white;
  font-weight: bold;
  font-size: 16px;
}
.welcome .btn:hover{
  border:2px solid rgb(222, 52, 14);
  color: black;
  background-color:white;
  }
/*************************************************End WELCOME TO SUSHMA **************************************************/




/*************************************************4 small box **************************************************/
.box3{
  padding-left: 7%;
  padding-right: 7%;
}
.box3-col{
  display: flex;
  padding-top: 5vw;
  justify-content: center;
}

.box3 i{
  margin-top: 5px;
  font-size: 40px;
  color:rgb(222, 52, 14);;
}

.box3 h4{
  color:rgb(222, 52, 14);;
  font-weight: bold;
}


/************************************************* End 4 small box **************************************************/






/************************************************* footer *******************************************************************/


.foot {
  background-color: black;
  color: white;
}

.foot ul li {
  list-style: none;
  padding: 2%;
}

.foot ul li a{
color: white;
}
.foot ul li a:hover{
  color:rgb(222, 52, 14) ;
  }

.foot ul li:hover {
  text-decoration: underline;
  color:rgb(222, 52, 14) ;
}

.foot h2 {
  font-size: 19.8px;


}

.foot i{
  color: white;
  font-size: 25px;
}

.footerbox {
  border-radius: 10px;
  padding-top: 5px;
}


.input-box {
  width: 300px;
  padding: 10px;
  /* border: 1px solid #ccc; */
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.foot input {
  background-color: black;
  border: solid 1px gray;
  color: white;
}

.foot input::placeholder{
  color: white;
  font-size: 12px;
  opacity: 0.5;
}

.input-box label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.ok-button{
  background-color:rgb(222, 52, 14);
  color: white;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.enterboxandbtn {
  display: flex;
}



/***************************************************End footer *******************************************************************/









                                   /********************* About us ***************/

/********************************************************** About us **************************************************/
.parallex{
  background-image: url(./photos/lab-reserch.jpg);
  width: 100%;
  height: 80vh;
  background-size: cover;
  background-attachment: fixed;
}

.logo-shape{
  background-color: rgb(188, 224, 212);
  clip-path: polygon(0 0, 50% 6%, 100% 0, 100% 100%, 50% 95%, 51% 95%, 0 100%, 0 20%);
}

.quality{
  background-color: rgb(16, 15, 15,0.7);
  color: white;
  width: 25%;
  position: absolute;
  left: 20%;
  transform: translateX(-50%);
  top: 25%;
}

@media (max-width: 768px) {
  .quality{
    width: 90%;
    left: 5%;
    text-align: center;
    transform: none;
  }
}

.box8 {
  background-color: whitesmoke;
}

.box8a {
  margin-top: 3vw;
  background-color: whitesmoke;
  position: relative;
  left: 0%;
  animation: box8a 2s;
}

.box8b-a,
.box8b-b,
.box8b-c,
.box8b-d {
  margin-top: 15px;
  background-color: white;
  padding-top: 2%;
  padding-left:2% ;
  padding-right:2% ;
  margin-left: 2vw;
  box-shadow: 0px 0px 10px 0px #182A58;
  border-radius: 30px;
  transition: 1s;
  animation: updown 1s infinite;
  animation-direction: alternate-reverse;
}



.box8b-a:hover,
.box8b-b:hover,
.box8b-c:hover,
.box8b-d:hover {
  margin-top: 1vw;
  background-color:#182A58;
  padding-top: 2%;
  padding-left:2% ;
  padding-right:2% ;
  margin-left: 2vw;
  box-shadow: 0px 0px 10px 0px #182A58;
  border-radius: 30px;
  color: white;
}



.slid .Marquee {
  width: 98%;
  padding: 1em;
  color: white;
  font-weight: 200;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.slid .Marquee-content {
  display: flex;
  animation: marquee 12s linear infinite running;
}

.slid .Marquee-content:hover {
  animation-play-state: paused;
}

.slid .Marquee-tag {
  margin: 3em;
  padding: .5em;
  background: rgba(255, 255, 255, .1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  height: 300px;
}

.slid .Marquee-tag:hover {
  background: rgba(255, 255, 255, .5);
  transform: scale(1.1);
  cursor: pointer;
}

@keyframes marquee {
  0% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/**********************************************************End About us **************************************************/










                                    /********************* human health ***************/

/********************************************************** human health **************************************************/
.bg-human{
  background-image: url(./photos/ste.jpg);
  width: 100%;
  height: 300px;
  background-size: cover;
}

.card-title{
  color: black;
  font-weight: bold;
}
.card-button{
  border: solid 2px rgb(222, 52, 14);
  color: rgb(222, 52, 14);
  font-weight: bold;
}
.card-button:hover{
  border: solid 2px rgb(222, 52, 14);
  color:white;
  font-weight: bold;
  background-color: rgb(222, 52, 14);
}

.card-hover{
background-color:rgb(245, 237, 235);
height: 400px;
overflow: hidden;
}
.card-hover:hover{
  transition: 0.5s;
  box-shadow: 0px 0px 10px 0px rgb(222, 52, 14);
  border-bottom-left-radius: 50px;
  border-top-right-radius: 50px;
  transform: scale(1.05,1.05);
}
.card-hover img:hover{
  border-top-right-radius: 50px;
}



/**********************************************************End human health **************************************************/











                                                /********** Discription ***********/

/********************************************************** Discription **************************************************/

.discription {
  display: none;
}

.visible {
  display: block;
}

.discription-button{
text-align: right;
  }

.discription-button button{
border: 2px solid rgb(178, 172, 172);
color: rgb(178, 172, 172);
font-weight: bold;
}





/* tabs */
.nav-pills .nav-link {
font-weight: bold;
color: black;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color:white;
  background-color: rgb(222, 52, 14);
}






/* Carousal */

.product .card {
  position: relative;
  display: flex;
  width: 600px;
  height: 400px;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #d2d2dc;
  border-radius: 11px;
  -webkit-box-shadow: 0px 0px 5px 0px rgb(249, 249, 250);
  -moz-box-shadow: 0px 0px 5px 0px rgba(212,182,212,1);
  box-shadow: 0px 0px 5px 0px rgb(161, 163, 164);
}

/* .items .card {
  width: 300px !important;
} */

.product .profile-image{
  width: 100%;
  height: 290px;
  border-top-left-radius: 11px !important;
  border-top-right-radius: 11px;
}

.product .card-body {
   padding: 1.25rem;
}
.product .card-title{
  font-size: 19px;
  font-weight: bold;
  margin: 0;  /* ye h5 and p ke gap */
}
.product .card-text{
   font-size: 0.875rem;
   margin-bottom: .5rem;
   line-height: 1.5rem; 
}

.product {
  width: 100%;   /* carousal width */
  margin: 0px auto;
}

.product .slick-slide {
margin: 10px;  /* Card gap */
}

/* Center prev and next icons in the middle of the carousel */
.product .slick-prev{
top: 50%;
left: -2%;
z-index: 1;
}
.product .slick-next {
top: 50%;
right: -2%;
}
/* Adjust styling of prev and next icons */
.product .slick-prev:before,
.product .slick-next:before {
font-size: 30px;
color: rgb(191, 11, 11);
}
/* Make the dots white for better visibility */
.product .slick-dots li button:before {
color: white;
}



/**********************************************************End Discription **************************************************/









/*********************************************************Read More 1 **************************************************/
   /* carousal */
   .owl-buttons {
    display: block;
  }

  .owl-carousel:hover .owl-buttons {
    display: block;
  }

@media (max-width:630px){
  .thumbnail img{
    width:70%;
  }
}

  .owl-item {
    text-align: center;
  }

  div.owl-buttons{
      display: none;
  }
 
.owl-theme .owl-controls .owl-buttons div.owl-prev,
.owl-theme .owl-controls .owl-buttons div.owl-next{
  background:white;
  opacity: 0.5;
}

 /* icon prev next */
  .fa-chevron-circle-left:before
  {
    content: "\f137";
    color: red;
    font-size: 30px;
    position: absolute;
    top: 25%;
    left: 0;
    
  }

  .fa-chevron-circle-right:before{
    content: "\f138";
    color: red;
    font-size: 30px;
    position: absolute;
    top: 25%;
    right: 0;
}

/* big box zoom effect */
  .zoom {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: zoom-in;
  }


  figure img {
    transition: transform 0.5s;
    display: block;
    width: 100%;
  }


/********************************************************* End Read More 1 **************************************************/