/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 
html,body{
  overflow-x: hidden;
}
#masthead{
  top: 0;
  left: 50%;
  width: 100%;
position: fixed !important;
  transform: translate(-50%);
}
.fixed_on_desktop{
margin: auto;
  
}



.bg-dark {
    background: rgba(1,19,44,.8) !important;
    z-index: 44 !important;
}
.bg-dark .top-bar{
  background: #253144 !important;
}

.button-text-left .elementor-button-text {
    margin: auto;
    margin-right: auto;
    text-align: left;
}
.border-text h2 {
    --border-color: #38BAFF;
    --border-weight: 3px;
    --dash-size: 25px;
    --gap-size: 25px;
  	position: relative;
    padding: 20px 40px 5px 15px;
    width: 90%;
    position: relative;
}

.border-text h2:hover {
    --border-color: #38BAFF;
    --border-weight: 1px;
    --dash-size: 5px;
    --gap-size: 5px;
}

.border-text h2:after {
    transition: all .6s ease;
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) top left no-repeat,
        linear-gradient(90deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)), transparent calc(var(--gap-size) / 2 + var(--dash-size))) top center repeat-x,
        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) top right no-repeat,
        
        linear-gradient(0deg, var(--border-color) 100%, transparent 100%) top left no-repeat,
        linear-gradient(0deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)), transparent calc(var(--gap-size) / 2 + var(--dash-size))) center left repeat-y,
        linear-gradient(0deg, var(--border-color) 100%, transparent 100%) bottom left no-repeat,
        
        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) bottom left no-repeat,
        linear-gradient(90deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)), transparent calc(var(--gap-size) / 2 + var(--dash-size))) bottom center repeat-x,
        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) bottom right no-repeat,
        
        linear-gradient(0deg, var(--border-color) 100%, transparent 100%) top right no-repeat,
        linear-gradient(0deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)), transparent calc(var(--gap-size) / 2 + var(--dash-size))) center right repeat-y,
        linear-gradient(0deg, var(--border-color) 100%, transparent 100%) bottom right no-repeat;
    background-size: var(--dash-size) var(--border-weight), calc(var(--dash-size) + var(--gap-size)) var(--border-weight), var(--dash-size) var(--border-weight), var(--border-weight) var(--dash-size), var(--border-weight) calc(var(--dash-size) + var(--gap-size)), var(--border-weight) var(--dash-size);
}

#services-discover{
  overflow-y:visible;
}
.get-audit-btn span.elementor-button-content-wrapper {
    display: inline-flex;
    margin: auto;
}
.get-audit-btn .elementor-button-icon.elementor-align-icon-right {
    position: relative;
    top: -1px;
}
.rotate-circle img{
  animation: rotate 3000ms infinite forwards linear;
  -webkit-animation: rotate 3000ms infinite forwards linear;
}
.rotate-circle-slow img{
  animation: rotate 7000ms infinite forwards linear;
  -webkit-animation: rotate 7000ms infinite forwards linear;
}
.bounce-image img{
  animation: transform 3000ms infinite forwards linear;
  -webkit-animation: transform 3000ms infinite forwards linear;
}

.divider-line .elementor-icon {
  
  -webkit-animation: move2 3000ms infinite forwards linear;
}

@-webkit-keyframes move{
  0%{
    margin-left: 0px;
  }
  100%{
    margin-left: 100px;
  }
}

@-webkit-keyframes transform{
  0%{
    transform: translatey(0%);
  }
  50%{
     transform: translatey(-10%);
  }
  100%{
    transform: translatey(0%);
  }
}

@keyframes transform{
  0%{
    transform: translatey(0%);
  }
  50%{
     transform: translatey(-10%);
  }
  100%{
    transform: translatey(0%);
  }
}

@keyframes rotate{
  from{
    transform: rotate(0deg);
  }
  to{
     transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate{
  from{
    transform: rotate(0deg);
  }
  to{
     transform: rotate(360deg);
  }
}

@media (max-width: 767px){
  .fixed_on_desktop{
 
  max-width: 100%;
}
}



/* Contact Form */
.contact-form input, .contact-form textarea {
    padding: 20px;
    border-radius: 10px !important;
}
.contact-form .elementor-field-type-text label,.contact-form .elementor-field-type-number label {
    margin-bottom: -10px;
    z-index: 4;
    background: #fff;
    position: relative;
    left: 20px;
    padding: 12px;
}
.contact-form  select{
    min-height: 62px;
    border-radius: 10px;
}
.form-row.cs-row {
    display: flex;
    flex-wrap: wrap;
}
.form-row.cs-row  label {
    color: #fff;
    margin: 10px 0px;
}

.form-row.cs-row .col-6 {
    max-width: 40%;
  margin: 10px;
}
#popmake-1556 {
  background-size: cover !important;
    background: url(/wp-content/uploads/2021/03/Group-283.png) !important;
}
.water-section {
  background-size: 100% 100% !important;
}
body {
  /* Set "my-sec-counter" to 0 */
  counter-reset: my-sec-counter;
}

.number-title h4::before {
  /* Increment "my-sec-counter" by 1 */
  counter-increment: my-sec-counter;
    content: counter(my-sec-counter) " ";
    border: 1px solid;
    text-align: center;
    padding: 5px 10px 5px 15px;
    margin-right: 15px;
}
@media (max-width: 576px){
  .border-text h2{
    width: 100%;
  }
}

/* Client Slider */
.client-slider img {
    max-width: 60%;
    width: 100% !important;
    min-height: 300px !important;
    object-fit: cover;
    object-position: center;
}
.client-slider .elementor-testimonial__content {
    display: inline-flex;
    flex-direction: column-reverse;
}
.client-slider .swiper-container-horizontal>.swiper-pagination-progressbar {
  width: 20% !important;
   left: 50%;
    transform: translate(-50%);
    bottom: -20px;
    top: unset;
    height: 9px !important;
    border-radius: 20px;
    background: #DAF0FC;
}
.client-slider .elementor-testimonial__cite {
    margin-top: 0 !important;
    margin-bottom: 20px;
}
.client-slider  span.swiper-pagination-progressbar-fill {
    border-radius: 20px;
}
header img.attachment-large.size-large.lazyloaded{
  transition: all 200ms linear;
}
.bg-dark img.attachment-large.size-large.lazyloaded {
    max-width: 150px;
    transition: all 200ms linear;
}
.calendar-link a.custom_form_style {
    text-align: center;
    background: #387abd;
    padding: 15px 86px;
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    font-family: "Poppins", Sans-serif;
  transition: transform 200ms linear;
}
.calendar-link a.custom_form_style:hover{
  transform: translatey(-10px);
  background: #fff;
  color: #387abd;
  transition: transform 200ms linear;
}
.calendar-link .elementor-shortcode {
    text-align: center;
  margin-top: 20px;
}
@media (max-width: 767px){
  .floating-menu.float-menu-1.fm-ready {
    display: none;
}
  #masthead{
    top: 0;
    left: 0%;
    width: 100%;
  	position: relative !important;
    transform: unset;
    background: #fff !important;
  }
  .top-main-logo img{
      max-width: 150px;
    filter: contrast(0) brightness(0.3);
      transition: all 200ms linear;
  }
  .top-menu i{
      color: initial;
  }
  .bg-dark {
      background: #fff !important;
      z-index: 44 !important;
  }
  .bg-dark .top-bar{
    background: #44386b !important;
  }
}

.UOM4TUANuzNUWTdDYwxOkjjYj2MIZO2theme--light {
    background: #fff;
    color: #454545;
    display: none !important;
}