/***
Theme Name: thecrazygoodco
Author: thecrazygoodco
Version: 1.0.0
Description: thecrazygoodco.
Author URL: #
License: GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, responsive-layout, accessibility-ready
Text Domain:  thecrazygoodco
***/
/* Custom Colors - Combined from multiple blocks */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
	--cg-yellow: #EBCB4F; /* Approximate yellow from image */
	--cg-dark: #1F1F1F;   /* Approximate dark grey from image */
	--cg-light-text: #B8B8B8; /* Light text color for dark background */
	--cg-border-grey: #B8B8B8;
	--cg-text-grey: #373737; /* Bootstrap's text-muted */
	--star-color: #ffc107; /* Bootstrap's warning yellow */
}
body {
	font-family: "Montserrat", sans-serif; /* Or your preferred font */
}
.col-lg-6.col-md-6 {
/*     padding: 0; */
}

a.btn.btn-cg-yellow {
	font-family: Montserrat;
	font-weight: 600;
	font-size: 27px;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	color: #000;
	text-decoration: none;
	padding: 21px 40px;
}
a.btn.btn-warning.contact-btn{
	font-family: Montserrat;
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	border: 1.6px solid #f7c325;
	padding: 10px 25px;
}
.container-fluid.bg-white.top-bar .row.align-items-center{
/* 	gap:5px; */
}
a.btn.btn-outline-dark.contact-btn.me-2 {
	background: transparent;
	font-family: Montserrat;
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	border: 1.6px solid #292929;
	padding: 10px 25px;
}
.container.text-center.maxwidth1075 {
	max-width: 1050px;
	margin: 0 auto;
}
.container.widthsetup {
	max-width: 500px;
}
.my-5.even.pt-5.pb-1 {
	background: #f5f5f5;
}
.my-5.even.pt-5.pb-1 .section-spacer{
	flex-direction: row-reverse !important;
}
a.btn.btn-outline-dark.contact-btn.me-2 {
	background: transparent;
	border: 1px solid;
}
.contentdiv strong {
	float: left;
	margin-right: 3px;
}
/* --- Styles from Block 1: Header/Hero --- */
.hero-section {
	display: flex;
	flex-wrap: wrap; /* Allow wrapping on smaller screens */
	min-height: 60vh; /* Adjust height as needed */
}

.hero-text-column {
	color: #333; /* Adjust text color if needed */
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-size:cover;
}

.hero-image-column {
	background-size: cover !important;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 300px; /* Ensure image is visible on small screens when stacked */
}

.top-bar {
	padding-top: 18px;
	padding-bottom: 18px;
   
}
.top-bar .col-lg-6{
	padding:0;
}

.logo-img {
	max-height: 60px; /* Adjust logo size */
}
.maxwidth1075 .lead {
    font-weight: 700;
}
.maxwidth1075 .lead.mb-0 p {
    margin: 0;
}

.contact-btn {
	border-radius: 50px; /* Rounded corners for buttons */
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	font-weight: 500;
}
.btn-outline-dark {
	border-color: #ccc; /* Lighter border for email button */
	color: #333;
}
.btn-outline-dark:hover {
	background-color: #eee;
	color: #333;
}
.btn-warning {
	background-color: #f7c325; /* Match yellow color */
	border-color: #f7c325;
	color: #333;
}
.btn-warning:hover {
	background-color: #e0ae1f; /* Slightly darker yellow on hover */
	border-color: #e0ae1f;
	color: #333;
}

/* Responsive for Header/Hero */
@media (max-width: 991.98px) {
	.hero-text-column, .hero-image-column {
		flex-basis: 100%;
	}
	.hero-text-column {
		order: 1; /* Text first */
	}
	.hero-image-column {
		order: 0; /* Image second (visually appears above text when stacked) */
		min-height: 40vh; /* Adjust height for mobile view */
	}
	.top-bar .col-md-6 {
		text-align: center !important; /* Center logo and buttons on smaller screens */
		margin-bottom: 0.5rem;
	}
	.top-bar .text-end {
		text-align: center !important;
	}
}

/* --- Styles from Block 2: Services --- */
/* Optional: Add some extra vertical spacing if needed */
.section-spacer { margin-bottom: 3rem; }

/* Style for the logo container to match the image */
.logo-container {
	background-color: #f8f9fa; /* Bootstrap's default bg-light */
	border-radius: 0.75rem; /* Slightly more rounded corners */
	padding: 1.5rem; /* Adjust padding as needed */
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%; /* Ensure container takes full column height for alignment */
	min-height: 200px; /* Minimum height for consistency */
}
.logo-container img {
	max-width: 100%;
	max-height: 150px; /* Adjust max height of the logo if needed */
	height: auto;
}

/* --- Styles from Block 3: CTA --- */
.bg-cg-yellow {
	background-color: var(--cg-yellow);
	/* If you have the SVG/image for the bottom curve, apply it here */
	/* background-image: url('path/to/yellow-curve.svg'); */
	/* background-repeat: no-repeat; */
	/* background-position: bottom center; */
	/* background-size: 100% auto; */
	/* padding-bottom: 50px; Adjust if using curve image */
}

.bg-cg-dark {
	background-color: var(--cg-dark);
	color: var(--cg-light-text);
}

/* Custom Button Style for CTA */
.btn-cg-yellow {
	background-color: var(--cg-yellow);
	color: var(--cg-dark); /* Dark text on yellow button */
	border: none;
	font-weight: bold;
	padding: 0.6rem 1.5rem; /* Adjust padding */
	border-radius: 50rem; /* Added from block 3 */
}

