/*
Theme Name: Chemical Laboratory Pro
Theme URI: https://www.themeignite.com/products/chemical-laboratory
Author: Themeignite
Author URI: https://www.themeignite.com/
Description: The Chemical Laboratory WordPress Theme is a powerful and visually captivating solution designed specifically for adventure resorts, eco lodges, glamping sites, and nature-based vacation destinations. Whether you're managing a luxury mountain retreat, a riverside jungle lodge, or a budget adventure camp, this theme delivers a seamless platform to showcase your offerings and drive bookings.
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;
}