@import 'reset.css';
@import 'variables.css';

@import 'fonts.css';

@import 'templates/home.css';
@import 'templates/service.css';
@import 'templates/case-study.css';
@import 'templates/contact.css';
@import 'templates/article.css';
@import 'templates/error.css';

@import 'sections/cta.css';
@import 'sections/quote.css';
@import 'sections/testimonials.css';
@import 'sections/gallery.css';
@import 'sections/faq.css';


@import 'sections/home-hero.css';
@import 'blocks/blocks.css';
@import 'blocks/block-lebo-text-image.css';
@import 'blocks/block-lebo-text.css';
@import 'blocks/block-lebo-image.css';
@import 'blocks/block-lebo-heading.css';


@import 'items/link.css';
@import 'menu.css';
@import 'footer.css';

body{
    background-color: var(--color-primary-dark);
    max-width: 100vw;
    width: 100vw;
    overflow-x: hidden;
}

.text-center{
    text-align: center;
}

section[data-width="container"] {
    max-width: var(--size-container);
    margin-left: auto;
    margin-right: auto;
    padding: 0 calc(var(--size-unit) * 4);
    box-sizing: border-box;
    width: 100%;
}

.label {
    color: var(--color-primary);
    text-transform: uppercase;
    font-size: calc(var(--size-unit) * 5);
    line-height: 100%;
    letter-spacing: 1px;
    font-weight: 500;

    margin-bottom: calc(var(--size-unit) * 2);
}



.title {
    font-size: calc(var(--size-unit) * 13.5);
    @media (max-width: 768px) {
        font-size: calc(var(--size-unit) * 9);
    }
}

.sub-title {
    font-size: calc(var(--size-unit) * 10);
    @media (max-width: 768px) {
        font-size: calc(var(--size-unit) * 7);
    }
}

.title,
.sub-title {
    font-family: 'ClashDisplay', sans-serif;
    font-variation-settings: 'wght' 430;
    font-weight: 500;
    color: var(--color-white);
    line-height: 110%;
}

.text {
    font-size: calc(var(--size-unit) * 4.5);
    line-height: 140%;
    font-weight: 400;
    color: var(--color-white);
    padding: calc(var(--size-unit) * 8) calc(var(--size-unit) * 40) 0 calc(var(--size-unit) * 40);
    @media (max-width: 768px) {
        padding: 0;
    }
}


@media (max-width: 768px) {
    .label {
        font-size: calc(var(--size-unit) * 4);
        text-align: left;
    };
    .title {
        font-size: calc(var(--size-unit) * 8);
        text-align: left;
    };
    .text {
        padding: calc(var(--size-unit) * 8) calc(var(--size-unit) * 0) 0 calc(var(--size-unit) * 0);
        text-align: left;
    };
}