/*!
Theme Name: GutterKnight
Theme URI: http://underscores.me/
Author: StarlitDevs
Author URI: https://starlitdevs.com/
Description: This is a custom theme
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: gutterknight
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

StarlitDevs is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root{
    --color-white: #ffffff;
	--color-text: #505050;
	--color-iceBlue: #f3f8fc;
	--color-blue: #2562ad;
	--color-orange: #faaf40;
	--color-cream: #fbf8ea;
	--color-gradient: linear-gradient( 8deg, rgb(43,56,143) 0%, rgb(35,87,165) 49%, rgb(27,117,187) 100%);
	--color-gradient-2: linear-gradient( 8deg, rgb(27,117,187) 0%, rgb(35,87,165) 49%, rgb(43,56,143) 100%);
	--primary-font: 'Poppins';
	--heading-font: 'DINosaur';
}
html, body {
	scroll-behavior: smooth;
	scroll-padding-top: 100px;
}
body{
	-webkit-font-smoothing: antialiased; /* Chrome, Safari */
	-moz-osx-font-smoothing: grayscale; /* Firefox */
	font-family: var(--primary-font);
	line-height: 2.1;
	font-size: 16px;
	font-weight: 300;
	color: var(--color-text);
}
h1, h2, h3, h4, h5, h6{
	line-height: 1;
	margin: 0;
	padding: 0;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-family: var(--heading-font);
	color: var(--color-blue);
}
h1{
	font-size: 17px;
	font-family: var(--primary-font);
	letter-spacing: 0.36em;
	line-height: 1;
	font-weight: 400;
	color: var(--color-text);
}
h2{
	font-size: 75px;
}
:is(h2, h3) strong {
	color: var(--color-orange);
}
h3{
	font-size: 50px;
}
h4{
	font-size: 33px;
}
p{
	margin-bottom: 20px;
}
p:last-child, p:last-of-type {
	margin-bottom: 0;
}
img{
	width: 100%;
	object-fit: cover;
	object-position: center;
	height: auto;
}
ul{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
	transition: .4s;
}
a:focus{
	outline: none;
}
.btn{
	padding: 15px 42px;
	border-radius: 23px;
	line-height: 1;
	letter-spacing: 0.16em;
	transition: .3s;
	text-transform: uppercase;
	border: none !important;
}
.btn-blue{
	background: var(--color-gradient);
	color: var(--color-white);
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.btn-blue::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0;
	background: var(--color-blue);
	z-index: -1;
	transition: .3s;
}
.btn-blue:hover::before{
	width: 100%;
}
.btn-blue:hover{
	color: var(--color-white);
}
.btn-orange{
	background-color: var(--color-orange);
	color: var(--color-white);
}
.btn-orange:hover{
	background-color: var(--color-blue);
	color: var(--color-white);
}
.button-group {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.bg{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.bg-white{
	background-color: var(--color-white);
}
.gradient-bg {
	background: var(--color-gradient);
}
.bg-iceBlue{
	background-color: var(--color-iceBlue);
}
.bg-cream{
	background-color: var(--color-cream);
}
.blue-bg{
	background-color: var(--color-blue);
}
.py-100{
	padding-block: 100px;
}
.pt-100{
	padding-top: 100px;
}
.pb-100{
	padding-bottom: 100px;
}
.py-90{
	padding-block: 90px;
}
.pt-90{
	padding-top: 90px;
}
.pb-90{
	padding-bottom: 90px;
}
.rounded-25{
	border-radius: 25px;
}
.flex-1{
	flex: 1;
}
.container{
	max-width: 1338px;
	padding-inline:15px;
	margin-inline: auto;
}
.row{
	--bs-gutter-x: 20px !important;
}


/* header */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	padding-block: 42px;
}
body.admin-bar .site-header {
	top: 32px;
}
.header-logo {
  max-width: 215px;
}

/* Banner */
.banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.banner{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
  padding-bottom: 65px;
  position: relative;
  z-index: 1;
}
.banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 40%;
  transform: translateX(-50%);
  background-image: url('https://gklp.harmonisedstaging.au/wp-content/uploads/2026/05/top-before.png');
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  max-height: 69px;
  max-width: 516px;
}
.banner::after {
	content: '';
	position: absolute;
	bottom: -310px;
	right: 0;
	width: 309px;
	height: 655px;
	background-image: url('https://gklp.harmonisedstaging.au/wp-content/uploads/2026/05/before.svg');
	background-repeat: no-repeat;
	background-size: contain;
	mix-blend-mode: multiply;
	z-index: -1;
}
.banner-content {
  max-width: 600px;
  padding-top: 42px;
  padding-bottom: 80px;
}
.super-title {
  margin-bottom: 40px;
}
.banner-title {
  margin-bottom: 50px;
}
.banner-title h2 {
  margin-bottom: 40px;
}
.call-out {
	padding-inline: 40px;
	padding-block: 28px;
	color: var(--color-white);
	font-weight: 600;
}
.call-out-icon {
  max-width: 75px;
  width: 100%;
  margin-right: 30px;
}
.call-out-item {
  padding-left: 28px;
  padding-right: 10px;
  border-left: 1px solid #ffea97;
}
.call-out-item:last-child {
  padding-right: 0;
}
.call-out-item:first-child {
  padding-left: 0;
  border-left: 0;
}

