/*
Theme Name: Chemical Laboratory Pro
Theme URI: https://www.themeignite.com/products/chemical-laboratory
Author: Themeignite
Author URI: https://www.themeignite.com/
Description: The Laboratory WordPress Theme is a powerful and multipurpose solution designed to meet the digital needs of laboratories, research centers, analytical laboratory, research laboratory, clinical laboratory, pharmaceutical laboratory, biotechnology laboratory, environmental laboratory and scientific institutions. Its minimal, yet elegant and sophisticated design ensures your services are presented with clarity and professionalism. With a clean, responsive, and retina-ready layout, the theme provides an exceptional viewing experience across all devices.
Version: 0.0.1
Requires at least: 5.0
Tested up to: 6.0
Requires PHP: 5.6
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: chemical-laboratory-pro
Tags: one-column, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments

Chemical Laboratory Pro WordPress Theme has been created by Theclassictemplates (https://www.theclassictemplates.com), 2023.
Chemical Laboratory Pro WordPress Theme is released under the terms of the GNU GPL.
*/



/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* CSS Variables */
:root {
  --color-white: #ffffff;
  --color-black: #242424;
  --color-primary:#3368C6;
  --color-secondary:#031B4E;
  --font-Outfit: "Outfit", sans-serif;
}

/* Basic Style */


  html body {
    margin: 0;
    padding: 0;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    position: relative;
    color: var(--color-black);
    font-weight: 300;
    font-size: 15px;
    font-family: var(--font-Outfit);
    overflow-x: hidden;
    background-color:var(--color-white);
    overflow-x: hidden;
    width: 100%;
  }

.bypostauthor {
  font-weight: 600;
}
.wpcf7-spinner {
  display: none;
}
/*.sticky{
    position: unset;
}*/
/*--------- Site Loader --------------*/

    .preloader{
      display: flex;
      background: #FF5F6A;
      height: 100%;
      width: 100%;
      left: 0;
      bottom: 0;
      top: 0;
      position: fixed;
      z-index: 99999;
    }
    .preloader .loading-dot{
        width: 15px;
        height: 15px;
        margin: auto;
        border-radius: 50%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-shadow: 0px 40px 0px 0px #fff,0px -40px 0px 0px #fff,40px 0px 0px 0px #fff,-40px 0px 0px 0px #fff,
                    40px 40px 0px 0px #fff,-40px -40px 0px 0px #fff,40px -40px 0px 0px #fff,-40px 40px 0px 0px #fff;
        animation: load 3s infinite linear;
    }
    @keyframes load{
        0% {
            transform: rotate(0deg);
            box-shadow: 0px 40px 0px 0px #fff,0px -40px 0px 0px #fff,40px 0px 0px 0px #fff,-40px 0px 0px 0px #fff,
                        40px 40px 0px 0px #fff,-40px -40px 0px 0px #fff,40px -40px 0px 0px #fff,-40px 40px 0px 0px #fff;
        }
        25%{
            box-shadow: 0px 40px 0px 0px #fff,0px -40px 0px 0px #fff,40px 0px 0px 0px #fff,-40px 0px 0px 0px #fff,
                        -40px -40px 0px 0px #fff,40px 40px 0px 0px #fff,-40px 40px 0px 0px #fff,40px -40px 0px 0px #fff;
        }
        50%{
            box-shadow: 0px -40px 0px 0px #fff,0px 40px 0px 0px #fff,-40px 0px 0px 0px #fff,40px 0px 0px 0px #fff,
                        -40px -40px 0px 0px #fff,40px 40px 0px 0px #fff,-40px 40px 0px 0px #fff,40px -40px 0px 0px #fff;
        }
        70%{
            box-shadow: 0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,
                        0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff;
        }
        75%{
            width:10px;
            height:10px;
            box-shadow: 0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,
                        0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff;
        }
        80%{
            background-color: #fff;
            width:40px;
            height:40px;
            transform: rotate(360deg);
            box-shadow: 0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,
                        0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff;
        }
        85%{
            background-color: #fff;
            width:40px;
            height:40px;
            transform: rotate(360deg);
            box-shadow: 0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,
                        0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff;
        }
        90%{
            background-color: #fff;
            width:10px;
            height:10px;
            transform: rotate(360deg);
            box-shadow: 0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,
                        0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff;
        }
        95%{
            box-shadow: 0px 40px 0px 0px #fff,0px -40px 0px 0px #fff,40px 0px 0px 0px #fff,-40px 0px 0px 0px #fff,
                        40px 40px 0px 0px #fff,-40px -40px 0px 0px #fff,40px -40px 0px 0px #fff,-40px 40px 0px 0px #fff;
        }
        100%{
            transform: rotate(360deg);
            box-shadow: 0px 40px 0px 0px #fff,0px -40px 0px 0px #fff,40px 0px 0px 0px #fff,-40px 0px 0px 0px #fff,
                        40px 40px 0px 0px #fff,-40px -40px 0px 0px #fff,40px -40px 0px 0px #fff,-40px 40px 0px 0px #fff;
        }
    }








  .recentwork_box .recentwork-image:before, .recentwork_box .recentwork-image:after, .recentwork_box .overlay:before, .recentwork_box .overlay:after {
    background-color: #000;
  }
  .recentwork_box .recentwork-image:before, .recentwork_box .recentwork-image:after, .recentwork_box .overlay:before, .recentwork_box .overlay:after {
    content: '';
    background: #ffd317;
    opacity: 0.4;
    height: 100%;
    width: 25%;
    transform: translateY(-100%);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transition: all 0.3s;
  }
  .recentwork_box .recentwork-image .overlay:after {
    transition-delay: 0s;
  }
  .recentwork_box .recentwork-image .overlay:before {
    left: 50%;
  }
  .recentwork_box .recentwork-image .overlay:after {
    left: 75%;
  }
  .recentwork_box .recentwork-image:before {
    left: 25% ! important;
  }
  .recentwork_box .recentwork-image {
    overflow: hidden;
  }
  .recentwork_box .recentwork-image img{
    transform: scale(1);
    transition: all 1s ease 0s;
  }

  .recentwork_box:hover .recentwork-image:before, .recentwork_box:hover .recentwork-image:after, .recentwork_box:hover .overlay:before, .recentwork_box:hover .overlay:after{
    transform: translateY(0%);
  }

  .recentwork_box:hover .recentwork-image .overlay:after {
    transition-delay: 0s;
  }
  .recentwork_box:hover .recentwork-image:before {
    transition-delay: 0.225s;
  }
  .recentwork_box:hover .recentwork-image .overlay:before {
    transition-delay: 0.15s;
  }
  .recentwork_box:hover .recentwork-image:after {
    transition-delay: 0.05s;
  }


  .blogs .bolg-image{
    overflow: hidden;
  }
  .blogs:hover .bolg-image img {
    transform: scale(1.07);
    overflow: visible;
    transition: 0.5s ease-in-out;
}



