/* 
Theme Name: Concrete Development
Theme URI: https://www.altagency.co.uk/ 
Author: ALT Agency 
Author URI: https://www.altagency.co.uk/ 
Description: Concrete Development theme 
Version: 1.0.0 
License: GNU General Public License v2 or later License 
URI: http://www.gnu.org/licenses/gpl-2.0.html 
Text Domain: concrete_development 
Tags: 
*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #373737;
    line-height: 1.2;
}

* {
    line-height: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #1E1E1E;
}

p,
a {
    font-family: 'Inter', sans-serif;
}

p {
    margin-bottom: 15px;
}

a {
    outline: none;
    color: #356E5D;
}

a:hover {
    color: #356E5D;
    outline: none;
    text-decoration: unset;
}

button {
    outline: none;
}

br {
    line-height: 0;
}

b,
strong {
    font-weight: 700;
}

h1 {
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.2;
}

h2 {
    font-size: clamp(28px, 3.5vw, 48px);
    line-height: 1.2;
}

h3 {
    font-size: clamp(22px, 2.5vw, 35px);
    line-height: 1.3;
}

h4 {
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.4;
}

p {
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.6;
}

@media (min-width: 1499px) {
    .container {
        max-width: 1470px;
    }
}

/*--------------------------------------------------------------
# Page Banner
--------------------------------------------------------------*/
.section-page-banner {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

.banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.banner-img,
.banner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-content {
    position: relative;
    z-index: 11;
    max-width: 708px;
}

.banner-breadcrumbs {
    margin-bottom: 20px;
    font-size: 14px;
}

.banner-breadcrumbs a {
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
}

.banner-breadcrumbs a:hover {
    opacity: 1;
}

.banner-title {
    margin-bottom: 20px;
    font-weight: 800;
    color: #fff;
}

.banner-description p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
    opacity: 0.9;
}

@media (max-width: 1199px) {
    .section-page-banner {
        min-height: 70vh;
    }
}

@media (max-width: 767px) {
    .section-page-banner {
        min-height: 60vh;
    }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
    padding: 90px 0;
}

.section-title {
    margin-bottom: 50px;
    font-weight: 700;
    color: #1E1E1E;
}

.text-green,
.section-title span {
    color: #356E5D;
}

