@charset "UTF-8";
/*
Theme Name: Sunset Metal Roof
Author: Webdesign 309
Author URI: http://www.webdesign309.com/
Description: We are a full service webdesign and development company delivering high end design and development solution for our clients and delivering best solutions to attract more visibility and customization to your website.
Version: 3.0.0
Tags: peoria web development, chicago web development, custom wordpress development, advertising agency solutions, florida webdesign, chicago webdesign, illinois webdesign, custom webdesign development
*/

/* CSS Document */
/*----------------------------------------------------------------------------- */
@font-face { font-family: 'JUST Sans ExBold'; src: url('fonts/JUSTSans-ExBd.eot'); src: url('fonts/JUSTSans-ExBd.eot?#iefix') format('embedded-opentype'), url('fonts/JUSTSans-ExBd.woff2') format('woff2'), url('fonts/JUSTSans-ExBd.woff') format('woff'), url('fonts/JUSTSans-ExBd.ttf') format('truetype'), url('fonts/JUSTSans-ExBd.svg#JUSTSans-ExBd') format('svg'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: 'JUST_Sans_regular'; src: url('fonts/JUSTSans-Rg.eot'); src: url('fonts/JUSTSans-Rg.eot?#iefix') format('embedded-opentype'), url('fonts/JUSTSans-Rg.woff2') format('woff2'), url('fonts/JUSTSans-Rg.woff') format('woff'), url('fonts/JUSTSans-Rg.ttf') format('truetype'), url('fonts/JUSTSans-Rg.svg#JUSTSans-Rg') format('svg'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'JUST Sans SmBd'; src: url('fonts/JUSTSans-SmBd.eot'); src: url('fonts/JUSTSans-SmBd.eot?#iefix') format('embedded-opentype'), url('fonts/JUSTSans-SmBd.woff2') format('woff2'), url('fonts/JUSTSans-SmBd.woff') format('woff'), url('fonts/JUSTSans-SmBd.ttf') format('truetype'), url('fonts/JUSTSans-SmBd.svg#JUSTSans-SmBd') format('svg'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'JUST Sans Bd'; src: url('fonts/JUSTSans-Bd.eot'); src: url('fonts/JUSTSans-Bd.eot?#iefix') format('embedded-opentype'), url('fonts/JUSTSans-Bd.woff2') format('woff2'), url('fonts/JUSTSans-Bd.woff') format('woff'), url('fonts/JUSTSans-Bd.ttf') format('truetype'), url('fonts/JUSTSans-Bd.svg#JUSTSans-Bd') format('svg'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: 'JUST Sans Md'; src: url('fonts/JUSTSans-Md.eot'); src: url('fonts/JUSTSans-Md.eot?#iefix') format('embedded-opentype'), url('fonts/JUSTSans-Md.woff2') format('woff2'), url('fonts/JUSTSans-Md.woff') format('woff'), url('fonts/JUSTSans-Md.ttf') format('truetype'), url('fonts/JUSTSans-Md.svg#JUSTSans-Md') format('svg'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JUST Sans lt'; src: url('fonts/JUSTSans-Lt.eot'); src: url('fonts/JUSTSans-Lt.eot?#iefix') format('embedded-opentype'), url('fonts/JUSTSans-Lt.woff2') format('woff2'), url('fonts/JUSTSans-Lt.woff') format('woff'), url('fonts/JUSTSans-Lt.ttf') format('truetype'), url('fonts/JUSTSans-Lt.svg#JUSTSans-Lt') format('svg'); font-weight: 300; font-style: normal; font-display: swap; }

:root{
--body-color: rgb(0, 23, 0);
--header: rgb(0, 0, 0); 
--black-color:rgba(0, 0, 0, 1);
--primary-color:#f7941d;
--second-primary-color: #005198;
--white-color:rgba(255, 255, 255, 1);
--bg-color:#f2f2f2;


--body-font: 'JUST_Sans_regular';
--heading-font: 'JUST Sans SmBd';
--font-semibold:'JUST Sans ExBold';
--font-medium:'JUST Sans Md';
--font-bold:'JUST Sans Bd';
--font-light:'JUST Sans lt';
}

/* ::selection{
color: var(--body-color);
background-color: var(--white-color);
} */
/* 1. Create a Clean Base
------------------------------------------------------------------------------*/
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address,
small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label,input, textarea, option, .nobox 
{background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display: block;}

blockquote, q {quotes: none;}
br {height: 0;}
ul, ol, dl, li {margin:0; padding:0; list-style-type: none;}
ul, ol {margin:0 0 0 0px;}
html, body{ border:none; -webkit-text-size-adjust:none;}

/* 2. Define Base Typography
------------------------------------------------------------------------------*/
body{padding: 0;margin: 0;font-family: var(--body-font); font-size: 18px; color: var(--body-color); line-height: 28px; box-sizing: border-box; overflow-x: hidden;}
*, *:after, *:before {box-sizing: border-box;}

svg path{ transition: all 0.3s; }

/* Create the Default Headers  */
h1, h2, h3, h4, h5, h6 {margin: 0; font-weight: normal;color: var(--header); line-height:1.2; font-family: var(--heading-font);}

/* Specific Header Settings */
h1,.h1 {font-size:60px;}
h2,.h2 {font-size:40px;}
h3,.h3 {font-size:34px;}
h4,.h4 {font-size:26px;}
h5,.h5 {font-size: 23px;}
h6,.h6 {font-size: 22px;}

/* Create the Default Paragraphs */
p {margin-bottom: 20px; }

/* Other Typo */
strong {font-weight: bold;}
hr {border:0 #000 solid; border-top-width: 1px; clear: both; height: 0;}
ol {list-style: decimal;}
ul {list-style: disc;}

/* 3. Images
------------------------------------------------------------------------------*/
/* Remove border around linked images */
img {max-width: 100%; border: 0; border-style: none; border-radius: 8px;}

/* 4. Links
------------------------------------------------------------------------------*/
/* Default Link Types */
a {text-decoration:none;transition: 0.5s; display: inline-block; color:var(--primary-color); }

/* 5. Forms
------------------------------------------------------------------------------*/
.button, a.button, button, html input[type="button"], input[type="reset"], input[type="submit"] { font-family: var(--heading-font);  font-weight: normal; margin: 0 0 0 0;  padding:13px 35px;  border-radius:5px; background-color:var(--primary-color); border: 1px solid transparent; display: inline-block; vertical-align: middle;  font-size: 18px; color: var(--white-color); line-height: 1.2; position: relative;outline: none;box-shadow: none;text-align: center;text-decoration: none;-webkit-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out; overflow: hidden; position: relative;z-index: 0; cursor: pointer; }
.button.button-border, a.button.button-border, button.button-border, html input[type="button"].button-border, input[type="reset"].button-border, input[type="submit"].button-border {background-color:transparent; color: var(--primary-color); border: 1px solid var(--primary-color);}
.button.button-border::after, a.button.button-border::after{border-radius:0; content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary-color); z-index: -2; transition: all .35s}
.button.button-border:hover:after, a.button.button-border:hover:after{width: 0%;}
.button:hover, a.button:hover, button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: var(--primary-color); border-color: var(--primary-color); background-color: transparent; color: var(--primary-color); }

input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea {padding:9px 20px; font-family: var(--body-font);  font-size: 18px; background-color:#fff; letter-spacing: 0;width: 100%; color:var(--body-color); text-transform: none; filter: alpha(opacity=100); border: 1px solid rgba(0, 0, 0, 0.15);border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius:5px; line-height:18px; box-shadow: none;-webkit-box-shadow: none;-moz-box-shadow: none;outline: none !important; width: 100%;-webkit-appearance: none;-moz-appearance: none;appearance: none; resize: none;}

input::-webkit-input-placeholder {color:  #777777;opacity:1;} 
input:-moz-placeholder {color: #777777; opacity:1;} 
input::-moz-placeholder {color:  #777777; opacity:1; } 
input:-ms-input-placeholder {color:  #777777;opacity:1;} 
textarea::-webkit-input-placeholder {color:  #777777; opacity:1; } 
textarea:-moz-placeholder {color: #777777; opacity:1; } 
textarea::-moz-placeholder {color:  #777777; opacity:1; } 
textarea:-ms-input-placeholder {color:  #777777;opacity:1; }

/* Removes fieldset borders. even on Opea 7 */
fieldset {border: 1px solid transparent;}

textarea{ min-height: 120px; }
/* 6. Tables
------------------------------------------------------------------------------*/
/* Table Fixes */
table {border-spacing: 0; border-collapse: collapse;}
td {text-align: right; font-weight: normal;}

/* 7. Framework
------------------------------------------------------------------------------*/
/* container */
.container{max-width: 1660px; width: 100%; padding-left: 50px; padding-right: 50px; margin: 0 auto;}
.row{display: flex;flex-wrap: wrap; margin-left: -15px; margin-right: -15px;}
.col-12,.col-11,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1{position: relative; padding-right: 0px; padding-left: 0px; }
.col_4 {max-width: 35%;}
.col_6{max-width: 65%;}
.col_3 {max-width: 33.33%;}
.col_2 {max-width: 50%;}
.col_1 {max-width: 100%;}

.d-flex{ display:flex;}
.flex-wrap{flex-wrap:wrap;}
.justify-content-start{justify-content:flex-start;}
.justify-content-center{justify-content:center;}
.justify-content-end{justify-content:flex-end;}
.justify-content-between{justify-content:space-between;}
.align-items-start{align-items: flex-start;}
.align-items-center{align-items: center;}
.align-items-end{align-items: flex-end;}
.row-reverse{flex-direction: row-reverse;}
.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}
.font-light {font-weight: 300;}
.table {width: 100%;}
.common_color{ color: var(--primary-color); }

/* def-page */ 
/* .def-page{padding: 60px 0;} */
.def-page .right-img{float:right; margin:0 0 15px 40px; position: relative; z-index: 0; line-height: 0;}
.def-page .left-img{float:left; margin:0 40px 15px 0; position: relative; line-height: 0;}
.def-page .right-img img{border-radius: 8px; position: relative; width: 100% ; height: auto;}
.def-page .left-img img{border-radius: 8px; position: relative; width: 100% ; height: auto;}
.def-page h2, .def-page h3, .def-page h4, .def-page h5, .def-page h6 { margin: 0 0 15px 0; padding: 0px;  }
.def-page h1{ font-size: 60px; line-height: 70px; } 
.def-page h2{ font-size: 40PX; line-height: 50px;}
.def-page h3{ font-size: 34px; line-height: 44px; } 
.def-page h4{ font-size: 26px; line-height: 36px;}
.def-page h5{ font-size: 23px; line-height: 33px;}
.def-page h6{font-size: 22px; line-height: 32px;}
.def-page ul {margin: 0; padding-bottom: 15px; overflow: hidden; padding-left: 0;}
.def-page ul li {text-align: left; list-style: none;  color: var(--body-color); position: relative; padding: 6px 15px 6px 20px;}
.def-page ul li:before {content: ''; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; background-color: var(--second-primary-color); border-radius: 50%;  }
.def-page ol{padding-left: 0; padding-bottom: 15px;}
.def-page ol li {list-style-type:none;counter-increment:item; color: var(--body-color); padding: 5px 0; }
.def-page ol li:before {display:inline-block; content: counter(item) ".";  color: var(--body-color);  padding-right:10px;}
.def-page ul.col-2, .def-page ul.col-3 { overflow: hidden; display: flex; flex-wrap: wrap;}
.def-page ul.col-2 li{width: 50%;}
.def-page ul.col-3 li {width: 33.33%;}
.privacy-page ol { margin-bottom: 25px;}
.privacy-page ol>li:before { padding-right: 05px;}
.privacy-page .privacy-inner{ padding-left: 30px; margin-bottom: 20px;}
.privacy-page .privacy-inner ul{ margin-top: 05px; }
.privacy-page ul,.privacy-page ol{ margin-left:20px;}
.privacy-page ol li{padding: 5px 0px;}
.pagenotfound {width: 100%;display: block; padding: 70px 0px 80px; text-align: center;}
.pagenotfound h2 {font-size: 40px;}
/* .pagenotfound p{font-size: 18px;} */
.thankyou {text-align: center;}
.thankyou h3 strong {font-size: 34px;}
.clearfix:after { clear: both; display: block; visibility: hidden; content: ""; }
.fl{float:left}.fr{float:right}.cl,.clear,.clr,.social_share{clear:both}.clearfix:after{clear:both;display:block;visibility:hidden;content:""}
.def-page a { color: var(--second-primary-color); display: inline; }
.def-page a:hover{ color:var(--body-color); }

/* Sub_menu */
ul li ul.sub-menu { padding-left: 0 !important; gap: 0 ; white-space: nowrap; background-color: var(--primary-color); display: block; border-radius: 5px; flex-direction: column; gap: 0; position: absolute; margin: 0; z-index: 3; margin-top: 11px; text-align: center; transform: scaleY(0); /* Hidden initially */ transition: all 0.3s ease; transform-origin: top; box-shadow: rgba(50, 50, 93, 0.15) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; }
ul li:hover > ul.sub-menu { transform: scaleY(1); }
ul li ul.sub-menu li{ padding: 10px 15px; display: block; border-bottom: 1px solid #fff; }
ul li ul.sub-menu li:last-child{ border-bottom: 0; }
ul li ul.sub-menu li a{ color: var(--header); text-align: left; display: block; }
ul li ul.sub-menu li a:hover{ color: var(--white-color); }
ul li ul.sub-menu li a::before{ display: none; }
ul li > ul.sub-menu li > ul.sub-menu { left: 101%; top: 0; }

header { position: sticky; top: 0; z-index: 2; }
.header_top{ padding: 9px 0; background-color: var(--second-primary-color); text-align: right; }
.header_top a.button.call { padding: 8px 22px 8px 40px; border-radius: 20px; line-height: 1; background-image: url(images/phone-call.png); background-position: 15px center; background-size: 15px; background-repeat: no-repeat; }
.header_top a.button.call:hover{ color: var(--white-color); border-color: var(--white-color); }
.header_bottom{ display: block; padding: 22px 0; background-color: var(--white-color); position: relative; }
.header_bottom .container{ display: flex; justify-content: center; align-items: center; gap: 66px; }
.header_bottom nav{ max-width: 33.33%; width: 100%; }
.nav_left ul{ justify-content: flex-end; }
.header_bottom nav ul{ display: flex; align-items: center;  gap: 50px; }
.header_bottom nav ul li a{ color: var(--body-color); text-transform: uppercase; }
.header_bottom nav ul li a:hover{ color: var(--primary-color); }
.header_logo{ max-width: 246px; width: 100%; line-height: 0; height: auto; text-align: center;  }
.header_logo a{ width: 100%; height: 100%; }
.header_logo a img { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); }
.header_logo::before { content: ''; position: absolute; width: 250px; height: 153px; top: 0; left: 50%; transform: translateX(-50%); background-image: url(images/header_logo_shap.png); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
.banner{ position:relative; width: 100%; padding: 120px 0; }
.banner .banner_img{ position: absolute; line-height: 0; width: 100%; height: 100%; left: 0; top: 0; }
.banner .banner_img img{ width: 100%;height: 100%;}
.banner .container{ position: relative; }
.banner_content{ display: flex; align-items: center; justify-content: space-between; } 
.banner_content h1{ color: var(--white-color); text-transform: uppercase; }

.form_box{ padding: 30px 38px; border-radius: 8px; background-color: rgba(0, 81, 152, 0.83); max-width: 37%; width: 100%; } 
.form_box h2{ text-transform: uppercase; color: var(--white-color); padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--white-color); }
form{ display: flex; justify-content: space-between; margin: 0 -10px; gap: 27px 0; flex-wrap: wrap; }
form .input_fild{ max-width: 50%; width: 100%; padding: 0 10px; }
form .input_fild label{ color: var(--white-color); font-size: 18px; display: block; padding: 0 0 5px; font-family: var(--font-light); }

.service{ padding: 60px 0; }
.service h2{ padding: 0 0 35px; }
.service_inr{ display: flex; flex-wrap: wrap; gap:0 120px; justify-content: center; }
.service_item{ max-width: 33.33%; width: 100% }
.service_item_box{   border-radius: 8px; background-color: rgb(0, 81, 152); overflow: hidden; position: relative;  line-height: 0;}
.service_item_box .service_content{  background-color: rgb(0, 81, 152); border-radius: 0 0 8px 8px; text-align: center; padding: 15px 0; position: absolute; bottom: 0; left: 0; width: 100%; }
.service_item_box img{ width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; }
.service_item_box:hover img{ transform: scale(1.1); }
.service_item_box .service_content h3{ font-size: 26px; line-height: 1.2; font-family: var(--heading-font); color: rgb(255, 255, 255); text-transform: uppercase;}
.service_item_box:hover .service_content h3{ color: var(--primary-color); }

.areas{ padding: 50px 0; background-color: #f2f2f2; }
.areas h2{ padding-bottom: 40px; }
.areas_div{ position: relative; padding: 65px 0; }
.areas_div::before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%;  background: #FFFF; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 28%, rgba(0, 81, 152, 1) 65%); z-index: 1; }
.areas_div img{ width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; }
.areas_div ul{ position: relative; text-align: left; width: 25%; margin-left: auto; z-index: 1; }
.areas_div ul li{ padding: 0 0 15px; list-style-type: disc; font-size: 26px; font-family: var(--heading-font); color: var(--white-color); text-transform: uppercase; }
.areas_div ul li:last-child{ padding-bottom: 0; }

.work{ padding: 60px 0; text-align: center; }
.work h2{ padding: 0 0 43px; }
.work_inr{ display: flex; justify-content: center; flex-wrap: wrap; gap: 28px 0; margin: 0 -14px 35px; }
.work_inr .work_item{ max-width: 25%; width: 100%; padding: 0 14px; }
.work_inr .work_item .work_item_box{ line-height: 0; line-height: 0;  border-radius: 8px; background-color: rgb(0, 81, 152); overflow: hidden; position: relative; }
.work_inr .work_item .work_item_box img{ width: 100%; height: 100%; object-fit: cover; }
.work_item_box:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; transform: scale(0); -webkit-transform: scale(0); transform-origin: center; background: url(images/zoom.webp) no-repeat local center rgb(1, 1, 1, 0.5); transition: 0.5s; }
.work_item_box:hover::after { transform: scale(1); -webkit-transform: scale(1); }
.mfp-img { max-height: 90vh !important; width: auto; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -20px; top:15px; text-align: center; padding-right: 0; width: 50px; height: 50px; background-color: var(--primary-color); border-radius: 50%; opacity: 1; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; }
.mfp-image-holder .mfp-close:hover{ background-color: var(--second-primary-color); }
button.mfp-arrow { width: 50px; height: 50px; border-radius: 50%; background-color:var(--primary-color) ; padding: 0; left: 40px; }
button.mfp-arrow-right { right: 40px; left: auto; }
button.mfp-arrow:hover{ background-color: var(--second-primary-color); }
button.mfp-arrow::after{ margin: 0; }
.mfp-arrow:before{ display: none; }
button.mfp-arrow::after { margin: 0; left: 18px; top: 12px; }
button.mfp-arrow-left:after{ left: 10px; }

.bg_gray{ background-color: #f2f2f2; }
.faq{ padding: 50px 0; position: relative; }
.faq h2{ padding: 0 0 30px; text-align: center; }
.faq .faq_main { gap: 25px 50px; flex-wrap: wrap; display: flex; }
.accordion-item { max-width: calc(50% - 25px); width: 100%; overflow: hidden; transition: 0.7s ease-in-out; height: min-content; border-width: 1px; border-color: rgb(247, 148, 29); border-style: solid; border-radius: 5px; background-color: rgb(255, 255, 255); text-align: left; }
.accordion-header { position: relative; font-family: var(--body-font); font-size: 20px; cursor: pointer; transition: 0.3s all; opacity: 1; text-align: left; padding: 15px 30px 15px 25px; background: transparent; border: 0px solid #191919; margin: 3px; border-radius: 5px; line-height: 30px; color: var(--header); }
.accordion-header::before { content: ""; position: absolute; right: 20px; top: 27px; width: 10px; height: 10px; border-right: 2px solid rgb(51, 51, 51); border-bottom: 2px solid rgb(51, 51, 51); transform: translateY(-60%) rotate(-44deg); transition: transform 0.3s ease; }
.accordion-content { padding: 0px 30px 0; max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.accordion-item.active .accordion-header::before { transform: translateY(-40%) rotate(-135deg); }

footer{ padding: 50px 0 0; position: relative; background-color: #023a6a; color: #fff; }
.footer_inr { display: flex; justify-content: space-between; gap: 50px; padding: 0 0 12px; border-bottom: 1px solid #fff; }
.footer_inr ul{ column-count: 2; column-gap: 60px; }
.footer_inr p span{ color: var(--primary-color); }
.footer_inr ul li{ padding: 0 0 8px;  }
.footer_inr ul li a{ color: var(--white-color); }
.footer_inr ul li a:hover{ color: var(--primary-color); }
.footer_logo{ max-width: 221px; width: 100%; } 
.footer_logo a.logo_img{ display: block; line-height: 0; margin-bottom: 41px; }
.footer_logo a.call{ color: var(--white-color); background-image: url(images/phone-call.png); background-position: 15px center; background-size: 20px; background-repeat: no-repeat; font-size: 23px; line-height: auto; font-family: var(--heading-font); padding-left: 50px; }
.footer_logo a:hover{ color: var(--primary-color); }
.footer_item.Address{ max-width: 325px; width: 100%; }
.footer_box { line-height: 0; max-width: 146px; width: 100%; }
.copyright{ padding: 30px 0; text-align: center; }
.copyright a{ color: var(--white-color); font-family: var(--font-light); padding: 0 5px; }
.copyright p{ margin-bottom: 0; }
.copyright a:hover{ color: var(--primary-color); }

/* common banner css */
.common_banner {background-color: #f2f2f2; padding: 90px 0 50px;}

.work_item.hide{ display: none; }

.work_tabs{ text-align: center; margin-bottom: 60px; }
.work_tabs .tab_btn{  background: transparent; color: var(--body-color); margin: 0 10px; cursor: pointer; border: 2px solid #f2f2f2; text-transform: uppercase; }
.work_tabs .tab_btn.active, .work_tabs .tab_btn:hover{ background: var(--primary-color); color: #fff; border: 2px solid transparent;}

.work_tabs ul li a { padding: 13px 35px; border-radius: 5px; }

.contact_us{padding: 60px 0;}
.contact_inr{display: flex; gap: 50px; width: 100%; justify-content:center; }
.contact_right{width: 100%; max-width: 60%;}
.contact_left{width: 100%; max-width: 40%;}
.contact_us form .input_fild label { color: var(--body-color);}
form .input_fild.full-width { width: 100%; max-width: 100%; }
.contact_us iframe { width: 100%; height: 450px; border-radius: 5px; margin-top: 50px;}

.common_box { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; gap: 20px; text-align: left; margin-bottom: 15px; }
.common_box { margin-top: 30px; gap: 45px 20px; }
.common_box .common_box_item { max-width: calc(33.33% - 15px); width: 100%; }
.common_box .common_box_item .common_box_item_box { height: 100%; display: flex; flex-direction: column; background-color: #fff; padding: 20px 20px; border-radius: 6px; box-shadow: 0 0 6px #bfbfbf; }

.icon { margin-bottom: 20px; line-height: 0; width: 45px; height: 45px; border-radius: 8px; background-color: var(--body-color); display: flex; align-items: center; justify-content: center; }

.common_box .common_box_item .common_box_item_box .icon img { width: 32px; height: 32px; }

.our_story {background-color: var(--second-primary-color); color: #fff;}
.our_story h2{color: #fff;}

.what_customer .cover{ max-width: 85%; width: 100%; margin: 0 auto; padding: 30px; border-radius: 8px; margin-bottom: 20px; }

.max-w-100{max-width: 100% !important;}

.serving_inr{display: flex; gap: 50px; flex-direction: row-reverse; justify-content: center;}
.serving_right {max-width: 50%; width: 100%; border-radius: 8px; overflow: hidden;}
.serving_left{max-width: 50%; width: 100%;}

.cta-button{gap: 20px; align-items: center;}
.cta-button a.button.call{  padding-left: 40px; background-image: url(images/phone-call.png); background-position: 15px center; background-size: 15px; background-repeat: no-repeat;}
.cta-button a.button{color: #fff; }
.cta-button a:hover.button{background-color: var(--second-primary-color); border: 1px solid transparent;}

.metal_offer .common_box_item{max-width: calc(50% - 15px);}

.bg_blue{background-color: var(--second-primary-color);}
.bg_blue h2,.bg_blue .container > p{color: #fff;}

.common_box_item_box h3{color: var(--second-primary-color);}

.understanding_inr{display: flex; gap: 50px; margin-top: 50px;align-items: flex-start;}
.understanding_right{max-width: 60%; width: 100%;}
.understanding_left{max-width: 40%; width: 100%;}
.understanding_inr h3{color: var(--second-primary-color);  position: relative; padding-bottom: 12px; margin-bottom: 20px;}
.understanding_inr h3::before{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--primary-color); }
.understanding_right_inr strong{font-size: 22px;}

p.mb-10{margin-bottom: 10px;}

.understanding_right_inr, .understanding_left_top_box, .understanding_left_bottom_box { height: 100%; background-color: #fff; padding: 25px; border-radius: 8px; overflow: hidden; }
.understanding_left_bottom_box { margin-top: 20px; }

.increment_heading { text-align: center; margin-bottom: 50px; }
.increment_heading span { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--body-color); margin-bottom: 10px; }
.increment_box { display: flex; flex-wrap: wrap; gap: 25px; counter-reset: section; }
.increment_box .increment_item { width: calc(20% - 20px); }
.increment_box .increment_item .increment_item_box { position: relative; height: 100%; background-color: #fff; padding: 80px 25px 25px; border-radius: 12px; box-shadow: 0 0 10px rgba(0,0,0,0.08); transition: 0.4s; overflow: hidden; }
.increment_box .increment_item .increment_item_box::before { counter-increment: section; content: "" counter(section); position: absolute; top: 20px; left: 20px; font-size: 42px; font-weight: 700; line-height: 1; color: rgba(0,81,152,0.5); }
.increment_box .increment_item .increment_item_box h3 { font-size: 24px; line-height: 34px; }
.increment_box .increment_item .increment_item_box:hover { transform: translateY(-8px); }
.increment_box .increment_item .increment_item_box ul { padding-left: 18px; margin-bottom: 15px; position: relative; z-index: 1; }
.increment_box .increment_item .increment_item_box ul li { margin-bottom: 8px; }

.who_metal_inr{display: flex; gap: 50px;}
.who_metal_content{max-width: 50%; width: 100%;}

.testimonial .testimonial_inr { gap: 40px; justify-content: center; margin-top: 40px;}
.testimonial .testimonial_box {text-align: left; max-width: calc(33.33% - 27px); width: 100%; background-color: white; padding: 31px 38px 15px; box-shadow: 0px 3px 6px #00000029; border: 1px solid #999999; border-radius: 8px; margin: 0 0px; display: flex; flex-direction: column; }
.testimonial .testimonial_box h3{margin-top: auto;}
.testimonial .testimonial_box h3.h5{font-size: 26px;}

.mb-0{margin-bottom: 0 !important;}

.input_fild .wpcf7-not-valid-tip{ display: none; }
.wpcf7-not-valid{ border: 1px solid #dc3232 !important; }
.wpcf7 form .wpcf7-response-output { margin: 0em 0.5em 1em; padding: 0.2em 1em; border: 2px solid #fff; text-align: center; color: #fff;     font-size: 16px; }
.contact_right .wpcf7 form .wpcf7-response-output{ color: var(--body-color); width: 100%; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close{ width: auto; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { width: 40px !important; height: 40px; padding: 0 !important; right: -16px !important;}

.built_on,.why_we_choose,.our_story,.what_customer,.serving_rose,.common_cta,.metal_offer,.what_make,.understanding,.increment_section,.who_metal_roof,.testimonial,.ptb-60{ padding: 60px 0; }

.header_bottom ul li.current-menu-item>a, .header_bottom ul li.current-page-parent>a, footer ul li.current_page_item > a, .header_bottom ul li.current_page_parent > a, .header_bottom ul li.current-menu-ancestor > a, .header-nav nav.nav_top ul li.current-menu-item>a { color: var(--primary-color); }
.header_bottom ul.sub-menu li.current-menu-item>a,.header_bottom ul.sub-menu li.current_page_parent > a{ color: var(--white-color); }
header{transition: all 0.3s ease;}
header.sticky-header {  box-shadow: 0 4px 15px rgba(0,0,0,0.15);}
header.sticky-header .header_logo::before{ background-image: url(images/shap_stickey_1.png);}
.home h2,.common_banner h1{ text-transform: uppercase; }

/* 21-5-26 H.P */
.ajax-pagination { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top:50px; }
.ajax-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 45px; height: 45px; padding: 0 16px; border-radius: 10px; text-decoration: none; font-size: 16px; font-weight: 600; color: rgb(0, 81, 152); background: #fff; border: 2px solid rgb(0, 81, 152); transition: all 0.3s ease; }
.ajax-pagination .page-numbers:hover { background: #f7941d; border-color: #f7941d; color: #fff; transform: translateY(-2px); }
.ajax-pagination .current, .blog-pagination  .current { background: rgb(0, 81, 152); border-color: rgb(0, 81, 152); color: #fff; }
.ajax-pagination .next { background: #f7941d; border-color: #f7941d; color: #fff; }
.ajax-pagination .next:hover { background: rgb(0, 81, 152); border-color: rgb(0, 81, 152); }
.ajax-wrapper{ position:relative; min-height:200px; }
.ajax-wrapper.loading::after{ content:''; position:absolute; inset:0; /* background:rgba(255,255,255,0.5); */ z-index:10; }
.ajax-wrapper.loading::before{ content:''; position:absolute; top:50%; left:50%; width:60px; height:60px; transform:translate(-50%, -50%); background:url(images/loader.gif) center center no-repeat; background-size:contain; z-index:11; }

ul + p:last-child, ul ~ p:last-child, .increment_section h3 + p { margin-bottom: 0; }
.week_section{ padding: 60px 0; }
.flex-row { flex-wrap: wrap; justify-content: center; margin: 0 -15px; gap: 30px 0; }
.flex-row .card{ max-width: 33.33%; width: 100%; padding: 0 15px; }
.flex-row .card .card_inr img{ width: 100%; height: auto; object-fit: cover; }
.flex-row .card .card_inr .card-content h3{ font-size: 26px; padding: 0 0 8px; }
.flex-row .card .card_inr .card-content p{ margin-bottom: 10px; }
.card_inr a {  font-size: 18px; line-height: 26px; }

.flex-row .card .card_inr { width: 100%; position: relative; background-color: #f2f2f2; border-radius: 10px; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.flex-row .card .card_inr .card-content { padding: 20px 30px; display: flex; flex-direction: column; height: 100%; }
.flex-row .card .card_inr .card-content .card-seconnd-cta-btn  { margin-top: auto; }
.flex-row .card .card_inr img { border-radius: 8px 8px 0 0; }

.blog_listing .card-content h2, .blog_listing .card-content h2 a { font-size: 26px; line-height: 1.2; padding-bottom: 8px; }
.blog_listing .card-content h2 a:hover { color: var(--black-color); }.menu-toggle { display: none;}

.header_mobile{ display: none; }


/* Riya p Media Css */

/* 1600px */
@media (max-width: 1800px) {


}

/* 1600px */
@media (max-width: 1600px) {

h1, .h1 { font-size: 54px; }

.form_box { padding: 25px 30px; max-width: 50%; }
.service_inr { gap: 0 80px; }
form { gap: 22px 0; }

}

/* 1400px */
@media (max-width: 1400px) {

h3, .h3 { font-size: 30px; }

.header_bottom { padding: 18px 0;}
.header_bottom .container { gap: 50px; }
.service_inr { gap: 0 50px; }
.service_item { max-width: calc(50% - 50px);}
.service_item_box .service_content { padding: 10px 0; }
.service_item_box .service_content h3 { font-size: 22px; line-height: normal;}
.service_item_box .service_content h3 { font-size: 20px;}
.service,.work { padding: 50px 0; }
.accordion-header { padding: 10px 30px 10px 20px; }
.faq .faq_main { gap: 20px 35px;}
.accordion-item { max-width: calc(50% - 20px);}
.footer_box { max-width: 120px; }

/* default page css  */
.def-page h2{ font-size: 38px; line-height: 45px;} 
.def-page h3{font-size: 35px; line-height: 45px;}
.def-page h4{font-size:32px; line-height:42px; }
.def-page h5{font-size:23px; line-height:32px; }
.privacy-page .privacy-inner {padding-left: 20px;margin-bottom: 0px;}
/* .def-page ul li {font-size: 18px;line-height: 34px;} */
.def-page ol li{font-size: 18px;}
.pagenotfound {padding: 50px 0px;}
.pagenotfound h2 {font-size: 36px;}
.pagenotfound p {font-size: 20px;}
.def_page_otr { padding: 60px 0; }
}

/* 1200px */
@media (max-width: 1200px) {

h1, .h1 { font-size: 44px; }
h2, .h2 { font-size: 36px; }

.header_bottom nav ul { gap: 30px; }
.header_bottom nav ul li a{font-size: 17px;}
.header_bottom .container { gap: 40px; }
.header_logo::before { width: 200px; height: 140px; }
.header_logo a img { width: 160px; top: 28px; }
.header_bottom { padding: 15px 0; }
.banner { padding: 100px 0 80px 0; }
.service, .work { padding: 40px 0; }
.service_inr { gap: 0 30px; }
.service_item { max-width: calc(50% - 30px); }
.button, a.button, button, html input[type="button"], input[type="reset"], input[type="submit"] { padding: 10px 30px;}
.service_item_box .service_content h3 { font-size: 18px; }
.areas_div ul { width: 32%; }
.areas h2 { padding-bottom: 25px; }
.areas_div ul li { padding: 0px 0 10px;}
.work_inr .work_item { max-width: 33.33%;}
.work h2 { padding: 0 0 25px; }
.work_inr { gap: 20px 0; margin: 0 -14px 25px; }
.faq .faq_main { gap: 15px 25px; }
.footer_inr { flex-wrap: wrap; justify-content: space-between; gap: 30px; }
.footer_logo { max-width: 25%;}
.footer_item.Address { max-width: 30%;}
.footer_item.list { max-width: 30%; }

 /* default page css */
.def-page { padding: 45px 0 45px; }
.def-page p{ margin-bottom: 20px; }
.def_page_otr, .detail_page.def-page { padding: 40px 0; }
.def-page h2{ font-size: 33px; line-height: 40px;} 
.def-page h3{font-size: 31px; line-height: 38px;}
.def-page h4{font-size: 28px; line-height: 27px;}
.def-page h5{font-size: 26px; line-height: 36px;}
.def-page .left-img{width: 50%;}
.privacy-page .privacy-inner ul {margin-top: 0;}
.privacy-page ul, .privacy-page ol {margin-left: 15px;}
.def-page ul {padding-bottom: 10px;}
.privacy-page ol {padding-left: 0px;}
.def-page .right-img{width: 50%;}
.pagenotfound {padding: 40px 0px;}
.pagenotfound h2 {font-size: 32px;}
.def_page_otr { padding: 40px 0; }

}

/* 1023px */
@media (max-width: 1023px) {

.banner_content { flex-wrap: wrap; gap: 30px;}
.banner_content h1 br{display: none;}
.container { padding-left: 40px; padding-right: 40px; }
.form_box { padding: 20px 25px; max-width: 100%; }
.header_logo::before { width: 180px; height: 130px; }
.header_logo a img { width: 145px; top: 25px; }
.header_logo { position: absolute; top: 0; left: 0; max-width: 34%;}
.header_bottom .container { gap: 30px; }
.banner { padding: 70px 0 70px 0; }

.def_page_otr, .detail_page.def-page { padding: 45px 0; }  
.def-page { padding: 40px 0 40px; }
.def-page h2,.cluster-contend h2{ font-size: 30px; line-height: 40px;} 
.def-page h3{font-size: 28px; line-height: 38px;}
.def-page h4{font-size:25px; line-height:35px; }
.def-page h5{font-size:23px; line-height:30px; }
/* .def-page ul li, .def-page ol li{font-size: 16px;line-height: 22px;} */
.def-page ul {padding-bottom: 15px;}
.def-page ol{padding-left: 0;}
.def-page .left-img{margin: 0px 20px 10px 0;}
.privacy-page .privacy-inner ul {margin-top: 0px;}
.privacy-page ol {margin: 0px 0 10px;}
.privacy-page ul, .privacy-page ol {margin-left: 10px;}
.def-page ul {padding-bottom: 10px;}
.privacy-page .privacy-inner {padding-left: 15px;margin-bottom: 0;}
.def-page ul li {padding: 5px 0 5px 20px;}
.def-page .right-img{margin: 0 0 10px 20px;}
.pagenotfound {padding: 30px 0px;}
.pagenotfound h2 {font-size: 26px;}
.pagenotfound p {font-size: 17px;}
.def_page_otr { padding: 30px 0; }
.def-page ul li::before { top: 12px; }
.def-page ul li { font-size: 19px; }
.def-page strong { font-size: 19px; }
.def-page ul.col-3 li { width: 50%; }
.work_inr .work_item { max-width: 48%; }
}

/* 767px */
@media (max-width: 767px) {
   
.def-page .right-img img {width: 100%;margin-left: 0;} .def-page h2 { font-size: 35px; line-height: 40px;} .def-page { padding: 30px 0 30px; } .def-page p{ margin-bottom: 16px; } .def-page h2,.cluster-contend h2{ font-size: 28px; line-height: 38px;} .def-page h3{font-size: 23px; line-height: 33px;} .def-page h4{font-size: 22px; line-height: 32px;} .def-page h5{font-size: 21px; line-height: 20px;} .def-page ul.col-3 li,.def-page ul.col-2 li  {width: 100%;} .def-page ul li, .def-page ol li {font-size: 18px;} .def-page .left-img{margin: 0px 0px 18px 0;float: none;width: 100%;text-align: center;} .privacy-page ul, .privacy-page ol {margin-left: 10px;} .def-page ul li{padding: 4px 0 4px 16px;} .def-page ul {padding-bottom: 10px;} .def-page strong { font-size: 18px; } .privacy-page .privacy-inner {padding-left: 10px;margin-bottom: 0;} .privacy-page .privacy-inner ul {margin-top: 0;} .def-page .right-img{margin: 0 0 15px 0px;width: 100%;float: none;text-align: center;} .pagenotfound { padding: 25px 0px 10px; } .pagenotfound h2 {font-size: 22px;} .pagenotfound p {font-size: 16px;} .def-page ul li::before { top: 11px; width: 7px; height: 7px; }
}

/* 479px */
@media (max-width: 479px) {

.def-page strong { font-size: 16px; } .def-page { padding: 20px 0 20px; } .def_page_otr, .detail_page.def-page { padding: 20px 0; } .def-page h2{ font-size: 23px; line-height: 12px;} .def-page h3{font-size: 22px; line-height: 32px;} .def-page h4{font-size:21px; line-height:31px; } .def-page h5{font-size:20px; line-height:30px; } .def-page ul li, .def-page ol li { font-size: 16px; line-height: 24px; } .privacy-page ol {margin: 5px 0 10px;} .privacy-page ul, .privacy-page ol {margin-left: 8px;} .pagenotfound { padding: 20px 0px 5px; } .pagenotfound h2 {font-size: 20px;} .pagenotfound p {font-size: 15px;} .def-page ul li { padding: 3px 0 3px 16px; } .def_page_otr { padding: 20px 0; } .def-page ul li::before { top: 11px; width: 6px; height: 6px; }
}