/*Reset CSS*/
*
{
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    font-family: Calibri;
    list-style-type: none;
    box-sizing: border-box; 
      outline:0px;
}
/*Smooth Scroll*/
html {
  scroll-behavior: smooth;
}
/* Social Bar */
.icon-bar {
  position: fixed;
  top: 70%;
  right:0px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.instagram {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

.content {
  margin-left: 75px;
  font-size: 30px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/*--------------------------------------------------*/
/*Page Loader*/
#Pre-Loader
{
    width:100%;
    height:100vh;
    text-align:center;
}
#Pre-Loader span
{
    color:#3498db;
}
#loader {
  width: 120px;
  height: 120px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin: 50px auto;
}


@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}
/*-----------------------------------------------------------------------*/
/* Main Content */
#FCE
{
    width:100%;
    display:none;
}
.collapse
{
    width:100%;
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 49%;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #3498db;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  padding:15px;
}

#myBtn:hover {
  background-color: #555;
}
/*-----------------------------------------------------------------------*/
/*Navigation*/
#navig
{
    position:sticky;
    top:0px;
    background-color:White;
    z-index:99;
    border-bottom:1px solid black;
    transition:0.6s;
}
.navig
{
    position:relative;
}
.navig li
{
    display:inline-block;
    padding:5px;
    margin:5px;
}
.navig li:hover, .navig a:hover
{
   color:#3498db;
}
.navig a
{
    display:block;
    color:Black;
    font-size:2vw;
}
.dropdown-content, .dropdown-contenti {
  display: none;
  background-color: #ffffff;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  position: absolute;
  z-index: 50;
  width:80%;
  left:10%;
  padding:10px;
  text-align:center;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdowni:hover .dropdown-contenti {
  display: block;
}
.cheek
{
    width:32%;
    padding:20px;
    float:left;
    margin:0px 0.5%;
    line-height:inherit;
}
.cheek:hover, .cheeki:hover
{
    background-color:#F8F8FF;
}
.cheek img, .cheeki img
{
    width:50px;
    height:50px;
    margin:auto;
}
.cheek p, .cheeki p
{
    font-size:1.5vw;
}
.cheeki
{
    width:48%;
    padding:20px;
    float:left;
    margin:0px 0.5%;
    line-height:inherit;
}
.navig li:first-child
{
    float:left;
    margin:0 5% 0 5%;
    width:10%;
    text-align:center;
}
.navig li:first-child img
{
    width:100%;
}
.navig li:last-child
{
    float:right;
    margin-right:5%;
    text-align:center;
    width:50px;
}
.navig li:last-child img
{
    width:100%;
    height:100%;
}
/*-----------------------------------------------------------------------*/
/*Slider*/
.image-slideshow {
  width: 100vw;
  position: relative;
  margin:auto;
  text-align:center;
  z-index:-1;
}

.image-slideshow img {
  width:100%;
  height:80vh;
  background-position:center;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: 0.2}
  to {opacity: 1}
}
/*-----------------------------------------------------------------------*/
/*Company*/
.cicon
{
    width:100%;
    padding-left:150px;
    padding-top:100px;
}
.cicon img
{
    width:150px;
    height:50px;
}
.company
{
    width:100%;
    padding:30px 150px 200px 150px;
    text-align: justify;
    text-justify: inter-word;
}
.pl
{
    float:left;
    font-size:2vw;
    max-width:40%;
    padding-right:75px;
}
.pr
{
    float:right;
    font-size:1.5vw;
    max-width:60%;
}
/*-----------------------------------------------------------------------*/
/*Company Menu*/
.Cmenu
{
    transition:0.4s;
    width:100%;
    padding:100px;
    background-color:#f2f2f2;
    opacity:0.0;
    margin-left:-500px;
}
.Cmenu li
{
    background-color:transparent;
    text-align:left;
    font-size:1.5vw;
}
.Cmenu img
{
    width:300px;
    display:inline-block;
    margin-bottom:25px;
}
.SDPlus
{
    display:inline-block;
    width:49.5%;
    padding:15px;
    margin-bottom:25px;
}
.SDMinus
{
    display:inline-block;
    padding:15px;
    width:49.5%;
    margin-bottom:25px;
}
.Cmenu:hover
{
    margin-left: 0px;
    opacity: 1.0;
}

