.elementor-167 .elementor-element.elementor-element-fa201f1:not(.elementor-motion-effects-element-type-background), .elementor-167 .elementor-element.elementor-element-fa201f1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://calgaryplumberanddrains.com/wp-content/uploads/2020/05/process_bg-plumbing-tools.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-167 .elementor-element.elementor-element-fa201f1 > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.89) 3%, rgba(0, 0, 0, 0.16) 100%);opacity:1;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-167 .elementor-element.elementor-element-fa201f1 > .elementor-container{min-height:350px;}.elementor-167 .elementor-element.elementor-element-fa201f1{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 100px 0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-167 .elementor-element.elementor-element-bd22a87{text-align:center;}.elementor-167 .elementor-element.elementor-element-bd22a87 .elementor-heading-title{font-size:36px;color:#FFFFFF;}.elementor-167 .elementor-element.elementor-element-359c0a2:not(.elementor-motion-effects-element-type-background), .elementor-167 .elementor-element.elementor-element-359c0a2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://calgaryplumberanddrains.com/wp-content/uploads/2020/04/stripes-bg-pattern.png");background-position:center center;background-repeat:repeat;background-size:auto;}.elementor-167 .elementor-element.elementor-element-359c0a2 > .elementor-background-overlay{background-color:#FFFFFF;opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-167 .elementor-element.elementor-element-359c0a2{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:0px 0px 240px 0px;}.elementor-167 .elementor-element.elementor-element-10df722 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-167 .elementor-element.elementor-element-acf7a42{margin-top:-57px;margin-bottom:0px;}@media(max-width:1024px){.elementor-167 .elementor-element.elementor-element-359c0a2{padding:0px 0px 250px 0px;}.elementor-167 .elementor-element.elementor-element-10df722 > .elementor-element-populated{margin:0px 80px 0px 80px;--e-column-margin-right:80px;--e-column-margin-left:80px;padding:0px 0px 0px 0px;}}@media(max-width:767px){.elementor-167 .elementor-element.elementor-element-fa201f1 > .elementor-container{min-height:250px;}.elementor-167 .elementor-element.elementor-element-359c0a2{padding:0px 0px 0px 0px;}.elementor-167 .elementor-element.elementor-element-10df722 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 20px 50px 20px;}}@media(min-width:1025px){.elementor-167 .elementor-element.elementor-element-fa201f1:not(.elementor-motion-effects-element-type-background), .elementor-167 .elementor-element.elementor-element-fa201f1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for section, class: .elementor-element-acf7a42 */@media screen and (max-width: 1024px) {
    .gTitle{
font-size: 16px !important;

}

.gDesc{
font-size: 14px !important;

}
}

@media screen and (min-width: 768px) {
.processInner::before{
 content:'';
 position:absolute;    
 height:1px;
 background:#C68E21;
 top:57px;
 left:100px;
 right:100px;
 z-index:-1;
}

.gHover{
 position:absolute;
 display: none;
 top:200px;
 z-index: 1;
 left:50%;
 transform: translateX(-50%);
 width: 300px;
}

.gActive .gHover{
 display:block;    
}

.gActive .gCircle{
 background-color: #C68E21;
 color: #fff;   
}

.processInner:hover .gActive .gHover{
 display:none;
}

.processInner:hover .gActive .gCircle{
 background: #edce93!important;
 color: #C68E21!important;
 transition:500ms!important;
}

.processInner:hover .gActive:hover .gHover{
 display:block; 
 transition:500ms!important;
}

.processInner:hover .gActive:hover .gCircle{
 background-color: #C68E21;
 color: #fff; 
 transition:500ms!important;
}
}

.process{
text-align: center;
font-family: “Barlow”, Sans-serif;
}

.gCircle{
width: 92px;
height: 92px;
background: #C68E21;
border-radius: 100%;
color: #fff;
font-weight: bold;
font-size: 36px;
display: inline-block;
text-align: center;
padding: 20px 10px 0px 10px;
margin-bottom: 20px;
}

.gHover{
background:#C68E21;
padding: 20px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
 margin-top:10px!important;
}

.process:hover .gCircle{
 background-color: #edce93!important;
 color: #C68E21!important;
 transition:500ms!important;
}

.process:hover .gHover{
 display: block;
 transition:500ms!important;
}

.gHover::before{
 content:"";
 position: absolute;
 top:-22px;
 left:50%;
 transform: translateX(-50%);
    width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 22px 22px 22px;
 border-color: transparent transparent #C68E21 transparent;
}

.gTitle{
font-weight: bold;
font-size: 18px;
color: #000;
line-height: 1.4;
margin-bottom: 15px;
}

.gDesc{
 font-weight: normal;
font-size: 16px;
line-height: 1.5;
color: #fff;
font-family: “Barlow”, Sans-serif;
}


@media screen and (max-width: 767px) {
.gHover{
 position:relative;
 top: 20px;
 margin-top:20px;
 margin-bottom:30px;
}
}/* End custom CSS */