.process-step-box:hover .image img {
    transition: 1s;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
}
.circle img{
  animation: pulse 1s infinite ease-in-out alternate;
}



#menu-primary-menu li:hover ul.sub-menu {
  left: auto;
  top: 35px;
  text-align: left;
  -ms-animation: zoomIn .3s ease-in-out;
  -webkit-animation: zoomIn .3s ease-in-out;
  animation: zoomIn .3s ease-in-out;
}


/* video popup */
.modal-new {
  display: none;
  position: fixed;
  z-index: 999999999999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,.4);
}
.myVideo-inner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Modal Content */
.modal-contents {
  background-color: #fff;
  margin: auto;
  padding: 6px;
  width: 45%;
  transition: 2s;
  border-radius: 10px;
}
/* The Close Button */
 .close-one{
  color: #252525;
  float: right;
  font-size: 28px;
  padding-right: 20px;
  cursor: pointer;
  background: transparent;
  border: none;
  font-weight: 900;
}

/* Notification Bar */
.mtsnb .mtsnb-container {
    padding: 5px 0px;
}
.mtsnb .notification-bar a {
	font-weight: 600;
	background: #fff;
	border-radius:6px;
	color: #031b4e;
	padding: 5px 8px;
	margin: 5px 0 5px 10px;
	display: inline-block;
}
.site-header .stickynavbar {
	top: 50px;
}
.home #header_navigation,
#header_navigation {
	top: 0px;
}
@media only screen and (min-width: 250px) and (max-width: 767px) {
	.sidenav {
		top: 90px;
	}
	.home #header_navigation,
#header_navigation {
	top: 15px;
}
}
@media only screen and (min-width: 780px) and (max-width: 1023px) {
	.sidenav {
		top: 90px;
	}
}
@media only screen and (max-width: 780px){
	.home #header_navigation, #header_navigation {
		top: 23px;
	}
}
@media only screen and (max-width: 375px){
	    .sidenav {
        top: 132px;
    }
}
/* Buy Now */
#footer .menu-item-124 a{
	background-color: #fff !important;
    color: #031B4E !important;
    border-radius: 30px !important;
    padding: 5px 22px !important;
    transition: all 0.6s;
}
.menu-item-125 a {
	background-color: #3368c6 !important;
	color: #fff !important;
	border-radius: 30px !important;
	padding: 5px 10px !important;
	transition: all 0.6s;
	font-size: 16px;
}
.menu-item-125 a:hover{
	background-color: #031B4E !important;
    	color: #fff !important;
}
.menu-item-124 a:hover {
	background-color: #3368c6 !important;
    	color: #fff !important;
}