@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');
@font-face {
    font-family: 'Clash Grotesk';
    src: url('assets/fonts/ClashGrotesk-Extralight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Grotesk';
    src: url('assets/fonts/ClashGrotesk-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Grotesk';
    src: url('assets/fonts/ClashGrotesk-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Grotesk';
    src: url('assets/fonts/ClashGrotesk-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Grotesk';
    src: url('assets/fonts/ClashGrotesk-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Grotesk';
    src: url('assets/fonts/ClashGrotesk-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



:root {
  

}

body,
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: "Instrument Sans", sans-serif;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'Clash Grotesk', sans-serif;
}

.hero-image{
    position: relative;

    &:before{
        content: "";
        position: absolute;
        bottom: 0;
        left: -80px;
        right: -80px;
        background: #e7e7e7;
        top: -20%;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
    }
}

.hero-title{
    h1{
        font-size: clamp(2.5rem,7.5rem,9.5vw);
    }
}

.header{
    nav{
        

        ul{
            a{
                position: relative;

                &:before{
                    content: "";
                    width: 0;
                    height: 1px;
                    background: black;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    transition: all 0.3s ease-out;
                }

                &:hover:before{
                    width: 100%;
                    left: 0;
                }
            }
        }
    }
}

.header-cta{
    position: relative;
    z-index: 1;
    transition: all 0.3s ease-out;

    &:before{
        content: "";
        position: absolute;
        left: 0;
        height: 100%;
        z-index: -1;
        background: #262626;
        transition: all 0.3s ease-out;
        top: 0;
        width: 0;
    }
    &:hover{
        color: white;
    }
    &:hover:before{
        width: 100%;
    }
    p{
        border-bottom: 1px solid black;
    }
}

.scroll-down{
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

.tabs-nav{
    .active{
        background: white;
        color: black;
        font-weight: 600;
    }
}

.tab-content{
    display: none;
}

.features{
    
    counter-reset: features;

    .feature{
        position: relative;
        counter-increment: features;

        ul{
            li:before{
                content: "-";
                margin-right: 1rem;
            }
        }

            &:after{
                content: '0'counter(features);
                position: absolute;
                bottom: 1.5rem;
                right: 0;
                color: white;
                opacity: 0.6;

            }
    }

   
}

.clients{
    li{
        color: transparent;
        -webkit-text-stroke: 1px black;
        font-weight: 900;
        font-family: sans-serif;
        transition: all 0.3s ease-out;

        &:hover{
            color: black;
            -webkit-text-stroke: 0px;
        }
    }
}

.footer-links{
    a{
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1;
        transition: all 0.3s ease-out;

        &:before{
        content: "";
        position: absolute;
        left: 0;
        height: 100%;
        z-index: -1;
        background: white;
        transition: all 0.3s ease-out;
        top: 0;
        width: 0;
    }
    &:hover{
        color: #262626;
    }
    &:hover:before{
        width: 100%;
    }
    }
}

#clients-slider{
    img{
        width: 200px;
        height: 80px;
        object-fit: contain;
    }
}