*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    }
    
    body{
    font-family:Arial,sans-serif;
    overflow:hidden;
    background:rgb(230, 228, 228);
    }
    
    /* INTRO */
    
    #intro{
    
    position:fixed;
    width:100%;
    height:100vh;
    
    background:white;
    
    display:flex;
    justify-content:center;
    align-items:center;
    
    z-index:1000;
    }
    
    .logo-container{
        display:flex;
        flex-direction: column;
        
        font-weight:bold;
        overflow:hidden;
    }

    .logo-left{
        font-size:5rem;
    }

    .logo-right{
        font-size: 4rem;
    }
    
    .logo-left,
    .logo-right{
    
    transition:.8s;
    }
    
    /* VIDEO */
    
    #videoSection{
        position:fixed;
        width:100%;
        height:100%;
        display:flex;
        justify-content: center;
        align-items: center;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        
    }
    
    #videoSection video{
        width:auto;
        height:100vh;
        
        
    }

    @media(min-width:764px){
        
    }
    
    /* CIRCULO */
    
    #exploreCircle{
    
        position:absolute;
        
        top:80%;
        left:50%;
        
        transform:translate(-50%,-50%);
        
        width:180px;
        height:90px;
        
        border-radius:20%;
        
        background:rgba(255,255,255,.15);
        
        backdrop-filter:blur(15px);
        
        display:flex;
        justify-content:center;
        align-items:center;
        
        cursor:pointer;
        
        color:white;
        
        font-size:1.2rem;
        
        transition:.4s;
    }
    
    #exploreCircle:hover{
    
    transform:
    translate(-50%,-50%)
    scale(1.1);
    
    }
    
    /* PANEL */
    
    #interactivePanel{
    
    position:fixed;
    
    top:50%;
    left:50%;
    
    transform:
    translate(-50%,-50%)
    scale(.8);
    
    background:white;
    
    padding:50px;
    
    border-radius:25px;
    
    text-align:center;
    
    opacity:0;
    
    pointer-events:none;
    }
    
    #interactivePanel.active{
    
    opacity:1;
    
    pointer-events:auto;
    
    transform:
    translate(-50%,-50%)
    scale(1);
    }
    
    button{
    
    margin-top:20px;
    
    padding:15px 30px;
    
    border:none;
    
    background:black;
    
    color:white;
    
    cursor:pointer;
    }

    /* HOME */

    .hero{
        height:100vh;
        position:relative;
        overflow:hidden;
        }
        
        .hero video{
        width:100%;
        height:100%;
        object-fit:cover;
        }
        
        .overlay{
        
        position:absolute;
        inset:0;
        
        display:flex;
        flex-direction:column;
        
        justify-content:center;
        align-items:center;
        
        backdrop-filter:blur(5px);
        }
        
        .options{
        
        display:flex;
        gap:40px;
        margin-top:50px;
        }
        
        .orb{
        
        width:180px;
        height:180px;
        
        border-radius:50%;
        
        background:
        rgba(255,255,255,.15);
        
        backdrop-filter:blur(15px);
        
        display:flex;
        
        align-items:center;
        justify-content:center;
        
        cursor:pointer;
        
        transition:.5s;
        }
        
        .orb:hover{
        
        transform:
        translateY(-20px)
        scale(1.15);
        
        }