@font-face {
    font-family: 'LEMON MILK Light';
    src: url('font/LemonMilk.woff') format('woff'); 
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: 'Century Gothic';
    src: url('font/CenturyGothic.ttf') format('truetype');
}

  
p{
    font-family: 'Century Gothic', sans-serif;
    font-weight: 20;
}

.first{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url('public/newhomepic.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: darken;
  
}
.second{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(14, 13, 13, 0.7)), url('public/66fd6bccb7cc6035b49ddd310865b77c.jpeg');
    background-size: cover;
    background-position: center;
    background-blend-mode: darken;   
}
.third{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url('public/newref.jpeg');
background-size: cover;
background-position: center;
background-blend-mode: darken;
}
.unthird{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url('public/70744e3c0fb066223887e6881afb512c.jpg');
    background-size: 100% 100%;
    background-position: center;
    background-blend-mode: darken;
}


*{
    margin: 0;
    padding: 0;

}
.main-nav:hover{
cursor: pointer;
}

#blurs{
    display: none;
}
#blurss{
    display: none;
}
.image44{
    height: 85px;
}

a{
    text-decoration: none;
}
.navproject{
    display: flex;
    margin-top: 30px;

}
.navleft,.navright{
    width: 50%;

}
span{
    font-weight: bold;
}
.projecth1{
    color: var(--White, #FFF);

font-size: 50px;
font-style: normal;
font-weight: 600;
line-height: normal;

}
.projectHeading {
    display: flex;
    justify-content: center;
    width: 60%;
    margin-top: 5vh;
}
.projectline{
    width: 55%;
    height: 13px;
    background-color: #F08D17;
    border-bottom-right-radius:50px ;
    border-top-right-radius:50px ;
    margin-top: 20px;
}
.projectdetail{
    width: 100%;
    display: flex;
    padding: 60px;
    height: 40vh;
}
.projectp p{
    margin-bottom: 10px;
}
.projectdetail .left{
width: 52%;

/* height: 60vh; */
}
.projectdetail .right{
    width: 42%;
   
}
.projectp{
    border-left: 4px solid #F08D17;
    border-radius: 2px;
}
.whole{
    height: 98vh;
    width: 250vw;
    border: 8px solid #F08D17;
    background-color: url(public/fond-carte-v2-plan-de-travail-1-21@2x.png);
    background-color: #2d2d2e;
    /* border: 7px solid red; */
    
}
.projectWhole{
    height: 97vh;
    width: 99%;
    overflow: hidden;
    border: 8px solid #F08D17;
    background-color: url(public/fond-carte-v2-plan-de-travail-1-21@2x.png);
    background-color: #2d2d2e;
}
.ros22{
    transition: 1.5s;
}
.upper, .low{
    height: 50%;
    width:100%;
   
   
}
.upper{
    display: flex;
}
.nav{
    /* width: 43.7vh; */
    position: fixed;
    margin-left: -180px;
    z-index: 1;
    height: 98vh;
    overflow: hidden;
    background-color: #F08D17;
    /* transition: 4s; */
   
}
.res{
    /* display: none; */
    /* transition: 5s; */
    position: fixed;
    width: 15%;
    height: 100vh;
    background-color: #F08D17;
    /* text-align: center; */
    padding-top: 8%;
    margin-left: -100%;
    padding-left: 2%;
    margin-top: -2px;
    z-index: 0;
}
.wes2 p{
    font-weight: 1000;
    margin-bottom: 15px;
    font-size: 23px;
    cursor: pointer;
}
.low{
    background-image: url(public/fond-carte-v2-plan-de-travail-1-1@2x.png);
}

.log{
    width: 264px;
    background-color: black;
    padding: 10% 0% ;
    /* padding-left: 180px; */
    padding-right: 0%;
    margin-left: -8px;
    margin-top: -8px;
    border-left: 8px solid #F08D17;
    border-top: 9px solid #F08D17;
    z-index: 2;
    
}
.ani3{
   /* border: 2px solid red; */
    padding-top: 0.9%;
}

.menu{
    /* width: 100%; */
    height: 82vh;
    background-color: #F08D17;
    /* text-align: center; */
    padding-top: 20%;
    margin-left: -8px;
    z-index: 2;
    display: flex;
 
}
.wes2{
    /* width: 70%; */
    height: 100%;
    /* border: 1px solid red; */
    padding-top: 10%;
}
.wes1{
    width: 30%;
    height: 100%;
    /* border: 1px solid rgb(0, 255, 0); */
    justify-items: center;
    text-align: center;
}
.menu img{
    cursor: pointer;
}
.ros{
    display: flex;
    
}
.ros1 ,.ros2{
    width: 80px;
    height: 90px;
    /* margin-right: -50px; */
}
.ros1{
    background-color: #000000;

}
.ros2{
    margin: auto;
    margin-right: -2px;
    /* background-color: #F08D17; */
    /* height: 100vh; */
    width: 300px;
    margin-right: -220px;
    background-color: #F08D17;

}
.ros21{
background-color: #F08D17;
height: 90px;
/* margin-right: -100px; */

}
.ros22{
    display: flex;
    justify-content: center;
background-color: #F08D17;
/* margin-right: 100; */
width:200px ;
margin-left: 70px;
}

.rosp2{
    display: flex;
    
}
.ros1p2 ,.ros2p2{
    width: 80px;
    height: 90px;
    /* margin-right: -50px; */
}
.ros1p2{
    background-color: #000000;

}
.ros2p2{
    margin: auto;
    margin-right: -2px;
    /* background-color: #F08D17; */
    /* height: 100vh; */
    width: 300px;
    margin-right: -220px;
    background-color: #F08D17;

}
.ros21p2{
background-color: #F08D17;
height: 90px;
/* margin-right: -100px; */

}
.ros22p2{
    display: flex;
    justify-content: center;
background-color: #F08D17;
/* margin-right: 100; */
width:200px ;
margin-left: 84px;
}


.content{
    /* border: 1px solid white; */
    height: 99vh;
    margin-left: 80px;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
}
.first,.second,.third,.four{
    width:43vw;
    height: 75vh;
    /* border: 1px solid red; */
    margin-top: 2%;
    margin-left: 20px;
}
.first {
   overflow: hidden;
    
}

.firstinner{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url('public/newhomepic.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: darken;
    width:100%;
    height: 100%;
    transition: 1s;
}

.line{
    display: flex;
    width: 100%;
    height: 77.5vh;
    /* justify-content: center; */
    
    /* margin-top: 22.5%; */
}
.centered-line {
    justify-content: center;
  }
.li{
    width: 1.3vh;
    height: 30%;
    margin-top: auto;
    background-color: #F08D17;
    margin-left: 10%;
    margin-bottom: -5px;
}
.li:hover{
    height: 83%;
}
body{
    overflow-y:hidden;
}
.txt{
    margin-top: auto;
    color: white;
    /* width: 100%; */
}
.txt  h1,p{
    margin-left: 3%;
}
.txt p{
    margin-bottom: 2%;
    font-size: 11px;
}
.txt h1{
    font-size: 45px;
}
.hori_line{
    height: 1vh;
   width : 70%;
    margin-top: auto;
    background-color: #F08D17;
    
    margin-left: -35px;
    margin-bottom: 3%;
}
.second{
   
    overflow: hidden;
}
.secondinner{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(14, 13, 13, 0.7)), url('public/66fd6bccb7cc6035b49ddd310865b77c.jpeg');
    background-size: cover;
    background-position: center;
    background-blend-mode: darken;
    width:100%;
    height: 100%;
    transition: 1s;
}

.third{
  
    overflow: hidden;
}
.thirdinner{

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url('public/newref.jpeg');
    background-size: cover;
    background-position: center;
    background-blend-mode: darken;
    width:100%;
    height: 100%;
    transition: 1s;
}
.contact{
    width: 100%;
    height: 75%;
    background-color: rgb(22, 20, 20);
    border: 0.5px solid rgb(22, 20, 20);
}
.contact1{

    height: 25%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-blend-mode: darken; 
}
.four{
   overflow: hidden;
}

.fourinner{
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 3)),url(public/mask-group@2x.png);
    background-size: cover;
    background-position: center;
    background-blend-mode: darken;
    width:100%;
    height: 100%;
    transition: 1s;
}
.contact_line_whole{
    display: flex;
margin-top: 2%;
}
.lis{
    width: 1.2vh;
    height: 17vh;
    margin-top: auto;
    background-color: #F08D17;
    margin-left: 10%;
    margin-bottom: -5px;
}
.contact{
    padding: 0%;
    width: 99.6%;
}
.logos,.info{
    margin-top: 5%;
    margin-left: 5%;
}
.head,.info1,.info2,.info3{
    display: flex;
    
}
.info1 p{
    color: white;
}
.info2 p{
    color: white;
}
.info3 p{
    color: white;
}
.logos img{
    width: 130px;
}
.info3 img{
    width: 21px;
    margin-bottom: 2%;
}
.info2 img{
    width: 21px;
    margin-bottom: 2%;
}.info1 img{
    width: 21px;
    margin-bottom: 2%;
}

