:root {

    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;

    /* --bg: #E4E1D7;
    --bg-light: #f5f2e7;
    --bg-green: #1D2B28;
    --bg-green-light: #293834;
    --bg-green-lighter: #2b3b37;
    --iconcolor: #F8D648; */

    /* --bg: #F5F5F5; */

    /* colors */

    /* --primary: #001f3f;  */
    --primaryLight:#032444;
    /* --secondary: #00E5FF; */
    /* --bg: #FAFAFA; */
    --bg2: #f7f3ee;
    /* --headerColor: #001f3f; */
    /* --bodyTextColor: #001f3f; */
    --bodyTextColorWhite: #fafbfc;

    --primary: #12181F; 
    --secondary: #00E5FF;

    --nav:#12181F;
    --nav2:#1F2A33;
    --nav3:#1F2A33;

    --headerColor: #eff4f8;
    --bodyTextColor: #E8EDF1;
    --secondary: #00E5FF;
    
    --bg: #0B0E11;

    --borderRadius: 2rem;
    /* --shadow: 0px 4px 4px #00000030, 0px 12px 12px #00000015; */
    --shadow: 0px 4px 4px #ffffff20, 0px 12px 16px #ffffff10;


    /* colors 
    
    Palette 3 — Dark Blue-Gray + Teal

    Primary: #12181F (Dark Blue-Gray)
    Secondary: #1F2A33 (Cool Graphite)
    Accent: #2EC4B6 (Vibrant Teal)
    Background: #0B0E11 (Almost Black)
    Text: #E8EDF1 (Soft White)
    
    
    
    
    */


}

@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/montserrat-v31-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/montserrat-v31-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/montserrat-v31-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/montserrat-v31-latin-900.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

html {
  scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family:'Montserrat', 'Arial Narrow', Arial, sans-serif;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}
                        
/* CTA Buttons */


.cs-button-solid {
    font-size: 1.1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #E8EDF1;
    padding: 0 2rem;
    background-color: var(--primary);
    overflow: hidden;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    border-radius: 57px;
    border: 4px solid transparent;
    border-color: var(--secondary);
    transition: background-color .3s, color .3s, border-color .3s, transform .2s;

}

.cs-button-solid:hover {
    border-color: var(--secondary);
    background-color: var(--secondary);
    color: black;
}

.cs-nav-button {
    line-height: 2.875rem;
    margin-left: 1.5rem;
}