/*!
Theme Name: htxroofingexte
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
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: htxroofingexte
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.

htxroofingexte 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/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
	--primary-color: #DE2E2E;
	--secondary-color: #212121;
	--font-color: #696969;
	--white: #ffffff;
	--dark-white: #F4F4F4;
	--black: #000000;
	--light-gray: #F7F7F7;
	--gray: #C5C5C5;
	--light-black: #2A2A2A;
	--padding-block: 150px;
	--font-69: 69.29px;
	--font-64: 64px;
	--font-54: 54px;
	--font-40: 40px;
	--font-32: 32px;
	--font-28: 28px;
	--font-24: 24px;
	--font-20: 20px;
	--font-18: 18px;
	--font-16: 16px;
	--space-24: 24px;
	--space-40: 40px;
	--space-60: 60px;
	--footer-logo: 122px;
	--header-logo: 86px;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
a,
nav,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
	list-style: none;
	outline: none;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html,
body {
	-webkit-text-size-adjust: none;
	height: 100%;
}

article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
	display: block;
}

iframe {
	vertical-align: top;
}

textarea:focus,
input:focus,
a,
div,
img {
	outline: none;
}

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*----------  General CSS  ----------*/
body {
	font-family: 'Poppins', sans-serif;
	font-size: var(--font-20);
	line-height: 1.5;
	color: var(--font-color);
	background: var(--white);
	font-weight: 400;
}

.container {
	max-width: 1460px;
	margin-inline: auto;
	padding-inline: 30px;
}

.section-padding {
	padding-block: var(--padding-block);
}

h1 {
	font-size: var(--font-69);
	color: var(--black);
}

h2 {
	font-size: var(--font-54);
	color: var(--black);
}

h3 {
	font-size: var(--font-40);
	color: var(--black);
}

h4 {
	font-size: var(--font-32);
	color: var(--black);
}

h5 {
	font-size: var(--font-28);
	color: var(--black);
}

h6 {
	font-size: var(--font-24);
	color: var(--black);
}

.sec-title {
	font-size: var(--font-54);
	line-height: 1;
	color: var(--black);
}

.mt-24 {
	margin-top: var(--space-24);
}

.mt-60 {
	margin-top: var(--space-60);
}

.text-center {
	text-align: center;
}

a {
	transition: all 0.4s ease-in-out;

	:hover {
		color: var(--primary-color);
	}
}

/*----------  Header Start  ----------*/
.header {
	background: var(--black);
	width: 100%;
	padding-block: var(--space-24);
}

.header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header-column {
	flex: 0 0 auto;
}

.custom-logo-link {
	display: block;
	width: var(--header-logo);
	height: var(--header-logo);

	img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

.header-link {
	color: var(--white);
	text-decoration: underline;
	text-underline-offset: 12px;

	a {
		color: var(--white);
		text-decoration: underline;
		font-weight: 700;

		&:hover {
			color: var(--primary-color);
			text-decoration-color: var(--white);
		}
	}
}


/*----------  Home Section Start  ----------*/
.hero-section {
	text-align: center;
	color: var(--white);
	min-height: 566px;
	display: flex;
	align-items: center;
	justify-content: center;

	.hero-title {
		font-weight: 700;
		font-size: var(--font-69);
		line-height: 1;
		text-transform: uppercase;
		color: var(--white);
	}

	.hero-sub-title {
		font-size: var(--font-40);
		line-height: 1;
		font-weight: 600;
		background-color: var(--primary-color);
		padding: 10px 20px;
		margin-top: 16px;
		width: fit-content;
		margin-inline: auto;
		color: var(--white);
	}

	.hero-description {
		margin-top: 20px;
		color: var(--light-gray);
		max-width: 948px;
		margin-inline: auto;
	}
}

.faq-section {
	.sec-title {
		font-size: var(--font-64);
	}

	.faq-item {
		padding: var(--space-24);
		background-color: var(--light-gray);
		border-radius: 12px;
		position: relative;
		cursor: pointer;

		&+.faq-item {
			margin-top: var(--space-24);
		}

		&::before {
			content: '';
			position: absolute;
			top: 24px;
			left: 0;
			bottom: 24px;
			background-color: var(--primary-color);
			width: 1px;
			border-radius: 1px;
		}
	}

	.faq-question {
		font-size: var(--font-24);
		font-weight: 600;
		color: var(--secondary-color);
		position: relative;
		line-height: 1.7;
		padding-right: 50px;

		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			display: block;
			width: 40px;
			height: 40px;
			background: url('/wp-content/uploads/2025/10/faq-close.svg') center/contain no-repeat;
			transition: transform 0.3s ease;
		}
	}

	.faq-item.active .faq-question::after {
		background: url('/wp-content/uploads/2025/10/faq-open.svg') center/contain no-repeat;
	}

	.faq-answer {
		font-size: var(--font-18);
		margin-top: 16px;
		padding-right: 50px;
	}
}


