* {
    scroll-behavior: smooth;
}

body {
font-family: Arial, Helvetica, sans-serif;
background-color: black;

}

header {
    background-color: #161616;
    border-bottom: #c69c6d solid;
}

/* En-tête */
.navbar-toggler {
    background-color: white;
}

.navbar{
    background-color: #161616 !important;
}

.navbar-nav {
    margin-left: auto !important;
}

.nav-link {
    color: white !important;
    padding-right: 20px !important;
}

.nav-link:hover {
    color: #c69c6d !important;
}

.LogoNavBar {
    height: 80px;
    width: auto;
    padding-left: 10px;
}

/* Première section "Accueil" */
#Accueil {
    background: url("../img/Photo-4.jpg") #161616;
    background-size: cover;
    position: relative;
}

.TextAccueil {
    text-align: center !important;
    position: relative;
    margin-left: auto !important;
    margin-right: auto !important;
    color: white;
    padding-top: 90px;
    padding-bottom: 160px;
}

.MonMetierAccueil {
    padding-top: 20px;
}

.MonResumeAccueil {
    padding-top: 5px;
}

/* Button Accueil */
.BtnAccueil {
    margin-top: 40px;
}

.btn-outline-danger {
    color: #c69c6d;
    border-color:#c69c6d ;
}

.btn-outline-danger:hover {
    background-color: #c69c6d;
    border-color:#c69c6d ;
}

.btn-outline-danger:focus {
    box-shadow: 0 0 0.2rem #c69c6d !important;
}

.btn-outline-danger:active {
    background-color: #c69c6d !important;
    border-color:#c69c6d !important;
}

/* Deuxième section Informations sur moi */

.informationMe {
    padding-top: 90px;
    padding-bottom: 140px;
    color: white;
}

#ImgMe {
    height: 450px;
    width: auto;
}

#Moi {
    background-color: black;
}
.Tittle{
    color: #c69c6d;
    font-weight: bold;
    padding-bottom: 10px;
}
.SubTitle {
    font-weight: normal;
    padding-bottom: 10px;
}

.ResumeOfMe {
    padding-bottom: 5px;
}


.TextSurMoiEspace {
    padding-right: 50px !important;
    display: inline;
}

.StrongColor {
    color: #c69c6d;
    padding-right: 5px;
}

#Instagram {
    height: 54px;
    padding-top: 10px;
}

#Facebook {
    height: 54px;
    padding-top: 10px;
    padding-left: 5px;
}

#LinkedIn {
    height: 54px;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 30px;
}

.cls-1:hover {
    fill: #c69c6d;
}

.BtnInfoMe {
    margin-top: 10px;
}

.MySkillsEspac {
    padding-top: 20px;
    font-size: 13px;
}

.MySkillsStrong {
    font-size: 17px;
}

.MySkillsProgress {
    font-size: 17px;
    margin-top: 15px;
}

.progress {
    margin-top: -10px;
}

/* Troisième séction Rappel Download CV*/
.RappelCV {
    background-color: #161616;
    color: white;
    text-align: center;
    padding-bottom: 110px;
    padding-top: 80px;
}

/* Quatrième séction mes services */

#MyServices {
    background-color: black;
    padding-top: 70px;
    padding-bottom: 140px;
    color: white;
}

.TittleMyServices {
    color: #c69c6d;
    font-weight: bold;
    text-align: left;
}

.LogoMyServices {
    height: 130px;
    padding-top: 35px;
    padding-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
}

/* Mes travaux */
#MyWork {
    background-color:black ;
    padding-top: 70px;
    padding-bottom: 140px;
    color: white;
    text-align: center;
}

.MyworksSubTitle {
    text-align: left;
}

.Myimagefirst {
    padding-top: 30px;
}

.TextMyWorks {
    padding-top: 50px;
}

/* Contact */
#Contact {
    background-color: #161616;
    padding-top: 70px;
    padding-bottom: 140px;
    color: white;
}

.MotifContact {
    padding-top: 15px;
}

.form-control {
    border-color: #c69c6d;
}

.btn-primary {
    background-color: #c69c6d;
    border: #c69c6d;
}

/* Loc Maps */

.embed-responsive-item {
    max-height: 250px !important;
}

.embed-responsive-21by9::before {
    padding-top: 250px !important;
}


/* Pied de page */

footer {
    background-color: #161616;
    color: white;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: #c69c6d solid;
}

.LogoFooter {
    height: 50px;
}

.Copyright {
    background-color: black;
    color: white;
    text-align: center;

}

.bottonFooter {
    margin-left: auto;
    margin-right: auto;
}