:root {
    --primary: #0048BA;
    --secondary: #005f92;
    --tertiaty: #efefef;
}

html,
body {
    font-family: 'Montserrat', sans-serif;
}

p {
    font-size: clamp(1rem, 2vw, 1.5rem);
}

.curve {
    position: absolute;
    fill: white;
    width: 100%;
    height: auto;
    z-index: 0;
    left: 0;
}

.curve--bottom {
    bottom: -2px;
}

.curve--top {
    top: -2px;
    transform: rotate(180deg);
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Playfair Display', serif;
    line-height: 1.3;
    margin-bottom: 1em;
}

h3 {
    font-size: clamp(1.25rem, 5vw, 2.25rem);
}

h1:nth-child(1),
h2:nth-child(1),
h3:nth-child(1),
h4:nth-child(1),
h5:nth-child(1) {
    margin-top: 0;
}

.text--small {
    font-size: 0.875rem;
}

.button,
a.button,
.woocommerce a.button,
button,
input[type="submit"],
input[type="button"] {
    border-bottom: 3px solid #002a6d;
}

.button--outline,
a.button--outline {
    border: .2em solid var(--primary);
}

/***************************************************************
# Header
***************************************************************/

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: none;
    color: white;
    font-weight: bold;
}

.admin-bar .site-header {
    top: 2rem;
}

.site-header__col--logo {
    max-width: 6rem;
}

.site-header__col--button {
    display: block;
}

.site-header__col--navigation {
    display: none;
}

.site-header__button {
    cursor: pointer;
    text-transform: uppercase;
}

.site-header__button svg {
    width: 1.5em;
    height: auto;
    fill: currentColor;
    vertical-align: bottom;
    margin-right: 0.25em;
}


@media(min-width: 56rem) {

    .site-header__col--logo {
        max-width: none;
    }

    .site-header__col--button {
        display: none;
    }

    .site-header__col--navigation {
        display: block;
    }

}



/***************************************************************
# Footer
***************************************************************/

.site-footer {
    background: var(--primary);
    color: white;
    padding: 4rem 0;
    text-align: center;
    position: relative;
    z-index: 1;
    padding-top: calc(1rem + 8%);
}

.site-footer a {
    text-decoration: none;
    color: inherit;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer a {
    color: inherit;
}

.site-footer__row {
    display: flex;
    flex-flow: column;
    gap: 1.5rem;
}

.site-footer__col {}

.site-footer__contact-item {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    margin: .5em 0;
}

.site-footer__contact-icon {
    display: inline-block;
    vertical-align: middle;
    background: white;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    position: relative;
    margin-right: 0.25em;
}

.site-footer__contact-icon svg {
    width: 40%;
    fill: var(--primary);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


@media(min-width: 64rem) {

    .site-footer__row {
        flex-flow: row;
        justify-content: space-between;
        align-items: center;
    }

    .site-footer__col {
        max-width: 24rem;
    }

    .site-footer__col:first-child {
        text-align: left;
    }

    .site-footer__col:last-child {
        text-align: right;
    }

}



/***************************************************************
# Mobile menu
***************************************************************/

.mobile-menu__button {
    background: var(--tertiaty);
    color: var(--primary);
    border-radius: .5rem;
    margin: 5%;
}

.mobile-menu li {
    margin: 1rem 0;
}

.mobile-menu__background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
    filter: blur(0.5em);
    mix-blend-mode: multiply;
    max-width: none;
}

/***************************************************************
# Block - Page Header
***************************************************************/

.page-header {
    text-align: center;
    background: var(--primary);
    color: white;
    position: relative;
    padding: 6rem 0 14%;
    z-index: 1;
}

.page-header__title {
    margin: 0;
    color: inherit;
}

.page-header__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .15;
    z-index: -2;
    filter: grayscale(1);
}

@media(min-width: 52rem) {

    .page-header {
        padding: 7rem 0 9%;
    }

}


/***************************************************************
# Home
***************************************************************/

.page-template-home .site-header {
    color: var(--primary);
}

/* Hero */

.hero {
    position: relative;
    z-index: 1;
    padding-top: 9rem;
    padding-bottom: 12%;
}

.hero__heading {
    font-size: clamp(3rem, 8vw, 5rem);
}

.hero__content {
    max-width: 56rem;
}

.hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .15;
    z-index: -2;
}

.hero .button-container {
    margin-top: 2rem;
}

/* Panels */

.panels p {
    font-size: 1rem;
}

.panels__item-title {
    font-size: clamp(1.2rem, 10vw, 1.6rem);
}

.panels__item svg {
    fill: var(--primary);
    margin: 0 auto 2rem auto;
    width: 3rem;
    height: auto;
}

.panels__row {
    display: flex;
    flex-flow: column;
    gap: 1em;
    text-align: center;
}

.panels__item {
    background: whitesmoke;
    padding: 16% 8%;
    border-radius: 0.5rem;
    height: 100%;
    display: flex;
    flex-flow: column;
}

.panels__item .button {
    margin-top: auto;
}

@media(min-width: 48rem) {

    .panels__row {
        flex-flow: wrap;
        justify-content: center;
        gap: 0;
        margin: 0rem -1rem;
    }

    .panels__col {
        padding: 1rem;
        width: 50%;
    }

}


@media(min-width: 72rem) {

    .panels__col {
        width: 25%;
    }

}



/* Image banner */

.image-banner {
    display: flex;
    position: relative;
}

.image-banner__item {
    position: relative;
    padding-top: 55%;
    width: 100%;
}

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



/* Contact */

.contact__item {
    display: block;
    margin: 1rem 0;
    text-decoration: none;
    font-size: clamp(1rem, 4vw, 2rem);
    font-family: 'Playfair Display', serif;
    color: var(--primary);
}