.info1{
    width: 120%;
}
.hr{
    background-color: #F08D17;
    margin: 2% 5%;
    width: 90%;
    color: #F08D17;
    height: 1px;
}
.form{
    padding: 0 5%;
}
.input{
    display: flex;
}
.last_name ,.first_name{
    width: 50%;
}
label{
    color: white;
}
input,select{
    width: 90%;
    padding: 2%;
    background: transparent;
    border: 2px solid white;
    margin-bottom: 2%;
    color: white !important;
}
select{
 
  color: rgb(253, 253, 253) !important;
  border: 2px solid white !important;
  width: 84% !important;
}
option{
    background-color: gray !important;
}
textarea{
    width: 97%;
    background: transparent;
    border: 2px solid white;
    height: 90px;
    color: white;
}
button{
    padding: 1% 5%;
    background-color: #F08D17;
    border: 1px solid #F08D17;
    margin-top: 1%;
}
button:hover{
    background: transparent;
    color: #F08D17;
    cursor: pointer;
}
.low{
    background-image: url(public/fond-carte-v2-plan-de-travail-1-1@2x.png);
}
.footer{
    width: 98vw;
    /* height:25%; */
    margin: auto;
    /* margin-left: 80%; */
    margin-top: 34.7vh;
position: fixed;
/* border: 1px solid red; */
z-index: 0;

}
.footer h4{
    color: #F08D17;
    margin-top: 3%;
}
.footer_whole{
    display: flex;
    margin-top: 3vh;
}
.scale{
    width: 85vw;
    display: flex;
    /* height: 20vh; */
    /* padding-right: 20%; */
}
.sh1,.sh2,.sh3,.sh4{
    color: white;
    width: 17vw;
    /* margin-left: 3%; */
    /* border: 1px solid white; */
    
}
.sh1{
    margin-left: 13%;
}
.sh1 h5, .sh2 h5,.sh3 h5,.sh4 h5{
    /* margin-left: 40%; */
    text-align: center;
}
.sh1 .ro{
    /* width: 100%; */
    height: 1.5vh;
    /* background-color: #F08D17; */
    margin-top: 1vh;
    display: flex;
}
.sh4 .ro{
    display: flex;
    background-color: #F08D17;
}

.row1{
    height: 6px;
    width: 3.5%;
    border-right: 1px solid #F08D17;

}
.scale_line{
    display: flex;
}
.row1 p{
    margin-right: -100px;
    margin-top: 150%;
  margin-left: 90%;
    font-size: 10px;
}
h5{
    font-size: 15px;
}
.row1s{

}


.sh2 .ro{
    /* width: 100%; */
    height: 1.5vh;
    /* background-color: white; */
    margin-top: 1vh;
    display: flex;
}
.row3{
    height: 6px;
    width: 3.5%;
    border-right: 1px solid white;

}

.row3 p{
    margin-right: -100px;
    margin-top: 150%;
  margin-left: 90%;
    font-size: 10px;
}

.row4{
    height: 6px;
    width: 3.4%;
    border-right: 1px solid white;

}
.sh3 .ro{
    /* width: 100%; */
    height: 1.5vh;
    /* background-color: white; */
    display: flex;
    margin-top: 1vh;
}
.row4 p{
    margin-right: -100px;
    margin-top: 150%;
  margin-left: 90%;
    font-size: 10px;
}
 .sh4 .ro{
    width: 100%;
    height: 1.5vh;
    background-color: white;
    margin-top: 1vh;
}
.row5{
    height: 6px;
    width: 3.5%;
    border-right: 1px solid white;

}
.row2s{
    height: 9px;
}
.ro1,.ro2,.ro3,#ro4,#ro5,#ro6,#ro7,#ro8,#ro9,#ro10,#ro11,#ro12,#ro13,#ro14,#ro15,#ro16,#ro17,#ro18,#ro19,#ro20,#ro21,#ro22,#ro23,#ro24,#ro25{
    width: 4%;
    height: 1.5vh;
    background-color: #F08D17;
    animation: moveBackground 5s linear infinite;
}
@keyframes moveBackground {
    0% {
        left: 0;
    }
    100% {
        left: 100%; /* Move background color to the right */
    }
}

.rro1,.rro2,.rro3,#rro4,#rro5,#rro6,#rro7,#rro8,#rro9,#rro10,#rro11,#rro12,#rro13,#rro14,#rro15,#rro16,#rro17,#rro18,#rro19,#rro20,#rro21,#rro22,#rro23,#rro24,#rro25{
    width: 4%;
    height: 1.5vh;
    background-color: white;
    animation: moveBackground 5s linear infinite;
}
@keyframes moveBackground {
    0% {
        left: 0;
    }
    100% {
        left: 100%; /* Move background color to the right */
    }
}

.rrro1,.rrro2,.rrro3,#rrro4,#rrro5,#rrro6,#rrro7,#rrro8,#rrro9,#rrro10,#rrro11,#rrro12,#rrro13,#rrro14,#rrro15,#rrro16,#rrro17,#rrro18,#rrro19,#rrro20,#rrro21,#rrro22,#rrro23,#rrro24,#rrro25{
    width: 4%;
    height: 1.5vh;
    background-color: white;
    animation: moveBackground 5s linear infinite;
}
@keyframes moveBackground {
    0% {
        left: 0;
    }
    100% {
        left: 100%; /* Move background color to the right */
    }
}
.rrrro1,.rrrro2,.rrrro3,#rrrro4,#rrrro5,#rrrro6,#rrrro7,#rrrro8,#rrrro9,#rrrro10,#rrrro11,#rrrro12,#rrrro13,#rrrro14,#rrrro15,#rrrro16,#rrrro17,#rrrro18,#rrrro19,#rrrro20,#rrrro21,#rrrro22,#rrrro23,#rrrro24,#rrrro25{
    width: 4%;
    height: 1.5vh;
    background-color: rgb(255, 255, 255);
    animation: moveBackground 5s linear infinite;
}
.rrrrro1,.rrrrro2,.rrrrro3,#rrrrro4,#rrrrro5,#rrrrro6,#rrrrro7,#rrrrro8,#rrrrro9,#rrrrro10,#rrrrro11,#rrrrro12,#rrrrro13,#rrrrro14,#rrrrro15,#rrrrro16,#rrrrro17,#rrrrro18,#rrrrro19,#rrrrro20,#rrrrro21,#rrrrro22,#rrrrro23,#rrrrro24,#rrrrro25{
    width: 4%;
    height: 1.5vh;
    background-color: rgb(255, 255, 255);
    animation: moveBackground 5s linear infinite;
}
@keyframes moveBackground {
    0% {
        left: 0;
    }
    100% {
        left: 100%; /* Move background color to the right */
    }
}

.row5 p{
    margin-right: -100px;
    margin-top: 150%;
  margin-left: 90%;
    font-size: 10px;
}
.sh1 h5{
    color: #F08D17;
}

