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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    }

    
    
    a{
        color:#fff;
        text-decoration: none;
}

    .navbar {
    
        position: fixed ;
        left: 0;
        top: 0;
        width: 100%;
        padding: 25px 9%;
        
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 100;
        visibility: hidden;
        opacity:0;
    animation: show-content 1.5s linear forwards;
    animation-delay: 1.1s;
height:17vh;
}
    
    @keyframes show-content{
        100%{
            visibility: visible;
            opacity:1;
        }
    }
    .navbar .logo{
        color: #fff;
        font-size: 30px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
 
    }
    .navbar ul  {
        display: flex;
    } 
    .navbar ul li{
        list-style: none;
        margin-left: 35px;
    
    }
    .navbar ul li a {
        font-size: 20px;
        font-weight: 500;
        transition: .5s;
        
    } 
    .navbar ul li:hover a,
    .navbar ul li.active a {
        color: #ff3d00;
    }

.home {
    display: flex;
    align-items: center;
    gap: 50px;
    height: 100vh;
    padding: 60px 9% 0;
    color: #fff;
 visibility: hidden;
        opacity:0;
    animation: show-content 1.5s linear forwards;
    animation-delay: 1.1s;

}

 .home-info h1{
    font-size:55px;
 
}  
.home-info h2
{
   display: inline-block;
    font-size:32px;
    margin: 10px ;
    
}
.home-info h2 span {
    position:relative;
    display:inline-block;
    color: transparent;
    -webkit-text-stroke: .7px #ff3d00;
    animation: display-text 16s linear infinite;
    animation-delay: calc(-4s * var(--i));
}
@keyframes display-text {
    25%, 100% {
        opacity: 0;
        visibility: hidden;
    }
}

.home-info h2 span::before {
content: attr(data-text);
position : absolute;
width: 0;
border-right: 2px solid #ff3d00;
color:#ff3d00;
white-space: nowrap;
overflow: hidden; 
animation: fill-text 4s linear infinite;
}

@keyframes fill-text{
    10%, 100%{
        width: 0;
    }70%, 90%{
        width: 100%;}};


.home-info p{
    font-size:16px;
    margin: 10px 0 25px;
   
}   

.home-info .btn-sci{
    display:flex;
    align-items:center;
}
.btn {
    display:inline-block;
    padding:10px 30px;
    background:#ff3d00;
    color:#fff;
    border: 2px solid #000000;
    font-size:16px;
    font-weight:600;
    border-radius:40px;
    box-shadow: 0 0 10px #ff3d00;
    transition:.5s;
}
 .btn:hover {
    background: oklab(87.32% -0.21141 0.12967);
    color:hsl(0, 0%, 100%);
    box-shadow:none;
    border: 2px solid #000;
 }

 .home-info .btn-sci .sci {
    margin-left: 20px;
 }

.home-info .btn-sci .sci a {
    display: inline-flex;
    padding: 8px;
    border: 2px solid #ff3d00;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    margin: 0 8px;
    transition: .5s;
}
 
.home-info .btn-sci .sci a:hover {
    background: #ff3d00;
    color: #000;
    box-shadow: 0 0 10px #ff3d00;
}

.home-img .img-box {
    position: relative;
    width: 32vw;
    height: 32vw;
   background-color: #ff0000;
    padding: 5px;
    border-radius: 50%;
    display:flex;
    justify-content: center;
    align-items: center;
   

}

    .home-img .img-box::before,
    .home-img .img-box::after {
        content: '';
        position: absolute;
        
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: conic-gradient(transparent, transparent, transparent, #ff3d00);
        transform: rotate(0deg);
        animation: rotate-border 10s linear infinite;
        overflow:hidden
    }

    .home-img .img-box::after {
        animation-delay: -5s;
    }

    @keyframes rotate-border{
    100%{
        transform: rotate(360deg);
        }
    }
.home-img .img-box .img-item {
    position: relative;
    width: 100%;
    height: 100%;  
    border-radius: 50%;
    border: .1px solid rgb(0, 0, 0);
    display:flex;
    justify-content:center;
    z-index: 1 ;
    overflow: hidden;
    color:rgb(0, 0, 0);
    
}
 
.home-img .img-box .img-item img {
    position: absolute;
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
    
    
}

.bars-animation{
    position:absolute;
    width: 100%;
    height:100%;
    display: flex;
    z-index: -1;

}

.bars-animation .bar{
    width: 100%;
    height: 100%;
    background: #000000;
    transform:translateY(-100%);
    animation: show-bars .5s ease-in-out forwards;
    animation-delay: calc(.1s * var(--i));
}
 @keyframes show-bars{
    100%{
    transform: translateY(0%);
 }
 }
 h1{
    color:#fff;;
}

h2{
    color:#fff;
}

p{
    color:#fff;
    padding-bottom: 20px;
font-size: px;
    } 

    .logo img{
        height: 200px;
        width: auto;
    }

    
    #wrapper {
        position:absolute;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: auto;
        max-height: fit-content;
    }

   
    /* HAMBURGER MENU STYLE */
    #hamburger-nav {
        display: none;
    background-color: #000;
    text color: white;
    }

    .hamburger-menu {
        
        display: inline-block;
        
    }

    .hamburger-icon{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 24px;
        cursor: pointer;
    }


    html{
        scroll-behavior: smooth;
    }

    .hamburger-icon span{
        width:100%
        height:2px;
        background:#fff;
        transition:all 0.3s ease; 
    }
.menu-links{
    position: absolute;
    top: 100px;
    right: 0;
    background-color: #ff0000;
    width: fit-content;
    max-height0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    right: 0px
}

body{
    background-size:80%;
   
}