@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


:root{
    --bg-clr: #1D242E;
    --btn-clr: #69EA57;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
a{
    color: #fff;
    text-decoration: none;
}
li{
    list-style: none;
}
body {
    min-height: 100vh;
    background: var(--bg-clr)
}
.hero{
    position: relative;
}
.hero nav{
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 9%;
    width: 100%;
    z-index: 100;
}
nav .logo{
    font-size: 35px;
    font-weight: 600;
}
#menu{
    display: none;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}
nav ul{
    display: flex;
}
nav ul li{
    margin-left: 35px;
}
nav ul li a{
    font-size: 20px;
    font-weight: 500;
    transition: 0.5s;
}
nav ul .active a,
nav ul li a:hover{
    color: var(--btn-clr);
    
}







.hero section{
    display: flex;
    align-items: center;
    padding: 32px 9%;
    min-height: 100vh;
}
section .home-info{
    position: relative;
}

.home-info h1{
    color: #fff;
    font-size: 55px;
}
.home-info h2{
    color: #fff;
    font-weight: 600;
    font-size: 32px;
}
.home-info h2 span{
    color: var(--btn-clr);
}

.home-info .description{
    color: #fff;
    font-size: 16px;
    margin: 10px 0 25px;
}
.home-info .btn-sci{
    position: relative;
    display: flex;
    align-content: center;
}
.home-info .btn-sci .btn{
    display: inline-block;
    border-radius: 40px;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: 700;
    border: 2px solid var(--btn-clr);
    box-shadow: 0px 0px 10px var(--btn-clr);
    cursor: pointer;
    color: var(--bg-clr);
    background: var(--btn-clr);
    transition: 0.5s;
}
.home-info .btn-sci .btn:hover{
    color: #fff;
    background: transparent;
}
.btn-sci .sci{
    margin-left: 20px;
}
.btn-sci .sci a{
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 8px;
    font-size: 20px;
    margin: 0 8px;
    border: 2px solid var(--btn-clr);
}
.btn-sci .sci a:hover{
    color:  var(--bg);
    background: var(--btn-clr);
}

.home-img .img-box{
   position: relative;
   width: 32vw; 
   height: 32vw;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 5px;
   overflow: hidden;
}
.home-img .img-box::before,
.home-img .img-box::after{
    content: " ";
    position: absolute;
    width: 500px;
    height: 500px;
    background: conic-gradient(transparent, transparent, transparent, #69EA57);
    transform: rotate(0deg);
    animation: rotate-border 10s linear infinite;
}
.home-img .img-box::after{
    animation-delay: -5s;
}
@keyframes rotate-border {
    100% {
        transform: rotate(360deg);
    }
}



.home-img .img-item{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    z-index: 1;
    background: var(--bg-clr);
    overflow: hidden;
}
.home-img .img-item img{
    position: absolute;
    top: 0px;
    display: block;
    width: 100%;
    object-fit: cover;
    mix-blend-mode: lighten;
}




/* Responsive Design For Mobile */
@media screen and (max-width: 1200px) {
    html{
        font-size: 55%;
    }
}


@media screen and (max-width: 992px) {
    .hero nav{
        padding: 16px 4%;
    }
    .hero section{
        padding: 10rem 4% 2rem;
    }
}




@media screen and (max-width: 768px) {
     #menu {
     display: block;
 }
    .hero nav .nav-item{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem 0;
        background: var(--bg-clr);
        text-align: center;
        border-top: .1rem solid rgba(0, 0, 0, 0.2);
        box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.2);
        display: none;
    }
    nav ul.active{
        display: block;
    }
    
    nav ul li{
        display: block;
        margin-left: 0;
    }
    nav ul li a{
        display: block;
        padding: 3rem 0;
        cursor: none;
    }
    .home{
        position: relative;
        
        flex-direction: column-reverse;
        justify-content: center;
    }
    .home-info{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .home-info h1 {
        font-size: 35px;
    }
    .home-info h2 {
        font-size: 25px;
    }
    .home-info .description{
        text-align: center;
        font-size: 14px;
    }
    .home-info .btn-sci{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
}
    .home-info .btn-sci .btn {
        text-align: center;
        width: 168px;
        padding: 10px 00px;
        font-size: 13px;
        margin: 20px 0;
    }
    .btn-sci .sci a {
        padding: 8px;
        font-size: 20px;
        margin: 0 5px;
}
    .home-img .img-box {
        width: 200px;
        height: 200px;
        margin: 0 0 20px;
}
}