@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Poppins:ital,wght@0,400;0,700;0,800;1,700;1,800;1,900&display=swap');
/* theme du site */
:root{
    --mtfd-1: 257;
    --mtfd-2: 47;
    --main-color-1: hsl(var(--mtfd-1), 100%, 60%);
    --main-color-dark-1: hsl(var(--mtfd-1), 69%, 50%);
    --main-color-2: hsl(var(--mtfd-2), 100%, 61%);
    --main-color-dark-2: hsl(var(--mtfd-1), 82%, 55%);
   
    --section-padding: 7rem;
   
}
body{
    --bg-color: hsl(var(--mtfd-1), 100%, 97%);
    --bg-color-1: hsl(var(--mtfd-1), 100%, 95.5%);
    --bg-color-2: #fff;
    --bg-color-3: hsl(var(--mtfd-1), 100%, 98%);
    --bg-color-transparent: rgba(225, 225, 225, 0.6);
    --heading-color: hsl(var(--mtfd-1), 61%, 24%);
    --text-color: hsl(var(--mtfd-1), 17%, 63%);

}
body.dark{
    --bg-color: hsl(var(--mtfd-1), 19%, 15%);
    --bg-color-1: hsl(var(--mtfd-1), 21%, 11%);
    --bg-color-2: hsl(var(--mtfd-1), 23%, 19%);
    --bg-color-3: hsl(var(--mtfd-1), 23%, 24%);
    --bg-color-transparent: hsla(var(--mtfd-1), 23%, 19%, 0.6);
    --heading-color: hsl(var(--mtfd-1), 100%, 95%);
    --text-color: hsl(var(--mtfd-1), 14%, 51%);
}
body.dark .st1{
    fill: hsl(var(--mtfd-1), 18%, 29%);
}
body.dark .shape.square{
    opacity: 0.07;
}
body.dark .toggle-btn{
    background-color: var(--bg-color-3);
}
body.dark .toggle-btn:hover{
    background-color: brightness(110%);
}
body.dark .nav-link:hover::after, 
body.dark .nav-link.active::after {
    opacity: 0.6;

}

body.dark .form-input{
    filter: brightness(110%);
}
body.dark .filter-btn{
    background-color: var(--bg-color-transparent);
color: #fff;
cursor: pointer;

}


/*--------- style complet en general --------*/
*, 
*::before, 
*::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


body{
    overflow-x: hidden;
    background-color: var(--bg-color);
    font-family: "poppins",sans-serif;
    transition: .3s background-color;
}
::selection{
    background-color: hsla(var(--mtfd-1), 100%, 60%, 0.9);
    color: #fff;
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}

/* -------------ccs raisonable----------- */
.container{
position: relative;
width: 100%;
max-width: 75rem;
padding: 0 1.5rem;
margin: 0 auto;
}
.logo{
    margin-right: 1.5rem;
    height: 120px;
    line-height: 120px;
    font-family: "Abril Fatface", cursive;
    font-size: 1.5rem;
    color: var(--heading-color);
    letter-spacing: 1px;
    transition: 0.3s;
}
.logo span{
    color: var(--main-color-1);
}
/* --------- style du navbar----------- */
header{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10;
    transition: 0.3s;

}

header.scrolled{
    background-color: var(--bg-color-transparent);
    box-shadow: 0 5px 20px 0.1px rgba(0, 0, 0, 0.1);
}
header.scrolled.logo{
    height: 80px;
    line-height: 80px;
}

