.navbar{
  background-color: rgb(0, 0, 50);
  color: white;
  height: auto;
  width: 100%;
  padding-left: 60px;
  padding-right: 60px;
  display: block;
}

header img{
  float:left;
}

.navbar-nav1{
  flex-direction: row;
}

.btn{
  color: white;
}

.btn:hover{
  color: white;
  border-bottom: 2px solid white;    
}

@media screen and (max-width:700px){
  .navbar .container-fluid .container img{
     flex-direction: column;
    
  }
}

@media screen and (max-width:525px){
  .container-fluid .container div a{
      float: none;
      width: 100%;
  }
}

#presentation h1{
  color: #fff;
            text-shadow:
                0 0 7px #fff,
                0 0 10px #fff,
                0 0 42px rgb(230, 18, 124),
                0 0 77px rgb(230, 18, 124),
                0 0 100px rgb(230, 18, 124);
            animation: lumiere 1s infinite linear;
        }
        @keyframes lumiere {
            0%{
                text-shadow:
                0 0 7px #fff,
                0 0 10px #fff,
                0 0 42px rgb(230, 18, 124),
                0 0 77px rgb(230, 18, 124),
                0 0 100px rgb(230, 18, 124);
            }
           50%{
                text-shadow:
                0 0 7px #fff,
                0 0 10px #fff,
                0 0 32px rgb(230, 18, 124),
                0 0 87px rgb(230, 18, 124),
                0 0 120px rgb(230, 18, 124);
            }
        }



.overlay::before{
  width: 100%;
  height: 100%;
  content:"";
  background: url(../images/noise.png)repeat 0 0 rgba(0,0,0,0.1 );
  position: absolute;
  
}
.overlay1::before{
  width: 100%;
  height: 200px;
  content:"";
  background: url(../images/noise.png)repeat 0 0 rgba(0,0,0,0.1 );
  position: absolute;
  margin: 0 0;
}

#portfolio{
  width: 55%;
}

.overlay2::before{
  width:93%;
  height:100% ;
  content:"" ;
  background: url(../images/noise1.png) repeat 0 0 rgba(0,0,0,0.2 );
  position: absolute;
  margin: 0 0 0 0;
}

.overlay2  img{
  transition:all 0s;
  opacity: 1;
}

.overlay2:hover img { 
  opacity: 1;
  -webkit-transform : rotatey(360deg); 
  -moz-transform : rotatey(360deg); 
  -ms-transform : rotatey(360deg); 
  -o-transform : rotatey(360deg); 
  transition:all 0s  ;
  transform:rotatez(360deg);
  transition-property: 1s;
  transition-duration:1s;
  transform-style: unset;
}

.overlay2:hover i{
  opacity: 1;
}

.overlay2 i{
  opacity: 0;
}

.overlay2 #brief{
  opacity: 1;
  position: absolute;
}

.overlay2:hover #brief {
  opacity: 0;
}

.bar p{
  margin: 0 0 ;
}

.bar .skills{
  border-radius: 10px;
}

.skills {
  text-align: right;
  padding-top: 0px;
  padding-bottom: 0px;
  color: white;
}

.bor{
  border: 2px solid;
  width: 70%;
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.html {width: 90%; background-color: #247797;animation: html 2s;} 
.css {width: 70%; background-color: #247797; animation: css 2s;} 
.js {width: 20%; background-color: #247797; animation:js 2s} 
.php {width: 60%; background-color: #247797;animation: php 2s;}
.python{width: 20%; background-color:#247797;animation: python 2s;}
.jquery{width: 50%; background-color:#247797;animation: jquery 2s;}
.sql{width: 60%; background-color:#247797;animation: sql 2s;}

@keyframes html{
  0%{width: 0%;}
  100%{width: 90%;}
}
@keyframes css{
  0%{width: 0%;}
  100%{width: 70%;}
}
@keyframes js{
  0%{width: 0%;}
  100%{width: 20%;}
}
@keyframes php{
  0%{width: 0%;}
  100%{width: 60%;}
}
@keyframes python{
  0%{width: 0%;}
  100%{width: 20%;}
}
@keyframes jquery{
  0%{width: 0%;}
  100%{width: 50%;}
}
@keyframes sql{
  0%{width: 0%;}
  100%{width: 60%;}
}

.card{background-color:#e1e1e1;}
.card a,span{font-size: 0.7em;padding-bottom: 1px;}
.card p{font-size: 0.8em;}
.card span,p{font-weight: 500;}
.card {border-top: 6px solid #ffa947;padding: 1px;}
.card a{color:#ff2f2f;}
.card{margin-bottom: 3em;}
.card h4{padding: 0.5px;color:#1D276D;font-weight: 600;}
.card span{padding-bottom: 15px;}
.icon-titre1{color:#F59932;margin-top:-39px;}
.card-img-top{padding: 0 0;}

.contact-area {
  background: url(../img/bg/contact-bg.png) no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

@media only screen and (max-width:768px) {
  .contact {
      margin-bottom: 60px;
  }
}

.contact input {
  background: #fff;
  border: 2px solid #1D276D;
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #232434;
  font-size: 16px;
  height: 60px;
  padding: 10px;
  width: 100%;
  font-family: 'poppins', sans-serif;
  padding-left: 30px;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.contact textarea {
  background: #fff;
  border: 2px solid #1D276D;
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #232434;
  font-size: 16px;
  padding: 10px;
  width: 100%;
  font-family: 'poppins', sans-serif;
  padding-left: 30px;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.contact input:focus {
  background: #fff;
  border: 1px solid #fff;
  color: #232434;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: 0 none;
}

.contact textarea:focus {
  background: #fff;
  border: 1px solid #fff;
  color: #232434;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: 0 none;
}

.form-control::placeholder {
  color: #232434;
  opacity: 1;
}

.btn-contact-bg {
  border-radius: 30px;
  color: #fff;
  outline: medium none !important;
  padding: 15px 27px;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  background: #E61A26 ;
  font-family: 'poppins', sans-serif;
  cursor: pointer;
  width: 100%;
}

.btn-contact-bg:hover,
.btn-contact-bg:focus {
  background: #232434;
  color: #fff;
}

.single_address {
  overflow: hidden;
  margin-bottom: 10px;
  padding-left: 40px;
}

@media only screen and (max-width:768px) {
  .single_address {
      padding-left: 0px;
  }
}

.single_address i {
  background: #f6f6f6;
  color: #1D276D;
  border-radius: 30px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  float: left;
  margin-right: 14px;
  font-size: 22px;
  -webkit-box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.single_address:hover i {
  background: #F59932;
  color: #fff;
}

.single_address h4 {
  font-size: 18px;
  margin-bottom: 0px;
  overflow: hidden;
  font-weight: 600;
}

.single_address p {
  overflow: hidden;
  margin-top: 5px;
}

.section-title h1 {
  font-size: 44px;
  font-weight: 500;
  margin-top: 0;
  position: relative;
  text-transform: capitalize;
  margin-bottom: 15px;
}
.section-title p {
  padding: 0 10px;
  width: 70%;
  margin: auto;
  letter-spacing: 1px;
}
.section-title {
  margin-bottom: 60px;
}
.text-center {
  text-align: center!important;
}