/*-----------------------------------------------------------------------*/
/*Footer*/
.lower
{
    text-align: left;
    width: 100%;
    color: White;
    background-color: #121317;
    padding:50px 100px;
}
.lowerul, .loweruli
{
    font-size:2vw;
    width: 19%;
    display: inline-block;
}
.lowerul li
{
    padding-left:25px;
    font-size: 1.2vw;
    color: Black;
    padding-top: 10px;
}
.lowerul a, .loweruli a
{
    color: White;
}
.loweruli li
{
    display:inline-block;
}
.loweruli
{
    text-align:center;
}
.loweruli p
{
    font-size: 1.5vw;
    text-align: justify;
}
.loweruli a:hover
{
    background-color:white;
    color:#121317;
}
/*-----------------------------------------------------------------------*/
/*Designed by*/
.design
{
    padding:30px;
    text-align: center;
    font-size: 1vw;
    margin-bottom:20px;
}
.design a
{
    color: inherit;
}
.design a:hover
{
    text-decoration:underline;
}
/*-----------------------------------------------------------------------*/
/*Highlights*/
#highlights
{
    width:100%;
    background-image:url("../images/basic/laboratory-equipment.jpg");
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    padding:100px 0px;
    text-align:center;
}
#highlights h1
{
    font-size: 3vw;
    margin-bottom: 50px;
}

.highlight
{
    width:25%;
    max-height:1000px;
    margin:4%;
float:left;
    background-color:#f6f6f6;
    padding:25px;
}
.highlight a
{
    display:block;
    text-decoration:none;
    color:Black;
}
.highlight img
{
    width:80%;
    height:200px;
    border-radius:10px;
}
.highlight span
{
    text-align:justify;
    font-size:2vw;
    margin:20px 0px;
}
.highlight p
{
    text-align:justify;
    font-size:1.2vw;
    margin:20px 0px;
}
/*-------------------------------------------------------------*/
/*Main Video*/
#MainVideo
{
    width:100%;
    padding:100px;
    margin:auto;
    text-align:center;
}
#MainVideo iframe
{
    width:80vw;
    height:80vh;
    border-radius:20px;
}
/*-------------------------------------------------------------*/
/*Achiev*/
#achive
{
    width:100%;
    padding:100px;
    text-align:center;
}
.achive
{
    width:20%;
    padding:25px;
}
/*Counter*/
#achive
{
    width:100%;
    background-color:#121317;
}
.wrapper
{
    
    width:80vw;
    display:flex;
    justify-content:space-around;
    gap:10px;
    
}
.container
{
    width:28vmin;
    height:28vmin;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    padding:1em 0;
    position:relative;
    font-size:16px;
    border-radius:0.5em;
    background-color:#21242b;
    border-bottom:10px solid #18f98f;
}
.container i
{
    color:#18f98f;
    font-size:2.5em;
    text-align:center;
}
.container span.num
{
    color:#ffffff;
    display:grid;
    place-items:center;
    font-weight:600;
    font-size:3em;
}
.container span.text
{
    color:#e0e0e0;
    font-size:1em;
    text-align:center;
    padding:0.7em 0;
    font-weight:400;
    line-height:0;
}




/* About Page ------------------------------*/
#coverage
{
    width:80%;
    margin:auto;
    padding:100px;
}
.covrleft
{
    width:20%;
    vertical-align:middle;
    float:right;
    margin-top:200px;
}
.covrmid
{
    width:78%;
    text-align:center;
}

#Says
{
    background-color:#121317;
    position:relative;
    width:100%;
      color:White;
  text-align:center;
  padding:50px;
  height:600px;
  overflow:hidden;
}
#Says h1
{
    margin-bottom:50px;
    font-weight:bold;
}
.itemimg
{
    width:200px;
    height:200px;
    border-radius:50%;
    border:2px solid white;
    margin:25px;
}
.item-1, 
.item-2, 
.item-3,
.item-4 {
    position: absolute;
    display: block;
    width: 50%;
    font-size: 2vw;

	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}
.item-4
{
    animation-name: anim-4;
}

