*{
    padding:0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    scroll-behavior: smooth;
    text-decoration: none;
}
:root{
    --text-color:#f5f5f5;
    --hover-color: #12f7ff;
    --bg-color:#250821;
    --secon-bg-color:#292e33;
    --big-font:2.5rem;
    --normal-font:2rem;
    --neon-box-shadow:0 0 .5rem #12f7ff;
    --h2-font:3rem;
    --font-neon-text-shadow:0 0 10px rgba(18,247,255,0.3),
    0 0 20px rgba(18,247,255,0.3),
    0 0 30px rgba(18,247,255,0.3),
    0 0 40px rgba(18,247,255,0.3),
    0 0 70px rgba(18,247,255,0.3),
    0 0 80px rgba(18,247,255,0.3),
    0 0 100px rgba(18,247,255,0.3),
    0 0 150px rgba(18,247,255,0.3);
    }

   ::-webkit-scrollbar{
    height: 0;
    width: .5rem;

   }
   
   ::-webkit-scrollbar-track{
    background: var(--secon-bg-color);

   }

   ::-webkit-scrollbar-thumb{
     background: var(--hover-color);
     border-radius: 5rem;
   }

   









body{
    font-family: "popins",sans-serif;
    background-color: var(--bg-color);
    color:var(--text-color)
}    
header
{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 10%;
}

header.sticky{

 background: linear-gradient(to left,  rgba(0, 0, 0, 1)65%,rgb(0, 255, 255));
  border-bottom: 1px solid var(--secon-bg-color);
  padding: 12px 10%;
}

.logo{
    
     height: 3.5rem;
}

.navlist{
    display: flex;
}
.navlist a
{
    display: inline-block;
    color:var(--text-color);
    font-weight: 500;
    padding: 10px 20px;
    animation: slideAnimation 1s ease forwards;
    animation-delay:calc(.3s * var(--i));
    opacity: 0;
}
.navlist a:hover{
    color: aqua;
  transition: 0.4s ease-in-out;

}
.navlist a.active{
    color: var(--hover-color);
}

#menu-icon{
    font-size: 1.8rem;
    z-index:10001;
    cursor: pointer;
    margin-left: 25px;
    background: var(--hover-color);
    border-radius:3px ;
    color: var(--secon-bg-color);
   display: none;
}
section{
    padding:100px 10%  ;
}
.home{
    height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(to top, rgba(0,0,0,0.5)50%, rgba(0,0,0,0.5)50%), url(Image/img6.jpg);
    background-size: cover;
    background-position: center;
    justify-content: center;
    font-size:20px;
    color: white;
    padding:100px 3%  
}

.home-content h1{
    font-size: var(--big-font);
    font-weight: 700;
}
.change-text{
    font-size: 1.5rem;
    font-weight: 600;
    color: #12f7ff;
}
.change-text h3{
    display: inline-flex;
    margin: 0;
    vertical-align: top;
}
.change-text h3 .word{
    position: absolute;
    display: flex;
    opacity: 0;
}
.change-text h3 .word .letter{
  transform-origin: center center 25px ;
}
.change-text h3 .word .letter.out{
    transform: rotateX(90deg);
    transition: 0.32s cubic-bezier(0.6,0,0.7,0.2);
}
.change-text h3 .word .letter .in{
    transition: 0.38s ease;
}

.change-text h3 .word .letter .behind{
    transform: rotateX(-90deg);
}

.home-content p{
    color: #bdbdbd;
    line-height: 1.6;
    margin-top: 2rem;
   font-weight: 300;
}

