/* Gambo Multiservices – Landing page */

:root{
    --bg:#1c1f3d;
    --text:#ffffff;
}

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

body{
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.04), transparent 60%),
        var(--bg);
    color:var(--text);
    font-family:'Poppins', sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    min-height:100dvh;
    text-align:center;
    padding:20px;
    line-height:1.5;
}

/* Layout */

.container{
    max-width:520px;
    width:100%;
    margin:auto;
}

/* Logo */

.logo{
    width:min(450px,70vw);
    height:auto;
    margin-bottom:30px;
    filter:drop-shadow(0 0 18px rgba(255,255,255,0.08));
}

/* Text */

h1{
    font-weight:600;
    font-size:clamp(1.3rem,1.6vw,1.6rem);
    margin-bottom:12px;
    letter-spacing:0.04em;
}

/* Mail */

.mail{
    color:var(--text);
    text-decoration:none;
    font-size:clamp(1rem,1.5vw,1.1rem);
    display:inline-block;
    margin-bottom:55px;
    position:relative;
}

/* underline animé */

.mail::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:1px;
    background:white;
    transition:width 0.25s ease;
}

.mail:hover::after{
    width:100%;
}

/* Footer */

.copyright{
    font-size:0.7rem;
    opacity:0.8;
}

/* Animation */

.logo,
h1,
.mail,
.copyright{
    opacity:0;
    animation:fadeIn 0.8s ease forwards;
}

.logo{
    animation-delay:0.2s;
}

h1{
    animation-delay:0.5s;
}

.mail{
    animation-delay:0.8s;
}

.copyright{
    animation-delay:1.1s;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(12px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media (min-width:1200px){

    .logo{
        margin-bottom:40px;
    }

    h1{
        margin-bottom:16px;
    }

    .mail{
        margin-bottom:32px;
    }

}

@keyframes breathe{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.015);
    }
    100%{
        transform:scale(1);
    }
}