.container{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.toggle{
    font-size: 30px;
    color: #5777FF;
    display: none;
}
#bar{
    position: fixed;
    top:0;
    left:0;
    height: 3px;
    background-color: #5777FF;
    width: 0px;
    z-index: 10;
}
header{
    min-height: 100px;
    width: 100%;
    display: flex;
    background-color: #fff;
    position: fixed;
  top: 0; left: 0; right: 0;
    box-shadow: 0 10px 24px -18px rgba(0,0,0,.50);
    align-items: center;
    z-index: 9;
}
header nav{
    display: flex;
}
nav ul{
    width: 100%;
    justify-content: center;
    display: flex;
    gap:20px
}
header nav ul li a{
    color: #000;
    font-size: 1.8rem;
    font-weight:600;
    padding: 1rem 1.5rem;
    border-radius: 8px;
   transition: background-color .25s ease, color .25s ease;
}
header nav a:hover{   
    color:#fff;
    background-color: #2c2c2c;
}
header nav a.active{   
    color:#fff;
    background-color:#5777FF;
}
#home_top{
background-color:#F8F9FF;
    width: 100%;
    min-height: 42rem;
    padding-bottom: 2rem;
}
.home_top{
    display: flex;
    gap: 20px;  
    padding: 5rem 5rem 0 5rem;
    position: relative;
    justify-content: center;
    
}
.home_top .profil_photo_area{
    height: 100%;
    position: relative;
    display: flex;
    width: 40%;
    justify-content: center;
}

.home_top .profil_photo{
    width: 32rem;
    height: 32rem;
    /* background: url("../images/profil.jpg") center/cover; */
border-radius: 100%;
box-shadow: 0px 5px 50px rgba(0,0,0,.50);
position: absolute;
z-index: 3;
left:25%;
}
.home_top .profil_photo img{
width: 32rem;
    height: 32rem;
    border-radius: 100%;
}
.home_top .profil_photo_top1{
    width: 32rem;
    height: 32rem;
    border-radius: 100%;
    background-color: #5777FF;
    position: absolute;
    left:-20px;
    z-index: 2;
    opacity: 0.9;
    left:23%;
}
.home_top .profil_photo_top2{
    width: 32rem;
    height: 32rem;
    border-radius: 100%;
    background-color: #c6c8d1;
    position: absolute;
    left:21%;
    z-index: 1;
box-shadow: 0px 5px 50px rgba(78, 77, 77, 0.5);

}

.home_top .profil_detail{
    width: 60%;
        padding: 0 20px;
        margin-top: -3rem;
}
.home_top .profil_detail h1{
    font-size: 7rem;
    font-weight: 800;
    font-family: 'poppins',sans-serif;
    text-align: center;
text-transform: uppercase;
line-height: 1;
}
.home_top .profil_detail h1 span{
color: #5777FF;
}
.home_top .profil_detail em{
    display: block;
    font-size: 3rem;
    opacity: 0.7;
    text-transform: capitalize;
    margin-top: 2rem;
}
.home_top .profil_detail p{
    width: 100%;
    font-size: 2rem;
    font-weight: 600;
    opacity: 0.5;
    text-align: justify;
line-height: 3rem;
margin-top: -3rem;
}
.home_top .profil_detail a{
    display: block;
color: #ffffff;
font-size: 1.8rem;
font-weight: 600;
width: 20rem;
height: 5rem;
text-align: center;
padding-top: 1.5rem;
background-color:#5777FF;
border-radius: 4px;
margin: 0 auto;
border: 2px solid #506ef4;
}
.home_top .profil_detail a:hover{
    background-color: #2c2c2c;
    border: 2px solid #161616;
}
#competence{
    background-color: #fff;
    width: 100%;
    min-height: 60rem;
}

#competence .container {
  text-align: center;               
}
.container h2{
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 4rem;
    padding-bottom: 1rem;
    border-bottom: 1px dotted #000;
}
.competences{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap:1rem;
}
.competence{
    display: flex;
    flex-direction: column;
    flex: 0 1 30rem;
    height: 23rem;
    border: 3px solid #ebeefc;
    border-radius: 2px;
    margin-bottom: 2rem;
    align-items: center;
}
.competence:hover{
    border: 3px solid rgb(87, 119, 255, 0.7);  
}
.competence h3{
    display: flex;
font-size: 2rem;
    font-weight: 600;
    margin-top: 1rem;
    align-items: center;
    justify-content: center;
}
.competence span{
    display: inline-block;
    color: #5777FF;
    font-size: 4rem;
    margin-right: 1rem;
}
.competence p
{
    font-size: 1.5rem;
    opacity: 0.8;
    padding: 0 1rem;
}
/* CSS */
.skill { width: 28rem;
 }                
.skill-head{
  display:flex;
  justify-content:flex-end;              /* yüzdeyi sağa yasla */
  margin-bottom:8px;
}
.skill-head span{font-size: 2rem;
 font-weight:500;}
.progress{
  height:10px;
  background:#eceff4;                 
  border-radius:999px;
}
.progress-bar{
  height:100%;
  width: calc(var(--val, 0) * 1%);       /* yüzdeyi buradan alır */
  background:#5777FF;                    /* mavi bar */
  border-radius:inherit;

}

