* {
    margin: 0px;
    padding: 0px;
    border-radius: 0px solid;
    scrollbar-width: none;
}

body {
    font-family: Inter, InterNeue, Inter Neue, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    background-color: black;
    color: white;
    
}

body::selection{
    background-color: aquamarine;
    color: black;
}

.hover1{
    width: 20.5vw;
    height: 46vw;
    border: 1px solid aquamarine;
    position: absolute;
    left: 65vw;
    border-radius: 2vw;
    top: 5vw;
    display: none;
    transition: all 2s;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hover2{
    width: 20.5vw;
    height: 37vw;
    border: 1px solid aquamarine;
    position: absolute;
    left: 73vw;
    border-radius: 2vw;
    top: 5vw;
    display: none;
    transition: all 2s;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}
.hover3{
    width: 20.5vw;
    height: 27.7vw;
    border: 1px solid aquamarine;
    position: absolute;
    left: 77vw;
    border-radius: 2vw;
    top: 5vw;
    display: none;
    transition: all 2s;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}

.hover1data1{
    width: 20vw;
    height: 9vw;
    border: 1px solid black;
    border-radius: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(40, 42, 41);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    z-index: 1;
}
.hover1data1:hover{
    width: 20vw;
    height: 9vw;
    border: 1px solid aquamarine;
    border-radius: 2vw;
    background-color: aquamarine;
    color: black;
    .hover11{
        color: black;
    }
    .hover12{
        color: black;
    }
}

.hover11{
    width: 18vw;
    height: 3vw;
    /* background-color: aliceblue; */
    border-radius: 2vw;
    color: aquamarine;
    display: flex;
    justify-content: start;
    font-weight: 800;
    font-size: 1.4vw;
    align-items: center;
}
.hover12{
    width: 18vw;
    height: 5vw;
    /* background-color: aliceblue; */
    border-radius: 2vw;
    color: rgb(112, 138, 144);
    display: flex;
    font-size: 1.2vw;
    font-weight: 500;
    justify-content: start;
    align-items: start;
}



















.main{
    width: 100%;
    height: auto;
    /* border: 4px solid green; */
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 5vw;
}

.nav{
    width: 100%;
    height: 5vw;
    /* border: 2px solid green; */
    display: flex;
    justify-content: center;
    gap: 45vw;
    align-items: center;
}

.logo{
    width: 15vw;
    height: 5vw;
    /* border: 2px solid red; */
    display: flex;
    justify-content: start;
    align-items: center;
}

.logoimg{
    width: 3vw;
    cursor: pointer;
}

.navdata{
    width: 30vw;
    height: 5vw;
    /* border: 4px solid green; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.navdata1{
    width: 6vw;
    height: 3vw;
    border: 0.2vw solid black;
    /* border: 3px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2vw;
    font-size: 1vw;
    cursor: pointer;

}
.navdata1:hover{
    width: 6vw;
    height: 3vw;
    border: 0.2vw solid aquamarine;
    display: flex;
    justify-content: center;
    align-items: center;
    color: aquamarine;
    transition: all 0.2s ease-in-out;
    background-color: rgb(55, 54, 54);

}
.navdata2{
    width: 10vw;
    height: 3vw;
    border: 2px solid aquamarine;
    display: flex;
    justify-content: center;
    align-items: center;
    color: aquamarine;
    transition: all 0.2s ease-in-out;
    border-radius: 2vw;
    background-color: black;
    font-size: 1vw;
    cursor: pointer;
}
.navdata2:hover{
    width: 10vw;
    height: 3vw;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 2vw;
    transition: all 0.2s ease-in-out;
    background-color: black;
}

.mainimg{
    width: 90%;
    height: auto;
    /* border: 3px solid red; */
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 3vw;

}

.mainimgborder{
    /* border: 3px solid white; */
    width: 40vw;
}
.mainimgborder1{
    /* border: 3px solid white; */
    width: 80vw;
}

.mainfont{
    font-size: 4vw;
    width: 30vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: center;
    cursor: pointer;
}
.mainfont4{
    font-size: 4vw;
    width: 60vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: center;
    cursor: pointer;
}
.box1f{
    font-size: 3vw;
    width: 20vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: center;
}
.box1fd1{
    font-size: 3vw;
    width: 20vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: left;
}

.mainfont2{
    color: gray;
    width: 35vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: center;
    font-size: 1vw;
    cursor: pointer;
}
.mainfont2d1{
    color: gray;
    font-size: 1vw;
    width: 35vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: left;
}
.mainfont2f{
    color: gray;
    width: 20vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: center;
    font-size: 1.5vw;
}

.mainbtn{
    width: 100%;
    height: 6vw;
    /* border: 3px solid white; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1.5vw;
    gap: 15vw;
}

.mainbtn1{
    width: 15vw;
    height: 5vw;
    border-radius: 2vw;
    border: 2px solid aquamarine;
    background-color: aquamarine;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    cursor: pointer;
}
.mainbtn1:hover{
    width: 15vw;
    height: 5vw;
    border-radius: 2vw;
    border: 2px solid aquamarine;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    color: aquamarine;
    transition: all 0.3s ease-in-out;
}
.mainbtn2{
    position: relative;  
    width: 15vw;
    height: 5vw;
    border-radius: 2vw;
    border: 2px solid aquamarine;
    display: flex;
    justify-content: center;
    align-items: center;
    color: aquamarine;
    overflow: hidden;
    cursor: pointer;
}
.mainbtn2:hover{
    position: relative;  
    width: 15vw;
    height: 5vw;
    border-radius: 2vw;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    overflow: hidden;
    transition: all 0.5s;

    .ani1{
    width: 15vw;
    height: 10vw;
    background-color: aliceblue;
    position: absolute;
    z-index: -1;
    border-radius: 35%;
    animation: ani1 0.4s ease-in;
}
}

.mainfont3{
    font-size: 2vw;
    width: 60vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: center;
    cursor: pointer;
}
.mainfont3p1{
    font-size: 2vw;
    width: 30vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: center;
    cursor: pointer;
    color: rgb(109, 101, 101);
}
.mainfont3p1:hover{
    font-size: 2vw;
    width: 30vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: center;
    cursor: pointer;
    color: rgb(61, 94, 83);
}



@keyframes ani1 {
    0%{
        margin-top: 15vw;
    }
    100%{
        margin-top: -1vw;
    }
}

.comp{
    width: 80vw;
    height: 14vw;
    /* border: 3px solid green; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;

}
.comp1{
    width: 8vw;
    cursor: pointer;
    /* border: 3px solid green; */
}
.comp2{
    width: 15vw;
    height: 5vw;
    /* border: 3px solid green; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.box{
    width: 80vw;
    height: auto;
    /* border: 3px solid red; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.box1{
    width: 20vw;
    height: auto;
    /* border: 3px solid green; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}

.hr1{
    width: 10vw;
    position: absolute;
    z-index: -1;
    height: 0.3vw;
    background: linear-gradient(to left,blue,rgb(243, 31, 66));
    transform: rotate(90deg);
    margin-left: 25vw;

}
.hr2{
    width: 10vw;
    position: absolute;
    z-index: -1;
    height: 0.3vw;
    background: linear-gradient(to left,blue,rgb(243, 31, 66));
    transform: rotate(90deg);
    margin-right: 25vw;

}

.part1{
    width: 100%;
    height: 80vw;
    /* border: 4px solid green; */
    
}
.part1p1{
    width: 100%;
    height: 50vw;
    /* border: 4px solid green; */

}

.div1{
    width: 100%;
    height: 70vw;
    /* border: 4px solid red; */
    display: flex;
    justify-content: start;
    align-items: center;
}

.div1p1{
    width: 100%;
    height: 50vw;
    /* border: 4px solid red; */
    display: flex;
    justify-content: start;
    align-items: center;
}





.div11{
    width: 50vw;
    height: 50vw;
    /* border: 4px solid yellow; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    
    

}
.div11p1{
    width: 50vw;
    height: 50vw;
    /* border: 4px solid yellow; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5vw;
    
    

}

.img11p1{
    width: 90%;
    height: auto;
    /* border: 3px solid aquamarine; */
    border-radius: 3vw;
    /* animation: img1 5s ease-in-out infinite; */
}

a{
    text-decoration: none;
}


.img11{
    width: 90%;
    height: auto;
    border: 3px solid aquamarine;
    border-radius: 3vw;
    animation: img1 5s ease-in-out infinite;
}

@keyframes img1 {
    0%{
        margin-top: -25vw;
        opacity: 0;
    }
    25%{
        opacity: 0.8;
    }
    50%{
        margin-top: 35vw;
        opacity: 0;
    }
    75%{
        opacity: 0.8;
    }
    100%{
        margin-top: -25vw;
        opacity: 0;
    }
    
}

.mainfont4d1{
    font-size: 4vw;
    width: 40vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: center;
    cursor: pointer;
}

.divf1{
    width: 80%;
    height: 12vw;
    border: 3px solid black;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: start;
    padding-left: 2vw;
    border-radius: 2vw;
    background-color: rgb(47, 45, 45);
    cursor: pointer;
}
.divf1:hover{
    width: 80%;
    height: 12vw;
    border: 3px solid aquamarine;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: start;
    padding-left: 3vw;
    border-radius: 2vw;
    background-color: rgb(51, 77, 80);
    /* transform: scale(1.1); */

    .mainfont4d1, .mainfont2d1{
        color: aliceblue;
        font-size: 1vw;
    }



}

#logo{
    width: 7vw;
}

