@font-face {
    font-family: ct1;
    src: url(./assets/Knicknack-Bold-CBEQ4K5O.ttf);
}
@font-face {
    font-family: td1;
    src: url(./assets/Thunder-BoldLC-3AB75U7M.ttf);
}
@font-face {
    font-family: Rm1;
    src: url(./assets/RamaGothicRoundedE-Bold-CURKPMAW.ttf);
}
@font-face {
    font-family: td2;
    src: url(./assets/Thunder-MediumLC-W2WHIAN5.ttf);
}
*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
html , body{
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    background: 
    -o-repeating-linear-gradient(left, 
        rgba(189, 186, 186, 0.601) 0px, rgba(189, 187, 187, 0.448) 1.5px, 
        transparent 1px, transparent 100%),
    -o-repeating-linear-gradient(top, 
        rgba(188, 187, 187, 0.488) 0px, rgba(188, 185, 185, 0.515) 1.5px, 
        transparent 1px, transparent 100%);
    background: 
    repeating-linear-gradient(to right, 
        rgba(189, 186, 186, 0.601) 0px, rgba(189, 187, 187, 0.448) 1.5px, 
        transparent 1px, transparent 100%),
    repeating-linear-gradient(to bottom, 
        rgba(188, 187, 187, 0.488) 0px, rgba(188, 185, 185, 0.515) 1.5px, 
        transparent 1px, transparent 100%);
        background-size: 50px 50px; 
        background-position: 0 0;
        overflow-x: hidden;
}
#main{
    position:relative;
    width: 100%;

}
#nav {
    width: 100vw;
    z-index: 99;
    height: 15vh;
    position: absolute;
    padding: 2.5vh;
    position: fixed;
}

#nav #logo{
    width: 3.5vw;
    height: 6.8vh;
    border-radius: 1vh;
    margin-left: 2vh;
    background: #000;
    position: relative;
    
   
}
#nav #logo #logoecell { 
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-transition: all ease 0.4s;
    -o-transition: all ease 0.4s;
    transition: all ease 0.4s;
    overflow: hidden;
    z-index: 100;
}

#nav #elems{
    
    margin-right: 15vh;
}

#nav #elems a{
    border: 2px solid black;
    height: 5vh;
    border-radius: 6px;
    padding:0  2vh;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    text-wrap: nowrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor:pointer;
    font-family: rm1;
    font-size: 3.3vh;
    -webkit-transition: all  ease 0.4s;
    -o-transition: all  ease 0.4s;
    transition: all  ease 0.4s;
    overflow: hidden;
    background: #ffffff;
}
#nav #elems a:hover{
    background-color: #FF3BFF;
    color: white;
    border: 2px solid black;
}
#ic{
    display: none;
}
#page1{
    width: 100vw;
    height: 100vh;
    padding: 4vh;
 
    position: relative;
    
}
#page1 img{
    -o-object-fit: contain;
       object-fit: contain;
    width: 120vh;
    margin-bottom: 12vh;
}
#page1 #content{
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    
}
#content .textcontent{
    width: 100vw;
    height: 50vh;
    position: absolute;
    top: 51.9vh;
    line-height: 10vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.textcontent h1{
    font-family: ct1;
    font-size: 4vw;
    text-align: center;
    font-weight: 100;
    /* background: #000; */
}
.textcontent h2{
    font-family: rm1;
    font-size: 6.1vw;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1px;
        
}
#timer{
    font-family: td1;
    /* border: 2px solid black; */
    border-radius: 1vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 2vh 0;
    height: 15vh;
    /* -webkit-text-stroke: 4px #000000;
    -webkit-text-fill-color: transparent; */
    color: #000000;
    width:  100%;
    /* background-color: #000000d5; */
    /* -webkit-transition: all ease-in-out 2s;
    -o-transition: all ease-in-out 2s;
    transition: all ease-in-out 2s; */
    top: 89vh;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 6vw;
}
.textcontent a{
    border: 2px solid black;
    height: 12vh;
    border-radius: 6px;
    padding:0  3vh;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    text-wrap: nowrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor:pointer;
    font-family: rm1;
    font-size: 8vh;
    -webkit-transition: all  ease 0.4s;
    -o-transition: all  ease 0.4s;
    transition: all  ease 0.4s;
    overflow: hidden;
    margin-top: 5vh;
    background-color: rgba(230, 38, 214, 0.311);

}

