@import url("https://use.typekit.net/sur0eov.css");

html {
    scroll-behavior: smooth;
}

body {
    background: #fcf8f0;
    color: #333;
    font-family: "roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    line-height: 1.6;
    letter-spacing: 0.01em;
}


h1, h2, h3, h4, h5, h6 {
    font-family: georgiapro, sans-serif;
    font-weight: 600;
    color: #3d1824;
    line-height: 1.2;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
}

.fg-white h1, .fg-white h2, .fg-white h3, .fg-white h4, .fg-white h5, .fg-white h6, .fg-white .h1-subtitle, .fg-white .h2-subtitle {
    color: #fff;
}

h1 {
    font-size: 3.5em;
    line-height: 1.2;
    margin-top: 0.5em;
}

header .logo {
    max-width: 225px;
    width: 75%;
}

#main-menu {
    width: 100%;
}

.top-bar, .top-bar ul {
    background-color: transparent;
    padding: 0;
}


.top-bar ul li a {
    color: #3d1824;
    border-bottom: solid 3px #3e67ee;
    margin: 0 .5rem;
    padding: 0.75rem 0.4rem;
    font-weight: 600;
}

.top-bar ul li a:hover {
    border-bottom: solid 3px #f92868;
    font-weight: 600;
}

.button {
    background-color: #f92868;
    font-weight: bold;
    padding: 1rem 2rem;
    border-radius: 10px;
}

.button:hover {
    background-color: #3e67ee;
}

.button.primary, .button.primary.disabled, .button.primary.disabled:focus, .button.primary.disabled:hover, .button.primary[disabled], .button.primary[disabled]:focus, .button.primary[disabled]:hover {
    background-color: #f92868;
    color: #FFF;
}

.button.secondary, .button.secondary.disabled, .button.secondary.disabled:focus, .button.secondary.disabled:hover, .button.secondary[disabled], .button.secondary[disabled]:focus, .button.secondary[disabled]:hover {
    background-color: transparent;
    border: solid 2px #f92868;
    font-weight: bold;
    padding: 1rem 2rem;
    border-radius: 10px;
    color: #333;
}

.button.secondary:hover {
    border: solid 2px #3e67ee;
    background-color: transparent;
    color: #333;
}


.brain-heart-soul-divider {
    max-width: 350px;
    margin: 2rem 0;
    width: 80%;
    height: auto;
}


p.h1-subtitle {
    color: #898185;
    font-size: 1.5em;
    margin-top: -0.75rem;
    margin-bottom: 1.5rem;
}

p.h2-subtitle {
    color: #898185;
    font-size: 1.4em;
    margin-top: -0.75rem;
    margin-bottom: 1.5rem;
}

hr {
    margin: 2rem auto;
    border-bottom: 1px solid #3d1824;
}

hr.bhs {
    background-image: url('../images/brain-heart-soul.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 50px;
    border-bottom: none;
}

hr.no-border {
    border-bottom: none;
}

hr.larger-margin {
    margin: 4rem auto;
}

hr.extra-large-top-bias {
    margin: 7rem auto 2rem;
}

hr.extra-large-bottom-bias {
    margin: 2rem auto 7rem;
}

.callout {
    border-radius: 1rem;
    border: none;
}

.callout p:last-of-type {
    margin-bottom: 0;
}

blockquote {
    border-left: solid 3px #3d1824;
    padding: 2rem 2rem 1rem;
    margin: 2rem 0;
}

blockquote p {
    font-family: georgiapro, sans-serif;
    font-size: 1.5em;
    line-height: 1.2;
    color: #3d1824;
    font-style: italic;
}

.card.no-margin-bottom {
    margin-bottom: 0;
}

.card {
    border: none;
    border-radius: 25px;
}

.card .card-section {
    padding: 2rem;
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
    margin-top: 0;
}

.blog-featured-image-container {
    max-height: 25rem;
    overflow: hidden;
    border-radius: 1rem;
}

.image-container {
    display: flex;
    align-items: center;
    flex-shrink: 1; /* Allow flex items to shrink if necessary */
    max-width: 100%; /* Ensure the image container doesn't exceed the parent width */
    height: 100%;
    width: 100%;
}

.image-container.rounded {
    border-radius: 25px;
    overflow: hidden;
}

.full-height-image {
    width: 100%; /* Make the image fit the width of the container */
    height: 100%; /* Make the image fill the height of the container */
    object-fit: cover; /* Ensures the image maintains aspect ratio and fills the height */
}

#team-image {
    overflow: hidden;
    border-radius: 25px;
    margin-right: 1rem;
}

