@import url("xs.css") screen and (max-width: 600px);
@import url("s.css") screen and (min-width: 600px);
@import url("m.css") screen and (min-width: 768px);
@import url("l.css") screen and (min-width: 992px);
@import url("xl.css") screen and (min-width: 1200px);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 20px;
    font-weight: 200;
    color: black;
}

html {
    overflow-y: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

header {
    position: fixed;
    width: 100%;

    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;

    padding: 4vh 4vw;
    background-color: white;
}

header a {
    display: block;
}

nav {
    display: flex;
    gap: 3vmax;
}

nav a {
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

section {
    margin: 0 auto;
    min-height: 100vh;
}

h2 {
    /* scroll-snap-align: start; */
    /* scroll-snap-stop: always; */
}

hr {
    height: 5px;
    border: none;
    background-color: #EBEBEB;
    margin: 5vh 0;
}

p {
    margin-bottom: 1vh;
}

@property --from {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

.metric {
    font-weight: 900;
    color: #00CD4A;
    font-size: 60px;
}

span.counter {
    color: #00CD4A;
    font-size: 60px;
    font-weight: 900;
    transition: --from 1s;
    counter-reset: int var(--from);
    animation: counter var(--time, 1000) forwards ease-in-out;
}

.counter::after {
    content: counter(int);
}

@keyframes counter {
    to {
      --from: var(--to, 100);
    }
}

#services {
    flex-flow: column wrap;
}

.card {
    padding: 30px;
    border-radius: 10px;
    min-width: 300px;
}

.card .content {
    min-height: max(20vh);
}

b {
    font-weight: 500;
}

a.lets-talk {
    color: white;
    font-weight: 500;
    background-color: black;
    text-decoration: none;
    padding: 0.67rem 1rem;
    border-radius: 8px;

    display: block;
    max-width: fit-content;
    margin: 0 auto;
    margin-top: 24px;
}

ul {
    list-style-position: inside;
}

#home {
    display: flex;
    align-items: center;
    background-size: 75vh;
    background-repeat: no-repeat;
    background-position: 80% center;
    background-image: url("data:image/svg+xml,%3Csvg width='603' height='527' viewBox='0 0 603 527' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.90348 0H207.942L398.174 252.717L204.662 524.675H0L194.048 260.679L5.90348 0Z' fill='url(%23paint0_linear_57_104)'/%3E%3Cpath d='M396.156 1.20894L323.844 108.506L419.043 235.019L590.968 1.20894H396.156ZM417.749 273.278L319.431 411.527L395.391 526.303H602.5L417.749 273.278Z' fill='%23F4F4F4'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_57_104' x1='-1.88183e-05' y1='262.338' x2='880.876' y2='305.269' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2300FF5E'/%3E%3Cstop offset='1' stop-color='%2300FF5E' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

span.ButtonBase__Ellipsis-sc-p43e7i-5.dqiKFy {
    color: white;
    font-weight: 500;
}

footer {
    align-self: flex-end;
}

h1, h2, h3 {
    font-weight: 200;
}