/* topologie */

body{
    background-color: rgb(0, 0, 0);
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
}
.p-text{
    font-size: .8rem;
    text-align: justify;
}

.paragraf{
    font-size: 1.2rem;
    font-weight: 400; 
    text-align: justify;
}

.sousParagraf{
    font-size: .9rem;
    font-weight: 400; 
    text-align: justify;
}

.color-senseiti{
    color: #2599c1;
}

/* navigation */

.navbar-brand img {
    width: 60px;
}
.navbar-nav {
    align-items: center;
}
.navbar .navbar-nav .nav-link {
    color: #fff;
    font-size: 1.0em;
    padding: 0.5em 1em;
}
.nav-color{
    background-color: rgba(0, 0, 0, 0.805);
}

.sub-nemu:hover{
    background-color: rgba(0, 0, 0, 0.805);
    color: black;
}

/* logo a propos */
.logo-image{
    width: 20%;
    height: 35%;
}

/* main */

/* accueil */
.accueil-flou{
    padding-top: 100px;
    padding-bottom: 100px;
}

/* a propos */
.apropos-flou{
    padding-top: 180px;
    padding-bottom: 100px;
}

/* service */
.service-flou{
    padding-top: 150px; 
    padding-bottom: 100px;
}

/* materiel inaformatique */

.materiel-flou{
    padding-top: 180px;
}

.materiel-section-1{
    margin: 0 250px 0 250px;
}

.logo-materiel{
    width: 120px;
    height: 80px;
}


/* contact */

.contact-flou{
    padding-top: 120px; 
    padding-bottom: 100px;
    /* background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px); */
} */

/* formulaire contact */

#contact .input-contact{
    font-size:12px;letter-spacing:1px;padding:  5px;border: 0;background:  whitesmoke;border-bottom: 1px solid silver;width: 100%;color: gray;
}
#contact .input-contact:focus{
    font-size:12px;letter-spacing:1px;padding:  5px;border: 0;background:  whitesmoke;border-bottom: 1px solid silver;width: 100%;color: gray;
}

.form-floating input.form-control,
.form-floating textarea.form-control {
    font-size: 1rem;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-radius: 0;
    border-width: 1px;
}

.form-floating input.form-control:focus,
.form-floating textarea.form-control:focus {
    box-shadow: none;
}

.form-floating label {
    font-size: 1rem;
    color: #6c757d;
}

.btn-outline-primary:hover{
    background-color: #2599c1;
    color:#fff
}

/* box shadow */

.apropos-background{
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    border-radius: 55px;
    border:  .1px solid rgba(244, 252, 255, 0.144); 
    background-color: rgba(0, 0, 0, 0.805);
    text-decoration: none;
}

.vente-materiel{
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    border-radius: 25px;
    border:  .1px solid rgba(244, 252, 255, 0.144); 
    background-color: rgba(0, 0, 0, 0.805);
    text-decoration: none;
}

.vertical-center{
    margin: 0;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}


/* animation */

.hidden{
    display: none!important;
}

.reveal-loaded .reveal [class*="reveal-"]{
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: 0s !important;
}

.reveal-loaded [class*="reveal-"]{
    transition: 1s cubic-bezier(.5, 0, 0, 1);
}

.reveal-loaded .reveal-2{
    transition-delay: .1s;
}
.reveal-loaded .reveal-3{
    transition-delay: .2s;
}
.reveal-loaded .reveal-4{
    transition-delay: .3s;
}
.reveal-loaded .reveal-5{
    transition-delay: .4s;
}
.reveal-loaded .reveal-6{
    transition-delay: .5s;
}
.reveal-loaded .reveal-7{
    transition-delay: .6s;
}
.reveal-loaded .reveal-8{
    transition-delay: .7s;
}

/* responsive */

@media screen and (min-width: 768px) {
    .navbar-brand img {
        width: 100px;
    }
    .navbar-brand {
        margin-right: 0;
        padding: 0 1em;
    }
}

@media screen and (max-width:1050px) {
    .img-service{
        width: 300px;
    }
    .img-contact{
        width: 300px;
    }
}

@media screen and (max-width:767px) {
    .p-text{
        text-align: left;
    }

    .img-service{
        width: 200px;
    }

    .img-contact{
        display: none;
    }

    .vertical-center{
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .serv:hover{
        transform: none;
    }

    .p-3{
        padding: 0.25rem !important;
    }
    .p-4{
        padding: 1rem !important;
    }
    
}