@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');





*{ 


    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins';
    text-decoration: none;
    scroll-behavior: smooth;
    list-style: none;

}


:root {
    --white:#fff;
   --black:#000000;
   --bleu:#26c4ec;
   --bg-color:#c41010fa;
   --i:#00ff22;
   --secondblack:#1e2323;
  }

body {
    background: linear-gradient(to right, #00093c, #2d0b00);
}


header { 



    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    background-color: var(--white) ;
    backdrop-filter: blur(8px);
    color: var(--white);
    padding: 0.5rem 1.5rem;
    border-radius: 3rem;
    z-index: 1000;

}


.logo {

    color: var(--white);
    font-size: 1.3rem;
    font-weight: 600;
    text-wrap: nowrap;
    transition: 0.3s ease-in-out;
   
}

.logo:hover { 
    transform: scale(1.1);

}


.nav-links {


    display: flex;
    gap: 2rem;


}


li a {

    position: relative;
    color: var(--black);
    font-weight: 500;

}

li a::before {

position: absolute;
content:'';
width: 0;
left: 0;
height: 5px ;
top: 25px;
border-radius: 1rem;
transition: 0.3s ease-in-out;
background: linear-gradient( to right, rgb(0, 157, 255), rgb(255, 255, 255));
}

li a:hover::before{
    width: 100%;
}

.visit-btn {

padding: 0.8rem 1.5rem;
border-radius: 3rem;
border: none;
font-weight: 500;
font-size: 1rem;
color: var(--white);
cursor: pointer;
text-wrap: nowrap;
transition: 0.3s ease-in-out;
background: linear-gradient( to right, rgb(0, 157, 255), rgb(206, 50, 141));

}

.visit-btn:hover {

    background: linear-gradient( to right, rgb(0, 157, 255), rgb(206, 50, 141));
    transform: scale(1.03);
    
 }
   


 @media (max-width: 768px) {
   
    header { 


     
        position: fixed;
        bottom: 1rem;
         width: 100%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5rem;
        background-color: var(--white) ;
        backdrop-filter: blur(8px);
        color: var(--white);
        padding: 0.5rem 1.5rem;
        border-radius: 3rem;
        z-index: 1000;
    
    }
    
    
    .logo {
    
        color: var(--white);
        font-size: 1.3rem;
        font-weight: 600;
        text-wrap: nowrap;
        transition: 0.3s ease-in-out;
       
    }
    
    .logo:hover { 
        transform: scale(1.1);
    
    }
    
    
    .nav-links {
    
    
        display: flex;
        gap: 2rem;
    
    
    }
    
    
    li a {
    
        position: relative;
        color: var(--black);
        font-weight: 300;
    
    }
    
    li a::before {
    
    position: absolute;
    content:'';
    width: 0;
    left: 0;
    height: 5px ;
    top: 25px;
    border-radius: 1rem;
    transition: 0.3s ease-in-out;
    background: linear-gradient( to right, rgb(0, 157, 255), rgb(255, 255, 255));
    }
    
    li a:hover::before{
        width: 100%;
    }
    
    .visit-btn {
    
    padding: 0.8rem 1.5rem;
    border-radius: 3rem;
    border: none;
    font-weight: 500;
    font-size: 1rem;
    color: var(--white);
    cursor: pointer;
    text-wrap: nowrap;
    transition: 0.3s ease-in-out;
    background: linear-gradient( to right, rgb(0, 157, 255), rgb(206, 50, 141));
    
    }
    
    .visit-btn:hover {
    
        background: linear-gradient( to right, rgb(0, 157, 255), rgb(206, 50, 141));
        transform: scale(1.03);
        
     }
       
    
     }
 /* bouton langue et parametre */

 .para { 

    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 101;
    margin: 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 60px;
    height: 100px;
    transition: 1s ease-in-out;
   
    color: var(--white);

    
 }
 .para .fas {
   
 font-size: 30px;
 margin-bottom: 10px;
 cursor: pointer;
 
 }

 .para .fa-solid {

    font-size: 30px;
    cursor: pointer;
   
 }



.para li a:link, .para li a:visited {

    display: block;
    color: #ffff;
    background: #2222;
    text-align: center;
}


.para .sousmenu {
   
    display: none;
   width: 60px;
   height: 100px;
   text-align: center;
    position: absolute;
    background: var(--white);
    color: white;
    border-radius: 15px;
    cursor: pointer;
    transition: 1s ease-in-out;
    
   
    

}

.para .sousmenu li { 
    float: none;
    margin: 0;
    padding: 0;
}


.para .sousmenu li img { 
    float: none;
    margin-top: 10px;
    padding: 0;

    height: 30px;
    width: 30px;
    border-radius: 50%;
  
}


.para .sousmenu  li a:link, .para li a:visited {

    display: block;
    color: #fff;
    text-decoration: none;
    background-color: #808080;
    transition: 1s ease-in-out;

}

.para .sousmenu li a:hover {
    background-color: #199802;;
    transition: 1s ease-in-out;
}

.para li:hover .sousmenu { 
    transition: 1s ease-in-out;
    
}






/* fin parametre */


 .logo1 { 

    position: fixed;
    top: 10px;
    left: 20px;
    z-index: 101;
    margin: 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    
    
 }

 .logo1 img {

    width: 50px;
    height: 50px;
    border-radius: 50%;
 }




#menu-icon {

   font-size: 2rem;
   display: none;
}