.row1s{
    height: 9px;
     border-right: 2px solid #F08D17;
}
.row1ss{
    height: 9px;
     border-right: 2px solid white;
}
.row1 p{
    color: #F08D17;
}
.des h4{
    margin-top: 5.5px;
    margin-left: 5px;
}
#sh1h5,#sh2h5,#sh3h5 ,#sh4h5{
    cursor: pointer;
}
.ros{
    border-right: 2px solid white;
}
.first,.second,.third{
    cursor: pointer;
}
body{
    color: white;
/* font-size: 72px; */
font-family: 'Montserrat', sans-serif;
font-weight: 500;
word-wrap: break-word;
overflow-y: hidden;
overflow-x: scroll;

}
.des h4{
    margin-top: 5.5px;
    margin-left: 3vw;
    font-weight: 150;
    font-size: 10px;
}
.first,.second,.third,.four{
    width:41vw;
    height: 79%;
    /* border: 1px solid yellow; */
    margin-top: 1.5%;
    margin-left: 10px;
}
.line{
    /* margin-top: 29.4%; */
}
.log{
    margin-top: -9px;
}
::-webkit-scrollbar{
 display: none;
}
#res1:hover{
    color: white;
}
.first{
    margin-left: 70px;
}
/* @media (max-width:1500px) {
    .nav{
        margin-left: -7%;
    }
}
@media (max-width:1400px) {
    .nav{
        margin-left: -8%;
    }
}
@media (max-width:1400px) {
    .nav{
        margin-left: -14%;
    }
}
@media (max-width:1100px) {
    .nav{
        margin-left: -9%;
    }
}
@media (max-width:1000px) {
    .nav{
        margin-left: -14%;
    }
} */
.sh4{
    margin-left: -1px;
}
.wes2 p{
    color: rgb(0, 0, 0);
} 
.whole{
    /* display: none; */
} 
.row4{
    width: 3.6%;
}
.sh2 .ro {
    margin-left: -1px;
}
@media(max-width:1024){
    

.des h4{
    margin-left: 1vw;
}
 

}
#videos{
    width: 100%;
    height: 100vh;
    background-color: red;
}
  #lottie {
            background-color: #000000;
            width: 100%;
            height: 100%;
            display: block;
            overflow: hidden;
            transform: translate3d(0, 0, 0);
            text-align: center;
            opacity: 1;
            /* display: none; */
        }



        .firstsec{
            /* height: 40vh; */
            width: 100%;
    max-width: 1350px;

            background-color: #2d2d2e;
            /* padding: 10%; */
            display: flex;
            padding-top: 8%;
            padding-bottom: 8%;
            overflow: hidden;
            flex-direction: column;
        }
        .secondsec{
            height: 60vh;
            width: 100%;
            background-color: #2d2d2e;
            display: flex;
            background-image: url(public/fond-carte-v2-plan-de-travail-1-1@2x.png);
            padding-top: 3%;
            padding-bottom: 3%;
            /* padding-left: 10%; */
        }
        .firstpage{
            display: none;

        }
.firstsec1,.firstsec2,.firstsec3{
    width: 25%;
    height: 80%;
    /* border: 1px solid white; */
}
.firstsec2,.firstsec3{
    margin-left: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    text-align: center;
}
.firstsec1{
margin-left: 7%;
display: flex;
flex-direction: column;
justify-content: center;
    justify-items: center;
    text-align: center;
}
.secondsec1,.secondsec3,.secondsec2{
    width: 10%;
    height: 100%;
    /* border: 1px solid white; */
}
.secondsec2{
    width: 55%;
    height: 100%;
}
.secondsec1{
    margin-left: 10%;
}
.sec2ver{
    /* width: 1.7vh;
    height: 15vh;
    background-color: #F08D17;
    margin-left: 70%; */

}
.sec2hori{
    width: 15vh;
    height:1.7vh ;
    background-color: #F08D17;
    margin-top: -40%;
    margin-left: 38.5%;
}
.secondsec1{
    /* padding-left: 10%; */
}
.secondsec2{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.ps1{
    margin-top: 15%;
}
.ps2{
    margin-top: 4%;
}
.secline{
    /* border: 1px solid red; */
    /* width: 15vh;
    height: 15vh;
    margin-top: auto; */
}
.secondsec3{
    display: flex;
}
.sec2hori1{
    width: 100%;
    height: 1.8vh;
    background-color: #F08D17;
    margin-top: -8.5vh;
}
.sec2ver1{
    /* width: 1.8vh;
    height:100% ;
    background-color: #F08D17; 
    margin-left: 6.5vh; */
}
.thirdsec{
    height: 60vh;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    
    padding-top: 3%;
    padding-bottom: 3%;
    /* padding-left: 10%; */
}
.third1,.third2,.third3{
    width: 25%;
    height: 100%;
    /* border: 1px solid black; */
}
.third1,.third2,.third3{
    margin-left: 7.5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    text-align: center;
    /* max-width: 257px; */
}
.third1 p,.third2 p,.third3 p{
   
    max-width: 270px;
    margin: auto;
}
.third2,.third3{
    margin-left: 5%;

}
.third1 h1,.third2 h1,.third3 h1{
    color: #F08D17;
    /* margin-top: 12%; */
}
.corr{
    width: 35%;
    height: 1vh;
    background-color: #F08D17;
    margin: auto;
    margin-top: 8%;
    margin-bottom: 8%;
}
.third1 p{
    color: #000000;
}
.minar{
    overflow-x: hidden;
    background-color: white;
}
.barss{
    width: 100%;
    
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    justify-items: center;
    text-align: center;
}
.barsi{
    /* height: 90vh; */
    background-color: #2d2d2e;
   
    padding-top: 3%;
    padding-bottom: 6%;
}
.skills{
    width: 70%;
    /* max-width: 900px; */
    padding: 0 20px;
}
.skill-name{
    font-size: 14px;
    font-weight: 200;
    color: #ffffff;
    text-transform: uppercase;
    margin: 20px 0;
}
.skill-bar{
    height: 21px;
    background-color: white;
    /* border-radius: 3px; */
    width: 100%;
}
.skill-per{
    height: 21px;
    background-color: #F08D17; 
    /* border-radius: 3px; */
position: relative;
animation: fillBars 2.5s 1;


}
@keyframes fillBars {
    from{
        width: 0;
    }to{
        width: 95%;
    }
}

.skills h1{
    color: #F08D17;
    margin-top: 5%;
    margin-bottom: 10%;
}
.pbar{
    display: flex;
    width: 100%;
    /* max-width: 900px; */
}
.firstfooter{
    width: 100%;
    /* height: 60vh; */
    background-color: #262627;
}
#footer{
    display: block !important ;
}

.ff11{
    width: 60%;
    /* height: 100%; */
    margin-top: 8%;
}
.ff12{
    margin-top: 8%;
/* padding-left: auto; */
    width: 40%;
    /* height: 100%; */

}
.ff1,.ff3{
    width: 80%;
    margin-left: 10%;
    /* height: 100%; */
display: flex;
}
.ff2{
    width: 80%;
    margin-left: 10%;
    height: .7vh;
    background-color: #F08D17;
    margin-top: 2%;
    margin-bottom: 3%;
}
.ff31{
    display: flex;
}
.ff31{
    width: 86%;
}
.ff3 a{
    width: 11%;
}
.ff32 p{
    width: 100%;
}
.sh1,.sh2,.sh3,.sh4{
    cursor: pointer;
}
.first{
    overflow-x: hidden;
}
.ani2{
    display: flex;
    /* border: 1px solid red; */
    
}
.ani1{
    /* border: 1px solid yellow; */
   width: 42vw;
   /* margin-top: 1%; */
   height: 100%;
   margin-top: 1.1%;
} 
.first{
    margin-top: 5%;
    width: 40.5vw;
    margin-top: 0;
}
.ros22{
    margin-top: -19vh;
    z-index: 0;
}
.wes2{
    margin-top: 15vh;
}
.ros21{
    z-index: 1; 
}
.first{
    margin-top: 0;
}
.ani1{
    margin-top: 1.2%;
}
.content,.first{
    overflow: hidden;
}
.ros22{
    /* position: relative; */
    height: 110vh;
}
#sec2ver{
    margin-top: -20px;
    margin-bottom: -20px;
}
.minar:hover path{
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    cursor: pointer;
    animation: animate-cloud 5s linear forwards;
}
.thirdsec:hover {
    cursor: pointer;
    animation: animate-cloud 5s linear forwards;
}
.minar path{
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    cursor: pointer;
    animation: animate-cloud 5s linear forwards;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 7s;
}
.footerminar path{
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    cursor: pointer;
    animation: animate-cloud 5s linear forwards;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 7s;
}
.bulbs path{
    fill: transparent; 
    stroke: #F08D17;
    stroke-dasharray:670;
    stroke-dashoffset:1250;
}
.home path{
    fill: transparent;
    stroke: #F08D17;
    stroke-dasharray:800;
    stroke-dashoffset: 960;

}
.bulbs path{
    animation: animate-blue 10s linear forwards;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 7s;

}
.home path{
    
    /* fill: #000000; */
    animation: animate-home 5s linear forwards;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 7s;
}
.par path{
    fill: transparent;
    stroke: #F08D17;
    stroke-dasharray:390;
    stroke-dashoffset: 640;

}
.par path{
    animation: animate-par 5s linear forwards;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 7s;

}
@keyframes animate-par {
  
    0%{
        stroke-dashoffset:390;

    }
    100%{
    stroke-dashoffset: 640;

    }
}