header .logo{
    height: 120px;
    line-height: 120px;
}
nav.container{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.links{
    
    flex: 1;
    display: flex; 
    justify-content: space-between;
}

.hamburger{
    padding: 1rem 0;
    height: 12px;
    width: 25px;
    box-sizing: content-box;
    cursor: pointer;
    position: relative;
    display: none;
}
.hamburger .bar{
    width: 100%;
    padding: 2px;
    background-color: var(--heading-color);
    border-radius: 3px;
    position: absolute;
}
.hamburger .bar:first-child{
    top: 1rem;
    transition: bottom -2s .15s, transform 0.3s;
}
.hamburger .bar:last-child{
    bottom: 1rem;
}
body.open .hamburger .bar:first-child{
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    transition: top -2s, transform 0.3s 0.1s;
}
body.open .hamburger .bar:last-child{
    bottom: 50%;
    transform: translateY(50%) rotate(45deg);
    transition: bottom -2s, transform 0.3s 0.1s;
}
.links ul{
    display: flex;
    align-items: center;
    width: 100%;
}
.nav-link{
    position: relative;
    display: inline-block;
    margin: 0 1rem;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: 0.5px;
    color: var(--text-color);
    font-weight: 500;
    opacity: 0.9;
    transition: 0.3s;
}
.nav-link::after{
    content: "";
    position: absolute;
    width: 0;
    height: 10px;
    border-radius: 5px;
    background-color: var(--main-color-1);
    bottom: 0;
    left: -5px;
    z-index: -1;
    opacity: 0;
    transition: 0.3s;
}
.nav-link:hover, .nav-link.active {
    color: var(--heading-color);
}
.nav-link:hover::after, 
.nav-link.active::after {
    width: 100%;
    opacity: 0.2;

}
.toggle-btn{
    color: var(--heading-color);
    min-width: 40px;
    height: 40px;
    background-color: var(--bg-color-2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
    margin-right: 1rem;
}
.toggle-btn:hover{
    filter: brightness(97%);
}
/* html{
    scroll-behavior: smooth;
    overflow-y: scroll;
}
::-webkit-scrollbar { width: 5px; 
background-color: var(--bg-color-transparent);}
::-webkit-scrollbar-track{background-color: var(--bg-color-2); }
::-webkit-scrollbar-thumb{ border-radius: 10px; 
    background-color: var(--bg-color-transparent);
}
::-webkit-scrollbar-thumb:hover{
background: red;

} */
       /* codage de sahowcase */
    
       .showcase-area{
           padding: 120px 0;
           width: 100%;
           overflow: hidden;
           position: relative;
       }
       .showcase-area .container{
           display: grid;
           grid-template-columns: 1fr 550px;
           height: calc(100vh - 120px);
           height: 600px;
           align-items: center;
       }
       .sub-heading{
           color: var(--heading-color);
           text-transform: uppercase;
           font-size: 0.85rem;
           letter-spacing: 0.5px;
           border-left: 3px solid var(--main-color-2);
           padding: 0.13rem 0.75rem;
           margin-bottom: 1rem;
           font-weight: 500;
           transition: .3s color;

       }
       .heading{
        font-family: 'Tangerine', serif;
        font-size: 48px;
        text-shadow: 4px 4px 4px #aaa;
           color: var(--heading-color);
           font-weight: 400;
           line-height: 1.3;
 
       }
       #franck{
           font-family: 'poppins', sans-serif;
       }
       .text{
           color: var(--text-color);
           font-size: 0.9rem;
           margin: 2rem 0;
           line-height: 2.3;
       }
       .section{
        position: relative;
        padding: var(--section-padding) 0;
    }
    .cta{
        margin-top: 3.5rem;
        display: flex;
        align-items: center;
    }
    .cta .btn{
        margin-right: 1.5rem;
    }
    .btn{
        display: inline-block;
        padding: 0.9rem 1.75rem;
        border-radius: 17px;
        background-color: var(--main-color-1);
        color: #ffff;
        font-size: .85rem;
        min-width: 125px;
        text-align: center;
        letter-spacing: .4px;
        text-transform: capitalize;
        transition: .3s;
        border: none;
        outline: none;
        font-family: inherit;
        cursor: pointer;

    }
    .btn:hover{
        background: var(--main-color-dark-1);
    }
    .btn.secondary-btn{
        position: relative;
        background-color: transparent;
        color: var(--main-color-1);
        font-weight: 500;
        font-size: .9rem;
        letter-spacing: 0px;
        border-bottom: 2.5px solid var(--main-color-2);
        border-radius: 0px;
        padding: .15rem 0;
        min-width: revert;
    }
    .btn.secondary-btn::before{
        content: "";
        position: absolute;
        width: 0%;
        height: 2.5px;
        bottom: -2.5px;
        left: 0;
        background-color: var(--main-color-1);
        transition: 0.3s ease-in-out;
    }
    .btn.secondary-btn:hover::before{
        width: 100%;

    }
       .showcase-area .sub-heading{
           margin-bottom: 0.7rem;
       }
       .showcase-area .heading{
        font-size: 3.5rem;
    }
    .showcase-area .text{
        margin: 0.8rem 0;
    }
    
    .showcase-image{
        position: relative;
        width: 100%;
        min-height: calc(100% + 120px);
        background-image: linear-gradient(124deg, var(--main-color-1)53%, var(--main-color-2)53%);
        margin-top: -110px;
        border-radius: 0 0 80px 80px;
    }
    .showcase-image .person{
        position: absolute;
        width: 95%;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);

    }
    .dots{
        width: 112px;
    }
    .showcase-area .dots{
        position: absolute;
        left: 100%;
        top: 30%;
        transform: translate(-50%, -50%);
    }
    .showcase-area .circle{
        position: absolute;
        width: 190px;
        left: 0;
        top: 80%;
        transform: translate(-50%, -50%);
    }
    .square{
        width: 70px;
        transition: .3s opacity;

    }
    .showcase-area .square{
        position: absolute;
        left: 25%;
        bottom: 120px;
        transform: translate(-50%, -50%);
    }

    /* ----------------section about----------------- */
  
    .about .container{
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        align-items: center;
       
    }
    .about .text{
        margin: 3rem 0 4rem;
    }
    .st0{
        fill: var(--bg-color-3);
        transition: .3s fill;
    }
    .st1{
        fill:#c5e3ea;
      
    }
    .st2{
        fill: var(--heading-color);
        transition: 0.3s;
        transition: .3s fill;
    }
    .icon{
        width: 60px;
    }
    .about-grid{
        display: grid;
        grid-template-columns: 190px 190px;
        grid-template-rows: 190px 190px;
        justify-content: center;
        column-gap: 2.5rem;
        row-gap: 100px;
        margin-right: 2rem;
        position: relative;
    }
    .about-card:nth-child(1){
        border-radius: 40px 40px 5px 40px;
    }
    .about-card:nth-child(2){
        margin-top: 50px;
        border-radius: 40px 40px 40px 5px;
    }
    .about-card:nth-child(3){
        margin-top: -50px;
        border-radius: 40px 5px 40px 40px;
    }
    .about-card:nth-child(4){
        
        border-radius: 5px 40px 40px 40px;
    }
    .about-card{
        background-color: var(--bg-color-2);
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.5s transform, 0.3s background-color;
    }
    .about-card h3{
        color: var(--heading-color);
        font-weight: 600;
        font-size: 1rem;
        letter-spacing: 0.3;
        margin-top: 1rem;
        transition: .3s color;
    }
    .about-card:hover{
        transform: scale(1.1);
    }
    .about-card:hover .st2{
        fill: var(--main-color-1);
    }
    .about-grid::before{
        content: "";
        position: absolute;
        width: 210px;
        height: 210px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 15px solid var(--main-color-1);
        z-index: -1;
        opacity: 0.07;
    }
    .triangle{
        width: 95px;
        opacity: 0.18;
    }
    .about .triangle{
        position: absolute;
        left: 95%;
        top: 27%;
        transform: translate(-50%, -50%);
    }
    /* -------------css du skill section-------------- */
    .skills{
        overflow: hidden;
    }
    .skills-box{
        background-color: var(--bg-color-2);
        padding: 5rem 6rem;
        border-radius: 20px;
        width: 100%;
        position: relative;
        transition: .3s background-color;
    }
    .box-desc{
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 2rem;
    }
    .skills-wrap{
        display: grid;
        grid-template-columns: repeat(4, 150px);
        margin-top: 2rem;
        justify-content: space-between;
    }
    .skill{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .sk-progress{
        width: 150px;
        height: 150px;
        position: relative;
       
    }
    .sk-progress svg{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-90deg);
    
    }
    .sk-progress svg circle{
        fill: var(--bg-color-3);
        stroke-width: 5px;
        stroke: var(--main-color-1);
        stroke-linecap: round;
        stroke-dasharray: 427;
        stroke-dashoffset: 427;
        transition: .3s;
        
    }
    .counter{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        color: var(--heading-color);
        font-weight: 400;
        font-size: 0.9rem;
        transition: .3s color;
    }
    .counter span{
        font-size: 2.45rem;
    }
    .sk-title{
        color: var(--heading-color);
        margin-top: 0.7rem;
        font-size: 1rem;
        font-weight: 400;
        transition: .3s color;
    }
    @keyframes progress{
        to{
            stroke-dashoffset: var(--target);
        }
    }
    .skills .dots{
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
    .skills .square{
        position: absolute;
        left: 100%;
        top: 75%;
        transform: translate(-50%, -50%);
      
    }


    /* ------------------css de la part section de services------------------ */


    .services .container{
        display: grid;
        grid-template-columns: 1fr 1.3fr;
        column-gap: 6rem;
        align-items: center;
    }
    .milestones{
        display: grid;
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
        align-items: center;
        text-align: center;
        justify-content: flex-start;
    }
    .milestones h2{
        color: var(--main-color-1);
        font-size: 1.3rem;
        transition: .3s color;
    }
    .milestones h2 span{
        font-size: 2rem;
        list-style: 1.2;
        margin-right: 0.1rem;
    }
    .milestones h5{
        color: var(--heading-color);
        line-height: 0.9;
        font-weight: 500;
        font-size: 0.95rem;
        transition: .3s color;
    }
    .services-grid{
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
        row-gap: 4.4rem;
    }
    .srv-card{
        background-color: var(--bg-color-2);
        border-radius: 15px;
        padding: 2.5rem 2.1rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        min-height: 280px;
        transition: .3s background-color;
    }
    .srv-card .text{
        margin: 0.7rem 0;
        font-size: 0.7rem;
    }
    .srv-card h3{
        color: var(--heading-color);
        font-weight: 500;
        font-size: 1.05rem;
        transition: .3s color;
    }
    .srv-card:nth-child(2){
        transform: translateY(2.2rem);
    }
    .srv-card:nth-child(3){
        transform: translateY(-2.2rem);
    }
    .services-grid::before{
        content: "";
        position: absolute;
        width: 210px;
        height: 210px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 15px solid var(--main-color-1);
        z-index: -1;
        opacity: 0.07;
    }
    .services .triangle{
        top: 100%;
        left: 30%;
        position: absolute;
        transform: translate(-50%, -100%);
    }
    .services .square{
        top: 75%;
        left: -15px;
        position: absolute;
        transform: translate(-50%, -50%);
        z-index: -1;
    }

     /* ------------------css de la part section portofolio------------------ */

     .portofolio-header{
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         margin-bottom: 4rem;
     }
     .portofolio .container{
         transition: 0.4s;
     }
     .portofolio-title{
         padding-bottom: 1rem;
     }
     .filter-btn{
         display: inline-block;
         color: var(--heading-color);
         background-color: none;
         outline: none;
         border: none;
         cursor: pointer;
         font-size: 0.85rem;
         font-weight: 600;
         letter-spacing: 0.4px;
         margin-left: 1.3rem;
         font-family: inherit;
         text-transform: uppercase;
         transition: .3s color;
     }
     .filter-btn  .mixitup-control-active{
         color: var(--main-color-1);

     }
     .portofolio-gallery{
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
         gap: 2rem;
     }
     
     .prt-image img{
         width: 105%;
     }
     .prt-card{
         border-radius: 15px;
         overflow: hidden;
         background-color: var(--bg-color-2);
         height: 265px;
         display: grid;
         grid-template-rows: 1fr auto;
         transition: .3s background-color;
         
     }
     .prt-image{
         position: relative;
         overflow: hidden;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
     }
     .prt-desc{
         padding: 1.1rem 1.6rem;
         display: flex;
         justify-content: space-between;
     }
     .prt-desc h3{
         font-size: 0.95rem;
         color: var(--heading-color);
         font-weight: 600;
         text-transform: capitalize;
     }
     .btn .secondary-btn .sm{
         padding: .07rem .1rem;
         font-size: .78rem;
         border-bottom-width: 2px;
     }
     .btn .secondary-btn .sm::before{
         height: 2px;
         bottom: -2px;
     }
     .prt-overlay{
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         background-color: transparent;
         backdrop-filter: blur(0px);
         display: flex;
         align-items: center;
         justify-content: center;
         pointer-events: none;
         transition: .5s;

     }
     .prt-icon{
         color: hsl(var(--mtfd-1), 61%, 24%);
         font-size: 1.1rem;
         margin: 0 .4rem;
         background-color: var(--main-color-2);
         border-radius: 50%;
         width: 40px;
         height: 40px;
         opacity: 0;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: .3s;
         cursor: pointer;
         transform: translateY(15px);
        
     }
     .prt-icon:hover{
         background-color: var(--main-color-dark-2);
     }
     .prt-image:hover .prt-overlay{
         pointer-events: auto;
        background-color: var(--bg-color-transparent);
        backdrop-filter: blur(10px);
     }
     .prt-image:hover .prt-icon{
         opacity: 1;
         transform: translateY(0px);
         transition: 0.3s var(--i);
     }
     .modal{
         position: fixed;
         top: 0;
         left: 0;
         width: 100vw;
         height: 100vh;
         overflow: hidden;
         z-index: 12;
         pointer-events: none;
     }
     .slider-wrap{
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, calc(-50% + 400px));
         width: 90%;
         max-width: 900px;
         display: grid;
         grid-template-columns: 100px 1fr 100px;
         align-items: center;
         justify-content: center;
         opacity: 0;
         transition: 0.2s;
     }
     .slider-wrap img{
         width: 100%;
         display: none;
     }
     .navigation{
         color: #fff;
         font-size: 2rem;
         cursor: pointer;
         padding: 2rem;
     }
     .slider-wrap img.showImage{
         display: block;
         border-radius: 10px;
     }
     .modal-overlay{
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background-color: rgba(0, 0, 0, 0.85);
     opacity: 0;
     transition: 0.3s;
     }

     .portofolio.open .modal{
         pointer-events: auto;

     }
     .portofolio.open .modal-overlay{
         opacity: 1;
     }
     .portofolio.open .container{
         transform: scale(0.9);
     }
     .portofolio.open .slider-wrap{

        transform: translate(-50%, -50%);
        opacity: 1;
        transition: .45s .1s;
     }
     body.stopScrolling{
         height: 100%;
         overflow: hidden;
     }


     
     /* ------------------css de la part section testimonials------------------ */
     .testimonials{
         overflow: hidden;
         padding: var(--section-padding) 0 calc(var(--section-padding) + 120px);
     }
     .testimonials .container{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  
     }
     .swiper{
         width: 100%;
         height: 300px;
         background-color: var(--bg-color-2);
         border-radius: 15px;
         padding: 4rem 0 2.5rem;
         transition: .3s background-color;
     }
     .swiper-slide{
         padding: 0 2.5rem;
     }
     .client{
         display: grid;
         grid-template-columns: 85px 1fr;
         align-items: center;
         gap: 1.5rem;
     }
     .client-info h4{
         font-weight: 500;
         color: var(--heading-color);
         margin-bottom: 0.3rem;
         font-size: 1.05rem;
         transition: .3s color;
     }
     .client-info h5{
         color: var(--text-color);
         font-weight: 500;
         font-weight: 0.8rem;
         transition: .3s color;
     }
     .client-info h5 a{
         color: var(--main-color-1);
     }
     .client img{
         width: 100%;
     }
     .testimonials-title{
         padding-left: 5rem;
        
        
     }
     .swiper-slide .text{
         display: block;
         margin: 1.5rem 0 0;
     }
     .swiper-pagination-bullet{

        background-color: var(--main-color-1);
        opacity: 0.3;
        width: 7px;
        height: 7px;
        cursor: pointer;
     }
     .swiper-pagination{
         position: static;
         display: flex;
         align-items: center;
         justify-content: center;
         height: 11px;
         margin-top: 3rem;
     }
     .swiper-pagination-bullet-active{
         opacity: 1;
         width: 11px;
         height: 11px;
     }
     .testimonials-title > * {
color: #fff;
     }

     .section-backgroud{
         position: absolute;
         width: 100vw;
         max-width: 75rem;
         height: calc(100% + 120px);
         top: 15px;
         left: 50%;
         transform: translateX(calc(-50% + 120px));
         background-color: var(--main-color-1);
         z-index: -1;
         border-bottom-left-radius: 60px;
         background-image: linear-gradient(55deg,
         var(--main-color-2)20%, 
         var(--main-color-1)20% );
     }
     .section-backgroud .person{
         position: absolute;
         height: 450px;
         bottom: 0;
         right: 0;
     }
     .section-backgroud .circle{
         position: absolute;
         width: 170px;
         left: 45%;
top: 79%;
transform: translate(-50%, -50%);
        }
        .section-backgroud .square{
            position: absolute;
            left: 77%;
         top: 15%;
   transform: translate(-50%, -50%);
           }

           /* ------------------css de la part section contact------------------ */
           .contact .container{
               display: grid;
               grid-template-columns: repeat(2, 1fr);
               column-gap: 4rem;
           }
           .mail{
               color: var(--main-color-1);
               font-weight: 500;
               font-size: 1.1rem;
               transition: 0.3s;
           }
           .mail i{
               display: inline-block;
               font-size: 1.5rem;
               margin-left: 2px;
               transform: translateY(3px);
               transition: 0.3s margin-left;
           }
           .mail:hover{
               color: var(--main-color-dark-1);
           }
           .mail:hover i{
               margin-left: 10px;
           }
           .contact-form{
               background-color: var(--bg-color-2);
               border-radius: 15px;
               padding: 3.5rem 3rem;
               display: flex;
               flex-direction: column;
               transition: .3s background-color;
           }
           .contact-form h3{
               color: var(--heading-color);
               font-size: 1.3rem;
               font-weight: 500;
               margin-bottom: 1.6rem;
               line-height: 0.9;
               transition: .3s color;
           }
           .form-input{
               display: inline-block;
               padding: 0.9rem 1.5rem;
               background: var(--bg-color-3);
               border: 2px solid var(--bg-color-3);
               width: 100%;
               border-radius: 17px;
               font-family: inherit;
               font-size: .85rem;
               font-weight: 500;
               color: var(--heading-color);
               outline: none;
               transition: 0.3s;
           }
           .form-input::placeholder{
               color: var(--text-color);
           }
           .form-input:valid, 
           .form-input:focus {
            filter: brightness(100%);
            background: var(--bg-color-1);
            border-color: var(--main-color-1);
        }
           .form-input:hover{
               filter: brightness(97%);
           }
           textarea.form-input{
               resize: none;
               min-height: 170px;
           }
           .contact-form .form-input{
               margin-bottom: 1.5rem;
           }
           .contact .square{
               position: absolute;
               left: 17%;
bottom: 15%;
transform: translate(-50%, -50%);
            }
            .contact .triangle{
                position: absolute;
                left: 90%;
top: 98%;
 transform: translate(-50%, -50%);
             }

                /* ------------------css de la part section suscribet------------------ */
                .suscription{
overflow: hidden;
                }
                .sub-box{
                    background-color: var(--bg-color-2);
                    padding: 5rem;
                    width: 100%;
                    border-radius: 20px;
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    column-gap: 6rem;
                    align-items: center;
                }
                .sub-box .heading{
                    font-size: 2rem;
                    margin-top: 2rem;
                }
                .sub-box form{
                    display: grid;
                    grid-template-columns: 1fr auto;
                    column-gap: 1rem;
                }
                .suscription .map{
                    position: absolute;
                    height: 150%;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    z-index: -1;
                    opacity: 0.15;
                }
                .suscription .square{
                    position: absolute;
                    left: 52%;
                    bottom: 7%;
                    transform: translate(0, -50%) scale(0.95);
                }

                
                /* ------------------css de la part footer------------------ */
                footer{
                    padding: 4rem 0;
                }
                footer .container{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-wrap: wrap;
                }
                footer .social-media{
                    display: flex;
                }
                html{
                    scroll-behavior: smooth;
                }
                .social-link{
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                    margin-left: 1rem;
                    background-color: var(--bg-color-1);
                    color: var(--text-color);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: 0.3s;
                }
                .social-link:hover{
                    color: var(--main-color-1);
                }


                @media screen and (max-width: 1000px) {
                    .sub-heading{
                        font-size: .75rem;
                    }

                    .heading{
                        font-size: 2rem;
                    }

                    .showcase-area .heading{
                        font-size: 2.7rem;
                    }
                    .text{
                        margin: 1.3rem 0;
                        font-size: 0.84rem;
                    }

                    .btn{
                        padding: 0.8rem 1.6rem;
                        font-size: 0.8rem;
                        min-width: 100px;
                        border-radius: 15px;
                    }

                    .btn.secondary-btn{
                        font-size: 0.85rem;
                    }

                    .form-input{
                        padding: .8rem 1.45rem;
                        border-radius: 15px;
                        font-size: .8em;
                    }

                    .logo{
                        font-size: 1.45rem;
                    }

                    header .logo{
                        height: 100px;
                        line-height: 100px;
                    }

                    .nav-link{
                        font-size: 0.7rem;
                    }

                    .showcase-area{
                        padding: 100px 0;
                    }

                    .showcase-area .container{
                        grid-template-columns: 1fr 400px;
                        height: 450px;
                    }

                    .skills-box{
                        padding: 4rem;
                    }

                    .sk-progress{
                        transform: scale(0.85);
                    }

                    .services .container{
                        column-gap: 2.5rem;
                    }


                    .contact .container{
                        column-gap: 2.5rem;
                    }

                    .contact-form{
                        padding: 2.5rem 2rem;
                    }
                    .contact-form h3{
                        font-size: 1.1rem;
                        margin-bottom: 1rem;
                    }

                    .contact .form-input{
                        margin-bottom: 0.8rem;
                    }

                    .sub-box{
                        padding: 3.5rem 2.5rem;
                        column-gap: 2rem;
                    }


                    .filter-btn{
                        font-size: 0.7rem;
                    }
                }

                @media screen and (max-width: 768px){
                    :root{
                        --section-padding: 4.5rem;
                    }

                    .square{
                        width: 55px;
                    }

                    .triangle{
                        width: 70px;
                    }

                    .dots{
                        width: 65px;
                    }
                    .hamburger{
                        display: block;
                      
                    }
                    header{
                        background-color: var(--bg-color-2);
                    }
                    .links{
                        order: 3;
                        flex-basis: 100%;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        padding: .5rem 0 2rem;
                        opacity: 0;
                        transition: 0.3s;
                    }

                    .links ul{
                        position: relative;
                        flex-direction: column;
                    }
                    .nav-link{
                        margin: 1.5rem 0;
                        color: var(--heading-color);
                        font-weight: 500;
                    }

                    .toggle-btn{
                        margin: 0;
                    }
                    .links ul::after{
                        content: "";
                        position: absolute;
                        width: 0%;
                        height: .5px;
                        background-color: var(--heading-color);
                        opacity: 0;
                        top: -0.5rem;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        transition: 0.3s;
                    }

                    header nav{
                        justify-content: space-between;
                    }
                    .overlay{
                        width: 100vw;
                        height: 100vh;
                        top: 0;
                        left: 0;
                        position: fixed;
                        background-color: rgba(0, 0, 0, 0.7);
                        z-index: 6;
                        opacity: 0;
                        transition: .3s;
                        pointer-events: none;
                    }
                    header{
                        height: 505px;
                        max-height: 100px;
                        overflow: hidden;
                    }
                    header.scrolled{
                        height: 485px;
                        max-height: 80px;
                      
                    }
                    body.open header{
                        max-height: 505px;
                        background-color: var(--bg-color-2);
                    }
                    body.open .overlay{
                        opacity: 1;
                        pointer-events: auto;
                    }
                    body.open .links ul::after{
                        opacity: .7;
                        width: 100%;
                    }

                    body.open header.scrolled{
                        max-height: 485px;
                    }

                    body.open .links{
                        opacity: 1;
                    }
                    .showcase-area .container{
                        grid-template-columns: 1fr;
                        height: revert;
                        justify-content: center;
                        row-gap: 4rem;
                    }
                    .showcase-image{
                        min-height: revert;
                        height: 100vw;
                        max-height: 570px;
                        max-width: 450px;
                        margin-top: 0;
                        border-radius: 40px;
                    }
                    .showcase-area .text{
                        margin: 0.2rem 0;
                    }
                    .cta{
                        margin-top: 1rem;
                    }
                    .showcase-info{
                        width: 100%;
                        margin-top: 1rem;
                    }
                    .showcase-area .circle{
                        width: 120px;
                    }
                    .showcase-area .square{
                        left: 80%;
                        top: 20%;
                    }
                    .about .container{
                        grid-template-columns: 1fr;
                    }
                    .about-grid{
                        order: 3;
                    }
                    .heading br{
                        display: none;
                    }
                    .about .text{
                        margin: 1rem 0 1.5rem;
                    }
                    .about-grid{
                        grid-template-columns: 150px 150px;
                        grid-template-rows: 150px 150px;
                        margin: 2.5rem 0 0 0;
                        column-gap: 2rem;
                        row-gap: 80px;
                    }
                    .icon{
                        width: 50px;
                    }
                    .about-card h3{
                        font-size: 0.8rem;
                        margin-top: .5rem;
                    }
                    .about-grid::before{
                        width: 150px;
                        height: 150px;
                        border-width: 10px;
                    }

                    .box-desc{
                        grid-template-columns: 1fr;
                        justify-content: flex-start;
                    }
                    .skills-wrap{
                        grid-template-columns: repeat(2, 150px);
                        row-gap: 1rem;
                    }
                    .sk-title{
                        margin-top: 0;
                    }
                    .services .container{
                        grid-template-columns: 1fr;
                        justify-items: center;

                    }
                    .services .text{
                        margin: 1.5rem 0 0.5rem;
                    }
                    .services-grid{
                        margin-top: 3.5rem;
                        column-gap: 1.5rem;
                        row-gap: 3.5rem;
                        max-width: 600px;
                    }
                    .srv-card{
                        padding: 1.8rem  1.7rem;
                        min-height: 260px;
                    }
                    .srv-card h3{
                        font-size: 0.9rem;
                    }
                    .srv-card .text{
                        margin: .4rem 0 .8rem;
                    }
                    .portofolio-title{
                        padding-bottom: 0;
                    }
                    .testimonials .container{
                        grid-template-columns: 1fr;
                        position: revert;
                        max-width: 620px;
                    }
                    .testimonials{
                        padding: var(--section-padding) 0;
                    }
                    .section-backgroud{
                        transform: translateX(0);
                        left: 0;
                        border-radius: 0;
                        top: 0;
                        height: 100%;
                        background-image: linear-gradient(45deg,
                        var(--main-color-2)17%, 
                        var(--main-color-1)17% );
                    }
                    .section-backgroud .person, .section-backgroud .circle{
                        display: none;
                    }
                    .swiper{
                        order: 2;
                        padding: 2rem 0;
                    }
                    .testimonials-title{
                        display: flex;
                        -ms-flex-direction: column;
                        align-items: center;
                        text-align: center;
                        padding:  0 0 3rem 0;
                    }
                    .swiper-slide{
                        padding: 0 2rem;
                    }
                    .swiper-slide .text{
                        margin: 1rem 0 0;
                    }
                    .client{
                        grid-template-columns: 65px 1fr;
                    }
                    .client-info h4{
                        margin-bottom: .2rem;
                        font-size: .97rem;
                    }
                    .client-info h5{
                    
                        font-size: .7rem;
                    }
                    .section-backgroud .square{
                        left: 86%;
                        top: 12%;
                        width: 60px;
                    }
                    .contact .container{
                        grid-template-columns: 1fr;
                        row-gap: 3rem;
                    }
                    .contact .square{
                        width: 60px;
                        bottom: 68%;
                        left: 75%;
                    }
                    .contact .triangle{
                        left: 20%;
                        top: 101%;
                    }
                    .sub-box{
                        grid-template-columns: 1fr;
                        row-gap: 2rem;
                    }
                    .sub-box .heading{
                        margin-top: 0rem;
                    }
                    .suscription .square{
                        width: 60px;
                        left: 65%;
                        bottom: 30%;
                    }
                }
                @media screen and (max-width: 500px){
                    .container{
                        padding: 0 1rem;
                    }
                    .showcase-area .square{
                        display: none;
                    }
                    .showcase-area .container{
                        row-gap: 4.5rem;
                    }
                    .showcase-area .heading{
                        font-size: 2.4rem;
                    }
                    .skills-box{
                        padding: 3rem 2.5rem;
                    }
                    .skills-wrap{
                        grid-template-columns: 1fr;
                        row-gap: 1.5rem;
                    }
                    .services-grid{
                        grid-template-columns: 1fr;
                        row-gap: 20px;
                    }
                    .srv-card{
                        transform: none !important;
                        min-height: auto;
                    }
                    .portofolio-header{
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                    }
                    .portofolio-title{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }
                    .filter-btns{
                        margin-top: 1rem;
                    }
                    .portofolio .slider-wrap{
                        width: calc(100% - 2rem);
                        grid-template-columns: 50px 1fr 50px;
                    }
                    .images{
                        grid-column: 1/4;
                        grid-row: 1/2;
                    }
                    .prev-btn{
                        grid-column: 1/2;
                        grid-row: 1/2;
                        z-index: 1;
                        color: #333;
                    }
                    .next-btn{
                        grid-column: 3/4;
                        grid-row: 1/2;
                        z-index: 1;
                        color: #333;
                    }
                    .contact-form p{
                        font-size: 1.2rem;
                    }
                    .suscription .square{
                        display: none;
                    }
                    .suscription form{
                        grid-template-columns: 1fr;
                        row-gap: 10px;
                        justify-content: center;
                    }
                    .sub-box{
                        padding: 3rem 2.2rem;
                        row-gap: 0.5rem;
                    }
                    .sub-info{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                    }
                    .sub-box .heading{
                        font-size: 1.7rem;
                    }
                    footer{
                        padding: var(--section-padding) 0 1rem;
                    }
                    footer .text{
                        order: 3;
                        flex-basis: 100%;
                        text-align: center;
                        margin-top: 1rem;
                    }
                }
                @media (hover: hover) {
                    .nav-link:hover::after { 
                        width: 100%; opacity: 0.2; 
                    }
                    .btn:hover { 
                        background: var(--main-color-dark-1);
                     }
                    .about-card:hover {
                         transform: scale(1.1); 
                        }
                }




