.home_link{
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-box{
    display: flex;
    justify-content: space-between;
    width: 320px;
    height: 45px;
}
.btn-box .btn{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 100%;
    background: var(--hover-color);
    color: var(--bg-color);
    font-size: 1rem;
    letter-spacing: 1px;
    font-weight:600;
    transition: .6s;
    box-shadow: var(--neon-box-shadow);
    border-radius: 5px;
    position: relative; 
    overflow: hidden;
    z-index: 1;
    border: 2px solid var(--hover-color);
}
.btn:hover{
    color:var(--hover-color) ;
}
.btn::before{
   content: ""; 
   position: absolute;
   top: 0;
   left: 0;
   background: var(--bg-color);
   width: 0;
   height: 100%;
   z-index: -1;
   transition: .4s;
}
.btn:hover::before{
    width: 100%;

}
.btn:nth-child(2){
    background: var(--bg-color);
    color:var(--hover-color) ;
}
.btn:nth-child(2):hover{
    color: var(--bg-color);
}
.btn:nth-child(2)::before{
    background: var(--hover-color);
}
.social-icons{
    margin-top: 8rem;
    display: flex;
    justify-content: space-between ;
    width: 220px;
    height: 40px;
}



/*service section css -----------------------*/
.services,.temoignages{
    background: linear-gradient(to top, rgba(0,0,0,0.5)50%), url(Image/img15.jpg);
     background-size: cover;
  background-position: center;
}

.main-text{
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--hover-color);
}

.main-text h2{
    font-weight: 700;
    font-size: var(--normal-font);
    margin-bottom: 2rem;
}

.main-text p{
    color: #fdfdfd;
    font-size: .8rem;
    font-weight: 200;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-services , .section-temoignages{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    grid-gap: 2rem;
}

.section-services .service-box {
   flex: 1 1 18rem ;
    text-align: center;
    background: none;
    background-size: cover;
    transition: transform .4s;
    border-radius: 30px;
    color:#fff;
    background: var(--secon-bg-color);
}




.section-temoignages .temoignages-box{
    flex: 1 1 18rem ;
    
    text-align: center;
    background: url(Image/img11.jpg);
    background-size: cover;
    transition: transform .4s;
   
    color: black;
}
.service-btn{
    width: auto;
    justify-content: center;
    
    

}


.service-box:hover, .temoignages-box:hover{
    transform: translateY(-.7rem);
}


.service-box h3, .temoignages-box h3{
    margin-top: 10px;
    font-size: 1.5rem;
    color: #fff;
}


.service-box p{
    margin: .5rem 0  1.5rem 0;
    font-weight: 300;
    letter-spacing: 1px;
   color:#fff;
    line-height: 1.6;
    
    
}
.temoignages-box p{
    margin: .5rem 0  1.5rem 0;
    font-weight: 300;
    letter-spacing: 1px;
   color: #fff;
    line-height: 1.6;
}
.image {
            
           background:none; 
           width: 100%;
            height: 170px;
            background: none;
            position: relative;
            /* overflow: hidden;! */
            background-size: cover;
            background-position: center;
             border-top-left-radius: 30px;
             border-top-right-radius: 30px;
            
        }
        .service-box:nth-child(1) .image  {
            background-image: url('Image/img27.jpg');
            
             
            
        }
         
       .service-box:nth-child(2) .image {
            background-image: url('Image/GCivil.jpg');
           
             
        }
        
        .service-box:nth-child(3) .image {
            background-image: url('Image/Gmine.jpg');
            
             
        }
         
        .service-box:nth-child(4) .image ,.temoignages-box:nth-child(4) .image{
            background-image: url('Image/GArchi.jpg');
            
             
        }

        .service-box:nth-child(5) .image {
            background-image: url('Image/GEnglis.jpg');
           
        }

        .service-box:nth-child(6) .image {
            background-image: url('Image/gesP.png');
            
             
        }
        .temoignages-box:nth-child(1) .image{
           background-image: url(Image/temoignage\ \(1\).jpg);
           border-radius: 0;
         }

         .temoignages-box:nth-child(2) .image{
           background-image: url(Image/Temoignage3.jpg);
            border-radius: 0;
            
           
        }

        .temoignages-box:nth-child(3) .image{
            background-image: url(Image/temoignage\ \(2\).jpg);
             border-radius: 0;
         }
         
        

        

       .service-box .service-btn {
            margin-bottom: 2rem;
        }



/* Contact section css*/

.contact{
     background: linear-gradient(to top, rgba(0,0,0,0.5)50%), url(Image/img15.jpg);
     background-size: cover;
  background-position: center;
}
.contact-content {
            text-align: center;
            max-width: 700px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
            
        }

        .contact .section-title {
            color: var(--text-light);
            background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .contact-form {
            display: grid;
            gap: 2rem;
            margin-top: 3rem;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }

        .form-group {
            display: grid;
            gap: 0.75rem;
            text-align: left;
        }

        .form-group label {
            font-weight: 500;
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.9rem;
        }

        .form-group input,
        .form-group textarea {
            padding: 1.2rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-light);
            font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
            font-size: 1rem;
            font-weight: 400;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
            resize: vertical;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            background: rgba(255, 255, 255, 0.12);
            border-color: var(--hover-color);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        .submit-btn {
            padding: 1.2rem 3rem;
            background: linear-gradient(to left,  rgba(0, 0, 0, 1)65%,rgb(0, 255, 255));
            color: var(--text-color);
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            margin-top: 1rem;
            letter-spacing: 0.5px;
        }

        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
        }
footer{
    padding: 1.5rem 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
     background: linear-gradient(to left,  rgba(0, 0, 0, 1)65%,rgb(0, 255, 255));

}

footer p{
    color: #fff;

}

footer .link_scrol{
    display: inline-flex;
    justify-content: center;
    color: var(--text-color);
    background: var(--hover-color);
    padding: .6rem;
    border-radius: 5px;
}

footer .link_scrol i{
    font-size: 1rem;
    color: var(--secon-bg-color);
}

/*parallax-----------------------*/

.scroll-scale{
    opacity: 0;
    transform: scale(.9);
    transition: all 2s;
}

.scroll-bottom{
    opacity: 0;
    transform: translateY(300px);
    transition: 3s;

}

.scroll-top{
    opacity: 0;
    transform: translateY(-300px);
    transition: 3s;

}

.show-items{
    opacity: 1;
    transform: translateX(0);
}







/*Keyframes-----------------------*/
 

@keyframes slideAnimation{
    0%{
       opacity:0;
       transform:translateY(100px) ;
    }
    100%{
        opacity:1;
       transform:translateY(0) ;
    }
}

















/*Break points*/
@media(max-width:991px){
    header,
    header.sticky{
        padding: 15px 5%;
    }
    footer{
        padding:15px 5% ;
    }
    section{
        padding: 50px 5%;
    }
    .navlist a{
        padding: 8px 15px;
    }
    :root{
    --big-font:2.2rem;
    --normal-font:1.8rem;
    --neon-box-shadow:0 0 .8rem #12f7ff;
    --h2-font:3rem;
    }
    .home-content{
        margin-top: 5rem;
    }
    #services ,#temoignage,#contact{
        scroll-margin-top: 2rem;
    }
    
}

