*{
    margin: 0rem;
}
.header{
    display:grid;
    grid-template-columns:50% 50%;
    overflow:1px solid red;
}
.logo{
    width:6rem;
    height:auto;
    margin-left:20%;
    border-radius:20rem;
    padding-top:0.5rem;
}
.scroll1{
    width:4rem;
    height: auto;
    position: relative;
    top:4rem;
}
.scroll2{
    display:none;
}
.in{
    background-color:orangered;
    padding:0.5rem 1.2rem 0.8rem 1.2rem;
    color:white;
    border-radius:5px;
    font-weight:bolder;
    text-align:center;
}
.menu{
    display: flex;
    flex-direction:row;
    align-items: center;
}
li{
    list-style:none;
}
li>a{
    margin-right:4rem;
    text-decoration:none;
    font-size:0.9rem;
    color:rgb(95, 94, 94);
    font-weight:900;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
li>a:hover{
    border-bottom:2px solid orangered;
    font-size:1rem;
    position: relative;
    bottom:0.5rem;
    color: black;
}
.menu-icon{
    display:none;
}
.cancel-btn{
    display:none;
}
.body1{
    text-align: center;
    margin-top:2.5rem;
    display: grid;
    grid-template-columns:50% 50%;
}

.brands{
    width:70%;
    height: auto;
}


.text1{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color:rgb(95, 94, 94);
    font-size:3.2rem;
    text-align:left;
    margin-left:20%;
    margin-top:6rem;
    line-height:5rem;
    
}
 .rubik-spray-paint-regular {
  font-family: "Rubik Spray Paint", system-ui;
  font-weight: 400;
  font-style: normal;
}
.span1{
    color:rgb(119, 118, 118);
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align:left;
    line-height:2rem;
    font-size:1rem;
    font-weight:400;
    margin-left:20%;
    margin-top:1rem;
    width:70%;
}
.body2{
    background-image:url('09.png') ;
    background-repeat: no-repeat;
    background-size:cover;
    background-color:orangered;
    border-radius:0.5rem;
    width:90%;
    margin: auto;
}
.text2{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color:white;
    font-size:1.8rem;
    text-align: center;
    font-weight:bolder;
    padding-top:1rem;
    padding-bottom:1rem;
   
}
.tgmini{
    text-decoration: none;
    background-color:orangered;
    color:white;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding:1rem;
    display: block;
    width:30%;
    border-radius:5px;
    margin-top:2rem;
    margin-left:20%;
}
.tgmini:hover{
    padding:0.8rem ;
}
.body3{
    margin-top:4rem;
    display:grid;
    grid-template-columns:50% 50%;
}

.firstheader{
    text-align: center;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: orangered;
    font-weight:bolder;
    font-size:1.4rem;
    margin-bottom:2rem;
}
.essay1{
    color:rgb(119, 118, 118);
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align:left;
    margin: auto;
    line-height:4rem;
    width:80%;
    font-size:1rem;
    font-weight:400;
    border: 2px solid orangered;
    border-radius:1rem;
    padding:1rem;
}
.text3{
    border-right:4px solid rgba(172, 169, 169, 0.671);

}

.features{
    background-image:url('09.png') ;
    background-repeat: no-repeat;
    background-size:150%;
    background-color:orangered;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color:white;
    font-size:1.5rem;
    text-align: center;
    font-weight:bolder;
    padding-top:1rem;
    padding-bottom:1rem;
    width:40%;
    margin:auto;
    margin-top:5rem;
    border-radius:0.5rem;
}
.telegramicon{
    width:10%;
    height:10%;
}
.why{
    width:8%;
    height:8%;
    position: relative;
    top:1.5rem;
}
.body5{
    margin-top:6rem;
    display: grid;
    grid-template-columns:25% 25% 25% 25% ;
}

.inte-container{
    background-color:#94949c96;
    width:70%;
    padding:1rem;
    border-radius:1rem;
    margin: auto;
    background-image:url('09.png') ;
    background-size:55rem;
    line-height:3rem;
}
.inte-container:hover{
    border:2px solid orangered;
    transform:translateY(-2rem);
    transition:transform 0.3s ease-in-out;
    
}

.airdata{
    border-radius:0.5rem;
    width:25%;
}

.inte-header{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',
     Geneva, Verdana, sans-serif;
    font-size:1.2rem;
    width:80%;
    color:rgb(82, 78, 78);
    font-weight:600;
}
.inte-texts{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', 
    Geneva, Verdana, sans-serif;
    font-size:1rem;
    font-weight:400;
    width:90%;
    line-height:2rem;
    text-align:left;
    color:rgb(82, 78, 78);
}

.web3{
margin-top:3rem;
}

.web3text{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', 
    Geneva, Verdana, sans-serif;
    text-align:left;
    line-height:4rem;
    font-weight:normal;
    font-size:1.2rem;
    color:white;
    width:55%;
    background-image:linear-gradient(grey,#5353a396);
    padding:0.5rem 1rem 0.1rem 1rem;
    border-radius:1rem;
    margin-top:2.5rem;
}

 .reveal{
    position: relative;
    transform: translatey(180px);
    opacity:0;
    transition: all 1.5S ease;
}

.reveal.active2{
    transform:translatey(0px);
    opacity:1;
}
.reveal.tgmini{
    position: relative;
    transform: translatex(-150px);
    opacity:0;
    transition: all 1.5S ease;
}
.reveal.active2.tgmini{
    transform:translatex(0px);
    opacity:1;
}
.reveal.body2{
    position: relative;
    transform: translateY(-150px);
    opacity:0;
    transition: all 1.5S ease;
}

.reveal.active2.body2{
    transform:translateY(0px);
    opacity:1;
} 
.reveal.text3{
    position: relative;
    transform: translateY(150px);
    opacity:0;
    transition: all 1.5S ease;
}
.reveal.active2.text3{
    transform:translatey(0px);
    opacity:1;
}
.reveal.text4{
    position: relative;
    transform: translateY(150px);
    opacity:0;
    transition: all 1.5S ease;
}
.reveal.active2.text4{
    transform:translatey(0px);
    opacity:1;
}
.reveal.features{
    position: relative;
    transform: translateX(-150px);
    opacity:0;
    transition: all 1.5S ease;
}
.reveal.active2.features{
    transform:translatex(0px);
    opacity:1;
}
.reveal.body5{
    position: relative;
    transform: translateY(150px);
    opacity:0;
    transition: all 1.5S ease;
}
.reveal.active2.body5{
    transform:translatey(0px);
    opacity:1;
}
.reveal.web3image{
    position: relative;
    transform: translateX(150px);
    opacity:0;
    transition: all 1.5S ease;
}
.reveal.active2.web3image{
    transform:translatex(0px);
    opacity:1;
}
.reveal.web3text{
    position: relative;
    transform: translateX(-150px);
    opacity:0;
    transition: all 1.5S ease;
}
.reveal.active2.web3text{
    transform:translatex(0px);
    opacity:1;
}
.footer{
    background-color:rgb(216, 74, 22);
    background-image:url('09.png') ;
    background-size:60rem;
    margin-top:5rem;
    padding:1rem;
}
.foot-con{
    display: grid;
    grid-template-columns:25% 50% 25%;
    position: relative;
    top:1rem;
}
.footimg{
    width:3rem;
    height:3rem;
    position: relative;
    top:1.5rem;
}
marquee{
    border-left:2px solid grey;
    border-right:2px solid grey;
    padding-top:0.5rem;
}
.Third-party-image{
    width:2.5rem;
    height:2rem;
    margin:1.5rem;
}
.Third-party-image1{
    width:10rem;
    margin:1.5rem;
    height:2rem;
}
.Third-party-image2{
    width:5rem;
    margin:1.5rem;
    height:2rem;
    position: relative;
    top:0.5rem;
}
.Third-party-image4{
    width:10rem;
    margin:1.5rem;
    height:2rem;
    position: relative;
    top:0.5rem;
}
.Third-party-image3{
    width:8rem;
    margin:1.5rem;
    height:1.5rem;
}
.footer-links{
    color:white;
    font-size:1.2rem;
    font-weight:lighter;
    font-family: "Lucida Console", "Courier New", monospace;
    text-decoration:none;
    display:block;
    width:80%;
    margin-top:0.5rem;
    text-align: left;
    letter-spacing:1px;
}
.footer-links:hover{
    color:black;
}

hr{
    position: relative;
    top:2.5rem;
    margin:auto;
}
.copyright{
    margin-top:2rem;
    font-size:1rem;
    color: white;
    font-weight:500;
    font-family: "Lucida Console", "Courier New", monospace;
    letter-spacing:1px;
    position: relative;
    top:1rem;
    line-height:2.5rem;
}
 .titan-one-regular {
        font-family: "Titan One", sans-serif;
        font-weight: 400;
        font-style: normal;
        }
.rubik-spray-paint-regular {
        font-family: "Rubik Spray Paint", system-ui;
        font-weight: 400;
        font-style: normal;
}
.concert-one-regular {
  font-family: "Concert One", sans-serif;
  font-weight: 400;
  font-style: normal;
}


@media only screen and (max-width:540px) {
    .logo{
        width:6rem;
        height:auto;
        margin-left:1rem;
    }
    .scroll2{
        width:3rem;
        height: auto;
        position: relative;
        top:0.1rem;
        display: block;
    }
    .scroll1{
        display:none;
    }
    .menu{
        display: flex;
        flex-direction:column;
        height:100vh;
        background-color:orangered;
        background-image:linear-gradient(rgba(128, 128, 128, 0.473) ,rgba(250, 94, 38, 0.164));
        width:50%;
        right:0;
        z-index:10;
        position: fixed;
        transform:translateX(100%);
        transition:transform 0.3s ease-in-out;
        overflow: scroll;
        margin: 0rem;
        opacity:2;

    }
    .menu>li{
        margin-top:3.5rem;
        margin-bottom:0.5rem;
    }
    li>a{
        margin-right:0rem;
        font-size:1rem;
        color:white;
        font-weight:bolder;
    }
    li>a:hover{
    font-size:1.2rem;
    }
    .menu-icon{
        display: block;
        width:6.5rem;
        height:6rem;
        position:fixed;
        right:1.5rem;
    }
    .cancel-btn{
        display:block;
        position:relative;
        color:white;
        font-weight: bolder;
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size:2rem;
        top:0.2rem;
        padding:0.1rem 0.4rem 0.1rem 0.4rem;

    }
    .menu.active{
        transform: translateX(0);
        z-index:10;
    }
    /* .menu-icon.active{
    transform: translateX(-0rem);
    transition:transform 0.3s ease-in-out;
    } */
    .body1{
        display: block;
        margin-top:3rem;
    }
    .text1{
        color:rgb(95, 94, 94);
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        line-height:4rem;
        text-align:center;
        font-size:3rem;
        font-weight:600;
        margin-top:2rem;
        margin-left:0%;
        width:100%;
        justify-self: center;

    }
        .rubik-spray-paint-regular {
        font-family: "Rubik Spray Paint", system-ui;
        font-weight: 400;
        font-style: normal;
}
    .span1{
        color:rgb(124, 122, 122);
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        text-align:center;
        line-height:2.4rem;
        font-size:1rem;
        font-weight:lighter;
        margin-left:0%;
        margin-top:1rem;
        width:95%;
        justify-self: center;
    }


    
    .brands{
        width:95%;
        height:auto;
        position:relative;
        top:1.5rem;
    }
    .text2{
        font-size:1.5rem;
    }
    .titan-one-regular {
        font-family: "Titan One", sans-serif;
        font-weight: 400;
        font-style: normal;
        }

    .tgmini{
    padding:0.9rem;
    width:50%;
    border-radius:5px;
    margin-top:1.5rem;
    justify-content: center;
    font-size:1rem;
    }
    .tgmini:hover{
    color: black;
    }
    .body3{
        display: block;
    }
    .essay1{
        text-align:center;
        max-width:100%;
        font-size:1.1rem;
        font-family: Arial, Helvetica, sans-serif;
        /* letter-spacing:1px; */
        line-height:2.5rem;
        margin-top:-1rem;
        text-align: left;
    }
    .text3{
        border-right:none;
        font-size:1rem;
    }
    .text4{
        font-size:1rem;
    }
    .features{
        width:50%;
        margin-top:3rem;
        font-size:1.4rem;

    }
    .firstheader{
        font-size:1.2rem;
        margin-top:1.5rem;
    }
    .why{
        top:0.5rem;
    }
    .body5{
        display:inline-block;
        margin-top:1.5rem;
    }
    .inte-container{
        margin-top:1.5rem;
    }
    .inte-container:hover{
        border:2px solid orangered;
        transform:translateY(-1rem);
        transition:transform 0.3s ease-in-out;
    }
    .inte-header{
       
        font-size:1.2rem;
        font-weight:bolder;
    }
    .inte-texts{
      
        font-size:1.1rem;
        line-height:2rem;
        font-weight:400;
    }
    .web3image{
        width:95%;
        height:95%;
    }
    .web3text{
        line-height:2.5rem;
        font-weight:lighter;
        font-size:1.2rem;
        color:white;
        width:80%;
        padding:0.5rem 1rem 0.1rem 1rem;
        border-radius:1rem;
        letter-spacing:1px;
        font-family: Arial, Helvetica, sans-serif;
    }
    .reveal.web3image{
        position: relative;
        transform: translateY(-150px);
        opacity:0;
        transition: all 1.5S ease;
    }
    .reveal.active2.web3image{
        transform:translatey(0px);
        opacity:1;
    }
    .footer{
       border-radius:1rem 1rem 0rem 0rem;
    }
    .foot-con{
        display:block;
    }
    .footer-links{
        display:block;
        width:100%;
        margin-top:1rem;
        margin-left:0.5rem;
        text-align:left;
        letter-spacing:1px;
        text-decoration:none;
        font-size:1.4rem;
    }
    marquee{
        border-left:none;
        border-right:none;
        position: relative;
        top:1rem;
    }
    .footimg{
        width:2rem;
        height:2rem;
        position: relative;
        margin-bottom:1rem;
    }
    .concert-one-regular {
        font-family: "Concert One", sans-serif;
        font-weight: 400;
        font-style: normal;
}

}
@media only screen and (min-width:541px) and (max-width:1030px){
    .header{
        display:grid;
        grid-template-columns:30% 70%;
    }
    .scroll1{
        width:3rem;
        height: auto;
        position: relative;
        top:2rem;
    }
    .scroll2{
        display: none;
    }
    .logo{
        width:8rem;
        height: auto;
    }
    
    li>a{
        margin-right:2rem;
        text-decoration:none;
        font-size:1rem;
       
    }
    .menu{
        overflow: scroll;
        padding-left:1rem;
    }
    .brands{
        width:80%;
        height: auto;
    }
    .text1{
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        color:rgb(95, 94, 94);
        font-size:2rem;
        text-align:left;
        margin-left:20%;
        margin-top:4rem;
        line-height:3rem;
        width:90%;
    }
    .span1{
        color:rgb(119, 118, 118);
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        text-align:left;
        line-height:1.5rem;
        font-size:0.9rem;
        font-weight:400;
        margin-left:20%;
        width:90%;
    }
    .tgmini{
        padding:0.8rem;
        padding-bottom:1rem;
        width:50%;
        border-radius:5px;
        margin-top:0.5rem;
        }
    .grid1{
        margin-top:-1rem;
    }
    .text2{
        font-size:1.8rem;
    }
    .why{
        top:0.5rem;
    }
    .essay1{
        line-height:3rem;
    }
     .inte-container{
    line-height:1rem;
}
    .inte-header{
        font-size:1.2rem;
        line-height:1.5rem;
        margin-bottom:1.5rem;
    }
    .inte-texts{
        font-size:1rem;
        line-height:1.5rem;
        width:100%;
    }
    .web3image{
        width:60%;
        height:60%;
    }
    .web3text{
        line-height:3rem;
        font-weight:bolder;
        font-size:1rem;
        color:white;
        width:70%;
        padding:0.5rem 1rem 0.1rem 1rem;
        border-radius:1rem;
    }
    .reveal.web3image{
        position: relative;
        transform: translateY(-150px);
        opacity:0;
        transition: all 1.5S ease;
    }
    .reveal.active2.web3image{
        transform:translatey(0px);
        opacity:1;
    }
    .titan-one-regular {
        font-family: "Titan One", sans-serif;
        font-weight: 400;
        font-style: normal;
        }
    .rubik-spray-paint-regular {
        font-family: "Rubik Spray Paint", system-ui;
        font-weight: 400;
        font-style: normal;
}
        .concert-one-regular {
        font-family: "Concert One", sans-serif;
        font-weight: 400;
        font-style: normal;
        }

}