/** General **/

html {
	overflow-x: hidden;
}

p:last-child {
    margin-bottom: 0;
}

img {
    max-width: 100%;
}

iframe {
	width: 100%;
}

body {
	font-family: "Quicksand", sans-serif;
  	font-optical-sizing: auto;
	overflow-x: hidden;
	letter-spacing: .5px;
	line-height: 1.8;
}

@media only screen and (max-width: 768px) {
	.xsmall {
		font-size: .675em;
	}
}

@media only screen and (min-width: 992px) {
	.rounded-lg-4 {
		border-radius: 1rem;
	}
}



.text-green {
	color: #00a443;
}

.text-grey {
	color: #959492;
}

.list-style-none {
	list-style: none;
}

.background-image {
	background-size: cover;
	background-repeat: no-repeat;
}

.background-center {
	background-position: center;
}

/** Sections **/

.section--white {
	background: #fff;
}

.section--black {
	background: #151515;
}

.section--green {
	background: #00402a;
}

.section--light-green {
	background: #aac576;
}

.section--grey {
	background: #f2f2f2;
}

.section--purple {
	background: #100030;
}

/** Header **/

.header-menu a {
	color: #333;
	text-decoration: none;
	position: relative;
}

.header-menu .current-menu-item a {
    color: #aac576;
}

.header-menu .current-menu-item a {
    color: #aac576;
}

.header-menu a:after {
    content: "";
    width: 30px;
    height: 1px;
    position: absolute;
    left: 50%;
    background: #333;
    transform: translate(-50%,0);
    bottom: -10px;
    opacity: 0;
    transition: ease-in-out 1s all;
}

.header-menu .current-menu-item a:after {
    background: #aac576;;
}

.header-menu a:hover:after {
    opacity: 1;
    transition: ease-in-out 1s all;
}

/** Socials **/

.social__item svg {
    fill: #fff;
    height: 30px;
}

/** Footer **/

.footer__bottom {
    border-top: 1px solid #065e40;
}

/** Buttons **/

.cta {
    display: inline-block;
    padding: 13px 60px 13px 30px;
    text-align: center;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    outline: 0;
    background-image: none;
    white-space: nowrap;
    outline: 0;
    border: 2px solid;
    border-radius: 100px;
    transition: all .25s ease-in;
	text-decoration: none;
	font-weight: 500;
}

