@import url(effect.css);

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap');
/* Fonts */

html { margin: 0; padding:0; overflow-x:hidden; width:100vw;}
body{
font-family: 'IBM Plex Sans', sans-serif; font-weight:normal; padding:0; color:#00131d; font-weight:normal; padding-right:0!important;
font-size:16px;
line-height:1.5;
 overflow-x:hidden; width:100vw;
}
/*	--------------------------------------------------
Global Reset & Standards
-------------------------------------------------- */

:root{--yellow:#f6d72d; --orange:#e96b24; --dark:#203669; --light:#f57e20;}

img{border:0;}

*{ box-sizing:border-box;
scrollbar-color: var(--orange) #000;
scrollbar-width: thin;
scrollbar-radius:10px;
}
*:hover{
}

a{color:var(--orange); 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(--dark);}

h1, h2, h3, h4, h5{margin:0 0 15px; padding:0;}

.wp-block-heading{ font-size:24px!important; color:var(--dark)!important;}
strong { font-weight:500!important;}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #666;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #666;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #666;
}


.fullArea{width:1280px; max-width:92%; margin:0 auto;}


/* Header */

.headerArea{display:block; position:absolute; width:100%; clear:both; padding:10px 0; font-size:14px; margin-top:0.5px; z-index:100;}
.quickLinks{list-style-type:none; margin:0 0 10px; padding:0;}
.quickLinks li{display:inline-block; margin-right:10px; font-size:16px;}
/*.quickLinks li:first-child{display:block; clear:both; font-size:24px; text-transform:uppercase; margin-bottom:5px;}
.quickLinks li:first-child a{font-weight:600; color:var(--orange);}**/
.quickLinks li a{color:#fff;}
.quickLinks li:nth-child(2) a i{font-size:14px;}
.quickLinks li:last-child a{font-weight:600; background:var(--orange); color:#fff; padding:3px 15px 5px; border-radius:30px;}

.logo{display:block;}
.logo img{max-width:100%;}

#myHeader.sticky .logo img{content:url('../images/logo.svg');}
#myHeader.sticky{position:fixed; left:0; right:0; top:0; margin-top:0; z-index:9999; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; background:#fff;}
#myHeader.sticky .quickLinks li a{color:var(--dark);}
#myHeader.sticky .quickLinks li:last-child a{ color:#fff;}



.project-slider{position:relative; width:100%; overflow:hidden; height:auto; position:relative; padding:0;}
.project-slider:before{position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index:5; content: ''; display: block;}
.sliderText:before{position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index:-1; content: ''; display: block; background: linear-gradient(180deg,#222 0%,rgba(20,50,70,0.8) 100%); opacity:0.6;}
.project-slider .sliderContent{width: 90%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:10; color:#fff; font-size:18px; font-weight:600; text-shadow: 0px 2px 2px rgba(0,0,0,0.5);}
.project-slider .sliderContent h2{font-weight:600; font-size:28px; font-weight:700; margin-bottom:20px;}
.project-slider .sliderContent ul{ padding:0 0 0 18px;}
.project-slider .sliderContent ul li{padding:3px 0;}
.project-slider .sliderContent p{font-size:20px; font-weight:700; margin-bottom:20px;}
.project-slider .sliderContent p + a{display:inline-block; border:2px #fff solid; background:var(--orange); color:#fff; padding:8px 20px 9px; margin-right:5px; border-radius:5px; text-transform:uppercase; color:#fff;}

.project-slider .sliderContent p + ahover{background:var(--orange);}


.formBox{background-color:#FFFFFF; padding:30px; border-radius:10px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); width:430px; float:right; display:block; overflow:hidden;text-shadow: 0px 2px 2px rgba(0,0,0,0); color:#222;}
.formBox h3{color:var(--orange); font-weight:700; text-align:center; margin-bottom:5px;}
.formBox p{font-size:18px!important; font-weight:400!important; margin-bottom:20px; text-align:center;}
.formBox input,
.formBox select,
.formBox textarea{padding:7px 10px; margin-bottom: 15px; border: 1px solid var(--orange); background:none; border-radius: 5px; box-sizing: border-box;}
.full {width: 100%; display: block;}
.half {width: calc(50% - 3px); display: inline-block; vertical-align: top;}
.half:first-of-type {margin-right: 15px;}
.formBox input[type="submit"]{background:var(--orange); color:#fff; padding:10px; margin-bottom:0; font-weight:700;}
.formBox input[type="submit"]:hover{background:var(--dark); border-color:var(--dark);}

div.wpforms-container-full .wpforms-form .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    word-break: break-word;
    color: #444;
}



.project-slider .carousel-item img, .project-slider .carousel-item video{width:100%; object-fit:cover; object-position:top left; animation: resize 30s linear infinite; opacity:1;}
.project-slider .carousel-item{position:relative;}
.project-slider [class^="carousel-control-"] img{filter: brightness(0) invert(1);}
@keyframes resize {0% {transform:scale(1);}50% {transform:scale(1.2);}}



.roofLink{display:block; display:block; overflow:hidden; position:relative; top:-125px; z-index:99; margin-bottom: -75px;}
.roofLink > div{padding:0; background:var(--orange); text-align:right; color:#fff; position:absolute; bottom:1px; width:100%;}
.roofLink > div a{color:#fff; display:inline-block; padding:10px 30px; border-left:1px #fff solid;}
.roofLink > div a i{margin-left:5px;}
.roofLink > div a:hover{background:var(--dark);}
.roofLink img{width:45%; position:relative; z-index:5;}


.welcomeArea{display:block; overflow:hidden; position:relative; clear:both; padding:0 0 60px;}
.welcomeArea h2{font-size:28px;}
.welcomeArea h3{font-size:22px; color:var(--orange); margin-bottom:5px;}
.welcomeArea > img{position: absolute; right: -10rem; bottom: 1.5rem; z-index: 10; width:55% ;}
.welcomeArea > svg{position: absolute;width:100%; bottom:-20px;}
.welcomeArea > div{position:relative; z-index:5;}
.welcomeArea ul{list-style-type:none; margin:0 0 20px; padding:0;}
.welcomeArea ul li{ position:relative; padding-left:25px; margin-bottom:5px; font-weight:600;}
.welcomeArea ul li:before{position:absolute; left:0; top:0; content:'\f138'; color:var(--orange); font-family:'Font Awesome 6 Free'; font-weight:900;}
.welcomeArea a{display:inline-block; background:var(--orange); color:#fff; font-weight:600; margin-right:10px; padding:8px 15px; border-radius:5px;}
.welcomeArea a:hover{background:var(--dark); color:#fff;}

.serviceArea{display:block; overflow:hidden; padding:80px 0 100px; color:#fff; background:#444 url('../images/Roof-Restoration-Service.jpg') center center no-repeat fixed; background-size:cover; background-blend-mode:overlay;}
.serviceArea h2{font-size:28px; color:var(--orange); margin-bottom:10px;}
.serviceArea h2 + p{margin-bottom:40px; font-size:20px;}
.serviceArea .row{position:relative; margin-bottom:0; color:#222;}
.serviceArea .row:before{position:absolute; left:0; right:0; top:0; bottom:0; content:''; display:block; background:#fff;/**border-top-left-radius:100px;*/}
.serviceArea .row:nth-child(even):before{/*border-top-left-radius:0;border-bottom-right-radius:100px;*/}
.serviceArea .row img{/*border-top-left-radius:100px;*/}
.serviceArea .row:nth-child(even) img{/*border-bottom-right-radius:100px;*/border-top-left-radius:0;}
.serviceArea .row [class^="col-"] > div{padding:30px;}
.serviceArea .row:nth-child(odd) [class^="col-"]:first-child{left:50%;}
.serviceArea .row:nth-child(odd) [class^="col-"]:last-child{right:50%;}
.serviceArea h3{font-size:26px;}
.serviceArea .row [class^="col-"] p strong{color:var(--light);}
.serviceArea ul{list-style-type:none; margin:0 0 20px; padding:0;}
.serviceArea ul li{ position:relative; padding-left:25px; margin-bottom:5px; font-weight:600;}
.serviceArea ul li:before{position:absolute; left:0; top:0; content:'\f138'; color:var(--orange); font-family:'Font Awesome 6 Free'; font-weight:900;}
.serviceArea a{display:inline-block; background:var(--orange); color:#fff; font-weight:600; margin-right:10px; padding:8px 25px; border-radius:5px;}
.serviceArea a:hover{background:var(--dark);}



.countArea{display:block; background:#fff;padding:40px 0 0;}
.countArea h3{font-size:18px; font-weight:700; margin-bottom:0; line-height:1.1; color:var(--dark);}
.countArea p{margin:0; font-size:16px; line-height:1.2;}
.countArea [class^="col-"] > div{display:flex; align-items: center; gap:10px; justify-content: center; position:relative;}
.countArea [class^="col-"] > div > div{background:var(--orange); padding:10px 25px; position:relative;}
.countArea [class^="col-"] > div > div img{height:50px;}
.countArea [class^="col-"] > div > div:before{content: "";
  position: absolute;
  bottom: -49px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 50px solid var(--orange);
  border-left: 69px solid transparent;
  border-right: 69px solid transparent;}
.countArea [class^="col-"] > div img{}


.shortAdsArea{display:block; overflow:hidden; padding:70px 0 40px; background:var(--dark); color:#fff; text-align:center;}
.shortAdsArea h3{font-size:26px; margin:0 0 15px;}
.shortAdsArea a{background:#fff; padding:12px 25px; display:inline-block; text-align:center; color:var(--orange); border-radius:5px; font-weight:700;}
.shortAdsArea a:hover{background:var(--orange); color:#fff;}
.shortAdsArea [class^="col-"]:first-child img{height:150px;}



.recentReviews{background: #eee; display: block; overflow: hidden; padding: 60px 0; text-align: center;}
.recentReviews h2{font-size: 28px; margin-bottom: 10px; color: var(--orange);}
.recentReviews h3{font-size: 20px; margin-bottom: 30px; color: var(--dark);}
.recentReviews a{background: var(--orange); color: #fff; display: inline-block; padding: 15px 30px; font-weight: 600; border-radius:5px;}
.recentReviews a:hover{background: var(--dark);}

/* -- Logos Scroll -- */
.simply-scroll-container{position: relative; margin-bottom: 40px}
.simply-scroll-clip{position: relative;	overflow: hidden;}
.simply-scroll-list{overflow: hidden;	margin: 0;	padding: 0;	list-style: none;}
.simply-scroll-list li {padding: 0;	margin: 0;	list-style: none; background:#fff;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
.simply-scroll{width: 100%;}
.simply-scroll .simply-scroll-clip{width: 100%;}	
.simply-scroll .simply-scroll-list li{float: left; width: 350px; border-radius:15px; padding: 20px; margin:10px;}
.simply-scroll .simply-scroll-list li h4{font-size:18px; margin-top:5px;}
.simply-scroll .simply-scroll-list li span{margin-bottom: 10px; display: block; font-size: 14px; color: var(--orange);}
.simply-scroll .simply-scroll-list li strong{display: inline-block; font-size: 14px; background: var(--dark); color:#fff; padding: 3px 15px; border-radius:50px;}
.simply-scroll .simply-scroll-list li p{line-height:1.3; min-height:150px;}
/* -- Logos Scroll End -- */



.socialIcons{ display:block; list-style-type:none; margin:0; padding:0;}
.socialIcons li{ display:inline-block; font-size:18px; margin:0 4px;}
.socialIcons li a{ display:block; overflow:hidden; width:45px; height:45px; background:var(--orange); color:#fff; line-height:48px; border-radius:50%; text-align:center;}
.socialIcons li a:hover{ background:#fff; color:var(--orange);}


.footer{display:block; overflow:hidden; clear:both; padding:40px 0; background:var(--dark) no-repeat url('../images/roofing-canberra-banner2.jpg') center center fixed; background-size:cover; color:#fff;}
.footer img{height:140px; /*filter: brightness(0) saturate(100%) invert(100%);*/}
.footer a:hover{color:var(--orange);}
.footer p{display:block; padding-top:10px; margin-bottom:0;}

.footerquickLinks{display:inline-block; margin:0; padding:0; list-style-type:none; text-align:center; width:100%; border-bottom:1px #fff dotted; margin-bottom:30px;}
.footerquickLinks li{display:inline-block; margin:10px; text-transform:uppercase; letter-spacing:1px;}
.footerquickLinks li a{color:#fff;}


#scroll-icon {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:35px;
    height:35px;
    text-indent:-9999px;
    display:none;
    z-index:99999;
}
#scroll-icon span {
	position:absolute; left:0; top:0;
    height:35px;
    width:35px;
    background:transparent url('../images/arrowup.png') no-repeat center center;
}
#scroll-icon:hover {
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}
#scroll-icon:hover span{ background-image:url('../images/arrowupsolid.png');}

div.wpforms-container-full .wpforms-form textarea.wpforms-field-large {
  height: 100px!important;
}

 div.wpforms-container-full .wpforms-form button[type="submit"]{
  background-color: var(--orange)!important;
  border: 1px solid var(--orange)!important;
  color: #fff!important;
  font-size: 1em;
  padding: 10px 15px; width: 100%;
}

div.wpforms-container-full .wpforms-form .wpforms-field {
  padding: 5px 0!important;
  clear: both;
}




/*------------------next------------------*/

/* -- Inner Area -- */


.nxtbannerarea{ display:block; /*overflow:hidden;*/ position:relative; clear:both; margin:0 auto;  }
.nxtbannerarea:before{ display:block; overflow:hidden; position: absolute; top: 0; left: 0; content: ''; z-index:0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(1px);}
.nxtbannerarea .inner-header{ text-align: center; color:#fff; padding:0 0 10px; position:absolute; bottom:20%; left:50%; transform: translate(-50%, -50%); width: 100%; }
.nxtbannerarea .inner-header h1{ font-size:30px; color:#fff}
.nxtbannerarea .inner-header ul.breadcrumb-list { display:block; padding:0!important; margin:0!important; list-style-type:none!important; text-align: center;}
.nxtbannerarea .inner-header ul.breadcrumb-list li{ display:inline-block!important; padding:0 10px 0 0!important; margin:0!important; font-size:14px!important; color:#fff; position:relative; }
.nxtbannerarea .inner-header ul.breadcrumb-list li:before{ content:'/'!important; position:absolute!important; top:0!important; left:-8px!important;}
.nxtbannerarea .inner-header ul.breadcrumb-list li a{ color:#fff; background:none!important; font-weight:400!important;}
.nxtbannerarea .inner-header ul.breadcrumb-list li a:hover{ color:#ffe87d;}
.nxtbannerarea .inner-header ul.breadcrumb-list li:first-child:before{ display:none; padding:0; }

.nextareasp { background:#f3f3f3!important; padding:30px; display: block; margin-top:0; margin-bottom:0!important;}

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

.nxtaboutArea { float:left; width:100%; clear:both; /*padding:60px 0;*/ color:#111; background:#fff no-repeat url('../images/nextbg.jpg') center center;  position:relative; z-index:10;}
.nxtaboutArea .bginner{ background:#fff; margin-top: -50px; margin-bottom: 50px;  padding:60px 40px; -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px; -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);}
.nxtaboutArea h2 strong{clear:both; display:block; color:var(--skyblue);}
.nxtaboutArea p{margin-bottom:30px;}

.nxtaboutArea ul{ display: block; padding: 0; margin: 0; list-style-type: none;}
.nxtaboutArea ul li{ position: relative; padding-left:20px; padding-bottom: 20px; display: block}
.nxtaboutArea ul li:before{ position: absolute; left: 0; top:0; content:'\f138'; font-family:'Font Awesome 5 Free'; font-weight: 900; color:#444; }


.nxtaboutArea input, .nxtaboutArea textarea{width:100%; border:1px #ccc solid; height:50px; padding:5px 10px; margin-bottom:15px;}
.nxtaboutArea textarea{height:200px;}
.nxtaboutArea input[type="submit"]{border:none; background:var(--red); color:#fff; font-weight:600; margin-bottom:0px;}
.nxtaboutArea input[type="submit"]:hover{cursor:pointer; background:var(--skyblue);}
/*.nxtaboutArea > div > .row > [class^="col-"] > div{background:#fff; display:block; overflow:hidden; padding:40px; color:#222; position:relative; top:-125px; margin-bottom:-125px; border-radius:10px;
-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);}*/

ul.nxtaboutAreaimg li{ display:inline-block; padding:10px 5px 10px; width:30%; margin:40px 10px 10px; text-align:center; background:var(--blue); color:#fff; border-radius:10px; text-transform:uppercase; letter-spacing:1px; font-weight:700; font-size:14px;
-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
}
ul.nxtaboutAreaimg li i{display:block;width:100%;margin-bottom:15px; font-size:36px;}
ul.nxtaboutAreaimg li h4{display:block;font-size:20px; padding-top: 20px;}
ul.nxtaboutAreaimg li:hover{background:var(--light)!important; color: #111;}


.gallery-listing-area{margin-bottom:0; display: block!important; padding: 80px 0 0; margin-top:50px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffc045+0,ffc045+100&0.65+0,0+100 */
background: -moz-linear-gradient(top,  rgba(255,192,69,0.65) 0%, rgba(255,192,69,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,192,69,0.65) 0%,rgba(255,192,69,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,192,69,0.65) 0%,rgba(255,192,69,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6ffc045', endColorstr='#00ffc045',GradientType=0 ); /* IE6-9 */ }
.gallery-listing-area h2{ padding-bottom:40px!important; margin-bottom: 0!important; line-height: 1!important; font-size: 24px;  padding-left:0!important; border-left:none!important;}
.gallery-listing-area p{font-size:18px; padding-bottom: 20px!important;}
.gallery-listing [class^="col-"] div{display:block!important; margin-bottom:30px!important }
.gallery-listing [class^="col-"] div img{padding:0; height:250px!important; object-fit:cover;  display:block; overflow: hidden; width:100%!important; transition:.2s ease-in-out!important;	 
	transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;}
.gallery-listing [class^="col-"] div img:hover{opacity:0.5!important;	transform:scale(1.05,1.05)!important;}
.gallery-listing > .row [class^="col-"] > div h3{font-size:15px; font-weight:600; line-height:1.5; margin-bottom:0;padding:3px 10px; font-weight:600; background:#b92a30; color:#fff;}


.contactFormArea{ float:left; width:100%; clear:both; /*padding:60px 0;*/ color:#111; background:var(--dark) no-repeat url('../images/nextbg.jpg') center center;  position:relative; z-index:10;}
.contactFormArea .bginner{ background:#fff; margin-top: -50px; margin-bottom: 50px;  padding:60px 40px; -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px; -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);}

.contactFormArea .formBox [class^="col-"]:first-child{text-align:left; color: #fff;}
.contactFormArea [class^="col-"]:last-child > div{background:var(--gold); text-align:left; display:block;  padding:0; position:relative;  border-radius:10px; top:0; margin-bottom:0; border:2px #fff solid; }
.contactFormArea [class^="col-"] > div input, .contactFormArea [class^="col-"] > div select{width:100%; border:1px #ddd solid; background:#fff; padding:10px; margin-bottom:15px;}
.contactFormArea [class^="col-"] > div textarea{width:100%; border:1px #ddd solid; padding:10px; margin-bottom:15px; height:120px;}
.contactFormArea [class^="col-"] > div input[type="submit"]{width:100%; border:1px 0 solid; padding:15px; margin-bottom:0; background:var(--dark);color:#fff; font-weight:700; text-transform:uppercase; font-weight:600;}
.contactFormArea h3{font-weight:700; margin-bottom:25px; font-size:28px; color:var(--orange); text-align:left;}
.contactFormArea ul{margin:0; padding:0; list-style-type:none; margin-bottom:15px; overflow:hidden; padding:22px; background:#444; border-radius:10px;}
.contactFormArea ul li{display:block; color:#fff; margin-bottom:12px; }
.contactFormArea ul li strong{display:block; padding-top: 20px; clear:both; overflow:hidden; color:var(--gold); font-size:17px;}
.contactFormArea ul li i{font-weight: 900; color: #fff; display: inline-block}
.contactFormArea ul li a{color:#fff;}
.contactFormArea ul li a:hover{color:var(--orange);}
.contactFormArea ul li i{color:var(--orange);}






/*---------------Blogs-----------------*/ 

.blog-area {
  display: block;
  overflow: hidden;
  clear: both;
  padding-top: 30px;
}

.blog-area [class^="col-"] div {
  padding: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  margin-bottom: 25px;
  border-radius: 10px;
  background: #fff;
}

.blog-area [class^="col-"] a h4 {
  padding: 6px;
  text-align: left;
  margin: 10px auto;
  font-weight: 900;
  font-size: 13px;
  position: relative;
  display: block;
  color: #444;
  text-transform: uppercase;
  clear: both;
}

.blog-area [class^="col-"] a p {
  margin-bottom: 15px !important;
  line-height: 1.3 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #666;
}

.blog-area [class^="col-"] a img {
  height: 300px;
  object-fit: cover;
  width: 100%;
  border-radius: 8px;
}

.blog-area [class^="col-"] a:hover {
  color: #111;
}

.blog-area .read-more {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #0a1833;
  margin-top: 5px;
}


/*-----------------------------------------*/
.related-blogs {
  margin: 40px 0;
  background: #f3f3f3;
  padding: 20px;
  border-radius: 20px;
}

.related-blogs h2 {
  font-size: 22px;
  margin-bottom: 20px;
}

.blog-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s;
	margin-bottom:20px;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-card img {
  height: 300px; object-fit:cover; width:100%;
  display: block;
}

.blog-card h4 {
  font-size: 16px;
  margin: 15px;
  color: #0a1833;
}

.blog-card p {
  font-size: 14px;
  color: #555;
  margin: 0 15px 15px; display: -webkit-box;
  -webkit-line-clamp: 2; /* limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-card .read-more {
  display: block;
  margin: 0 15px 15px;
  color: #0a1833;
  font-weight: bold;
  text-decoration: underline;
}

/*-------------------------Service area--------------------------------*/

.leftLinks {
    position: relative;
    width: 100%;
    /*padding:5px;*/
	background:#f0f4fe; margin-top:10px; /*border: 1px dotted #203669;*/
}

.leftLinks ul{text-align:left; display:block; padding:0; margin:0;}
.leftLinks ul li{display:block!important; overflow:hidden!important; padding-left:0; position: relative;  padding-bottom: 0;  }
.leftLinks ul li a{padding: 6px!important; display:block!important; margin-bottom:2px; clear:both; color:#fff; font-size:14px!important; letter-spacing:1px; font-weight:bold; background:var(--orange); text-decoration:none!important; text-transform:none!important;}

.leftLinks ul li:before {
  position: absolute;
  left: 0;
  top: 5px!important;
 content:'\f138'; font-family:'Font Awesome 5 Free'; font-weight: 900; color:#fff!important; display:none!important;}

.leftLinks ul li a:hover{color:#fff; background:var(--orange); text-transform:none!important; text-decoration:none!important; }


.leftLinks:after
 {
    content: "";
    position: absolute;
    bottom: -48px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 50px solid var(--orange);
    border-left: 69px solid transparent;
    border-right: 69px solid transparent;
}


.leftcontact{display: block; margin: 50px auto 20px; text-align: center; color: #000; }
.leftcontact a{color: var(--dark); }
.leftcontact a:hover{color:#000; }


.service_section{background:#fff url('../images/paraImg.jpg') no-repeat center bottom;}
.service_section .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #ffffff;
  padding: 30px;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  margin-top: 45px;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.service_section .box img { margin-bottom:15px; display:block; height:150px; width:300px!important; object-fit:cover}

.service_section .box:hover {
  background-color: var(--dark);
  color: #ffffff;
  -webkit-box-shadow: 15px 15px 0 1px rgba(0, 0, 0, 0.2);
          box-shadow: 15px 15px 0 1px rgba(0, 0, 0, 0.2);
}

.service_section .detail-box {
  margin-left: 0;
}
.service_section .detail-box p{font-size:14px;}



.service_section .detail-box a {
  display: inline-block;
  padding: 5px 30px;
  background-color: var(--orange);
  color: #ffffff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border: 1px solid transparent;
  margin-top: 10px;
}

.service_section .detail-box a:hover {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

.service_section .detail-box h6 {
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px; height: 50px;
}

.service_section .detail-box:hover h6 {
 color: #ffffff;
}


/*----------------------------*/


.service_section1{background:#fff;}
.service_section1 .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  padding:5px; 
}
.service_section1 .box img { margin-bottom:15px; display:block;}

.service_section1 .box:hover {
  /*background-color: var(--dark);*/
  color: var(--dark);
}

.service_section1 .detail-box {
  margin-left: 0;
}
.service_section1 .detail-box p{font-size:14px;}

.service_section1 .detail-box a {
  display:inline-block;
  padding: 5px;
  /*background-color: var(--orange);*/
  color: #444;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border: 1px solid transparent;
  margin-top: 10px; line-height:1px;
	
}

.service_section1 .detail-box a:hover {
  background-color: transparent;
  /*border-color: var(--orange);*/
  color:var(--orange);
}

.service_section1 .detail-box h6 {
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  /*margin-bottom: 20px;*/ height:auto; line-height:1; padding:0;	
}

.service_section1 .detail-box:hover h6 {
 color: var(--orange);
}




.leftLinks1 {
    position: relative;
    width: 100%;
    /*padding:5px;*/
	/*background:#fff; margin-top:10px; /*border: 1px dotted #203669;*/
}

.leftLinks1 ul{text-align:left; display:block; padding:0; margin:0;}
.leftLinks1 ul li{display:inline-block!important; width:48%; overflow:hidden!important; padding-left:20px; position: relative;  padding-bottom: 0;  }
.leftLinks1 ul li a{padding: 6px!important; display:block!important; margin-bottom:2px; color:#111; font-size:14px!important; letter-spacing:1px; font-weight:bold; /*background:var(--orange);*/ text-decoration:none!important; text-transform:none!important;}

.leftLinks1 ul li:before {  position: absolute;  left: 0;  top: 5px!important; content:'\f276'; font-family:'Font Awesome 5 Free'; font-weight: 900; color:var(--orange)!important; }

/*.leftLinks ul li a:hover{color:#fff; background:var(--orange); text-transform:none!important; text-decoration:none!important; }*/






/*******************************/
/********* Contact CSS *********/
/*******************************/
.contact {
    position: relative;
    width: 100%;
    padding:30px 15px 0 15px;
	background:var(--dark); /*margin-top: 40px;*/ border: 1px dotted #203669;
}

.contact .contact-info {
    position: relative;
    display: flex;
    
    margin-bottom: 30px;
    transition: .3s;
	/*background:#082d53;*/
	padding:10px;
}

.contact .contact-info:hover {
    border-color: transparent;
    box-shadow: 0 0 30px rgba(0, 0, 0, .1); background:#fff;
}

.contact .contact-icon {
    position: relative;
    width: 50px!important;
    height: 50px;
    display: flex;
    align-items:center;
    justify-content:center;
    border: 1px solid #203669; margin-right: 10px; 
	text-align:center
}

.contact .contact-icon i {
    font-size:25px;
    color: #203669;
}

.contact .contact-text { 
    display:block;
    padding-left:5px;
	text-align:left; font-size: 20px; font-weight:600;  color: #203669;
}

.contact  h2 {font-size:24px;  text-align:left; color: #fff }

.contact .contact-text h3 {    font-size:20px;    font-weight:600;    color: #CD4C11;	padding:0; margin:0;  }
.contact .contact-text a { 	color: #203669; font-size:20px; line-height:1; font-weight:600; }
.contact .contact-form h2 { font-size:20px; font-weight:600;    color:#fff;	padding:0; margin:0; text-align: center;  }
.contact .contact-form { position: relative; margin-bottom: 30px; transition: .3s; width: 100%;}
.contact .contact-form .form-control{display:block; overflow:hidden; padding:14px; border-radius:0; margin-bottom:10px; font-size:14px; }
.contact .contact-form select.form-control{height:auto;}
.contact .contact-form .textarea{height:150px;font-size:14px; display:block; overflow:hidden; width: 100%!important; padding:14px; border: 1px #00b3ff solid!important;}
.contact .contact-form .btn{background:#000; border-radius:0; padding:14px 30px; color:#fff; font-size:14px; font-weight:600; letter-spacing:1px;}
.contact .contact-form .btn:hover{background:#fff; color:#000; }

.contact .contact-form .form-control {
    border: 1px #00b3ff solid!important;
}

.contact div.wpforms-container-full .wpforms-form .wpforms-field-label {   
    color: #fff!important; font-size: 14px!important;
}

.contact div.wpforms-container-full .wpforms-form .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
color:#fff;
}

.contact ul li:before {
    position: absolute;
    left:10px;
    top:3px;
    content: '\f138';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color:#fff!important; font-size:18px;
}


.bg-light{background: #F0F0F0;
background: radial-gradient(circle, rgba(240, 240, 240, 1) 57%, rgba(232, 237, 241, 1) 100%); padding:20px; border: 1px #DFE3ED solid!important;}

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

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

@media (max-width: 991px){
.headerArea{display:block; overflow:hidden; text-align:center;}
.headerArea [class^="col-"]:last-child{height:40px;}
.quickLinks{text-align:left;}
.quickLinks li:first-child{font-size:16px; margin:8px 0;}
.quickLinks li{ margin-right:10px; font-size:14px;}
.quickLinks li:nth-child(2){display:none;}
.logo img{height:60px; margin-bottom:10px;}


.serviceArea .row:nth-child(odd) [class^="col-"]:first-child{left:0%;}
.serviceArea .row:nth-child(odd) [class^="col-"]:last-child{right:0%;}
.serviceArea .row:before,.serviceArea .row:nth-child(even):before,.serviceArea .row img,.serviceArea .row:nth-child(even) img{border-radius:0!important;}
.serviceArea .row:first-child{margin-bottom:40px;}


.shortAdsArea [class^="col-"]:nth-child(2){padding:30px 0!important;}
	
.nxtbannerarea{ display:block; /*overflow:hidden;*/ height:300px; position:relative; clear:both; margin:0 auto;  }	
	.nxtbannerarea img{ display:block; /*overflow:hidden;*/ height:300px; object-fit:cover;  }
	
	.nxtbannerarea .inner-header {
  text-align: center;
  color: #fff;
  padding: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(0, 0);
  width: 100%;}

	.nxtbannerarea .inner-header h1 {
  font-size:25px;
  color: #fff;}
	
	.nxtaboutArea .bginner {
  background: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 60px 20px;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
}
	
	
}

@media (max-width: 767px){

.roofLink{top:0;}
.roofLink img{ width:120%; position:relative; left:-10%; top:-85px; margin-bottom:-80px;}
.roofLink > div{position:static; padding-bottom:85px;}
.roofLink > div a{width:100%; border:none; text-align:center;}

.welcomeArea{padding:0;}
.welcomeArea [class^="col-"]{margin-bottom:40px;}
.welcomeArea h2{font-weight:700; font-size:26px;}

.project-slider{ height:auto; background:var(--dark);}
.project-slider .sliderContent{width:100%; left:0; right:0; position:relative; transform:translate(0,0); padding:25px;}
.project-slider .carousel-item img{width:120%; height:50vh;}
.formBox{width:100%; margin:30px 0;}
.project-slider .sliderContent a{margin-bottom:10px;}
.countArea{padding:40px 0 25px;}
.countArea [class^="col-"] > div{justify-content: start; margin-bottom:15px;}
.countArea [class^="col-"] > div > div:before{display:none;}

.shortAdsArea{padding:45px 0;}

	.nxtaboutArea h2{font-size:22px!important; }
		.nxtaboutArea h3{font-size:20px!important; }
			.nxtaboutArea h4{font-size:18px!important; }
	.nxtaboutArea h5{font-size:16px!important; }
	.nxtaboutArea h6{font-size:14px!important; }

.footerArea{ text-align:center;}
.footerArea ul{margin:10px 0;}


.footerSocial{padding-top:20px;}
.footer-down{text-align:center; font-size:12px;}
.footer{text-align:center;}
.footer [class^="col-"]{border:none; margin-bottom:15px;}


}

@media (max-width: 500px){

}

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


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

@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
}