.textcontent a:hover{
    background-color: #FF3BFF;
    color: white;
    border: 2px solid black;
}

#logo #ropeastro {
    width: 100%;
    height: 100%;
    z-index: 9;
    position: absolute; 
    top: 17vh;
    scale: 4;
    -o-object-fit: contain;
       object-fit: contain;
}

#ropeastro:hover{
    -webkit-filter: drop-shadow(0 0 2px #01A9C8) drop-shadow(0 0 5px #01A9C8);
            filter: drop-shadow(0 0 2px #01A9C8) drop-shadow(0 0 5px #01A9C8);;
}

#page2{
    height: 140vh;
    width: 100%;
    padding: 5vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 20vh;
    
}
#c1{
    width: 100%;
    height: 30vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack:space-evenly;
        -ms-flex-pack:space-evenly;
            justify-content:space-evenly;
    
}
#c1 #img1{
    width: 30vh;
}
#c1 #con1{
    -webkit-perspective: 1000px;
            perspective: 1000px;
    
}

#c1 #box{
    width: 65vh;
    border: 1px solid black;
    height: 30vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /* align-items: center; */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-right: 2vh;
    padding-left:1vh;
    background-color: white;
    border-radius: 1vh;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    


}


#c1 #box h2{
    font-size: 2.9vh;
    font-family: td2;
    font-weight: 400;
    text-align: start;
    text-transform: capitalize;
    /* line-height: 26px; */
    /* width: 30vh; */
}
#c1 #box h1{
    font-size: 6vh;
    font-family: rm1;
    text-align: start;
}

#c1 #img1 img{
    
    -webkit-transform-style: preserve-3d;
    
            transform-style: preserve-3d;

}

#box2{
    min-height: 60vh;
    width: 65vh;
    border: 1px solid black;
    /* height: 30vh; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /* align-items: center; */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-right: 2vh;
    padding-left:1vh;
    background-color: white;
    border-radius: 1vh;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    color: rgb(255, 243, 243);
    background: #FF3BFF;
}
#c1 #box2 h2{
    font-size: 2.9vh;
    font-family: td2;
    font-weight: 400;
    text-align: start;
    text-transform: capitalize;

}
#c1 #box2 h1{
    font-size: 6vh;
    font-family: rm1;
    text-align: start;
}
#con2{
    -webkit-perspective: 1000px;
            perspective: 1000px;
}
#co3{
    -webkit-perspective: 1000px;
            perspective: 1000px;
}
 #c1 #box3{
    margin-top: 20vh;
    min-height: 50vh;
    width: 65vh;
    border: 1px solid black;
    /* height: 30vh; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /* align-items: center; */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-right: 2vh;
    padding-left:1vh;
    background-color: white;
    border-radius: 1vh;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    
}
#c1 #box3 h2{
    font-size: 2.9vh;
    font-family: td2;
    font-weight: 400;
    text-align: start;
    text-transform: capitalize;

}
#c1 #box3 h1{
    font-size: 6vh;
    font-family: rm1;
    text-align: start;
}
#page3{
    height: 320vh;
    width: 100%;
    padding: 3vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    /* gap: 20vh; */
    
}
#string{
    position: absolute;
    display: none;
    /* top: 20vh; */
    top: 6%;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 100%;
    height: 40vh;
    z-index: 99;
    
    /* background-color: rgba(245, 222, 179, 0.436); */
    /* background: wheat; */
}

#hangerman{
    position: absolute;
    display: none;
    width: 13vh;
    height: 20vh;
    /* background: #000;  */
    left: 9.7%;
    top: 8.7%;

}
#hangerman img{
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
#hangerman2{
    position: absolute;
    width: 13vh;
    height: 20vh;
    /* background: #000;  */
    left: 88.4%;
    top: 8.7%;
    display: none;

}
#hangerman2 img{
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
#page3 .content{
    width: 100%;
    min-height: -webkit-fit-content;
    min-height: -moz-fit-content;
    min-height: fit-content;
    padding:0 5vh;
    position: absolute;
    top:50vh;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
#page3 .content h1{
    font-family: td1;
    color: #f40cf4;
    font-size: 13vh;
    text-transform: uppercase;
    width: 100%;
    /* background-color: #fdebeb; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* text-shadow: 0 0 10px grey; */

}
#page3 .content h1 #trophyimg{
    width: 20vh;
    height: 22vh;
    position: relative;

}#page3 .content h1 #trophyimg img{
    width: 100%;
    height: 80%;
    -o-object-fit: contain;
       object-fit: contain;
    position: absolute;
    
    
}
#first{
    width: 100%;
    height: 40vh;
    padding-left:  10vh  ;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-right:10vh ;
    margin-top: 15vh;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
