/*********************************** Start Of Common Css ***********************************/

/*@font-face{font-family:Oswald-Regular;src:url(../fonts/Oswald-Regular.ttf);}
body{font-family:Oswald-Regular;font-size:16px;color:#4d4d4d;line-height:1.5;padding:0px;margin:0px;}
h1,h2,h3,h4,h5,h6{font-family:Oswald-Regular;color:#361925;margin:0px;padding:0px;}
h1{font-size:60px;line-height:1.1;}
h2{font-size:50px;line-height:1.1;}
h3{font-size:40px;line-height:1.1;}
h4{font-size:30px;line-height:1.1;}
h5{font-size:20px;line-height:1.1;}
h6{font-size:18px;line-height:1.1;}
p{font-family:Oswald-Regular;font-size:16px;color:#4d4d4d;line-height:1.5;margin:0px;}
p+p{margin:20px 0px 0px 0px;}
ul,ol{list-style-type:none;margin:0px;padding:0px;}
img{max-width:100%;height:auto;outline:none;}
a{color:#4d4d4d;text-decoration:none;}
a:active,a:hover,a:focus{outline:none;text-decoration:none;color:#1d1d1b;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;}*/
focus{outline:none;}
input,select,textarea{width:100%;height:60px;background:#ffffff;border:1px solid #CCCCCC!important;}
textarea{padding:15px;height:100px;}
input[type="checkbox"],input[type="radio"]{width:17px;height:17px;}
input:focus-visible,textarea:focus-visible{outline:none;}
::-webkit-input-placeholder{color:#000000;}
::-moz-placeholder{color:#000000;}
::-ms-input-placeholder{color:#000000;}
::-moz-placeholder{color:#000000;}


/*********************************** End Of Common Css ***********************************/

/*********************************** Start Of Common Class Css ***********************************/
.page-content{overflow:hidden;}
.primary-button .elementor-button,.secondary-button .elementor-button,.button-arrow .elementor-button{position:relative;padding-right:66px!important;min-width:240px;}


.primary-button .elementor-button-text:after{content:"";width:60px;height:60px;background:url(/wp-content/uploads/2026/02/get-free-quote.png);background-repeat:no-repeat;background-position:center center;background-size:100% ;position:absolute;right:-67px;top:-21px;bottom:0px;border-radius:0px 0px 0px 0px;}


.secondary-button .elementor-button-text:after{content:"";width:62px;height:62px;background:url(/wp-content/uploads/2026/02/Phone-Righ.webp);background-repeat:no-repeat;background-position:center center;background-size:100%;position:absolute;right:-74px;top:-22px;bottom:0px;border-radius:0px 0px 0px 0px;}

.button-arrow .elementor-button:after{content:"";width:62px;height:62px;background:url(/wp-content/uploads/2025/04/Button-Arrow-Icon-svg-17.svg);background-repeat:no-repeat;background-position:center center;background-size:100% 100%;position:static;right:0px;top:-3px;bottom:0px;}

.elementor-divider-separator .elementor-icon{padding:4px 60px!important;}

.elementor-button[type="submit"]{background-image:linear-gradient(180deg,#1D6AB0 50%,#3280AB 50%);}

/*********************************** End Of Common Class Css ***********************************/


/*********************************** Start Of Back To Top Css ***********************************/
.back-to-top a{z-index: 100;font-size:14px;color:#ffffff!important;text-align:center;cursor:pointer;width:40px;height:40px;line-height:36px;background:#3E2E15;border:2px solid #ffffff;position:fixed;bottom:20px;right:20px;display:none;}
.back-to-top a:hover{background:#5ABA51;color:#ffffff;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;}

/*********************************** End Of Back To Top Css ***********************************/

/*********************************** Start Of Bounce Top Bottom Css ***********************************/
.bounce{-moz-animation:bounce 2s infinite;-webkit-animation:bounce 2s infinite;animation:bounce 2s infinite;}
@keyframes bounce{
    0%,20%,50%,80%,100%{transform:translateY(0);}
    40%{transform:translateY(-10px);}
    60%{transform:translateY(-10px);}
}

/*********************************** End Of Bounce Top Bottom Css ***********************************/

/*********************************** Start Of Fixed Header Smooth Animation Css ***********************************/
.fixed-header{position:fixed !important;left:0px;right:0px;top:0px;z-index:111 !important;background: #ffffff; box-shadow:0px 0px 20px #00000040;animation:smoothScroll 1s forwards;}
@keyframes smoothScroll{
    0%{transform:translateY(-40px);}
    100%{transform:translateY(0px);}
}

/*********************************** End Of Fixed Header Smooth Animation Css ***********************************/

/*********************************** Start Of Contact Form Error Message Css ***********************************/
.wpcf7-form .wpcf7-list-item{display:block;margin:10px 0px;}
.wpcf7-form .wpcf7-list-item-label{padding-left:8px;}
.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors{color:#ED2B24;background-color:#AF4D01;border:0;padding:10px;}
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok{color:#009449;background-color:#DFF2BF;border:0;padding:10px;}
.wpcf7-mail-sent-ok:before,div.wpcf7-validation-errors:before{font-family:FontAwesome;font-size:26px;margin-right:16px;vertical-align:middle;}
.wpcf7-mail-sent-ok:before{content:'\f00c';}
.wpcf7-validation-errors:before{content:'\f057';}
.wpcf7-not-valid-tip:before{content:"\F63C";font-family:bootstrap-icons;font-size:14px;width:25px;height:25px;background:#ffb100;display:inline-block;text-align:center;line-height:26px;margin-right:10px;border-radius:3px;}
.wpcf7-not-valid-tip:after{width:20px;height:20px;background:#ffffff;position:absolute;content:'';top:-10px;left:15px;box-shadow:-2px -2px 2px 0px #d6d3d3;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}
.wpcf7-not-valid-tip{position:absolute;color:#000000!important;font-size:14px!important;width:100%!important;border:2px solid #fff!important;z-index:99;border-radius:4px;background:#ffffff!important;padding:10px!important;left:0px;line-height:38px;box-shadow:0px 0px 4px 0px #a0a0a0;}
.wpcf7 .wpcf7-response-output{display:block;}

/*********************************** End Of Contact Form Error Message Css ***********************************/

/********************************* Start Of Home Pages Css***************************************/
.header{position:relative;z-index:1;}

.header.fixed-header .elementor-widget-theme-site-logo {
    width: 130px;
}


.hero-bg:after{content:"";width:100%;height:200px;background:url(/wp-content/uploads/2026/02/Hero-Banner-after.webp);background-repeat:no-repeat;background-position:center;background-size:100% 100%;position:absolute;left:0px;right:0px;bottom:-35px;padding-top:50px}


@media only screen and (max-width: 768px) {
.hero-bg:after{height:100px;
}
}

@media only screen and (max-width: 600px) {
.hero-bg:after{height:50px;
}
}



.request-a-quote-form{padding:0px 15px;}
.form-box button{color:#fff;width:100%;border-radius:0px!important;border-width:4px!important;border-color:#fff;background: #ed1c34;}

.form-box button:hover {color:#fff;
	background:transparent;border-width:4px!important;border-color:#ed1c34;
}

/* 1. Normal State: Gentle "Pointing" Loop */
.form-box button::after {
    /* Name | Duration | Timing | Infinite Loop */
    animation: arrow-nudge 1.5s infinite ease-in-out;
}

/* 2. Hover State: Fast "Urgent" Loop */
.form-box button:hover .elementor-button-text::after {
    /* Same animation, but much faster (0.4s) */
    animation: arrow-nudge 0.4s infinite ease-in-out;
}

/* 3. The Animation Keyframes */
@keyframes arrow-nudge {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(6px); /* Moves right to "point" */
    }
    100% {
        transform: translateX(0px); /* Returns to start */
    }
}



/* --- 1. The Button Container (Shape & Shadow) --- */
.form-box button {
    /* Create the Slant */
    transform: skewX(-15deg);
    
    /* The Hard Brand Shadow (Navy, 0 Blur) */
    box-shadow: 4px 4px 0px #232464;
    
    /* Brand Red Background (Normal State) */
    background-color: #ED1C34 !important;
    
    /* Sharp Corners (Override default rounded) */
    border-radius: 0px !important;
    
    /* Spacing for shadow */
    margin-right: 10px;
    margin-bottom: 0px;
    
    /* Smooth Transition */
    transition: all 0.2s ease;
}


/* --- 3. Hover Effect (Mechanical 'Press') --- */
.form-box button:hover {
    /* Move down and right to 'click' */
    transform: skewX(-15deg) translate(3px, 3px);
    
    /* Shrink shadow to match movement */
    box-shadow: 3px 3px 0px #232464;
    
    /* Hover Color: Switch to Navy for a 'Pro' contrast */
    background-color: #232464 !important;
}

/* Ensure Text/Icon remains White on hover */
.form-box button:hover .elementor-button-text,
.form-box button:hover .elementor-button-icon {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}




.service-bg:after{content:"";width:100%;height:200px;background:url(/wp-content/uploads/2026/02/Service-Bg-After-2.png);background-repeat:no-repeat;background-position:center;background-size:100% 100%;position:absolute;left:0px;right:0px;bottom:-5px;z-index:10}


@media only screen and (max-width: 768px) {
.service-bg:after{height:170px;
}
}

@media only screen and (max-width: 600px) {
.service-bg:after{height:80px;
}
}

.elementor-kit-7 label {
	font-family: "lato";
	font-size: 14px;
	line-height: 1.5;
	font-weight: 400;
}


.call-to-action-bg:after{content:"";width:100%;height:200px;background:url(/wp-content/uploads/2025/11/Hero-Banner.png);background-repeat:no-repeat;background-position:center center;background-size:100% 100%;position:absolute;left:0px;right:0px;bottom:-61px;}

@media only screen and (max-width: 768px) {
.call-to-action-bg:after{height:100px;bottom:0px;
}
}

@media only screen and (max-width: 600px) {
.call-to-action-bg:after{height:50px;bottom:0px;
}
}



.why-choose-us-col {
  position: relative;
  z-index: 1;      /* Creates a layering context */
 margin: 10px;
}

.why-choose-us-col::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 6px;
  width: 96%;
  height: 96%;
  background-color: #ed1c34; /* Your desired background color */
  
  /* The Slant Logic */
  clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
  
  /* Ensures background stays behind the text */
  z-index: -1;
}




.recent-project-bg:after{content:"";width:100%;height:180px;background:url(/wp-content/uploads/2026/02/Recent-Project-Bg-After-1.png);background-repeat:no-repeat;background-position:center;background-size:100% 100%;position:absolute;left:0px;right:0px;bottom:-20px;}

@media only screen and (max-width: 768px) {
.recent-project-bg:after{height:170px;
}
}

@media only screen and (max-width: 600px) {
.recent-project-bg:after{height:60px;
	bottom:0px;

}
}


.recent-project .swiper-slide{margin-bottom:30px;}

.faq-bg{clip-path:polygon(0 0,100% 5%,100% 100%,0% 100%);}

@media only screen and (max-width: 768px) {
.faq-bg{clip-path:polygon(0 0,100% 3%,100% 100%,0% 100%);}
}

@media only screen and (max-width: 600px) {
.faq-bg{clip-path:polygon(0 0,100% 1%,100% 100%,0% 100%);}
}




.accordion .elementor-tab-title{border-radius:0px;border:2px solid #ed1c34;position:relative;}
.accordion .elementor-widget-container .elementor-accordion-item .elementor-tab-title.elementor-active{background:#ed1c34!important;border:2px solid #ed1c34!important;}
.accordion .elementor-widget-container .elementor-accordion-item .elementor-tab-title.elementor-active .elementor-accordion-title{color:#fff;}
.accordion .elementor-accordion-item{border:none!important;margin:15px 0px;}
.accordion .elementor-accordion-item .elementor-tab-content{margin:0px 30px;border-radius:0px 0px 0px 0px;}
.accordion .elementor-accordion-icon.elementor-accordion-icon-right{width:35px!important;height:35px;line-height:35px;background:none;border-radius:0px;position:absolute;top:20%;right:8px;text-align:center!important;}


/* --- 1. The Title Container (The Shape) --- */
.elementor-accordion .elementor-tab-title {
    /* Create the Slant */
    transform: skewX(-5deg) !important;
    
    /* The Hard Brand Shadow (Navy, 0 Blur) */
    box-shadow: 4px 4px 0px #232464 !important;
    
    /* Borders & Spacing */
    border: 2px solid #ED1C34 !important; /* Keep Red Border */
    border-radius: 0px !important; /* Sharp corners */
    margin-bottom: 0px !important; /* Room for the shadow */
    margin-left: 10px; /* Room for the slant */
    margin-right: 10px;
    
    /* Transition for hover effects */
    transition: all 0.3s ease !important;
}

/* --- 2. The Content (Text & Icon) --- */
/* We must un-skew these so they don't look distorted */
.elementor-accordion .elementor-tab-title .elementor-accordion-title,
.elementor-accordion .elementor-tab-title .elementor-accordion-icon {
    transform: skewX(5deg) !important;
}

/* --- 3. Active State (Open Item) --- */
.elementor-accordion .elementor-tab-title.elementor-active {
    background-color: #ED1C34 !important; /* Brand Red Background */
    color: #FFFFFF !important; /* White Text */
}



/* --- 4. Inactive State (Closed Item) --- */
.elementor-accordion .elementor-tab-title:not(.elementor-active) {
    background-color: #FFFFFF !important; /* White Background */
    color: #232464 !important; /* Navy Text */
}

/* --- 5. Hover Effect (Mechanical 'Press') --- */
.elementor-accordion .elementor-tab-title:hover {
    /* Move down and right to cover the shadow slightly */
    transform: skewX(-5deg) translate(4px, 4px) !important;
    box-shadow: 4px 4px 0px #232464 !important;
}




.accordion .elementor-accordion .elementor-tab-title .elementor-accordion-icon svg{width:40px;height:40px;}
.service-areas-list .elementor-icon-list-item{padding:20px!important;border-radius:0px;overflow:hidden;}
.service-areas-list .elementor-icon-list-item span{position:relative;z-index:1;}
.service-areas-list .elementor-icon-list-item:before{content:"";background:linear-gradient(to right,#3F404225 0%,#ffffff 100%);position:absolute;left:0px;right:0px;top:0px;bottom:0px;border-radius:10px;}
.service-areas-list .elementor-icon-list-item:after{content:"";background:linear-gradient(to right,#3F404205 0%,#ffffff 100%);position:absolute;left:0px;right:0px;top:0px;bottom:0px;margin:1px;width:auto;height:auto;border-radius:10px;}
.call-bg:before{content:"";width:100%;height:200px;background:url(/wp-content/uploads/2025/11/CTA-after.png);background-repeat:no-repeat;background-position:center center;background-size:100% 100%;position:absolute;left:0px;right:0px;top:0px;}

@media only screen and (max-width: 768px) {
.call-bg:before{height:100px;
}
}

@media only screen and (max-width: 600px) {
.call-bg:before{height:50px;
}
}


.process-step-tabs .jet-tabs__control-inner{padding-top:15px;}
.process-step-tabs .jet-tabs__label-text span{font-size:16px;display:block;line-height:normal;}
.process-step-tabs .jet-tabs__label-text{line-height:44px;text-align:center;}
.process-step-tabs .jet-tabs__control:nth-child(odd){background:#3F404215;}
.services-col .elementor-element-populated:hover{box-shadow:0px 0px 10px 4px hsl(0deg 0% 0% / 35%)!important;}
.services-col .elementor-element-populated:hover .elementor-button{color:#ffffff!important;background:#24A9E2!important;}





.welcome-commercial-image{position:relative;}
.welcome-commercial-image:after{content:"";width:150px;height:150px;background:url(/wp-content/uploads/2025/11/splash2.svg);background-repeat:no-repeat;background-position:center;background-size:contain;position:absolute;left:-35px;bottom:0px;top:-50px;z-index:-1;}

/********************************* End Of Home Pages Css***************************************/

/********************************* Start Of Footer Css***************************************/
.footer-contact .elementor-icon-box-description a{color:#ffffff;}

/********************************* End Of Footer Css***************************************/






.twentytwenty-handle {
    background-color: #5ABA51!important;
}


#more {
	display: none;
}

#myBtn {
	background-color: #fff;
	border: 0px;
	color: #363639;
	font-weight:500;
	font-style: italic;
	font-size:15px
}

/* Fix CTA divider height */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.hero-bg:after,
.call-bg:before,
.call-to-action-bg:after
{
	height: 150px;
}
}

/* Disable animations for all above-the-fold hero sections */
.cm-banner,
.cm-banner *:not(button):not(button *):not(a):not(a *):not([role="button"]):not([role="button"] *),
.above-the-fold,
.above-the-fold *:not(button):not(button *):not(a):not(a *):not([role="button"]):not([role="button"] *),
.hero,
.hero *:not(button):not(button *):not(a):not(a *):not([role="button"]):not([role="button"] *),
.hero-bg,
.hero-bg *:not(button):not(button *):not(a):not(a *):not([role="button"]):not([role="button"] *) {
  transition: none !important;
  animation: none !important;
}


.elementor-nav-menu span.sub-arrow::after {
	color: #f3f3f3!important;
}




/* The Primary Image Frame */
.primary-image {
    /* 1. THE STRUCTURE: Thick Navy Border & White Gutter */
    border: 2px solid #232464; /* Brand Navy */
	 transform: skewX(-2deg);
    padding: 6px; /* Creates a clean white gap between image and border */
    background-color: #ffffff; /* Ensures the gap is always white */
    
    /* 2. THE FOUNDATION: Solid Brand Red Shadow (No Blur) */
    /* This creates a 3D "blocked" look like a construction material */
    box-shadow: 4px 4px 0px #ED1C34; /* Brand Red */
    
    /* 3. SHARPNESS: Force sharp corners to match your compass logo */
    border-radius: 0px; 
    
    /* 4. PERFORMANCE: Smooth transition for the hover effect */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Layout Safety */
    display: block;
    max-width: 100%;
    height: auto;
}


/* Hover Effect: The "Lock-In" Mechanism */
.primary-image:hover {
    /* Image slides down to cover the red shadow */
    transform: translate(6px, 6px);
     transform: skewX(-2deg);
    /* Shadow shrinks, creating a tactile "button press" feel */
    box-shadow: 3px 3px 0px #232464; /* Switches to Navy for contrast on interaction */
}




/* --- 1. Target the List Items --- */
.location-list {
    /* Create the Slant */
    transform: skewX(-5deg);
    
    /* The Hard Brand Shadow (Navy, 0 Blur) */
    box-shadow: 4px 4px 0px #232464;
    
    /* Box Styling */
    background-color: #fff; /* White Box */
    border: 2px solid #ED1C34; /* Red Border */
    border-radius: 0px; /* Sharp corners */
    
    /* Spacing inside the box */
    padding: 12px 15px;
    
    /* Spacing between items (if vertical) or around (if inline) */
    margin-bottom: 10px;
    margin-right: 5px; /* Space for the shadow */
    
    /* Transition for hover */
    transition: all 0.3s ease;
    

 
}

/* --- 2. Un-skew the Content (Text & Icon) --- */
/* This prevents the text from looking tilted and hard to read */
.location-list .elementor-icon-list-text,
.location-list .elementor-icon-list-icon {
    transform: skewX(5deg);
}



/* --- 4. Hover Effect (Mechanical 'Press') --- */
.location-list:hover {
    /* Move box down-right to cover shadow */
    transform: skewX(-5deg) translate(4px, 4px);
    box-shadow: 4px 4px 0px #232464;
    background-color: #ED1C34; /* Optional: Turn Red on Hover */
    border-color: #232464; /* Switch border to Navy */
}