@charset "UTF-8";

/* Google Fonts - Noto Serif & Manrope */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

/* Color 
=============================== */
:root {
    --white: #FFF;
    --bg-80: rgba(254, 249, 239, 0.8);
    --bg-90: rgba(254, 249, 239, 0.9);
    --bg-100: #FEF9EF;
    --bg-accent-gr: #E9F4EE;
    --bg-accent-yl: #FFF0D4;

    --accent-70: rgba(185, 230, 230, 0.7);
    --accent-90: rgba(185, 230, 230, 0.9);

    --shadow: rgba(57, 57, 57, 0.1);

    --accent-br: #F2EDE4;
    --accent-yl: #FFCA6A;
    --accent-tl: #00A2A2;

    --service-pk: #D97F77;
    --service-gr: #3B815B;
    --service-bl: #3A7AB6;

    --outline-20: rgba(225, 217, 204, 0.2);
    --outline-40: rgba(225, 217, 204, 0.4);
    --outline-60: rgba(225, 217, 204, 0.6);
    --outline-80: rgba(225, 217, 204, 0.8);
    --outline-100: #E1D9CC;

    --stroke-100: #F2EDE4;

    --primary-100: #1B3C68;
    --secondary-100: #506176; 
    --tertiary-100: #E1D9CC;

    --img-corners: 20px;
}

/* Body 
=============================== */
*,
html,
body {
    box-sizing: border-box;
    font-family: "Manrope", sans-serif;
    line-height: 1.5;
    color: var(--primary-100);
}
#services {
  scroll-margin-top: 150px;
}
html {
    background: var(--bg-100);
    scroll-behavior: smooth;
}
body {
    margin: 0;
}
#main-content {
    padding-top: 116px; /* Leave space for the fixed header*/
}
main {
    transition: all 0.3s ease-in-out;
}


/* Links */
a {
    text-decoration: none;
    color: var(--primary-100);
    font-weight: 500;
    transition: filter 0.3s ease-in-out;
}
a:hover {
    filter: brightness(1.3);
}

/* Max Width */
.header-inner,
.footer,
.cta-inner {
    max-width: 1160px;
    margin: auto;
}

/* Text */
h1, 
h2, 
h3,
h4,
h1 em, 
h2 em, 
h3 em {
    font-family: "Noto Serif", serif;
    font-weight: 400;
}
/* Hero h1 */
h1 {
    font-size: 3.2em;
    margin-bottom: 0;
}
h1 span,
h2 span {
    font-family: "Noto Serif", serif;
    font-weight: 400;
    font-style: italic;
    color: var(--accent-tl);
}
/* Front Page Hero h1 */
.video-hero .section-title {
    font-size: 4em;
}
h2 {
    font-size: 2.5em;
    line-height: 1.3;
    margin-bottom: 0;
}
h3 {
    font-size: 1.6em;
}
h4 {
    font-size: 1.5em;
}
/* Eyebrow */
h5 {
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 1.1em;
    color: var(--secondary-100);
}
/* Paragraph */
p {
    color: var(--secondary-100);
    font-weight: 400;
}
.lg-text {
    font-size: 1.5em;
    margin-bottom: 3.5em;
}
.med-text {
    font-size: 1.2em;
}

/* Additional - Blog */
.p2 {
    font-size: 14px;
    margin: 0 0 4px;
}

header ul,
footer ul {
    list-style: none;
    padding: 0;
}

h3 em {
    color: var(--accent-tl);
}
.sub-text {
    font-family: "Noto Serif", serif;
    font-style: italic;
    font-size: 1.1em;
}
hr {
    border-color: var(--outline-40);
    margin: 48px 0;
}

/* Button 
=============================== */
.pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    padding: 1em 1.5em;
    border-radius: 999px;
    text-decoration: none;
    font-size: 1em;
    font-weight: 700;
    transition: 
        filter 0.3s ease-in-out,
        transform 0.3s ease-in;
    max-width: fit-content;
    background: var(--accent-yl);
    color: var(--primary-100);
    outline: 1px solid var(--accent-yl);
}

/* Inside Pages 
=============================== */
.page-shell .page-hero {
    padding: 80px 2em 0;
    text-align: center;
}
.page-shell .services,
.page-shell .faq {
    padding: 4em 2em;
}

/* Large Screens 
=============================== */
@media only screen and (max-width: 1200px) {
    .logo-grid {
        max-width: 800px;
        margin: auto;
    }
}
@media only screen and (max-width: 1024px) {
    .lg-text {
        margin-bottom: 2.5em;
    }
}

/* Small Screens
=============================== */
@media only screen and (max-width: 768px) {
    #main-content {
        padding-top: 88px;
    }
    .page-shell .faq {
        padding: 20px 2em;
    }
    .section { 
        padding: 54px 0; 
    }
    /* Fonts */
    .lg-text {
        font-size: 1em;
    }
    .med-text {
        font-size: 1em;
    }
    h1 {
        font-size: 2em;
        line-height: 1.3;
    }
    h2 {
        font-size: 1.7em;
        line-height: 1.3;
        margin-bottom: 0;
    }
    h3 {
        font-size: 1.3em;
    }
    h4 {
        font-size: 1.2em;
    }
    h5 {
        font-size: 0.8em;
        margin: 1em 0;
    }
    p {
        font-size: 1em;
        line-height: 1.7;
    }
}

@media only screen and (max-width: 480px) {
    .page-shell .services, 
    .page-shell .faq {
        padding: 20px 1em;
    }
}