@font-face {
    font-family: "Catamaran";
    src: url("/wp-content/themes/twentytwentyfive-child/assets/fonts/Catamaran-VariableFont_wght.ttf");
}

body {
  font-family: "Catamaran", system-ui, Lato, "Lucida Grande", Tahoma, Sans-Serif;
}

.fs-c {
    font-family: "Catamaran";
}

.btn-xl {
    text-transform: uppercase;
    padding: 1.5rem 3rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
    background-color: #33ddaa;
    border: 0;
}

.navbar-custom {
    padding-top: 1em;
    padding-bottom: 1em;
    background-color: rgba(0, 0, 0, 0.2);
}

.navbar-brand {
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.1rem;
    font-weight: 700;
}

.navbar-nav > .nav-item > .nav-link {
    text-transform: uppercase;
    color: rgba(0, 0, 0, .8);
    font-size: 1.2em;
    font-weight: 800;
    letter-spacing: 0.1rem;
}

.masthead {
    position: relative;
    overflow: hidden;
    padding-top: calc(50vh - 10rem);
    padding-bottom: calc(20vh + 2rem);
    background: linear-gradient(0deg, #ddffaa 0%, #c9eecc 100%);
    font-size: 5em;
}

.masthead > .masthead-content {
    z-index: 1;
    position: relative;
}

.masthead-heading {
    font-family: 'Catamaran';
    font-size: 4rem;
    font-weight: 900;
}

.masthead-subheading {
    font-family: 'Catamaran';
    font-size: 3rem;
    font-weight: 500;
}   

.masthead > .bg-circle {
    z-index: 0;
    position: absolute;
    border-radius: 100%;
    background: linear-gradient(0deg, #c9eecc 0%, #ddffaa 100%);
}

.masthead > .bg-circle-1 {
    height: 85rem;
    width: 85rem;
    bottom: -22rem;
    left: -22rem;
}

.masthead > .bg-circle-2 {
    height: 50rem;
    width: 50rem;
    top: -25rem;
    right: -25rem;
}

.masthead > .bg-circle-3 {
    height: 30rem;
    width: 30rem;
    bottom: -10rem;
    right: 5%;
}

.masthead > .bg-circle-4 {
    height: 30rem;
    width: 30rem;
    top: -5rem;
    right: 35%;
}

.content-bg {
    overflow: hidden;
    position: relative;
}

.content-bg > .content-bg-circle {
    z-index: -1;
    position: absolute;
    border-radius: 100%;
    background: linear-gradient(90deg, #ddffaa 0%, #c9eecc 100%);
}

.content-bg > .content-bg-circle-1 {
    height: 10em;
    width: 10em;
    bottom: 25%;
    left: 70%;
}

.content-bg > .content-bg-circle-2 {
    height: 10em;
    width: 10em;
    bottom: 10%;
    left: -1em;
}

.content-bg > .content-bg-circle-3 {
    height: 15em;
    width: 15em;
    bottom: 50%;
    left: 70%;
}

.content-bg > .content-bg-circle-4 {
    height: 15em;
    width: 15em;
    top: -10%;
    left: -20%;
}

.large-gap {
    margin-top: 10vh;
}