#mar1{
    margin-top: 3vw;
}


.part2{
    width: 100%;
    height: auto;
    /* border: 4px solid green; */
    
}

.div21{
    width: 100%;
    height: 20vw;
    /* border: 2px solid red; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    cursor: pointer;

}

.mainfontc{
    color: aquamarine;
    width: 35vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: center;
    font-size: 1vw;
    text-decoration: underline;
    cursor: pointer;
}

.b1{
    width: 1vw;
    height: 1vw;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    margin-left: 48vw;
    transform: rotate(45deg);
    transition: all 0.8s ease-in-out;
    cursor: pointer;
}
.b2{
    width: 1vw;
    height: 1vw;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    margin-left: 30.7vw;
    transform: rotate(45deg);
    transition: all 0.8s ease-in-out;
    cursor: pointer;
}
.b3{
    width: 1vw;
    height: 1vw;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    margin-left: 30.9vw;
    transform: rotate(45deg);
    transition: all 0.8s ease-in-out;
    cursor: pointer;
}


.div22{
    width: 100%;
    height: 50vw;
    /* border: 3px solid yellow; */
    overflow: hidden;
}
.div22p1{
    width: 100%;
    height: auto;
    /* border: 3px solid yellow; */
    overflow: hidden;
    gap: 3vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.aniimg1{
    width: 40vw;
    position: absolute;
    margin-left: 5vw;
    animation: img11 5s ease-in-out infinite;
}
.aniimg2{
    width: 60vw;
    position: absolute;
    margin-left: 35vw;
    margin-top: 5vw;
}

@keyframes img11 {
    0%{
        margin-top: -5vw;
        opacity: 0.8;
    }
    50%{
        margin-top: 10vw;
        opacity: 0.8;
    }
    100%{
        margin-top: -5vw;
        opacity: 0.8;
    }
}

.js1{
    width: 70%;
    height: auto;
    /* border: 3px solid green; */
    border-radius: 2vw;
    background-color: #0a0e14;
    transition: all 1s ease-in-out;
}

.js11{
    width: 95%;
    height: 5vw;
    /* border: 2px solid green; */
    border-radius: 2vw;
    font-size: 1.5vw;
    font-weight: 550;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 3vw;
    color: aquamarine;
}
.js121{
    width: 95%;
    height: 10vw;
    /* border: 2px solid green; */
    border-radius: 2vw;
    font-size: 1.3vw;
    display: none;
    font-weight: 400;
    justify-content: start;
    align-items: center;
    padding-left: 3vw;
    color: rgb(139, 157, 151);
    transition: all 1s ease-in-out;
    animation: ani11 1s ease-in-out;
}

@keyframes ani11 {
    0%{
        height: 0vw;
        opacity: 0;
        font-weight: 0;
    }
    100%{
        height: 10vw;
        opacity: 1;
        font-weight: 550;
        
    }
}



.js122{
    width: 95%;
    height: 10vw;
    /* border: 2px solid green; */
    border-radius: 2vw;
    font-size: 1.3vw;
    display: none;
    font-weight: 400;
    justify-content: start;
    align-items: center;
    padding-left: 3vw;
    animation: ani11 1s ease-in-out;
    color: rgb(139, 157, 151);
    transition: all 1s ease-in-out;
}
.js123{
    width: 95%;
    height: 10vw;
    /* border: 2px solid green; */
    border-radius: 2vw;
    font-size: 1.3vw;
    display: none;
    font-weight: 400;
    justify-content: start;
    align-items: center;
    padding-left: 3vw;
    transition: all 1s ease-in-out;
    color: rgb(139, 157, 151);
    animation: ani11 1s ease-in-out;
    
}










.lern{
    width: 100%;
    height: 50vw;
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.lernbox{
    width: 70%;
    height: 70%;
    border-radius: 2vw;
    box-shadow: 0.2vw 0.2vw 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* border: 2px solid red; */
    gap: 5vw;
    overflow: hidden;
    position: relative;
    

}

#gap{
    justify-content: center;
    align-items: center;
    gap: 3vw;
}

#ll1{
    position: absolute;
    margin-right: 28vw;
    margin-bottom: 13vw;
    font-size: 1.7vw;
    font-weight: 700;
    background-color: white;
    padding: 0.2vw;
}