.review-section {
	background-color: var(--dark-white);

	.sec-title {
		max-width: 850px;
		margin-inline: auto;
	}

	.review-slider {
		margin-inline-start: -12px !important;
		position: relative;
	}

	.review-slide {
		padding-inline: 12px;
	}

	.review-card {
		background-color: var(--white);
		padding: var(--space-24);
		border-radius: 15px;
		border: 1px solid #E8E8E8;
		height: 100%;
	}

	.review-header {
		display: flex;
		align-items: center;
		gap: var(--space-24);
		padding-right: 37px;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			display: block;
			width: 37px;
			height: 37px;
			background: url('/wp-content/uploads/2025/10/google.svg') center/contain no-repeat;
		}
	}

	.review-author-photo {
		flex: 0 0 auto;
		width: 75px;
		height: 75px;
		border-radius: 50%;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.review-author {
		font-size: var(--font-16);
		line-height: 100%;
		margin-bottom: 12px;
		color: var(--black);
		font-weight: 700;
	}

	.review-stars {
		height: 21px;
		width: auto;
		object-fit: contain;
	}

	.review-text {
		font-size: var(--font-16);
		margin-top: var(--space-40);
	}

	.slick-dots {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 9px;
		margin-top: var(--space-60);

		button {
			width: 12px;
			height: 12px;
			background-color: #D9D9D9;
			border-radius: 12px;
			transition: all 0.3s ease;
			border: none;
			font-size: 0;
			display: block;
		}

		.slick-active button {
			background-color: var(--secondary-color);
			width: 40px;
		}
	}

	.slick-arrow {
		width: 40px;
		height: 40px;
		font-size: 0;
		border-radius: 50%;
		background-color: var(--primary-color);
		position: absolute;
		top: 41%;
		transform: translateY(-50%);
		border: none;
		cursor: pointer;
		transition: all 0.4s ease-in-out;

		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
			width: 12px;
			height: 12px;
			background: url('/wp-content/uploads/2025/10/Arrow.svg') center/contain no-repeat;
		}

		&:hover {
			background-color: var(--secondary-color);
		}
	}

	.slick-disabled {
		background-color: #C5C5C5;
		cursor: not-allowed;
		pointer-events: none;
	}

	.slick-prev {
		left: -68px;
	}

	.slick-next {
		right: -68px;
		transform: translateY(-50%) rotate(180deg);
	}

	.slick-track {
		display: flex !important;
	}

	.slick-slide {
		height: inherit !important;
	}
}

/*----------  Footer  ----------*/
.footer {
	padding-block: 32px;
	background-color: var(--light-black);
	color: var(--white);

	.footer-row {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 42px;
	}

	.footer-col {
		flex: 0 0 auto;
	}

	.footer-logo {
		display: block;
		width: var(--footer-logo);
		height: var(--footer-logo);

		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}

	.footer-title {
		font-weight: 700;
	}

	.footer-text {
		margin-top: 8px;
		font-size: var(--font-18);
		color: var(--light-gray);

		a {
			color: var(--light-gray);

			&:hover {
				color: var(--primary-color);
			}
		}
	}
}

@media(max-width:1599px) {
	.review-section {
		.slick-prev {
			left: -45px;
		}

		.slick-next {
			right: -45px;
		}

		.review-header {
			gap: 16px;
		}
	}
}

@media(max-width:1599px) and (min-width:992px) {
	.review-section {
		.container {
			width: calc(100% - 110px);
		}
	}
}

