@import url(effect.css);

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
/* Fonts */

html { margin: 0; padding:0; overflow-x:hidden; max-width:100vw;}
body{
font-family: 'Space Grotesk', sans-serif; font-weight:normal; padding:0; color:#222; font-weight:400; padding-right:0!important;overflow-x:hidden; max-width:100vw;
font-size:17px;
line-height:1.4;
}

/*	--------------------------------------------------
Global Reset & Standards
-------------------------------------------------- */

img{border:0;}

*{ box-sizing:border-box;
}
*:hover{
}

a{color:var(--blue); text-decoration:none;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}
a:hover{text-decoration:none; color:var(--blue);}

h1, h2, h3, h4, h5{margin:0 0 15px; padding:0; font-weight:normal;}

:root{--blue:#0e7caf;--red:#fa6560; --dark:#2d4283; --green:#436c34; --shade:linear-gradient(45deg,var(--blue) 0%, var(--dark) 100%);}

@keyframes wiggle {
0%{transform:rotate(0deg);}
80%{transform:rotate(0deg);}
85%{transform:rotate(5deg);}
95%{transform:rotate(-5deg);}
100%{transform:rotate(0deg);}
}

/* Header */
.header-area{position:relative; z-index:100; float:left; display:block; width:100%; padding:5px 25px 0; background:#fff url('../images/headerBg.png') no-repeat center bottom; background-size:cover;}

#myHeader{margin:0; position:relative; z-index:100; float:left; width:100%; clear:both; z-index:9999;}
.logo{position:relative; text-align:center;display:block; top:-65px; margin-bottom:-65px; z-index:-1;}
.logo:before{position:absolute; left:-50%; right:-50%;top:calc(50% - 15px); height:30px; background:var(--shade); content:''; display:block; z-index:-1;}
.logo img{height:170px; transition:all .2s ease-in-out; padding:10px 0;}
/*#myHeader.sticky{background:#fff; position:fixed; left:0; right:0; top:0; margin-top:0; padding:10px;}*/

.callBox{ position:relative; padding-left:50px; color:var(--dark); float:right;}
.callBox i{position:absolute; left:0; font-size:42px; color:var(--blue);}
.callBox a{display:block; font-size:18px; font-weight:700; margin-bottom:0; line-height:1.1; color:var(--dark);}

.topBox{padding:5px 25px; color:#fff; background:var(--dark)}
.topBox i{color:#fff;}
.topBox ul{ margin:0; padding:0; list-style-type:none;}
.topBox ul li{display:inline-block;}
.topBox ul li a{font-size:20px; padding:0 5px; color:var(--blue);}

.hourLink{margin-bottom:60px;}
.hourLink a{ display:block; width:100%; float:left; position:relative; text-transform:uppercase; padding:10px; text-align:center;background:var(--shade); color:#fff; font-weight:600; font-size:17px;}
.hourLink a small{display:block; overflow:hidden; clear:both; margin-bottom:5px;}
.hourLink a i{margin-right:10px;}
.hourLink a:after{ content: ""; position: absolute; top: 0px; right: -8px; bottom: auto; left: auto; border-color:transparent; border-left-color:var(--dark); border-width: 34px 0 35px 9px; border-style: solid; display: block; width: 0; transition:all .2s ease-in-out;}
.hourLink a:before{ content: ""; position: absolute; top: 0px; right: auto; bottom: auto; left: -8px; border-color:var(--blue); border-left-color:transparent!important; border-width: 34px 0 35px 9px; border-style: solid; display: block; width: 0; transition:all .2s ease-in-out;}
.hourLink [class^="col-"]:first-child a:before/*, .hourLink [class^="col-"]:last-child a:after*/{display:none;}
/*.hourLink [class^="col-"] a:hover{background:var(--dark);}
.hourLink [class^="col-"] a:hover:after{border-left-color:var(--dark);}
.hourLink [class^="col-"] a:hover:before{border-color:var(--dark);}*/



.project-slider{position:relative; display:block; width:100%; overflow:hidden; background:#fff;}
.project-slider > img{position:absolute; left:0; top:0; height:120%; transform: scaleX(-1);}
/*.project-slider #carouselExampleIndicators .carousel-inner{mix-blend-mode:overlay}*/
.project-slider div img{width:100%; height:550px; object-fit:cover;}
.project-slider .sliderContent{position:absolute; width:60%; left:50%; bottom:30%; transform:translate(-50%,0%); z-index:5; color:#fff; text-align:center;}
.project-slider .sliderContent h2{font-weight:600; font-size:48px; margin-bottom:15px; text-shadow: 0 0 8px #000000;}
.project-slider .sliderContent p{ font-size:24px; margin-bottom:50px;}


.welcomeArea{display:block; overflow:hidden; padding:0; background:var(--blue) no-repeat url("../images/dotted.png") left bottom; background-blend-mode:soft-light; color:#fff; position:relative; z-index:10;}
.welcomeArea:before{background:url("../images/office.jpg") no-repeat center bottom; background-color: var(--blue); background-size:100% 100%; position:absolute; right: 0; left: calc(50% + 15px); top: 0; bottom: 0; content: ''; display: block;}
.welcomeArea h2{ font-size:42px; font-weight:400; margin-bottom:5px;}
.welcomeArea a{display:inline-block; padding:12px 10px; width:150px; background:none; border:2px #fff solid; color:#fff; text-align:center; margin-top:10px;}
.welcomeArea a:hover{background:var(--dark);}
.welcomeArea h3{font-weight:300; font-size:26px; margin-bottom:25px;}
.welcomeArea p{margin-bottom:20px; font-size:16px;}
.welcomeArea p strong{color:#fff; font-size:20px;}
.welcomeArea .form-control{ font-size:12px; padding:10px; border-radius:0; margin-bottom:25px;}
.welcomeArea .btn{background:var(--dark); color:#fff; display:block; width:100%; border-radius:0; font-weight:600;}
.welcomeArea [class^="col-"] > div{padding:25px 12%;}
.welcomeArea:before{display: none;}
.welcomeArea [class^="col-"]:last-child:before{background:url("../images/office.jpg") no-repeat center bottom; background-color: var(--blue); background-size:100% 100%; position:absolute; right: 0; left:0; top: 0; bottom: 0; content: ''; display: block;}
.welcomeArea [class^="col-"]:last-child > img{position:relative; z-index: 5;}
.welcomeArea [class^="col-"]:last-child{padding: 0; margin: 0;}
.welcomeArea [class^="col-"]:last-child:after{background: var(--blue); position:absolute; right: 20%; left:0; top: 0; bottom: 0; content: ''; display: block; z-index:5;
background: linear-gradient(90deg,rgba(14, 124, 175, 1) 5%, rgba(14, 124, 175, 0) 100%);
}


.productDetails{ margin:20px 25px 30px; display:block; overflow:hidden;}
.productDetails h2{font-size:36px; margin-bottom:10px;}
.productDetails h2 + p{margin-bottom:35px;}
.productDetails [class^="col-"] a{position:relative; display:block; overflow:hidden; background:var(--blue); color:#fff;}
.productDetails [class^="col-"] a div{position:absolute; top:50%; transform:translate(0,-50%); text-align:center;width:100%; padding:0 15px; line-height:1.3; font-size:17px;}
.productDetails [class^="col-"] a div i{font-size:48px; margin-bottom: 15px;}
.productDetails [class^="col-"] a div h4{font-size:20px; font-weight:400; color:#fff; transition:all .3s ease-in-out;}
.productDetails [class^="col-"] a div span{font-size:14px;display:inline-block; padding:8px 25px; background:none; border:2px #fff solid; border-radius:30px;}
.productDetails [class^="col-"] a div span:hover{background:#fff; color:var(--dark);}
.productDetails [class^="col-"] a img{opacity:0.5;}
.productDetails [class^="col-"] a:hover img{mix-blend-mode:soft-light;}
.productDetails [class^="col-"] a div p, .productDetails [class^="col-"] a div span{opacity: 0; margin: 20px 0 -100px; transition:all .2s ease-in-out;}
.productDetails [class^="col-"] a:hover div p, .productDetails [class^="col-"] a:hover div span{opacity:1; margin:0 0 25px;}


.quickContactArea{text-align:center; background: var(--dark); color: #fff; display: block; overflow: hidden; clear: both;}
.quickContactArea h3{margin-bottom:10px; font-size:30px;}
.quickContactArea p{font-size:18px; font-weight:300; margin-bottom:20px;}
.quickContactArea h4{font-size:36px; font-weight:700; color:#fff; animation: wiggle 1.5s infinite; display:inline-block;}

.twoPartArea{background:#444 url('../images/automobile.jpg') no-repeat center left fixed; background-size:cover; position:relative; padding:100px 0;}
/*.twoPartArea:before{position:absolute; left:33.33%; right:0; top:0; bottom:0; content:''; display:block; background:var(--blue);}*/
.twoPartArea [class^="col-"] > div{padding:40px 40px 20px; color:#000;background:rgba(255,255,255,0.7); backdrop-filter: blur(10px); display: block; overflow: hidden; clear: both;}
.twoPartArea [class^="col-"] > div > a{text-transform:uppercase; border-radius:10px; padding:10px 20px; font-size:18px; background:#000; display:block; overflow:hidden;}
.twoPartArea [class^="col-"] > div > a i{font-size:15px; margin-right:10px; position:relative; top:-1px;}
.twoPartArea [class^="col-"] > div > a:hover{background:#fff;color:#000;}

.twoPartArea h2{font-weight:800; font-size:50px; margin-bottom:0;}
.twoPartArea h3{margin-bottom:10px;}
.twoPartArea p{margin-bottom:30px;}


.twoPartArea input[type="text"], .twoPartArea textarea{display:block; width:100%; padding:0 10px; height:40px; margin-bottom:15px; font-size:14px; background:#fff; border:1px #fff solid;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.twoPartArea textarea{height:95px; padding:10px 10px;}
.twoPartArea input[type="submit"], .wpforms-submit{background:var(--shade)!important; color:#fff!important; border:none!important; padding:9px 25px!important; float:right; text-transform:uppercase; font-weight:600!important; font-size:15px!important; width:100%!important;}
.twoPartArea input[type="submit"]:hover, .wpforms-submit:hover{background:var(--blue)!important;}
.twoPartArea ::placeholder {color:var(--lightblue); opacity: 1;}
.twoPartArea ::-ms-input-placeholder{color:var(--lightblue);}




.footerArea{background:#fff; padding:30px 25px; display:block;}
.footerArea [class^="col-"] h4{font-size:18px;  margin-bottom:10px; font-weight:700;}
.footerArea [class^="col-"] > img{height:80px; margin-bottom:15px;}
.footerArea [class^="col-"] > a{display:block; clear:both; padding:3px 0;color:#222;}
.footerArea [class^="col-"] > a i{margin-right:5px; color:var(--dark);}
.footerArea [class^="col-"] > a:hover{color:var(--blue);}

ul.social-links{margin:0; padding:15px 0; list-style-type:none; display:block; overflow:hidden; clear:both;}
ul.social-links li{display:inline-block; margin-right:3px;}
ul.social-links li a{text-align:center; color:var(--dark); display:block; border:1px var(--dark) solid; width:36px; height:36px; text-align:center; border-radius:50%;}
ul.social-links li a i{font-size:18px; line-height:36px;}
ul.social-links li a:hover{background:var(--dark); color:#fff;}

.footerBottom{background:var(--blue); padding:15px; display:block; font-size:13px; position:relative; color:#fff;}
.footerBottom ul{ float:right; margin:0; padding:0; list-style-type:none;}
.footerBottom ul li{ display:inline-block;}
.footerBottom ul li a{ display:block; padding:0 8px; color:#fff; border-left:1px var(--blue) solid; line-height:1;}
.footerBottom ul li:first-child a{border:none;}
.footerBottom ul li a:hover{color:var(--dark);}




#scroll-icon {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:30px;
    height:30px;
    background-color:var(--blue);
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    z-index:99999;
}
#scroll-icon span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:7px solid transparent;
    border-bottom-color:#ffffff
}
#scroll-icon:hover {
    background-color:var(--blue);
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}



.innerPage{display: block;  clear: both;  overflow: hidden;  padding: 60px 0!important;}
.innerPage ul li{margin-bottom: 10px!important;}
.wp-block-cover__background{background: var(--shade)!important; margin: 40px 0;}
.wp-container-content-ceb7f5b3{display: none!important;}
.innerPage h3{color: var(--orange); font-size: 22px; font-weight: 600; position: relative;}



.serviceInnerList{display: block; margin: 0; padding: 0; list-style-type: none;}
.innerPage .serviceInnerList li{margin:0 0 15px!important; padding: 12px; border: 1px #ddd solid; border-left: 3px var(--orange) solid; border-radius: 8px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
.serviceInnerList li i{color: var(--orange); margin-right: 10px;}

.sub-menu-toggle{display: none!important;}

.single-service.postid-48 .wp-block-group{ overflow: hidden;
padding: 30px 30px 15px; border-left: 3px var(--orange) solid;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
display: block;
margin-bottom: 30px;
border-radius: 15px;
}
.single-service.postid-48 .wp-block-group h3 i{position: absolute; right: -15px; top: -15px; font-size: 50px;}

.packageListing {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    text-align: center;
}

.packageListing li {
    width: calc((100% - 30px) / 3); /* 3 columns, 2 gaps of 15px */
    aspect-ratio: 3 / 1; /* Keeps square shape */
    background: var(--shade);
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	margin: 0 0 30px;
}
.packageListing li strong{display: block; clear: both; overflow: hidden; font-size: 20px; line-height: 1.2;}


.serviceBoxes [class^="col-"] a{position:relative; display:block; overflow:hidden; background:var(--blue); color:#fff;}
.serviceBoxes [class^="col-"] a div{position:absolute; top:50%; transform:translate(0,-50%); text-align:center;width:100%; padding:0 25px; line-height:1.3; font-size:17px;}
.serviceBoxes [class^="col-"] a div i{font-size:48px; margin-bottom: 15px;}
.serviceBoxes [class^="col-"] a div h4{font-size:20px; font-weight:400; color:#fff; transition:all .3s ease-in-out;}
.serviceBoxes [class^="col-"] a div span{font-size:14px;display:inline-block; padding:8px 25px; background:none; border:2px #fff solid; border-radius:30px;}
.serviceBoxes [class^="col-"] a div span:hover{background:#fff; color:var(--dark);}
.serviceBoxes [class^="col-"] a img{opacity:0.5; width: 100%;}
.serviceBoxes [class^="col-"] a:hover img{mix-blend-mode:soft-light;}
.serviceBoxes [class^="col-"] a div p, .serviceBoxes [class^="col-"] a div span{opacity: 0; margin: 20px 0 -100px; transition:all .2s ease-in-out;}
.serviceBoxes [class^="col-"] a:hover div p, .serviceBoxes [class^="col-"] a:hover div span{opacity:1; margin:0 0 25px;}

/*------------------------------------*\
    Media Queries
\*------------------------------------*/

@media screen and (max-width: 1920px) and (min-width: 1600px){}


@media (max-width: 991px){
.topBox{display:none;}

.logo{ margin-bottom:-80px; top:-15px;}
.logo img{height:130px; margin-bottom:0px; max-width:100%; transition:.5s ease-in-out;}
.header-area{margin:0; padding:10px;}
#myHeader{border:none;}





.footer > img{ display:none;}

.bannerContent{display:none;}

.quickContactArea h3{font-size:24px;}

}

@media (max-width: 767px){

.hourLink{padding-top:15px;}
.hourLink a{ margin-bottom:5px;}
.hourLink [class^="col-"]:nth-child(3) a:before, .hourLink [class^="col-"]:nth-child(4) a:after, .hourLink [class^="col-"]:nth-child(2) a:after{display:none;}


.project-slider div img{ max-height:300px;  min-width:100%; width:auto;}
.project-slider .sliderContent{width:100%; bottom:5%; padding:10px 15px; background:rgba(0,0,0,0.5);}
.project-slider .sliderContent h2{font-size:22px; margin-bottom:5px;}
.project-slider .sliderContent p{font-size:16px;  margin-bottom:0;}

.welcomeArea{padding:30px 15px 0; margin:0 0 -7px; top:0; text-align:center;}
.welcomeArea [class^="col-"] > div{padding:20px 5%;}
.welcomeArea h2{font-size:28px;}
.welcomeArea .col-md-6{margin-bottom:30px;}
.welcomeArea [class^="col-"]:last-child, .welcomeArea [class^="col-"]:last-child p{text-align:left; margin-top:40px;}
.welcomeArea .form-control{margin-bottom:15px;}
.welcomeArea [class^="col-"]:last-child:after{background: linear-gradient(180deg,rgba(14, 124, 175, 1) 5%, rgba(14, 124, 175, 0) 100%); left:0; right:0; top:0; bottom:40%;}


.twoPartArea h2{font-size:36px; margin-bottom:5px;}
.twoPartArea h3{ font-size:20px;}


.footer [class^="col-"]{text-align:center; margin-bottom:10px;}
.footer h4{text-align:center;}
.footer .w-50{width:auto!important}
.footer .service-link li{display:block; clear:both; overflow:hidden;}
.footer .text-sm-right{font-size:11px; margin-top:15px;}

.priceEstimatorForm > div > span{padding-top:10px; display:block;}

.headerCall > ul{display:none;}
.headerCall .mobileCallArea{display:block; margin-bottom:0px; border-top:2px var(--blue) solid; width:100%; text-align:left;}
.headerCall .mobileCallArea li{ width:auto; margin-right:15px;}

.hourLink{margin-bottom:0;}


.twoPartArea:before{ left:15px; right:15px;}
.osramLinks a{padding:7px 10px;}
.osramLinks a i{top:11px; right:8px;}

.footerArea [class^="col-"]{text-align:center; margin-bottom:25px;}

.footerBottom{text-align:center;}
.footerBottom ul{ text-align:center; display:block; float:none; padding-top:10px;}


.railProduct{ text-align:center;}
.railProduct:before{right:15px; left:15px}

	.single-service.postid-48 .wp-block-group h3{font-size: 18px;}
.single-service.postid-48 .wp-block-group h3 i{position: static;font-size: 18px;}
	
	
}

@media (max-width: 500px){
}

@media (max-width: 360px){
}