@font-face {
    font-family: "arupala_bold_ita";
    src: url("/assets/fonts/arupala_grotesk_trail/arupala_grotesk_trial_bold_italic.ttf");
}

@font-face {
    font-family: "arupala_bold";
    src: url("/assets/fonts/arupala_grotesk_trail/ArupalaGroteskTrial-Bold.ttf");
}

@font-face {
    font-family: "arupala_medium_ita";
    src: url("/assets/fonts/arupala_grotesk_trail/ArupalaGroteskTrial-MedIta.ttf");
}

@font-face {
    font-family: "arupala_light";
    src: url("/assets/fonts/arupala_grotesk_trail/ArupalaGroteskTrial-Light.ttf");
}

@font-face {
    font-family: "arupala_super_bold_ita";
    src: url("/assets/fonts/arupala_grotesk_trail/ArupalaGroteskTrial-SuperBdIt.ttf");
}

@font-face {
    font-family: "arupala_ultra";
    src: url("/assets/fonts/arupala_grotesk_trail/ArupalaGroteskTrial-Ultra.ttf");
}

@font-face {
    font-family: "tthoves_reg";
    src: url("/assets/fonts/tt_hoves/tt_hoves_pro_trial_regular.ttf");
}

@font-face {
    font-family: "roboto_reg";
    src: url("/assets/fonts/roboto/Roboto_Regular.ttf");
}

body {
    width: 100dvw;
    padding: 0;
    margin: 0;
    background-color: #0A0A0A;
    display: flex;
    flex-direction: column;
}