/*--------------------------------------------------------------
# Home Hero
--------------------------------------------------------------*/
.section-home-hero {
    position: relative;
    padding: 81px 0 117px 0;
    color: #fff;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-bg img,
.hero-bg .hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content {
    position: relative;
    z-index: 3;
}

.hero-tagline {
    display: inline-flex;
    align-items: center;
    background: #E85530;
    padding: 4px 11px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    letter-spacing: 8%;
    position: relative;
    border-radius: 8px;
    color: #fff;
}

.hero-tagline::before {
    content: '';
    width: 36px;
    height: 3px;
    background: #fff;
    margin-right: 15px;
    display: block;
}

.hero-title {
    margin-bottom: 30px;
    font-weight: 800;
    color: #fff;
}

.hero-description {
    margin-bottom: 40px;
    max-width: 620px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
}

.btn-primary {
    background: #fff;
    color: #356E5D;
    padding: 15px 35px;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-outline {
    border: 2px solid #fff;
    color: #fff;
    padding: 15px 35px;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s;
    display: inline-block;
}

.btn-primary:hover,
.btn-outline:hover {
    background: #356E5D;
    color: #fff;
    border-color: #356E5D;
}

.btn-primary:hover svg path {
    fill: #fff;
}

.btnRow {
    margin-top: clamp(1.563rem, 0.1237rem + 4.0051vw, 3.125rem);
}

.hero-form-card {
    position: relative;
    z-index: 2;
    background: #346d5fb5;
    padding: 32px 40px;
    border-radius: 16px;
    color: #fff;
    border: none;
    box-shadow: 0 4px 44px 10px rgba(0, 255, 179, 0.05);
    max-width: 466px;
    margin: 40px auto 0 auto;
}

.form-wrapper br {
    display: none;
}

.form-title {
    font-weight: 700;
    margin-bottom: 5px;
    color: #fff;
    line-height: 1.1;
    font-family: 'Montserrat', sans-serif;
}

.form-subtitle {
    font-size: 15px;
    margin-bottom: 24px;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.hero-form-card label {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    display: block;
    text-transform: none;
}

.hero-form-card input,
.hero-form-card textarea,
.hero-form-card select {
    width: 100%;
    background: #F7F7F7;
    border: none;
    padding: 15.5px 16px;
    margin-top: 8px;
    font-size: 14px;
    color: #969696;
}

.hero-form-card textarea {
    height: 120px;
}

.hero-form-card select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5' fill='none'%3E%3Cpath d='M4.24153 4.77178L0 0H8.35059L4.24153 4.77178Z' fill='%23356E5D'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
}

/* CF7 Buttons Styling */
.form-buttons {
    margin-top: 10px;
}

.form-buttons p {
    display: flex;
    align-items: center;
}

.hero-form-card .wpcf7-submit {
    background: #3B930A !important;
    color: #fff !important;
    border: none !important;
    padding: 15px 10px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    width: 100% !important;
    font-size: 16px !important;
    cursor: pointer;
    transition: 0.3s;
    margin-bottom: 15px;
    font-family: 'Inter';
    max-width: 180px;
}

.hero-form-card .whatsapp-button {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    transition: 0.3s;
    background-color: #25C55E;
    padding: 17px 10px;
    font-family: 'Inter';
    width: 193px;
    text-align: center;
    border-radius: 50px;
}

.hero-form-card .whatsapp-button::before {
    content: '';
    display: inline-block;
    width: 21px;
    height: 21px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.2397 12.4194C14.9863 12.2796 13.7401 11.6072 13.5072 11.5122C13.2744 11.4172 13.103 11.3669 12.9205 11.6202C12.7398 11.8717 12.2219 12.4343 12.0654 12.6019C11.9071 12.7696 11.7562 12.7845 11.5029 12.6448C11.2495 12.505 10.428 12.2014 9.47425 11.2849C8.73099 10.5714 8.2448 9.7071 8.10509 9.44259C7.96351 9.17807 8.10509 9.04394 8.23735 8.91914C8.35843 8.80737 8.50745 8.62667 8.64158 8.48138C8.7757 8.33608 8.82227 8.2299 8.91541 8.06038C9.00855 7.89086 8.9713 7.73998 8.90982 7.60772C8.85021 7.47546 8.38078 6.18639 8.18519 5.66108C7.98959 5.13577 7.77165 5.21401 7.62076 5.20842C7.46987 5.20283 7.29849 5.17489 7.12711 5.1693C6.95387 5.16371 6.67259 5.21773 6.4267 5.46735C6.1808 5.71697 5.48784 6.31679 5.44127 7.58909C5.39284 8.85953 6.27395 10.1225 6.39503 10.2995C6.51797 10.4764 8.07342 13.2315 10.6609 14.3641C13.2483 15.4967 13.2632 15.1521 13.7364 15.126C14.2114 15.0999 15.2881 14.5579 15.5265 13.9636C15.765 13.3694 15.7836 12.8515 15.724 12.7416C15.6625 12.6317 15.493 12.5609 15.2397 12.4212V12.4194ZM10.4932 18.5443C8.78315 18.5443 7.18859 18.0301 5.85854 17.1509L2.62097 18.1866L3.67346 15.0571C2.66568 13.6674 2.06958 11.9611 2.06958 10.1169C2.06958 5.47107 5.84923 1.69143 10.4932 1.69143C15.1372 1.69143 18.9187 5.47107 18.9187 10.1169C18.9187 14.7628 15.1391 18.5424 10.4932 18.5424V18.5443ZM10.4951 0C4.90664 0 0.374425 4.53035 0.374425 10.1206C0.374425 12.0338 0.905326 13.8202 1.82742 15.3458L0 20.7759L5.60333 18.982C7.0526 19.783 8.72168 20.2413 10.4951 20.2413C16.0854 20.2413 20.6157 15.7091 20.6157 10.1206C20.6157 4.53222 16.0854 0 10.4951 0Z' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.wpcf7-spinner {
    visibility: hidden;
    display: inline-block;
    background-color: #23282d;
    opacity: 0.75;
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 100%;
    padding: 0;
    position: relative;
    margin: 0;
}

.hero-form-card .wpcf7-submit:hover {
    background: #3a7d0b !important;
}

.hero-form-card .whatsapp-button:hover {
    color: #fff;
}

/*--------------------------------------------------------------
# Contact Hero
--------------------------------------------------------------*/
.section-contact-hero {
    position: relative;
    padding: 61px 0 63px 0;
    color: #fff;
    overflow: hidden;
}

.section-contact-hero .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.section-contact-hero .hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.contact-hero-info {
    position: relative;
    z-index: 3;
    max-width: 708px;
}

.contact-hero-info .hero-title {
    font-weight: 800;
    margin-bottom: 40px;
}

.contact-details {
    margin-bottom: 30px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 600;
}

.contact-item a {
    color: #fff;
    text-decoration: none;
}

.contact-item.address-item {
    align-items: flex-start;
    font-size: 17px;
    font-weight: 400;
    max-width: 450px;
    font-family: 'Inter';
    line-height: 30px;
    color: #fff;
}

.contact-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    opacity: 0.7;
}

.registration-details {
    margin-bottom: 50px;
}

.registration-details p {
    margin-bottom: 0;
}

.section-contact-hero .whatsapp-button {
    background-color: #25D366;
    color: #fff;
    padding: 15px 28px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.section-contact-hero .whatsapp-button::before {
    content: '';
    display: inline-block;
    width: 21px;
    height: 21px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.2397 12.4194C14.9863 12.2796 13.7401 11.6072 13.5072 11.5122C13.2744 11.4172 13.103 11.3669 12.9205 11.6202C12.7398 11.8717 12.2219 12.4343 12.0654 12.6019C11.9071 12.7696 11.7562 12.7845 11.5029 12.6448C11.2495 12.505 10.428 12.2014 9.47425 11.2849C8.73099 10.5714 8.2448 9.7071 8.10509 9.44259C7.96351 9.17807 8.10509 9.04394 8.23735 8.91914C8.35843 8.80737 8.50745 8.62667 8.64158 8.48138C8.7757 8.33608 8.82227 8.2299 8.91541 8.06038C9.00855 7.89086 8.9713 7.73998 8.90982 7.60772C8.85021 7.47546 8.38078 6.18639 8.18519 5.66108C7.98959 5.13577 7.77165 5.21401 7.62076 5.20842C7.46987 5.20283 7.29849 5.17489 7.12711 5.1693C6.95387 5.16371 6.67259 5.21773 6.4267 5.46735C6.1808 5.71697 5.48784 6.31679 5.44127 7.58909C5.39284 8.85953 6.27395 10.1225 6.39503 10.2995C6.51797 10.4764 8.07342 13.2315 10.6609 14.3641C13.2483 15.4967 13.2632 15.1521 13.7364 15.126C14.2114 15.0999 15.2881 14.5579 15.5265 13.9636C15.765 13.3694 15.7836 12.8515 15.724 12.7416C15.6625 12.6317 15.493 12.5609 15.2397 12.4212V12.4194ZM10.4932 18.5443C8.78315 18.5443 7.18859 18.0301 5.85854 17.1509L2.62097 18.1866L3.67346 15.0571C2.66568 13.6674 2.06958 11.9611 2.06958 10.1169C2.06958 5.47107 5.84923 1.69143 10.4932 1.69143C15.1372 1.69143 18.9187 5.47107 18.9187 10.1169C18.9187 14.7628 15.1391 18.5424 10.4932 18.5424V18.5443ZM10.4951 0C4.90664 0 0.374425 4.53035 0.374425 10.1206C0.374425 12.0338 0.905326 13.8202 1.82742 15.3458L0 20.7759L5.60333 18.982C7.0526 19.783 8.72168 20.2413 10.4951 20.2413C16.0854 20.2413 20.6157 15.7091 20.6157 10.1206C20.6157 4.53222 16.0854 0 10.4951 0Z' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.section-contact-hero .hero-form-card {
    max-width: 100%;
    display: flow-root;
    padding-bottom: 32px;
}

.section-contact-hero .hero-form-card .wpcf7-submit {
    float: right;
    max-width: 250px;
    margin-bottom: 0;
    cursor: pointer;
}

@media (max-width: 991px) {
    .section-contact-hero .hero-form-card {
        margin-top: 50px;
    }

}

.section-stats-bar {
    position: relative;
    padding: 56px 0;
    overflow: hidden;
}

.section-bg-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.section-bg-texture img {
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.section-stats-bar .container {
    position: relative;
    z-index: 2;
}

.stats-bar-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 80px;
}

.stat-bar-item {
    text-align: center;
}

.stat-top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    height: 77px;
}

.stat-icon img {
    width: 100%;
    height: auto;
}

.stat-value {
    font-size: 80px;
    font-weight: 400;
    color: #356E5D;
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 2px 4px 0px #FFFFFF;
    letter-spacing: 5%;
}

.stat-label {
    font-weight: 800;
    color: #333;
    margin-bottom: 5px;
    text-transform: none;
    /* Based on image */
}

.stat-subtitle {
    color: #373737;
    margin-bottom: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 767px) {
    .stats-bar-inner {
        display: block;
    }

    .stat-value {
        font-size: 40px;
    }

    .stat-bar-item {
        text-align: center;
        margin: 20px 0;
    }

    .stat-icon img {
        width: 100%;
        height: auto;
        max-width: 80px;
    }

    .hero-buttons {
        display: flex;
        gap: 20px;
        margin-bottom: 50px;
        flex-direction: column;
        text-align: center;
    }

    .form-buttons p {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
}

/*--------------------------------------------------------------
# Feature Circles
--------------------------------------------------------------*/
.section-feature-circles {
    position: relative;
    background: #fff;
    overflow: hidden;
    padding: 120px 0 73px 0;
}

.section-feature-circles .container {
    position: relative;
    z-index: 2;
}

.section-feature-circles .section-bg-texture img {
    opacity: 0.3;
}

/* Specific opacity for this section's texture if needed */


.feature-image-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto 35px;
}

.feature-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 103%;
    height: 103%;
    background: #356E5D;
    border-radius: 50%;
    z-index: 1;
}

