@charset "utf-8";

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
  scroll-behavior: smooth;
}

:root{
	--blue:#0166CD;
	--brown:#A89F91;
	--green:#8A9A5B;
	--darkgrey:#363636;
}

html {
    height: 100vh; /* set viewport constraint */
    min-height: 100%; /* enforce height */
}

body{
	background-color:rgb(242,242,242);
	position: relative;
	color:var(--darkgrey);
	font-size:1.2rem;
	overflow-x: hidden;
	line-height: 1.65;
}

header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 140px;
	position: absolute;
	width: 100%;
	z-index: 2;
}

section#first{
	min-height: 100vh;
}

section.white{
	background-color:rgb(255,255,255);
	min-height: 0;
}


h1, h2, h3, h4, h5, h6 {
	margin: 0 0 1rem 0;
	line-height: 1.3;
}

h1{
	font-size:2rem;
}

h1.big{
	font-size:2.2rem;
	text-decoration: underline;
	margin-bottom: 1.75rem;
}

h2 {
    font-size: 2.25rem;
	color: #3f3f3f;
}

h3 {
    font-size: 1.75rem;
	color: #3f3f3f;
}

p{
	margin: 0 0 1.6rem 0;
}

ul{
	list-style-type: none;
}



ul li span:before {
    content: '\f015';               /* Font Awesome Home icon */
    font-family: "Font Awesome 6 Free"; /* Font Awesome 6 family */
    font-weight: 900;               /* Font Awesome 6 uses font-weight */
    display: inline-block;           /* Ensures proper rendering */
    margin-right: 10px;              /* Adjust spacing */
    color: var(--blue);              /* Ensure --blue is defined */
}


ul li{
	display: flex;
	margin-left: 10px;
	margin-bottom: 20px;
}

ul li span{
	position: relative;
	margin-left: 20px;
}

ul li span strong{
	
}

.logo{
	height: 220px;
	margin-left: 20px;
}

.menu{
	display: flex;
	margin-right: 40px;
	background-color:var(--blue);
	border-radius: 5px;
	box-shadow: 0 0 5px 5px rgb(0 0 0 / 10%);
}

.menu a, .menu div{
	display: inline-block;
	padding: 20px;
	letter-spacing: 1pt;
	font-size:1.1rem;
	color:#FFF;
	text-decoration: none;
	position: relative;
}

.menu div{
	padding: 10px 20px;
}

.menu a.current, .mobilemenu a.current, .menu div.current, .mobilemenu div.current{
	background-color:#FFF;
	color:var(--blue);
}

.subpages div:hover{
	background-color:#FFF;
	color:var(--blue);
}

.subpages div:last-of-type:hover{
	border-radius: 0px 0px 5px 5px;
}

.menu a:first-of-type{
	border-radius: 5px 0 0 5px;
}

.menu a:last-of-type{
	border-radius: 0 5px 5px 0;
}

.menu a:not(.current):hover,.mobilemenu a:not(.current):hover{
	background-color:#0078f2;
}

.subheading {
    font-size: 1.0rem;
    font-weight: normal;
    color: #444;
    margin-top: 0.5rem;
    line-height: 1.6;
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.5rem;
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 5px;
}

.blog-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 2rem;
}

.blog-entry {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
    text-align: center;
    width: 300px;
}

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

.blog-entry a {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
}

.blog-entry a:hover {
    color: #004080;
}

.blog-entry p {
    font-size: 1rem;
    color: #666;
    margin-top: 10px;
}


.container{
	max-width: 1280px;
	width: 100%;
	margin:0 auto;
}

.containerheader{
	max-width: 660px;
	width: 100%;
	text-align: center;
	margin: 0 auto 2rem auto;
}

.containerheader h2:before{
	content: '';
    display: block;
    width: 6.5rem;
    height: 0.25rem;
    margin: 0 auto 1.5rem;
    border-radius: 4px;
    background-color: var(--blue);
}

.main{
	padding:6rem 3rem 4rem 3rem;
}

