/* Template Services CSS file */
/* ------------------------------------------------- */

/* Introduction Section */
section.introduction {
    padding: clamp(50px, 10vw, 100px) 0;
    background: #FFFFFF;
}

section.introduction h2 {
    color: #422C20;
    text-align: center;
    font-family: "Cormorant Garamond";
    font-size: clamp(26px, 5.2vw, 52px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    margin: 0 auto 60px;
    max-width: 1000px;
}

.content-title:hover {
    opacity: 0.6;
    background: transparent;
    color: var(--brown);
}

.introduction-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    width: 100%;
    margin: 0 auto;
}

.covered-text h2 {
    color: #422C20;
    font-family: "Cormorant Garamond";
    font-size: clamp(28px, 4.5vw, 45px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

.introduction-content-left,
.introduction-content-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.introduction-content-left p,
.introduction-content-right p {
    color: #585858;
    font-family: Mulish;
    font-size: clamp(14px, 2vw, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

.introduction-content-left ul,
.introduction-content-right ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.introduction-content-left li,
.introduction-content-right li {
    color: var(--LindiSlate, #585858);
    font-family: "Cormorant Garamond";
    font-size: clamp(18px, 2.4vw, 24px);
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
}

.introduction-content-right p {
    max-width: 600px;
}

.introduction-content-left li:last-child,
.introduction-content-right li:last-child {
    margin-bottom: 0;
}

.introduction-content-left li::before,
.introduction-content-right li::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 17px;
    height: 19px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='19' viewBox='0 0 17 19' fill='none'%3E%3Cg opacity='0.4' clip-path='url(%23clip0_1736_1162)'%3E%3Cpath d='M8.06901 8.65541C8.00534 7.60079 7.79311 6.55877 7.41958 5.52096C6.89748 4.02516 6.63431 2.99575 6.63431 2.42852C6.63431 1.6344 6.82107 1.03356 7.2031 0.621797C7.58087 0.210033 8.04779 0.00415039 8.60385 0.00415039C9.0835 0.00415039 9.49948 0.210033 9.85178 0.621797C10.2083 1.03356 10.3824 1.6218 10.3824 2.3823C10.3824 3.06718 10.1786 4.02516 9.77114 5.25625C9.36365 6.48314 9.11321 7.6176 9.01982 8.65541C9.86876 8.1218 10.6328 7.47474 11.3077 6.71003C12.3562 5.50415 13.1329 4.75625 13.6423 4.46633C14.1517 4.17642 14.6695 4.02936 15.1916 4.02936C15.7137 4.02936 16.1297 4.20163 16.4735 4.54617C16.8216 4.8907 16.9956 5.29827 16.9956 5.76886C16.9956 6.33188 16.7409 6.83608 16.2316 7.28146C15.7222 7.72264 14.453 8.16802 12.4156 8.60919C11.2271 8.8697 10.2423 9.16802 9.45703 9.50415C10.2593 9.91591 11.2398 10.231 12.3944 10.4411C14.2578 10.7773 15.4802 11.1974 16.0618 11.7016C16.639 12.2058 16.9277 12.7563 16.9277 13.3487C16.9277 13.8067 16.7537 14.2016 16.4056 14.5378C16.0575 14.8739 15.6543 15.042 15.1916 15.042C14.7289 15.042 14.2153 14.8823 13.655 14.563C13.0905 14.2436 12.3349 13.5252 11.3756 12.4117C10.7432 11.6638 9.9579 10.9621 9.01558 10.3067C9.04529 11.1764 9.22357 12.1218 9.54617 13.147C10.1022 14.9495 10.3781 16.1764 10.3781 16.8319C10.3781 17.4411 10.1914 17.9579 9.82207 18.3781C9.45278 18.7983 9.05803 19.0084 8.64205 19.0084C8.07326 19.0084 7.55541 18.7857 7.09273 18.3445C6.77014 18.0252 6.60884 17.5126 6.60884 16.8109C6.60884 16.1092 6.78712 15.1974 7.13943 14.168C7.49598 13.1386 7.7167 12.4285 7.81009 12.0378C7.90347 11.647 7.98836 11.0714 8.06477 10.3109C7.1564 10.9075 6.36265 11.5714 5.6835 12.3025C4.55865 13.5546 3.70971 14.3487 3.14092 14.6848C2.74192 14.9285 2.3217 15.0504 1.89298 15.0504C1.36664 15.0504 0.920949 14.8739 0.55166 14.5252C0.182372 14.1722 -0.00439453 13.7857 -0.00439453 13.3571C-0.00439453 12.9747 0.152659 12.5756 0.471011 12.1554C0.785119 11.7352 1.26052 11.3865 1.89298 11.1134C2.30896 10.9285 3.25553 10.6848 4.73693 10.3823C5.69199 10.1848 6.62582 9.89491 7.53418 9.51255C6.70222 9.10079 5.70896 8.78146 4.55016 8.55037C2.65278 8.15541 1.48125 7.79407 1.03556 7.47474C0.34367 6.97054 -0.00439453 6.36129 -0.00439453 5.64281C-0.00439453 5.23104 0.169638 4.85289 0.517703 4.50835C0.865768 4.16381 1.26901 3.99154 1.73169 3.99154C2.24105 3.99154 2.78012 4.15121 3.34891 4.47054C3.9177 4.78986 4.62657 5.43692 5.47551 6.40331C6.32444 7.3739 7.18612 8.126 8.06477 8.65961L8.06901 8.65541Z' fill='%23422C20'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1736_1162'%3E%3Crect width='17' height='19' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 8px;
}

/* Introduction Images */
.introduction-images {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin: 100px auto 0;
}

.introduction-image {
    width: 100%;
    overflow: hidden;
}

.introduction-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 420 / 646;
}

/* Content Section */
section.content {
    padding: 0 0 clamp(50px, 10vw, 100px) 0;
    background: #FFFFFF;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.content-image {
    width: 100%;
    position: relative;
    display: grid;
}

.content-image-item {
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    grid-column: 1;
    grid-row: 1;
}

.content-image-item.active {
    opacity: 1;
}

.content-image-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.content-items {
    position: relative;
    display: grid;
}

.content-buttons {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.content-title {
    background: none;
    border: none;
    text-align: left;
    padding: 15px 0;
    width: 100%;
    cursor: pointer;
    font-family: "Cormorant Garamond";
    font-size: clamp(20px, 3.5vw, 35px);
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
    color: #422C20;
    transition: opacity 0.3s ease;
    text-transform: capitalize;
    letter-spacing: 0;
}

.content-title:hover {
    opacity: 0.6;
}

.content-back {
    background: none;
    border: none;
    text-align: left;
    padding: 15px 0;
    width: 100%;
    cursor: pointer;
    font-family: "Cormorant Garamond";
    font-size: clamp(20px, 3.5vw, 35px);
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
    color: #422C20;
    border-bottom: 1px solid rgba(66, 44, 32, 0.2);
    transition: all 0.3s ease;
    margin-bottom: 20px;
    text-transform: capitalize;
    letter-spacing: 0;
}

.content-back:hover {
    color: #6B4220;
    background: transparent;
}

.content-buttons {
    opacity: 1;
    transition: opacity 0.3s ease;
    grid-column: 1;
    grid-row: 1;
}

.content-buttons.hidden {
    opacity: 0;
    pointer-events: none;
}

.content-item {
    top: 0;
    left: 0;
    width: 100%;
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    height: 0;
}

.content-item.active {
    opacity: 1;
    pointer-events: all;
    height: auto;
}

.content-text {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.content-text p {
    color: var(--LindiSlate, #585858);
    font-family: Mulish;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 128.677%; /* 20.588px */
    margin: 0 0 15px 0;
}

.content-text h1,
.content-text h2,
.content-text h3,
.content-text h4 {
    color: var(--lindi-final, #422C20);
    font-family: "Cormorant Garamond";
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 600;
    line-height: 1;
    margin: 0 0 15px 0;
}

.content-text ul {
    padding-left: 20px;
}

.content-text li {
    margin-bottom: 10px;
}

/* Masterplan Section */
section.masterplan {
    padding: 0;
    background: #FFFFFF;
}

section.masterplan h2 {
    color: #422C20;
    text-align: center;
    font-family: "Cormorant Garamond";
    font-size: clamp(28px, 4.5vw, 45px);
    font-style: normal;
    font-weight: 900;
    line-height: 1.4;
    margin: 0 0 30px 0;
    text-transform: uppercase;
}

.masterplan-content img {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 30px;
}

section.masterplan > .wrap > p,
section.masterplan > .wrap > ul,
section.masterplan > .wrap > li {
    color: #585858;
    font-family: Mulish;
    font-size: clamp(14px, 2vw, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

section.masterplan > .wrap > ul {
    padding-left: 20px;
}

.masterplan-steps {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.masterplan-step {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
    border: 15px solid #FAF7F0;
}

.masterplan-content {
    padding: clamp(50px, 10vw, 100px) 0;
    background: var(--off-white);
    text-align: center;
}

.masterplan-steps-area {
    padding: clamp(50px, 10vw, 100px) 0;
    background: var(--brown);
    color: var(--off-white);
    text-align: center;
}

.masterplan-step-inner {
    border: 2px solid rgba(255,255,255,0.6);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 40px 20px;
}

.masterplan-step h3 {
    font-family: "Cormorant Garamond";
    font-size: clamp(24px, 3vw, 48px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

.masterplan-step p,
.masterplan-step ul,
.masterplan-step li {
    color: #FFF;
    text-align: center;
    font-family: Mulish;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.masterplan-step ul {
    padding-left: 20px;
}

.masterplan-content p {
    color: var(--LindiSlate, #585858);
    text-align: center;
    font-family: Mulish;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    margin: 0;
    max-width: 1000px;
    margin: auto;
}

.masterplan-step .time {
    font-family: Mulish;
    font-size: clamp(14px, 2vw, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

/* Covered Section */
section.covered {
    padding: clamp(50px, 10vw, 100px) 0;
    background: var(--off-white);
}

.covered-content-wrapper {
    display: flex;
    gap: clamp(50px, 10vw, 100px);
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
}

.covered-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 467px;
}

.covered-text p,
.covered-text ul {
    color: #585858;
    font-family: Mulish;
    font-size: clamp(14px, 1.6vw, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

.covered-text li {
    color: #585858;
    font-family: "Cormorant Garamond";
    font-size: clamp(18px, 2.4vw, 24px);
    font-style: normal;
    font-weight: 200;
    line-height: 1.2;
    margin: 0;
}

.covered-text ul {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.covered-image {
    width: 100%;
    max-width: 463px;
    aspect-ratio: 563/771;
}

.covered-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Team Section */
section.team {
    padding: clamp(50px, 10vw, 100px) 0;
    background: #FFFFFF;
}

.team-content-wrapper {
    display: flex;
    gap: clamp(50px, 10vw, 100px);
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
}

.team-image {
    width: 100%;
    max-width: 519.332px;
    aspect-ratio: 547.33/516.92;
}

.team-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.team-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 485px;
}

.team-text h2 {
    color: #422C20;
    font-family: "Cormorant Garamond";
    font-size: clamp(28px, 4.5vw, 45px);
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    margin: 0;
}

.team-text p,
.team-text ul,
.team-text li {
    color: #585858;
    font-family: Mulish;
    font-size: clamp(14px, 2vw, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

.team-text ul {
    padding-left: 20px;
}

/* Testimonials Section */
section.testimonials {
    background: #FFFFFF;
    padding: 0 0 clamp(50px, 10vw, 100px) 0;
}

section.testimonials h2 {
    color: #422C20;
    font-family: 'Cormorant Garamond';
    font-size: clamp(28px, 4.5vw, 45px);
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    margin-top: 0;
    margin-bottom: 40px;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    text-align: left;
    height: 100%;
}

.testimonial-card blockquote {
    justify-content: space-between;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.testimonial-card blockquote p {
    color: #422C20;
    font-family: 'Mulish';
    font-size: clamp(15px, 1.6vw, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.23;
    margin: 0 0 40px 0;
    line-height: 1.4;
    max-width: 800px;
}

.testimonial-card cite {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-style: normal;
    margin-top: auto;
}

.testimonial-card .name {
    color: #422C20;
    font-family: "Cormorant Garamond";
    font-size: clamp(20px, 3vw, 30px);
    font-style: normal;
    font-weight: 400;
    line-height: 0.91;
    margin: 0;
}

.testimonial-card .location {
    color: #422C20;
    text-align: right;
    font-family: Mulish;
    font-size: 15px;
    font-style: normal;
    font-weight: 200;
    line-height: 1.84;
    letter-spacing: 2.66px;
    text-transform: uppercase;
}

/* Testimonial Slider Pagination */
.testimonials-splide .splide__pagination {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    margin-top: 40px;
    max-width: 50%;
    min-width: 300px;
}

.testimonials-splide .splide__pagination__page {
    width: 46px;
    height: 3px;
    background: #422C20;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.3s ease;
    border-radius: 0;
    transform: scale(1);
}

.testimonials-splide .splide__pagination__page.is-active {
    opacity: 0.9;
}

/* Testimonials Slider Arrows */
.testimonials-gallery-wrapper {
    position: relative;
}

.testimonials-arrows {
    display: flex;
    justify-content: end;
    position: absolute;
    top: -60px;
    right: 0;
}

.testimonials-splide {
    padding-top: 60px;
}

button.testimonials-arrow {
    border: none;
    padding: 10px;
    cursor: pointer;
    background: transparent;
}

button.testimonials-arrow:hover {
    background: transparent;
}

/* Responsive Design */
@media (max-width: 980px) {
    .introduction-content-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .introduction-images {
        grid-template-columns: 1fr 1fr;
    }
    
    .masterplan-steps {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    
    .covered-content-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    .team-content-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    
    .content-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .content-items {
        margin-top: 30px;
    }
}

@media (max-width: 768px) {
    .introduction-images {
        grid-template-columns: 1fr;
    }
    
    .masterplan-steps {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .masterplan-step {
        padding: 30px;
    }
}

@media (max-width: 600px) {
    .introduction-images {
        grid-template-columns: 1fr;
    }
    
    .masterplan-steps {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .masterplan-step {
        padding: 20px;
    }
    
    .team-content-wrapper {
        gap: 20px;
    }
    
    .content-title {
        font-size: clamp(18px, 4vw, 22px);
        padding: 12px 0;
    }
    
    .content-text p,
    .content-text ul,
    .content-text li {
        font-size: clamp(13px, 3vw, 15px);
    }
}

@media (max-width: 800px) {
    .testimonials-splide .splide__pagination {
        position: relative;
    }
}