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

html,
body {
    height: 100%;
    width: 100%;

}

nav {
    position: absolute;
    top: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14vh;
    width: 100%;
    /* background-color: #000000; */
}

.main-links {
    display: flex;
    align-items: center;
    height: 10vh;
    border-radius: 10px;
    width: 50%;
    padding: 10px;
    background-color: #1E1E20;
    border: 0.5px solid rgba(255, 255, 255, 0.186);
}

.main-links .left {
    height: 8vh;
    width: 10vh;
    border-radius: 10px;
    background-image: url(./Assets/maleimg.avif);
    background-size: cover;
}

.main-links .center {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    width: 70%;
    /* background-color: blue; */
}

.main-links .center a {
    color: white;
    text-decoration: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
}

.main-links .center a:hover {
    scale: 1.1;
}


.main-links .right {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    width: 30%;

}

.rone {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.779);
    font-size: 29px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    /* background-color: antiquewhite; */
    border: 0.5px solid rgba(255, 255, 255, 0.326);
    font-weight: 400;
    cursor: pointer;
    padding-left: 2px;

}

.rtwo {
    height: 44px;
    width: 100px;
    border: none;
    border-radius: 10px;
    background-color: #0055FE;
    color: white;
    font-size: 15px;
    border: 0.5px solid rgba(255, 255, 255, 0.26);
    box-shadow: 0px 0px 5px #0055FE;
    cursor: pointer;
    scale: 0.9;
    transition: all 0.3s;
}
.rtwo:hover {
    scale: 1.1;

}

.main {
    display: flex;

    height: 100vh;
    width: 100%;
    background-color: rgb(0, 0, 0);

}

.one-left {
    height: 100vh;
    width: 20%;
    border-right: 1px solid rgba(255, 255, 255, 0.168);
}



.one-right {
    /* position: absolute; */
    /* left: 86%; */
    height: 100vh;
    width: 20%;
    border-left: 1px solid rgba(255, 255, 255, 0.168);

}

.one-cen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96vh;
    overflow: hidden;
    width: 60%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.97) 0%, rgba(173, 173, 173, 0.08) 50%, rgba(0, 0, 0, 0.97) 100%);
}

.one-cen h1 {
    font-size: 100px;
    color: rgba(255, 255, 255, 0.466);
    text-wrap: nowrap;
    /* margin-left: 180%; */
    animation: scroll 20s infinite cubic-bezier(0.19, 1, 0.22, 1) alternate;
}

.img {
    margin-top: 4%;
    position: absolute;
    height: 55vh;
    border-radius: 20px;
    width: 20vw;
    background-color: antiquewhite;
    background-image: url(./Assets/maleimg.avif);
    background-size: cover;
}

.imghov {
    position: absolute;
    height: 60vh;
    border-radius: 20px;
    width: 20vw;
    background-color: antiquewhite;
    background-image: url(./Assets/maleimg.avif);
    background-size: cover;

}

@keyframes scroll {
    0% {
        margin-left: 0;
    }

    100% {
        margin-left: -100%;
    }

}

.overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* background-color: antiquewhite; */
    width: 100%;
    position: absolute;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(173, 173, 173, 0.08) 50%, rgba(0, 0, 0, 1) 100%);
}

.top-line {
    position: absolute;
    height: 12vh;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.168);

    /* background-color: #fff; */

}

.bottom-line {
    position: absolute;
    top: 84%;
    height: 12vh;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.168);
}

.smal {
    position: absolute;
    top: 11.5%;
    left: 19.8%;
    height: 7px;
    width: 7px;
    background-color: rgb(73, 73, 73);
}

.smal1 {
    top: 95.5%;
}

.smal2 {
    top: 11.5%;

    left: 79.8%;
}

.smal3 {
    top: 95.5%;
    left: 79.8%;
}
.para{
    position: absolute;
    top: 86%;
    font-size: 22px;
    color: rgba(255, 255, 255, 0.521);
    width: 55vh;
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    line-height: 1.2;
}

@media (max-width:580px) {

    

    nav {
        width: 180%;
        top: -1%;
        margin-left: -40%;
    }

    .main-links {
        height: 8vh;
    }

    .main-links .left {
        height: 7vh;
        margin-left:-1% ;
    }

    .main-links .center {
        display: none;
    }

    .main-links .right {
        margin-left: 32%;
        gap: 10px;
    }

    .rone {
        height: 35px;
        padding-left: 0px;
    }

    .rtwo {
      padding: 10px 13px;
      height: 38px;
    }

    .one-left {
        width: 3%;
    }

    .one-cen {
        width: 94%;
    }
    .one-right {
        width: 3%;
    }

    .one-cen h1 {
        font-size: 60px;
    }

    .img{
        height: 35vh;
        width: 48vw;
    }

    .smal {
        left: 2%;
    }
    .smal3 {
        left: 96.1%;
    }
    .para{
    top: 78%;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.521);
    width: 45vh;
    line-height: 1.4;
}
}