.dark{
	background-color:#292f33;
	color:#ffffff;
}

.featureblock.dark .category{
	color:#4a98e2;
}

.dark .button{
	background-color:#4a98e2;
}

.dark.featureblock,.dark.featureblock div{
	background-color:rgba(62,71,77,1.00);
	color:#ffffff;
}

.dark h3,.dark h2{
	color:#ffffff;
}

section#banner{
	height: 100vh;
	max-width: 100%;
	width: 100%;
	min-height: 100%;
	overflow: hidden;
	position: relative;
	z-index: 0;
	background-image:url("../images/houses-white.jpg");
	background-size:cover;
	background-attachment: fixed;
}

section#banner .content{
	z-index: 2;
	position: absolute;
	text-align: center;
	padding: 20px;
	top:calc(50% - 20px);
    left: 50%;
    transform: translate(-50%, 0);
	background-color:var(--blue);
	border-radius: 5px;
	color:#FFF;
}

#banner .content h1{
	font-size:2.25rem;
}

#banner .content p{
	font-size: 1.25rem;
}

#banner .content > *{
	margin: 0.25rem 0 0 0;
}

#banner > .more {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg zoomAndPan='disable' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='40px' height='20px' viewBox='0 0 40px 20px'%3E%3Cstyle type='text/css'%3Eline %7B stroke: %23ffffff%3B stroke-width: 0.75px%3B %7D%3C/style%3E%3Cline x1='0' y1='0' x2='20' y2='20' /%3E%3Cline x1='20' y1='20' x2='40' y2='0' /%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 4rem 2rem;
    width: 6rem;
    height: 6rem;
    text-align: center;
    color: #ffffff;
    border-bottom: 0;
    position: absolute;
    bottom: 0;
    left: calc(50% - 3rem);
    text-indent: 6rem;
    white-space: nowrap;
    overflow: hidden;
    z-index: 1;
}

#banner:after {
    pointer-events: none;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.225), rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0.225));
}

.featureblock{
	background-color:#FFF;
	display: flex;
    align-items: center;
    margin: 0 0 3.5rem 0;
    min-height: 28rem;
	border-radius: 5px;
}

.image{
    display: inline-block;
    position: relative;
    border-radius: 4px;
    border: 0;
}

.featureblock div:not(.image){
	width: 60%;
	padding:5rem 4rem;
}

.featureblock .category{
	font-weight: 600;
    display: block;
	font-size: 1.4rem;
    margin: 0 0 0.35rem 0;
	color:var(--blue);
}

.image[data-position="center"] img {
    object-position: center;
}

