/* normal */

:root{
	--text_clr: #404e52;
	--clr1: #1b687c;
	--clr2: #114755;
	--clr3: #9ab650;
	--clr4: #a3176f;
	--clr5: #d98e1e;
	--clr6: #37a7c2;
	--clr7: #ebc14d;

	--border_clr : #cccccc;
	--box_clr : #eff3f6;
	--border_radius: 10px;
	--light_text: color-mix(var(--text_clr) 50%, #fff);
	--awesome100 : 100 100% "Font Awesome 6 Pro";
	--awesome300 : 300 100% "Font Awesome 6 Pro";
	--awesome400 : 400 100% "Font Awesome 6 Pro";
	--awesome900 : 900 100% "Font Awesome 6 Pro";
	--light_weight: 300;
	--normal_weight : 400;
	--medium_weight : 600;
	--bold_weight : 700;
	
}

* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	
}
html,
body {
	font-family: "Rubik", sans-serif;
	font-size: 20px;
	color: var(--text_clr);
	font-weight: var(--normal_weight);
	line-height:2;
	word-break: break-word;
	scroll-behavior:smooth;
	
	
}

body {
	background: #f4f6f8;
}
img {
	border: 0px;
	display: block;
	max-width: 100%;
	height:auto;
}
a{color:inherit; text-decoration: none; transition-duration:0.2s;}

input,
select,
textarea,
button{ -webkit-appearance: none;-moz-appearance:none; appearance:none; outline: none; font:inherit}
input[type="checkbox"]{-webkit-appearance: unset;-moz-appearance:unset; appearance:unset;}
button{cursor:pointer}

ul {
	list-style: disc;
}
h1,.h1,
h2,.h2,
h3,.h3,
h4,.h4,
h5,.h5,
h6,.h6 {
	font-weight: var(--bold_weight);line-height:1.1; color:var(--clr1)
}

h1, .h1{font-size:2.4rem; margin-bottom:1rem}
h2, .h2{font-size:1.4rem;}
h3, .h3{font-size:1.2rem;}
h4, .h4{font-size:1.1rem;}
h5, .h5{font-size:1.05rem;}
h6, .h6{font-size:1rem;}

p{margin-bottom:1em}

svg {    display: flex;}

.clr1{color:var(--clr1)}
.clr2{color:var(--clr2)}
.clr3{color:var(--clr3)}
.clr4{color:var(--clr4)}
.clr5{color:var(--clr5)}
.clr6{color:var(--clr6)}
.clr7{color:var(--clr7)}

.bg1{background:var(--clr1)}
.bg2{background:var(--clr2)}
.bg3{background:var(--clr3)}
.bg4{background:var(--clr4)}
.bg5{background:var(--clr5)}
.bg6{background:var(--clr6)}
.bg7{background:var(--clr7)}

.pre_title{font-size:1rem; font-weight:var(--medium_weight); text-transform:uppercase;}