.feature-image-wrapper img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

.feature-item-title {
    font-weight: 700;
    margin-bottom: 15px;
    color: #1E1E1E;
    font-size: 31px;
    text-align: left;
    max-width: 240px;
}

.feature-item-desc {
    color: #373737;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
    text-align: left;
    max-width: 260px;
}

.section-feature-circles .col-md-3 {
    -ms-flex: 0 0 23.4%;
    flex: 0 0 23.4%;
    max-width: 23.4%;
    padding: 0px 37px;
}

/*--------------------------------------------------------------
# google reviews
--------------------------------------------------------------*/
.section-reviews {
    background: #356E5D;
    color: #fff;
    padding: 60px 0;
}

.section-reviews .section-title {
    color: #fff;
}

section.section-reviews.bg-light-gray .section-title {
    color: #1E1E1E;
}

.btn-review-google {
    display: inline-block;
    padding: 12px 30px;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}

section.section-reviews.bg-light-gray .btn-review-google {
    border: 2px solid #356E5D;
    color: #356E5D;
}

.btn-review-google:hover {
    background: #fff;
    color: #356E5D;
    text-decoration: none;
}

/*--------------------------------------------------------------
# FAQ Section
--------------------------------------------------------------*/
.section-faq {
    background: #fff;
    padding: 55px 0;
}

