:root{
  --theme-color: #db214d;
}
/* Test Tube CSS */
:root{--tube-percentage:70%;--tube-title:CSS;--tube-color: var(--theme-color)}
.handle-preloader {
  background: #ffffffdd;
}
.tube{position:relative;    height: 100px;
  width: 30px;border:3px solid #272822;border-radius:0 0 50rem 50rem;background-color:#272822;margin: 0 auto;}
.tube::after{content:"";position:absolute;left:-10px;top:-3px;width:calc(100% + 20px);height:8px;border-radius:50rem;background-color:#272822}
.tube .body{position:absolute;border-radius:inherit;height:100%;width:100%;bottom:0;overflow:hidden;z-index:5}
.tube .shine{position:absolute;left:10%;top:0;width:10%;height:100%;z-index:90;opacity:.2}
.tube .shine::before,.tube .shine::after{content:"";position:absolute;background-color:#fff;border-radius:50rem;top:10%;height:40%;width:100%}
.tube .shine::after{height:15%;top:60%;bottom:0}
@keyframes liquid {
0%{transform:translateX(-50%) rotate(0deg)}
100%{transform:translateX(-50%) rotate(360deg)}
}
.tube .liquid{position:absolute;height:80%;width:100%;bottom:0}
.tube .liquid .percentage{position:absolute;height:var(--tube-percentage);width:100%;bottom:0;left:0;z-index:80;transition:1s}
.tube .liquid .percentage::after,.tube .liquid .percentage::before{position:absolute;content:"";width:200px;height:200px;border-radius:75px;animation:liquid 4s infinite linear;transform:translateX(-50%);left:50%;top:0;background:var(--tube-color);transition:1s}
.tube .liquid .percentage::after{opacity:.4;animation-direction:reverse;border-radius:60px}
@keyframes bubble {
from{background:#272822;transform:scale(0.3) rotate(50deg);margin-left:0}
10%{margin-left:1px}
20%{margin-left:-1px}
30%{margin-left:1px}
40%{margin-left:-1px}
50%{margin-left:1px;background:var(--tube-color);transform:scale(0.85) rotate(50deg);opacity:.75}
60%{margin-left:-1px}
70%{margin-left:1px}
80%{margin-left:-1px}
90%{margin-left:1px}
to{margin-left:-1px;bottom:135%;opacity:0;transform:scale(1) rotate(50deg)}
}
.tube .bubbles{position:absolute;left:0;bottom:0;width:100%;height:calc(var(--tube-percentage) + calc(100% - var(--tube-percentage)));z-index:10}
.tube .bubbles div{position:absolute;left:30%;border-radius:50% 50% 0 50%;background:var(--tube-color);width:10px;height:10px;opacity:.8;bottom:calc(var(--tube-percentage) / 3);animation:bubble 3s infinite linear;transform:scale(0.3) rotate(50deg);transition:1s}
.tube .bubbles div:nth-child(2){left:40%;opacity:.7;animation-delay:100ms;animation-duration:2.5s}
.tube .bubbles div:nth-child(3){left:40%;opacity:.6;animation-delay:200ms}
.tube .bubbles div:nth-child(4){left:60%;animation-delay:250ms;animation-duration:1.75s}
.tube .bubbles div:nth-child(5){left:50%;opacity:.8;animation-delay:150ms;animation-duration:2.25s}
.tube .meter{position:absolute;height:80%;right:0;bottom:0;width:100%;display: none;display: none;}
.tube .meter::after,.tube .meter::before{content:var(--tube-title);position:inherit;left:100%;margin-left:10px;bottom:var(--tube-percentage);transform:translateY(50%);background:var(--tube-color);color:#1D1D19;padding:10px;font-size:20px;font-weight:700;border-radius:50%;transition:1s}
/* .tube .meter::after{content:'';border:12px solid transparent;border-right-color:var(--tube-color);padding:0;border-radius:0;background:transparent;transform:translate(-78%,50%)} */
.tube .meter div{position:absolute;left:-4px;top:0;font-size:12px;padding:6px 2px 6px 4px;color:#65665f;border-top:1px solid #65665f;transform:translateX(-100%)}
.tube .meter div:nth-child(2){top:20%}
.tube .meter div:nth-child(3){top:40%}
.tube .meter div:nth-child(4){top:60%}
.tube .meter div:nth-child(5){top:80%}
.tube .meter div:nth-child(6){top:100%}

/* Test Tube CSS */
.handle-preloader .animation-preloader .txt-loading .letters-loading {
  font-size: 40px;
  line-height: 50px;
  color: #db214d;
  text-transform: initial;
  letter-spacing: 0px;
}
.handle-preloader .animation-preloader .txt-loading .letters-loading:before {
  color: #ffffff66;
}

.main-header .header-lower .outer-box:before {
  border-radius: 0px 0px 10px 0px;
}
.txt-main-pg{margin: 20px 0 0;}
.sub_div{padding-left: 20px;margin-top: 20px;}
.cnt-h2{margin-bottom: 20px;}
.tbl-head td{    color: var(--theme-color) !important;
  font-size: 24px;
  font-weight: 600;}
.mobile-menu .nav-logo {
  padding: 20px 0px;
  text-align: center;
  background: #fff;
  margin-top: 50px;
}
.mobile-menu .nav-logo img {
  max-width: 200px;
}
.c-white{color: #fff !important;}
.c-red{color: var(--theme-color) !important;}
.main-footer .about-widget .info li {    font-weight: normal;
  font-size: 18px;
}

.banner-carousel .content-box h2 {
  font-size: 60px;
}
.banner-carousel .content-box h2 span {
  font-size: 40px;
}
.footer-logo img{filter: brightness(0) invert(1);}
.top-inner {
    background-color: var(--theme-color) !important;
    color: #ffffff; 
    padding: 10px 0;
    width: 100%;
}
.top-inner:before {
    background-color: var(--theme-color) !important;
    color: #ffffff; 
    padding: 10px 0;
    width: 100%;
}
/* a {
    color: #db214d !important;
} */
/* a:hover {
  color: #405c6b !important;
  
} */
.new-hover-class:hover,
.new-hover-class:focus {
    color: black !important;
}
  /* .main-header .menu-right-content .btn-box a:hover{
    color: #405c6b  !important; 

  } */
  .btn-box a{
    border: 1px solid var(--theme-color) !important ;
    padding: 10px 15px;
    border-radius: 5px;
    color: var(--theme-color);
  }
  .btn-box a:hover {
    background-color: var(--theme-color) !important;
    color: white !important;
    text-decoration: none; 
}
.tab-btn {
  margin: 10px 0; /* Adjust space as needed */
}
.animation-preloader .txt-loading .letters-loading:before {
  color: #405c6bdb;
}
.icon-box{
color: #ffffff !important;
}

.service-block-one:hover .inner-box {
  color: white !important;
}

.service-block-one:hover h3 a,
.service-block-one:hover p,
.service-block-one:hover .link a {
  color: white !important;
}

.service-block-one:hover .icon-box .icon i {
  color: white !important;
}
.header-lower .menu-area .navigation li a:hover {
  color: #405c6b !important;
}
.mobile-menu:hover {
  background-color: grey;
  transition: background-color 0.3s ease-in-out;
}
.error {
  color:var(--theme-color);
  font-size: 14px;
  margin-top: 5px;
}

.info-block-one .inner-box {
  padding: 0px 30px 30px 30px;
}