.btn-cg-yellow:hover,
.btn-cg-yellow:focus {
	background-color: #e0c043; /* Slightly darker yellow on hover */
	color: var(--cg-dark);
}

/* Links within dark section */
.bg-cg-dark a {
	color: var(--cg-light-text);
	font-weight: bold;
	text-decoration: underline; /* Optional: add underline like phone# */
}
.bg-cg-dark a:hover {
	color: #ffffff; /* Brighter on hover */
}
.bg-cg-dark a.tel-link {
	text-decoration: none; /* Remove underline specifically for tel link if needed */
}

/* --- Styles from Block 4: Testimonials/Footer --- */
/* Testimonial Section */
.testimonials-section {
	padding-top: 4rem;
	padding-bottom: 4rem;
	position: relative; /* For slider navigation absolute positioning */
	background-color: #f8f9fa; /* Light background for contrast */
}

.testimonial-card {
	border: 1px solid var(--cg-border-grey);
	border-radius: 0.75rem; /* Rounded corners */
	padding: 1.5rem;
	height: 100%; /* Ensure cards have same height for alignment */
	display: flex;
	flex-direction: column;
	background-color: #fff; /* White background for card */
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.testimonial-header {
	display: flex;
	align-items: flex-start; /* Align items to top */
	margin-bottom: 1rem;
	gap: 0.75rem; /* Space between avatar and text */
}

.testimonial-avatar {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	object-fit: cover;
}

.testimonial-source {
	font-size: 0.8rem;
	color: var(--cg-text-grey);
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.25rem;
	border: 1px solid var(--cg-border-grey);
	padding: 0.1rem 0.4rem;
	border-radius: 0.25rem;
}
.testimonial-source img { /* Google logo */
	height: 12px;
	width: 12px;
}

.testimonial-rating .bi-star-fill {
	color: var(--star-color);
	font-size: 0.9rem;
}
.testimonial-rating .bi-star { /* For empty stars if needed */
	color: var(--cg-border-grey);
	font-size: 0.9rem;
}


.testimonial-body {
	font-size: 0.95rem;
	color: var(--cg-text-grey);
	line-height: 1.5;
	flex-grow: 1; /* Push button to bottom */
	margin-bottom: 1.5rem;
	/* Basic text truncation */
	display: -webkit-box;
	-webkit-line-clamp: 4; /* Limit to 4 lines */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.btn-see-more {
	border: 1px solid var(--cg-dark);
	color: var(--cg-dark);
	border-radius: 50rem; /* Pill shape */
	padding: 0.5rem 1.5rem;
	font-weight: 500;
	background-color: transparent;
	align-self: flex-start; /* Align button left */
	margin-top: auto; /* Pushes to bottom if content is short */
}
.btn-see-more:hover {
	background-color: var(--cg-dark);
	color: #fff;
}

/* Swiper Navigation Buttons */
.swiper-button-prev,
.swiper-button-next {
	position: absolute;
	top: 25px; /* Position above the slider */
	transform: translateY(0%);
	width: 35px;
	height: 35px;
	background-color: #fff;
	border: 1px solid var(--cg-border-grey);
	border-radius: 50%;
	color: var(--cg-dark) !important; /* Override default Swiper color */
	z-index: 10; /* Ensure they are clickable */
}
.swiper-button-prev::after,
.swiper-button-next::after {
	font-size: 1rem !important; /* Smaller arrows */
	font-weight: bold;
}
.swiper-button-prev {
	right: 50px !important; /* Position right */
	left: auto !important;
}
.swiper-button-next {
	right: 10px !important; /* Position right */
}
/* Hide default Swiper navigation on smaller screens if desired */
@media (max-width: 767px) {
	.swiper-button-prev,
	.swiper-button-next {
		display: none; /* Hide arrows on mobile */
	}
	/* Center testimonial heading on mobile */
	.testimonials-section .d-flex.justify-content-between {
		justify-content: center !important;
	}
}

/* Footer Section */
.footer-subscribe {
	background-color: var(--cg-yellow); /* Re-using var(--cg-yellow) */
	padding: 3rem 0;
	position: relative;
}

.footer-subscribe .form-control {
	border-radius: 50rem; /* Pill shape */
	padding: 1rem 1.5rem; /* Larger padding */
	border: 1px solid var(--cg-dark);
}
.footer-subscribe .input-group {
	border-radius: 50rem;
	border: 1px solid var(--cg-dark);
	overflow: hidden; /* Clip button corner */
	background-color: #fff; /* Ensure input bg is white */
}
.footer-subscribe .form-control:focus {
	box-shadow: none;
	border-color: var(--cg-dark);
}

.footer-subscribe .btn-subscribe {
	background-color: var(--cg-dark);
	color: #fff;
	border-radius: 50rem; /* Pill shape */
	padding: 0.8rem 1.5rem 0.8rem 2rem; /* Adjust padding */
	font-weight: bold;
	margin: 4px; /* Creates gap inside input-group */
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border: none; /* Ensure no default border */
}
.footer-subscribe .btn-subscribe:hover {
	background-color: #000; /* Darker on hover */
}
.footer-subscribe .form-control {
	border: none; /* Remove border from input itself */
}

.footer-bottom {
	background-color: var(--cg-dark);
	color: #a0a0a0; /* Lighter grey */
	padding: 1.5rem 0;
	font-size: 0.9rem;
}

.footer-socials a {
	color: #1f1f1f;
	background-color: #ffffff; /* Circle background */
	width: 35px;
	height: 35px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.footer-socials a:hover {
	background-color: var(--cg-yellow); /* Re-using var(--cg-yellow) */
	color: var(--cg-dark);
}