#ll2{
    position: absolute;
    margin-right: 25vw;
    margin-top: 0.5vw;
    font-size: 1.7vw;
    font-weight: 700;
    background-color: white;
    padding: 0.2vw;
}

.page2all{
    width: 100%;
    height: 50vw;
    /* border: 3px solid red; */
    margin-top: 7vw;
}

input{
    width: 50%;
    height: 4vw;
    padding-left: 2vw;
    padding-right: 2vw;
    font-size: 1.5vw;
    font-weight: 500;

}

.img5{
    position: absolute;
    margin-left: 58.5vw;
    margin-top: 25vw;
    z-index: -1;
}

.img6{
    position: absolute;
    margin-left: 80vw;
    margin-top: 0vw;
    z-index: -1;
}




































.infscr{
    width: 150vw;
    height: 50%;
    /* border: 3px solid green; */
    display: flex;
    align-items: center;
    gap: 2vw;
    
}

#scr1{
    animation: ok1 20s infinite ease-in-out;
    
}

#scr2{
    animation: ok2 20s infinite ease-in-out;
}

@keyframes ok1 {
    0%{
        transform: translateX(4vw);
    }
    50%{
        transform: translateX(-33vw);
    }
    100%{
        transform: translateX(4vw);
    }
}
@keyframes ok2 {
    0%{
        transform: translateX(4vw);
    }
    50%{
        transform: translateX(-55vw);
    }
    100%{
        transform: translateX(4vw);
    }
}