@keyframes animate-blue {
  
    0%{
        stroke-dashoffset:670;

    }
    100%{
    stroke-dashoffset: 1250;

    }
}
@keyframes animate-clouds {
  
    0%{
        stroke-dashoffset:1000;

    }
    100%{
    stroke-dashoffset: 100;

    }
}
@keyframes animate-cloud {
  
    0%{
        stroke-dashoffset:1000;

    }
    100%{
    stroke-dashoffset: 100;

    }
}
@keyframes animate-home {
  
    0%{
        stroke-dashoffset:500;

    }
    100%{
    stroke-dashoffset: 960;

    }
}

.wes2{
    margin-top: 1vh;
}
.savi{

    margin-top: 15vh;
}
.ff12 {
    margin-top: 8%;
    width: 10%;
    /* height: 100%; */
}
.ff1{
    margin-left: 6%;
}
.ff11{
    width: 90%;
    display: flex;
    justify-content: center;
}
.ff13{
    width: 0px;
    margin-top: 8%;
}
.footercontent{
display: flex;
justify-content: center;
}
.fc1,.fc2,.fc3{
    width: 20%;
    /* border: 1px solid; */
    margin: 3%;
    /* height: 30vh; */
    justify-content: center;
    text-align: center;
}
.footerhr{
    width: 120px;
    height: 3px;
    color: #F08D17;
    margin: auto;
    background-color: #F08D17;
    border: 1px solid #F08D17;
    margin-top: 10px;
    margin-bottom: 10px;
}
.rue-claude-nicolas{
    font-weight: 10;
    margin-top: 1%;
    font-size: 14px;
}
.ff3{
    text-align: center;
    justify-content: center;
    /* margin-bottom: 3%; */
}
.firstfooter{
    padding-bottom: 4%;
}
.footerminar{
    width: 80%;
    margin-left: 10%;
}
.wes2{
    width: 74%;
}
.unthird{
   overflow: hidden;
}
.fithinner{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url('public/70744e3c0fb066223887e6881afb512c.jpg');
    background-size: 100% 100%;
    background-position: center;
    background-blend-mode: darken;
    transition: 1s;
}
.nos{
    
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url(public/PHOTO-2018-12-05-15-34-39\ 1.png);
    background-size: 100% 100%;
    background-position: center;
    background-blend-mode: darken;
}

.first,.second,.third,.four{
    background-size: cover;
}
@media  (min-width:1600px) {
    .secondsec{
        height: 43vh;
    }
 
    .sec2hori {
       
        margin-top: -47%;
        margin-left: 33.5%;
    }
   /* .ani1{
width: 41.2vw;
    } */
}
@media  (min-width:1680px) {
    .sec2hori {
        margin-top: -52%;
        margin-left: 27.5%;
    }
    /* .ani1{
        width: 41.2vw;
            } */
}
@media  (min-width:1880px) {
    .sec2hori {
        margin-top: -47%;
        margin-left: 33.5%;
    }
    /* .ani1{
        width: 41.2vw;
            } */
}
@media  (min-width:1920px) {
    .sec2hori {
        margin-top: -47%;
        margin-left: 33.5%;
    }
    /* .ani1{
        width: 40.5vw;
            } */
}
.ani1{
    width: 40.5%;
    margin-right: 10px;
}

.sh3{
    margin-left: -1px;
}
.thirdsec{
    height: auto;
}
.ros22{
    width: 376px;
}
.wes2 {
    /* width:107% */
}
.nav{
    width: 331px;
    margin-left: -253px;
}
.log{
width: 329px;
}
.log {
    /* width: 264px; */
    background-color: black;
    padding: 5% 0%;
}
.wes2 {
    width: 74%;
    margin-left: 47px;
}
 h3:hover{
    cursor: pointer;
    color: #F08D17;
}
.secondsec {
    height: 40vh;
}
.ps1 {
    margin-top: 11%;
}
.hidden{
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 2s;
}
.show{
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}
@media(prefers-reduced-motion){
    .hidden{
        transition: none;
    }
}
.third1{
    transition-delay: 100;
}
.third2{
    transition-delay: 500;
}
.third3{
    transition-delay: 1500;
}
.sec2ver{
    animation: animate-plus 1s linear forwards;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 2s;

}
.sec2ver22{
    animation: animate-pluss 1s linear forwards;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 2s;

}
@keyframes animate-pluss {
  
    0%{
  
    margin-top: -40px;
  


    }
    100%{
   
            margin-top: 20px;
          
         

    }
}

@keyframes animate-plus {
  
    0%{
  
    margin-top: 20px;
  


    }
    100%{
   
            margin-top: -20px;
          
         

    }
}

.hiddens,.hiddenss,.hiddensss ,.f_hidden{
    opacity: 0;
    filter: blur(5px);
    /* transform: translateX(-100%); */
    transition: all 1.2s;
}
.hiddenp{
    opacity: 0;
    filter: blur(5px);
    transform: translateX(100%);
    transition: all 2s;
}
.shows{
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);

}
.secondsec{
    overflow-x: hidden;
}