/* @media(max-width:1420px) {
	.review-section {
		.slick-arrow {
			position: absolute;
			top: inherit;
			transform: translateY(0);
			bottom: -14px
		}

		.slick-prev {
			left: calc(50% - 170px);
		}

		.slick-next {
			right: calc(50% - 170px);
			transform: rotate(180deg) !important;
		}
	}
} */

@media(max-width:1299px) {
	.review-section {
		.review-slider {
			margin-inline-start: -7px !important;
		}

		.review-slide {
			padding-inline: 7px;
		}

		.review-author-photo {
			width: 55px;
			height: 55px;
		}
	}
}

@media(max-width:1199px) {
	:root {
		--padding-block: 100px;
		--font-69: 60px;
		--font-64: 54px;
		--font-54: 44px;
		--font-40: 34px;
		--font-32: 30px;
		--font-28: 26px;
		--font-24: 22px;
		--font-20: 20px;
		--font-18: 18px;
		--font-16: 16px;
		--space-24: 22px;
		--space-40: 30px;
		--space-60: 40px;
		--footer-logo: 122px;
		--header-logo: 86px;
	}
}

@media(max-width:1024px) {
	:root {
		--padding-block: 80px;
		--font-69: 56px;
		--font-64: 50px;
		--font-54: 40px;
		--font-40: 34px;
		--font-32: 30px;
		--font-28: 26px;
		--font-24: 22px;
		--font-20: 20px;
		--font-18: 18px;
		--font-16: 16px;
		--space-24: 22px;
		--space-40: 30px;
		--space-60: 40px;
		--footer-logo: 122px;
		--header-logo: 86px;
	}
}

@media(max-width:991px) {
	:root {
		--padding-block: 60px;
		--font-69: 50px;
		--font-64: 46px;
		--font-54: 38px;
		--font-40: 32px;
		--font-32: 28px;
		--font-28: 24px;
		--font-24: 20px;
		--font-20: 18px;
		--font-18: 16px;
		--font-16: 14px;
		--space-24: 20px;
		--space-40: 25px;
		--space-60: 35px;
		--footer-logo: 122px;
		--header-logo: 86px;
	}

	.review-section {
		.review-header {
			gap: 16px;
			padding-right: 37px;
			position: relative;

			&::after {
				width: 30px;
				height: 30px;
			}
		}

		.review-author {
			margin-bottom: 10px;
		}
	}

	.footer {
		padding-block: 24px;

		.footer-row {
			gap: 30px;
		}
	}
}

@media(max-width:767px) {
	:root {
		--padding-block: 40px;
		--font-69: 46px;
		--font-64: 40px;
		--font-54: 34px;
		--font-40: 30px;
		--font-32: 26px;
		--font-28: 22px;
		--font-24: 18px;
		--font-20: 18px;
		--font-18: 16px;
		--font-16: 14px;
		--space-24: 20px;
		--space-40: 25px;
		--space-60: 35px;
		--footer-logo: 122px;
		--header-logo: 86px;
	}

	.hero-section {
		min-height: inherit;
	}

	.faq-section {
		.faq-item {
			&::before {
				top: 8px;
				bottom: 8px;
			}
		}

		.faq-question {
			&::after {
				width: 30px;
				height: 30px;
			}
		}
	}
}

@media(max-width:568px) {
	:root {
		--padding-block: 40px;
		--font-69: 40px;
		--font-64: 34px;
		--font-54: 32px;
		--font-40: 28px;
		--font-32: 26px;
		--font-28: 22px;
		--font-24: 18px;
		--font-20: 18px;
		--font-18: 16px;
		--font-16: 14px;
		--space-24: 20px;
		--space-40: 20px;
		--space-60: 30px;
		--footer-logo: 100px;
		--header-logo: 70px;
	}

	.container {
		padding-inline: 15px;
	}

	.header-row {
		flex-direction: column;
		gap: 20px;
	}

	.header-link {
		padding-bottom: 6px;
	}

	.hero-section {
		.hero-sub-title {
			font-size: 25px;
			padding-inline: 10px;
		}
	}

	.footer {
		.footer-row {
			flex-direction: column;
			gap: 20px;
			text-align: center;
		}
	}
}