/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&display=swap');


:root {
    --bs-primary: #057cdd;
    --bs-primary-darker: #022750;
    --bg-prime: #f7fcff;
    --bg-prime-dark: #5d5d51;
    --text-heading: #313131;
}

.bg-prime { background-color:var(--bg-prime); }
.bg-prime-dark { background-color:var(--bg-prime-dark); }






/* Bootstrap Overrides */
.text-primary { color:var(--bs-primary) !important; }
.bg-primary { background-color: var(--bs-primary) !important; }
.border-primary { border-color: var(--bs-primary) !important; }
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}
a.text-primary:hover, a.text-primary:focus {
    color: var(--bs-primary) !important;
}
.nav-link { color: var(--bs-primary); }





body {
    font-family: 'Inter', sans-serif; font-size:17px; color:#313131; line-height:1.6;
}



h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif; font-weight:800; color:var(--text-heading);
}



section {
    h2 { font-size:2.2rem; margin-bottom:1.8rem; }
}


.triangle-bottom { position:relative;
    &:after { content:""; position:absolute; bottom:-0; left:0; width:100%; height:30px;
        background-image:url('images/triangle.svg'); background-repeat:no-repeat; background-size:contain; background-position:bottom center;
    }
}



.hero {
    background:url('images/hero-banner.png') no-repeat center center;
    background-size:cover;
    .logo { max-width:120px; margin-bottom:1.5rem; }
    h1 { font-size:56px; margin-bottom:2rem; }
}



/* .hero-block {
    aspect-ratio:16/9; background-color:#000; color:#f1f1f1;
    background-image:url('images/server-racks-3.png'); background-size:contain; background-position:bottom right; background-repeat:no-repeat;
} */

.cta { position:fixed; bottom:1em; left:50%; transform:translateX(-50%); }