
/* ------------------------------------------------------------------------------ */
/* Home Hero Section */
/* ------------------------------------------------------------------------------ */

#home-hero.hero-block .item-txt {
    right: auto;
    left: 0;
    text-align: left;
    padding: 0;
    border-radius: 0;
    border-width: 0;
}


/* ------------------------------------------------------------------------------ */
/* Home Services Section */
/* ------------------------------------------------------------------------------ */

@media(max-width: 479px) {
    #home-services.cards-block > .container > .item-txt .item-title.title-smallest h1.main,
    #home-services.cards-block > .container > .item-txt .item-title.title-smallest h2.main {
        font-size: clamp(1.5rem, 5.5vw, 1.68rem); /* Needed because it's a REALLY long title! */
    }

    #our-work-intro.txt-block-1 .item .item-title.title-smallest h1.main,
    #our-work-intro.txt-block-1 .item .item-title.title-smallest h2.main {
        font-size: clamp(1.5rem, 5.5vw, 1.68rem); /* Needed because it's a REALLY long title! */
    }
}

#home-services.cards-block-2 .card-items .item .item-txt {
    justify-content: flex-start; 
    align-items: stretch; 
    padding: 0;
}

#home-services.cards-block-2 .card-items .item .item-txt .txt-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

#home-services.cards-block-2 .card-items .title {
    font-size: clamp(1rem, 11.5cqi, 4rem);
    letter-spacing: -0.015em;
    padding: clamp(5px, 2cqi, 10px) clamp(10px, 3.25cqi, 15px);
}

#home-services.cards-block-2 .card-items .theme-wrapper {
    font-size: clamp(1.1rem, 5cqi, 2.2rem);
    font-weight: 700;
    line-height: 1.4;
    padding: 10px 15px;
}


/* Background embellishment */

#home-services.cards-block-2 .card-items .theme-wrapper {
    position: relative;
    z-index: 0;
    overflow: visible;
    padding: clamp(10px, 3.5cqi, 20px);
    max-width: 600px;
}

    #home-services.cards-block-2 .card-items .theme-wrapper::after {
        content: '';
        position: absolute;
        background: var(--color-accent-1);
        background: var(--color-accent-2);
        left: -5%;
        top: -2px;
        height: 150%;
        width: 110%;
        border-radius: 5px;
        transform: rotate(3deg);
        z-index: -1;
    }


/* ------------------------------------------------------------------------------ */
/* About Page - Meet The Directors Section */
/* ------------------------------------------------------------------------------ */

#company-directors.cards-block > .container {
    max-width: 1200px;
}

#company-directors.cards-block .grid-items {
    gap: clamp(3rem, 4.5vw, 5rem);
}

    #company-directors.cards-block-1 .card-items .item .item-txt .txt-wrapper .title {
        letter-spacing: -0.0125em;
    }

    #company-directors.cards-block-1 .card-items .item .item-txt .txt-wrapper .theme-wrapper {
        margin-top: 0;
    }


/* ------------------------------------------------------------------------------ */
/* About Page - Rest Of Team Section */
/* ------------------------------------------------------------------------------ */

#rest-of-team.cards-block .grid-items {
    gap: 3rem;
}

/* ------------------------------------------------------------------------------ */
/* Two Column Block */
/* ------------------------------------------------------------------------------ */

@media (min-width: 1024px) {
    .block.two-column-block > .container {
        max-width: var(--block-container-max-width-xl);
    }
}

.block.two-column-block > .container {
    margin-left: auto;
    margin-right: auto;
}

.block.two-column-block .two-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 5rem);
}

@media(min-width: 1024px) {
    .block.two-column-block .two-columns {
        grid-template-columns: 1fr 1fr;
        grid-template-columns: 2fr 1fr;
        grid-template-columns: 3fr 4fr;
    }
}

    .block.two-column-block section.block {
        margin: 0;
        padding: 0;
    }

.block.two-column-block section.map-block {
    margin-top: 100px;
}

.block.two-column-block .cards-block-1 .card-items.grid-items {
    grid-template-columns: 1fr;
}

#contact-cards.cards-block-1 .card-items .item {
    display: flex;
    flex-direction: column;
}

    #contact-cards.cards-block-1 .card-items .item .item-txt {
        text-align: center;
    }

    #contact-cards.cards-block-1 .card-items .item .item-txt .txt-wrapper {
        gap: 1.5rem;
    }

    @media (max-width: 1023px) {

        #contact-cards.cards-block-1 .card-items .item .item-txt {
            padding: clamp(1.6rem, 8cqi, 3.2rem);
        }

        #contact-cards.cards-block-1 .card-items .item .item-txt .txt-wrapper .title {
            font-size: clamp(2rem, 5.5cqi, 2.75rem);
        }
    }
    @media (min-width: 1024px) {

        #contact-cards.cards-block-1 .grid-items {
            grid-template-columns: 1fr 1fr 1fr;
        }

        #contact-cards.cards-block-1 .card-items .item .item-txt {
            padding: clamp(2rem, 12cqi, 3.8rem) 1rem;
        }

        #contact-cards.cards-block-1 .card-items .item .item-txt .txt-wrapper .title {
            font-size: clamp(1.8rem, 10cqi, 2.75rem);
        }

        #contact-cards.cards-block-1 .card-items .item .item-txt .txt-wrapper .theme-wrapper {
            font-size: clamp(1rem, 5.5cqi, 1.25rem);
        }
    }

    #contact-cards.cards-block-1 .card-items .item .item-txt .txt-wrapper .theme-wrapper {
        margin-top: 0;
    }

    #contact-cards.cards-block-1 .card-items .item .item-txt .txt-wrapper .theme-wrapper p {
        margin-bottom: 15px;
    }

        #contact-cards.cards-block-1 .card-items .item .item-txt .txt-wrapper .theme-wrapper > *:last-child {
            margin-bottom: 0;
        }


/* Card item style 1 */
/*#contact-cards.cards-block-1 .card-items .item {
    padding: 50px;
    border-right: 2px solid var(--color-accent-1);
    border-bottom: 2px solid var(--color-accent-1);
    border-radius: 0 0 5px 0;
}*/

/* Card item style 2 */
/*#contact-cards.cards-block-1 .card-items .item {
    padding: 50px;
    border: 2px solid var(--color-accent-1);
    border-right-width: 10px;
    border-bottom-width: 10px;
    border-radius: 25px;
}*/


/* Card item style 3 */

#contact-cards.cards-block-1 .card-items .item {
    color: #fff;
    position: relative;
    z-index: 0;
}

    #contact-cards.cards-block-1 .card-items .item::after {
        content: '';
        position: absolute;
        background: var(--color-accent-1);
        background: var(--color-accent-2);
        inset: 0;
        border-radius: 5px;
        z-index: -1;
    }

@media (min-width: 1024px) {

    #contact-cards.cards-block-1 {
        margin-bottom: 0;
    }

        #contact-cards.cards-block-1 .card-items .item::after {
            height: 150%;
            transform: rotate(3deg);
        }
}

.map-block {
    background: #fff;
    position: relative;
}


/* ------------------------------------------------------------------------------ */
/* This is for the form in the #contact-cards block but probably works wherever the form ends up. */
/* ------------------------------------------------------------------------------ */


.form-block {
    container-type: inline-size;
}

    .form-block .form-wrapper .ctrl-wrapper label {
        font-size: clamp(0.8em, 5.8cqi, 1em);
        padding: clamp(1rem, 3.5cqi, 1.6rem) 0;
    }