.icon {
    display: inline-block;
    height: 3em;
    width: 1.5em;
    border: 0.2em solid white;
    border-radius: 1em;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.icon::before {
    content: "";
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0.3em;
    height: 0.4em;
    width: 0.4em;
    background-color: white;
    border-radius: 50%;
    animation: move-down 2s infinite;
}

@keyframes move-down {
    80% {
        opacity: 0.5;
    }
    100% {
        transform: translateY(1.6em);
        opacity: 0;
    }
}
.icon{
    opacity: 0;
    transition: 0.3s;
}
.second{
    /* z-index: 1; */
    /* width: 100vw;
    margin-left: -42.5vw;
    height: 100vh;
    margin-top: 0; */
    margin-left: 0;
}
.ani3{
     width: 41vw;
     height: 99vh;
    /* z-index: 1;  */
    /* width: 80vw/ */
    /* margin-left:0.5vw; */



}
.ani2{
    padding-top: 0.3%;
    height: 99vh;
}
.sePaF{
    /* width: 100%; */
    /* height: 50vh; */
    background-color: #2d2d2e;
    /* border: 1px solid white; */
    height: auto;
}
.wsePaf{
    display: flex;
    padding: 10%;
    padding-top: 3%;
    padding-bottom: 3%;
    height: 100%;
    /* width: 100%; */
}
.wsePaf1{
 width: 60%; 
 /* margin: 5%;  */
 /* border: 1px solid rgb(128, 0, 49); */
 /* height: 30vh; */
 display: flex ;
 justify-content: center;
 justify-items: center;

}
.wsePaf12{
    width: 60%; 
    /* margin: 5%;  */
    /* border: 1px solid rgb(128, 0, 49); */
    /* height: 30vh; */
   
   }
.wsePaf2{
    width: 40%;
    /* border: 1px solid green; */
 /* height: 30vh; */
 

}
.wsePaf2 img{
    min-height: 400px;
}
.wsePaf22{
    width: 40%;
    /* border: 1px solid green; */
 /* height: 30vh; */
 /* margin-left: 10%; */

}
.wsePaf11{
    width: 85%;
    /* border: 1px solid yellow; */
    padding-left: 10%;
    padding-right: 5%;
    margin: auto;
    /* height: 30vh; */
}
.wsePaf112{
    width: 90%;
    /* border: 1px solid yellow; */
    padding-left: 5%;
    /* padding-left: 5%; */
    /* height: 30vh; */
}
.h2p2{
    color: #F08D17;
text-align: right;

/* Header 1 */
font-family: 'Montserrat', sans-serif;
font-size: 50px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.48px;
text-transform: capitalize;
margin-top: 5%;
margin-bottom: 5%;
}
.h2p2n{
    color: #F08D17;
    text-align: right;
    
    /* Header 1 */
    font-family: 'Montserrat', sans-serif;
    font-size: 50px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.48px;
    text-transform: capitalize;
    margin-top: 5%;
    margin-bottom: 5%;
}
.h2p22{
    color: #F08D17;
text-align: left;

/* Header 1 */
font-family: 'Montserrat', sans-serif;
font-size: 50px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.48px;
text-transform: capitalize;
/* margin-top: 5%; */
margin-bottom: 5%;
}
.pp2{
    color: var(--White, #FFF);
text-align: right;

}
.bcsePaf{
    background-image: url(public/fond-carte-v2-plan-de-travail-1-1@2x.png);
}
.secondpage{
    display: none;
}
@media(max-width:1600px){
    .wsePaf2 img{
        min-height: 250px;
    }
}

.mm{
    /* margin-left: 10%; */
}
.wsePaf2{
    display: flex;
    justify-content: center;
    justify-items: center;
   

}
.wse{
    background-image: url('public/814b68a02bfd5b181cccef3f082c8c40.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.wse1{
    background-image: url('public/fire1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.wse2{
    background-image: url('public/f3aea7c1c55c8bd1c724a81a88b27afa.jpeg');
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.wes3{
    background-image: url('public/bd6379b61d27cb714d181f964da68833.jpeg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.wsePaf12{
    display: flex;
    /* justify-content: center;
    justify-items: center; */
}



.wsePaf112{
    margin: auto;
}
#text,
      #image, #heading {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 2s, transform 3s;
      }
 #text1, #image1, #heading1,  #text11,  #text12,  #text13 {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 2s, transform 3s;
      }
 #text2, #image2, #heading2 {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 2s, transform 3s;
      }
#text3,#image3, #heading3 {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 2s, transform 3s;
      }
.txt h1, p {
        margin-left: 0;
    }
.dfd{
        display: flex;
        justify-content: center;
      
        justify-items: center;
        margin-top: 14px;
    }
.first {
        margin-left: 0px;
    }

.content {
       
        margin-left: 120px;
       
    }
.ani1,.ani3,.first,.second{
        width: 40vw;
    }
    .ani4{
        /* border:1px solid red; */

    }
    #third{
        /* border: 1px solid white; */
    }
    #third{
        margin-top: 6%;
    }
    .thirdpage{
        display: none;
        width: 100%;
    }
    .tfs{
        display: flex;
        justify-content: center;
        background-color: #2D2D2E;
        width: 100%;
        /* border: 1px solid red; */

    }
    .fts2{
        width: 40%;
        /* border: 1px solid white; */
        /* height: 890px; */
        /* height: 60vh; */
        margin-top: 40px;
    }
    .fts2{
        margin-bottom: 40px;

    }
    .fts1{
        width: 350px;
        /* margin-left: 10%; */
        
    }
    .fts1{
      /* background-image: url(public/IMG_0994-la\ mieux\ 1.png);
      background-repeat: no-repeat;
      background-position: right; 
      background-size:auto 100%; */
      /* background: 100% 100%; */
      /*     
      
     
        */
    } 
    .fts2h{
        color:#F08D17 ;
        margin-top: 13px;
        margin-bottom: 10px;
    }
    .angles{
        color: #F08D17;

font-family: LEMON MILK;
font-size: 88px;
font-style: italic;
font-weight: 300;
margin-left: -45px;
margin-top: -20px;
margin-bottom: -40px;
line-height: normal;
    }

    .angles1{
        color: #F08D17;

font-family: LEMON MILK;
font-size: 88px;
font-style: italic;
font-weight: 300;
margin-top: -50px;
line-height: normal;
margin-left: 100%;
    }

    .tss{
        display: flex;
        justify-content: center;
        text-align: center;
        background-color: #2D2D2E;
        background-image: url(public/fond-carte-v2-plan-de-travail-1-1@2x.png);
        padding-top: 80px;
        padding-bottom: 80px;

    }
    .tts1{
        display: flex;
        margin-top: 80px;
        margin-bottom: 40px;
    }
    .tts11,.tts12,.tts13,.tts14{
        margin: auto;
        /* border: 1px solid white; */
        /* width: 20%; */
        /* height: 80px; */
        text-align: center;
    }
    .h1n{
        color:  #F08D17;
        /* text-align: right; */
        font-family:' Montserrat', sans-serif;
        font-size: 64px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: capitalize; 
    }
    .ttl{
        display: flex;
        justify-content: center;
        margin-bottom: 80px;
    }
    .tts2{
        display: flex;
        margin-top: 40px;
        margin-bottom: 80px;
    }
    .tts21,.tts22,.tts23{
        text-align: center;
        margin: auto;
        /* border: 1px solid; */
    }
    .tts21 h1,.tts22 h1,.tts23 h1{
        color: #F08D17;
    }
    .tts31{
        display: flex;
    }
.tts311{
    width: 30%;
    display: flex;
    justify-items: right;
    justify-content: end
}

.tts3111{
    width: 40px;
    background: var(--#F08D17, #F08D17);
    opacity: 0.5;
    margin-bottom: -90px;
margin-top: 40px;
}
.tts312{
    width: 70%;
    padding-left: 30px;
}
.phsh1{
    color: #F08D17;
}
.ph{
    color: white;
}
.tts32{
    display: flex;
}
.tts321{
    width: 45%;
    height: 40px;
    background: var(--#F08D17, #F08D17);
    opacity: 0.5;
    margin-bottom: 50px;

}
.ros22{
    border: 1px solid #F08D17;
}
.tts4{
    display: flex;
/* width: 1512px; */
padding: 80px 0px;
justify-content: center;
/* align-items: flex-start; */
gap: 80px;
background: #FFF;
}
.adv1 h2,.adv2 h2{
    color: black;
}
.adv1,.adv2{
    text-align: center;
}
#h1n1,#h1n2,#h1n3,#h1n4{
    opacity: 0;
    transition: 2s;
}
#tts21,#tts22,#tts23{
    opacity: 0;
    transition: 2s;
}
.txt{
    margin-left: 13px;
}
.ani2{
    padding-top: 0.6%;
}
.tfs{
    
    /* margin-top: 150px; */
}
.ros22{
    display: none;
}
@media (max-width: 1400px) {
    .tfs {
        /* margin-top: 100px; */
    } 
}