/* Style pour les modales de service */
.modal-service {
    display: none; /* Caché par défaut */
    position: fixed; /* Reste en place même en scrollant */
    z-index: 1000; /* Par-dessus tout le reste */
    left: 0;
    top: 0;
    width: 100%; /* Pleine largeur */
    height: 100%; /* Pleine hauteur */
    overflow: auto; /* Permet le défilement si le contenu est trop grand */
    background-color: rgba(0,0,0,0.7); /* Fond noir semi-transparent */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-service.active {
    opacity: 1;
    visibility: visible;
}

.modal-content-service {
    background-color: var(--card-color);
    margin: auto;
    padding: 30px;
    border-radius: 15px;
    width: 90%;
    max-width: 800px; /* Largeur maximale pour le contenu */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    overflow-y: auto; /* Permet le défilement si le contenu dépasse la hauteur */
    max-height: 90vh; /* Limite la hauteur de la modale */
}

.modal-service.active .modal-content-service {
    transform: translateY(0);
}

.modal-content-service h2 {
    color: var(--heading-color);
    font-size: 2.2rem;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid var(--main-color);
    padding-bottom: 10px;
}

.modal-content-service p {
    color: var(--text-color);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: justify;
}

.modal-content-service p strong {
    color: var(--main-color);
}

.modal-gallery {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.modal-gallery img {
    max-width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.modal-gallery img:hover {
    transform: scale(1.03);
}

.close-button {
    color: var(--text-color);
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: var(--main-color);
    text-decoration: none;
}

/* Responsive pour les modales */
@media (max-width: 768px) {
    .modal-content-service {
        width: 95%;
        padding: 20px;
    }

    .modal-content-service h2 {
        font-size: 1.8rem;
    }

    .modal-content-service p {
        font-size: 1rem;
    }

    .modal-gallery {
        flex-direction: column;
        align-items: center;
    }

    .modal-gallery img {
        height: auto;
        max-height: 180px;
    }
}