:root{
    --tran: 0.3s;
    --trandel : 0.1s;
    --color: blueviolet;
    --fontw:500;
    --fonts:50px;
    --languecolor:lightsteelblue;
}
html{
scroll-behavior: smooth;
}
body{
    margin: 0;
    padding: 0;
    position: relative;
    height: 150vh;
    overflow-x: hidden;
    
}
*{
    font-family: 'Poppins', sans-serif;}
.container{
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) { 
    .container{
        width: 70%;
    }
    header .container nav ul{
        display: flex;
    }
 }

@media (min-width: 992px) { 
    .container{
        width: 80%;
    }
    header .container nav ul{
        display: flex;
    }
 }

@media (min-width: 1200px) { 
    .container{
        width: 90%;
    }
    header .container nav ul{
        display: flex;
    }
 }
/* /START_HEADER */
header{
    padding-top: 12px;
    position: sticky;
}
#logo a{
    font-size: 22px;
    color: black;
}

header .container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

}
header .container nav ul{
    display: none;
    flex-direction: row;
    justify-content: center;
}
header .container nav ul li{
    margin-right: 20px;
    font-size: 15px;
}
header .container nav ul li a{
    color: var(--color);
    transition-duration: var(--tran);
    transition-delay: var(--trandel);
}
header .container nav ul li a:hover{
    color: black;
    text-shadow: 0px 0px 10px var(--color),
    0px 0px 20px var(--color),
    0px 0px 30px var(--color),
    0px 0px 40px var(--color),
    0px 0px 50px var(--color)
    ;
}
li{
    list-style: none;
}
a{
    text-decoration: unset;
}
#gmails{
    margin-top: 40%;
    width: 145px;
    font-size: 10px;
    background-color: black;
    color: white;
    border: none;
    outline: none;
    margin-left: -10px;
}
.burger{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 20px;
    cursor: pointer;
    transition-duration: var(--tran);
    transition-delay: var(--trandel);
    position: fixed;
    top: 20px;
    right: 15px;
    z-index: 8;
}
.burground{
    padding-top: 15px;
    padding-right: 2px;
    border-radius: 8px;
background-color: red;
opacity: 0.8;
}
.one{width: 40px;
    height: 2px;
    background-color: black;  
}
.two{width: 40px;
    height: 2px;
    background-color: black;
    transition-duration: var(--tran);
    transition-delay: var(--trandel);
}
.three{width: 40px;
    height: 2px;
    background-color: black;
    transition-duration: var(--tran);
    transition-delay: var(--trandel);
}
.onedi{
    display: none;
}
.twodi{transform: rotate(45deg);
    width: 30px;
    margin-top: 1.8px;
}
.threedi{
    transform: rotate(-44deg);
    margin-bottom: 18px;
    width: 30px;

}
.bushow{
    background-color: white;
}
.navit{
    position: fixed;
    background-color: black;
    width: 200px;
    height: 100vh;
    right: -300px;
    transition-duration: 0.3s;
    transition-delay: 0.1s;
    z-index: 8;
}
.navashow{
    right: 0px;
}
.navit nav ul {
    margin-top: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.navit nav ul li{
    cursor: pointer;
}
.navit nav ul li a{
    color: white;
}
@media (min-width: 768px) { 

}

@media (min-width: 992px) { 
    header .container nav{
        display: flex;
    }
    .burger{
        display: none;
    }
    .navit{
        display: none;
    }
    header{
        padding-top: 0px;
    }
}

@media (min-width: 1200px) { 
    header .container nav ul{
        display: flex;
    }
    .burger{
        display: none;
    }
    .navit{
        display: none;
    }
    header{
        padding-top: 0px;
    }
 }
/* end_header */

/* start biographie */
.biographie{
}
@media (min-width: 992px) { 
    .biographie{
        margin-bottom: 190px;
    }
}

@media (min-width: 1200px) { 
    .biographie{
        margin-bottom: 190px;
    }
 }
.biographie .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.biographie .container h1{
    text-align: center;
    font-weight: var(--fontw);
    font-size: var(--fonts);
}
.biographie .container p{
    text-align: center;
    width: 60%;
    margin-bottom: 20px;
}

.cvshow  a{
    padding: 5px 10px;
    border-radius: 10px;
    color: black;
    font-size: 14px;
    outline: none;
    border: none;
    cursor: pointer;
    border: 1px solid var(--color);
    background-color: var(--color);
    transition-duration: var(--tran);
    transition-delay: var(--trandel);
}
.cvshow  a:hover{
    background-color: white;
    border: 1px solid var(--color);
}
/* end biographie */

/* Start competence */
.competence{
    margin-top: 50px;
    
}
.competence .container{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
}
.competence .container h1{
    text-align: center;
    font-weight: var(--fontw);
    font-size: var(--fonts);
}
/* end competence */
      .swiper {
        width: 80px;
        height: 480px
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: var(--color);
        position: relative;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .swiper {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
      }
      /* customize */
      .swiper-slide h3{
          position: absolute;
          top: 0;
      }
      .swiper-slide span{
          width: 80%;
          font-size: 15px;
          margin-bottom: 10px;
      }
      .swiper-slide{
          display: flex;
          flex-direction: column;
          width: 80%;
          border-radius: 60px;
      }
      .mySwiper{
          width: 85%;
      }
    .leslangues{
        width: 85%;
        background-color: var(--languecolor);
        padding-left: 20px;
        border-radius: 20px;
        position: relative;
        z-index: 3;
    }  
    .leslangues h4{
        padding: 0px;
        font-size: 20px;
        font-weight: var(--fontw);
        
    }
    .fa-angle-down{
        position: absolute;
        right: 15px;
        top: 40%;
        cursor: pointer;
    }
    .alllangue{
        padding-top: 30px;
        display: none;
        flex-direction: column;
        width: 85%;
        z-index: 2;
        margin-top: -32px;
        background-color: var(--languecolor);
        padding-left: 20px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        
    }
    .showlangue{
        display: flex;
        
    }
    .alllangue span{
        margin-left: 10px;
    }
    .alllangue p{
        margin-left: 20px;
    }
    .othercomp{
        margin-top: 20px;
        width: 85%;
        background-color: var(--languecolor);
        padding-left: 20px;
        border-radius: 20px;
        position: relative;
        z-index: 3;
    }  
    .othercomp h4{
        padding: 0px;
        font-size: 20px;
        font-weight: var(--fontw);
        
    }
    .fa-angle-down{
        position: absolute;
        right: 15px;
        top: 40%;
        cursor: pointer;
    }
    .allcompet{
        padding-top: 30px;
        display: none;
        flex-direction: column;
        width: 85%;
        z-index: 2;
        margin-top: -32px;
        background-color: var(--languecolor);
        padding-left: 20px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .allcompetsh{
        display: flex;
    }
    .allcompet span{
        margin-left: 10px;
        margin-bottom: 18px;
    }
       /* projets section        */
.projets .container{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

}
.projets .container h3{
    text-align: center;
    font-size: var(--fonts);
    font-weight: var(--fontw);
}
.ecomplat{
    width: 85%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.ecomplat h4{
font-weight: var(--fontw);
color: var(--color);
font-size: 20px;
}
.ecomplat img{
    width: 300px;
    height: 300px;
}
.imagesecom{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
/* end projets section */
.roadmap{
    margin-bottom: 20px;
}
.roadmap .container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.bord{
    width: 5px;
    background-color: blueviolet;
    height: 500px;
    margin-right: 20px;
    box-shadow: 0px 0px 10px blueviolet,
    0px 0px 20px blueviolet,
    0px 0px 30px blueviolet,
    0px 0px 40px blueviolet,
    0px 0px 50px blueviolet,
    0px 0px 60px blueviolet,
    0px 0px 70px blueviolet,
    0px 0px 80px blueviolet,
    0px 0px 90px blueviolet,
    0px 0px 100px blueviolet
    ;
    border-radius: 20px;
    position: relative;
}
.contentt{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    margin-left: 20px;
}
.contentt div{
    margin-bottom: 20px;
}
.contentt div::before{
    content: '';
    position: absolute;
    width: 15px;
    background-color: blueviolet;
    box-shadow: 0px 0px 10px blueviolet,
    0px 0px 20px blueviolet,
    0px 0px 30px blueviolet,
    0px 0px 40px blueviolet
    ;
    height: 15px;
    left: -50px;
    border-radius: 30px;
}
/* //footerss */
footer{
    margin-top: 50px;
    margin-bottom: 20px;
}
footer nav{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
footer nav div{
    margin-right: 15px;
}
footer nav div input{
    border: none;
    outline: none;
    width: 200px;
}

footer nav .gmml{
    position: relative;
}
footer nav div #copyit{
    position: absolute;
    right: -13px;
    margin-top: 4px;
    cursor: pointer;
}
footer nav div a{
    font-size: 30px;
}
footer nav div #linkdin{
    color: dodgerblue;
}
footer nav div .fa-github{
    color: black;
}
/* end footerrL */