@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;
}

body {
    width: 100%;
    height: auto;
    position: relative;
}

a{
    color: #ebb6cb;/*Okay*/
    text-decoration: none; /*Okay*/
    text-shadow: #1f242d;
}

.navbar {
    position: fixed;/*Okay*/
    left: 0;/*Okay*/
    top:0;/*Okay*/
    width: 100%;/*Okay*/
    padding: 25px 9%;/*Okay*/
    display: flex;/*Okay*/
    justify-content: space-between;/*Okay*/
    align-items: center;/*Okay*/
    background-image: linear-gradient(to bottom, rgb(0,0,0,0.8), rgb(0,0,0,0.6)) /*gradient overlay first*/
  ,url(/assets/Images/Pink\ blossom.jpg)/*image underneath*/;
  background-size: cover;
  background-repeat: no-repeat;
    z-index: 100;/*Okay*/
    visibility: hidden;/*Okay*/
    opacity: 0;/*Okay*/
    animation: show-content 1.5s linear forwards;/*Okay*/
    animation-delay: 1.2s;/*Okay*/
}

@keyframes show-content {
    100% {
        visibility: visible;/*Okay*/
        opacity: 1;/*Okay*/
    }
}

.navbar .logo{
    font-size: 30px;/*Okay*/
    font-weight: 700;/*Okay*/
    color: #ff096c;
}

.navbar ul{
    display: flex;/*Okay*/
}

.navbar ul li {
    list-style: none;/*Okay*/
    margin-left: 35px ;/*Okay*/
}

.navbar ul li a {
    font-size: 20px;/*Okay*/
    font-weight: 500;/*Okay*/
    transition: .5s;/*Okay*/
}

.navbar ul li:hover a,/*Okay*/
.navbar ul li.active a {/*Okay*/
    color: #ff096c;/*Okay*/
}

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

.home-info h1{
    font-size: 55px;/*Okay*/
}

.home-info h2 {
    font-size: 32px;/*Okay*/
    margin-top: -10px;/*Okay*/
    display: inline-block;/*Okay*/
}

.home-info h2 span{
    position: relative;/*Okay*/
    display: inline-block;/*Okay*/
    color: transparent;/*Okay*/
    -webkit-text-stroke: .7px #ff096c;/*Okay*/
    animation: display-text 16s linear infinite;/*Okay*/
    animation-delay: calc(-4s * var(--i));/*Okay*/
}

@keyframes display-text {
    25%,100% {/*Okay*/
        display: none;/*Okay*/
    }
}

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

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

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

.home-info .btn-sci {
    display: flex;/*Okay*/
    align-items: center;/*Okay*/
}

.btn {
    display: inline-block;/*Okay*/
    padding: 10px 30px;/*Okay*/
    background:#ff096c ;/*Okay*/
    border: 2px solid #ff096c;/*Okay*/
    border-radius: 40px;/*Okay*/
    box-shadow: 0 0 10px #ff096c;/*Okay*/
    font-size: 16px;/*Okay*/
    color: #1f242d;/*Okay*/
    font-weight: 600;/*Okay*/
    transition: .5s;
}

.btn:hover {
    background: transparent;/*Okay*/
    color: #ff096c;/*Okay*/
    box-shadow: none;/*Okay*/
}

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

svg {
    fill: #ff096c;
}
svg:hover {
    fill:#1f242d
}

.home-info .btn-sci .sci a {
    display:inline-flex;/*Okay*/
    padding: 8px;/*Okay*/
    border: 2px solid #ff096c;/*Okay*/
    border-radius: 50%;/*Okay*/
    font-size: 20px;/*Okay*/
    color: #ff096c;/*Okay*/
    margin:0 8px;/*Okay*/
    transition: .5s;/*Okay*/
}

.home-info .btn-sci .sci a:hover {
    background: #ff096c;/*Okay*/
    color: #1f242d;/*Okay*/
    box-shadow: 0 0 10px #ff096c;/*Okay*/
}

.home-img .img-box {
    position: relative;/*Okay*/
    width: 32vw;/*Okay*/
    height: 32vw;/*Okay*/
    border-radius: 50%;/*Okay*/
    padding: 5px;/*Okay*/
    display: flex;/*Okay*/
    justify-content: center;/*Okay*/
    align-items: center;/*Okay*/
    overflow: hidden;/*Okay*/
}

.home-img .img-box::before,
.home-img .img-box::after {/*Okay*/
    content: '';/*Okay*/
    position: absolute;/*Okay*/
    width:500px;/*Okay*/
    height:500px;/*Okay*/
    background:conic-gradient(transparent, transparent, transparent, #ff096c);/*Okay*/
    transform: rotate(0deg);/*Okay*/
    animation: rotate-border 10s linear infinite;/*Okay*/
}

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

@keyframes rotate-border {
    100% {/*Okay*/
        transform: rotate(360deg);/*Okay*/
    }
}
.home-img .img-box .img-item{
    position: relative;
    width:100%;/*Okay*/
    height:100%;/*Okay*/
    background: #1f242d;
    z-index: 1;/*Okay*/
    border-radius: 50%;/*Okay*/
    border: 1px solid #1f242d;/*Okay*/
    display: flex;/*Okay*/
    justify-content: center;/*Okay*/
    overflow: hidden;/*Okay*/
}

.home-img .img-box .img-item img {
    position:absolute;/*Okay*/
    display: block;/*Okay*/
    /*top: 30px;Okay*/
    width: 100%;/*Okay*/
    height: 100%;
    object-fit: scale-down ;/*Okay*/
    mix-blend-mode: lighten;/*Okay*/
}

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

.bars-animation .bar{
    width: 100%;/*Okay*/
    height: 100%;/*Okay*/
    background: #1f242d;/*Okay*/
    transform: translateY(-100%);
    animation: show-bars .5s ease-in-out forwards;/*Okay*/
    animation-delay: calc(.1s*var(--i));/*Okay*/
}

@keyframes show-bars {
    100% {
        transform: translateY(0%);/*Okay*/
    }
}

/*Hamburger*/
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: white;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 3px;
}

/* MOBILE - Hide menu off-screen until hamburger clicked */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    
    /* ONLY apply mobile hiding to .nav-menu, NOT .navbar ul */
    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: #333;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 2rem;
        transition: left 0.3s ease;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-menu li {
        margin: 1rem 0;
        opacity: 0;
        transform: translateX(-20px);
        transition: all 0.3s ease;
    }
    
    .nav-menu.active li {
        opacity: 1;
        transform: translateX(0);
    }
    
    /* Stagger animation delays */
    .nav-menu li:nth-child(1) { transition-delay: 0.1s; }
    .nav-menu li:nth-child(2) { transition-delay: 0.2s; }
    .nav-menu li:nth-child(3) { transition-delay: 0.3s; }
    .nav-menu li:nth-child(4) { transition-delay: 0.4s; }
    
    /* Hamburger animations */
    .hamburger.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
}