#top {
    position: relative;
}

.inline-mailing-list-form {
    margin: 3rem auto;
    max-width: 600px;
}

.inline-mailing-list-form .button, .inline-mailing-list-form .gh-input {
    margin-bottom: 0;
    border-radius: 10px;
}

#header-cta-button-container {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.comparison-arrow .arrow-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.comparison-arrow .arrow-circle i {
    color: #fff; /* white arrow */
    font-size: 18px;
}

.comparison-from p:last-of-type, .comparison-to p:last-of-type {
    margin-bottom: 0;
}

.comparison-from p.comparison-title, .comparison-to p.comparison-title {
    margin-bottom: 1rem;
}


.comparison-title {
    font-size: 0.8em;
    text-transform: uppercase;
}

.comparison-from h3 {
    text-decoration: line-through;
    text-decoration-color: #66273a; /* or any colour */
    text-decoration-thickness: 3px; /* optional for emphasis */
}

#homepage-mailinglist .inline-mailing-list-form {
    max-width: inherit;
}

#homepage-mailinglist .inline-mailing-list-form .gh-form-fields {
    margin-bottom: 1rem;
}

#homepage-mailinglist .inline-mailing-list-form input, #homepage-mailinglist .inline-mailing-list-form button {
    font-size: 1.1em;
}

.gh-form-wrapper > .gh-success {
    color: #FFF;
    background-color: #3e67ee;
    margin-bottom: 1rem;
    padding: 1rem;
}

.icon-card {
    position: relative;
}

.icon-card h3 {
    font-size: 1.2em;
    max-width: 70%;
}

.icon-card .icon-card-icon {
    height: 50px;
    width: 50px;
    position: absolute;
    top: 1rem;
    right: 1rem;
    overflow: hidden;
}

.icon-card .icon-card-icon img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center center;
}

.linkedin-icon {
    background-color: #0072b1;
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    font-size: 2.3em;
}

.linkedin-icon:hover {
    background-color: #065e8c;
    color: #FFF;
}

#homepage-barriers h3 {
    font-size: 1.25em;
    background-color: #66273a;
    color: #FFF;
    padding: 1rem;
}

#transformation-feature h3 {
    line-height: 1.6;
}

.feature-card strong {
    padding: .5rem 1rem;
    display: block;
    background-color: #f92868;
    border-radius: 25px;
    color: #FFF;
}

.feature-card#feature-card-1 strong {
    background-color: #3e67ee;
}

.feature-card#feature-card-2 strong {
    background-color: #f92868;
}

.feature-card#feature-card-3 strong {
    background-color: #d4dd1f;
}

/* Colours */

.bg-white {
    background-color: #fff;
}

.bg-darkgrey {
    background-color: #333;
}

.bg-pink {
    background-color: #f92868;
}

.bg-blue {
    background-color: #3e67ee;
}

.bg-limeyellow {
    background-color: #d4dd1f;
}

.bg-deepbrown {
    background-color: #3d1824;
}

.bg-wine {
    background-color: #66273a;
}

.bg-warmgrey {
    background-color: #898185;
}

.bg-midgrey {
    background-color: #5b5458;
}

.bg-dustyrose {
    background-color: #af8593;
}

.bg-palebeige {
    background-color: #efe8df;
}

.bg-softbeige {
    background-color: #f7f0e2;
}

.bg-eggshell {
    background-color: #fffcf8;
}

.fg-white {
    color: #fff;
}

.fg-darkgrey {
    color: #333;
}

.fg-pink {
    color: #f92868;
}

.fg-blue {
    color: #3e67ee;
}

.fg-limeyellow {
    color: #d4dd1f;
}

.fg-deepbrown {
    color: #3d1824;
}

.fg-wine {
    color: #66273a;
}

.fg-warmgrey {
    color: #898185;
}

.fg-midgrey {
    color: #5b5458;
}

.fg-dustyrose {
    color: #af8593;
}

.fg-palebeige {
    color: #efe8df;
}

.fg-softbeige {
    color: #f7f0e2;
}

.fg-eggshell {
    color: #fffcf8;
}


/* End of colours */


/* Small Screens */

@media screen and (max-width: 63.9375em) {
    body {
        font-size: 14px;
    }


    h1 {
        font-size: 2.5em;
    }

    h1 br {
        display: none;
    }

    hr.bhs {
        background-size: 70%;
    }

    p.h2-subtitle, p.h1-subtitle {
        font-size: 1.2em;
    }

    .comparison-arrow .arrow-circle {
        width: 30px;
        height: 30px;
    }

}