@import url('reset.css');
@import url('buttons.css');
@import url('header.css');
@import url('hero.css');
@import url('statement.css');
@import url('steps.css');
@import url('tagline.css');
@import url('footer.css');

@font-face {
    font-family: 'ClashDisplay';
    src: url('../assets/fonts/ClashDisplay-Variable.woff2') format('woff2'),
        url('../assets/fonts/ClashDisplay-Variable.woff') format('woff'),
        url('../assets/fonts/ClashDisplay-Variable.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.circle {
    position: absolute;
    top: -200px;
    left: 50%;
    border-radius: 50%;
    transform: translateX(-50%);
    background: #000005;
    filter: blur(80px);
    width: calc(100dvw + 800px);
    height: 100dvh;
    z-index: 200;
}

.glass {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.glass::before {
    content: "";
    position: absolute;
    inset: -180px;
    clip-path: inset(180px 180px 180px 180px);
    filter: blur(90px);
}

.glass::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 0%,
            black 70%,
            rgba(255, 255, 255, 0.05) 100%);
    mix-blend-mode: overlay;
    opacity: 0.2;
}

.container-glass {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: absolute;
    z-index: 400;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

@media (min-width: 1024px) {
    .circle {
        top: -800px;
        width: 1800px;
        height: 1347.5px;
    }
}

@media (max-width:1024px) {
    .container-glass {
        grid-template-columns: repeat(8, 1fr);

    }
}

@media (max-width:640px) {
    .container-glass {
        grid-template-columns: repeat(4, 1fr);

    }
}