.clipped_img {    -webkit-clip-path: url(#clip_path);    clip-path: url(#clip_path);	background:#fff; aspect-ratio:1 / 1}
.clipped_img .img {    width: 100%; aspect-ratio:1 / 1}
.clipped_img .img img{width:100%; height:100%; position:relative; object-fit:cover}

.maxw1{max-width:1730px; margin:0 auto; padding: 0 15px}
.maxw2{max-width:1530px; margin:0 auto; padding: 0 15px}
.maxw3{max-width:1330px; margin:0 auto; padding: 0 15px}


.clear{clear:both;}
.flexbox{display:flex; flex-wrap:wrap}
.flexbox.space_between{justify-content: space-between;} 
.flexbox.justify_center{justify-content: center;} 
.flexbox.align_right{justify-content: flex-end;}
.flexbox.align_center{align-items: center;}
.flexbox.align_bottom{align-items: flex-end;}
.flexbox.align_top{align-items: flex-start;}

.grid{display:grid; gap: 40px;}
.grid.small_grid{gap:24px;}
.grid.cols2{grid-template-columns: repeat(2, 1fr);}
.grid.cols3{grid-template-columns: repeat(3, 1fr);}
.grid.cols4{grid-template-columns: repeat(4, 1fr);}
.grid.cols5{grid-template-columns: repeat(5, 1fr);}
.grid.cols6{grid-template-columns: repeat(6, 1fr);}

.grid .col2{grid-column:span 2}
.grid .col3{grid-column:span 3}
.grid .col4{grid-column:span 4}
.grid .col5{grid-column:span 5}
.grid .col6{grid-column:span 6}

.grid.align_top{align-items: start}
.grid.align_center{align-items: center}
.grid.align_bottom{align-items: end}

.center_text{text-align:center;}
.center_text ul, .center_text ol{list-style:none}

.gradient_text{background: -webkit-linear-gradient(90deg,var(--clr2),#2b869e);
background: -o-linear-gradient(90deg,var(--clr2),#2b869e);
background: linear-gradient(90deg,var(--clr2),#2b869e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}

.btn_bar{display:flex; flex-wrap:wrap; gap:5px 10px; margin-top:2rem;}
.btn_bar.right_btns{justify-content:flex-end;}
.btn_bar.center_btns{justify-content:center;}
.btn:hover{transform:translatey(-2px)}
.btn{display:inline-flex; gap:20px; line-height:1; border:none; align-items:center;transition-duration:0.2s;}

.btn.l_btn{font-size:28px; font-weight:var(--bold_weight); padding:1rem 2rem; border-radius:var(--border_radius);  text-transform:uppercase; }
.btn.n_btn{font-size:0.9rem; font-weight:var(--medium_weight); padding: 0.75rem 1rem ; border-radius:var(--border_radius); text-transform:uppercase}

.btn.round_btn{display:inline-flex; align-items: center; justify-content: center; width:54px; height:54px; font-size:20px; border-radius:100%}


.btn .icon_right{display:inline-block; margin-left:50px}

.btn.clr1_white{color:#fff; background:var(--clr1);}
.btn.clr2_white{color:#fff; background:var(--clr2);}
.btn.clr3_white{color:#fff; background:var(--clr3);}
.btn.border_btn{border:1px solid var(--clr2)}
.btn.white_border{border:1px solid #fff}


#template{padding-top:50px}

.table_wrap{overflow-x:auto; word-break: auto-phrase;}
.table_wrap table{border-collapse: collapse;}
.table_wrap table td{border:1px solid var(--border_clr); padding:5px 10px; vertical-align:top; min-width: 200px}

.content_container ul, .content_container ol{margin-left:30px; margin-bottom:1em;}
.content_container b, .content_container strong{font-weight:var(--bold_weight)}
.content_container a{color:var(--clr2); font-weight:var(--normal_weight)}

.mob_menu{position:fixed; height:0;  width:100%; z-index:9999; overflow:hidden; transition-duration:0.2s; top:0; }
.mob_menu.active{ height:calc(100%)}
.mob_menu .inner{background:linear-gradient(90deg, var(--clr2), var(--clr1));color:#fff; padding: 1rem 15px; position:relative; height:100%; padding-top:150px}
.mob_menu .inner ul{list-style:none; text-align:center; font-size:1.2rem; }
.mob_menu .inner ul li{ margin-bottom:30px; }
.mob_menu .inner ul li.border_btn{border:1px solid #fff}

.menu_bar{ background:#fff; position:fixed; width:100%; top:0; left:0; z-index:99999}

.menu_bar .inner{padding:25px 0; position:relative}
.menu_bar .logo img{width:275px}

.menu_bar.sticky{box-shadow:0 0 1.5rem rgba(0,0,0,0.15);}
.menu_bar.sticky .inner{padding: 10px 0;}
.menu_bar.sticky .breadcrumbs{display:none}

.menu_bar nav ul{display:inline-flex; list-style:none; gap:1rem; color:var(--clr1); align-items: center; font-size:0.9rem}
.menu_bar nav ul li a{padding: 0 1rem}
.menu_bar nav ul li a:hover{color:var(--clr6)}
.menu_bar nav ul li.btn{padding:0; }
.menu_bar nav ul li.btn a{padding:0;padding: 0.75rem 1rem }
.menu_bar nav ul li.btn a:hover{color:inherit}



.menu_btn{display:none; text-align:center; }

.menu_btn .bars{width:35px; height:28px; position:relative; display:inline-block}
.menu_btn .bars .bar{width:100%; height:4px; background:#365844; border-radius:10px; position:absolute; transition-duration:0.2s;}
.menu_btn .bars .bar:nth-of-type(1){top:0;}
.menu_btn .bars .bar:nth-of-type(2){top:50%; }
.menu_btn .bars .bar:nth-of-type(3){top:50%; }
.menu_btn .bars .bar:nth-of-type(4){top:100%;}

.menu_btn.active .bar:nth-of-type(1){opacity:0}
.menu_btn.active .bar:nth-of-type(2){ transform:rotate(45deg);}
.menu_btn.active .bar:nth-of-type(3){ transform:rotate(-45deg);}
.menu_btn.active .bar:nth-of-type(4){opacity:0}

.breadcrumbs{    font-size: 0.65rem;    text-align: right;    color: var(--light_text);    position: absolute;    right: 0;    bottom: 0;    width: 100%;}
.breadcrumbs i{font-size:0.8em}

.hero{position:relative; color:#fff; padding: 6rem 0 6rem}
.hero .background{position:absolute; top:0; left:0; height:100%; background:linear-gradient(90deg, var(--clr2), var(--clr1)); width:calc(50% + 650px); clip-path:polygon(0 0 , 0 100% , calc(50% + 250px) 100%, 100% 0) }
.hero .maxw2{position:relative}
.hero .text_wrap{max-width:670px; padding-top:2rem}
.hero h1{font-size:3rem; margin-bottom:1.5rem; color:#fff}
.hero .btn_bar{margin-bottom:2rem}
.hero .usps .flexbox{gap:0rem 2rem}
.hero .usps .usp i{color:var(--clr3)}

.hero .img_box{display:flex; justify-content:flex-end; align-items:center;     position: relative;    height: 100%;}
.hero .img_box img{width:100%; max-width:600px}

.references_bar{margin-top:-4rem; position:relative; margin-bottom:3rem}
.references_bar.options_page{margin-top:0}
.references_bar .background{position:absolute;  background:linear-gradient(90deg, var(--clr2), var(--clr1)); width:calc(50% + 650px); height:50%}
.references_bar .box{background:#fff; border-radius:var(--border_radius); box-shadow:0 0 1.5rem rgba(0,0,0,0.15); padding: 1.5rem 100px; position:relative; }
.references_bar .box .grid{grid-template-columns:180px 1px 1fr}
.references_bar .box .counter{text-align:center; line-height:1.5; display:grid;     align-content: center;}
.references_bar .box .counter .number{font-size:3.5rem; font-weight:var(--bold_weight); line-height:1}
.references_bar .box .logo_box{display:grid; gap:1rem; padding-top:1rem;}
.references_bar .box .logo_box .logoslider{gap:1rem; overflow:hidden;}
.references_bar .box .logo_box .logo {width:auto}
.references_bar .box .logo_box .logo .flexbox{align-items:center;     position: relative;    height: 100%;}
.references_bar .box .logo_box .logo img{max-width:250px; max-height:100px; width:100%;}
.references_bar .box .border{background:var(--clr1); opacity:0.2}
.references_bar .box .all{text-align:right; color:var(--clr1); font-size:0.9rem}

.features{margin-bottom:3rem}
.features .left .clipped_img{max-width:600px}
.features .h1{margin-bottom:2rem}
.features .features_grid{grid-template-columns:40% 1fr}
.features .feature{background:#fff; border-radius:var(--border_radius); padding:1.5rem; box-shadow:0 0 1.5rem rgba(0,0,0,0.15); font-size:0.8rem; line-height:1.5}
.features .feature .title{font-size:0.9rem; font-weight:var(--bold_weight); color:var(--clr1); margin-bottom:1rem}
.features .feature .title.grid{gap:0; grid-template-columns:3rem 1fr; align-items:center}
.features .feature .title i{font-size:1.8rem}

.locations{background:linear-gradient(90deg, var(--clr2), var(--clr1)); color:#fff;  }
.locations .left{padding: 4rem 0}
.locations .left .h1{margin-bottom:1rem; color:#fff}
.locations .left ul li{list-style:none}

.locations .left ul li:before{content:"\f058"; font:var(--awesome900); margin-left:-30px; width:30px; display:inline-block; color:var(--clr3)}
.locations .left a{color:inherit}

.locations .map{height:100%; width:100%; position:relative; color:var(--clr1)}
#map .gm-style-iw{width:220px}
#map .gm-style-iw .grid .logo{width:200px; max-width:100%!important; filter: grayscale(1);}

#map .gm-style-iw .grid .title{font-family: "Rubik", sans-serif;  font-size: 16px; font-weight:var(--bold_weight); color:var(--clr1)}

.information_bar{padding: 4rem 0; color:var(--clr1)}
.information_bar .grid{grid-template-columns:300px 1fr}
.information_bar .grid > .clipped_img{width:200px}
.information_bar .h1{margin-bottom:1rem}
.information_bar .contact_btns{gap:1rem 3rem}
.information_bar .contact_btns .contact_btn{display:inline-flex; flex-wrap:wrap; gap:1rem; align-items:center; font-size:1.2rem; font-weight:var(--medium_weight)}
.information_bar .contact_btns .contact_btn .icon .inner{background:var(--clr3); aspect-ratio:1 / 1; width:4rem; text-align:center; color:#fff;     display: flex; justify-content:center; align-items:center; }
.information_bar .contact_btns .contact_btn:hover{opacity:0.8}


.footer{background:#fff; padding:3rem 0; color:var(--clr2)}
.footer a:hover{color:var(--clr6)}
.footer .logo{width:275px; max-width:100%; margin-bottom:2rem}
.footer .socials{font-size:1.8rem;  display:flex; justify-content:flex-end; gap:2rem}

.bottom{padding:1rem; color:color-mix(var(--clr2) 20% , transparent)}
.bottom a:hover{color:color-mix(var(--clr2) 50% , transparent)}

.content{padding-top:3rem}
.content h1{margin-bottom:1em}

.content .right img{border-radius:var(--border_radius)}

.contact_details div span{width:2.5rem; display:inline-block;  color:var(--clr6)}
.contact_details a span{width:2.5rem; display:inline-block; color:var(--clr6)}
.contact_details a:hover{color:var(--clr6)}

#map_contact{height:100%; border-radius:var(--border_radius); overflow:hidden; border:2px solid var(--clr2)}

.text_bar{padding-top:3rem}
.text_bar.extra_text{background:#fff; padding: 3rem 0; margin-top:3rem}


.ref_list{padding: 3rem 0}
.ref_list .ref{background:#fff; border-radius:var(--border_radius); padding: 1.5rem; display:grid; grid-template-rows:subgrid; grid-row:span 1; gap:1rem; box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.15); }
.ref_list .ref:hover{box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.25); transform:translatey(-2px)}
.ref_list .ref .ref_logo{display:flex; align-items:center; justify-content:center; }
.ref_list .ref .ref_logo img{object-fit:contain; aspect-ratio:3 / 1; filter:grayscale(1); width:200px; }
.ref_list .ref .title{font-weight:var(--bold_weight); line-height:1.3; font-size:0.9rem; }

.ref_map{aspect-ratio:3 / 1}

.steps .step{display:grid; grid-template-columns: 2rem 1fr; gap:1rem; margin-bottom:1rem}
.steps .number{width:2rem; height:2rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }

.options{padding: 5rem 0}
.options h2{}

.designs{padding-top:2rem}
.designs .monitor_box{position:relative;}
.designs .monitor_box .design_img{position: absolute;    top: 5%;    left: 4%;    width: calc(92%);    height: 63%;}
.designs .monitor_box .design_img > div{display:none; position:absolute; width:100%; height:100%;}
.designs .monitor_box .design_img > div.active{display:block;}

.designs .design_options {padding-top:1rem}
.designs .design_options .design_option{padding:0.5rem}
.designs .design_options .info-head{font-weight:var(--bold_weight); display:grid; grid-template-columns:2rem 1fr; gap:1rem;}
.designs .design_options .info-head .number_wrap{position:relative;}
.designs .design_options .info-head .number{display:inline-flex; width:2rem; height:2rem; background:color-mix(var(--clr1) 20% , transparent); align-items:center; justify-content:center; }
.designs .design_options .design_option.active .info-head .number{background:var(--clr5); color:#fff; position:relative;}
.designs .design_options .design_option.active .info-head .number_wrap:before{content:""; border:1px solid var(--clr5); width:3rem; position:absolute; top:50%; right:95%; z-index:-1}
.designs .design_options .design_option .info-body{display:none; padding-left:3rem}
.designs .design_options .design_option.active .info-body{display:block}
.designs .design_options .design_option .info-body ul{margin-left:1rem} 

.wpcf7 .form_item{margin-bottom: 20px; display:grid; gap:0 1rem; grid-template-columns:10rem 1fr}

.wpcf7 input, .wpcf7 textarea,  .wpcf7 select{width:100%; padding:5px 15px; border: 1px solid var(--border_clr) ; border-radius:var(--border_radius); font:inherit }
.wpcf7 textarea{height:200px}

.wpcf7 select{background:url(img/angle-down.png) no-repeat calc(100% - 10px) 50% #fff;}

span.wpcf7-list-item {display: inline-block;margin: 0px 0 0;}
span.checkbox{margin-top:10px; display: block;}
.wpcf7 .wpcf7-list-item {display: inline-block; margin-right:35px; width: 100%;}
.wpcf7-list-item-label {margin-left: 30px;display: inline-block; vertical-align: top;}
.wpcf7-checkbox {padding: 5px 0px; display:inline-block}
.wpcf7-checkbox label {position: relative;cursor: pointer;}
.wpcf7-checkbox input[type=checkbox] {position: absolute;visibility: hidden;height: 1em;width: 1em;top: 0.25em;left: 0px;}
.wpcf7-checkbox input[type=checkbox] + span:before {display: block;position: absolute;content: '';border-radius: 0;height: 1em;width: 1em;top: 0.25em;left: 0px;border: 1px solid var(--border_clr); background:#fff}
.wpcf7-checkbox input[type=checkbox] + span:after {display: flex;        justify-content: center; align-items: center;position: absolute;content: "\f00d";font:var(--awesome900); height: calc(1em - 3px);    width: calc(1em - 3px);color:var(--clr1);top: calc(0.25em + 2px);    left: 2px;visibility: hidden;font-size: 1em;text-align: center; }
.wpcf7-checkbox input[type=checkbox]:checked + span:before {background: transparent;}
.wpcf7-checkbox input[type=checkbox]:checked + span:after {visibility: visible;}

.wpcf7-radio label {position: relative;cursor: pointer;}
.wpcf7-radio input[type=radio] {position: absolute;visibility: hidden;width: 1em;height: 1em;top: 0;left: 0;}
.wpcf7-radio input[type=radio] + span:before {display: block;position: absolute;content: '';border-radius: 100%;height: 1em;width: 1em;top: 0.25em;left: 0px;border: 1px solid var(--border_clr); background:#fff}
.wpcf7-radio input[type=radio] + span:after {display: block;position: absolute;content: "";font:var(--awesome900); height: calc(1em - 3px);    width: calc(1em - 3px);    color: var(--clr1);    background: var(--clr1);
    border-radius: 100%;    top: calc(0.25em + 2px);    left: 2px;visibility: hidden;text-align: center;}
.wpcf7-radio input[type=radio]:checked + span:before {background: transparent;}
.wpcf7-radio input[type=radio]:checked + span:after {visibility: visible;}

@media only screen and (max-width: 1730px) {
	.references_bar .box{padding: 1.5rem 2rem }
}

@media only screen and (max-width: 1550px) {
	.features .grid.cols3 {    grid-template-columns: repeat(2, 1fr);}
}

@media only screen and (max-width: 1400px) {
	
	.menu_bar nav ul li a {    padding: 0 0.5rem;}	
}

@media only screen and (max-width: 1350px) {
	
	.menu_bar nav ul li a {    padding: 0 0rem;}
	
	.hero {  padding: 4rem 0 6rem;}
	.hero .background {  width: calc(100% - 50px);}
	.references_bar .background {   width: calc(100% - 50px);}
	
	.ref_list .grid.cols5{    grid-template-columns:repeat(4, 1fr);}
}

@media only screen and (max-width: 1250px) {
	body, html{font-size:18px}
	.menu_bar .logo img {    width: 200px;}
	
	
}


@media only screen and (max-width: 1160px) {
	.menu_bar nav ul{display:none}
	 .menu_btn{display:inline-flex; gap:1rem}
	.hero h1 {    font-size: 2.4rem;}
	.ref_map{aspect-ratio:2 / 1}
}

@media only screen and (max-width: 1050px) {
	.features .features_grid {    grid-template-columns:1fr;}
	.features .left{display:none}
	
	.footer .grid.cols4 { grid-template-columns: repeat(2, 1fr);}
	.footer .grid.cols4 > .col:nth-of-type(3){    grid-area: 3 / 1 / 4 / 3;}
	.footer .socials {justify-content: flex-start;}
	
	.ref_list .grid.cols5{    grid-template-columns:repeat(3, 1fr);}
}

@media only screen and (max-width: 960px) {
	.hero .grid.cols2 {    grid-template-columns: repeat(1, 1fr);}
	.hero .background {width:100%;  clip-path: polygon(0 0, 0 100%, calc(50%) 100%, 100% calc(50%), 100% 0);}
	
	.references_bar .box .logo_box .logo img {    max-width: 200px;}	
	
	.locations .grid.cols2 {    grid-template-columns: repeat(1, 1fr);}
	.locations .map{aspect-ratio:1 / 1}
	
	.information_bar .grid {    grid-template-columns: 200px 1fr;}
	
	.options .designs .grid.cols2 {    grid-template-columns: repeat(1, 1fr);}
	.designs .design_options .design_option.active .info-head .number_wrap:before{display:none}
	.designs .monitor_box{width:500px; max-width:calc(100dvw - 30px)}
	
	.content .grid.cols2 {    grid-template-columns: repeat(1, 1fr);}
}
@media only screen and (max-width: 750px) {

	.ref_list .grid.cols5{    grid-template-columns:repeat(2, 1fr); gap:1rem}
}
@media only screen and (max-width: 680px) {
	.references_bar .box{padding: 1.5rem}
	.references_bar .box .grid {  grid-template-columns: 100px 1px 1fr; gap:20px;}
	.references_bar .box .counter .number {    font-size: 2.5rem;}
	.references_bar .box .logo_box .logo img {    max-width: 150px;}
	
	.information_bar .contact_btns .contact_btn .icon .inner {width: 3rem;}
	.information_bar .grid {    grid-template-columns: 150px 1fr;}
	
	.ref_map{aspect-ratio:1 / 1}
}

@media only screen and (max-width: 600px) {
	.references_bar .box .grid {grid-template-columns: 100px 1px 1fr; gap: 20px;}
	.information_bar .grid {    grid-template-columns: 1fr;}
	
	.features .feature { padding: 1.5rem 1rem;}
	.features .feature .title.grid { grid-template-columns: 2rem 1fr; gap:0.5rem}
	
	
	.ref_list .ref {  padding: 1.5rem 1rem;}
	.wpcf7 .form_item{grid-template-columns:1fr}
}

@media only screen and (max-width: 500px) {
	.footer .grid.cols4 { grid-template-columns: repeat(1, 1fr);}
	.footer .grid.cols4 > .col:nth-of-type(3){    grid-area: 3 / 1 / 4 / 2;}
	
	
}

@media only screen and (max-width: 470px) {
	body, html{font-size:16px; hyphens: auto;}
	h1, .h1 {        font-size: 2rem;    }
    .hero { padding: 3rem 0 6rem; }
	.hero h1 {        font-size: 2rem;    }
	.references_bar .box .grid {	grid-template-columns:1fr; gap:1rem;}
	.references_bar .box .grid .border{height:1px}
	
	.features .grid.cols3 {    grid-template-columns: repeat(1, 1fr);}
	
	
	  .ref_list .grid.cols5{    grid-template-columns:repeat(1, 1fr); }  
}


@media only screen and (max-width: 350px) {
    .menu_btn {display: inline-flex;        gap:10px 1rem;        flex-direction: column-reverse;        align-items: center;	}
	.menu_btn .label{line-height:1; font-size:0.8rem}
}
@media print {
   
	html, body {  
			page-break-after: avoid;
            page-break-before: avoid; 
			border: 1px solid white;
            height: 99%;}
   
	div{display:block; width:100%}
   
  
}