.inff1{
    color: gray;
    width: 25vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: justify;
    font-size: 1vw;
}

.scrbox1{
    width: 30vw;
    height: 80%;
    border: 3px solid rgb(21, 47, 39);
    border-radius: 2vw;
    background-color: rgb(47, 45, 45);
    cursor: pointer;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;

}
.scrbox1:hover{
    border: 3px solid aquamarine;
    background-color: rgb(51, 77, 80);

    .inff1{
    color: aquamarine;
    width: 25vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: justify;
    font-size: 1vw;
}

}



.infdata{
    width: 90%;
    height: 5vw;
    /* border: 3px solid red; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.it1{
    width: 4vw;
    height: 4vw;
    /* border: 2px solid yellow; */
    border-radius: 50%;
}
.it2{
    width: 20vw;
    height: 2vw;
    /* border: 2px solid yellow; */
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 1vw;
}
.it3{
    width: 20vw;
    height: 2vw;
    /* border: 2px solid yellow; */
    display: flex;
    justify-content: start;
    align-items: center;
    color: aquamarine;
    text-decoration: underline;
    font-size: 1vw;
}

.colu{
    width: 20vw;
    height: 5vw;
    /* border: 4px solid orange; */
}

.div212{
    width: 100%;
    height: 25vw;
    /* border: 2px solid red; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    cursor: pointer;

}

.bottum{
    width: 100%;
    height: 35vw;
    /* border: 3px solid yellow; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.bottum1{
    width: 20%;
    height: 25vw;
    /* border: 3px solid yellow; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 2vw;
}

.bottumlogo{
    width: 5vw;
    cursor: pointer;
}

.mainfont3bottum{
    font-size: 2vw;
    width: 15vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: center;
    cursor: pointer;
    transition: all 0.8s;
}
.mainfont3bottum:hover{
    font-size: 2vw;
    width: 15vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: center;
    cursor: pointer;
    color: aquamarine;
}

.inff1bottun{
    color: gray;
    width: 15vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: center;
    font-size: 1vw;
    cursor: pointer;
    transition: all 0.4s;
}
.inff1bottun:hover{
    color: aquamarine;
    width: 15vw;
    height: auto;
    /* border: 3px solid white; */
    text-align: center;
    font-size: 1vw;

}

.copy{
    width: 20vw;
    /* border: 3px solid red; */
    color: gray;
    cursor: pointer;
    position: absolute;
    margin-top: 20vw;
    margin-left: 15vw;
    font-size: 1vw;
    transition: all 0.2s;
}
.copy:hover{
    width: 20vw;
    /* border: 3px solid red; */
    color: red;
    cursor: pointer;
    position: absolute;
    margin-top: 20vw;
    margin-left: 15vw;
}