/*.................................................................................................*/

/*................................... ACCUEIL..............................................................*/

/*.................................................................................................*/




section { 


   
    padding: 8rem 12%;
    width: 100%;
    position: relative;
}


.about { 

    display: flex;
    align-items: center;
    justify-content: center;
    height: 70vh;
    background: var(--black);
    background: linear-gradient(to right, #00093c, #2d0b00);
   
}

.about .about-container {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rem;
}

.about img { 

    width: 310px;
    height: 300px;
    border-radius: 50%;
    box-shadow: 
    -10px 0px 20px rgb(0, 157, 255), /* Ombre à gauche en rouge */
    10px 0px 20px rgb(255, 2, 2);  /* Ombre à droite en bleu */
   
}

.info-box {

display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
gap: 1.5rem;
}

.info-box h3 {

    font-size: 1.8rem;
    font-weight: 500;
    opacity: 0.8;
    color: var(--white);
}

.info-box h1 {

    font-size: 3rem;
    font-weight: 600;
    opacity: 0.8;
    color: var(--white);
}

.info-box span { 
    background: linear-gradient( to right, rgb(0, 157, 255), rgb(255, 2, 2));
    background-clip: text;
    color: transparent;
    font-size: 2rem;
}

.btn-group { 

    display: flex;
    gap: 1rem;
}

.btn { 

border-radius: 3rem;
padding: 0.5rem 1.5rem;
border: 2px solid var(--white);
cursor: pointer;
font-weight: 500;
text-wrap: nowrap;
transition: 0.2s ease-in-out;
color: var(--white);
}

.btn:hover { 

    background: var(--black);
    color: var(--white);
}


.socials {

    display: flex;
    gap: 2rem;
    color: var(--white);
}

.socials i{ 

    font-size: 2.5rem;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.socials i:hover {

    transform: scale(1.1);
}



@media (max-width: 768px) {
   
    .about { 

      
        height: auto;
        
       
    } 
    
.about .about-container {

   flex-direction: column;
}

      
    
     }
  
/**************************************************************************/

/**************************************************************************/




/*********************************  TITRE **************************************/

.titre { 

    width: 100%;
    text-align: center;
    transition: 1s ease-in-out;
    
}

.titre h1 {

    font-size: 3rem;
    font-weight: bolder;
    background: linear-gradient( to right, #ffffff 30%, rgb(255, 255, 255))30%;
    background-clip: text;
    color: transparent;
    transition: 1s ease-in-out;
}

.titre p {
    font-size: 1rem;
    transition: 1s ease-in-out;
    color: var(--white);
}

.ligne-deco {
    position: relative;
    width: 150px;
    height: 4px;
    margin: 10px auto 15px auto;
    border-radius: 50px;
    background: linear-gradient(
      to right,
      rgba(0, 157, 255, 0.527),
      rgba(255, 2, 2, 0.5),
      rgba(0, 157, 255, 0.5)
    );
    background-size: 200% auto;
    animation: move-gradient 2s linear infinite;
    box-shadow: 
      0 0 4px rgba(0, 157, 255, 0.8),
      0 0 4px rgba(255, 2, 2, 0.8);
  }
  
  /* Animation */
  @keyframes move-gradient {
    0% {
      background-position: 0% center;
    }
    100% {
      background-position: 200% center;
    }
  }

/*********************************** TITRE FIN ******************************/




/*...............Accroche....................................................*/

.icons-container1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    gap: 1.5rem;
   
    margin: 2rem 8%;
   
  }
  
  .icons-container1 .icons {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 1rem ;
   
    border-radius: 1rem ;
    margin-top: -30px;
    
  }
  
  
  .icons-container1 .icons h3 {
    font-size: 3rem;
    color: var(--black);
    padding-bottom: 0.5rem;
    font-family: 'poppins';
    color: var(--white);
  }
  
  .icons-container1 .icons p {
    font-size: 1rem;
    color: var(--black);
    font-family: 'poppins';
    color: var(--white);
  }
  

/****************** SERVICES **********************************/

.services {

   display: flex;
   justify-content: center;
   align-items: center;
   height: 85vh;
   background: var(--black);
   z-index: 0;
  

}

.services .container {

position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 60px 0;
gap: 60px;
}

.services .container .box {
    position: relative;
    width: 300px;
    height: 350px ;
    background: var(--black);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    box-shadow: 
    -1px 1px 1px 1px rgb(0, 157, 255), /* Ombre à gauche en rouge */
    1px 1px 1px 1px rgb(255, 2, 2);  /* Ombre à droite en bleu */
   
}
.services .container .box::before {
   content: '';
   position: absolute;
   inset: -10px 50px ;
   border-top: 4px solid var(--clr);
   border-bottom: 4px solid var(--clr);
   z-index: -1;
   transform: skewY(15deg);
   transition: 0.5s ease-in-out;
}

.services .container .box:hover::before {
  
   transform: skewY(0deg);
   inset: -10px 40px ;
 }


 .services .container .box::after {
    content: '';
    position: absolute;
    inset: 60px -10px ;
    border-left: 4px solid var(--clr);
    border-right: 4px solid var(--clr);
    z-index: -1;
    transform: skew(15deg);
    transition: 0.5s ease-in-out;
    
 }
 
 .services .container .box:hover::after {
   
    transform: skew(0deg);
    inset: 40px -10px ;
  }
 

.services .container .box .content {

position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
gap: 20px;
padding: 0 20px;
width: 100%;
height: 100%;
overflow: hidden;
}

.services .container .box .content i {

    color: var(--clr);
    width: 80px;
    height: 80px;
    box-shadow: 0 0 0 4px #2e2e2e, 0 0 0 6px var(--clr);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    background: #2e2e2e;
    transition: 0.5s ease-in-out;
    border-radius: 50%;
}

.services .container .box:hover .content i {

    background: var(--clr);
    color: #2e2e2e;
    box-shadow: 0 0 0 4px #2e2e2e, 0 0 0 300px var(--clr);
}

.services .container .box .content .text h3 { 

font-size: 1rem;
color: var(--white);
font-weight: 500;
transition: 0.5s ease-in-out;

}

.services .container .box:hover .content .text h3 { 

    
    color: var(--black);
    font-weight: 500;
    transition: 0.5s ease-in-out;
    
    }
    

    .services .container .box .content .text p { 

        font-size: 0.8rem;
        color: var(--white);
        transition: 0.5s ease-in-out;
        
        }

        .services .container .box:hover .content .text p { 

            font-size: 0.8rem;
            color: var(--black);
            transition: 0.5s ease-in-out;
            
            }


            .services .container .box .content .text a {

                position: relative;
                background: var(--clr);
                color: var(--black);
                padding: 8px 15px;
                display: inline-block;
                text-decoration: none;
                font-weight: 500;
                margin-top: 10px;
                transition: 0.5s ease-in-out;
                border-radius: 20px;
            }


            .services .container .box:hover .content .text a {

                position: relative;
                background: var(--black);
                color: var(--clr);
                padding: 8px 15px;
                display: inline-block;
                text-decoration: none;
                font-weight: 500;
                margin-top: 10px;
                transition: 0.5s ease-in-out;
            }


            @media (max-width: 768px) {
   
                
                .services {

                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: auto;
                    background: var(--black);
                    z-index: 0;
                   
                 
                 }
                 
                  
                
                 }
              
/*****************FIN SERVICES **********************************/



/****************** MES SKILLS **********************************/


.skills { 

    background: linear-gradient(to right, #00093c, #2d0b00);
   
    width: 100%;
    height: auto;
}

.skill-main {

    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-row-gap: 30px;
    grid-column: 50px;
    margin-top: 80px;

}


.skill-bar {

    margin-bottom: 2.3rem;
}


.skill-main h3 { 

    margin-bottom: 2rem ;
    font-size: 1.5rem;
    text-align: center;
    color: var(--white);


}




.skill-left .skill-bar .info {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    color: var(--white);
 

}

.skill-left .skill-bar .bar {

width: 100%;
height: 10px;
background: var(--white);
border-radius: 25px ;
margin-top: 10px;
position: relative;
}

.skill-left .skill-bar .bar span {

    width: 50%;
    height: 100%;
   position: absolute;
   left: 0;
   background: var(--bleu);
   border-radius: 25px;
   box-shadow: var(--bleu);
    }

    .skill-left .skill-bar .bar .html {

        width: 95%;
        animation: html 2s;
    }
    .skill-left .skill-bar .bar .css {

        width: 95%;
        animation: html 2.5s;
    }
    .skill-left .skill-bar .bar .javascript {

        width: 90%;
        animation: html 3s;
    }
    .skill-left .skill-bar .bar .php {

        width: 80%;
        animation: html 3.5s;
    }
    .skill-left .skill-bar .bar .react {

        width: 85%;
        animation: html 4s;
    }

    .skill-left .skill-bar .bar .laravel {

        width: 80%;
        animation: html 4.5s;
    }

  /*skill droits */
.radial-bars {

    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
}

.radial-bars  .radial-bar {

    width: 50%;
    height: 170px;
    margin-bottom: 10px;
    position: relative;
}

.radial-bars  .radial-bar svg {

    position: absolute;
    top: 1%;
    left: 50%;
    transform: translate(-50%, 50%), rotate(-90deg);
    width: 70deg;
    height: 160px;

}

.radial-bars  .radial-bar .progress-bar{
    stroke-width: 10;
    stroke: var(--white);
    fill: transparent;
    stroke-dasharray: 502;
    stroke-dashoffset: 502;
    stroke-linecap: round;
    animation: animate-bar 1s linear forwards;

}

@keyframes animate-bar {
    100%{ 
         stroke-dashoffset: -1;
    }
}

.path { 
    stroke-width: 10;
    stroke: var(--bleu);
    fill: transparent;
    stroke-dasharray: 502;
    stroke-dashoffset: 502;
    stroke-linecap: round;

}
.path-1 { animation: animate-path1 1s 1s linear forwards;}
.path-2 { animation: animate-path2 1s 1s linear forwards;}
.path-3 { animation: animate-path3 1s 1s linear forwards;}
.path-4 { animation: animate-path4 1s 1s linear forwards;}

@keyframes animate-path1 {
    100%{
        stroke-dashoffset: 36;
    }
}
@keyframes animate-path2 {
    100%{
        stroke-dashoffset: 72;
    }
}
@keyframes animate-path3 {
    100%{
        stroke-dashoffset: 72;
    }
}
@keyframes animate-path4 {
    100%{
        stroke-dashoffset: 72;
    }
}

.radial-bar .percentage {
    width: 100%;
    position: absolute;
    text-align: center;
    left:50%;
    top: 20px;
    transform: translateX(-50%);
    font-size: 17px;
    font-weight: 500;
    color: var(--white);
    
    
 

}

.radial-bar .text {

    width: 100%;
    position: absolute;
    text-align: center;
    left:50%;
    top: 1px;
    transform: translateX(-50%);
    font-size: 17px;
    font-weight: 500;
    color: var(--white);
    
   
}



@media (max-width: 768px) {

    .container1 .radial-bar {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative; /* utile pour SVG si besoin */
      text-align: center;
    }
  
    .container1 .radial-bar .text,
    .container1 .radial-bar .percentage {
      position: static; /* retire absolute */
      transform: none;
      margin: 0;
      font-size: 16px;
      color: var(--white);
    }
  
    .container1 .radial-bar .text {
      margin-bottom: 5px;
      font-weight: 600;
    }
  
    .container1 .radial-bar .percentage {
      margin-bottom: 10px;
    }
  
    .container1 .radial-bar svg {
      position: static;
      transform: none;
      width: 120px;
      height: 120px;
    }
  }

  @media (max-width: 768px) {

    /* 1. Une seule colonne : skill-left au-dessus de container1 */
    .skill-main {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px; /* espace entre les deux blocs */
    }
  
    /* 2. Structure des cercles en 2 par ligne */
    .container1 .radial-bars {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 20px;
      padding: 0 10px;
    }
  
    .container1 .radial-bar {
      flex: 0 0 calc(50% - 10px); /* deux par ligne */
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-bottom: 20px;
    }
  
    /* 3. Texte et % au-dessus du cercle */
    .container1 .radial-bar .text,
    .container1 .radial-bar .percentage {
      position: static;
      transform: none;
      margin: 0;
      color: var(--white);
    }
  
    .container1 .radial-bar .text {
      font-weight: 600;
      margin-bottom: 5px;
    }
  
    .container1 .radial-bar .percentage {
      margin-bottom: 10px;
    }
  
    /* 4. Adapter la taille du cercle */
    .container1 .radial-bar svg {
      position: static;
      transform: none;
      width: 100px;
      height: 100px;
    }
  }




  
/*********************** FIN SKILLS *******************************/





/* autoplay.............................*/

.autoplay {

    display: grid;
    place-items: center;
    background: linear-gradient(to right, #00093c, #2d0b00);

}

.autoplay .slider {

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
   background: var(--black);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgb(0, 0, 0, 0.1);
    backdrop-filter: blur(7.4px);
    -webkit-backdrop-filter: blur(77.4px);
    border: 1px solid rgba(250, 255, 255, 0.4);
}

.autoplay .slider .slider-items {

    display: flex;
    justify-content: center ;
    align-items: center;
    gap: 20px;
    animation: scrolling 20s linear infinite;


}

.autoplay .slider .slider-items img {

  
   margin: 10px;
   width: 8%;
   


}


@keyframes scrolling {
    
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(10%);
    }
}
/*===================== PROJETS ++++++++++++++++++++++++++++++++++++*/

.filter-btn {

    text-transform: uppercase;
    margin-top: -20px;
    outline: none !important;
    border: 1px solid;
    border-color: var(--black) !important;
    padding: 10px;
    font-weight: 600;
    margin-top: 25px;
    margin-bottom: 5rem;
    border-radius: 20px;
    margin-right: 20px;
    color: var(--bleu) !important;
    transition: all 0.5s ease;
    text-align: center;
    background: var(--black);
    box-shadow: 
    -1px 1px 1px 1px rgb(0, 157, 255), /* Ombre à gauche en rouge */
    1px 1px 1px 1px rgb(255, 2, 2);  /* Ombre à droite en bleu */
   
}

.filter-btn:hover, .filter-btn.active {

    color: var(--white) !important;
    background: var(--bleu);

}




.projets {

    padding: 2rem 5%;
    background: var(--black);
    text-align: center;
    width: 100%;
    height: auto;
}



.projets .projet {

    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    text-align: center;
    align-items: center;
    position: center;
}

.projets .projet .box {
    border: 0.2rem solid var(--bleu);
    border-radius: 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--black);
    flex: 1 1 15rem;
    max-width: 20rem;
    
    
}



.projets .projet .box img {
    width: 100%;
    height: 220px;
}

.projets .projet .box .work-content h3 {
    color: var(--white);
    margin-bottom: 5px;
    font-weight: bolder;
    font-size: 1.5rem;
}
.ligne-deco {
    position: relative;
    width: 60px;
    height: 4px;
    margin: 10px auto 15px auto;
    border-radius: 50px;
    background: linear-gradient(
      to right,
      rgb(255, 255, 255),
      rgba(255, 2, 2, 0.5),
      rgba(0, 157, 255, 0.5)
    );
    background-size: 200% auto;
    animation: move-gradient 2s linear infinite;
    box-shadow: 
      0 0 4px rgba(0, 157, 255, 0.8),
      0 0 4px rgba(255, 2, 2, 0.8);
  }
  
  /* Animation de mouvement horizontal du dégradé */
  @keyframes move-gradient {
    0% {
      background-position: 0% center;
    }
    100% {
      background-position: 200% center;
    }
  }
.projets .projet .box .work-content h5 {
    color: var(--white);
    font-size: 0.7rem;
    margin-bottom: 20px;
}
.projets .projet .box .work-content ul li a {
    width: 50px;
    height: 50px;
    display: block;
    line-height: 50px;
    font-size: 25px;
    color: var(--bleu);
    border-radius: 50%;
    border: 1px solid var(--black);
    box-shadow: 
    -1px 1px 1px 1px rgb(0, 157, 255), /* Ombre à gauche en rouge */
    1px 1px 1px 1px rgb(255, 2, 2);  /* Ombre à droite en bleu */
   
   
    text-align: center;
    transition: all 0.3s ease-out 0s;
    
    

}


.projets .projet .box .work-content ul {

    position: relative;
    padding-bottom: 20px;
}



.projets .projet .box .work-content ul li {
   
    display: inline-block;
    margin: 0 15px;
   
    transition: all 0.3s ease-out 0s;

}

.projets .projet .box .work-content ul li:hover a {
    background-color: var(--bleu);
    color: var(--white);
}

@media screen and (max-width: 768px) {
    .projets .projet .box img {
        width: 100%;
        height: 220px;
    }
    

    .projets .projet .box {
        border: 0.2rem solid var(--bleu);
        border-radius: 1rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        background: var(--black);
        flex: 1 1 25rem;
        max-width: 100%;
        margin-bottom: 20px;
        
        
    }
    .projets .projet .box .work-content h3 {
        color: var(--white);
        margin-bottom: 5px;
        font-weight: bolder;
        font-size: 2rem;
    }
    .projets .projet .box .work-content h5 {
        color: var(--white);
        font-size: 1.2rem;
        margin-bottom: 20px;
    }

}

/*======================FIN PROJETS =================================*/




/*....................... details projetse ........................................*/

.detail-p {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    max-height: 100vh; /* ✅ Ajout important */
    overflow-y: auto;   /* ✅ permet le scroll */
    background-color: var(--black);
    border-left: 3px solid var(--bleu);
    padding: 2rem;
    box-sizing: border-box;
    color: var(--white);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}
.detail-p::-webkit-scrollbar {
    width: 8px;
}

.detail-p::-webkit-scrollbar-thumb {
    background: var(--bleu);
    border-radius: 10px;
}

.detail-p::-webkit-scrollbar-track {
    background: transparent;
}
.detail-p.active {
    transform: translateX(0);
}

.detail-p .close-detail {
    align-self: flex-end;
    background: var(--bleu);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.2rem 0.7rem;
    border-radius: 5px;
    margin-bottom: 1rem;
}

@media screen and (max-width: 768px) {
    .detail-p {
        width: 100%;
        border-left: none;
        border-top: 3px solid var(--bleu);
    }
}



.detail-p h3 {

    font-size: 1.5rem;
    text-align: start;
    margin-bottom: 10px;
}

.detail-p h4{

    font-size: 1.2rem;
    text-align: start;
    margin-bottom: 10px;

}


.detail-p .img-projet {

    display: flex;
    width: 100%;
    height: 100px;
}

.detail-p .img-projet .img-p,.img-pp {

    width: 45%;
    margin-left: 20px;
}

.detail-p .img-projet .img-p img {

    height: 150px;
}

.detail-p .img-projet .img-pp img {

    height: 150px;
    width: 80px;
}


.destech {

    margin-top: 60px;
    display: flex;
   

}


.destech .des-p {

    width: 50%;
    text-align: start;

}

.destech .tech-p { 
    width: 50%;
}
.destech .des-p h3 {


    font-size: 1.2rem;

}

.destech .des-p p {
    font-size: 0.8rem;
}

.destech .tech-p { 
    width:45%;
    text-align: start;
    margin-left: 10px;
}

.destech .tech-p .techno {


    display: flex;

}

.destech .tech-p .techno p {

    border: 1px solid var(--bleu);
    padding: 3px;
    margin-left: 10px;
    color: var(--black);
    background: var(--bleu);
    font-size: 0.8rem;
}

.destech .tech-p p {
    font-size: 0.8rem;
    margin-bottom: 20px;
}


.destech .tech-p a {
    border: 1px solid var(--bleu);
    box-shadow: 
    -1px 1px 1px 1px rgb(0, 157, 255), /* Ombre à gauche en rouge */
    1px 1px 1px 1px rgb(255, 2, 2);  /* Ombre à droite en bleu */
   
   
    background: var(--black);
    border-radius: 10px;
    color: var(--bleu);
    padding-left: 15px ;
    padding-right: 15px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 10px;
    font-size: 1.5rem;
    font-weight: bolder;

    
}

.fonctionnal {

    display: flex;
}

.fonctionnal .fonction1 {

    width: 48%;
} 

.fonctionnal .fonction1 .bb {

    display: flex;
    margin-bottom: 5px;
} 
 
.fonctionnal .fonction1 .bb i {

    border: 1px solid var(--bleu);
    border-radius: 50%;
    color: var(--black);
    background: var(--bleu);
} 

.fonctionnal .fonction1 .bb p {

    margin-left: 5px;
    font-size: 0.8rem;
} 
 
.fonctionnal .fonction2 {

    width: 48%;
} 
 

.fonctionnal .fonction2 .bb {

    display: flex;
    margin-bottom: 5px;
} 

.fonctionnal .fonction2 .bb i {

    border: 1px solid var(--bleu);
    border-radius: 50%;
    color: var(--black);
    background: var(--bleu);
} 

.fonctionnal .fonction2 .bb p {

    margin-left: 5px;
    font-size: 0.8rem;
} 
 

@media screen and (max-width: 768px) {
    
    .fonctionnal {

        flex-direction: column;
        
    }

    .detail-p h4{

        font-size: 1.5rem;
        text-align: start;
        margin-bottom: 10px;
        margin-top: 20px;
        
    }
    
    .destech {

        flex-direction: column;
       
    
    }
    .destech {

        margin-top: 50px;
        display: flex;
       
    
    }
    
    
    .destech .des-p h3 {


        font-size: 1.5rem;
    
    }
    
    .fonctionnal .fonction1 .bb p {

        margin-left: 5px;
        font-size: 1.5rem;
    } 

    .fonctionnal .fonction2 .bb p {

        margin-left: 5px;
        font-size: 1.5rem;
    } 
     
    
.destech .tech-p a {
    border: 1px solid var(--bleu);
    box-shadow: 
    -1px 1px 1px 1px rgb(0, 157, 255), /* Ombre à gauche en rouge */
    1px 1px 1px 1px rgb(255, 2, 2);  /* Ombre à droite en bleu */
   
   
    background: var(--black);
    border-radius: 10px;
    color: var(--bleu);
    padding-left: 10px ;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 10px;
    font-size: 2rem;
    font-weight: bolder;

    
}

.destech .tech-p p {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.destech .des-p p {
    font-size: 1rem;
}
.destech .des-p {

    width: 100%;
    text-align: start;

}

.destech .tech-p .techno p {

    border: 1px solid var(--bleu);
    padding: 3px;
    margin-left: 10px;
    color: var(--black);
    background: var(--bleu);
    font-size: 1.5rem;
    font-weight: bolder;
}

.fonctionnal .fonction1 {

    width: 100%;
} 

.fonctionnal .fonction2 {

    width: 100%;
} 
 
.detail-p .img-projet .img-p img {

    height: 120px;
}

.detail-p .img-projet .img-pp img {

    height: 120px;
    width: 80px;
}


     
}




/* faq*********************************************************/

/*..................faq...................*/





.abc {

    height: auto;
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to right, #00093c, #2d0b00);
    position: center;
    text-align: center;
  }
  
  
  .faq {
  
    max-width: 100%;
    margin-top: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--bleu);
    cursor: pointer;
    text-align: center;
  }
  
  .question {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .question h3 {
  
    font-size: 1.2rem;
    color: var(--white);
  }
  
  .question svg {

    
    background: var(--black);
    color: var(--bleu);
    border-radius: 50%;
  }
  .answer {
    max-height: 0;
    overflow: hidden;
    transition: all ease-out 1s;
  }
  
  .answer p {
  
    padding-top: 1rem;
    line-height: 1.6;
    font-size: 1rem;
    color: var(--white);
  
  }
  
  .faq.active .answer {
  
    max-height: 300px;
  }
  /*..................faq...................*/
  

/*..contact..........................................*/


#section-wrapper {
    height: auto;
    
        width: 100%;
      background: var(--black);
      padding: 10px;
    
      background-position: center;
      background-size: 100%;
    
      }
      
      
      .box-wrapper {
      
        position: relative;
        display: table;
        width: 70%;
        margin: auto;
        margin-top: 35px;
        border-radius: 30px;
      }
      
      .info-wrap {
      
        width: 35%;
        height: 500px;
        padding: 20px;
        float: left;
        display: block;
        border-radius: 30px 0px 0px 30px;
        background: var(--black);
        color: var(--bleu);
      }
      
      .info-title { 
      
        text-align: left;
        font-size: 18px;
        letter-spacing: 0.5px;
      }
      
      .info-sub-title {
      
        font-size: 15px;
        font-weight: 300;
        margin-top: 25px;
        letter-spacing: 0.5px;
        line-height: 26px;
      }
      
      .info-details {
        list-style: none;
        margin: 60px 0px;
        text-align: left;
      }
      
      .info-details li {
      
        margin-top: 25px ;
        font-size: 18px;
        color: var(--white);
      }
      
      .info-details li i {
      
        background: var(--bleu);
        padding: 10px;
        border-radius: 50%;
        margin-right: 5px;
        text-align: left;
      }
      
      .info-details li a{
      
        color: var(--white);
        text-decoration: none;
        font-size: 1rem;
      }
      
      .info-details li a:hover{
      
        color: var(--white);
        text-decoration: none;
      }
      
      .social-icons {
      
      list-style: none;
      text-align: center;
      margin: 20px 0px;
      }
      
      .social-icons li {
      
      display: inline-block;
      
      }
      
      .social-icons li i {
      
      
        background: var(--bleu);
        color: var(--white);
        padding: 15px;
        font-size: 20px;
        border-radius: 22%;
        margin: 0px 5px;
        cursor: pointer;
        transition: all .5s ;
      }
      
      
      .social-icons li i:hover { 
      
        background: #065a49;
      }
      
      .form-wrap {
      height: 500px;
      width: 65%;
      float: right;
      padding: 20px 10px 13px 18px ;
      border-radius: 0px 30px 30px 0px;
      background: #04090c;
      text-align: center;
      }
      
      .form-title {
        text-align: left;
        margin-left: 10px;
        font-size: 18px;
        letter-spacing: 0.5px;
        color: var(--bleu);
      }
      
      .form-fileds {
      
      display: table;
      width: 100%;
      padding: 15px 5px 5px 5px;
      }
      
      
      .form-fileds input,
      .form-fileds textarea {
      
      border: none;
      outline: none;
      background: none;
      font-size: 15px ;
      color: var(--white);
      padding: 10px 5px 10px 5px;
      width: 100%;
      }
      
      
      .form-fileds textarea{
      
      
        height: 100px ;
        resize: none;
      
      
      }
      
      .form-group {
      
      width: 40%;
      float: left;
      padding: 0px 30px;
      margin: 14px 13px ;
      border-radius: 25px ;
      box-shadow: inset 8px 8px 8px #0ce2e22a, inset -8px -8px 8px #fdfcfc2d;
      
      }
      
      
      .form-fileds .form-group:last-child {
      
      width: 96%;
      
      }
      
     
      .submit-button { 
      
        width: 50%;
        height: 60px;
       margin-top: 30px;
        border-radius: 30px;
        border: none;
        font-size: 20px ;
        font-weight: 700;
        outline: none;
        cursor: pointer;
        color: #fff;
        text-align: center;
        background: var(--bleu);
        box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #ffff;
        transition: .5s;
      }
      
      .submit-button:hover {
      
      
        background: var(--bleu);
      }
      
      
      
      @media (max-width: 768px) {
      
      
      
      .box-wrapper { 
      
        width: 100%;
      }
      
      
      .info-wrap,
      .form-wrap {
      
      
        width: 100%;
        height: inherit;
        float: none;
      }
      
      .info-wrap {
        border-radius: 30px 30px 0px 0px ;
      
      }
      
      .form-wrap { 
      
        border-radius: 0px 0px 30px 30px ;
      }
      
      .form-group { 
        width: 100%;
        float: none;
        margin: 25px 0px ;
      }
      .form-fileds .form-group:last-child,
      .submit-button{
        width: 100%;
      }
      
      .submit-button {
        margin: 10px 0px;
      }



      
  .icons-container1 .icons {
    flex-direction: column;
  }

       }
    
    

/*..footer.............................*/

.footer {

    width: 100%;

    position: absolute;

    background: var(--black);
    color: var(--white);
    padding: 100px 0 30px;
    border-top-left-radius: 125px;
    font-size: 13px;
    line-height: 20px;
}

.footer .row {

    width: 86%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.footer .row .col {

    flex-basis: 25%;
    padding: 10px;

}

.lof {

    width: 80px;
    margin-bottom: 30px;
    border-radius: 50%;
}

.col h3 { 

    width: fit-content;
    margin-bottom: 40px;
    position: relative;

}
.col:nth-child(2), .col:nth-child(3){ 
flex-basis: 15%;

}

.email-id {

    width: fit-content;
    border-bottom: 1px solid #ccc;
    margin: 20px 0;
}

.col ul li {

    list-style: none;
    margin-bottom: 12px;


}


.col ul li a { 
  text-decoration: none;  
  color: var(--white);
}

.col form {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    margin-bottom: 50px;
}

.col form fa-solid {
    font-size: 18px;
    margin-right: 10px;
}

.col form input{
    width: 100%;
    background: transparent;
    color: #ccc;
    border: 0;
    outline: none;

}

.col form button{

    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
}

.social-ic .fa-brands{
   
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: #ccc;
    background: var(--white);
    margin-right: 15px;
    cursor: pointer;
}


hr{
    width: 90%;
    border: 0;
    border-bottom: 1px solid #ccc;
    margin: 20px auto;
}

.copyright { 

text-align: center;


}


@media (max-wdth: 700px) {

    footer{
        bottom: unset;
    }
    .col {
        flex-basis: 100%;

    }

    .col:nth-child(2), .col:nth-child(3){ 
        flex-basis: 100%;
        }
}

/*.animation..................................*/

.underline {

    width: 100%;
    height: 5px;
    background: #767676;
    border-radius: 3px;
    position: absolute;
    top: 25px;
    left: 0;
}

.underline span {

    width: 15px;
    height: 100%;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 10px;
    animation: moving 2s linear infinite;
}

@keyframes moving {

    0% {

        left: -20px ;
    }
    100% {

        left: 100%;
    }
}


/*.........................keyframes................................*/



@keyframes html {
    

    0% { 
        width: 0%;
    }
    100% {
       width: 95%;
    }
}

@keyframes css {
    

    0% { 
        width: 0%;
    }
    100% {
       width: 95%;
    }
}
@keyframes javascript {
    

    0% { 
        width: 0%;
    }
    100% {
       width: 90%;
    }
}
@keyframes php {
    

    0% { 
        width: 0%;
    }
    100% {
       width: 80%;
    }
}
@keyframes react {
    

    0% { 
        width: 0%;
    }
    100% {
       width: 85%;
    }
}

@keyframes laravel {
    

    0% { 
        width: 0%;
    }
    100% {
       width: 80%;
    }
}


@media (max-width: 991px) {
    html {
      font-size: 55%;
    }
  
    .products {
      padding: 1rem 15%;
    }
  }