/* Reset */
*{margin:0;padding:0;box-sizing:border-box;}

html,body{
    height:100%;
    background:#000;
    color:#fff;
    font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    overflow:hidden;
}

/* tsParticles canvas */
#tsparticles{
    position:fixed;
    inset:0;
    z-index:0;
}

/* Central container */
.container{
    position:relative;
    z-index:1;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap: 25px;
}

/* Logo */
.logo{
    width:80vw;
    max-width:700px;
    height:auto;
    opacity:0;
    animation:fadeInUp 1s ease-out 0.2s forwards;
}

/* Services text */
.services-text{
    font-size:0.78rem;
    font-weight:500;
    letter-spacing:0.22em;
    text-transform:uppercase;
    white-space:nowrap;
    opacity:0;
    animation:fadeInUp 1s ease-out 0.6s forwards;
}

/* Contact button */
.btn-contact{display:flex;justify-content:center;align-items:center;width:150px;text-align:center;
    margin-top: 30px;
    padding:10px 36px;
    font-size:0.72rem;
    color:#fff;
    border:2px solid #fff;
    background:transparent;
    text-transform:uppercase;
    font-weight:500;
    letter-spacing:0.15em;
    text-decoration:none;
    transition:background .25s,color .25s;
    opacity:0;
    animation:fadeInUp 1s ease-out 1s forwards;
}

.btn-contact:hover{
    background:#fff;
    color:#000;
}

/* Animations */
@keyframes fadeInUp{
    from{opacity:0;transform:translateY(20px);}
    to{opacity:1;transform:translateY(0);}
}

/* Mobile tweaks */
@media(max-width:600px){margin-top: 20px;
    .logo{width:80vw;}
    .services-text{
        font-size:0.65rem;
        letter-spacing:0.18em;
        white-space:normal;
        line-height:1.4;
        max-width:90%;
    }
    .btn-contact{
        font-size:0.65rem;
        padding:8px 30px;
    }
}

.services-text{
    position:relative;
    cursor:default;
}


/* Button group for side-by-side buttons */
.btn-group{
    display:flex;
    gap: 25px;
    
    justify-content:center;
}
@media(max-width:600px){
    .btn-group{
        flex-direction:column;
        align-items:center;
        gap: 25px;
    }
}