/* Roof Type */
.roof-type{
	z-index: 1;
}
.roof-type-title {
  max-width: 450px;
}
.roof-type-icon {
  max-width: 90px;
  margin-inline: auto;
  margin-bottom: 30px;
  position: relative;
}
.roof-type-item {
  padding-block: 60px;
  text-align: center;
  padding-inline: 30px;
  position: relative;
  overflow: hidden;
}
.roof-item-1::before, 
.roof-item-2::before, 
.roof-item-3::before {
	content: '';
	position: absolute;
	top: -43%;
	left: -37%;
	background-image: url('https://gklp.harmonisedstaging.au/wp-content/uploads/2026/05/tiles-before.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
}
.roof-item-2::before{
	background-image: url('https://gklp.harmonisedstaging.au/wp-content/uploads/2026/05/metal-before.svg');
	left: -33%;
  	top: -32%;
}
.roof-item-3::before{
	background-image: url('https://gklp.harmonisedstaging.au/wp-content/uploads/2026/05/trimdek-before.svg');
	left: -35%;
  	top: -35%;
}
.roof-type-title h3 {
  margin-bottom: 40px;
}
.roof-type-row {
  padding-left: 30px;
}

/* Contact */
.contact-inner {
  padding: 60px;
  position: relative;
}
input, select, textarea {
  width: 100%;
  border: none;
  padding-inline: 30px;
  padding-block: 13px;
  border-radius: 13px;
}
:is(input, select, textarea):focus {
  outline: none;
}
.input-item {
  margin-bottom: 12px;
}
.input-item.submit {
  margin-bottom: 0;
  margin-top: 20px;
}
.input-item.submit .wpcf7-spinner {
  display: none;
}
.input-item.submit input {
  max-width: 198px;
}
textarea {
  height: 198px;
}
.contact-form {
  padding-right: 35px;
}
.contact-content {
  padding-left: 62px;
}
.contact-content h3{
	margin-bottom: 35px;
}

/* Why choose */
.why-choose{
	z-index: 1;
}
.why-choose::after, .why-choose::before {
  content: '';
  position: absolute;
  right: -140px;
  top: 0;
  background-image: url('https://gklp.harmonisedstaging.au/wp-content/uploads/2026/05/download.svg');
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 297px;
  max-height: 378px;
  z-index: -1;
}
.why-choose::before{
	left: 0;
	right: auto;
	background-image: url('http://gklp.harmonisedstaging.au/wp-content/uploads/2026/05/why.png');
	max-width: 171px;
  	max-height: 381px;
}
.why-choose-title {
  max-width: 890px;
  margin-inline: auto;
  margin-bottom: 90px;
}
.why-choose-buttons .button-group {
  justify-content: center;
}
.why-choose-title h3 {
  margin-bottom: 45px;
}
.why-choose-buttons {
  margin-top: 45px;
}
.why-choose-img img {
  aspect-ratio: 1 / 0.76;
  transition: .6s;
}
.why-choose-text {
	padding-inline: 42px;
	padding-block: 30px;
}
.why-choose-item:hover .why-choose-img img{
	transform: scale(1.07);
}

/* image with text */
.img-with-text{
	margin-top: 100px;
}
.img-with-text-img {
  height: calc(100% + 70px);
  margin-top: -70px;
}
.img-with-text-img img {
  position: absolute;
  bottom: 0;
  border-radius: 25px;
  height: 100%;
  min-height: 552px;
}
.img-with-text-content {
  padding-bottom: 70px;
  padding-top: 100px;
  max-width: 532px;
}
.img-with-text-content h3 {
  margin-bottom: 40px;
}
.img-with-text-buttons {
  margin-top: 40px;
}

/* services */
.services-item {
  background-color: var(--color-white);
  height: 100%;
}
.services-img img {
  max-height: 205px;
  transition: .6s;
}
.services-item:hover .services-img img{
	transform: scale(1.07);
}
.services-content {
  padding: 40px;
}
.services-content h4 {
	margin-bottom: 30px;
}
.service-row{
	row-gap: 20px;
}

/* Testimonial */
.testimonial{
	z-index: 1;
}
.testimonial::before{
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--testimonial-overlay);
	opacity: 0.33;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -1;
	mix-blend-mode: multiply;
}
.testimonial-title h3 {
  color: var(--color-white);
  margin-bottom: 40px;
  max-width: 400px;
}
.testimonial-title p {
  color: var(--color-white);
}
.testimonial-carousel {
	padding-inline: 25px;
	position: relative;
	margin-bottom: -80px;
}
.testimonial-slide {
  background-color: var(--color-white);
  padding: 70px;
  display: flex;
  flex-direction: column;
  gap: 45px;
  justify-content: space-between;
}
.autor-name {
	font-weight: 600;
}
.testimonial-navigation button {
  position: absolute;
  top: calc(50% + 40px);
  left: 0;
  transform: translateY(calc(-50% - 40px));
  border: none;
  background-color: var(--color-orange);
  z-index: 1;
  color: var(--color-white);
  height: 51px;
  width: 51px;
  border-radius: 50%;
}
.testimonial-next {
  left: auto !important;
  right: 0;
}