@keyframes anim-1 {
	0%, 5% { left: -100%; opacity: 0; }
  5%,20% { left: 25%; opacity: 1; }
  25%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 25% { left: -100%; opacity: 0; }
  30%, 45% { left: 25%; opacity: 1; }
  50%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 50% { left: -100%; opacity: 0; }
  55%, 70% { left: 25%; opacity: 1; }
  75%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-4 {
	0%, 75% { left: -100%; opacity: 0; }
  80%, 95% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}








/* Respnsive Site */

/* Small devices (phones, 425px and up) */
@media only screen and (max-width: 425px) 
{
.navig li
{
    display:block;
    width:100%;
    text-align:center;
    border-bottom:1px solid black;
    padding:10 0px;
    margin:0px;
}
.navig li:first-child
{
    float:none;
    margin:auto;
    width:100%;
    text-align:center;
    border-bottom:1px solid black;
}
.navig li:first-child img
{
    width:25%;
}
.navig li:last-child
{
    display:none;
}
.navig a
{
    font-size:5vw;
    font-weight:bold;
}
#navig
{
    position:relative;
    border-bottom:none;

}
.cheek p, .cheeki p
{
    font-size:4vw;
}

.lower
{
    text-align: center;
    width: 100%;
    padding:25px 0px;
}
.lowerul
{
    margin-bottom:25px;
}
.lowerul, .loweruli
{
    font-size:6vw;
    width: 100%;
    display:block;
}
.lowerul li
{
    padding-left:0px;
    font-size: 5vw;
    border-bottom:1px solid white;
}
.lowerul a, .loweruli a
{
    color: White;
}
.loweruli a
{
    font-size:10vw;
}
.loweruli li
{
    display:inline-block;
}
.loweruli
{
    text-align:center;
}
.loweruli p
{
    font-size: 5vw;
    padding:25px;
}
.design
{
    display:none;
}
.image-slideshow img {
  height:35vh;
}
.cicon
{
    padding-left:0px;
    padding-top:0px;
    text-align:center;
    padding-top:25px;
}
.cicon img
{
    width:50%;
}
.company
{
    width:80%;
    margin:auto;
    padding:25px 0px;
    text-align: justify;
    text-justify: inter-word;
}
.pl
{
    float:none;
    font-size:5vw;
    max-width:100%;
    padding-right:0px;
}
.pr
{
    float:none;
    font-size:5vw;
    max-width:100%;
}
.Cmenu
{
    transition:0s;
    width:100%;
    padding:0px;
    background-color:#f2f2f2;
    opacity:1.0;
    margin:0px;
}
.Cmenu li
{
    font-size:5vw;
}
.Cmenu img
{
    width:80%;
    display:block;
}
.SDPlus
{
    display:block;
    width:80%;
}
.SDMinus
{
    padding:15px;
    width:80%;
}
#highlights
{
    padding:0px;
}
#highlights h1
{
    font-size: 6vw;
    margin:0px;
    padding:50px 0px;
}
.highlight
{
    width:80%;
    max-height:auto;
    margin:20px auto;
    float:none;
}
.highlight img
{
    height:auto;
}
.highlight span
{
    text-align:center;
    font-size:5vw;
    margin-top:20px;
}
#achive
{
    padding:50px 0px;
}
.wrapper
{
    width:90vw;
    flex-wrap:wrap;
    gap:30px;
}
.container
{
    height:30vmin;
    width:80%;
    font-size:14px;
}
.container i
{
    font-size:1.5em;
}
.container span.num
{
    font-weight:300;
    font-size:2em;
}
.container span.text
{
    font-size:1.2em;
    padding:0.7em 0;
    font-weight:400;
}
#MainVideo
{
    padding:25px;
}
#MainVideo iframe
{
    width:80vw;
    height:40vh;
    border-radius:10px;
}
.icon-bar a {
    padding: 10px;
    font-size: 4vw;
}
#myBtn {
  bottom: 10px;
  right: 47.5vw;
  font-size:2.5vw ;
  border-radius: 4px;
  padding:1.5vw;
}

#coverage
{
    padding:0px;
}
.covrleft
{
    width:100%;
    float:none;
    margin-top:25px;
    text-align:center;
    margin-bottom:25px;
}
.covrmid
{
    width:100%;
    margin-bottom:25px;
}

#Says
{
  padding:0px;
  height:300px;
}
#Says h1
{
    margin:25px 0px;
    font-size:5vw;
}
.itemimg
{
    width:100px;
    height:100px;
    border-radius:50%;
    border:1px solid white;
    margin:0px;
}
.item-1, 
.item-2, 
.item-3,
.item-4 {
    width: 50%;
    font-size: 4vw;
    margin:0px;
    padding:0px;
}

}

