@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono&family=Fahkwang:ital,wght@0,500;1,300&family=Kanit:wght@300;500&family=Roboto+Condensed:wght@300&family=Roboto+Slab:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono&family=Fahkwang:ital,wght@1,300&family=Kanit:wght@300;500&family=Roboto+Condensed:wght@300&family=Roboto+Slab:wght@500&display=swap');

* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}


body {
    background-color: #372B29;

}

.just {
    background-color: #372B29;
    padding-bottom: 3px;
}

a {
    text-decoration: none;
}

.just h1,
.just i {

    font-family: 'Azeret Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    padding: 4px;
    color: #d6d1d0;

}

.bi-dot::before {
    color: #ffac16;
    font-size: 39px;
}

.must {
    background-color: #ffac16;

}

.must button {
    padding: 20px !important;
}

.must h1 {
    color: #372b29;
}

.canwe a {

    font-family: 'Fahkwang', sans-serif;
    font-weight: 400;
    font-size: 37px;
    color: #372B29;
    line-height: 47px;
    transition: transform 300ms ease-out;


}



.canwe a:hover {
    transform: translate(-21px, 0px)  scale(1.4, 1.3);
}

/* navbar-end */

.main-sec {
    padding-top: 33rem;
}



.m-sec {
    color: #ffac16;
    font-weight: 600;
    font-size: 10vw;
    letter-spacing: 20px;
    font-style: bold;
    font-family: 'Fahkwang', sans-serif;
    text-align: center;
    width: 100%;
}

@media (max-width: 1560px) {

    .m-sec {
        font-size: 9vw;
    }

}

@media (max-width: 1082px) {

    .m-sec {
        font-size: 8vw;
    }

}

@media (max-width: 829px) {

    .m-sec {
        font-size: 6vw;
    }


}


.flll {
    padding: 8px 3px 0px 8px;

}

.fll {
    padding: 8px 8px 0px 3px;
}

.pad {
    padding-top: 0px;
}

.pads {
    padding-top: 0px;
}

.sads {
    padding: 8px 3px 0px 8px;
}

.nape {
    padding: 8px 8px 0px 3px;
}

@media (max-width : 991px) {

    .fll {
        padding: 8px 8px 0px 8px;
    }

    .flll {
        padding-right: 8px;
    }

    .sad {
        padding: 8px 8px 0px 8px;
    }

    .nape {
        padding: 8px 8px 0px 8px;
    }

    .sap {
        padding: 8px !important;
    }

    .mad {
        padding-top: 0px !important;
        padding-bottom: 8px !important;
    }




}

.fim img {

    height: 49rem;
    width: 100%;
    object-fit: cover;
}

.fim video {

    height: 49rem;
    width: 100%;
    object-fit: cover;

}

/* for 4k bitch */

@media (min-width: 1923px) {

    .fim img {
        height: 82.1vh;
        width: 100%;
        object-fit: cover;
    }

    .fim video {
        width: 100%;
        height: 82.1vh;
        object-fit: cover;
    }

    .fis {

        height: 82.1vh !important;

    }

    .fap {

        height: 82.1vh !important;
    }



}



@media (max-width: 1200px) {
    .fim img {

        height: 35rem;
        width: 59rem;

    }

    .fim video {
        width: 59rem;
        height: 35rem;



    }

    .fis {
        height: 35rem !important;
    }


    .fap {
        height: 35rem !important;
    }

    .fap p {
        font-size: 70px !important;
        line-height: 75px !important;
    }

    .fis p {
        font-size: 70px !important;
        line-height: 75px !important;
    }

    #gre p {
        font-size: 12px !important;
        line-height: 23px !important;
    }



}

@media (max-width: 550px) {
    .fim img {

        height: 30rem;
        width: 59rem;

    }

    .fim video {
        width: 59rem;
        height: 30rem;



    }

    .pubg p {
        font-size: 40px !important;
    }

}


.fap {
    height: 49rem;
    background-color: #1b1412;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    overflow: hidden;


}



.fis {
    height: 49rem;
    background-color: #982c0ce6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

}

#fape {
    background-color: #171717;
}



#smokee {
    background-color: #524f24;

}

#smokee h4 {
    color: rgb(255, 255, 255);
}

.fap p {

    color: #d6d1d0;
    font-family: 'Fahkwang', sans-serif;
    font-weight: 400;
    font-size: 88px;
    line-height: 93px;
    text-align: center;
    transform: translate(0px, 0px);
    transition: transform 500ms ease-in-out;

}

.fap p:hover {
    transform: translate(-35px, -18px) skew(3deg, 0deg);
    color: white;

}

.fis p {

    color: #d6d1d0;
    font-family: 'Fahkwang', sans-serif;
    font-weight: 400;
    font-size: 88px;
    line-height: 93px;
    text-align: center;
    transform: translate(0px, 0px);
    transition: transform 500ms ease-in-out;


}

.fis p:hover {
    transform: translate(-35px, -18px) skew(3deg, 0deg);
    color: white;
}



.fap h4,
.fis h4 {
    font-family: 'Azeret Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    color: #d6d1d0;
    cursor: pointer;
    transition: transform 484ms ease-in-out;


}

.fap h4:hover,
.fis h4:hover {
    transform: translate(0px, 24px);
    color: white;
}

.eff {
    transition: transform 484ms ease-in-out !important;
}

.eff:hover {
    transform: translate(0px, -24px) !important;
}


.effect6 img {
    object-fit: cover;
}

#yell {
    background-color: #212820;
}

#gre {
    background-color: #978E40;
}

#gre h5 {
    font-weight: 400;
    font-size: 90px;
    color: #F4F6F0;
    font-family: 'Fahkwang', sans-serif;

}

#gre p {
    font-family: 'Azeret Mono', monospace;
    font-weight: 400;
    font-size: 15px;
    color: #F4F6F0;
    font-style: normal;
    line-height: 18px;
}

.foot {
    padding: 150px 0px;
}

.foot p {
    font-family: 'Azeret Mono', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    color: #ffac16;
    line-height: 18px;
}

.foot h3 {
    font-family: 'Fahkwang', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 52px;
    color: #ffac16;
    line-height: 62px;
    letter-spacing: 4px;

}

strong {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        bottom: -0.125rem;
        left: -0.5rem;
        right: -0.5rem;
        height: 0.75rem;


        z-index: -1;


        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/664131/underline.svg');
        background-repeat: no-repeat;

        background-size: cover;
    }
}

p>strong {
    font-weight: 400;

    &::after {

        bottom: -0.2rem;
        height: 0.5rem;
        left: -0.25rem;
        right: -0.25rem;
    }
}