/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.5.15,
* Autoprefixer: v10.5.0
* Browsers: last 4 version
*/



* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

.suspension-contain {max-height: 980px;overflow:hidden;position: relative;}
html.suspended {background: rgba(0,0,0,0.6);}
body {max-width: 100%;margin: 0 auto;text-align: center;font-family: 'Anoton',sans-serif;}
a {color:inherit;text-decoration: none}
a:hover {text-decoration: none;color:inherit;}
h1,h2,h3,h4,h5,h6,p{ padding:0; margin:0; }
.row {max-width: 1850px; margin: 0 auto; padding: 0 15px;}

/*display-inline*/
.inbM { display: inline-block; vertical-align: middle; -webkit-box-sizing: border-box; box-sizing: border-box; }
.inbT { display: inline-block; vertical-align: top; -webkit-box-sizing: border-box; box-sizing: border-box; }

/*flex*/

.flexs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.flexc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.flexe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }


/*button*/
.btn { max-width: 200px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; z-index: 1; display: inline-block; background: #0FAE44; font-weight: 400; font-size: 20px; text-align: center; letter-spacing: 0.5px; color: #FFFFFF; padding: 15px 0; box-sizing: border-box; font-family: 'Anton',sans-serif; border-radius:50px; }
.btn a { color: #FFFFFF!important; }
.btn:hover {color: #FFF !important; -webkit-box-shadow: 0px 10px 20px -10px #000; box-shadow: 0px 10px 20px -10px #000;  }
.btn::after {content: ""; background: #2E33A1; -webkit-transition: all .3s linear; transition: all .3s linear; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; position: absolute;  height: 100%; width: 100%;z-index: -1;left: 0; top: 0; border-radius:50px; }
.btn:hover::after {-webkit-transform: scaleX(1);-ms-transform: scaleX(1);transform: scaleX(1);}

/*floats*/
.fl {float:left;}
.fr {float:right;}

/*socials*/
.socials a { font-family: 'socialico'; font-size: 25px; color: #FFFFFF; display: inline-block; border-radius:50%; padding:20px 25px; background:#0FAE44;  }
.socials a:last-of-type { margin-bottom: 0; }

/*typography*/
.text-primary{ color: #B11414; }
.text-bold{ font-weight: 700; }
.text-uppercase{ text-transform: uppercase }
.text-center{ text-align: center !important; }
.text-left{ text-align: left; }

/*clearings*/
.clear{ clear:both;}
.clearfix:after {content:"."; display:block; height:0; clear:both;visibility:hidden;font-size: 0;}
.clearfix {display:block;}

/*cookie*/
.cc-animate.cc-revoke.cc-bottom{font-size: 14px; padding: 5px 10px; position: fixed; display: block!important; -webkit-transform: none!important; -ms-transform: none!important; transform: none!important; bottom: 0!important; left: 20px!important;}

/*call to action*/
.destroy-on-load, .cta {display: none;}

/*contact form messages*/
form .messages p {display: none;font-family: Arial !important;font-weight: 400 !important;letter-spacing: 0 !important;font-size: 16px !important;}
form .loading {display: none;}
form .alert {padding: 15px;margin-bottom: 20px;border: 1px solid transparent;border-radius: 4px;}
form .alert-success {color: #3c763d;background-color: #dff0d8;border-color: #d6e9c6;}
form .alert-danger {color: #a94442;background-color: #f2dede;border-color: #ebccd1;}
form [type="submit"] {margin:20px auto}

/*contact form*/
.ctc-form {margin: 0 auto;text-align: center;}
.ctc-form input[type="text"],.ctc-form textarea {font-family:Arial;font-size: 16px;color:#000;height:45px;display: block;width: 100%;border:1px solid #ddd;border-radius: 3px;padding: 5px 10px;-webkit-box-sizing: border-box;box-sizing: border-box;}
.ctc-form textarea {height: 120px;padding-top:10px;}
/*.ctc-form input[type="text"] {font-family:'Montserrat', sans-serif; font-size: 16px;color:#333333;height:63px;display: inline-block;width: 32%;border: none!important;border-radius: none!important;padding: 15px 20px;box-sizing: border-box;margin: 0 6px 16px;; background: #EEEEEE; font-weight: 500; }
.ctc-form textarea {font-family:'Montserrat', sans-serif; font-size: 16px;color:#333333;height:134px;display: inline-block;width: 98.5%;border: none!important;border-radius: none!important;padding: 15px 20px;box-sizing: border-box;margin: 0 auto 10px; background: #EEEEEE; font-weight: 500; }*/
.ctc-form button {display: block;}
.ctc-form .recap {display: inline-block;}
.ctc-form .g-recaptcha div {margin: 0 auto 10px;}
.ctc-form .ctc-hide {display: none;}
::-webkit-input-placeholder { /* Edge */ color: #111111; }
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #111111; }
::-moz-placeholder { color: #111111; }
::-ms-input-placeholder { color: #111111; }
::placeholder { color: #111111; }
/*gallery*/
#content .gallery-container {text-align: center;}
#content .gallery {list-style-type: none;margin: 0;padding: 0;}
#content .gallery li {display: inline-block;}
#content .thumbnail {background-color: #fff;border: 1px solid #ddd;border-radius: 4px;display: block;line-height: .42857; margin-bottom: 20px;padding: 4px;-webkit-transition: border 0.5s ease-in-out 0s;transition: border 0.5s ease-in-out 0s;}
#content .thumbnail:hover {-webkit-transform: scale(1.02);-ms-transform: scale(1.02);transform: scale(1.02);}
#content .page_navigation {display: inline-block;}
#content .page_link,#content .previous_link,#content .next_link,#content  .first_link,#content  .last_link, #content .ellipse {background-color: #fff;border: 1px solid #ddd;color:  #0275d8;display: inline-block;line-height: 1.25;margin-left: -1px;padding: 0.5rem 0.75rem;position: relative;}
#content .page_navigation > a:hover , .page_navigation > a.active_page {background-color: #eceeef;border-color: #ddd;color: #014c8c;text-decoration: none;}

.size { display:-webkit-box; display:-ms-flexbox; display:flex; gap:10px; }
.size img, .loc img { max-width:50px; width:100%; height:50px; margin:auto 0;  }
.size p { font-size:12px; font-weight:700; }
.size .number, .footer-number { display:-webkit-box; display:-ms-flexbox; display:flex; gap:10px; }


.font-colorb { color:#333333; }
.fontw { color:#FFFFFF }
.tel { margin: auto 0; }
.tel a { font-size:30px; font-weight:400; line-height:120%; font-family:'Anton',sans-serif; color:#333;  }
.phone p { color:#333; font-weight:700; font-size:12px; line-height:120%; text-align:left;  }
span { display:block; }

.stars { font-size: 30px;
    color: #E2961E;
    margin: 10px 0; }

.tl { text-align:left; }


h1, h2 {font-size: 80px;font-weight: 400; line-height: 120%; font-family: 'Anton',sans-serif;}
h2 { letter-spacing:-0.02em; }
h3 { font-size:80px; font-weight:400; font-family:'Anton',sans-serif; line-height:120%;  }
h4 { font-size:30px; font-weight:400; font-family:'Anton',sans-serif; line-height:120%; }
h5 { font-size:18px; font-weight:700; line-height:120%; font-family:'Figtree',sans-serif; }
h6 { font-size:15px; font-weight:700; font-family:'Figtree',sans-serif; letter-spacing:0.1em; line-height:120%; }
p, .list { font-size:20px; font-weight:400; font-family:'Figtree',sans-serif; line-height:140%; letter-spacing:0.02em; }

/*header*/
#header {background: transparent ;top: 20px; position: absolute; z-index: 999; width: 100%;}
/*#header { position: absolute; padding: 0; min-width: 1200px; z-index: 2; width: 100%; }*/
#header nav a#pull {display: none}
#header nav ul {margin: 0;padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px;}
#header nav ul li {display: inline-block;vertical-align: middle;}
#header nav ul li a { position: relative; font-weight: 700; font-size: 18px; line-height: 120%; display: inline-block; font-family:'Figtree',sans-serif; }
#header nav ul li a::before { content: ""; background: #0FAE44; width: 100%; max-width: 100%; height: 10px; position: absolute; bottom: -40px; left: 0; right: 0; margin: 0 auto; -webkit-transition: all .3s linear; transition: all .3s linear; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0);}
#header nav ul li a:hover::before,
#header nav ul li.active-menu a::before {-webkit-transform: scaleX(1);-ms-transform: scaleX(1);transform: scaleX(1);}
#header nav ul li.active-menu a, #header nav ul li a:hover {color:#0FAE44;}

.header-container { border-radius:10px; padding:0 15px; background:#FFF; position:relative; }
.header-left { width: 70%; gap:40px; }
.header-right { width:25%; }
.header-right img { max-width:50px; width: 100%; height:100% }

/*banner*/
/*#banner {background: #6497B1;padding: 40px 0}*/
/*#banner { background: url(../images/content/banner-bg.jpg)no-repeat center center; background-size:cover; height: 100dvh; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align:  center; -ms-flex-align:  center; align-items:  center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 50px 0;}
.banner-container h5 { margin:30px 0 35px; }*/

#banner { position: relative; width: 100%; height: 100dvh; min-height: 500px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 50px 0;}
.banner-slide { position: absolute !important; top: 0; left: 0; width: 100%; height: 100% !important; z-index: 1;
}
.banner-slide .slick-list,.banner-slide .slick-track,.banner-slide .item,.banner-slide .banner-img { height: 100% !important;}
.banner-img img { width: 100%; height: 100dvh; min-height: 500px; object-fit: cover; object-position: center; display: block;}
.banner-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); z-index: 2;}
#banner .row { position: relative; z-index: 3; width: 100%;}
.banner-container h5 {  margin: 30px 0 35px; }

/*welcome*/
#welcome { padding:160px 0 110px; }
#welcome .row { max-width:1500px; width:100%; padding:0 15px; margin:0 auto; }
.welcome-container { -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start; gap:20px; }
.welcome-left { width:44%; }
.welcome-left h5 { position:relative; padding-left:30px; margin-bottom:100px; }
.welcome-left h5::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; background: #0FAE44; }
.welcome-left img { max-width:640px; width:100%; margin:0 0 -300px; }
.welcome-right { width: 49%; }
.welcome-right .frist { margin:70px 0 30px; }
.welcome-right .last { margin:0 0 50px; }


/*service*/
#service { padding:300px 0 50px; position:relative; }
#service::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #2E33A1; /* Dark blue background */ z-index: -1; clip-path: polygon(0 120px,  100% 0,   100% 100%, 0 100% );}
.service-top { max-width:1500px; width:100%; margin:0 auto; -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start; }
.servive-left { width:25%; }
.servive-left h5 { position:relative; padding-left:30px; }
.servive-left h5::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; background: #0FAE44; }
.service-right { width:70%; }
.service-right h2 { max-width:980px; width:100%;  }
.service-right p { margin:30px 0 100px; }
.service-bot { display:-ms-grid; display:grid; -ms-grid-columns:1fr 10px 1fr 10px 1fr; grid-template-columns:repeat(3, 1fr); gap:10px; }
.service-bot .img { position: relative; overflow: hidden;}
.service-bot .img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block;}
.service-bot .service-overlay { position: absolute; top: 55px; left: 45px; right: 20px; z-index: 2;}
.service-overlay p { font-size:18px; font-weight:700; }

/*chooce*/
#choose { padding: 100px 0 140px; position:relative; }
#choose::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #00aa4f; z-index: -1; clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }
#choose .row { max-width:1500px; width:100%; padding:0 15px; }
.choose-top {  display:-webkit-box;  display:-ms-flexbox;  display:flex; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start; }
.choose-top h5 { position:relative; padding-left:30px; margin:0 0 120px; }
.choose-top h5::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; background: #2E33A1; }
.choose-mid, .choose-bot { max-width:1366px; width:100%; margin: 0 0 0 auto; }
.choose-mid { display:-webkit-box; display:-ms-flexbox; display:flex; gap:120px; }
.choose-left { width:55%; }
.choose-left h2 { font-size: 60px; max-width: 760px; width:100%; }
.choose-right p { max-width:480px; width:100%; }
.choose-right { width:35%; }
.choose-item { display:-webkit-box; display:-ms-flexbox; display:flex; gap:190px; margin:110px 0 100px; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.choose-icon img { max-width: 120px; width:100%; margin: 0 auto 20px; }
.choose-btn .btn { background:#2E33A1 }
.choose-btn .btn::after { content: ""; background: #0FAE44; }
.choose-btn .tel a { color:#FFFFFF; }


/*testimonial*/
#testimonial { padding: 85px 0 170px; position:relative; }
#testimonial .row { max-width:1500px; width:100%; padding:0 15px; }
.testimonial-top { display:-webkit-box; display:-ms-flexbox; display:flex; }
.testimonial-content { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; position:relative; }
.testimonial-content h5 { position:relative; padding-left:30px; margin-bottom:100px; }
.testimonial-content h5::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; background: #0FAE44; }
.testimonial-img { position: absolute; right: 0; bottom: 0; z-index: -1;}
.testimonial-img img { max-width:960px; width:100%; height:950px; }
.testimonial-bot { max-width: 1366px; width: 100%; margin:0 0 0 auto ; display:-ms-grid; display:grid; -ms-grid-columns:1fr 10px 1fr 10px 1fr; grid-template-columns:repeat(3, 1fr); gap:10px; }
.testimonial-box { border: 1px solid #DDDDDD; border-radius: 5px; padding: 30px 40px; /* margin-bottom: 20px; */ text-align: left; background:#FFFFFF;}
.box-name { display:-webkit-box; display:-ms-flexbox; display:flex; gap:10px;  }
.box-name p { margin: auto 0; font-weight:700; }

/*gallery*/
#gallery { padding:0 0 100px; }
.gallery-top { max-width:1500px; width:100%; margin:0 auto; padding:0 15px;  }
.gallery-label { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start; position:relative; }
.gallery-label h5 { position:relative; padding-left:30px; margin-bottom:100px; }
.gallery-label h5::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; background: #0FAE44; }
.gallery-content.flexc.tl { max-width: 1366px; width: 100%; margin: 0 0 0 auto; gap: 20px; -webkit-box-align:  start; -ms-flex-align:  start; align-items:  flex-start;}
.gallery-left h2 { max-width:685px; width:100%;  }
.gallery-right p.a { max-width:480px; width:100%; margin:0 0 40px; }

.gallery-mid { display:-ms-grid; display:grid; -ms-grid-columns:1fr 10px 1fr 10px 1fr; grid-template-columns:repeat(3, 1fr); gap:10px; margin:110px 0 100px; }
.gallery-mid img { width:100%; }
.gallery-bot p.b { max-width: 900px; width: 100%; margin:0 auto 50px;  }
.gallery-btn { -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }



/*footer*/
#footer {background: #2E33A1; padding: 120px 0 35px;}
#footer .copy, #footer .silver { margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; } 
#footer .silver img {display: inline-block;vertical-align: middle;max-width: 50px}
#footer .copy { background:#0FAE44; border-radius:20px; padding:25px 0; }
#footer p.copy  { font-size:18px; font-weight:700; }

.footer-top { max-width:1366px; width:100%; margin:0 auto 120px; gap:20px; }
.footer-logo img  { max-width:500px; width:100%;  }
.site-map ul { margin:0; padding:0; list-style-type: none; }
.site-map ul li a { font-size:18px; font-weight:700; font-family:'Figtree',sans-serif; line-height:250%; }
.footer-cta .tel a, .footer-cta .address a  { font-size:30px; color:#FFFFFF; font-weight:400; font-family:'Anton',sans-serif; line-height:120%; }
.footer-cta .address { max-width:230px; width:100%; }
.footer-cta .tel p, .footer-cta .address p { font-size:12px; color:#FFFFFF; line-height:120%; font-family:'Figtree',sans-serif; font-weight:700; }
.footer-cta { gap:25px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; }

/*content*/
#content {background: #F9F9F9;padding: 40px 0; }

.inner.service-page #service, .inner.residential-page #residential, .inner.commercial-page #commercial, .inner.testimonial-page #testimonial, .inner.contact-page #contact, .inner.gallery-page #gallery, .inner.about-page #about { min-height:300px; padding: 50px 0;  }
.inner.service-page #banner, .inner.residential-page #banner, .inner.commercial-page #banner, .inner.testimonial-page #banner, .inner.contact-page #banner, .inner.gallery-page #banner, .inner.about-page #banner { background: url(../images/content/banner-bg.jpg)no-repeat center top; background-size:cover; height: 25dvh; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align:  center; -ms-flex-align:  center; align-items:  center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 50px 0; }

/*inner pages*/
.inner #content {min-height: 400px;padding: 40px 0}

/*service*/
.tc { text-align:center; }

.service-row { max-width:1510px; width:100%; padding:0 15px; margin:0 auto; }

.inner.service-page #service { position: relative; padding:80px 0 230px; color: #ffffff; text-align: center; z-index: 1;}
.inner.service-page #service::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;s background-color: #2b3990; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%); z-index: -1;}
.inner.service-page .service-container p { max-width:1140px; width:100%; margin:0 auto; }

#roofing { padding: 0 0 130px; background:#FFFFFF }
.roofing-container p { max-width: 790px; width: 100%; margin:30px auto 60px; }
.roofing-content { gap:120px; }
.roofing-left { width:44%; }
.roofing-left img { max-width:640px; width:100%; height: 660px; display:block; object-fit:cover; }
.roofing-right { width:49%; }
.roofing-right h4 { margin:50px 0 40px; }
.roofing-right p { margin:0; }

#roofing-benefit {  padding: 75px 0 190px;  position: relative;  background: #FFF;  z-index: 1;}
#roofing-benefit::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: #F7F7F7; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);  z-index: -1;}
#roofing-benefit ul { list-style: none; padding:0; margin:30px 0 70px; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
#roofing-benefit ul li { position:relative; font-size:20px; font-weight:700; font-family:'Figtree',sans-serif; line-height:200%; letter-spacing:0.02em; padding-left:30px; }
#roofing-benefit ul li::before { content: '\2611'; position: absolute; left: 0; top: 10px; color: #0FAE44; font-size: 1.2rem; line-height: 1; }
.roofing-benefit-container p { max-width:1110px; width:100%; margin:0 auto; }

#gutter { padding: 65px 0 125px; }
.gutter-container p { max-width:800px; width:100%; margin:30px auto 80px }
.gutter-content { flex-direction: row-reverse; gap:120px; }
.gutter-left { width:44%; }
.gutter-left img { max-width:640px; width:100%; height: 660px; display:block; object-fit:cover; }
.gutter-right { width:49%; }
.gutter-right h4 { margin:50px 0 40px; }
.gutter-right p { margin:0; }


#plank { position:relative; padding:80px 0 255px; }
#plank::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: #F7F7F7; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);  z-index: -1;}
.plank-container p { max-width:800px; width:100%; margin:30px auto 80px }
.plank-content { gap:120px; }
.plank-left { width:44%; }
.plank-left img { max-width:640px; width:100%; height: 660px; display:block; object-fit:cover; }
.plank-right { width:49%; }
.plank-right h4 { margin:50px 0 40px; }
.plank-right p { margin:0; }

#window { padding:30px 0 130px; }
.window-container p { max-width:800px; width:100%; margin:30px auto 0; }
.window-content { flex-direction:row-reverse; gap:120px; margin:80px 0 0; }
.window-left { width:44%; }
.window-left img { max-width:640px; width:100%; height: 660px; display:block; object-fit:cover; }
.window-right { width:49%; }
#window ul { list-style: none; padding:0; margin:30px 0; }
#window ul li { position:relative; font-size:20px; font-weight:700; font-family:'Figtree',sans-serif; line-height:200%; letter-spacing:0.02em; padding-left:30px; }
#window ul li::before { content: '\2611'; position: absolute; left: 0; top: 10px; color: #0FAE44; font-size: 1.2rem; line-height: 1; }
.window-right p { margin:0; }

#handyman { padding:90px 0 175px; position:relative; z-index:1; }
#handyman::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: #F7F7F7;  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);  z-index: -1;}
.handyman-container p { max-width:800px; width:100%; margin:30px auto 0; }
.handyman-content { gap:120px; margin:80px 0 0; }
.handyman-left { width:44%; }
.handyman-left img { max-width:640px; width:100%; height: 660px; display:block; object-fit:cover; }
.handyman-right { width:49%; }
#handyman ul { list-style: none; padding:0; margin:30px 0; }
#handyman ul li { position:relative; font-size:20px; font-weight:700; font-family:'Figtree',sans-serif; line-height:200%; letter-spacing:0.02em; padding-left:30px; }
#handyman ul li::before { content: '\2611'; position: absolute; left: 0; top: 10px; color: #0FAE44; font-size: 1.2rem; line-height: 1; }
.handyman-right p { margin:0; }

#abba { padding:70px 0 90px; }

.abba-container p { max-width:800px; width:100%; margin:0 auto 30px; }
.abba-content { display:grid; grid-template-columns:repeat(4, 1fr); gap:60px; margin:60px 0 120px; }
.abba-item img { max-width: 85px ; width: 100%; filter: invert(48%) sepia(85%) saturate(1450%) hue-rotate(114deg) brightness(95%) contrast(92%); }
.abba-item h4 { margin: 20px 0 0; }
.abba-btn { justify-content:center; }
.abba-btn .tel p { margin:0; }

/*recidential*/

/*commercial*/

/*testimonnial*/

/*gallery*/
.inner.-page # { padding:100px 0; }

/*about*/

.t { margin:30px 0; }

.about-container { max-width:1600px; width:100%; margin:0 auto; gap: 120px; }
.about-container img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.about-left, .about-right { width:50%; }

/*contact*/

.inner.contact-page form { max-width:1366px; width:100%; margin:0 auto; }

.ctc-form {margin: 0 auto;text-align: center;gap: 10px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;width: 100%;}

.formcal { display: -webkit-box; display: -ms-flexbox; display: flex;  width: 100%;  max-width: 1366px;  -webkit-box-sizing: border-box;  box-sizing: border-box;  gap: 10px;}

label.mes {  display: block;  -webkit-box-flex: 1;  -ms-flex: 1;  flex: 1;  width: 100%;}

.message-box { max-width:1366px; width:100%; }



/*privacy policy*/
.inPrivacyBox {max-width: 850px; margin: 0 auto;}
.inPrivacyBox p {text-align: justify!important;}



/** Responsive
-------------------------------------------------------*/
@media screen and (max-width: 1800px){

    .header-left { width:68%; }
    .header-right{ width:29%; }
    .header-left { gap:20px; }
    #header nav ul { gap: 20px; }

}

@media screen and (max-width: 1700px){

    #header nav ul { gap: 15px; }

}

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

    .header-left { width:70% ; gap:10px; }
   #header nav ul { gap: 10px; }
  
}

@media screen and (max-width: 1500px){

    #header nav ul li a { font-size: 16px; }
    .header-right .tel a { font-size:25px; }
}

@media screen and (max-width: 1400px){

    h1 { font-size: }
    h2{ font-size:70px; }

    #header nav ul { gap: 10px; }
    #header nav ul li a { font-size:15px; }
    #header nav ul li a::before { bottom:-30px }
    .header-left { gap: 10px; }
    .header-logo img { max-width:160px; width:100%;  } 
    .header-right .tel a { font-size:20px; }

    #welcome { padding: 60px 0 100px; }
    .welcome-right { width:53%; }

    #choose { padding: 50px 0 80px; }
    .choose-top h5 { margin:0 0 70px; }
    .choose-mid { gap:80px; }
    .choose-left { width:60%; }

    .testimonial-img img { max-width: 750px; height:900px; }

    .footer-logo { max-width:400px; }

    /*service*/
    .roofing-img { grid-template-columns:repeat(2, 1fr); }

    .abba-item h4 { font-size:25px; }


}

@media screen and (max-width: 1300px){

    p { font-size:16px; }

    #header nav ul li a { font-size:14px; }
    #header nav ul li a::before { bottom: -25px; }
    .header-left { width:70%; }
    .header-logo img { max-width:140px; width:100%;  } 
    .header-right { width:28%; }
    .header-right .btn { max-width:150px; font-size:16px; }

    #service { padding:250px 0 30px; }
    .service-bot .banner-overlay { top: 30px; left: 25px; }

    .choose-left h2 { font-size: 55px; }

    .testimonial-img img { max-width: 600px; height:800px; }

    /*inner-service*/
    .inner.service-page #service { padding: 80px 0 100px; }

    #roofing-benefit { padding: 50px 0 100px; }
    .roofing-content { gap: 50px; }

    #gutter { padding:50px 0; }
    .gutter-content { gap:50px; }

    #plank { padding:50px 0 100px; }
    #plank::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #F7F7F7; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); z-index: -1; }
    .plank-content { gap:50px; }

    .window-content { gap:50px; }

    #handyman {padding: 50px 0 100px;}
    .handyman-content { gap:50px; }

    /*about*/

    .about-container { gap:60px; }

}

@media screen and (max-width: 1200px){

    h1 {}
    h2 { font-size:60px; }

    #header nav ul li a::before { bottom:-29px;  }
    .header-container { padding: 5px 15px; }
    .header-logo img { max-width:120px; }
    .header-right img { max-width:40px; }
    #header nav ul li a { font-size: 14px;}
    .header-left { width:73%; }
    .header-right { width:26%; }
    .header-right .btn { max-width: 120px; padding:10px; font-size:14px; }

    .welcome-left img { margin:0; }

    #service { padding:200px 0 30px; }
    .banner-overlay h4 { font-size:25px; }

    .choose-left h2 { font-size: 51px; }
    .choose-item { gap:100px; margin:80px 0 70px; }

    #gallery { padding: 0 0 50px; }
    .gallery-label h5 { margin: 0 0 50px; }
    .gallery-btn .tel a { font-size:20px; }
    .gallery-mid { margin: 60px 0 50px; }

    #footer { padding: 80px 0 30px; }
    .footer-top { margin: 0 auto 80px; }
    .footer-logo { max-width:300px; }
    .footer-cta .tel a, .footer-cta .address a { font-size:25px; }

    .socials a { font-size:20px; padding:15px 20px; }
    .socials a::before { font-size:20px; }

    /*service*/

    .abba-content { grid-template-columns: repeat(2, 1fr); margin: 30px 0 60px; }

}

@media screen and ( max-width: 1100px){

    .header-logo img { max-width: 100px;}
    #header nav ul li a::before { bottom: -22px;}
    .header-left { width:75% }
    .header-right { width:24%; }
    #header nav ul li a {font-size: 12px;}
    .header-right img { max-width: 30px;}
    .header-right .phone p { font-size:10px; }
    .header-right .phone p { font-size: 8px;}
    .header-right .tel a { font-size: 15px; }
    .header-right .btn { max-width: 100px; padding: 10px; font-size: 11px;}

    #service { padding:150px 0 30px; }

    .choose-mid { gap:40px; }
    .choose-left h2 { font-size: 47px; }

    .testimonial-img img { max-width: 500px; height:750px; }

    #footer { padding: 60px 0 30px; }
    .footer-top { margin: 0 auto 60px; }

    /*service*/

    .roofing-right h4 { margin:30px 0; }

    #roofing-benefit ul { grid-template-columns: repeat(2, 1fr); }

    #handyman {padding: 30px 0 50px;}


}


@media screen and (max-width: 1024px){
    
    .btn { max-width:150px; font-size:16px; }

    h1 {}
    h2 { font-size:50px; }

    #header nav ul li a {font-size: 12px;}
    #header nav ul li a::before { height: 5px; bottom: -15px;}
    .header-right .btn { max-width: 100px; font-size: 10px;}
    .header-logo img { max-width: 70px;}
    .header-right .tel a { font-size:14px; }



    .welcome-right .frist { margin:20px 0; }
    .welcome-right .last { margin:0 0 30px; }

    #service { padding:100px 0 30px; background:#2E33A1; }
    #service::before { display:none; }

    #service { padding:100px 0 30px; }
    .service-right p { margin: 30px 0 50px; }
    .service-right { width:75%; }
    .banner-overlay p { font-size:16px; }
    .banner-overlay h4 { font-size:20px; }

    #choose { padding:30px 0; background:#0FAE44; }
    #choose::before { display:none; }
    .choose-top h5 { margin: 0 0 30px; }
    .choose-left h2 { font-size: 41px; }
    .choose-mid { gap:20px; }

    .footer-logo { max-width:250px; }
    .footer-cta .tel a, .footer-cta .address a { font-size:20px; }

    /*INNER-SERVICE*/

    .inner.service-page #service { min-height:200px; }

    #roofing { padding: 30px 0 80px; }

    .roofing-content { gap: 30px; }
    .roofing-container p { margin: 30px auto; }

    #roofing-benefit { padding:50px 0 ; }
    #roofing-benefit ul { grid-template-columns: repeat(1, 1fr);}
    #roofing-benefit::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}

    #gutter { padding: 30px 0;}
    .gutter-content { gap:30px; }

    #plank { padding: 30px 0; }
    .plank-content { gap:30px; }

    #window { padding:30px 0; }
    .window-content { gap:30px; }

    #handyman { padding: 30px 0; }
    #handyman::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    .handyman-content { gap:30px; }

    #abba { padding:30px 0; }

    /*about*/

    .about-container { gap:30px; }

}

@media screen and (max-width: 900px){

    .tel a { font-size:23px; }
    h1 {  }
    h2 { font-size:40px; }

    .header-container { padding: 10px 15px;}
    .header-left { width:74%; gap:5px; }
    #header nav ul li a { font-size: 11px; }
    .header-logo img { max-width: 60px;}
    .header-right img { max-width: 30px;}
    .header-right .tel a { font-size: 13px;}
    .header-right .phone p { font-size: 8px;}
    .header-right .btn { max-width: 80px; font-size: 8px;}
    #header nav ul {gap: 6px;}

    #welcome { padding: 30px 0; }

    #service { padding:50px 0 30px; }
    .service-right p { margin: 30px 0 30px; }

    .choose-top h5 { margin: 0 0 30px; }
    .choose-item { margin:30px 0; }
    .choose-left { width:54%; }
    .choose-left h2 { font-size: 35px; }
    .choose-btn { -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }

    .choose-item { display:-ms-grid; display:grid; -ms-grid-columns:1fr 25px 1fr; grid-template-columns:repeat(2, 1fr); gap:25px; } 

    #gallery { padding:0 0 30px; }
    .gallery-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; text-align:center;  }
    .gallery-left, .gallery-right { margin:0 auto; }
    .gallery-mid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); margin:30px 0; }
    .gallery-btn { -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }

}

@media screen and (max-width: 800px){

    /*header*/
    #header { position: relative; top: 0;  }
    #header, #header * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
    #header .row {width: 100%; padding: 0;}
    #header nav {display:block; height: auto; width: 100%;}
    #header nav ul { width: 100%; display: none; height: auto;border-bottom:5px solid #FFF; padding: 0;}
    #header nav ul li { width: 100%;position: relative; margin: 0; }
    #header nav ul li a { display: block; float:none; padding: 10px 0; font-size: 18px;}
    #header nav a {text-align: left; width: 100%;}
    #header nav a strong {position: absolute; top: 30px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 15px;}
    #header nav a#pull {display: block; color: #fff; background-color: #FFF; height: 55px;padding: 10px 0; width: 100%; }
    #header nav a#pull:after { content:""; background: url('../images/nav-icon.png') no-repeat; width: 20px; height: 20px; display: inline-block; position: absolute; right: 15px; top: 30px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-filter: invert(70%) sepia(88%) saturate(3025%) hue-rotate(233deg) brightness(91%) contrast(97%); filter: invert(70%) sepia(88%) saturate(3025%) hue-rotate(233deg) brightness(91%) contrast(97%);}

    #header nav ul li.active-menu { padding: 0; width: 100%; }
    #header nav ul li.active-menu a, #header nav ul li a:hover { width: 100%; background: #0FAE44; padding: 10px 15px; color: #FFFFFF!important; }
    #header nav ul li { background: #FFF; padding: 0; }
    #header nav ul li a { padding: 10px 15px; max-width: 100%; }

    .header-container { padding: 0; }
    .header-logo, .header-right { display:none; }
    .header-left { width:100%; }
    #header nav a strong img { max-width:100px; }

    
    /*banner*/

    #banner { height: 400px; }

    /*welcome*/
    .welcome-container { -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; }
    .welcome-left, .welcome-right { width:100%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;  }
    .welcome-left h5 { margin:0 auto 30px; }
    .welcome-right { text-align:center; }
    .welcome-btn { -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }

    .welcome-left img { max-width: 100%; width: 100%; }


    /*service*/

    .service-top { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
    .servive-left { width:100%; display:-webkit-box; display:-ms-flexbox; display:flex; }
    .servive-left h5 { margin: 0 auto 30px; }
    .service-right { margin:0 auto; text-align:center; }
    .service-bot { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); }
    .banner-overlay p { font-size:18px; }
    .banner-overlay h4 { font-size:30px; }

    /*choose*/

    .choose-top h5 { margin:0 auto 30px; }
    .choose-mid { -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; }
    .choose-left, .choose-right { width:100%; text-align:center; }
    .choose-right p { margin:0 auto; }

    /*gallery*/

    .gallery-label h5 { margin: 0 auto 30px; }

    /*testimonial*/
    #testimonial { padding:30px 0; }
    .testimonial-top { -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; margin: 0 0 20px }
    .testimonial-top h5 { margin: 0 auto 30px; }
    .testimonial-img { position:static; }
    .testimonial-bot { -ms-grid-columns:(1fr)[1]; grid-template-columns:repeat(1, 1fr); }


    .cta{background: #2E33A1  url("../images/common/phonecall.png") no-repeat center center;border-bottom-left-radius: 40px;border-top: 2px solid #013f9a ;border-top-left-radius: 40px;bottom: 1%;display: block;height: 80px;position: fixed;right: 0;text-decoration: none; text-indent: -9999em;width: 100px;z-index: 999; -webkit-box-shadow: 2px 2px 10px #000; box-shadow: 2px 2px 10px #000;}


    /*#footer { padding: 30px 0; margin: 0 auto; text-align: center;}
    #footer .site-map nav ul li {display: block; width: 100%; margin: 0 auto; padding: 10px 0!important; }
    #footer .site-map nav ul li.active-menu a, #footer nav ul li a:hover { border: none; }*/
    /*#footer nav ul li.active-menu, #footer nav ul li:hover { background: #535353; }*/

    #footer { padding: 30px 0; margin: 0 auto; text-align: center;}
    .footer-top { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin:0 auto 30px; }

    #footer .site-map,#footer .site-map ul { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; margin: 0 auto; padding: 0;}
    #footer .site-map ul li { display: block !important; width: 100%; margin: 0 auto; padding: 10px 0 !important; text-align: center; }
    #footer .site-map ul li.active-menu a, 
    #footer .site-map ul li a:hover {  border: none;  }

    .footer-top { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin:0 auto 30px; }

    .footer-number { display: block; text-align: center; }
    .footer-cta .tel p, .footer-cta .address p { margin: 10px 0; }
    .footer-cta .address { max-width: 100%; }
    .footer-cta .socials { text-align: center; }

    /*inner-service*/

    .inner.service-page #service { padding: 30px 0; min-height: 200px; }

    #roofing {padding: 30px 0;}
    .roofing-content { flex-direction:column; }
    .roofing-right, .roofing-left { width:100%; }
    .roofing-left img { max-width:100% }
    .roofing-right { text-align:center; }

    #roofing-benefit { padding:30px 0; }
    #roofing-benefit { padding: 30px 0; }

    .gutter-content { flex-direction:column; }
    .gutter-right, .gutter-left { width:100%; }
    .gutter-left img { max-width:100% }
    .gutter-right { text-align:center; }

    .plank-content { flex-direction:column; }
    .plank-right, .plank-left { width:100%; }
    .plank-left img { max-width:100% }
    .plank-right { text-align:center; }

    .window-content { flex-direction:column; }
    .window-right, .window-left { width:100%; }
    .window-left img { max-width:100% }

    .handyman-content { flex-direction:column; }
    .handyman-right, .handyman-left { width:100%; }
    .handyman-left img { max-width:100% }

    .abba-content { margin: 30px 0; }
    .abba-item img {max-width: 70px;}
    .abba-item h4 { font-size:20px; }


    .inner.service-page #banner, .inner.residential-page #banner, .inner.commercial-page #banner, .inner.testimonial-page #banner, .inner.contact-page #banner, .inner.gallery-page #banner {  min-height: 200px; height: 200px; padding: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

    /*ABOUT*/
    .about-container { flex-direction:column; }
    .about-right, .about-left { width:100%; }
    .about-right {text-align: center;}

    /*contact*/
    .formcal { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
}

@media screen and (max-width: 500px){

    h1 { font-size:50px; }

    .welcome-btn { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align:center; -ms-flex-align:center; align-items:center; }
    .banner-overlay p { font-size:16px; }
    .banner-overlay h4 { font-size:20px; }

    .choose-item { -ms-grid-columns: 1fr; grid-template-columns: repeat(1, 1fr); gap:30px; } 
    .choose-btn { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align:center; -ms-flex-align:center; align-items:center; }

    .gallery-mid { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr);}
    .gallery-btn { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align:center; -ms-flex-align:center; align-items:center; }

    /*service*/

    .abba-content { grid-template-columns: repeat(1, 1fr); }
    .abba-btn{ flex-direction: column; justify-content: center; align-items: center;}

}