.first-block {
    width: 100%;
    height: 760px;
    z-index: 0;
    display: grid;
    grid-template-areas: "stack";
    background-image: url("/assets/images/home_background_layer1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.first-block>* {
    grid-area: stack;
}


.first-block-layer2 {
    width: 100%;
    align-self: start;
    justify-self: center;
    margin-top: 68px;
    z-index: 1;
}

.first-block-label {
    font-family: "arupala_bold_ita";
    font-size: 48px;
    color: #E4F23C;
    text-align: center;
    margin: 0;
    margin-bottom: 0;
    display: block;
}

.first-block-base {
    font-family: "arupala_medium_ita";
    font-size: 24px;
    color: #E5E5E5;
    text-align: center;
    margin: 0;
    display: block;
}

.first-block-layer3 {
    font-size: 44px;
    color: white;
    align-self: flex-start;
    justify-self: center;
    height: 760px;
    width: 100%;
    background:
        radial-gradient(ellipse 100dvw 50dvh at 50% 100%,
            rgba(228, 242, 60, 0.12) 0%,
            rgba(0, 0, 0, 0) 100%),
        linear-gradient(to bottom,
            rgba(10, 10, 10, 0) 51%,
            rgba(10, 10, 10, 1) 79%),
        radial-gradient(ellipse 100% 50% at -40% 0%,
            rgba(228, 242, 60, 0.20) 0%,
            #00000000 100%),
        radial-gradient(ellipse 100% 50% at 140% 0%,
            rgba(228, 242, 60, 0.20) 0%,
            #00000000 100%);
}

.first-block-layer5 {
    display: block;
    width: clamp(390px, 100dvw, 100dvw);
    height:  760px;
    align-self: center;
    justify-self: center;
    opacity: 0.4;
}

.first-block-btns {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    justify-items: center;
    row-gap: 16px;
    column-gap: 32px;
    height: min-content;
    margin-top: 294px;
    z-index: 9;
}

.first-block-btns>button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    width: 358px;
    border-radius: 20px;
    outline: none;
    border: none;
    background-color: #BDC830;
    color: #131312;
    font-family: "arupala_bold";
    font-size: 14px;
    cursor: pointer;
}

.first-block-layer6 {
    display: block;
    margin-top: 60px;
    width: clamp(200px, 40dvw, 420px);
    transform: translateX(calc(-1 * clamp(240px, 30dvw, 420px) / 2));
}

.first-block-layer7 {
    background: linear-gradient(to left,
            #FFFFFF00 0%,
            #FFFFFF00 25%,
            rgba(255, 255, 255, 0.04) 35%,
            #FFFFFF00 70%,
            #FFFFFF00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-family: "arupala_super_bold_ita";
    font-size: clamp(42px, 10vw, 75px);
    align-self: flex-start;
    justify-self: flex-end;
    overflow: hidden;
    white-space: nowrap;
    transform: translateX(258px) rotate(32deg);
}

.first-block-layer8 {
    display: block;
    width: clamp(100px, 20dvw, 200px);
    align-self: flex-start;
    justify-self: flex-end;
    margin-top: 520px;
}

.first-block-layer9 {
    display: block;
    width: 100%;
    max-width: 526px;
    align-self: flex-start;
    justify-self: center;
    margin-top: 366px;
    z-index: 10;
}

.app-contents {
    display: none;
    height: 84px;
    align-items: center;
    justify-content: center;
    column-gap: 56px;
    row-gap: 16px;
    margin-top: 586px;
}

.app-contents-coloum1 {
    display: flex;
    flex-direction: column;
    width: 112px;
    row-gap: 16px;
}

.app-contents-coloum2 {
    display: flex;
    flex-direction: column;
    width: 104px;
    row-gap: 16px;
}



.app-contents1 {
    display: flex;
    height: 84px;
    align-items: center;
    justify-content: center;
    margin-top: 38px;
    column-gap: 6dvw;
}

.app-contents-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.app-contents-items>img {
    width: 24px;
    height: 24px;
}

.app-contents-items>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.app-contents-items>div>label {
    font-family: "arupala_bold";
    font-size: 24px;
    color: #EEEEEE;
}

.app-contents-items>div>span {
    font-family: "arupala_light";
    font-size: 14px;
    color: #EEEEEE;
}

.scroll-block1-background {
    height: min-content;
    width: 100%;
    margin-top: 44px;
}


.scroll-block2 {
    margin-top: 12px;
}

.scroll-block3 {
    margin-top: 12px;
}

.scroll-block1,
.scroll-block2,
.scroll-block3 {
    height: 56px;
    text-transform: uppercase;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    background-color: #31312F;
}

.scroll-content1 {
    display: flex;
    width: fit-content;
    gap: 34px;
    animation: scroll-left 20s linear infinite;

    & .scroll-items {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: "arupala_bold_ita";
        font-size: 20px;
        color: transparent;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
    }
}

.scroll-content2 {
    display: flex;
    width: fit-content;
    gap: 34px;
    animation: scroll-right 20s linear infinite;

    & .scroll-items {


        color: #E4F23C;
    }
}

.scroll-items {
    font-family: "arupala_bold_ita";
    font-size: 20px;
    display: flex;
    align-items: center;
}


@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    100% {
        transform: translateX(0);
    }

    0% {
        transform: translateX(-50%);
    }
}


.second-block {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 140px;
    background-image: url("/assets/images/field.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    aspect-ratio: 16/9;
    overflow-x: clip;
}

.disable-sb-img {
    width: 32%;
}

.second-block-div1 {
    display: none;
    flex-direction: column;
    align-self: flex-start;
    margin: 0 12px;
    height: 367px;
    background: linear-gradient(to top,
            #00000000 0%,
            #0A0A0A 41%);

    & div {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        & img {
            width: 50px;
            height: 48.53px;
            margin: 0;
        }

        & div {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;

            & label {
                font-family: "arupala_ultra";
                font-size: 16px;
                color: #262626;
            }

            & span {
                font-family: "arupala_bold_ita";
                font-size: 20px;
                color: #E4F23C;
                margin-top: 8px;
                letter-spacing: 2px;
            }
        }
    }

    & p {
        margin-top: 16px;
        font-family: "arupala_medium_ita";
        font-size: 12px;
        color: #E7E8E1
    }
}


.second-block-div2 {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    margin-left: 112px;

    & label {
        font-family: "arupala_ultra";
        font-size: 40px;
        color: #262626;
    }

    & span {
        font-family: "arupala_bold_ita";
        font-size: 36px;
        color: #E4F23C;
        margin-top: 70px;
    }

    & p {
        margin-top: 48px;
        font-family: "arupala_medium_ita";
        font-size: 20px;
        color: #E7E8E1
    }
}

.third-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    & .third-block-header {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        gap: 42px;
        box-sizing: border-box;
        padding: 0 32px;
        position: relative;

        &>div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;

            &>label {
                display: block;
                font-family: "arupala_bold_ita";
                font-size: clamp(14px, 2dvw, 20px);
                /* font-size: 14px; */
                color: #E5E5E5;
                margin-top: -78px;
                text-align: center;
                letter-spacing: 2px;
            }
        }

        & .third-block-header-img1 {
            width: 126px;
            height: 122px;
            margin: 0;
            /* margin-left: 92px; */
        }

        & .third-block-header-img2 {
            width: 117.7px;
            height: 120.31px;
            margin: 0;
            /* margin-right: 120px; */
        }
    }

    & .third-block-body {
        width: 98%;
        height: clamp(200px,52dvw, 630px);
        display: flex;
        background:
            url("/assets/images/builtforballersmain.png") center top / clamp(200px, 100%, 1209px) no-repeat,
            url("/assets/images/builtforballersimg.png") center / cover no-repeat;
        box-sizing: border-box;
        margin-top: 51px;
    }

    & .third-block-body1 {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 32px;
        color: #E7E8E1;
        margin-top: 30px;

        &>div {
            display: flex;
            flex-direction: column;
            margin: 0 16px;

            & img {
                width: 100%;
                align-self: center;
            }

            & label {
                display: block;
                font-family: "arupala_bold_ita";
                font-size: 16px;
                margin-top: 16px;
            }

            & span {
                font-family: "tthoves_reg";
                font-size: 12px;
                margin-top: 8px;
            }
        }
    }
}

.third-block-built-for-ballers {
    height: 218px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    & label {
        font-family: "arupala_bold";
        font-size: clamp(32px, 7dvw, 95px);
        color: #E4F23C;
    }

    & label:nth-child(1) {
        color: #31312F;
        opacity: 0.3;
    }

    & label:nth-child(2) {
        transform: translateY(-64%);
        color: #31312F;
    }

    & label:nth-child(3) {
        transform: translateY(-130%);
    }

}

.third-block-invisible-1 {
    display: none;
}

.wewinblock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-family: "arupala_super_bold_ita";
    font-size: min(5.3dvw,75px);
    height: clamp(80px,20dvw,240px);
    overflow: hidden;

}

.wewin1,
.wewin2,
.wewin3 {
    display: flex;
    width: 100%;
    position: relative;
}

.wewin1label1{
    display: block;
}

.wewin1label2{
    position: absolute;
    right: -20%;
    z-index: 0;
}

.wewin2{
    margin-top: -2%;
}

.wewin2label1{
    position: absolute;
    z-index: 0;
    left: -22.6%;
}

.wewin2label2{
    position: absolute;
    right: 0;
}

.wewin3{
    margin-top: 5.4%;
}

.wewin3label1{
    position: absolute;
    left: 6%;
}

.wewin3label2{
    position: absolute;
    z-index: 0;
    right: -33%;
}


.wewin1label1,
.wewin1label2,
.wewin2label1,
.wewin2label2,
.wewin3label1,
.wewin3label2 {
    background: linear-gradient(to right,
            #FFFFFF00 32%,
            rgba(255, 255, 255, 0.04) 44%,
            #FFFFFF00 80%
            
            );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


.fourth-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: min(58dvw, 684px);
    background: url("/assets/images/pitch.png") center top / clamp(400px, 100dvw, 1188px) no-repeat;
    box-sizing: border-box;

    & .fourth-block-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        font-family: "arupala_bold_ita";

        & label {
            font-size: 40px;
            color: #E4F23C;
            background-color: #0A0A0A;
            letter-spacing: 2px;
            padding: 0 22px;
        }

        & span {
            font-size: 16px;
            color: #F8FCCF;
            margin-top: 6px;
        }

    }

    & .fourth-block-body {
        display: flex;
        flex-wrap: wrap;
        align-self: center;
        justify-content: center;
        column-gap: 64px;
        row-gap: 48px;
        margin-top: clamp(0px, 6dvw, 90px);
        width: clamp(320px, 100%, 940px);
        

        & div {
            width: 270px;
            height: 150px;
            background-position: center top;
            background-size: cover;
            background-repeat: no-repeat;
            border-radius: 10px;

            & label{
                display: block;
                font-family: "arupala_bold_ita";
                font-size: 24px;
                margin-top: 24px;
                margin-left: 16px;
            }

            & span{
                font-family: "roboto_reg";
                font-size: 12px;
                margin-top: 8px;
                margin-left: 16px;
            }
        }

        & div:nth-child(1), div:nth-child(5){
            background-image: url("/assets/images/fourth_block_card_1.png");
            & label{
                color: #F23C3C;
            }
            & span{
                color: #FFC0C0
            }
        }

        & div:nth-child(2){
            background-image: url("/assets/images/fourth_block_card_2.png");
            & label{
                color: #FFCE23;
            }
            & span{
                color: #FFF3C0;
            }
        }

        & div:nth-child(3){
            & label{
                margin-top: 30px;
            }
        }


        & div:nth-child(3), div:nth-child(4){
               background-image: url("/assets/images/fourth_block_card_3.png");
            & label{
                color: #3CF2A5;
            }
            & span{
                color: #C5FFC0;
            }
        }

    }
}