.faq-wrapper {
    max-width: 1093px;
    margin: 0 auto;
}

.section-faq .text-green {
    color: #356E5D;
}

.faq-q-prefix {
    color: #356E5D;
    font-size: 35px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    padding-right: 15px;
}

.faq-question-text {
    font-size: 35px;
    font-weight: 700;
    color: #000;
    font-family: 'Montserrat', sans-serif;
    flex-grow: 1;
    text-align: left;
}

.accordion-button {
    background: transparent !important;
    box-shadow: none !important;
    padding: 16px 0;
    border: none;
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.accordion-button::after {
    display: none;
    /* Hide default icon */
}

.faq-icon-toggle {
    width: 30px;
    height: 30px;
    border: 2px solid #356E5D;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.faq-icon-toggle::before,
.faq-icon-toggle::after {
    content: '';
    position: absolute;
    background: #356E5D;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s;
}

button.accordion-button {
    gap: 16px;
}

/* Horizontal line */
.faq-icon-toggle::before {
    width: 14px;
    height: 2px;
}

/* Vertical line */
.faq-icon-toggle::after {
    width: 2px;
    height: 14px;
}

.accordion-button:not(.collapsed) .faq-icon-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.faq-a-prefix {
    color: #ccc;
    font-size: 35px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    padding-right: 15px;
}

.faq-answer-content {
    font-size: 17px;
    line-height: 1.6;
    color: #000000;
}

button.accordion-button:focus {
    outline: 1px dotted;
    outline: unset;
}

.btn-outlined-green {
    display: inline-block;
    padding: 12px 35px;
    border: 2px solid #356E5D;
    border-radius: 50px;
    color: #356E5D;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.faq-footer.text-center {
    margin-top: 54px;
}

.btn-outlined-green:hover {
    background: #356E5D;
    color: #fff;
}

@media (max-width: 991px) {
    .faq-q-prefix {
        font-size: 20px;
    }

    .faq-a-prefix {
        font-size: 20px;
    }

    .faq-question-text {
        font-size: 20px;
    }
}

/*--------------------------------------------------------------
# Services Grid
--------------------------------------------------------------*/
.section-services-grid {
    background: #fff;
    padding: 72px 0 68px 0;
}

.services-desc {
    max-width: 1196px;
    margin: 0 auto;
}

h2.section-title.feature-title {
    max-width: 1195px;
    margin-left: auto;
    margin-right: auto;
}

.services-header .hero-tagline {
    margin-bottom: 10px;
}

.services-header .section-title {
    margin-bottom: 20px;
}

.service-card-link {
    text-decoration: none;
    display: block;
}

.service-card {
    position: relative;
    min-height: 606px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    transition: 0.3s;
}

.service-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.service-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.service-card:hover .service-card-bg img {
    transform: scale(1.1);
}

.service-card-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    background: linear-gradient(180deg, rgba(52, 109, 95, 0.7) 0%, rgba(53, 110, 93, 0.7) 100%);
    text-align: left;
    transition: all 0.4s ease-in-out;
    padding: 32px 32px 12px;
}

.service-card:hover .service-card-overlay {
    padding-bottom: 50px;
}

.service-card-title {
    color: #fff;
    font-weight: 700;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    transition: 0.3s;
    font-size: 26px;
    max-width: 230px;
}

.service-card-desc {
    color: #fff;
    margin-top: 15px;
    margin-bottom: 25px;
    font-family: 'Inter', sans-serif;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease-in-out;
    line-height: 1.6;
}

.service-card:hover .service-card-desc {
    opacity: 1;
    max-height: 200px;
    transform: translateY(0);
}

.btn-read-more-white {
    display: inline-block;
    background: #fff;
    color: #1B453B;
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease-in-out;
    text-align: center;
}

.service-card:hover .btn-read-more-white {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

/*--------------------------------------------------------------
# Split Image Text Section
--------------------------------------------------------------*/
.section-split-image-text {
    padding: 90px 0;
}

.split-image-wrapper img {
    width: 100%;
    height: auto;
    max-width: 732px;
}

.split-image-wrapper {
    display: block;
}

.right-image-wrapper .split-image-wrapper {
    text-align: end;
}

.split-title {
    font-weight: 700;
    color: #231F20;
}

.split-description {
    font-size: 17px;
    color: #373737;
}

.split-stat-item .stat-value {
    font-size: 35px;
    font-weight: 700;
    color: #000;
    margin-bottom: 0 !important;
}

.split-stat-item .stat-label {
    font-weight: 400;
    color: #828282 !important;
    font-size: 17px;
}

@media (max-width: 991px) {
    .section-split-image-text {
        padding: 60px 0;
    }

    .split-content-inner {
        padding-left: 0 !important;
        margin-top: 40px;
    }

}

/*--------------------------------------------------------------
# Features Collage Section
--------------------------------------------------------------*/
.section-features-collage {
    padding: 120px 0 108px 0;
}

.bg-dark-green {
    background-color: #356E5D;
}

.fc-tagline-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.fc-content-wrapper {
    max-width: 586px;
}

.fc-title {
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
}

.fc-description {
    font-size: 17px;
}

.fc-description p {
    color: #fff;
}

.fc-feature-item {
    gap: 10px;
}

.fc-feature-title {
    font-weight: 700;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    letter-spacing: 0.3px;
    margin-bottom: 10px !important;
}

.fc-feature-desc {
    font-size: 17px;
    color: #fff;
}

.fc-collage-wrapper .fc-image-stack .fc-img-item img {
    width: 100%;
    height: auto;
}

.fc-collage-wrapper .fc-img-large img {
    height: auto;
    width: 100%;
}

.fc-collage-wrapper .row {
    align-items: center;
}


/*--------------------------------------------------------------
# Split Background Info Section
--------------------------------------------------------------*/
.section-split-bg-info {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background-color: #fff;
}

.split-content {
    z-index: 9;
}

.sbi-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

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

.sbi-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
}

.sbi-box-container {
    position: relative;
    z-index: 5;
}

.sbi-content-wrapper {
    max-width: 586px;
    margin: 0 auto;
}

.sbi-floating-box {
    width: 342px;
    position: absolute;
    left: 0;
    z-index: 10;
    border-radius: 16px;
    top: 100px;
    transition: 0.3s;
}

.sbi-floating-box:hover {
    transform: translateY(-10px);
}

.sbi-floating-box.bg-white.rounded-4.shadow-lg.p-4 .d-flex.align-items-center {
    justify-content: space-around;
    align-items: self-start !important;
}

p.sbi-box-desc.mb-0 {
    color: #1E1E1E;
}

.sbi-title {
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}

.sbi-subtitle {
    font-family: 'Montserrat', sans-serif;
    color: #1E1E1E !important;
    font-weight: 700;
}

.sbi-description p {
    margin-bottom: 15px;
}

.sbi-feature-text {
    font-size: 18px;
    color: #1E1E1E !important;
    font-weight: 700;
}

.sbi-bottom-text {
    font-size: 17px;
    line-height: 25px;
    font-family: 'Inter';
}

.sbi-feature-item {
    gap: 10px;
}

@media (max-width: 991px) {
    .section-features-collage {
        padding: 80px 0;
    }

    .fc-collage-wrapper .fc-image-stack .fc-img-item img {
        height: 200px;
    }

    .fc-collage-wrapper .fc-img-large img {
        height: 416px;
    }

    .section-split-bg-info {
        padding: 60px 0;
    }

    .sbi-background {
        position: relative;
        height: 300px;
        margin-bottom: 40px;
    }

    .sbi-overlay {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    }

    .sbi-floating-box {
        position: static;
        width: 100%;
        margin-bottom: 30px;
    }

    .sbi-content-wrapper {
        padding-left: 0 !important;
        max-width: 100%;
    }

    .sbi-floating-box.bg-white.rounded-4.shadow-lg.p-4 .d-flex.align-items-center {
        justify-content: flex-start;
        align-items: self-start !important;
        gap: 15px;
    }
}

/*--------------------------------------------------------------
# Service Cards Section
--------------------------------------------------------------*/
section.section-service-cards.py-5.bg-light-gray {
    background-color: #F5F5F5;
    padding: 90px 0 !important;
}

.sc-main-title {
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: #1E1E1E;
}

.sc-main-title span {
    color: #356E5D;
}

.sc-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 16px;
}