.image[data-position] img {
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.featureblock > .image {
    align-self: stretch;
    width: 40%;
    min-height: inherit;
    border-radius: 4px;
}

.button,button[type=submit]{
    border-radius: 4px;
    border: 0;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    height: 4rem;
    line-height: 3.075rem;
    padding: .5rem 2.5rem;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.025rem;
	background-color:var(--blue);
	color:#FFF;
	font-family: 'Lato', sans-serif;
	font-size: 1.2rem;
}

.button.next:before,button[type=submit]:before {
    content: '\f30b';
    float: right;
    line-height: inherit;
    margin: 0 -0.25rem 0 0.5rem;
	font-family: "Font Awesome 6 Free";
}

.smenu:before{
	content: '\f105';
    float: left;
    line-height: inherit;
    margin: 0 0.5rem 0 -0.25rem;
	font-family: "Font Awesome 6 Free";
	font-weight: 700;
}

.blocks-4{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.blocks-4 > div{
	width: 20%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	font-size:1.1rem;
	text-align: center;
}

.blocks-4 > div img{
	border-radius: 100%;
	margin-bottom: 25px;
	max-width: 100%;
	height: auto;
}

.blocks-4 > div div.blocktitle{
	font-weight: 600;
	padding-bottom:5px;
}

.fields{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}

.field{
	padding: 1.5rem 0 1rem;
	flex: 1;
}


.field.col-50{
	width: calc(50% - .75rem);
	flex:none;
}

input[type="text"], input[type="password"], input[type="email"], select, textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    border-radius: 4px;
    border: none;
    border: solid 1px;
    color: inherit;
    display: block;
    outline: 0;
    padding: 0 1rem;
    text-decoration: none;
    width: 100%;
	border-color:rgba(143, 143, 143, 0.25);
	font-family: 'Lato', sans-serif;
}

input{
	height: 3rem;
}

textarea{
	padding: 1rem;
	resize: vertical;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
    border-color: #0166CD;
    box-shadow: 0 0 0 1px #0166CD;
}

/* START: Mobile Optimization */
.contact-form-container {
    max-width: 600px; /* Ensures proper width */
    width: 90%;
    margin: 0 auto;
    padding: 20px;
}

.contact-form .fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-form .field {
    width: 100%;
}

.contact-form .field.col-50 {
    width: 48%; /* Ensures two fields fit side by side */
}

/* Ensure inputs and textarea are mobile-friendly */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contact-form button {
    width: 100%;
    background-color: var(--blue);
    color: white;
    padding: 12px;
    font-size: 1.2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
    .contact-form-container {
        width: 95%;
        padding: 15px;
    }

    .contact-form .field.col-50 {
        width: 100%; /* Make fields full-width on smaller screens */
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 1rem;
        padding: 10px;
    }

    .contact-form button {
        font-size: 1rem;
        padding: 10px;
    }
}
/* END: Mobile Optimization */


footer{
 /* controls top and bottom spacing for the entire footer area */
	padding: 0.2rem 0 0.2rem 0;
    color: #bfbfbf;
    text-align: center;
	background-color:#FFF;
	/* display: none; */
}

/* Footer Menu Styling */
.footer-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 0;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  flex-wrap: wrap;
}

.footer-menu a {
  font-family: 'Lato', sans-serif;
  font-size: 0.9rem;
  color: var(--darkgrey);
  margin: 0.5rem 1rem;
  text-decoration: none;
}

.footer-menu a:hover {
  text-decoration: underline;
  color: var(--blue);
}

/* Footer Logo Styling */
.footer-logo {
  text-align: center;
  margin-bottom: 3rem;
}

.footer-logo img {
  max-width: 150px;
  height: auto;
}

/* Footer Copyright Styling */
.footer-copyright {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--darkgrey);
}

.contentblock{
	background-color:#FFF;
	padding: 5rem 4rem 3rem 4rem;
    border-radius: 4px;
}

.contentblock hr{
	margin-top: 30px;
	margin-bottom: 30px;
	height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--blue), rgba(0, 0, 0, 0));
    border: none;	
}

.result{
	display: block;
	width: 100%;
	background-color: #4a98e2;
	padding: 1rem 2rem;
	color:#FFF;
	border-radius: 4px;
}

.result.hide, .hide{
	display: none;
}

.result:not(.hide) + .field{
	display:none;
}

input:disabled,textarea:disabled{
	border: 1px solid #999999;
  	background-color: #cccccc;
  	color: #666666;
}


button[type=submit]:disabled{
	border: 1px solid #999999;
  	background-color: #cccccc;
  	color: #666666;
}

#openmobile,.mobileheader,.mobilemenu{
	display: none;
}

.mobilemenu .flex{
	flex:1;
}

.mlogo{
	text-align: center;
	padding: 10px;
}

.mlogo img,img{
	max-width: 100%;
	height: auto;
}

.mobileheader{
	height: 60px;
	background-color:#FFF;
	width: 100%;
	padding: 0 10px;
	box-shadow: 0px 2px 11px rgba(0, 0, 0, 0.1);
}

	
.mobilelogo{
    display: flex;
    align-items: center;
	font-size: 1.1rem;
	flex:1;
	color:var(--darkgrey);
	text-decoration: none;
}

.mobilelogo span{
    padding: 0 10px;
    display: block;
	color:var(--darkgrey);
}

.subpages{
	display: none;
}