@media(max-width:768px){
   
   #menu-icon{
    display: block;
    transition: all .4s ease;
   }

   #menu-icon.fa-times {
    transform: rotate(-180deg);
   }
   

   .navlist{
    display: flex;
    position: absolute;
    top: -1000px;
    right: 0;
    left: 0;
    flex-direction: column;
     background: linear-gradient(to left,  rgba(0, 0, 0, 1)65%,rgb(0, 255, 255));
   
    text-align: center;
    padding: 0 5%;
    transition: all .45s ease;
   }
   .navlist a{
    display: block;
    padding-bottom: 1rem;
    font-size: 1rem;

   }

   .navlist.open{
     top: 80%;
   }

   .home{
    grid-template-columns: 1fr;
   }
   
   .home h1{
    font-size: 1.5rem;
    margin-top: 3rem;
    
   }
   .logo{
    height: 2.5rem;
    
    
   }
   
   footer{
    display: flex;
    flex-wrap: wrap;
     
   }
   
   footer p{
        font-size: .8rem;
    }
    
    .home_link {
        margin-bottom: 5rem;
        
    }
}

@media(max-width:420px){
     
    html{
        font-size: 80%;
    }
    footer p{
        font-size: .6rem;
    }
    
    
   
}

@media (max-width: 768px) {
            
            .form-row {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
        }