.sc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.sc-icon-img {
    width: 100%;
    height: auto;
    max-width: 90px;
}

.sc-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #fff;
}

.sc-card-desc {
    font-size: 17px;
    line-height: 25px;
}

@media (max-width: 767px) {
    .service-card {
        margin: 20px 0;
    }

    section.section-service-cards .col-md-6 {
        margin: 20px 0;
    }
}

/*--------------------------------------------------------------
# Process Steps Section
--------------------------------------------------------------*/
.section-process-steps {
    padding: 100px 0;
}

.ps-tagline-badge {
    background-color: #E85530;
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    letter-spacing: 1px;
}

.ps-badge-bar {
    width: 20px;
    height: 2px;
    background-color: #fff;
    display: inline-block;
}

.ps-main-title {
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: #1E1E1E;
    margin-top: 20px;
}

.ps-step-number {
    font-size: 84px;
    line-height: 1;
    color: #356E5D;
    font-family: 'Inter';
    font-weight: 400;
}

.ps-step-title {
    color: #1E1E1E;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.ps-step-desc {
    font-size: 17px;
    line-height: 1.6;
    color: #373737 !important;
}

@media (max-width: 991px) {

    .ps-step-number {
        font-size: 60px;
    }
}

/*--------------------------------------------------------------
# Experience Section
--------------------------------------------------------------*/
.section-experience {
    padding: 117px 0 !important;
}