.unthird{
    margin-top: 6%;
}.four{
    margin-top: 6%;
}
.hori_line {
   
    margin-left: -49px;
  
}
.fithfs{
    width: 100%;
    /* border: 1px solid rgb(162, 0, 255); */
    display: flex;
    padding-bottom: 70px;
}
.fithfsl,.fithfsr{
width: 48%;
/* border: 1px solid red; */
padding: 30px;
padding-top: 80px;
}
.fithfsl{
    display: flex;
    padding-right: 0;
    width: 51%;
}
input{
    margin-top: 5px;
    height: 20px;
    border-radius: 10px;
    padding: 10px;
    width: 80%;
}
select{
    /* margin-top: 5px;
    height: 20px; */
    border-radius: 10px;
    padding: 10px;
    width: 80%;
}
textarea{
    margin-top: 5px;
    border-radius: 10px;
    width: 83%;
    margin-bottom: 4px;

}
.ip{
    width: 20px;
    border-radius: 5px;
border: 1px solid var(--White, #FFF);
background: #515151;

}
.sub{
    margin-top: 40px;
    border-radius: 8px;
    color: white;
border: 2px solid var(--#F08D17, #F08D17);
background: rgba(240, 141, 23, 0.50);
color: #FFF;
text-align: center;

/* Title S */

font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 26px; /* 162.5% */
letter-spacing: 0.16px;
text-transform: capitalize;
}
.horline_fith{
    width: 10px;
    height: 100%;
background-color: #F08D17;
    margin: auto;
    margin-right: 0;
    border-radius: 5px;
}
.ani2{
    /* border: 2px solid white; */
}
.fithpage{
    display: none;
}
.fourpage11{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 80px;
}
.fourpage1{
    background: #2D2D2E; 
}
.ds{
    margin-left: 2%;
}
.fourpage12{
    height: 80vh;
    overflow: hidden;
}
.fourpage121{
    /* width: 48%; */
    height: 80vh;
/* border: 1px solid white; */
background: rgba(0, 0, 0, 0.5) url("public/ARCHIKUBIK\ -\ VITRY\ -\ 050.png");
width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: left;
    background-blend-mode: darken;
    transition: 1s;
}
.fourpage121:hover{
  
    height: 82vh;
    cursor: pointer;
    background-size: cover ;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    width: 102%;
    justify-content: left;
    background-blend-mode: darken;

}
.fourpage122{
background: rgba(0, 0, 0, 0.5) url("public/chessy\ 9962.png");

width: 100%;
    height: 80vh;
/* border: 1px solid white; */
    /* margin-left: 4%; */

    background-blend-mode: darken;
    background-size: cover ;
    background-repeat: no-repeat;
    background-position: center;

    display: flex;
    justify-content: left;
    /* background-size: cover; */
    transition: 1s;


}
.fourpage122:hover{
   
    
    height: 82vh;
    cursor: pointer;
    background-size: cover ;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    width: 102%;
    
        background-blend-mode: darken;
        background-size: cover ;
        background-repeat: no-repeat;
        background-position: center;
    
        display: flex;
        justify-content: left;
        /* background-size: cover; */
        cursor: pointer;
    
    
    
    }
.fourh1{
    margin-top: auto;
    margin-left: 30px;
    margin-bottom: 30px;
}
.baimg{
    /* border: 1px solid green; */
    height: 450px;
    width: 600px;
    float: right;
    background-image: url("public/Group 99TEST TEST.svg");
    background-size: 100% 100%;
    margin-top: 40px;
}
.picon1 {
    margin-top: 156px;
    padding-left: 273px;
}
.picon2{
    margin-top: 106px;
    padding-left: 211px;
}
.picon3{
    margin-top: 60px;
    padding-left: 380px;
}
.swiper-slide {
    transition: transform 0.5s ease-in-out;
  }

  .swiper-wrapper.grabbing {
    cursor: grabbing;
  }
.iconsvg {
    width: 17px;
    animation: animate-picon 2s linear infinite;
}

@keyframes animate-picon {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.9);
    }
    100% {
        transform: scale(1);
    }
}
.horifourline{

    display: flex;
    justify-content: center;
    width: 100%;
}
.horifourline1{
    width: 70%;
    height: 15px;
  
    margin-bottom: 60px;
    border-radius: 50px;
    background-color: gray;
    display: flex;
}
.innerhori{
    width: 25%;
    height: 100%;
    border-radius: 50px;
    cursor: pointer;

}
.innerbg{
    background-color: #F08D17;

}
.body{
    overflow-x: hidden;
overflow-y: scroll;
}
.pagefour{
    display: none;
}



span.swiper-pagination-bullet {
    background: white;
    opacity: 2;
    /* padding: 2%; */
    /* margin: 50%; */
}
.swiper .swiper-pagination-bullet-inactive {
    background: rgba(252, 248, 248, 5);
}
span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #F08D17;
}
#secondwhole{
    border: 8px solid blue;
    /* width: 100vh; */
}
.thirdsec,.cl{
    background-color: #2d2d2e;
    
    background-image: url(public/fond-carte-v2-plan-de-travail-1-1@2x.png);
}
.cl{
    padding-top: 40px;
    padding-bottom: 40px;
    overflow: hidden;
}
.testimonial{
    width: 100%;
    
    background-color: #2D2D2E;
}
.test_heading{
    display: flex;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    justify-content: center;
}

.whole_test{
    /* border: 1px solid white; */
    display: flex;

}
.whole_test1,.whole_test2,.whole_test3{
/* border: 1px solid red; */
}
.whole_test1,.whole_test3{
    width: 10%;
  
}
.whole_test2{
    width: 80%;
    padding-bottom: 60px;
}
.whole_test1,.whole_test3{
    display: flex;
    justify-content: center;
}
.pre{
    margin: auto;
}





.testimonial-container {
   
    margin: auto;
    overflow: hidden;
   
    border-radius: 40px;
background: #333;
box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.40);
margin: 20px;
  }

  .testimonial-slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }

  .testimonial-card {
    min-width: 100%;
    box-sizing: border-box;
    
    padding: 50px;
 
  }

  
  .testimonial-cards {
    min-width: 100%;
    box-sizing: border-box;
    
    padding: 50px;
 
  }

  .testimonial-btn {
    cursor: pointer;
    background-color: #4caf50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
  }
  .ggg:hover{
    background-color: #F08D17;
    opacity: 0.5;
  }
  .gggg:hover{
    background-color: #F08D17;
    opacity: 0.5;
  }
  .ggggg:hover{
    background-color: #F08D17;
    opacity: 0.5;
  }
  .hoverissue:hover{
    color: white;
    cursor: default;
    
  }
  .sav{
    overflow-y: scroll;
  }
  .sav_whole,.faire_whole,.ref_whole,.contact_whole{
    width: 99%;
    /* min-height: 00vh; */
    border: 8px solid #F08D17;
    overflow: hidden;
  }
  .sav_hero{
    height: 100vh;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url('public/newhomepic.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: darken;
  }
  .contact_hero{
    height: 100vh;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url(public/PHOTO-2018-12-05-15-34-39\ 1.png);
    background-size: 100% 100%;
    background-position: center;
    background-blend-mode: darken;
  }
  .fair_hero{
    height: 100vh;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(14, 13, 13, 0.7)), url('public/66fd6bccb7cc6035b49ddd310865b77c.jpeg');
    background-size: 100% 100%;
    background-position: center;
    background-blend-mode: darken;
  }

  .ref_hero{
    height: 100vh;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(14, 13, 13, 0.7)), url('public/newref.jpeg');
    background-size:auto 100% ;
    background-position: center;
    background-blend-mode: darken;
    background-repeat: no-repeat;
    background-size: cover;
  }


  .hero_top,.hero_bottom{
    /* border: 1px solid black; */
  }
  .hero_top{
    height: 90px;
    display: flex;
  }
  .hero_bottom{
    height: 110%;
   
  }
  .top_left{
    width: 80px;
    background-color: black;
    padding-bottom:20px ;
  }
  .top_bottom{
    width: 80px;
    background-color: #F08D17;
    height: 100%;
    margin-left: auto;
  }
  .top_bottom img:hover{
    cursor: pointer;
  }
  .sav_menu{
    background-color: #F08D17;
    width:339px ;
     margin-left: 90px;
     border: 1px solifood #F08D17;
     margin-top: -90px;
     height: 100vh;
     transition: 2s;
     border: 1px solid #F08D17;
  }
  .sav_savi{
    margin-top: 100px;
    padding: 20px;
  }
  .sav_savi p,.savi p{
    font-weight: 1000;
    margin-bottom: 15px;
    font-size: 23px;
    cursor: pointer;
    color: #000000;
  }
  .sav_savi p:hover{
    color: white;
  }
  .sav_savi a,.savi a{
    text-decoration: none;
  }
  .hero_bottom .txt h1{
  
    font-size: 68px;
  }
  .sav_li{
    width: 8px;
    background-color: #F08D17;
    height: 160px;
    margin-bottom: -15px;
  }
  .sav_lii{
    width: 160px;
    background-color: #F08D17;
    height: 8px;
    margin-left: -40px;
  }
  .ff11 a{
    text-decoration: none;
    color: white;
  }
  .ani4,.ani2{
    /* z-index: 1; */
    width: 41.7vw;
  }
  .second{
    height: 80%;
  }
  .nav{
    /* height: 99vh; */
  }
  .active-button{
    border-bottom: 1px solid white;
    /* transition: 5s; */
  }
  .ds:hover{
cursor: pointer;
border-bottom: 1px solid;
  }

  .firstsec111,.firstsec333{
    width: 60%;
    margin: auto;
    height: 60px;

  }
  .firstsec222{
    width: 50%;
    margin: auto;
    margin-top: 2%;
    margin-bottom: 2%;
    text-align: center;
  }
  .ps1{
    margin-top: 0;
  }
  .tall{
    width: 15px;
    height: 137px;
    background-color: #F08D17;
    margin-left: 4%;
    margin-bottom: -100px;
  }
  .lam{
    width: 250px;
    height: 15px;
    background-color: #F08D17;

  }
  .tail1{
    width: 15px;
    height: 137px;
    background-color: #F08D17;
    margin-left: 79%;
    margin-bottom: -54px;
  }
  .lam1{
    width: 250px;
    height: 15px;
    background-color: #F08D17;

  }
  .firstsec333{
    display: flex;
    justify-content: right;
  }

  .secline{
    animation: animate-pl1 1s linear forwards;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 2s;
}
@keyframes animate-pl1 {
  
    0%{
    margin-bottom: 20px
    }
    100%{
            margin-bottom: -30px
    }
}
.tts21,.tts22,.tts23{
    width: 350px;
}
h1,h2,h3,h4,h5 {
    font-family: 'LEMON MILK Light', sans-serif;
    font-weight: 300;
  }
  .pissue{
    color:black;
}
.wsePaf22res{
    display: none;
    width: auto;
    height: 40vh;
}
.ref_slide{
    width: 48% !important;
    margin: 10px;
    overflow: hidden;
}
.fourpage122{
    width: 100%;
}
.swiper-ref{
    width: 87% !important;
}
#blur13{
    display: none ;
}
#blurres13{
    display: none ;
}
#blurs{
    display: none;
}
.nav_res_right{
    display: flex;
}
.fts2{
    max-width: 522px;
    margin-right: 65px;
}
.angles1{
    margin-left: 81%;
}
.respon{
    display: none;
}