@media (max-width: 1150px) {
    .second-block {
        margin-top: 100px;
    }

    .second-block-div2 {
        & label {
            font-size: 30px;
        }

        & span {
            font-size: 30px;
        }

        & p {
            font-size: 16px;
        }
    }
}

@media (max-width: 1108px) {
    .third-block-header-img1 {
        display: none;
    }

    .third-block-header-img2 {
        position: absolute;
        right: 8%;
        margin-top: -10px !important;
        width: 16dvw !important;
        height: 12dvw !important;
        transform: rotate(-24deg);
    }

}

@media (max-width: 960px) {
    .fourth-block-body{
        column-gap: 30px !important;
        row-gap: 20px !important;
    }
}

@media (max-width: 940px) {
    .app-contents1 :nth-child(5) {
        display: none;
    }
}


@media (max-width: 920px) {
    .first-block-label {
        font-size: 32px;
    }

    .first-block-btns {
        margin-top: 254px;
    }

    .second-block {
        margin-top: 80px;
    }

    .second-block-div2 {
        margin-left: 20px;

        & label {
            font-size: 20px;
        }

        & span {
            font-size: 20px;
            margin-top: 40px;
        }

        & p {
            font-size: 16px;
            margin-top: 20px;
        }
    }

    .fourth-block-body{
        gap: 14px !important;
        & div{
            width: 220px !important;
            height: 123px !important;
            & label{
                font-size: 16px !important;
            }
        }
    }
}