header a:hover .subpages{
	display: flex;
	flex-direction: column;
	position: absolute;
	top:69px;
	left: 0;
	right: 0;
	border: 0;
	background-color: var(--blue);
	border-radius: 0 0 5px 5px;
    box-shadow: 0 0 5px 5px rgb(0 0 0 / 10%);
}

.hamburger{
	display: flex;
	align-items: center;
	justify-content: center;
}

.hamburger label{
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.close{
    cursor: pointer;
    font-style: normal;
    height: 16px;
    line-height: 16px;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 16px;
    text-align: center;
    font-size: 22px;
}

@keyframes animatedBackground {
    0% { background-position: 0 0; }
	50% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

@media screen and (max-width:1024px){
	.blocks-4 > div{
		width: 24%;
		padding: 0 5px;
		font-size:1rem;
	}
	
	.featureblock div:not(.image) {
		width: 100%;
		padding: 2.5rem 2rem;
	}
}

@media screen and (max-width:960px){
	.mobileheader{
		display: flex;
		position: fixed;
		z-index: 2;
	}
	
	.mobileheader ~ section#banner{
		height: calc(100vh - 0px);
		max-height: calc(100vh - 0px);
	}

	section#banner .content {
		top:calc(50% - 0px);
		width:calc(100% - 50px);
	}
	
	section#banner{
		min-height: 100%;
		background-image: url(../images/houses-white-m.jpg);
    	background-size: cover;
    	background-attachment:scroll;
    	background-repeat: no-repeat;
    	background-position: 0px center;
		animation: animatedBackground 20s linear infinite;
	}
	
	header{
		display: none;
	}
	
	#openmobile:checked ~ .mobilemenu{
		display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        flex: auto;
        z-index: 2;
        margin: 0;
		background-color:var(--blue);
		color:#FFF;
	}
	
	.mobilemenu a:first-of-type{
		margin-top: 60px;
	}
	
	.mobilemenu a{
		width: 100%;
		display: block;
		color:#FFF;
		padding: 10px 20px;
		text-decoration: none;
		font-size:1.2rem;
		border-top:1px solid #FFF;
		border-collapse: collapse;
	}
	
	.mobilemenu a:last-of-type{
		border-bottom:1px solid #FFF;
	}
	
	#banner .content h1 {
    	font-size: 2rem;
	}
	
	#banner .content p {
		font-size: 1rem;
	}
	
	.contentblock{
		padding: 2rem 1rem;
	}
}

@media screen and (max-width:768px){
	body {
		font-size:1rem;
	}
	
	h1.big{
		font-size:2rem;
	}
	
	h1{
		font-size:1.75rem;
	}
	
	.button,button[type=submit]{
		padding: 0.5rem 1.5rem;
		height: auto;
		line-height: auto;
	}
	
	.blocks-4 > div{
		width: 50%;
		padding: 0 5px;
		margin-bottom: 20px;
	}
	
	.main{
		padding: 3rem 1.5rem 2rem 1.5rem;
	}
	
	.featureblock{
		flex-direction: column;
	}
	
	.featureblock div{
		width: 100%;
	}
	
	.featureblock div:not(.image) {
		width: 100%;
		padding: 2rem 1.5rem;
	}
	
	.featureblock > .image {
		width: 100%;
		order: -1;
	}
}

@media screen and (max-width:440px){
	body {
		font-size:.9rem;
	}
	
	.button,button[type=submit]{
		padding: 0.3rem 1rem;
	}
	
	.blocks-4 > div{
		width: 100%;
	}
}
/* ===============================
   About Us Page Section Separation
   =============================== */

/* Add extra spacing below each containerheader in the About Us page */
#company .container.main > .wow.fadeIn.containerheader {
    margin-bottom: 2rem;
}

/* Optionally, add a separator line between content blocks for visual clarity */
.contentblock + .containerheader {
    border-top: 1px solid #ccc;
    padding-top: 2rem;
    margin-top: 2rem;
}

/* Alternatively, if you want every section (with id "process", "services", etc.) clearly separated: */
#process,
#services {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #ccc;
}