/* contact with bg */
.contact-with-bg {
  padding-top: 180px;
}
.contact-with-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--contact-overlay);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.14;
  mix-blend-mode: luminosity;
}
.contact-with-bg :is(input, select, textarea){
	background-color: var(--color-iceBlue);
}

/* FAQs */
.faq {
	z-index: 1;
}
.faq::before, .faq::after{
	content: '';
	position: absolute;
	left: -140px;
	top: 25%;
	background-image: url('http://gklp.harmonisedstaging.au/wp-content/uploads/2026/05/download.svg');
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	max-width: 297px;
	max-height: 378px;
	z-index: -1;
}
.faq::after{
	background-image: url('http://gklp.harmonisedstaging.au/wp-content/uploads/2026/05/faq-after.png');
	left: auto;
	right: 0;
	max-width: 171px;
}
.faq-accordion {
  max-width: 794px;
  margin-inline: auto;
}
.faq-item{
	border-radius: 13px;
}
.faq-item:not(:last-child){
	margin-bottom: 15px;
}
.faqs-title {
  max-width: 764px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 60px;
}
.faq-header h4 {
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-text);
  line-height: 2;
}
.faq-header {
  padding: 12px 32px;
  cursor: pointer;
}
.faq-content {
  display: none;
  padding-inline: 32px;
  padding-bottom: 20px;
}
.faq-content :is(h1, h2, h3, h4, h5, h6){
	font-family: var(--primary-font);
	color: var(--color-text);
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 15px;
  	padding-top: 12px;
}
.faq-content ul{
	padding-left: 30px;
	margin-bottom: 20px;
}

/* Footer */
.footer-logo {
  max-width: 212px;
}
.footer-content {
  max-width: 652px;
  margin-top: 35px;
}
.footer-inner {
  padding: 60px;
  padding-bottom: 50px;
}
.site-footer {
  padding-bottom: 60px;
}
.social-icons {
	gap: 10px;
}
.icon-item {
  display: block;
  color: #432b9b;
}
.icon-item svg {
  width: 24px;
  height: 24px;
}
.footer-bottom {
  margin-top: 80px;
}
.credit a {
  color: var(--color-text);
}


/* thank you */
body.page-template-thank-you .site-header {
	position: unset;
}
.thank-you-content{
	text-align: center;
}
.thank-you-content h1 {
  font-size: 66px;
  font-weight: 700;
  letter-spacing: -2%;
  color: var(--color-red);
  margin-bottom: 10px;
}
.thank-you p {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
}



/* Responsive */