.cta--primary {
	background: #aac576;
	border-color: #aac576;
	color: #fff;
	background-image: url(https://designhivedev.co.uk/altrenewables/wp-content/uploads/2025/05/button-arrow.svg);
	background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
}

.cta--primary:hover {
    background: rgba(255,255,255,0);
    color: #333;
	background-image: url(https://designhivedev.co.uk/altrenewables/wp-content/uploads/2025/05/button-arrow.svg);
	background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
}

.cta--secondary {
	background: #fff;
	border-color: #fff;
	color: #333;
	background-image: url(https://designhivedev.co.uk/altrenewables/wp-content/uploads/2025/05/button-arrow.svg);
	background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
}

.cta--secondary:hover {
	background: rgba(255,255,255,0);
	color: #fff;
	border-color: #fff;
	background-image: url(https://designhivedev.co.uk/altrenewables/wp-content/uploads/2025/05/button-arrow.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
}

.search-filter-input-button {
	font-size: 16px;
}

/** Services **/

@media only screen and (min-width: 1280px) {
	.service-item {
		aspect-ratio: 1/1;
	}
}

.homepage-services__background {
	background-size: cover;
	background-position: bottom;
	background-attachment: fixed;
}

.homepage-services__background:before {
    content: "";
    background: #00402a;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    opacity: .75;
}

/** Hero **/

.hero {
	background-image: url(https://designhivedev.co.uk/altrenewables/wp-content/uploads/2025/06/pexels-pixabay-356036.webp);
	background-size: cover;
	background-position: center;
}

/** Intro Block **/

.intro-block__img-wrapper {
    aspect-ratio: 66/100;
    overflow: hidden;
}

.intro-block__img-wrapper img {
    height: 100%;
    object-fit: cover;
}

.intro-block__img-wrapper--left {
    border-radius: 0 10px 10px 0;
}

.intro-block__img-wrapper--right {
    border-radius: 10px 0 0 10px;
}

.testimonial-carousel .slick-track,
.related-services .slick-track,
.service-carousel .slick-track {
	display: flex;
	gap: 30px;
}

.homepage-projects__grid {
	display: flex;
	flex-direction: column;
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}

@media only screen and (min-width: 980px) {
	.homepage-projects__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(3, 1fr);
	}
}




.homepage-projects__grid .grid-item img {
    object-fit: cover;
    height: 100%;
}

.homepage-projects__grid .grid-item__1 {
	grid-area: 1 / 1 / 3 / 3;
}

.homepage-projects__grid .grid-item__2,
.homepage-projects__grid .grid-item:nth-child(2) { grid-area: 1 / 3 / 2 / 4; }

.homepage-projects__grid .grid-item__3,
.homepage-projects__grid .grid-item:nth-child(3) { grid-area: 1 / 4 / 2 / 5; }

.homepage-projects__grid .grid-item__4,
.homepage-projects__grid .grid-item:nth-child(4) { grid-area: 2 / 3 / 4 / 5; }

.homepage-projects__grid .grid-item__5,
.homepage-projects__grid .grid-item:nth-child(5) { grid-area: 3 / 1 / 4 / 2; }

.homepage-projects__grid .grid-item__6,
.homepage-projects__grid .grid-item:nth-child(6) { grid-area: 3 / 2 / 4 / 3; }

.aspect-ratio-square {
    aspect-ratio: 1 / 1;
}

.page-title__border {
    border-bottom: 1px solid #eee;
}

/** Contact Form **/

.wpcf7-form input {
	height: 50px;
}

.wpcf7-form input,
.wpcf7-form textarea {
	padding: 15px;
}

.wpcf7-form label,
.wpcf7-form input,
.wpcf7-form textarea {
    width: 100%;
	border: 0;
}

.wpcf7-form textarea:focus-visible,
.wpcf7-form input:focus-visible {
    border: 2px solid #00402a;
    outline: 1px;
}

.wpcf7-submit {
    background: #fff;
    border-radius: 25px;
    color: #212529;
    font-weight: 600;
	line-height: 1;
}

.contact-form--light .wpcf7-form input, 
.contact-form--light .wpcf7-form textarea {
    border: 2px solid #00402a;
}

.contact-form--light .wpcf7-submit {
    background: #00402a;
    color: #fff;
}

.wpcf7-not-valid-tip {
    display: inline-block;
    background: #dc323260;
    padding: 5px 20px;
    margin-top: 5px;
    border-radius: 10px;
}

.wpcf7 form .wpcf7-response-output {
    margin: 0;
    padding: 10px 20px;
    border: 2px solid #00a0d2;
    border-radius: 10px;
    background: #ffb90055;
    border: 0;
}

.accordion-button:not(.collapsed) {
    background-color: #aac576;
    box-shadow: inset 0 calc(-1 * 1px) 0 #aac576;
	color: #fff;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem #aac576;
}

/** Service **/

.service__hero {
    height: 300px;
    overflow: hidden;
    background-image: url(https://designhivedev.co.uk/altrenewables/wp-content/uploads/2025/06/pexels-pixabay-356036.webp);
    background-size: cover;
    background-position: bottom;
}

@media only screen and (min-width: 768px) {
	.service__hero {
		    background-attachment: fixed;
	}
	
.about-values .background-image {
    max-height: 60vh;
    margin: auto;
	
}
	
}

.accordion-item {
	background: rgba(255,255,255,0);
}

.certification-item {
    border: 2px solid #eee;
}

.value-item {
    aspect-ratio: 1 / 1.25;
}


/** Post item **/

.post-item__image img {
	height: auto;
	width: 100%;
	aspect-ratio: 16 / 9;
    object-fit: cover;
}

.single-post__image img {
	height: auto;
}

.homepage-services .service-item__caption {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}

.testimonial-item__content {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/** Mobile Menu **/

.menu-toggle {
    gap: 5px;
    width: 40px;
}

.menu-toggle div {
    width: 30px;
    background: #aac576;
    height: 2px;
    border-radius: 5px;
}

.menu-toggle div:nth-child(3) {
    width: 20px;
}

.menu-toggle__label {
    font-size: 8px;
}

.mobile-menu {
    max-width: 80vw;
}

.mobile-menu .btn-close {
    opacity: 1;
}

.mobile-menu li a {
    text-decoration: none;
    color: #333;
}