#first #textt{
    width: 40%;
    height: 120%; 
    border: 4px solid rgb(0, 0, 0);
    border-radius: 10px;
    background-color: #f86a92bf;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-family: td1;
    text-align: center;
}
#textt h2{
    font-family: ct1;
    font-size: 10vh;
    color: rgb(255, 221, 0);
    text-shadow: 0 0 10px black;
}
#textt h3{
    /* font-family: ct1; */
    font-size: 5vh;
    color: rgb(255, 255, 255);
    text-shadow: 0 2px 4px gray;
    text-transform: capitalize;
    width: 50vh;
}
#first #image{
    width: 20vw;
    height: 120%;

    margin-bottom: 5vh;
    margin-right: 25vh;
}
#first #image img{
    /* background: pink; */
    border: 3px black solid;
    border-radius:15px;;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -webkit-transition: all ease 0.7s;
    -o-transition: all ease 0.7s;
    transition: all ease 0.7s;
}
#first #image img:hover{
    background:#ff86a8bf;
}
#first #image2{
    width: 20vw;
    height: 120%;
    margin-left: 10vh;
    /* margin-bottom: 5vh; */
    /* margin-right: 25vh; */
}
#first #image2 img{
    /* background: pink; */
    border: 3px black solid;
    border-radius:15px;;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -webkit-transition: all ease 0.7s;
    -o-transition: all ease 0.7s;
    transition: all ease 0.7s;
}
#first #text2{
    width: 60%;
    height: 120%; 
    border: 4px solid rgb(0, 0, 0);
    border-radius: 10px;
    background-color: #1cb6e9bf;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-family: td1;
    text-align: center;
}
#text2 h2{
    font-family: ct1;
    font-size: 10vh;
    color: rgb(255, 0, 72);
    text-shadow: 0 0 10px black;
}
#text2 h3{
    /* font-family: ct1; */
    font-size: 5vh;
    color: rgb(255, 255, 255);
    text-shadow: 0 2px 4px gray;
    text-transform: capitalize;
    width: 50vh;
}
#first #image2 img:hover{
    background:#1cb6e9bf;
}
#first #text3{
    width: 60%;
    height: 120%; 
    border: 4px solid rgb(0, 0, 0);
    border-radius: 10px;
    background-color: #d4ce1595;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-family: td1;
    text-align: center;
    /* margin-right: 5vh; */
}
#text3 h2{
    font-family: ct1;
    font-size: 10vh;
    color: rgb(0, 255, 255);
    text-shadow: 0 0 10px black;
}
#text3 h3{
    /* font-family: ct1; */
    font-size: 5vh;
    color: rgb(255, 255, 255);
    text-shadow: 0 2px 4px gray;
    text-transform: capitalize;
    width: 50vh;
}
#first #image3{
    width: 18vw;
    height: 120%;
    margin-right: 20vh;
    /* background-color: #01A9C8; */
    /* padding-top: 106vh; */
}
#first #image3 img{
    /* background: pink; */
    border: 3px black solid;
    border-radius:15px;;
    min-width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -webkit-transition: all ease 0.7s;
    -o-transition: all ease 0.7s;
    transition: all ease 0.7s;
    /* padding: 2vh; */
    padding-top: 25vh;
    z-index: 44;
    
    /* margin-top: 20vh; */
    /* background: #000;/\ */
    /* position: absolute; */
}
#first #image3 img:hover{
    background-color: #d4ce159f;
    
}
#page3 .content #ruless{
    /* background: #0000007f; */
    width: 100%;
    height: 60vh;
    margin-top: 15vh;
    padding: 5vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