.contact__icon {
    display: inline-block;
    vertical-align: middle;
    background: var(--primary);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    position: relative;
    margin-right: 0.5em;
}

.contact__icon svg {
    width: 40%;
    fill: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.contact__row {
    display: flex;
    flex-flow: column;
    gap: 2rem;
}

@media(min-width: 72rem) {

    .contact__row {
        flex-flow: wrap;
    }

    .contact__col {
        width: calc(50% - 1rem);
    }

}




/***************************************************************
# Block > Side by side
***************************************************************/

.side-by-side__row {
    display: flex;
    flex-flow: column;
    gap: 4vw;
    margin: 10% auto;
    max-width: 52rem;
    align-items: center;
}

.side-by-side__col {
    flex: 1;
}

.side-by-side__col--image img {
    border: 2vw solid white;
    box-shadow: 0rem 0.2rem 0.6rem rgba(0, 0, 0, 0.2);
    transform: rotate(1deg);
}

.side-by-side__row:nth-child(even) .side-by-side__col--image img {
    transform: rotate(-1deg);
}



@media(min-width: 72rem) {

    .side-by-side__row {
        flex-flow: row;
        gap: 4rem;
        margin: 10% 0;
        max-width: none;
    }

    .side-by-side__row:nth-child(even) {
        flex-flow: row-reverse;
    }

    .side-by-side__col {
        flex: 1;
    }

    .side-by-side__col--image img {
        border-width: 1rem;
    }

}



/***************************************************************
# Block > Side by side
***************************************************************/

.banner-1__inner {
    background: whitesmoke;
    padding: 8%;
    border-radius: 0.5rem;
    border-bottom: .5rem solid var(--primary);
    text-align: center;
}

.banner-1__inner p {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}


/***************************************************************
# Block > Heading / Text / Button
***************************************************************/


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





/***************************************************************
# Block > Image gallery
***************************************************************/

.image-gallery__container {
    display: flex;
    flex-flow: column;
    gap: 4vw;
}

@media(min-width: 48rem) {

    .image-gallery__container {
        flex-flow: wrap;
        gap: 0;
        margin: 1rem -.75rem;
    }

    .image-gallery__item {
        padding: .75rem;
        width: 100%;
    }

    .image-gallery__container--2-columns .image-gallery__item {
        width: 50%;
    }

    .image-gallery__container--3-columns .image-gallery__item {
        width: 33.3333%;
    }

}



/***************************************************************
# Block > Icon text grid
***************************************************************/

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

.icon-text-grid__container {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    gap: 4rem;
    margin-top: 4rem;
}

.icon-text-grid__item {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 20rem;
}

.icon-text-grid__icon {
    position: relative;
    width: 5rem;
    height: 5rem;
    background-color: whitesmoke;
    border-radius: 50%;
}

.icon-text-grid__icon svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: auto;
    fill: var(--primary);
}

.icon-text-grid__text {
    color: var(--primary);
    font-weight: bold;
    flex: 1;
}


/***************************************************************
# Block > Banner #2
***************************************************************/

.banner-2 {
    background: var(--primary);
    color: white;
    position: relative;
    padding-top: 12%;
    padding-bottom: 12%;
    text-align: center;
    z-index: 1;
}

.banner-2__heading {
    color: inherit;
}

.banner-2__container {
    display: flex;
    flex-flow: column;
    gap: 5vw;
}

.banner-2__item {
    background: white;
    padding: 10%;
    color: var(--primary);
    border-radius: .5rem;
    display: flex;
    flex-flow: column;
    gap: 3vw;
}

.banner-2__icon {}

.banner-2__icon svg {
    width: 2.5rem;
    height: auto;
    fill: var(--primary);
}

.banner-2__text {
    font-weight: bold;
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    line-height: 1.2;
}

.banner-2__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.1;
}

@media(min-width: 44rem) {

    .banner-2__container {
        flex-flow: wrap;
        gap: 1.5rem;
        justify-content: center;
    }

    .banner-2__item {
        gap: 0.6rem;
        padding: 2rem;
        width: calc(50% - 1rem);
    }

}

@media(min-width: 64rem) {


    .banner-2__item {
        width: calc(33.3333% - 1rem);
    }

}





/***************************************************************
# Block > Steps
***************************************************************/


.steps {
    position: relative;
    background: whitesmoke;
    padding: 7% 0;
}

.steps__number {
    position: absolute;
    font-family: 'Playfair Display', serif;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary);
    font-size: 1.8rem;
    background: white;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 0.2rem solid var(--primary);
    text-align: center;
    line-height: 1.1;
}

.steps__item {
    margin: 1rem 0;
    background: white;
    padding: 5%;
    border-left: .25rem solid var(--primary);
    position: relative;
    margin-top: 2.5rem;
    padding-top: 2.5em;
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.steps__image {
    display: none;
}

.steps__heading {
    text-align: center;
}


@media(min-width: 48rem) {

    .steps__heading {
        font-size: clamp(2rem, 5vw, 4rem);
    }

    .steps__item {
        padding: 2rem 3rem;
    }

    .steps__number {
        top: 50%;
        left: -2px;
    }

    .steps__container {
        margin-left: 33.333333%;
    }

    .steps__image {
        display: block;
        position: absolute;
        z-index: 1;
        width: 40%;
        height: 50%;
        object-fit: cover;
        right: 73%;
        border: .5rem solid white;
        box-shadow: 0rem 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }

    .steps__image--1 {
        bottom: 52%;
        transform: rotate(1deg);
    }

    .steps__image--2 {
        top: 52%;
        transform: rotate(-3deg);
    }

}