@import './reset.css';
@import './variables.css';

@import '../component/Navigation/style.css';
@import '../component/Hero/style.css';
@import '../component/Calltoaction/style.css';
@import '../component/Contact/style.css';
@import '../component/Feature/style.css';
@import '../component/Showcase/style.css';
@import '../component/Pricing/style.css';
@import '../component/Forms2/style.css';
@import '../component/Testimonial/style.css';
@import '../component/Team/style.css';
@import '../component/Footer/style.css';

#Navigation{
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0rem;
    z-index: 9;
    background-color: var(--grey);

}
.site__web{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    background-color: var(--black);
}
@media screen and (min-width: 350px){
    .site__web-btn{
        flex-wrap: wrap;
    }
}
.site__web-title{
    padding-bottom: 1.5rem;
    color:var(--grey);
    font-size: 1.5rem;
}
.site__web-btn{
    display: flex;
    justify-content: center;
    align-items: center;


}
.final{
    display: inline-block;
    position: relative;
    margin: 2.5rem 0;
    margin-right: 3rem;
    padding: 1.75rem 2rem;
    overflow: hidden;
    border: 1px solid var(--bleu);
    color: var(--bleu);
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 4px;
}

.final:hover {
    background: var(--bleu);
    box-shadow: 0 0 5px var(--bleu),
        0 0 25px var(--bleu),
        0 0 50px var(--bleu),
        0 0 200px var(--bleu);
    color: #050801;
    -webkit-box-reflect: below 0rem linear-gradient(transparent, rgba(184, 184, 184, 0.333));
}

.final:nth-child(1) {
    filter: hue-rotate(270deg);
}

.final:nth-child(2) {
    filter: hue-rotate(180deg);
}
.final:nth-child(3) {
    filter: hue-rotate(110deg);
}
.final:nth-child(4) {
    filter: hue-rotate(220deg);
}


.comp{
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--black);
    color: var(--bleu);
    gap: 2rem;
}
.composant__title{
    padding-top: 2rem;
    font-size: 1.5rem;
}
.composant__nv{
    width: 25rem;
}
.composant__subtitle{
    padding-bottom: 1rem;
    font-size: 1.25rem;
}
.composant__nv:nth-child(3) {
    filter: hue-rotate(30deg);
}

.composant__nv:nth-child(4) {
    filter: hue-rotate(100deg);
}
.composant__nv:nth-child(5) {
    filter: hue-rotate(180deg);
}
.composant__nv:nth-child(6) {
    padding-bottom: 2rem;
    filter: hue-rotate(250deg);
}