.es-text-col {
    padding-left: calc((100% - 1470px) / 2 + 15px);
    padding-right: 60px;
}

.es-content-wrapper {
    max-width: 586px;
    margin: 0 auto;
}

.es-main-title {
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: #1a1a1a;
}

.es-main-content p {
    margin-bottom: 30px;
}

.es-divider {
    border-top: 1px solid #EDEDED;
    margin: 30px !important;
}

.es-feature-title {
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    font-family: 'Montserrat', sans-serif;
}

.es-feature-desc {
    color: #828282;
}

.es-img-breakout {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-left: -50px;
    /* Slight overlap into the middle */
}

@media (max-width: 1550px) {
    .es-text-col {
        padding-left: 5%;
    }
}

@media (max-width: 991px) {
    .section-experience {
        padding: 60px 0 !important;
    }

    section.section-service-cards.py-5.bg-light-gray {
        padding: 60px 0 !important;
    }

    .es-text-col {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 40px;
    }

    .es-img-breakout {
        margin-left: 0;
        padding: 0 15px;
    }

    .section-feature-circles .col-md-3 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767px) {
    .section-feature-circles .col-md-3 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .feature-item-title {
        text-align: center;
        max-width: 100%;
    }

    .feature-item-desc {
        max-width: 100%;
        text-align: center;
    }

    .ps-step-item {
        margin: 20px 0;
    }

}