/* Medium devices (Tablets, 768px and up) */
@media only screen and (min-width: 426px) and (max-width: 768px)
{
.navig a
{
    font-weight:bold;
}

.navig li:last-child img
{
    width:60%;
    height:60%;
}
.cheek p, .cheeki p
{
    font-size:2vw;
}
.lowerul
{
    margin-bottom:25px;
}
.lowerul 
{
    font-size:4vw;
    width: 49%;
    display:inline-block;
}
.loweruli
{
    display:block;
    width:100%;
    padding:50px;
    font-size:3.5vw;
}
.lowerul li
{
    padding-left:20px;
    font-size: 3vw;
}
.loweruli a
{
    font-size:5vw;
}
.loweruli p
{
    font-size: 2.5vw;
    padding:25px;
}
.design
{
    font-size:2vw;
}
.image-slideshow img {
  height:50vh;
}
.cicon
{
    padding-left:0px;
    padding-top:0px;
    text-align:center;
    padding-top:25px;
}
.cicon img
{
    width:20%;
}
.company
{
    width:80%;
    margin:auto;
    padding:25px 0px;
    text-align: justify;
    text-justify: inter-word;
}
.pl
{
    float:none;
    font-size:3vw;
    max-width:100%;
    padding-right:0px;
    margin-bottom:25px;
}
.pr
{
    float:none;
    font-size:3vw;
    max-width:100%;
}
.Cmenu
{
    transition:0s;
    padding:auto;
    opacity:1.0;
    margin-left:0px;
}
.Cmenu li
{
    text-align:left;
    font-size:3vw;
}
.Cmenu img
{
    width:40%;
    display:block;
}
.SDPlus
{
    display:block;
    width:100%;
}
.SDMinus
{
    display:block;
    width:100%;
}

#highlights
{
    padding:0px;
}
#highlights h1
{
    font-size: 4vw;
    margin:0px;
    padding:50px 0px;
}
.highlight
{
    width:50%;
    max-height:500px;
    margin:20px auto;
    float:none;
}
.highlight img
{
    height:auto;
}
.highlight span
{
    text-align:center;
    font-size:2.5vw;
    margin-top:20px;
}
#achive
{
    padding:50px 0px;
}
.wrapper
{
    width:90vw;
    flex-wrap:wrap;
    gap:30px;
}
.container
{
    height:30vmin;
    width:40%;
    font-size:14px;
}
.container i
{
    font-size:1.5em;
}
.container span.num
{
    font-weight:300;
    font-size:2em;
}
.container span.text
{
    font-size:1.2em;
    padding:0.7em 0;
    font-weight:400;
}
#MainVideo
{
    padding:25px;
}
#MainVideo iframe
{
    width:80vw;
    height:50vh;
    border-radius:10px;
}
.icon-bar a {
    padding: 10px;
    font-size: 3vw;
}
#myBtn {
  bottom: 10px;
  right: 47.5vw;
  font-size:2.5vw ;
  border-radius: 4px;
  padding:1.5vw;
}

#coverage
{
    width:100%;
    margin:auto;
    padding:25px;
}
.covrleft
{
    width:20%;
    vertical-align:middle;
    float:right;
    margin-top:100px;
}
.covrmid
{
    width:78%;
    text-align:center;
    padding-left:25px;
}

#Says
{
    background-color:#121317;
    position:relative;
    width:100%;
      color:White;
  text-align:center;
  padding:50px;
  height:600px;
  overflow:hidden;
}
#Says h1
{
    margin-bottom:50px;
    font-weight:bold;
}
.itemimg
{
    width:200px;
    height:200px;
    border-radius:50%;
    border:2px solid white;
    margin:25px;
}
.item-1, 
.item-2, 
.item-3,
.item-4 {
    position: absolute;
    display: block;
    width: 50%;
    font-size: 2vw;

	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

}

/* Large devices (laptops/desktops, 1024px and up) */
@media only screen and (min-width: 769px) and (max-width: 1024px)
{
    .navig a
{
    font-weight:bold;
}

.navig li:last-child img
{
    width:80%;
    height:80%;
}
.cheek p, .cheeki p
{
    font-size:2vw;
}
.lowerul 
{
    font-size:3vw;
}
.loweruli
{
    font-size:2.5vw;
    margin-left:25px;
}
.lowerul li
{
    font-size: 2vw;
}
.loweruli a
{
    font-size:2.5vw;
}
.loweruli p
{
    font-size: 2vw;
}
.design
{
    font-size:1.5vw;
}
.image-slideshow img {
  height:60vh;
}
.pl
{
    font-size:2vw;
}
.pr
{
    font-size:2vw;
}
.Cmenu li
{
    font-size:2vw;
}
.Cmenu img
{
    width:40%;
}
.highlight
{
    height:300px;
}
.highlight img
{
    height:200px;
}
.highlight span
{
    font-size:2vw;
}

#achive
{
    padding:50px 0px;
}
.wrapper
{
    width:90vw;
    flex-wrap:wrap;
    gap:30px;
}
.container
{
    height:30vmin;
    width:20%;
    font-size:14px;
}
.container i
{
    font-size:1.5em;
}
.container span.num
{
    font-weight:300;
    font-size:2em;
}
.container span.text
{
    font-size:1.2em;
    padding:0.7em 0;
    font-weight:400;
}
#MainVideo
{
    padding:25px;
}
#MainVideo iframe
{
    width:80vw;
    height:60vh;
    border-radius:10px;
}
.icon-bar a {
    padding: 10px;
    font-size: 2vw;
}
#myBtn {
  bottom: 10px;
  right: 48.5vw;
  font-size:1.5vw ;
  border-radius: 4px;
  padding:1vw;
}
.covrleft
{
    width:20%;
    vertical-align:middle;
    float:right;
    margin-top:100px;
}
}