/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

canvas.coolBg {
    position: absolute;
    background: var(--background-color);
    top: 0;
    left: 0;
    inset: 0;
    width: 100%;
     height: 100%;
    display: block;
    margin: 0 auto;
    padding: 0;
    z-index: -1;
}

.section {
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}


:root {
--sal-duration: 0.5s;
--sal-delay: 0.2s;
--sal-easing: cubic-bezier(0, 0.55, 0.45, 1);
}

.decor-line, .dot-bottom, .dot, .decor-line-side, .service-axis {
  transition: 
    opacity 0.75s ease,
    background-color 0.75s ease,
    border-color 0.75s ease;
}

.col-left .service-axis{transform: translateX(40px)}
.col-right .service-axis{transform: translateX(-40px)}

@media screen and (max-width: 479px) {
    .col-left .service-axis{transform: translateX(40px)}
    .col-right .service-axis{transform: translateX(40px)}
}

.col-left .service-axis, .col-right .service-axis {
    transition:
    opacity 0.6s cubic-bezier(0, 0.55, 0.45, 1),
    transform 0.6s cubic-bezier(0, 0.55, 0.45, 1);
}

.col-left .service-axis.sal-animate{transform: translateX(0px)}
.col-right .service-axis.sal-animate{transform: translateX(0px)}

.service-axis.sal-animate {
  color: var(--accent);
}

.service-axis.sal-animate::after {
  border-color: var(--accent);
  background-color: var(--accent);
}


.anim.sal-animate, #services.anim.sal-animate {
  border-color: var(--accent)!important;
}

.sal-animate .contact-form .submit-button-wrapper::after,
.decor-line.sal-animate,
.decor-line-side.sal-animate {
  background-color: var(--accent);
}

.dot-bottom.col-right.sal-animate::before,
.dot.col-right.sal-animate::before,
.dot-bottom.col-left.sal-animate::before,
.dot.col-left.sal-animate::before {
  background-color: var(--accent);
}

.section {
  --sal-delay: 0s;
  opacity: 0;
  transition:
  opacity 0.9s cubic-bezier(0, 0.55, 0.45, 1),
  border-color 2.6s cubic-bezier(0, 0.55, 0.45, 1);
  transition-delay: 0s, 0.6s;
}

.section.sal-animate {
  opacity: 1;
}

.level-includes,
.content-block {
  --sal-delay: 2s;
  opacity: 0;
  transform: translateY(80px);
  transition:
  opacity 0.6s cubic-bezier(0, 0.55, 0.45, 1),
  transform 0.6s cubic-bezier(0, 0.55, 0.45, 1);
}

.level-includes.sal-animate,
.content-block.sal-animate {
  opacity: 1;
  transform: translateY(0);
}

.service-card {
  opacity: 0;
   transition:
   opacity 1.5s ease,
  transform 1s cubic-bezier(0, 0.55, 0.45, 1);
  transition-delay: 0.3s, 0.6s;
}

.col-left .service-card {
    transform: translateX(0px);
}

.col-right .service-card {
    transform: translateX(0px);
}

.col-left .service-card.sal-animate,
.col-right .service-card.sal-animate {
    opacity: 1;
    transform: translateX(0);
}