.fts1{
    width: 395px;
}
.fts2p2{
    font-family: 'Century Gothic', sans-serif;
    font-weight: 20;;
}
.fts2p1{
    font-family: 'Century Gothic', sans-serif;
    font-weight: 20;
    font-style: italic;
}
.whole_nav_res{
    display: none;
}
.tfs{
    margin-top: 30px;
}
.hoverissue{
    font-family: 'Century Gothic', sans-serif;
    font-weight: 300;
}
.ps1,.ps2{
    max-width: 653px;
}
#drop_nav{
    display: none;
}
.h1val{
    font-size: 68px !important;
}
#h1p2{
    /* font-size: 68px !important; */

}
.sav_hero{
    height: 90vh;
}
.linenos{
    height: 90.5vh !important;

}
.preloader_gif{
    height: 100%;
}
.fourpage1res{
    display: none;
}
.fourpage1full{
    display: block;
}
.first_slider:hover{
    cursor: default;
    height: 120%;
    width: 120%;
}
.nav {
    width: 364px;
    margin-left: -276px;
}
.log {
    width: 358px;
}
.projectline1{
    width: 55%;
    height: 8px;
    background-color: #F08D17;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    margin-top: 20px;
}
.projectHeading1 {
    display: flex;
   padding-left: 65px;
    width: 60%;
    margin-top: 0vh;
}
.projectdetail1 {
    width: 100%;
    /* display: flex; */
    padding: 60px;
    /* height: 40vh; */
    padding-top: 25px;
}
.adp {
   
    padding: 60px;
   
    padding-top: 50px;
}
.projectWhole1 {
    height: 100%;
    width: 99%;
    overflow: scroll;
    border: 8px solid #F08D17;
    background-color: url(public/fond-carte-v2-plan-de-travail-1-21@2x.png);
    background-color: #2d2d2e;
    min-height: 100vh;
}
#blur14,#blur15{
    display: none;
}
@media(max-width:1020px){
#footer{
    display: none !important;
}
#blurs{
    display: none;
}
.upper{
    display: none;
}
#blurss{
    display: block;
}
.whole_nav_res{
    display: block;
}
.swiper-wrapper{
    padding-bottom: 5vh
}
.hero_bottom .txt h1 {
    font-size: xx-large;
}
.tfs{
   justify-content: center;
    padding: 20px;
    width: auto;

}
.corr{
    margin-top: 20px;
    margin-bottom: 20px;
}
.third1 ,.third2 ,.third3 {
margin-bottom: 40px;
}

.fts1{
    display: none;
}
.fts2 {
    width: auto;
    padding: 30px;
    margin-right: 0;
}
.thirdsec{
    display: block;
    padding-bottom: 60px;
}
.third1, .third2, .third3 {
    width: auto;
    
}
.tts1{
 display: block;

}
.tts11,.tts12,.tts13,.tts14{
    margin-bottom: 20px;
}
.skills{
    width: 90%;

}
.barsi{
    padding-bottom: 60px
}
.tts2 {
display: block;
}
#tts21, #tts22, #tts23{
    margin-bottom: 30px;
}
.firstsec222 {
    width: 75%;
}
.horolres{
    display: none;
}
.firstsec111, .firstsec333 {
    width: 90%;
}
.firstsec1, .firstsec2, .firstsec3 {
    width: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
.secondsec{
    display: block;
    height: 100%;
}
.testimonial-card,.testimonial-cards {
    
    padding: 22px;
}
.firstfooter {
    display: none !important;
}
.sav_whole{
    border: 9px solid #F08D17;
}
.ps1res{
    display: none;
}
.sav_hero {
    height: 100vh;
}


.sav_li{
    margin-top: -70px !important ;
}
.wsePaf22res{
    display: block;
}
.picon3 {
    margin-top: 27px;
    padding-left: 211px;
}
.picon2 {
    margin-top: 68px;
    padding-left: 99px;
}
.picon1 {
    margin-top: 173px;
    padding-left: 144px;
}
.baimg {
    border: 0.5px solid #2b2b2c;
    height: 450px;
    width: 322px ;
    float: none;
    
    margin-top: 0px;
}
.fithfs {
    display: block;
}
.fithfsl{
    width: auto;
}
.fithfsr{
    width: auto;
}
.contact_hero{
    background-size: cover;
}
.liresp{
    display: none;
}
.contact_hero{
  height: 80vh;
}
.fourpage121,.fourpage122{
    height: 40vh;
}
.fourh1 h1{
    font-size: 15px;
}
.fourh1 p{
    font-size: 8px;
}
.fourh1{
    margin-left: 15px;
}
.ds {
    margin-left: 2%;
    font-size: 10px;
    margin-bottom: 2%;
}
#mySwiper{
    height: auto !important;
}
.heres{
    margin-bottom: 25px;
}
.ref_hero{
    height: 80vh;
}
.projectHeading{
width: 100%;
}
.projectdetail{
    padding: 0px;
    display: block;
    height: auto;
}
.projectdetail .left{
    width: 100%;
    margin-left: 20px;
}
.projectWhole{
    height: auto;
}
.flo_res{
    float: none !important;
}
.projectdetail .right {
    width: auto;
    margin-top: 30px;
}
.projecth1 {
    
    font-size: 32px;
   
}
#blur12,#blurres12{
    height: auto !important;
}
#blur13,#blurres13{
    height: auto !important;
}
.nav{
    display: none;
}
.footer{
    display: none;
}
#innerDiv{
    padding: 0px !important;
}
/* .ani1, .ani3, .first, .second,.third,.four {
    width: 88vw;
    height: 93vh;
} */
/* .line{
    height: 90vh;
} */
.upper{
    display: none;
}
.res_nav{
    height: 80px;
    width:96,5vh;
border: 2px solid #F08D17;
    background-color: #F08D17;
    position: relative;
display: flex;
}.nav_res_left{
    background-color: #000000;
    padding: 10px;
    padding-top: 15px;
}
.nav_res_right{
    margin-left: auto;
}
.drop_nav{
    background-color: #F08D17;
    /* display: flex; */
    justify-content: center;
    text-align: center;
    padding: 30px;
    height: 153px;
    overflow: hidden;
    transition: 2s;
    margin-top: -100%;
}
.drop_nav a{
    margin-top: 70px !important;
    z-index: 9999 !important;
    

}
.whole_nav_res{
    height: 80px !important;
    z-index: 9999 !important;
    position: relative;
   
    transition: 2s;
    /* overflow: hidden; */
}

.first{
    width: 48% ;
    height: 95vh ;
    margin: auto;
margin-top: 1vh ;
}
.ani1{
    width: 100% !important;
    margin-left: 0px !important;
    margin: 0px;
    display: flex;
}
.second {
    height: 95vh;
    width: 48%;
    margin: auto;
margin-top: 1vh ;

}
.ani4{
    width: 100% !important;
    display: flex;
}
.third{
    width: 48%;
    margin: auto;
    height: 95vh;
margin-top: 1vh;

}
.second{
    background-size: cover !important;
}
.third{
    background-size: cover !important;

}
.wsePaf{
    padding: 3%;
}







}

