.keyvalue {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    margin-top: 1rem;
    gap: 0.5rem;
    width: 100%;
}
  
.keyvalue__logo {
    width: 150px !important;
}
  

@media screen and (max-width: 800px) {

    .container-2 .section:nth-child(1) {
        background: rgb(0,0,0);
    }
    .nav-middle {
        display: none;
        margin-top: 0;
        position: fixed;
        background: rgba(2, 41, 70, 0.953);
        /* backdrop-filter: blur(5.5px); */
        height: 100vh;
        width: 200px;
        top: 0;
        right: 0px;
        text-align: left;
        transition: 5s;
    }
    .nav-button{
        margin-top: 10px;
        /* onclick:"hidemenu()"; */
    }
    .container-2 .section:nth-child(1) {
        background: url("image/bg12.jpg");
        background-size: cover;
        background-attachment: fixed;
    }
    nav .fa{
        display: block;
        color: rgb(0, 0, 0);
        margin-top: 30px;
        margin-right: 5px;
    }
    #close{
        margin-left: 22px;
        width: 13px;
        margin-bottom: 30px;

    }
    .nav-button a {
        font-size: 11px;
    }

    #clg-logo{
        display: none;
    }
    #particles-js{
        height: 100vh;
    }
    .logo {
        width: 16vh;
    }

    .bg13 img {
        max-width: 100%;
        max-height: 80vh;
    }

    .container .section:nth-child(1){
        background: url("image/bg12.jpg");
        background-size: cover;
        background-attachment: fixed;
    }
    /* .intro{
        text-align: center;
        width: 100%;
        margin-top: 9vh;
        position: absolute;
    } */
    .content1{
        position: absolute;
        height: 0vh;
        width: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

    }
    .intro img{
        width: 74%;
        }
    .intro h3{
        font-size: 12px;
        margin-top: 10px;

    }
    .time {
        height: 48px;
        width: 87%;
    }

    .big-text {
        font-size: 1rem;
        margin: 0.9rem 0.8rem;
    }
    .countdown-el span {
        font-size: 0.5rem;

    }

    .countdown-container {

        margin-top: -11px;
    }
    .container-2 .section:nth-child(1) {
    
        background-position: center;
    }
    .intro a {
        width: 30px;
        padding: 9px 24px;
        text-decoration: none;
        margin-top: 20px;
        font-size: 12px;
    }
    #dev img {
        width: 15px;
    }
    #arrow-image img {
        width: 40px;
    }
    .about-box {
        margin-bottom: 0px;
        width: 100%;
    }
    .about-left p {
        padding: 0px 31px 15px 25px;
        font-size: 12px;
    }
    .about-box {

        height: 100%;
        width: 100%;
        align-items: center;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        top: 0px;
        left: 0%;
        border-radius: 20px;
        padding-right: 0px;
    }
    .about-left h2 {
        padding: 40px 65px 16px 26px ;
        font-size: 30px;
    }
    .left-content-1 {
        flex-basis: 40%;
    }
    .content2 {
        flex-direction: column;
        background: linear-gradient(90deg, rgba(2, 0, 3, 1) 0%, rgb(5 0 29 / 0%) 60%, rgb(0 0 27 / 0%) 100%);

    }
    .right-image-1 img {
        width: 100%;
    }

    .why-heading h2 {
        margin-bottom: 35px;
        color: #fff;
        font-size: 25px;
        font-family: 'poppins', sans-serif;
        margin-top: 70px;
        font-weight: 700;
        letter-spacing: 1px;
    }
    .why-content {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .why-content-2 {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 0px;
    }
    .right-image-1 {

        margin-top: 0px;

    }
    .content3 {
        position: relative;
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        background: linear-gradient(90deg, rgba(2,0,3,1) 0%, rgba(5,0,29,1) 60%, rgba(0,0,27,1) 100%);
    }
    .content31 {

        background:  linear-gradient(90deg, rgba(2,0,3,1) 0%, rgba(3,0,16,1) 60%, rgba(0,0,27,1) 100%);

    }
    .why-box {
        width: 240px;
        height: 175px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 20px;
        margin-top: 12%;
    }
    .intro-32 {
        width: 100%;
        border-radius: 0% 0% 0% 0%;
        display: flex;
        flex-direction: column;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(image/prize.png);
        background:linear-gradient(90deg, rgba(2,0,3,1) 0%, rgba(4,0,21,1) 27%, rgba(0,0,27,1) 100%);
        ;
    }
    .content311 {
        position: relative;
        display: flex;
        width: 100%;
        flex-wrap: wrap;
    }
    .prize-content1 {
        flex-basis: 49%;
        flex-direction: column;
        align-items: center;
    }
    .prize-box {
        height: 145px;
        width: 99%;
        align-items: stretch;
        margin: 39px 0px 40px 0px;
        justify-content: center;
    }
    .prize-content-text h3 {
        margin-bottom: 4px;
        font-size: 90%;
        font-weight: 500;
    }
    #box-3 {
        margin: 30px 0px 30px 0px;
    }

    .bo-content {

        width: 100%;
        margin-top: 51px;
        position: relative;
        align-items: center;
        justify-content: center;
        flex-basis: 100%;
        flex-direction: column;
    }
    .bo-box {
        flex-basis: 258px;
        width: 256px;

        flex-direction: column;
        align-items: center;
    }
    .bo-content2 {
        justify-content: center;
        flex-direction: column;
        flex-basis: 20%;
        align-items: center;
    }
    .image-right {

        width: 0%;
    }

    .bounty-description{
        margin-bottom: 38px;
    }
    .timer-section {
        min-height: 70vh;
        margin-right: 75px;
        margin-top: 20px;
        width: 89%;
    }
    .timer-section .timer .step h3 {
        color: #fff;
        font-size: 13px;
    }
    .timer-section .timer .step p {
        font-size: .8rem;
    }

    .timer-section .timer .step {
        width: 100%;
        text-align: center;
        transform: translateX(0%);
        border-radius:0px 0px 24px 24px;
    }
    .timer-section .timer .step:nth-child(odd) {
        transform: translateX(0%);
        border: none;
        border-top: 2px solid #cacaca;
        border-radius:0px 0px 24px 24px;

        
    }
    .timer-section .timer .step:nth-child(even) {
        border: none;
        border-top: 2px solid #cacaca;
        border-radius:0px 0px 24px 24px;

    }
    .timer-section .timer .step span {
        left: 50% !important;
        transform: translateX(-50%);
    }
    .why-heading-2 h2 {
        margin-top: 57px;
        font-size: 25px;

    }
    .why-heading-22 h2 {
        margin-top: 35px;
        font-size: 25px;
        margin-bottom: 32px;
    }
    #first-prize {
        width: 99%;
        height: 145px;
        margin: 40px 0px 40px 0px;

    }
    #prize-image img {
        width: 84px;
        margin-top: -16px;

    }
    .prize-content-img {
        flex-basis: 31%;
        width: 100%;
        margin-left: -25px;
        height: 76%;
    }
    .prize-content-text {
        flex-basis: 35%;
    }
    #box-3 {
        margin: 40px 0px 40px 0px;
    }
    .why-heading-3 h2 {
        margin-bottom: 0px;
        color: #fff;
        font-size: 25px;
        font-family: 'poppins', sans-serif;
        margin-top: 60px;
        font-weight: 700;
        letter-spacing: 1px;
        text-align: center;
    }
    .why-content-3 {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        margin-top: 40px;
        flex-direction: column;
    }
    .why-content-31 {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        margin-top: 0px;
        flex-direction: column;
    }
    .intro-35 {
    
        padding: 0px;
    }
    .why-box-1 {
        width: 240px;
        margin: 30px;
    }

    .view-content p {
        margin: 20px;
        font-size: 80%;
        margin-top: 21px;
    }
    .countdown-container p {
        padding: 0px 7px 0px 7px;
    }

    .big-text {
        font-size: 1rem;
        margin: .3em 0.5rem 0rem .5rem;
    }
    .countdown-el span {
        font-size: 9px;
    }

    .footer img {
        padding: 20px;
        margin: 10px 30px;


    }

    .footer {
        flex-direction: column;
    }

    #img15 {
        display: none;

    }

    #img16 {
        display: inline;

    }
    .intro img{
        width: 100%;
        height: 100%;
    }
    .hft__logo {
        width: 65% !important;
        margin-top: 2vh;
        margin-bottom: 0px;
    }
    .keyvalue {
        font-size: 0.9rem;
    }
    .keyvalue__logo {
        width: 120px !important;
    }
    .intro{
        margin-top: 0vh;
    }
    .time{
        clip-path: polygon(24px 0, 116% 0, 93% 100%, 0 100%, 0 23px);
    }
    .countdown-el p {
        font-size: 18px;

    }
        .imgbox {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 100%;
            margin-top: 0px;
        }
    .bg13-content{
        margin-top: 50px;
    }
    #mascot{
        display: inline;
        width: 45%;
        margin-top: 0px;
    }
    .sponser-img{
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .sponser-content{
            flex-direction: column;
    }
    .sponser-img img{
        width: 180px;
    }
    .sponser-boxes{
        gap: 20px;
    }
}