@font-face {
    font-family: 'PP Neue World';
    src: url('PPNeueWorld-Regular.woff2') format('woff2'),
    url('PPNeueWorld-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Light.woff2') format('woff2'),
    url('Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Regular.woff2') format('woff2'),
    url('Montserrat-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('Inter-Regular.woff2') format('woff2'),
    url('Inter-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body{
    margin: 0;
    font-size: 20px;
}

.video-background {
    position: relative;
    width: 100%;

    height: 100vh;
    overflow: hidden;
}

@supports (height: 100dvh) {
    .video-background {
        height: 100dvh; /* Use 100dvh if supported */
    }
}

@supports (height: 100svh) {
    .video-background {
        height: 100svh; /* Use 100dvh if supported */
    }
}

#background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translate(-50%, -50%);
    background-size: cover;
}

.content {
   max-width: 952px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    color: #fff;
    padding: 20px;
}

.inter{
    font-family: 'Inter';
}

.montserrat{
    font-family: 'Montserrat';
}

.neue-world{
    font-family: 'PP Neue World';
}

.fs-14{
    font-size: clamp(0.75rem, 0.7197rem + 0.1294vw, 0.875rem);
}

.fs-20{
    font-size: clamp(1rem, 0.9393rem + 0.2589vw, 1.25rem);
}

.fs-60{
    font-size: clamp(2.25rem, 1.8859rem + 1.5534vw, 3.75rem);
}

.fs-70{
    font-size: clamp(2.75rem, 2.3556rem + 1.6828vw, 4.375rem);
}

.fw-300{
    font-weight: 300;
}

.fw-400{
    font-weight: 400;
}

.ls-4{
    letter-spacing: -2.4px;
}

.ls-1{
    letter-spacing: -0.8px;
}


p, h1{
    margin: 0;
}

.c-white{
    color: #fff;
}

.gradient-span{
    display: inline-block; /* Ensures the span covers its content */
    background: -webkit-linear-gradient(90.2deg, #336BFF 2.29%, #43B1B8 39.54%);
    background: -moz-linear-gradient(90.2deg, #336BFF 2.29%, #43B1B8 39.54%);
    background: -o-linear-gradient(90.2deg, #336BFF 2.29%, #43B1B8 39.54%);
    background: linear-gradient(90.2deg, #336BFF 2.29%, #43B1B8 39.54%);
    color: transparent; /* Hide the text */
    background-clip: text;
    -webkit-background-clip: text;
}

.tag-badge{
    display: flex;
    align-items: center;
    padding: 4px 10px;
    justify-content: center;
    width: max-content;
    margin: 0 auto 22px auto;
    gap: 4px;
    border-radius: 20px;
    background: linear-gradient(90deg, rgba(12, 136, 226, 0.24) 0.01%, rgba(156, 237, 255, 0.24) 50.01%, rgba(71, 95, 220, 0.24) 100%);

}

.footer-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.social{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.social a{
    display: block;
}

.social svg{
    display: block;
    width: clamp(1.875rem, 1.7233rem + 0.6472vw, 2.5rem);
}

@media only screen and (max-width: 600px) {
    .social{
        margin-bottom: 20px;
    }
}