#experiences{
    background-color: #f0f2fc;
    width: 100%;
    min-height: 40rem;
    padding-bottom: 4rem;
}
#experiences .container {
  text-align: center;               
}
.experiences,.formations{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap:4rem
}
.experience,.formation{
    display: flex;
    flex: 0 1 50rem;
    height: 20rem;
    border: 2px solid rgb(228, 230, 238);
    border-radius: 3px;
    background-color: #fff;
    flex-direction: column;
}
.experience_title,.formation_title{
    height: 4rem;
    background-color: rgb(87, 119, 255, 0.8);
    color: #fff;
    padding-top: 1rem;
    font-size: 1.7rem;
    font-weight: 600;
}
.expreince_date,.formation_date{
    font-size: 1.8rem;
    color: #000;
    opacity: 0.7;
    margin-top: 1.5rem;
    font-weight: 700;
}
.experience p,.formation p{
    font-size: 1.8rem;
    color: #000;
    opacity: 0.7;
    margin-top: 1rem;
    font-weight: 500;
    padding: 0 1.5rem;
    line-height: 3rem;
}
#languages{
    min-height: 20rem;
    padding-bottom: 2rem;
}
#languages .container{
    text-align: center;
}
.languages{
    display: flex;
    justify-content: space-around;
    gap: 2rem;
    flex-wrap: wrap;
}
.language{
    display: flex;
    flex-direction: column;
    flex: 0 1 300px;
    height: 15rem;
    border: 3px solid #ebeefc;
    border-radius: 2px;
    margin-bottom: 2rem;
    align-items: center;
}
.language:hover{
    border: 3px solid rgb(87, 119, 255, 0.7);  
}
.flag{
    padding-top: 2rem;
}
.language_name{
    display: flex;
font-size: 2rem;
    font-weight: 600;
    margin-top: 1rem;
    align-items: center;
    justify-content: center;
}
.language_niveau{
font-size: 1.7rem;
    font-weight: 400;
    margin-top: 1rem;
}
#portefeuille{
background-color:#F8F9FF;
    width: 100%;
    min-height: 55rem;
    padding-bottom: 1rem;
}
#portefeuille .container{
    text-align: center;
}
.portefeuilles{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 1rem;
}
.portefeuille{
flex: 0 1 50rem;
}
.portefeuille h3{
    font-size: 2rem;
}
.portefeuille img{
    max-width: 50rem;
  height: auto;
  display: block;
    box-shadow: 2px 5px 5px 3px #c6c8d1;
}
.portefeuille img:hover{
   box-shadow: 2px 5px 5px 3px #ebeefc
}
.portefeuille span{
    display: block;
    margin-top: 2rem;
    background-color: #fff;
    width: auto;
    padding: 1rem 0;
    border: 1px solid #ebeefc;
}
.portefeuille span a{
    color: #5777FF;
    font-size: 1.7rem;
    font-weight: 700;
    
}
.portefeuille span a:hover{
    color: #2c2c2c;
}
footer{
    height: auto;
    display: flex;
    flex-direction: column;
}
.contact{
    max-width: 1200px;
    margin: 0.5rem auto;
    justify-content: center;
    display: flex;
    gap: 7rem;
    padding: 2rem 0;
    flex-wrap: wrap;
}
.contact_row{
    font-size: 1.5rem;
    display: 0 1 300px;
}
.contact_row span{
    font-size: 2rem;
    color: #5777FF;
    display: inline-block;
    margin: 7px 10px 0 10px;
}
.contact_row em{
    font-weight: 600;
}
.footer_bottom{
    align-self: flex-end;
    width: 100%;
    background-color: #5777FF;  
    
}
.footer_bottom .container{
display: flex;
    justify-content:center;
    align-items: center;
    gap: 40rem;
    padding-right: 5rem;
    height: 10rem;
}
.footer_bottom .socials{
   display: flex;
   gap: 5rem; 
}
.footer_bottom .social a{
color: #fff;
font-size: 3rem;
}
.footer_bottom .social a:hover{
    color: #BF092F;
}
.footer_bottom .container .name{
font-size: 1.7rem;
font-weight: 600;
color: #fff;
display: flex;
align-items: center;
gap: 1rem;
}
.footer_bottom .container .name img{
    height: 7rem;
    width: 7rem;
    border-radius: 7rem;
    border: 1px solid #F8F9FF;
}
#backToTop {
width: 45px;
  height: 45px;
 color: #fff;
 background-color: #5777FF;
  font-size: 3rem;
position: fixed;
  bottom: 120px;
  right: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 999;
  visibility: hidden;
}

#backToTop.show {
  opacity: 1;
  visibility: visible;
}
.competence,.experience,.formation{
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.competence.in,.experience.in,.formation.in{
opacity: 1;
transform: translateX(0px);
}
.language,.portefeuille{
opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.language.in,.portefeuille.in{
opacity: 1;
transform: translateY(0px);
}
.contact{
   opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease; 
}
.contact.in{
opacity: 1;
transform: translateY(0);
}