#ruless .container{
    background: #ffc6fc;
    width: 80%;
    border: 2px solid black;
    height: 100%;
    border-radius: 10px;
    padding-left: 2vh;
    padding-top: 2vh;
}
#ruless .container h2{
    font-family: td1;
    font-size: 6vh;
    text-shadow: 0 0 1vh rgb(244, 103, 234);
    text-align: start;
}
#ruless .container h3{
    font-family: td2;
    font-size: 3.3vh;
    text-shadow: 0 0 1vh rgba(238, 92, 216, 0.832);
    text-align: start;
    font-weight: 500;

}
#ruless .container i{
    font-size: 2.5vh;
    /* background-color: #01A9C8; */
    padding-top: 2vh;
    margin-right: 1vh
}
#page4{
    width: 100%;
    height: 100vh;
    background: #000;
    padding: 5vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    
}
#page4 #container{
    width: 80%;
    height: 80%;
    background-color: #01A9C8;
    background:url(./assets/white-paper-texture-AZ4HYL4A.jpg);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    border-radius: 8px;
}
#page4 h1{
    text-align: center;
    font-family: rm1;
    font-size: 12vh;
    color: white;
    
}
#page4 #image{
    height: 100%;
    width: 80%;
    /* margin-left: 5vh; */
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    

}
#page4 #image img{
    -o-object-fit: contain;
       object-fit: contain;
    height: 100%;
    width: 100%;
    
}
#page5{
    width: 100%;
    height: 80vh;
    background: #000;
    color: rgb(255, 253, 249);
    padding: 10vh;
}
#page5 h1{
    text-align: center;
    font-family: ct1;
    font-size: 10vh;
}
#page5 .faq1{
    width: 100%;
    position: relative;
    /* background-color: #d69999; */
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    cursor: pointer;
    border: 1px solid #e4bae4;
    /* margin-top: 2vh; */
}
#page5 .faq1 h2{
    font-family: rm1;
    font-size: 4vh;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    /* background-color: #bb1313; */
    margin-left: 5vh;
}
#page5 .faq1 h3{
    font-family: td2;
    font-size: 3vh;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    /* background-color: #bb1313; */
    margin-left: 5vh;
}
.faq1 .ans{
    display: none;
    
    
}

.faq .ri-arrow-down-s-line{
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.faq .ri-arrow-up-s-line{
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

#footer{
    width: 100%;
    min-height: 40vh;
    background: rgb(0, 0, 0);
    padding: 2vh;
}
#footer .contacts{
    width: 100%;
    height: 30vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;

    
}
.p1 {
    width: 40vh;
    height: 80%;
    background: white;
    /* border: 2px solid black; */
    border-radius: 5px;
    -webkit-box-shadow: 0 0px 10px #bcacbc;
            box-shadow: 0 0px 10px #bcacbc;

}
.p1 .up{
    width: 30vh;
    height: 70%;
    /* background-color: #e4bae4; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2vh;
}
.p1 .up #imgii{
    width: 13vh;
    height: 90%;
    /* background: #000; */
    /* position: relative; */
    overflow: hidden;
    border-radius: 5px;

}
#imgii img{
    /* position: absolute; */
    width: 10vh;
    height:100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top;
       object-position: top;
    /* object-position: top; */
    -webkit-box-shadow: 0.5px 0.5px 5px rgba(0, 0, 0, 0.94);
            box-shadow: 0.5px 0.5px 5px rgba(0, 0, 0, 0.94);
    border-radius: 5px;



}
.p1 .up #text{
    width: 15vh;
    height: 100%;
    /* background: blue; */

}
.up #text h1{
    font-size: 3vh;
    font-family: rm1;
    color: rgb(0, 0, 0);
    
}
#text h2{
    font-size: 2vh;
    font-family: rm1;
    color: #000;
    text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.05);
}   
#text h3{
    color: #000;
    font-size: 3vh;
    margin-left: 1vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* flex-direction: column; */
    
}
#text h3 span{
    margin-left: 1vh;
    text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.05);

}
#pinkbottom{
    width: 100%;
    height: 45vh;
    background: #f40cf4c6;
    margin-top: 10vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 4vh;
    font-family: td2;
    position: relative;
    
}
#pinkbottom .left{
    text-align: center;
    margin-left: 25vh;
}
.left h1{
    font-size: 2.2vh;
    font-family: rm1;
    margin-bottom: 2vh;
    color: white;
    text-shadow: 0 0 7px rgba(85, 82, 82, 0.656);
}
.left .logo{
    width: 20vh;
    height: 50%;
    /* background: #000; */

}
.logo .img{
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

#pinkbottom .left h2{
    font-size: 2.5vh;
    font-family: td2;
    margin-bottom: 1vh;
    /* color: white; */
}
.left h2 span{
    margin-left: 1vh;

}
.right {
    width: 50%;
    height: 100%;
    /* background: #000; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /* align-items: center; */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-family: td2;
    font-size: 2.5vh;
    /* background: #835c5c; */
    margin-left: 50vh;
    margin-top: 5vh;
    text-transform: capitalize;

}
#sideimg{
    width: 30vh;
    height: 80%;
    /* background: #000; */
    position: absolute;
    left: -4.92%;
}
#sideimg img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
#sideimg2{
    width: 30vh;
    height: 80%;
    /* background: #000; */
    position: absolute;
    left: 84.2%;
}
#sideimg2 img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
#slider{
    min-width: 100vw;
    height: 12vh;
    background:  rgba(210, 47, 210, 0.856);

}
#slider #inner {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 10vh;
    -webkit-animation: marquee 10s linear  infinite;
            animation: marquee 10s linear  infinite;
    gap: 12px;

}

