#Hero {
    padding: 0 0 0 10vw;
    width: 100%;
    text-align: left;
    h1 {
        font-size: clamp(2.5vw, 4vw, 4.8vw);
        font-weight: 800;
        width: 30%;
        padding: 8vw 6vw 0;
        background: var(--title-gradient);
        background-clip: text;
        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;
        color: transparent;
    }
    
    p {

        font-size: clamp(1.25vw, 1.7vw, 1.7vw);
        width: 40%;
        padding: 2vw 6vw;
    }

    .container-btn {
        display: flex;
        gap: 20px;
        margin: 30px 6vw;
    }

    #btn-hero {
        width: 20%;
        padding: 1.5vw 1.5vw;
        font-size: 1.5vw;
        border-radius: 15px;
    }

    .btn-contact {
        display: flex;
        justify-content: center;
        height: 100%;
        background: var(--btn-blue);
        color: var(--secondary-color);
        border: none;
        transition: all 0.3s ease;
        font-size: 1.5vw;
        font-weight: 800;
        box-shadow: 0px 0px 15px var(--bd-titre-projet);
        cursor: pointer;
    }

    .btn-contact:hover {
        background: var(--secondary-color);
        color: var(--primary-color);
        box-shadow: 0px 0px 10px var(--secondary-color);
    }

    .btn-projets {
        display: flex;
        justify-content: center;
        height: 100%;
        color: var(--primary-color);
        background: none;
        border: 2px solid var(--primary-color);
        transition: all 0.3s ease;
        font-size: 1.5vw;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0px 0px 10px var(--primary-color);
    }

    .btn-projets:hover {
        background: var(--primary-color);
        color: var(--secondary-color);
    }
}

@media screen and (max-width: 500px) {
    #Hero {
        padding: 0 0 0 0vw;
        display: flex;
        flex-direction: column;
        align-items: center;


        h1 {
            font-size: clamp(2.5vw, 8vw, 8vw);
            width: 50%;
            padding: 8vw 6vw 0;
            line-height: 35px;
            display: flex;
            text-align: center;
        }

        p {

            font-size: clamp(1.25vw, 2vw, 2vw);
            width: 40%;
            padding: 2vw 6vw;
            text-align: center;
        }

        .container-btn {
            display: flex;
            gap: 20px;
            margin: 30px 0;
        }

        #btn-hero {
            width: 100%;
            padding: 5vw 5vw;
            font-size: 3vw;
            border-radius: 15px;
        }

        .btn-contact {
            height: 100%;
            background: var(--btn-blue);
            color: var(--secondary-color);
            border: none;
            transition: all 0.3s ease;
            font-size: 1.5vw;
            font-weight: 800;
            box-shadow: 0px 0px 15px var(--bd-titre-projet);
        }

        .btn-contact:hover {
            background: var(--secondary-color);
            color: var(--primary-color);
            box-shadow: 0px 0px 10px var(--secondary-color);
        }

        .btn-projets {
            height: 100%;
            color: var(--primary-color);
            background: none;
            border: 2px solid var(--primary-color);
            transition: all 0.3s ease;
            font-size: 3vw;
            font-weight: 800;
            box-shadow: 0px 0px;
        }
    }
}
@media screen and (min-width:1200px) {
    #Hero {
        padding: 0 0 0 5vw;
        margin: 0px 0 200px 0;

        h1 {
            font-size: 5rem; 
            width: 30%;
            padding: 4vw 6vw 0;
        }

        p {

            font-size: 2rem;
            width: 50%;
            padding: 2vw 6vw;
        }

        .btn-contact {
            font-size: 2rem;
            height: 80%;
            align-items: center;
            display: flex;
        }

        .btn-projets {
            font-size: 2rem;
            height: 80%;
            align-items: center;
            display: flex;
        }
    }
}