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

body{
    background:#000;
    overflow:hidden;
    opacity:0;
    transition:opacity .8s;
}

/* Background Video */

#bg-video{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-3;
}

/* Overlay */

.overlay{

    position:fixed;
    width:100%;
    height:100%;

    background:rgba(0,0,0,.60);

    z-index:-2;
}

/* Spotlight */

body::before{

    content:"";

    position:fixed;

    left:50%;
    top:-250px;

    transform:translateX(-50%);

    width:700px;
    height:700px;

    background:
    radial-gradient(circle,
    rgba(255,255,255,.25),
    transparent 70%);

    pointer-events:none;

    z-index:-1;
}

/* Container */

.container{

    width:100%;
    height:100vh;

    display:flex;
    justify-content:center;
   align-items:flex-end;
padding-bottom:-10px;
    position:relative;
}

/* Names */

.left-name{

    position:absolute;

    left:9%;
    top:18%;

    color:white;

    font-size:80px;

    font-weight:900;

    letter-spacing:5px;

    animation:slideLeft 1s;
}

.right-name{

    position:absolute;

    right:7%;
    top:18%;

    color:white;

    font-size:80px;

    font-weight:900;

    letter-spacing:5px;

    animation:slideRight 1s;
}

/* Person */

.person{

    height:720px;

    cursor:pointer;

    transition:
    transform .4s ease,
    filter .4s ease;
}

.person:hover{

    transform:
    scale(1.08)
    translateY(-10px);

    filter:
    brightness(1.05)
    drop-shadow(0 0 15px rgba(255,255,255,.5))
    drop-shadow(0 0 35px rgba(255,255,255,.3));
}

/* Button */

.about-btn{

    position:absolute;

    right:10%;
    bottom:15%;

    text-decoration:none;

    color:black;

    background:white;

    padding:18px 45px;

    border-radius:10px;

    font-size:20px;

    font-weight:bold;

    transition:.35s;
}

.about-btn:hover{

    background:#ff3434;

    color:white

}

/* Center Bottom Button Position */

.home-button-container{

    position:absolute;

    bottom:5%;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:10;

}


/* Home Button */

.home-btn{

    display:flex;

    justify-content:center;

    align-items:center;


    width:280px;

    height:65px;


    text-decoration:none;

    color:white;


    background:rgba(255,255,255,0.12);

    border:2px solid rgba(255,255,255,0.6);


    border-radius:50px;


    font-size:18px;

    font-weight:800;

    letter-spacing:2px;


    backdrop-filter:blur(12px);


    box-shadow:

    0 0 20px rgba(255,255,255,.3),

    inset 0 0 15px rgba(255,255,255,.1);


    transition:.4s ease;

}


/* Hover */

.home-btn:hover{

    color:#000;

    background:white;


    transform:translateY(-8px) scale(1.08);


    box-shadow:

    0 0 25px white,

    0 0 60px rgba(255,255,255,.7);

}

/* Mobile Adjustment */

@media(max-width:768px){

    .home-btn{

        width:220px;

        height:55px;

        font-size:15px;

    }

}

/* Animations */

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-80px);
    }

    to{

        opacity:1;
    }

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(80px);
    }

    to{

        opacity:1;
    }

}

@media(max-width:900px){

.left-name,
.right-name{

    font-size:45px;
}


.person{
    position:absolute;

    bottom:-100px; /* Move down */

    left:50%;

    transform:translateX(-50%);

    height:720px;

    transition:.4s;
}


.person:hover{
    transform:translateX(-50%) scale(1.08);

    filter:
        brightness(1.05)
        drop-shadow(0 0 15px rgba(255,255,255,.5))
        drop-shadow(0 0 35px rgba(255,255,255,.3));
}

}