#slider h2 {
    font-family: rm1;
    font-size: 6vh;
    
}

@-webkit-keyframes marquee {
    0%   { -webkit-transform: translateX(0%); transform: translateX(0%); }
    100% { -webkit-transform: translateX(calc(-100% - 12px )); transform: translateX(calc(-100% - 12px )); }
  }

@keyframes marquee {
    0%   { -webkit-transform: translateX(0%); transform: translateX(0%); }
    100% { -webkit-transform: translateX(calc(-100% - 12px )); transform: translateX(calc(-100% - 12px )); }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  @media (max-width: 480px) {
    #nav {
        width: 100vw;
        z-index: 99;
        height: 5vh;
        position: fixed;
        padding: 2.5vh;
    }
    
    #nav #logo {
        width: 6.5vw;
        height: 4.8vh;
        border-radius: 1vh;
        background: #000;
        position: relative;
        margin-left: 0vh;
    }
    
    #nav #logo #logoecell { 
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all ease 0.4s;
        overflow: hidden;
        z-index: 100;
    }
    
    #nav #elems {
        margin-right: 15vh;
    }
    
    #nav #elems :nth-child(2),
    #nav #elems :nth-child(3),
    #nav #elems :nth-child(4) {
        display: none;
    }
    
    #nav #elems :nth-child(5) {
        display: block;
    }
    
    #nav #elems a {
        border: 2px solid black;
        height: 4vh;
        border-radius: 6px;
        width: fit-content;
        white-space: nowrap;
        align-items: center;
        justify-content: center;
        display: flex;
        cursor: pointer;
        font-family: rm1;
        font-size: 2.3vh;
        transition: all ease 0.4s;
        overflow: hidden;
        background: #ffffff;
    }
    
    #logo #ropeastro {
        width: 100%;
        height: 30%;
        z-index: 9;
        position: absolute; 
        top: 6vh;
        scale: 4;
        object-fit: contain;
    }
    
    #ic {
        display: block;
        font-size: 3vh;
        font-weight: 600;
        position: absolute;
        right: 10%;
    }
    
    #page1 {
        width: 100vw;
        height: 60vh;
        padding: 4vh;
        position: relative;
    }
    
    #page1 img {
        object-fit: contain;
        width: 120vh;
    }
    
    #page1 #content {
        width: 100%;
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    
    #content .textcontent {
        width: 100vw;
        height: 50vh;
        position: absolute;
        top: 29.3vh;
        line-height: 5vh;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
    }
    
    .textcontent h1 {
        font-family: ct1;
        font-size: 4vw;
        text-align: center;
        font-weight: 100;
    }
    
    .textcontent h2 {
        font-family: rm1;
        font-size: 6.1vw;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.1px;
    }
    
    #timer {
        font-family: rm1;
        border-radius: 1vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2vh 0;
        height: 15vh;
        color: #000000;
        width: 100%;
        font-size: 4vh;
        top: 50vh;
    }
    
    .textcontent a {
        border: 2px solid black;
        height: 6vh;
        border-radius: 6px;
        padding: 0 3vh;
        width: fit-content;
        white-space: nowrap;
        align-items: center;
        justify-content: center;
        display: flex;
        cursor: pointer;
        font-family: rm1;
        font-size: 4vh;
        transition: all ease 0.4s;
        overflow: hidden;
        margin-top: 1vh;
        background-color: rgba(230, 38, 214, 0.311);
    }
    
    .textcontent a:hover {
        background-color: #FF3BFF;
        color: white;
        border: 2px solid black;
    }
    
    #page2 {
        height: 150vh;
        width: 100%;
        padding: 0vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20vh;
    }
    
    #c1 {
        width: 100%;
        height: 30vh;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }
    
    #c1 #img1 {
        width: 20vh;
    }
    
    #c1 #con1 {
        perspective: 1000px;
    }
    
    #c1 #box {
        width: 30vh;
        border: 1px solid black;
        height: 30vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-right: 2vh;
        padding-left: 1vh;
        background-color: white;
        border-radius: 1vh;
        transform-style: preserve-3d;
    }
    
    #c1 #box h2 {
        font-size: 2.2vh;
        font-family: td2;
        font-weight: 400;
        text-align: start;
        text-transform: capitalize;
    }
    
    #c1 #box h1 {
        font-size: 4vh;
        font-family: rm1;
        text-align: start;
    }
    
    #c1 #img1 img {
        transform-style: preserve-3d;
    }
    
    #box2 {
        height: 40vh;
        width: 35vh;
        border: 1px solid black;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-right: 2vh;
        padding-left: 1vh;
        background-color: white;
        border-radius: 1vh;
        transform-style: preserve-3d;
        color: rgb(255, 243, 243);
        background: #FF3BFF;
    }
    
    #c1 #box2 h2 {
        font-size: 2.2vh;
        font-family: td2;
        font-weight: 400;
        text-align: start;
        text-transform: capitalize;
    }
    
    #c1 #box2 h1 {
        font-size: 4vh;
        font-family: rm1;
        text-align: start;
    }
    
    #con2 {
        perspective: 1000px;
    }
    
    #co3 {
        perspective: 1000px;
    }
    
    #c1 #box3 {
        margin-top: 20vh;
        height: 30vh;
        width: 30vh;
        border: 1px solid black;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-right: 2vh;
        padding-left: 1vh;
        background-color: white;
        border-radius: 1vh;
        transform-style: preserve-3d;
    }
    
    #c1 #box3 h2 {
        font-size: 2.2vh;
        font-family: td2;
        font-weight: 400;
        text-align: start;
        text-transform: capitalize;
    }
    
    #c1 #box3 h1 {
        font-size: 4vh;
        font-family: rm1;
        text-align: start;
    }
    
    #page3 {
        height: 195vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    
    #string {
        position: absolute;
        display: none;
        top: 0%;
        left: -30%;
        width: 106vh;
        height: 40vh;
        z-index: 99;
    }
    
    #hangerman {
        position: absolute;
        width: 13vh;
        height: 20vh;
        left: 0%;
        top: 4.3%;
        display: none;
    }
    
    #hangerman img {
        width: 70%;
        height: 100%;
        object-fit: contain;
    }
    
    #hangerman2 {
        position: absolute;
        width: 13vh;
        height: 20vh;
        left: 80.4%;
        top: 4.3%;
        display: none;
    }
    
    #hangerman2 img {
        width: 70%;
        height: 100%;
        object-fit: contain;
    }
    
    #page3 .content {
        width: 100%;
        min-height: 70vh;
        padding: 0;
        position: absolute;
        top: 0vh;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    
    #page3 .content h1 {
        font-family: td1;
        color: #f40cf4;
        font-size: 7vh;
        text-transform: uppercase;
        width: 100%;
        display: flex;
    }
    
    #page3 .content h1 #trophyimg {
        width: 10vh;
        height: 16vh;
        position: relative;
    }
    
    #page3 .content h1 #trophyimg img {
        width: 100%;
        height: 80%;
        object-fit: contain;
        position: absolute;
    }
    
    #first {
        width: 100%;
        height: 40vh;
        padding-left: 1vh;
        display: flex;
        padding-right: 10vh;
        margin-top: 1vh;
        justify-content: space-between;
        margin-left: 6vh;
    }
    
    #first #textt {
        width: 50%;
        height: 60%; 
        border: 2px solid rgb(0, 0, 0);
        border-radius: 10px;
        background-color: #f86a92bf;
        display: flex;
        align-items: center;
        flex-direction: column;
        font-family: td2;
        text-align: center;
    }
    
    #textt h2 {
        font-family: ct1;
        font-size: 4vh;
        color: rgb(255, 221, 0);
        text-shadow: 0 0 10px black;
    }
    
    #textt h3 {
        font-size: 2vh;
        color: #ffffff;
        text-shadow: 0 2px 4px gray;
        text-transform: capitalize;
        width: 23vh;
    }
    
    #first #image {
        width: 40vw;
        height: 70%;
        margin-top: 1vh;
        margin-bottom: 0vh;
        margin-right: 0vh;
        margin-left: 2vh;
    }
    
    #first #image img {
        border: 1px black solid;
        border-radius: 15px;
        width: 100%;
        height: 80%;
        object-fit: contain;
        transition: all ease 0.7s;
    }
    
    #first #image img:hover {
        background: #ff86a8bf;
    }
    
    #first #image2 {
        width: 40vw;
        height: 60%;
        margin-left: 0vh;
    }
    
    #first #image2 img {
        border: 1px black solid;
        border-radius: 15px;
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: all ease 0.7s;
    }
    
    #first #text2 {
        width: 60%;
        height: 60%; 
        border: 4px solid rgb(0, 0, 0);
        border-radius: 10px;
        background-color: #1cb6e9bf;
        margin-left: 1vh;
        display: flex;
        align-items: center;
        flex-direction: column;
        font-family: td1;
        text-align: center;
    }
    
    #text2 h2 {
        font-family: ct1;
        font-size: 4vh;
        line-height: 4vh;
        color: rgb(255, 0, 72);
        text-shadow: 0 0 10px black;
        margin-bottom: 2vh;
    }
    
    #text2 h3 {
        font-family: td2;
        font-size: 2vh;
        color: rgb(255, 255, 255);
        text-shadow: 0 2px 4px gray;
        text-transform: capitalize;
        width: 28vh;
    }
    
    #first #image2 img:hover {
        background: #1cb6e9bf;
    }
    
    #first #text3 {
        width: 60%;
        height: 60%; 
        border: 4px solid rgb(0, 0, 0);
        border-radius: 10px;
        background-color: #d4ce1595;
        display: flex;
        align-items: center;
        flex-direction: column;
        font-family: td1;
        text-align: center;
    }
    
    #text3 h2 {
        font-family: ct1;
        font-size: 4vh;
        line-height: 4vh;
        color: rgb(0, 255, 255);
        text-shadow: 0 0 10px black;
        width: 100%;
        margin-bottom: 2vh;
    }
    
    #text3 h3 {
        font-family: td2;
        font-size: 2vh;
        color: rgb(255, 255, 255);
        text-shadow: 0 2px 4px gray;
        text-transform: capitalize;
        width: 28vh;
    }
    
    #first #image3 {
        width: 40vw;
        height: 60%;
        margin-right: 0vh;
    }
    
    #first #image3 img {
        border: 2px black solid;
        border-radius: 15px;
        width: 100%;
        height: 100%;
        margin-top: 0vh;
        object-fit: contain;
        transition: all ease 0.7s;
        padding-top: 0vh;
        z-index: 44;
        margin-left: 4vh;
        object-position: bottom;
    }
    
    #first #image3 img:hover {
        background-color: #d4ce159f;
    }
    
    #page3 .content #ruless {
        width: 100%;
        height: 50vh;
        margin-top: 0vh;
        padding: 0vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #ruless .container {
        background: #ffc6fc;
        width: 80%;
        border: 2px solid black;
        height: 100%;
        border-radius: 10px;
        padding-left: 2vh;
        padding-top: 2vh;
        line-height: 3vh;
    }
    
    #ruless .container h2 {
        font-family: td1;
        font-size: 3vh;
        text-shadow: 0 0 1vh rgb(244, 103, 234);
        text-align: start;
    }
    
    #ruless .container h3 {
        font-family: td2;
        font-size: 2.5vh;
        text-shadow: 0 0 1vh rgba(238, 92, 216, 0.832);
        text-align: start;
        font-weight: 500;
    }
    
    #ruless .container i {
        font-size: 1.5vh;
        padding-top: 2vh;
        margin-right: 1vh;
    }
    
    #page4 {
        width: 100%;
        height: 60vh;
        background: #000;
        padding: 3vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    
    #page4 #container {
        width: 80%;
        height: 60%;
        background-color: #01A9C8;
        background: url(./assets/white-paper-texture-AZ4HYL4A.jpg);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: 8px;
        margin-bottom: 10vh;
    }
    
    #page4 h1 {
        text-align: center;
        font-family: rm1;
        font-size: 6vh;
        color: white;
    }
    
    #page4 #image {
        height: 100%;
        width: 80%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #page4 #image img {
        object-fit: contain;
        height: 100%;
        width: 100%;
    }
    
    #page5 {
        width: 100%;
        height: 65vh;
        background: #000;
        color: rgb(255, 253, 249);
        padding: 4vh;
    }
    
    #page5 h1 {
        text-align: center;
        font-family: ct1;
        font-size: 5vh;
    }
    
    #page5 .faq1 {
        width: 100%;
        position: relative;
        height: fit-content;
        cursor: pointer;
        border: 1px solid #e4bae4;
        margin-top: 1.5vh;
    }
    
    #page5 .faq1 h2 {
        font-family: td2;
        font-size: 2.8vh;
        height: fit-content;
        width: 100%;
    }
    
    #page5 .faq1 h3 {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1.6vh;
        height: fit-content;
    }
    
    .faq1 .ans {
        display: none;
    }
    
    .faq .ri-arrow-down-s-line {
        transition: transform 0.3s ease;
    }
    
    .faq .ri-arrow-up-s-line {
        transition: transform 0.3s ease;
    }
    
    #footer {
        width: 100%;
        min-height: 40vh;
        background: rgb(0, 0, 0);
        padding: 1vh;
    }
    
    #footer .contacts {
        width: 100%;
        height: 40vh;
        display: flex;
        flex-direction: column;
        gap: 4vh;
        margin-top: 2vh;
        align-items: center;
        justify-content: space-around;
    }
    
    .p1 {
        width: 40vh;
        height: 80%;
        background: white;
        border-radius: 5px;
        box-shadow: 0 0px 10px #bcacbc;
    }
    
    .p1 .up {
        width: 30vh;
        height: 70%;
        display: flex;
        padding: 2vh;
    }
    
    .p1 .up #imgii {
        width: 13vh;
        height: 90%;
        overflow: hidden;
        border-radius: 5px;
    }
    
    #imgii img {
        width: 10vh;
        height: 100%;
        object-fit: cover;
        object-position: top;
        box-shadow: 0.5px 0.5px 5px rgba(0, 0, 0, 0.94);
        border-radius: 5px;
    }
    
    .p1 .up #text {
        width: 15vh;
        height: 100%;
    }
    
    .up #text h1 {
        font-size: 3vh;
        font-family: rm1;
        color: rgb(0, 0, 0);
    }
    
    #text h2 {
        font-size: 2vh;
        font-family: rm1;
        color: #000;
        text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.05);
    }
    
    #text h3 {
        color: #000;
        font-size: 3vh;
        margin-left: 1vh;
        display: flex;
    }
    
    #text h3 span {
        margin-left: 1vh;
        text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.05);
    }
    
    #pinkbottom {
        width: 100%;
        height: 35vh;
        background: #f40cf4c6;
        margin-top: 60vh;
        display: flex;
        padding: 4vh;
        font-family: td2;
        position: relative;
    }
    
    #pinkbottom .left {
        text-align: center;
        margin-left: 2vh;
        margin-bottom: 0vh;
    }
    
    .left h1 {
        font-size: 2.2vh;
        font-family: rm1;
        margin-bottom: 2vh;
        color: white;
        text-shadow: 0 0 7px rgba(85, 82, 82, 0.656);
    }
    
    .left .logo {
        width: 20vh;
        height: 50%;
    }
    
    .logo .img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    #pinkbottom .left h2 {
        font-size: 2.5vh;
        font-family: td2;
        margin-bottom: 1.7vh;
    }
    
    .left h2 span {
        margin-left: 1vh;
    }
    
    .right {
        width: 30%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-family: td2;
        font-size: 2vh;
        margin-left: 3vh;
        margin-top: 5vh;
        text-transform: capitalize;
    }
    
    #sideimg {
        width: 10vh;
        height: 80%;
        position: absolute;
        left: -2.92%;
    }
    
    #sideimg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    #sideimg2 {
        width: 10vh;
        height: 100%;
        position: absolute;
        left: 80.2%;
    }
    
    #sideimg2 img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    #slider {
        min-width: 6%;
        height: 8vh;
        background: rgba(210, 47, 210, 0.856);
    }
    
    #slider #inner {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10vh;
        animation: marquee 10s linear infinite;
        gap: 12px;
    }
    
    #slider h2 {
        font-family: rm1;
        font-size: 4vh;
    }
    
    @keyframes marquee {
        0% { transform: translateX(0%); }
        100% { transform: translateX(calc(-100% - 12px)); }
    }
/* } */