/*--------------------------------------------------------------
# Two Column Text Section
--------------------------------------------------------------*/
.bg-light-gray {
    background-color: #F5F5F5;
}

section.section-two-column-text {
    padding: 90px 0;
}

.section-two-column-text .section-title {
    margin-bottom: 0;
    text-transform: none;
    font-size: 32px;
}

.two-column-content.two-column-content-left {
    max-width: 630px;
    margin: 0 auto;
}

.two-column-content.two-column-content-right.ps-lg-4 {
    max-width: 630px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .section-two-column-text .border-start-lg {
        border-left: 1px solid #D9D9D9 !important;
    }

    .three-content .two-column-content {
        max-width: 100%;
        margin: 0 auto;
    }
}

.two-column-content-right ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
    margin-top: 30px;
}

.two-column-content-right ul li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    font-size: 17px;
    line-height: 25px;
    font-family: 'Inter';
}

.two-column-content-right ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    background-color: #E55C3A;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.two-column-content.two-column-content-left ul li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    font-size: 17px;
    line-height: 25px;
    font-family: 'Inter';
}

.two-column-content.two-column-content-left ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
    margin-top: 30px;
}

.two-column-content.two-column-content-left ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    background-color: #E55C3A;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.three-content .two-column-content {
    max-width: 380px !important;
    margin: 0 auto;
}

.base-preparation {
    padding-top: 0 !important;
}

/*--------------------------------------------------------------
# CTA Banner Section
--------------------------------------------------------------*/
.cta-banner-inner {
    background-color: #356E5D;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 16px;
    padding: clamp(1.5rem, 4vw, 3rem) !important;
}

.cta-tagline {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    max-width: 500px;
    margin: 0 auto;
}

h3.cta-title {
    color: #fff;
}

section.section-cta-banner {
    padding-top: 0;
    padding-bottom: clamp(2rem, 5vw, 5rem);
}