@media (max-width: 1199.98px){
	/* banner */
	.call-out-item {
		font-size: 13px;
	}
	.call-out-icon {
		margin-right: 0;
		margin-bottom: 35px;
	}
	.banner::after{
		display: none;
	}

	/* Roof Type */
	.roof-type-icon {
		max-width: 70px;
	}

	/* Contact */
	.contact-content {
		padding-left: 0;
	}

	/* image with text */
	.img-with-text-content{
		padding-top: 70px;
	}
	.why-choose::before{
		display: none;
	}
}
@media (max-width: 991.98px){
	.py-100{
		padding-block: 80px;
	}
	.pt-100{
		padding-top: 80px;
	}
	.pb-100{
		padding-bottom: 80px;
	}
	.py-90{
		padding-block: 60px;
	}
	.pt-90{
		padding-top: 60px;
	}
	.pb-90{
		padding-bottom: 60px;
	}
	h2 {
		font-size: 65px;
	}

	/* Banner */
	.header-buttons .btn {
		padding-inline: 30px;
	}
	.call-out {
		padding-inline: 20px;
	}
	.call-out-content{
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 30px;
		row-gap: 19px;
	}
	.call-out-item {
		border-bottom: 1px solid #ffea97;
		border-left: 0;
		padding-bottom: 5px;
		height: 100%;
		line-height: 1.5;
		padding-inline: 0;
	}

	/* Roof Type */
	.roof-type-title {
		max-width: 100%;
		text-align: center;
		margin-bottom: 40px;
	}
	.roof-type-title h3 {
		margin-bottom: 25px;
	}
	.roof-type-row {
		padding-left: 0;
	}

	/* Contact */
	.contact-row {
		flex-direction: column-reverse;
	}
	.contact-form {
		padding-right: 0;
		padding-top: 40px;
	}

	/* Why Choose */
	.why-choose-title{
		margin-bottom: 70px;
	}

	/* image with text */
	.img-text-row{
		flex-direction: column-reverse;
	}
	.img-with-text-content {
		padding-top: 40px;
		padding-bottom: 0;
	}
	.img-with-text-img img{
		position: unset;
		min-height: auto;
	}
	.img-with-text {
		margin-top: 70px;
	}

	/* Testimonial */
	.testimonial-title h3 {
		max-width: 100%;
		margin-bottom: 25px;
	}
	.testimonial-title {
		margin-bottom: 45px;
	}
}
@media (max-width: 782.98px){
	body.admin-bar .site-header{
		top: 46px;
	}
}
@media (max-width: 767.98px){
	html, body {
		scroll-padding-top: 80px;
	}
	.py-100{
		padding-block: 60px;
	}
	.pt-100{
		padding-top: 60px;
	}
	.pb-100{
		padding-bottom: 60px;
	}
	h2{
		font-size: 52px;
	}
	h3{
		font-size: 42px;
	}
	h4{
		font-size: 28px;
	}

	/* header */
	.site-header {
		padding-block: 25px;
	}
	.header-buttons .btn-orange {
		display: none;
	}

	/* banner */
	.banner::before{
		display: none;
	}
	.super-title {
		margin-bottom: 25px;
	}
	.banner-title h2 {
		margin-bottom: 25px;
	}
	.banner-title {
		margin-bottom: 35px;
	}
	
	/* contact */
	.contact-inner {
		padding-inline: 25px;
		padding-block: 40px;
	}
	.input-item.submit {
		margin-top: 10px;
	}
	.contact-with-bg {
		padding-top: 150px;
	}

	/* why choose */
	.why-choose-title h3 {
		margin-bottom: 25px;
	}
	.why-choose-buttons {
		margin-top: 35px;
	}

	/* image with text */
	.img-with-text-content h3 {
		margin-bottom: 25px;
	}
	.img-with-text-buttons {
		margin-top: 30px;
	}

	/* services */
	.services-content{
		padding: 30px;
	}
	.services-content h4 {
		margin-bottom: 20px;
	}

	/* Testimonial */
	.testimonial-slide {
		padding: 30px;
		text-align: center;
	}

	/* FAQs */
	.faq-header, .faq-content{
		padding-inline: 25px;
	}
	.faq-content ul{
		padding-left: 25px;
	}

	/* Footer */
	.footer-inner {
		padding-block: 35px;
		padding-inline: 30px;
	}

}
@media (max-width: 600.98px){
	body.admin-bar .site-header.sticky-active{
		top: 0;
	}
}
@media (max-width: 575.98px){
	.header-buttons .button-group {
		display: none;
	}
	.btn-phone {
		width: 48px;
		height: 48px;
		display: block;
		border-radius: 50%;
		display: grid;
		place-items: center;
	}
	.btn-phone svg {
		width: 20px;
	}
	h1{
		font-size: 15px;
		text-align: center;
	}
	:is(h2, h3) br{
		display: none;
	}

	/* banner */
	.button-group .btn {
		width: 100%;
	}
	.banner-content {
		padding-bottom: 50px;
	}
	.call-out-content {
		grid-template-columns: repeat(1, 1fr);
		text-align: center;
	}

	/* Contact */
	.input-item.submit input{
		max-width: 100%;
	}

	/* footer */
	.social-icons {
		margin-inline: auto;
		margin-top: 25px;
	}
	.footer-logo {
		margin-inline: auto;
	}
	.footer-content {
		margin-top: 25px;
	}
	.footer-bottom {
		margin-top: 40px;
	}
	.site-footer {
		padding-bottom: 25px;
	}
}