@media (max-width: 740px) {
    .second-block {
        margin-top: 60px;
    }

    .second-block-div2 {
        margin-left: 12px;

        & label {
            font-size: 16px;
        }

        & span {
            font-size: 20px;
            margin-top: 8px;
        }

        & p {
            font-size: 12px;
            margin-top: 16px;
        }
    }
}

@media (max-width: 720px) {
    .app-contents1 {
        gap: 4dvw;
    }

    .app-contents-items>img {
        height: 20px;
        width: 20px;
    }

    .app-contents-items>div>label {
        font-size: 16px;
    }

    .app-contents-items>div>span {
        font-size: 10px;
    }

    .fourth-block-body{
        gap: 14px !important;
        & div{
            width: 200px !important;
            height: 111px !important;
            & label{
                font-size: 16px !important;
            }
        }
    }
     .third-block-header-img2 {
        margin-top: 0px !important;
    }
}

@media (max-width: 680px) {
    .first-block-btns {
        margin-top: 180px;
    }

    .fourth-block{
        background:
         url("/assets/images/pitch_2.png") center 100px / auto no-repeat !important;
            height: 790px;
        }

    .fourth-block-header{
        & span{
            display: block;
            box-sizing: border-box;
            padding: 0 16px;
            text-align: center;
        }
    }

    .fourth-block-body{
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
        margin-top: 90px !important;
        & div{
            width: 320px !important;
            height: 96px !important;
        }
    }
     .third-block-header-img2 {
        margin-top: 10px !important;
    }
}

@media (max-width: 514px) {
    .first-block {
        height: 770px;
    }

    /* Update spacer height for mobile */
    .first-block-spacer {
        height: 740px;
    }

    .first-block-layer8 {
        display: none !important;
    }

    .first-block-layer2 {
        z-index: 11 !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-top: 240px !important;
        height: 178px !important;
        text-align: bottom !important;
        background-color: blue !important;
        background: linear-gradient(to bottom,
                #00000000 0%,
                #0A0A0A 41%) !important;
    }

    .first-block-btns {
        margin-top: 450px !important;
    }

    .first-block-layer5 {
        transform: translateY(-180px);
    }

    .first-block-layer7 {
        margin-top: 0 !important;
    }

    .first-block-layer9 {
        margin-top: 76px;
        width: 330px;
        align-self: flex-start !important;
    }

    .app-contents {
        display: flex;
    }

    .app-contents-items {
        justify-content: flex-start;
        column-gap: 8px;
    }

    .app-contents1 {
        display: none;
    }

    .scroll-block1-background {
        display: flex;
        align-items: flex-end;
        height: 117px !important;
        background: linear-gradient(to bottom,
                #00000000 0%,
                #0A0A0A 41%) !important;
        transform: translateY(-140px);
    }

    .scroll-block2 {
        margin-top: -128px;
    }

    .scroll-block1,
    .scroll-block2,
    .scroll-block3 {
        height: 42px;
    }

    .second-block {
        margin-top: 30px;
        flex-direction: column;
        height: 520px;
        background-image: url("/assets/images/football_pitch2.png");
        background-position: center;
        background-size: contain;
    }

    .second-block-div1 {
        display: flex;
    }

    .second-block-div2 {
        display: none;
    }

    .disable-sb-img {
        display: none;
    }
    .third-block-header > div{
        & > label{
            margin-top: -90px !important;
        }
    }

    .third-block-body {
        display: none !important;
    }

    .third-block-body1 {
        display: flex !important;
    }

    .wewinblock{
        transform: translatey(-20px);
    }

    .fourth-block{
        margin-top: -50px;
    }

    .fourth-block-header{
        & label{
            font-size: 20px !important;
        }
        & span{
            font-size: 14px !important;
            font-family: "arupala_medium_ita" !important;
        }
    }

    .third-block-header-img2 {
        margin-top: 8% !important;
    }
}