.cta-phone-item {
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.cta-phone-link {
    font-size: clamp(1.2rem, 3vw, 2.8rem);
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif;
    transition: opacity 0.3s ease;
    color: #fff !important;
    text-decoration: none;
}

.cta-phone-link:hover {
    opacity: 0.8;
}

.cta-phone-wrapper {
    gap: 15px;
}

.cta-phone-wrapper svg {
    max-width: clamp(20px, 3vw, 36px);
    width: 100%;
}

.cta-phone-item {
    gap: 8px;
}

.cta-separator {
    font-size: 2rem;
    font-weight: 300;
    color: #fff;
}

.cta-phone-icon {
    color: #fff;
}

/*--------------------------------------------------------------
# Full Width Text Section
--------------------------------------------------------------*/
.full-width-text-content h2,
.full-width-text-content h3,
.full-width-text-content h4 {
    font-weight: 700;
    color: #1E1E1E;
    margin-bottom: 12px;
}

.full-width-text-content p {
    margin-bottom: 25px;
}

/*--------------------------------------------------------------
# Accordion Section
--------------------------------------------------------------*/
.info-accordion .accordion-button::after {
    display: none;
}

section.section-accordion {
    background-color: #F5F5F5;
}

.info-accordion .accordion-item {
    border-bottom: 1px solid #e0e0e0 !important;
}

.info-accordion .accordion-button:not(.collapsed) .feather-plus-circle line:nth-child(2) {
    display: none;
}


/* PROJECT LISTS SECTION */
.section-project-lists {
    background-color: #fff;
    padding-top: clamp(2rem, -1.3403rem + 9.2949vw, 5.625rem);
    padding-bottom: clamp(2rem, -1.3403rem + 9.2949vw, 5.625rem);
}

.project-list-grid .projectListBox:nth-of-type(1),
.project-list-grid .projectListBox:nth-of-type(2) {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.project-card {
    background: #F5F5F5;
    /* Light gray background for the bottom part */
    border-radius: 15px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.project-list-grid .projectListBox:nth-of-type(1) .project-card-image,
.project-list-grid .projectListBox:nth-of-type(2) .project-card-image {
    padding-top: 59.3%;
}

.project-card-image {
    overflow: hidden;
    position: relative;
    padding-top: 79.8%;
}

.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.project-card:hover .project-card-image img {
    transform: scale(1.05);
}

.project-list-grid .projectListBox:nth-of-type(1) .project-card-content,
.project-list-grid .projectListBox:nth-of-type(2) .project-card-content {
    padding: 40px 20px;
}

.project-card-content {
    padding: 25px 15px;
    text-align: center;
    flex-grow: 1;
}

.project-list-grid .projectListBox:nth-of-type(1) .project-title,
.project-list-grid .projectListBox:nth-of-type(2) .project-title {

    font-size: clamp(1.375rem, 0.8052rem + 1.1887vw, 1.875rem);

}


.project-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #1E1E1E;
    letter-spacing: 0.3px;
    line-height: 1.5;
}

.project-excerpt {
    font-size: 17px;
    color: #565656;
    line-height: 1.5;
}

.projectListBox {
    margin-bottom: clamp(1.875rem, 0.1472rem + 4.8077vw, 3.75rem);
}

/* Pagination */
.pagination-wrapper {
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: center;
}

.pagination-wrapper .page-numbers {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 50%;
    margin: 0 5px;
    color: #2e6f5c;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s;
}

.pagination-wrapper .page-numbers.current {
    background: #2e6f5c;
    color: #fff;
    border-color: #2e6f5c;
}

.pagination-wrapper .page-numbers:hover:not(.current) {
    background: #f0f0f0;
    border-color: #2e6f5c;
}

.pagination-wrapper .next.page-numbers,
.pagination-wrapper .prev.page-numbers {
    border: none;
}

.pagination-wrapper .next.page-numbers:hover,
.pagination-wrapper .prev.page-numbers:hover {
    background: transparent;
}

.grl-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 15px;
}

@media (max-width: 767px) {

    .project-list-grid .projectListBox:nth-of-type(1),
    .project-list-grid .projectListBox:nth-of-type(2) {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*--------------------------------------------------------------
# Contact Map & Form Section
--------------------------------------------------------------*/
.section-contact-map-form {
    padding-top: clamp(2rem, 5vw, 4rem);
}

.section-contact-map-form .map-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 373px;
    border-radius: 16px;
    border: none;
}

.section-contact-map-form .hero-form-card {
    background: #356E5D;
    max-width: 100%;
    margin-top: 0;
    display: flow-root;
    padding-bottom: 32px !important;
}

.section-contact-map-form .hero-form-card .wpcf7-submit {
    float: right;
    max-width: 250px;
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Full Width Text Section
--------------------------------------------------------------*/
.section-full-width-text {
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.full-width-text-content h2,
.full-width-text-content h3,
.full-width-text-content h4 {
    font-weight: 700;
    color: #1E1E1E;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    font-family: 'Montserrat', sans-serif;
}

.full-width-text-content p {
    margin-bottom: 25px;
}

.extra-sections-wrapper .cta-phone-link {
    font-size: 33px;
}

.project-image img {
    width: 100%;
    height: auto;
}

/*--------------------------------------------------------------
# Recent Projects Slider
--------------------------------------------------------------*/
.section-recent-projects {
    padding: 50px 0 115px 0;
    position: relative;
    overflow: hidden;
}

.slider-nav-arrows {
    gap: 34px;
}

.project-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-recent-projects .section-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', sans-serif;
}

.text-green {
    color: #356E5D;
}

.btn-nav {
    background: transparent;
    border: unset;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

.btn-nav:hover {
    background: linear-gradient(80.27deg, rgba(53, 110, 93, 0.1) 12.27%, rgba(128, 255, 217, 0.1) 119.39%);
    border: 1px solid #356e5d41;

}

.btn-nav:focus {
    outline: none;
}

.project-slide {
    outline: none;
}

.project-image-wrap.rounded-4.overflow-hidden img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.project-content {
    max-width: 401px;
    margin: 0 auto;
}

.project-item-title {
    color: #1E1E1E;
    font-family: 'Montserrat', sans-serif;
}

.project-desc {
    color: #373737;
    font-family: 'Inter', sans-serif;
}

.navigation.pagination {
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .project-content {
        max-width: 100%;
        margin: 20px auto;
    }

    .section-contact-hero .hero-form-card .wpcf7-submit {
        float: none !important;
        max-width: 100% !important;
        margin: 0 auto;
    }

    .section-contact-hero .hero-form-card {
        padding-bottom: 0;
    }

    .stat-top {
        height: 38px;
    }
}

.footer-design-by {
    color: #ffffff;
    padding-bottom: 20px;
    padding-top: 0;
}

.footer-design-by span,
.footer-design-by a {
    color: #ffffff;
    opacity: 70%;
}

.footer-design-by a {
    font-weight: 600;
    /* text-decoration: underline; */
}

.footer-design-by a:hover {
    text-decoration: underline;
}