.swiper-pagination{
    top: 84vh !important;
}

@media (max-width:860px) {
    .swiper-pagination{
        top: 84vh !important;
    }
    .wsePaf{
        display: block;
    } 
    .wsePaf12,.wsePaf1{
width: 100%;
    } 
    .respon{
        display: block;
        opacity: 1;
    } 
    .wse,.wse2,.respon{
        width: 100%;
        background-size: cover;
        height: 40vh;
    }
  
}

/* // For  Valeurs  // */

@media(max-width:768px){
   
    #footer{
        display: none;
    }
    .horolres{
        display: none;
    }
    #blurs{
        display: block;
    }
    #blurss{
        display: none;
    }
    .swiper-wrapper{
        padding-bottom: 5vh
    }
    .hero_bottom .txt h1 {
        font-size: xx-large;
    }
    .tfs{
        display: block;
        padding: 20px;
        width: auto;
    }
    .fts2 {
        width: auto;
        padding: 30px;
    }
    .thirdsec{
        display: block;
        padding-bottom: 60px;
    }
    .third1, .third2, .third3 {
        width: auto;
        
    }
    .tts1{
     display: block;

    }
    .tts11,.tts12,.tts13,.tts14{
        margin-bottom: 20px;
    }
    .skills{
        width: 90%;

    }
    .barsi{
        padding-bottom: 60px
    }
    .tts2 {
    display: block;
    }
    #tts21, #tts22, #tts23{
        margin-bottom: 30px;
    }
    .firstsec222 {
        width: 75%;
    }
    .firstsec111, .firstsec333 {
        width: 90%;
    }
    .firstsec1, .firstsec2, .firstsec3 {
        width: auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .secondsec{
        display: block;
        height: 100%;
    }
    .testimonial-card,.testimonial-cards {
        
        padding: 22px;
    }
    .firstfooter {
        display: none;
    }
    .sav_whole{
        border: 9px solid #F08D17;
    }
    .ps1res{
        display: none;
    }
    .sav_hero {
        height: 90vh;
    }
    .wsePaf{
        display: block;
        padding: 5%;
    }
    .wsePaf1{
        width: auto;
    }
    .wsePaf2{
        width: auto;
        height: 40vh;
    }
    .wsePaf12{
        width: auto;
    }
    .fair_hero{
        height: 80vh;
        background-size: cover;
    }
    .sav_li{
        margin-top: -70px !important ;
    }
    .wsePaf22res{
        display: block;
    }
    .picon3 {
        margin-top: 27px;
        padding-left: 211px;
    }
    .picon2 {
        margin-top: 68px;
        padding-left: 99px;
    }
    .picon1 {
        margin-top: 173px;
        padding-left: 144px;
    }
    .baimg {
        border: 0.5px solid #2b2b2c;
        height: 450px;
        width: 322px ;
        float: none;
        
        margin-top: 0px;
    }
    .fithfs {
        display: block;
    }
    .fithfsl{
        width: auto;
    }
    .fithfsr{
        width: auto;
    }
    .contact_hero{
        background-size: cover;
    }
    .liresp{
        display: none;
    }
    .contact_hero{
      height: 80vh;
    }
    .fourpage121,.fourpage122{
        height: 40vh;
    }
    .fourh1 h1{
        font-size: 15px;
    }
    .fourh1 p{
        font-size: 8px;
    }
    .fourh1{
        margin-left: 15px;
    }
    .ds {
        margin-left: 2%;
        font-size: 10px;
        margin-bottom: 2%;
    }
    #mySwiper{
        height: auto !important;
    }
    .heres{
        margin-bottom: 25px;
    }
    .ref_hero{
        height: 80vh;
    }
    .projectHeading{
width: 100%;
    }
    .projectdetail{
        padding: 0px;
        display: block;
        height: auto;
    }
    .projectdetail .left{
        width: 100%;
        margin-left: 20px;
    }
    .projectWhole{
        height: auto;
    }
    .flo_res{
        float: none !important;
    }
    .projectdetail .right {
        width: auto;
        margin-top: 30px;
    }
    .projecth1 {
        
        font-size: 32px;
       
    }
    #blur12,#blurres12{
        height: auto !important;
    }
    #blur13{
        height: auto !important;
    }
    .nav{
        display: none;
    }
    .footer{
        display: none;
    }
    #innerDiv{
        padding: 0px !important;
    }
    /* .ani1, .ani3, .first, .second,.third,.four {
        width: 88vw;
        height: 93vh;
    } */
    /* .line{
        height: 90vh;
    } */
    .upper{
        display: none;
    }
    .res_nav{
        height: 80px;
        width: 96.5vh;
border: 2px solid #F08D17;
        background-color: #F08D17;
        position: relative;
display: flex;
    }.nav_res_left{
        background-color: #000000;
        padding: 10px;
        padding-top: 15px;
    }
    .nav_res_right{
        margin-left: auto;
    }
    .drop_nav{
        background-color: #F08D17;
        /* display: flex; */
        justify-content: center;
        text-align: center;
        padding: 30px;
        height: 153px;
        overflow: hidden;
        transition: 2s;
        margin-top: -100%;
    }
    .drop_nav a{
        margin-top: 70px !important;
        z-index: 9999 !important;
        

    }
    .whole_nav_res{
        height: 80px !important;
        z-index: 9999 !important;
        position: relative;
       
        transition: 2s;
        /* overflow: hidden; */
    }
    /* #blurs{
        height: 80vh !important;
        width: 90%;
        margin-top: 3.5vh;
    } */
    /* .ani1,.ani3,.ani4,.ani5{
        margin-left: 0px !important;
        width: 95%;
    height: 100%;
    margin: 2.5% !important;
    margin-top: 0px !important;
    }
    #first{
        width: 90vw;
    } */
    /* body{
        overflow-y: scroll !important;
        overflow-x:hidden ;
    }
    #outerDiv{
        overflow-y: scroll !important;
        height: 100% !important;
    }
    .line{
        height: 39vh;
    }
    .first,.second,.third{
        height: 40vh !important;
        margin-top: 5vh;
        width: 100%;
        margin-left: 0px !important;
        margin-top: 6% !important;
    }
    .second{
        margin-top: 0px !important;
    } */
    .first{
        width: 96% ;
        height: 95vh ;
        margin: auto;
 margin-top: 1vh ;
    }
    .ani1{
        width: 100% !important;
        margin-left: 0px !important;
        margin: 0px;
    }
    .second {
        height: 95vh;
        width: 96%;
        margin: auto;
 margin-top: 1vh ;

    }
    .swiper-pagination{
        top: 84vh !important;
    }
    .spi{
        top: 41vh;
    }
    .ani4{
        width: 100% !important;
    }
    .third{
        width: 96%;
        margin: auto;
        height: 95vh;
 margin-top: 1vh;

    }
    .second{
        background-size: cover !important;
    }
    .third{
        background-size: cover !important;

    }
    .horolres{
        display: none;
    }
    .lineval{
        height: 70vh !important;
    }
    .h1val{
        font-size: 45px !important;
    }
    #h1p2{
        font-size: 45px !important;

    }
    .sav_hero{
        height: 100vh;
    }
    .linenos{
        height: 92.5vh !important;

    }
    #h1p4{
        font-size: 45px !important;
        
    }
    .linecon{
        height: 95.5vh !important;

    }
    .spi{
        top: 41vh !important;
    }
    .firstpage{
        display: none;
    }
    .pagefour{
        display: none;
    }
    .secondpage{
        display: none;
    }
    .thirdpage{
        display: none;
    }
    .fithpage{
        display: none;
    }
    #h1{
        font-size: 45px !important;
    }
    .preloader_gif{
        height: auto;
        margin: auto;
        margin-top: 50%;
    }
    #sitelogores{
        opacity: 0;
    }
    .ref_slide{
        width: 100% !important;
        margin: 0px;
        overflow: hidden;
    }
    .fourpage1res{
        display: block;
    }
    .fourpage1full{
        display: none;
    }
    .h2p2,.h2p2n ,.h2p22{
        font-size: 2rem;;
    }
    /* 
    .li{
        margin-left: 12px !important;
    } */

   
}
#loader{
    display: none;
    height: 100vh;
    justify-content: center;
    width: 100%; 
    background-color: black;
}


.testimonial{
    display: none !important;
}