html{ overflow-x: hidden;          margin: 0;
  border: 0;
  width: 100%;
}

* {
box-sizing: border-box;
}


#coi1SpanPhone-Hidden-space{display:block}
.coi1SpanPhone-Hidden{display:none}
.coiAlignedspanMobile-Hidden{display:none}




.padding{padding:80px 0;  display:flex;     -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}



@media screen and (max-width: 768px) {
  .flex-item1{ order:2} 

  .flex-item2 { order: 1;  border:3px solid red}
}






#fixed{background: url("paris.jpg") no-repeat center center fixed;
display:table;
height:60%; 
position: relative;
width:100%; 
background-size:cover; 


}




header{display:flex; justify-content: flex-start; height:85px; align-items: center; padding:20px 1%; top:0; width:100%; position:fixed; border:2px solid #f8f9fa;
z-index:100; background-color:white!important }
header img{width:230px; max-width:100%; height:auto; margin-left:30px;}



.logo{cursor:pointer; max-height:50px; width:190px; }
.nav-links{margin-top:10px}
.nav-links li{display:inline-block; padding:0px 15px;}
.nav-links li:nth-child(1){padding:0 20px 0 0;}

.nav-links li a{transition: all 0.3s ease 0s; font-family: 'poppins', sans-serif; font-size:15px; color:black; text-transform: uppercase;  text-decoration: none;}
.nav-links li a:hover{color:#ffbf00; font-weight: 600;}
.nav-links li a:hover::after{color:#151515; font-weight:400}




.open{display:none}
.content{display:none}


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

position: relative;
display:block;
margin-left:-70px;
font-size:20px;

}


.content{background-color:white; width:768px;  margin-top:15px;  list-style-type: none;  position: absolute; right:0;
}
.content li{text-align: center; padding:4px; }
.content li::after{width:100%; height:15px; background-color:black}

.content1::after{ border-bottom:1px solid #DDDDDD; height:1px; content:"";  margin-top:15px; display:block }
.content2::after{ border-bottom:1px solid #DDDDDD; height:1px; content:"";  margin-top:15px; display:block }
.content3::after{ border-bottom:1px solid #DDDDDD; height:1px; content:"";  margin-top:15px; display:block }
.content4::after{ border-bottom:1px solid #DDDDDD; height:1px; content:"";  margin-top:15px; display:block }
.content5::after{ border-bottom:1px solid #DDDDDD; height:1px; content:"";  margin-top:15px; display:block }


#openContent + #myContent {
display:none;
}

#openContent:checked + #myContent {
display:block;
}

}




.open2{display:block; font-family: 'poppins', sans-serif; font-size:15px; color:black; text-transform: uppercase;  }
.open2:hover{color:#ffbf00; font-weight: 600; cursor: pointer;}
/* form close button */ 
.open3{display:block; font-size:35px; color:#3f3f3f; float:right; margin-right:40px; margin-top:5px; width:50px; cursor: pointer;}

.content2{display:none}


  
  .content2{background-color:white; width:80vw; height:95vh;  margin-top:40px;   position: absolute; margin-left:-654px; 
  }
  
  
  
  #openContent2 + #myContent2 {
  display:none;
  }
  
  #openContent2:checked + #myContent2 {
  display:block;
  }
  


.contact-form-head h3{font-family: 'poppins', sans-serif; font-size:30px; color:#3f3f3f; font-weight:700; margin-left:75px; margin-top:80px; line-height:45px}
.contact-form-head p{font-family: 'poppins', sans-serif; font-size:18px;   text-align:justify; padding:13px;
                     margin:18px 69px 0px 68px; word-spacing: -1px; line-height: 35px; }


.contact-form {margin-top:-155px;}
.contact-form h3{font-family: 'poppins', sans-serif; font-size:21px; position: relative;}
#form-asterisk{font-size:9px; color:#3f3f3f; margin-left:8px; margin-top:4px; position: absolute; }






.Affiliation-select{width:32vw; height:6vh; margin-top:10px;   text-indent: 10px;}

.FirstNameSection{margin-top:15px; position: relative; display: inline-block;}
.FirstName{width:15vw; height:5vh;}
.FirstName:focus {color:black}

.LastNameSection{position: absolute ; display: inline-block; margin-left:123px}
.LastName{width:15vw; height:5vh; margin-left:15px}
.LastName:focus {color:black}




.EmailSection{ position: relative; margin-top:15px;  display: inline-block; }
.FormEmail{width:15vw; height:5vh;}
.FormEmail:focus {color:black}

.PhoneSection{  position: absolute; display: inline-block;  margin-left:179px }
.FormPhone{width:15vw; height:5vh;  margin-left:15px}
.FormPhone:focus {color:black}



.CompanySection{ position: relative; margin-top:15px;  display: inline-block;}
.Company{width:15vw; height:5vh;}
.Company:focus {color:black}

.OccupationSection{position: absolute; display: inline-block;  margin-left:130px }
.Occupation{width:15vw; height:5vh;  margin-left:15px}
.Occupation:focus {color:black}





.CountrtSection{margin-top:15px}
.country-select{width:32vw; height:6vh; margin-top:10px;   text-indent: 10px;}


.MessageSection{margin-top:15px}
.FormMessage{width:32vw; height:12vh;}
.FormMessage:focus {color:black; }
.MessageSection::placeholder { color:red; background-color:red}


#formbutton{margin-top:15px; background-color:#ffbf00; border:none; color:black; width:100px; height:40px; font-family: 'poppins', sans-serif;
             font-size:18px; outline: none;}

   #formbutton:focus{ box-shadow: none; }
          

#formbutton:active, #formbutton:focus {border:none; outline-style: none;  }



@media screen and (max-width: 1366px) {
.contact-form{margin-top:-206px}
.Affiliation-select{margin-top:0px; height:5vh}

.FirstNameSection{margin-top:5px}

.EmailSection{margin-top:5px}

.CompanySection{margin-top:5px}

.CountrtSection{margin-top:5px}
.MessageSection{margin-top:5px}
#formbutton{margin-top:5px}
.contact-form-head h3{margin-top:-99px}
.contact-form-head p{padding:5px}
.open3{margin-top:-7px; margin-right:-23px}

.country-select{height:6vh}
.FormMessage{height:7vh}
}







@media screen and (min-width:1015px) and (max-width: 1064px) {

.logo{margin-left:9px;}
}





@media screen and (min-width:768px) and (max-width: 1015px) {


.nav-links{display:none; }
.open {

position: relative;
display:block;
margin-left:600px;
font-size:20px;
}





@media screen and (min-width:868px) and (max-width: 930px) {

.open { margin-left:500px;}
}

@media screen and (min-width:768px) and (max-width: 868px) {

.open { margin-left:450px;}
}

@media screen and (min-width:768px) and (max-width: 868px) {

.open { margin-left:450px;}
}



  

.content{background-color:white; width:100%;  list-style-type: none;  position: absolute;  right:0; padding:20px
}

.content li{text-align: center; cursor: pointer; }
.content li:hover{background-color:#ffbf00; color:white; width:100%; height:100%}
.content li a:hover{ color:white; text-decoration: none;}
.content li a{font-family: 'Raleway', sans-serif; font-size:13px; color:rgb(21, 21, 21); font-weight: 500; line-height:21px; text-transform: uppercase;}
.content li::after{width:100%; height:15px; background-color:black}

.content1::after{ border-bottom:1px solid #DDDDDD; height:1px; content:"";  margin-top:15px; display:block }
.content2::after{ border-bottom:1px solid #DDDDDD; height:1px; content:"";  margin-top:15px; display:block }
.content3::after{ border-bottom:1px solid #DDDDDD; height:1px; content:"";  margin-top:15px; display:block }
.content4::after{ border-bottom:1px solid #DDDDDD; height:1px; content:"";  margin-top:15px; display:block }
.content5::after{ border-bottom:1px solid #DDDDDD; height:1px; content:"";  margin-top:15px; display:block }





#openContent + #myContent {
display:none;
}

#openContent:checked + #myContent {
display:block;
}

}




@media screen and (min-width: 795px) and (max-width:905px) {

.nav-links{  white-space: nowrap; font-family: 'Raleway', sans-serif;
}
}





@media screen and  (max-width:768px) {
body{overflow-x:hidden;}
.nav-links{position: absolute; right:0px; height:92vh; top:8vh;
            display:flex; flex-direction: column; align-items:center; 
              width:50%; transform:translateX(100%); border:none;
         }

.header{border:none}
.nav-active{transform: translateX(0%);}


.content{background-color:white; width:100%; list-style-type: none;  position: absolute;  right:0;  
}

.content li{text-align: center; cursor: pointer;  }
.content li:hover{background-color:#ffbf00; color:white; border-bottom: none}
.content li a:hover{ color:white; text-decoration: none; }
.content li a{font-family: 'Raleway', sans-serif; font-size:13px; color:rgb(21, 21, 21); font-weight: 500; text-transform: uppercase;}
.content1::after, .content2::after, .content3::after, .content4::after, .content5::after, .content6::after, .content7::after, .content8::after {  display:none }

}



#projectsimg{width:100%; max-height:600px!important}

.block{height:1200px; background-color:#EEE; margin-bottom:20px; padding:50px 0;
   text-align:center}





   #demo{width:100%; height:600px; margin-top:40px }
   .carousel-inner{width:100%; height:600px; max-height:600px!important} }
   
   
   
   
   
   .carousel-inner img {
       width: 100%;
       max-width: 100%;
       max-height:600px!important}
   
   
   
   
   .carousel-control-prev-icon {
       background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='silver' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
       height: 40px;
       width: 35px;
   
   }
   
   .carousel-control-next-icon {
       background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='silver' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
       height: 40px;
       width: 35px;
   
       }
   
   
   
       .carousel-indicators li{ height:4px;margin:10px; background-color:black;}
   
       .carousel-indicators .active{
           background-color: white; 
       }
       
   
   
   
         .overlay-main{ position: relative;  box-sizing:border-box; width: 100%; margin-top:3px;
           height:790px;          
         background-image: url('https://res.cloudinary.com/dpkc4qim2/image/upload/v1586557210/df02kjdgejsv5sdrxnp1.jpg');
           background-position:center center !important; background-repeat: no-repeat; 
             background-size:cover; background-attachment: fixed; }
         
         .homeoverlay{ background-color:rgba(44,62,80,0.6); background-image:url('../pictures/courtyard.jpg');
         
         top:0; left:0; width:100%; height:100%; background-repeat:repeat; position: absolute;}
       
       
   
   
   
      
   .solution-overlay-content{  text-align: center; margin-top:350px; color:white; }
         #solutionani1{  animation-duration: 3s;  font-family: 'poppins', sans-serif; font-weight:600; font-size:4vw; 
           display:inline-block; tfext-align:center; margin:15px;  margin-left:-5px;}
         #solutionani2{  animation-duration: 1s;   animation-delay: 2s;  font-family: 'poppins', sans-serif; font-weight:600; font-size:4vw; display:inline-block;
                           margin:15px}
         #solutionani3{  animation-duration: 1s;   animation-delay: 3s;  font-family: 'poppins', sans-serif; font-weight:600; font-size:4vw;  display:inline-block;
                 margin:15px}
         #solutionani4{  animation-duration: 1s;   animation-delay: 4s;  font-family: 'poppins', sans-serif; font-weight:600; font-size:4vw;  display:inline-block;
           margin:15px}
         #solutionani5{  animation-duration: 2s;   animation-delay: 5s;  font-family: 'poppins', sans-serif; font-weight:600; font-size:4vw; display:inline-block;
                 color:#ffbf00}
   
   
   
                 @media screen and (min-width:768px) and (max-width: 1000px) {
                   #solutionani1,   #solutionani2,   #solutionani3, #solutionani4{margin:60px; display:block}
   
                   #solutionani1{margin-top:-160px}
                   #solutionani1 span,  #solutionani2 span,  #solutionani3 span,  #solutionani4 span {display:none}
                 }
   
                 @media screen and  (max-width: 768px) {
                   #solutionani1,   #solutionani2,   #solutionani3, #solutionani4{margin:60px; display:block}
   
                   #solutionani1{margin-top:-160px}
                   #solutionani1 span,  #solutionani2 span,  #solutionani3 span,  #solutionani4 span {display:none}
                 }
   
   
   
   
   .projectcontent h1{font-family: 'poppins', sans-serif; font-weight:600; font-size:35px; text-transform: uppercase; margin-top:45px; text-align:center; position:relative  }
   .projectcontent h1::before{content:""; width:470px; height:2px; background-color:#ffbf00; position: absolute; margin-top: -10px;}
   .projectcontent h1::after{content:""; width:470px; height:2px; background-color:#ffbf00; position: absolute; margin-top: 50px; margin-left:-465px}
   
   
   .procont1{width:100%;}

   .procont1-phone{display:none}
   .procont2-phone{display:none}

   .procont1 h3{font-family: 'poppins', sans-serif;  font-size:22px;  margin-left:190px; margin-top:48px; font-weight:600; position: relative; }
   .procont1 h3::before{content:""; width:163px; height:2px; background-color:#ffbf00; position: absolute; margin-top: -13px; margin-left:-42px}
   .procont1 h3::after{content:""; width:163px; height:2px; background-color:#ffbf00; position: absolute; margin-top: 38px; margin-left:-117px}
   
   
   
   .procont1 p{font-family: 'poppins', sans-serif;  font-size:18px; width:100%; line-height:35px;  border: 0; text-align:justify; padding:14px; margin-top:28px;
       margin-left:-40px; 
       outline: 0;
       vertical-align: baseline}
   
   
   
       .procont2 h3{font-family: 'poppins', sans-serif;  font-size:22px; margin-top:48px; font-weight:600; margin-left:190px;  }
       .procont2 h3::before{content:""; width:163px; height:2px; background-color:#ffbf00; position: absolute; margin-top: -13px; margin-left:-13px}
       .procont2 h3::after{content:""; width:163px; height:2px; background-color:#ffbf00; position: absolute; margin-top: 38px; margin-left:-158px}
       
       .procont2 p{font-family: 'poppins', sans-serif;  font-size:18px; width:100%; line-height:35px;  border: 0; text-align:justify;  padding:2px; margin-top:41px;
           margin-left:-10px; 
           outline: 0;
           vertical-align: baseline}
       
   .proshare p{margin-left:-20px; display:inline-block;  text-decoration: none; margin-top:20px}
       .proshare p::before{position: absolute; width:100%; height:1px; background-color:#d5d5d5; content:""; margin-bottom:20px; margin-left:-20px}
       .proshare p::after{ position: absolute; width:100%; height:1px; background-color:#d5d5d5; margin-top:40px; content:""; margin-left:-70px}
   
   
   
   
   .tt1span h3{margin-top:20px; font-family: 'poppins', sans-serif;  font-size:16px;}
   
   
   
       .ttest{text-decoration: none; list-style-type: none; display:inline-block; width:100%; margin-left:-66px} 
   
       #tt1{position:relative;  width:100%;}
           .tt1::before{position: absolute;  width:1110px;  height:1px; background-color:#d5d5d5; content:"";  margin-top:4px;   outline: 0;
               padding: 0;
         }
   
   
   
   
       .ttest li{display:inline-block; }
         .ttest li i{ margin-left:20px}
   .ttest li a{color:black}
   .ttest li a:hover{color:#ffbf00}
   
       .tt2{position: relative; width:100%; }
       .tt2::after{position: absolute;  width:1110px; height:1px; background-color:#d5d5d5; content:""; left:0; margin-top:-12px}
   
   
     
       @media screen  and (max-width: 1100px) {
   
   
       .carousel-indicators {display:none}
       }
   
   
       @media screen  and (min-width:1000px) and (max-width: 1122px) {
   
         .procont1 p{margin-left:7px;}
         .procont2 p{margin-left:13px;}
   
       }
   
   
       @media screen  and (max-width: 992px) {
   
         .procont2 h3{margin-left:102px}
       }
   
   
       @media screen  and (min-width:768px) and (max-width: 1000px) {
   
         .procont1 p{margin-left:7px; padding:0px; word-spacing: -1px; }
         .procont2 p{margin-left:13px; padding:0px; word-spacing: -1px; margin-top:29px}
         .procont1 h3{margin-left:141px}
   
       }
   
   
   
       @media screen  and (min-width:768px) and (max-width: 1180px) {
   
         .procont1 h3{margin-top:-68px}
         .procont2 h3{margin-top:-68px}
   
       }
   
   
   
       @media screen and (min-width:668px) and (max-width: 768px) {
         .procont1 h3{margin-top:-163px; margin-left:226px;}
         .procont1 p{margin-left:7px} 
   
       }
   
   
       @media screen  and (max-width: 668px) {
         .procont1 h3{margin-top:-216px; margin-left:204px;}
         .procont1 p{margin-left:7px} 
   
       }
   
       @media screen  and (max-width: 600px) {
         .procont1 h3{margin-top:-220px; margin-left:204px;}
         .procont1 p{margin-left:7px} 
   
       }
   
   
   
   
   
       
       @media screen  and (max-width: 768px) {
   
   
       .carousel-control-next-icon, .carousel-control-prev-icon{margin-top:-232px}
   
         .procont2 h3{margin-left:190px;}
   
       }
   
       
   
   
       @media screen  and (max-width: 668px) {
         .procont2 h3{ margin-left:204px;}
         .procont2 p{margin-left:7px} 
         .tt1span h3 {margin-left:51px;}
   
       }
   
       @media screen  and (max-width: 600px) {
         .procont2 h3{ margin-left:157px;}
         .procont2 p{margin-left:7px} 
   
       }
   
   
   
   
   
       
   
   
   
   
   
       /* project2 */ 
   
   .procont1-p2-phone{display:none}
   .procont2-p2-phone{display:none}

       .project2content h1{font-family: 'poppins', sans-serif; font-weight:600; font-size:35px; text-transform: uppercase; margin-top:20px; text-align:center; position:relative }
   
       .project2content h1::before{content:""; width:774px; height:2px; background-color:#ffbf00; position: absolute; margin-top: -10px;}
       .project2content h1::after{content:""; width:774px; height:2px; background-color:#ffbf00; position: absolute; margin-top: 50px; margin-left:-773px}
       
   
   
   
   .procont1-p2{width:100%;}
   
   .procont1-p2 h3{font-family: 'poppins', sans-serif;  font-size:22px;  margin-left:190px; margin-top:50px; font-weight:600; position: relative;}
   .procont1-p2 h3::before{content:""; width:163px; height:2px; background-color:#ffbf00; position: absolute; margin-top: -13px; margin-left:-42px}
   .procont1-p2 h3::after{content:""; width:163px; height:2px; background-color:#ffbf00; position: absolute; margin-top: 38px; margin-left:-117px}
   
   
   .procont1-p2 p{font-family: 'poppins', sans-serif;  font-size:18px; width:100%; line-height:35px;  border: 0; text-align:justify;  margin-top:40px;
       margin-left:-40px; 
       outline: 0;
       padding:0;
       word-spacing:-1px}
   
   
   
   
   
   
   
       .procont2-p2 h3{font-family: 'poppins', sans-serif;  font-size:22px;  margin-left:190px; margin-top:50px; font-weight:600; position: relative;}
       .procont2-p2 h3::before{content:""; width:163px; height:2px; background-color:#ffbf00; position: absolute; margin-top: -13px; margin-left:-16px}
       .procont2-p2 h3::after{content:""; width:163px; height:2px; background-color:#ffbf00; position: absolute; margin-top: 38px; margin-left:-154px}
       
       .procont2-p2 p{font-family: 'poppins', sans-serif;  font-size:18px; width:100%; line-height:35px;  border: 0; text-align:justify;  
         margin-top:40px;
           margin-left:-10px; 
           outline: 0;
           padding:0; 
           word-spacing:-1px}
       
   
   
   
   
   
   
   
   .tt1span-p2 h3{margin-top:20px; font-family: 'poppins', sans-serif;  font-size:16px; }
   
   
   
       .ttest-p2{text-decoration: none; list-style-type: none; display:inline-block; width:100%; margin-left:-80px} 
   
       #tt1{position:relative;  width:100%;}
           .tt1-p2::before{position: absolute;  width:1110px;  height:1px; background-color:#d5d5d5; content:"";  margin-top:3px;   outline: 0;
               padding: 0;
         }
   
   
   
   
       .ttest-p2 li{display:inline-block;  }
         .ttest-p2 li i{ margin-left:20px}
         .ttest-p2 li a{color:black}
         .ttest-p2 li a:hover{color:#ffbf00}
       .tt2-p2{position: relative; width:100%; }
       .tt2-p2::after{position: absolute;  width:1110px; height:1px; background-color:#d5d5d5; content:""; left:0; margin-top:-11px}
   
   
   
       #demo-p2{width:100%; height:600px; margin-top:50px   }
   
   
   
       @media screen  and (min-width:1000px) and (max-width: 1122px) {
   
         .procont1-p2 p{margin-left:7px;}
         .procont2-p2 p{margin-left:13px;}
   
       }
   
   
       @media screen  and (max-width: 992px) {
   
         .procont2-p2 h3{margin-left:102px}
       }
   
   
       @media screen  and (min-width:768px) and (max-width: 1000px) {
   
         .procont1-p2 p{margin-left:7px; padding:0px; word-spacing: -1px; }
         .procont2-p2 p{margin-left:13px; padding:0px; word-spacing: -1px; margin-top:29px}
         .procont1-p2 h3{margin-left:141px}
   
       }
   
   
   
       @media screen  and (min-width:768px) and (max-width: 1180px) {
   
         .procont1-p2 h3{margin-top:-68px}
         .procont2-p2 h3{margin-top:-68px}
   
       }
   
   
   
       @media screen and (min-width:668px) and (max-width: 768px) {
         .procont1-p2 h3{margin-top:-163px; margin-left:226px;}
         .procont1-p2 p{margin-left:7px} 
   
       }
   
   
       @media screen  and (max-width: 668px) {
         .procont1-p2 h3{margin-top:-216px; margin-left:204px;}
         .procont1-p2 p{margin-left:7px} 
   
       }
   
       @media screen  and (max-width: 600px) {
         .procont1-p2 h3{margin-top:-220px; margin-left:204px;}
         .procont1-p2 p{margin-left:7px} 
   
       }
       
       
       @media screen  and (max-width: 768px) {
   
   
       .carousel-control-next-icon, .carousel-control-prev-icon{margin-top:-232px}
   
         .procont2-p2 h3{margin-left:190px;}
   
       }
  
   
       @media screen  and (max-width: 668px) {
         .procont2-p2 h3{ margin-left:204px;}
         .procont2-p2 p{margin-left:7px} 
         .tt1span-p2 h3 {margin-left:51px;}
   
       }
   
       @media screen  and (max-width: 600px) {
         .procont2-p2 h3{ margin-left:157px;}
         .procont2-p2 p{margin-left:7px} 
   
       }
   
   
       @media screen  and (min-width:710px) and (max-width: 810px) {
   
       .project2content h1{font-size:28px}
   
       .project2content h1::before {width:614px; margin-left:-2px}
       .project2content h1::after {width:614px; margin-left:-619px}
   
       }
   
   
   
   
   
       @media screen   and (max-width: 710px) {
   
         .project2content h1{font-size:25px}
         .project2content h1::before {width:558px; margin-left:-2px}
         .project2content h1::after {width:558px;     margin-left: -552px; margin-top: 41px;}
   
         }
   
         @media screen   and (max-width: 600px) {
           .project2content h1{font-size:20px}
           .project2content h1::before {width:444px; margin-left:-2px}
           .project2content h1::after {width:444px; margin-left:-444px; margin-top: 41px;}
   
         }
   
     
   
   /* project 3 */ 
   
   
   
   .procont1-p3-phone{display:none}
   .procont2-p3-phone{display:none}


   .project3content h1{font-family: 'poppins', sans-serif; font-weight:600; font-size:35px; text-transform: uppercase; margin-top:20px; text-align:center; position:relative}
   .project3content h1::before{content:""; width:515px; height:2px; background-color:#ffbf00; position: absolute; margin-top: -10px;}
   .project3content h1::after{content:""; width:515px; height:2px; background-color:#ffbf00; position: absolute; margin-top: 50px; margin-left:-514px}
   
   
   .procont1-p3{width:100%;}
   
   
   
   
   
   
   
   
   .procont1-p3 h3{font-family: 'poppins', sans-serif;  font-size:22px;  margin-left:190px; margin-top:50px; font-weight:600; position: relative; }
   .procont1-p3 h3::before{content:""; width:163px; height:2px; background-color:#ffbf00; position: absolute; margin-top: -13px; margin-left:-42px}
   .procont1-p3 h3::after{content:""; width:163px; height:2px; background-color:#ffbf00; position: absolute; margin-top: 42px; margin-left:-120px}
   
   
   
   
   .procont1-p3 p{font-family: 'poppins', sans-serif;  font-size:18px; width:100%; line-height:35px;  border: 0; text-align:justify; padding:32px; margin-top:2px;
   margin-left:-73px; 
   outline: 0;
   vertical-align: baseline}
   
   
   
   .procont2-p3 h3{font-family: 'poppins', sans-serif;  font-size:22px;  margin-left:190px; margin-top:50px; font-weight:600; position: relative;}
   .procont2-p3 h3::before{content:""; width:163px; height:2px; background-color:#ffbf00; position: absolute; margin-top: -13px; margin-left:-16px}
   .procont2-p3 h3::after{content:""; width:163px; height:2px; background-color:#ffbf00; position: absolute; margin-top: 38px; margin-left:-154px}
   
   .procont2-p3 p{font-family: 'poppins', sans-serif;  font-size:18px; width:100%; line-height:35px;  border: 0; text-align:justify;  padding:2px; margin-top:39px;
   margin-left:-10px; 
   outline: 0;
   word-spacing:-1px}
   .tt1span-p3 h3{margin-top:20px; font-family: 'poppins', sans-serif;  font-size:16px;}
   .ttest-p3{text-decoration: none; list-style-type: none; display:inline-block; width:100%; margin-left:-80px} 
   
   #tt1{position:relative;  width:100%;}
   .tt1-p3::before{position: absolute;  width:1110px;  height:1px; background-color:#d5d5d5; content:"";  margin-top:4px;   outline: 0;
   padding: 0;
   }
   
   
   .ttest-p3{margin-top:-34px}
   
   .ttest-p3 li{display:inline-block;  }
   .ttest-p3 li i{ margin-left:20px}
   .ttest-p3 li a{color:black}
   .ttest-p3 li a:hover{color:#ffbf00}
   
   .tt2-p3{position: relative; width:100%; }
   .tt2-p3::after{position: absolute;  width:1110px; height:1px; background-color:#d5d5d5; content:""; left:0; margin-top:-12px}
   
   
   
   #demo-p3{width:100%; height:600px;  margin-top:50px   }
   
   
   
   
   
   
   
   @media screen  and (min-width:1000px) and (max-width: 1122px) {
   
     .procont1-p3 p{margin-left:7px;}
     .procont2-p3 p{margin-left:13px;}
   
   }
   
   
   @media screen  and (max-width: 992px) {
   
     .procont2-p3 h3{margin-left:102px}
   }
   
   
   @media screen  and (min-width:768px) and (max-width: 1000px) {
   
     .procont1-p3 p{margin-left:7px; padding:0px; word-spacing: -1px; margin-top:130px }
     .procont2-p3 p{margin-left:13px; padding:0px; word-spacing: -1px; margin-top:29px}
     .procont1-p3 h3{margin-left:141px}
   
   }
   
   
   
   @media screen  and (min-width:768px) and (max-width: 1180px) {
   
     .procont1-p3 h3{margin-top:-68px}
     .procont2-p3 h3{margin-top:-68px}
   
   }
   
   
   
   @media screen and (min-width:668px) and (max-width: 768px) {
     .procont1-p3 h3{margin-top:-125px; margin-left:226px;}
     .procont1-p3 p{margin-left:7px} 
   
   }
   
   
   @media screen  and (max-width: 668px) {
     .procont1-p3 h3{margin-top:-184px; margin-left:204px;}
     .procont1-p3 p{margin-left:7px} 
   
   }
   
   @media screen  and (max-width: 600px) {
     .procont1-p3 h3{margin-top:-220px; margin-left:204px;}
     .procont1-p3 p{margin-left:7px} 
   
   }
   
   
   
   
   
   
   @media screen  and (max-width: 768px) {
   
   
   .carousel-control-next-icon, .carousel-control-prev-icon{margin-top:-232px}
   
     .procont2-p3 h3{margin-left:190px;}
   
   }
   
   
   
   
   @media screen  and (max-width: 668px) {
     .procont2-p3 h3{madrgin-top:-216px; margin-left:204px;}
     .procont2-p3 p{margin-left:7px} 
     .tt1span-p3 h3 {margin-left:51px;}
   
   }
   
   @media screen  and (max-width: 600px) {
     .procont2-p3 h3{margidn-top:-220px; margin-left:157px;}
     .procont2-p3 p{margin-left:7px} 
   
   }












/* // displaying footer-phone as none */
.footer-phone{display:none}



.footer{width:100%; height:120px; background-color:black;  margin-top:40px; }

.footer h3{color: #ffbf00;
font-size: 1.5em; margin-left:140px; padding-top:5px;  }

#coi1{margin-left:140px; color:white; margin-top:10px}
.coi1-span{color:white; margin-left:4px}

.footer-allright{float:right; color:white; margin-right:186px}


#coi2{margin-left:40px; color:white; margin-top:10px}
.coi2-span{color:white; margin-left:4px}

#coi3{margin-left:140px; color:white; margin-top:20px}
.coi3-span{color:white; margin-left:8px}


#coi4{margin-left:246px; color:white; margin-top:20px}
.coi4-span{color:white; margin-left:4px}




#footer-sociali-one{float:right; margin-right:-12px;  font-size:25px; color:white; margin-top:10px}
#footer-sociali-two{float:right; margin-right:-66px;  font-size:25px; color:white; margin-top:10px}
#footer-sociali-three{float:right; margin-right:-107px;  font-size:25px; color:white; margin-top:10px}


@media screen and (min-width: 991px) and (max-width:1264px){
.footer{height:140px}
.footer h3{margin-left:36px;}
#coi1{margin-left:36px}
#coi2{margin-left:11px}
#coi3{margin-left:37px}
#coi4{margin-left:220px}

.footer-allright {margin-right:114px;}

#footer-sociali-one{margin-right:-6px}
#footer-sociali-two{margin-right:-77px}
#footer-sociali-three{margin-right:-125px}

}


@media screen and (min-width: 900px) and (max-width:991px){
.footer{height:140px}

.footer h3{margin-left:36px;}
#coi1{margin-left:5px; }
#coi2{margin-left:11px; margin-top:20px;}
#coi3{margin-left:8px}
#coi4{margin-left:212px}

.footer-allright {margin-right:72px; margin-top:14px}

#footer-sociali-one{margin-right:-103px}

#footer-sociali-two{margin-right:-56px}
#footer-sociali-three{margin-right:-8px}

}





@media screen and (min-width: 768px) and (max-width:900px){
.footer{height:140px}

.footer h3{margin-left:36px; font-size:2.2vw;}
#coi1{margin-left:5px; }
.coi1-span{font-size:1.6vw}


#coi2{margin-left:28px; margin-top:20px;}
.coi2-span{font-size:1.6vw}

#coi3{margin-left:8px}
.coi3-span{font-size:1.6vw}

#coi4{margin-left:190px}
.coi4-span{font-size:1.6vw}


.footer-allright {margin-right:72px; margin-top:14px; font-size:1.6vw}

#footer-sociali-one{margin-right:-103px; font-size:2.8vw}

#footer-sociali-two{margin-right:-56px; font-size:2.8vw}
#footer-sociali-three{margin-right:-8px;  font-size:2.8vw}

}






@media screen and  (max-width:768px){
.footer{height:140px}

.footer h3{margin-left:36px; font-size:2.2vw;}
#coi1{margin-left:5px; }
.coi1-span{font-size:1.6vw}


#coi2{margin-left:8px; margin-top:20px;}
.coi2-span{font-size:1.6vw}

#coi3{margin-left:8px}
.coi3-span{font-size:1.6vw}

#coi4{margin-left:105px}
.coi4-span{font-size:1.6vw}


.footer-allright {margin-right:57px; margin-top:23px; font-size:1.6vw}

#footer-sociali-one{margin-right:-5px; font-size:2.8vw; margin-top:24px}

#footer-sociali-two{margin-right:-46px; font-size:2.8vw; margin-top:24px}
#footer-sociali-three{margin-right:-69px;  font-size:2.8vw; margin-top:24px}

}









/*  mobile */ 



@media screen and (min-width:300px) and (max-width:320px){
.open{margin-left:37px}
#ffa-hide{display:none}


.overlay-main {height: 560px;}


.solution-overlay-content{margin-top:114px}
#solutionani1{font-size:1.5em; margin-top: -213px;  margin:46px}
#solutionani2{font-size:1.5em}
#solutionani3{font-size:1.5em}
#solutionani4{font-size:1.5em}
#solutionani5{font-size:1.5em}

.carousel-control-next-icon, .carousel-control-prev-icon{display:none}

.projectcontent h1 {font-size: 25px;  margin-top: 51px}

.projectcontent h1::before {margin-top: -17px; margin-left: -41px;}

.projectcontent h1::after {    margin-top: 46px;}


.project2content h1{font-size: 25px; margin-top:7px}
.project2content h1::before{    margin-left: -45px;}
.project2content h1::after{    margin-left: -373px;}


.project3content h1{font-size: 25px; margin-top:7px}
.project3content h1::before{    margin-left: -45px; margin-top: -15px;} 
.project3content h1::after{    margin-left: -373px; margin-top: 41px;}



.procont1 h3 {    margin-top: -388px;
  margin-left: 99px}

  .procont2 h3 {    margin-top: 22px;
    margin-left: 70px;}


    .procont1-p2 h3{ margin-top: -387px;
      margin-left: 99px}
      .procont2-p2 h3 {    margin-top: 22px;
        margin-left: 70px;}

        .procont1-p3 h3{ margin-top: -387px;
          margin-left: 99px}
          .procont2-p3 h3 {    margin-top: 22px;
            margin-left: 70px;}
    


  .procont1 p{display:none}
  .procont2 p{display:none}
  
  .procont1-phone{display:block}
  .procont2-phone{display:block}
  
  
  .procont1-p2 p{display:none}
  .procont1-p2-phone {display:block}
  
  .procont2-p2 p{display:none}
  .procont2-p2-phone {display:block}
  
  
  
  .procont1-p3 p{display:none}
  .procont2-p3 p{display:none}
  
  .procont1-p3-phone{display:block}
  .procont2-p3-phone{display:block}
  

  .procont1-phone p,  .procont2-phone p,
  .procont1-p2-phone,   .procont2-p2-phone,
  .procont1-p3-phone,   .procont2-p3-phone{ font-size: 16px;
    margin-left: 17px;
    margin-right: -9px;
    line-height: 32px;
    margin-top: 30px;}
  

.footer{display:none}
.footer-phone{display:block}




.footer-phone{width:100%; height:auto; background-color:black;  margin-top:15px; tedxt-align: center; }

.footer-phone h3{color: #ffbf00;
  font-size: 1.4em;  padding-top:5px; text-align:center  }

#coi1-phone{ color:white; margin-top:10px; margin-left: 27px;}
.coi1-span-phone{color:white; margin-left:4px}


#coi2-phone{ color:white;margin-top: 15px; margin-left: 29px;}
.coi2-span-phone{color:white; margin-left:4px}

#coi3-phone{ color:white; margin-top:15px; margin-left: 30px;}
.coi3-span-phone{color:white; margin-left:4px}


#coi4-phone{ color:white; margin-top:15px; margin-left: 30px;}
.coi4-span-phone{color:white; margin-left:4px}



.footer-allright-phone{ color:white;  margin-top: 17px;
  text-align: center;
  font-size: 1.2em;}

  .footer-icons-phone{text-align:center; margin-top: -13px;}
#footer-sociali-one-phone{ font-size:22px; color:white; }
#footer-sociali-two-phone{ font-size:22px; color:white;  margin: 9px;}
#footer-sociali-three-phone{ font-size:22px; color:white;}




#coi1SpanPhone-Hidden-space{display:none}
.coi1SpanPhone-Hidden{display:block}
.coiAlignedspanMobile-Hidden{display:block}


.coi1-span-phone{display:none}

.coi1SpanPhone-Hidden{color:white; margin-left: 50px;
  margin-top: -24px;}

.coiAlignedspanMobile-Hidden{color:white; margin-left: 53px;}



}



/* inside 300 */ 

@media screen and (min-width:311px) and (max-width:320px){

  .open{margin-left:49px}


.procont1 h3 {    margin-top: -388px;
  margin-left: 107px}

  .procont2 h3 {    margin-top: 22px;
    margin-left: 79px;}


    .procont1-p2 h3{ margin-top: -387px;
      margin-left: 107px}
      .procont2-p2 h3 {    margin-top: 22px;
        margin-left: 79px;}

        .procont1-p3 h3{ margin-top: -367px;
          margin-left: 107px}
          .procont2-p3 h3 {    margin-top: 22px;
            margin-left: 79px;}
    
          }



@media screen and (min-width:320px) and (max-width:450px){

/* displaying procont 1 p as none, procont1 p as block */ 

.procont1 p{display:none}
.procont2 p{display:none}

.procont1-phone{display:block}
.procont2-phone{display:block}


.procont1-p2 p{display:none}
.procont1-p2-phone {display:block}

.procont2-p2 p{display:none}
.procont2-p2-phone {display:block}



.procont1-p3 p{display:none}
.procont2-p3 p{display:none}

.procont1-p3-phone{display:block}
.procont2-p3-phone{display:block}


  .open{margin-left:49px}

  #solutionani1{font-size:2em; margin-top: -213px;}
  #solutionani2{font-size:2em}
  #solutionani3{font-size:2em}
  #solutionani4{font-size:2em}
  #solutionani5{font-size:2em}

  .overlay-main {height:650px}



  .projectcontent h1 {font-size:25px}
  .projectcontent h1::before { width: 328px;     margin-top: -14px;
      margin-left: -18px;}
      .projectcontent h1::after { width: 328px;        margin-top: 42px;
          margin-left: -312px;}


          .project2content h1 {font-size:25px}
          .project2content h1::before { width: 409px;     margin-top: -22px;
              margin-left: -47px;}
              .project2content h1::after { width: 409px;        margin-top: 42px;
                  margin-left: -312px;}
      

                  .project3content h1 {font-size:22px}
                  .project3content h1::before { width: 409px;     margin-top: -22px;
                      margin-left: -47px;}
                      .project3content h1::after { width: 409px;        margin-top: 43px;
                          margin-left: -325px;}
              
      

          .carousel-control-prev {display:none}
          .carousel-control-next {display:none}



            .procont1-phone p{font-family: 'poppins', sans-serif;  font-size:18px; line-height:35px;
              margin-block-end: 28.8px;
              margin-block-start: 0px;
              margin-bottom: 28.8px;
              margin-inline-end: 0px;
              margin-inline-start: 0px;
              margin-left: 10px;
              margin-right: 0px;
              margin-top: 32px;    overflow-wrap:break-word;
              text-size-adjust:100%;  }


              .procont2-phone p{font-family: 'poppins', sans-serif;  font-size:18px; line-height:35px;
                margin-block-end: 28.8px;
                margin-block-start: 0px;
                margin-bottom: 28.8px;
                margin-inline-end: 0px;
                margin-inline-start: 0px;
                margin-left: 10px;
                margin-right: 0px;
                margin-top: 32px;    overflow-wrap:break-word;
                text-size-adjust:100%;  }


.procont1-p2-phone{font-family: 'poppins', sans-serif;  font-size:18px; line-height:35px;
margin-block-end: 28.8px;
margin-block-start: 0px;
margin-bottom: 28.8px;
margin-inline-end: 0px;
margin-inline-start: 0px;
margin-left: 10px;
margin-right: 0px;
margin-top: 32px;    overflow-wrap:break-word;
text-size-adjust:100%; }

.procont2-p2-phone{font-family: 'poppins', sans-serif;  font-size:18px; line-height:35px;
  margin-block-end: 28.8px;
  margin-block-start: 0px;
  margin-bottom: 28.8px;
  margin-inline-end: 0px;
  margin-inline-start: 0px;
  margin-left: 10px;
  margin-right: 0px;
  margin-top: 32px;    overflow-wrap:break-word;
  text-size-adjust:100%; }




  .procont1-p3-phone{font-family: 'poppins', sans-serif;  font-size:18px; line-height:35px;
    margin-block-end: 28.8px;
    margin-block-start: 0px;
    margin-bottom: 28.8px;
    margin-inline-end: 0px;
    margin-inline-start: 0px;
    margin-left: 10px;
    margin-right: 0px;
    margin-top: 32px;    overflow-wrap:break-word;
    text-size-adjust:100%; }
  
    .procont2-p3-phone{font-family: 'poppins', sans-serif;  font-size:18px; line-height:35px;
      margin-block-end: 28.8px;
      margin-block-start: 0px;
      margin-bottom: 28.8px;
      margin-inline-end: 0px;
      margin-inline-start: 0px;
      margin-left: 10px;
      margin-right: 0px;
      margin-top: 32px;    overflow-wrap:break-word;
      text-size-adjust:100%; }
    
  



  #ffa-hide{display:none}
.footer{display:none}
.footer-phone{display:block}




.footer-phone{width:100%; height:auto; background-color:black;  margin-top:15px; tedxt-align: center; }

.footer-phone h3{color: #ffbf00;
  font-size: 1.4em;  padding-top:5px; text-align:center  }

#coi1-phone{ color:white; margin-top:10px; margin-left: 27px;}
.coi1-span-phone{color:white; margin-left:4px}


#coi2-phone{ color:white;margin-top: 15px; margin-left: 29px;}
.coi2-span-phone{color:white; margin-left:4px}

#coi3-phone{ color:white; margin-top:15px; margin-left: 30px;}
.coi3-span-phone{color:white; margin-left:4px}


#coi4-phone{ color:white; margin-top:15px; margin-left: 30px;}
.coi4-span-phone{color:white; margin-left:4px}



.footer-allright-phone{ color:white;  margin-top: 17px;
  text-align: center;
  font-size: 1.2em;}

  .footer-icons-phone{text-align:center; margin-top: -13px;}
#footer-sociali-one-phone{ font-size:22px; color:white; }
#footer-sociali-two-phone{ font-size:22px; color:white;  margin: 9px;}
#footer-sociali-three-phone{ font-size:22px; color:white;}

#coi1SpanPhone-Hidden-space{display:none}
.coi1SpanPhone-Hidden{display:block}
.coiAlignedspanMobile-Hidden{display:block}


.coi1-span-phone{display:none}

.coi1SpanPhone-Hidden{color:white; margin-left: 50px;
  margin-top: -24px;}

.coiAlignedspanMobile-Hidden{color:white; margin-left: 53px;}

}




/* start inside mobile screen */ 


@media screen and (min-width:333px) and (max-width:360px){
.open{margin-left:82px}
}

@media screen and (min-width:361px) and (max-width:372px){
  .open{margin-left:82px}
  }
  
  



@media screen and (min-width:373px) and (max-width:400px){
.open{margin-left:114px}

}


@media screen and (min-width:401px) and (max-width:420px){
  .open{margin-left:126px}
  
  }
  
  @media screen and (min-width:421px) and (max-width:430px){
    .open{margin-left:144px}
    
    }
    
  
@media screen and (min-width:431px) and (max-width:440px){
  .open{margin-left:155px}
  
  }


  
  
  







  @media screen and (min-width:320px) and (max-width:340px){

  .procont1 h3{margin-top: -372px;
      margin-left: 112px;}
  
  .procont1-p2 h3{margin-top: -366px;
    margin-left: 112px;}

    .procont1-p3 h3{margin-top: -358px;
      margin-left: 112px;}
}




  @media screen and (min-width:320px) and (max-width:330px){
    .procont2 h3{ margin-left: 82px;  margin-top: 8px;}
    .procont2-p2 h3{ margin-left: 82px;  margin-top: 8px;}
    .procont2-p3 h3{ margin-left: 82px;  margin-top: 8px;}


  }

  @media screen and (min-width:331px) and (max-width:340px){
    .procont2 h3{ margin-left: 86px;     margin-top: 8px;}
    .procont2-p2 h3{ margin-left: 86px;     margin-top: 8px;}
    .procont2-p3 h3{ margin-left: 86px;     margin-top: 8px;}

  }


  @media screen and (min-width:341px) and (max-width:350px){

      .procont1 h3{margin-top: -368px;
          margin-left: 127px;}
          .procont1-p2 h3{margin-top: -362px;
            margin-left: 127px;}
            .procont1-p3 h3{margin-top: -346px;
              margin-left: 121px;}



          .procont2 h3{margin-left:84px; margin-top:8px}
          .procont2-p2 h3{margin-left:84px; margin-top:8px}
          .procont2-p3 h3{margin-left:84px; margin-top:8px}
      }
  
      @media screen and (min-width:351px) and (max-width:360px){

          .procont1 h3  {margin-top: -368px;
              margin-left: 136px;}
              .procont1-p2 h3  {margin-top: -366px;
                margin-left: 136px;}
                .procont1-p3 h3  {margin-top: -342px;
                  margin-left: 128px;}




              .procont2 h3{margin-left:93px; margin-top:8px}
            
            .procont2-p2 h3{margin-left:93px; margin-top:8px}
            .procont2-p3 h3{margin-left:93px; margin-top:8px}

          }
    

          @media screen and (min-width:361px) and (max-width:370px){

              .procont1 h3  {margin-top: -368px;
                  margin-left: 136px;}
                  
              .procont1-p2 h3  {margin-top: -366px;
                margin-left: 136px;}

                .procont1-p3 h3  {margin-top: -338px;
                  margin-left: 125px;}

                  .procont2 h3{margin-left:103px; margin-top:8px}
                
                  .procont2-p2 h3{margin-left:103px; margin-top:8px}
                  .procont2-p3 h3{margin-left:103px; margin-top:8px}

                }

              @media screen and (min-width:371px) and (max-width:380px){

                  .procont1 h3{margin-top: -352px;
                      margin-left: 136px;}
                      .procont1-p2 h3{margin-top: -358px;
                        margin-left: 136px;}
                        .procont1-p3 h3{margin-top: -330px;
                          margin-left: 129px;}

                          
                      .procont2 h3{margin-left:103px; margin-top:8px}
                    
                    .procont2-p2 h3{margin-left:103px; margin-top:8px}
                    .procont2-p3 h3{margin-left:103px; margin-top:8px}

                  }


                  @media screen and (min-width:381px) and (max-width:410px){

                      .procont1 h3  {margin-top: -352px;
                          margin-left: 142px;}
                          .procont1-p2 h3  {margin-top: -342px;
                            margin-left: 136px;}
                            .procont1-p3 h3  {margin-top: -322px;
                              margin-left: 136px;}

                              
                          .procont2 h3{margin-left:111px; margin-top:8px}
                        
                        .procont2-p2 h3{margin-left:111px; margin-top:8px}
                        .procont2-p3 h3{margin-left:111px; margin-top:8px}

                      }






                      @media screen and (min-width:391px) and (max-width:400px){

                        .procont1 h3  {margin-top: -344px;
                          margin-left: 150px;}


                        .procont1-p3 h3{margin-top: -314px;
                          margin-left: 147px;}
                      }

                      @media screen and (min-width:401px) and (max-width:410px){
                        .procont1-p3 h3{margin-top: -314px;
                          margin-left: 155px;}
                      }




                              @media screen and (min-width:411px) and (max-width:420px){

                                .procont1 h3  {margin-top: -344px;
                                    margin-left: 151px;}
                                    .procont1-p2 h3  {margin-top: -334px;
                                      margin-left: 151px;}
                                      .procont1-p3 h3  {margin-top: -314px;
                                        margin-left: 151px;}
  
                                    .procont2 h3{margin-left:126px; margin-top:8px}
                                  
                                  .procont2-p2 h3{margin-left:126px; margin-top:8px}
                                  .procont2-p3 h3{margin-left:126px; margin-top:12px}

                                }





                                @media screen and (min-width:421px) and (max-width:430px){

                                  .procont1 h3 {margin-top: -332px;
                                      margin-left: 151px;}
                                      .procont1-p2 h3 {margin-top: -330px;
                                        margin-left: 151px;}

                                        .procont1-p3 h3 {margin-top: -302px;
                                          margin-left: 159px;}


                                      .procont2 h3{margin-left:133px; margin-top:8px}
                                    
                                    .procont2-p2 h3{margin-left:133px; margin-top:8px}
                                    .procont2-p3 h3{margin-left:133px; margin-top:12px}

                                  }

                                  @media screen and (min-width:431px) and (max-width:440px){

                                    .procont1 h3 {margin-top: -328px;
                                        margin-left: 151px;}
                                        
                                    .procont1-p2 h3 {margin-top: -326px;
                                      margin-left: 167px;}
                                        
                                      .procont1-p3 h3 {margin-top: -290px;
                                        margin-left: 165px;}



                                        .procont2 h3{margin-left:133px; margin-top:8px}
                                      
                                      .procont2-p2 h3{margin-left:133px; margin-top:8px}
                                      .procont2-p3 h3{margin-left:133px; margin-top:12px}

                                    }

                                    @media screen and (min-width:441px) and (max-width:450px){

                                      .procont1 h3 {margin-top: -324px;
                                          margin-left: 171px;}
                                          .procont1-p2 h3 {margin-top: -314px;
                                            margin-left: 171px;}
                                            .procont1-p3 h3 {margin-top: -294px;
                                              margin-left: 174px;}

                                              
                                          .procont2 h3{margin-left:145px; margin-top:8px}
                                        
  
                                        .procont2-p2 h3{margin-left:145px; margin-top:8px}
                                        .procont2-p3 h3{margin-left:148px; margin-top:8px}

                                      }


                                        @media screen and (min-width:340px) and (max-width:398px){

                                        .project2content h1::before { width: 315px;     margin-top: -22px;
                                          margin-left: -29px;}
                                          
                                          .project2content h1::after { width: 315px;        margin-top: 50px;
                                              margin-left: -274px;}
                          
                                          }

                                          @media screen and (min-width:399px) and (max-width:450px){

                                            .project2content h1 {font-size:20px}
                                            .project2content h1::before { width: 393px;     margin-top: -22px;
                                              margin-left: 0px;}
                                              .project2content h1::after { width: 393px;
                                                margin-top: 46px;
                                                margin-left: -394px;}
                                              }


                                              @media screen and (min-width:341px) and (max-width:450px){
                                                .project3content h1 {font-size:23px}
                                                .project3content h1:before{    width: 330px;
                                                  margin-top: -21px;
                                                  margin-left: -6px;}

                                                  .project3content h1::after { width: 330px;
                                                    margin-top: 47px;
                                                    margin-left: -327px;}
                                                  }
  
                                                  @media screen and (min-width:418px) and (max-width:475px){

                                                    #coi1-phone{  margin-left: 7px;}
                                                    .coi1-span-phone{    margin-left: -1px;
                                                      font-size: 15px;}
                                                      #coi2-phone{margin-left: 7px;}
                                                      .coi2-span-phone{   margin-left: -1px;
                                                        font-size: 15px}
                                                        #coi3-phone{margin-left: 7px;}
                                                        .coi3-span-phone{  margin-left: -1px;
                                                          font-size: 15px}
                                                          #coi4-phone{margin-left: 7px;}
                                                          .coi4-span-phone{  margin-left: -1px;
                                                            font-size: 15px}
                                                            .footer-allright-phone {font-size:1em}
                                                            #footer-sociali-one-phone{font-size: 20px;}
                                                            #footer-sociali-two-phone{font-size: 20px;}
                                                            #footer-sociali-three-phone{font-size: 20px;}
                                                          }
                                           
                                                          
@media screen and (min-width:320px) and (max-width:320px){

  #solutionani1 {
    margin-top: 131px;
}

.projectcontent h1 {    margin-top: 50px;}
.procont1 h3 {
  margin-top: -369px;}
  
  .project2content h1 {margin-top: 8px;}
  .project2content h1::before {margin-top: -14px;}
  .project3content h1 {margin-top:8px}



}




                
 @media screen and (min-width:320px) and (max-width:350px){
  .procont1-phone p,  .procont2-phone p,
  .procont1-p2-phone,   .procont2-p2-phone,
  .procont1-p3-phone,   .procont2-p3-phone{ font-size:16px;   margin-left: 17px;
    margin-right: -9px;}
  }

  @media screen and (min-width:351px) and (max-width:400px){
    .procont1-phone p,  .procont2-phone p,
    .procont1-p2-phone,   .procont2-p2-phone,
    .procont1-p3-phone,   .procont2-p3-phone{    font-size:16px;   margin-left: 20px;
      margin-right: -9px;}
    }
  
    @media screen and (min-width:401px) and (max-width:450px){
      .procont1-phone p,  .procont2-phone p,
      .procont1-p2-phone,   .procont2-p2-phone,
      .procont1-p3-phone,   .procont2-p3-phone{    font-size:16px;   margin-left: 20px;
        margin-right: -9px;}

        .procont1 h3{    margin-left: 147px;}
      }


      @media screen and (min-width:401px) and (max-width:410px){
        .procont1 h3  {margin-top: -344px;
          margin-left: 150px;}

        }


      @media screen and (min-width:411px) and (max-width:430px){

        .procont1 h3{margin-left: 157px;}
      }

      @media screen and (min-width:431px) and (max-width:450px){

        .procont1 h3{margin-left: 166px;}
      }







/* end inside mobile screen */ 





@media screen and (min-width:450px) and (max-width:768px){
#projectsimg{width:100%; max-height:600px!important}
.open{margin-left:144px}

#ffa-hide{display:none}


.procont1 p{display:none}
.procont2 p{display:none}

.procont1-phone{display:block}
.procont2-phone{display:block}


.procont1-p2 p{display:none}
.procont1-p2-phone {display:block}

.procont2-p2 p{display:none}
.procont2-p2-phone {display:block}



.procont1-p3 p{display:none}
.procont2-p3 p{display:none}

.procont1-p3-phone{display:block}
.procont2-p3-phone{display:block}





  .open{margin-left:49px}

  #solutionani1{font-size:2em; margin-top: -213px;}
  #solutionani2{font-size:2em}
  #solutionani3{font-size:2em}
  #solutionani4{font-size:2em}
  #solutionani5{font-size:2em}

  .overlay-main {height:650px}


  .projectcontent h1 {font-size:25px}
  .projectcontent h1::before { width: 328px;     margin-top: -14px;
      margin-left: -18px;}
      .projectcontent h1::after { width: 328px;        margin-top: 46px;
          margin-left: -312px;}


          .project2content h1 {font-size:22px}
          .project2content h1::before { width: 439px;     margin-top: -22px;
              margin-left: -5px;}
              .project2content h1::after { width: 439px;        margin-top: 46px;
                  margin-left: -438px;}
      

                  .project3content h1 {font-size:22px}
                  .project3content h1::before { width: 409px;     margin-top: -21px;
                      margin-left: -51px;}
                      .project3content h1::after { width: 409px;        margin-top: 43px;
                          margin-left: -357px;}
              
      

          .carousel-control-prev {display:none}
          .carousel-control-next {display:none}



            .procont1-phone p{font-family: 'poppins', sans-serif;  font-size:18px; line-height:35px;
              margin-block-end: 28.8px;
              margin-block-start: 0px;
              margin-bottom: 28.8px;
              margin-inline-end: 0px;
              margin-inline-start: 0px;
              margin-left: 25px;
              margin-right: -9px;
              margin-top: 32px;    overflow-wrap:break-word;
              text-size-adjust:100%;  }


              .procont2-phone p{font-family: 'poppins', sans-serif;  font-size:18px; line-height:35px;
                margin-block-end: 28.8px;
                margin-block-start: 0px;
                margin-bottom: 28.8px;
                margin-inline-end: 0px;
                margin-inline-start: 0px;
                margin-left: 25px;
                margin-right: -9px;
                  margin-top: 32px;    overflow-wrap:break-word;
                text-size-adjust:100%;  }


.procont1-p2-phone{font-family: 'poppins', sans-serif;  font-size:18px; line-height:35px;
margin-block-end: 28.8px;
margin-block-start: 0px;
margin-bottom: 28.8px;
margin-inline-end: 0px;
margin-inline-start: 0px;
margin-left: 25px;
margin-right: -9px;
margin-top: 32px;    overflow-wrap:break-word;
text-size-adjust:100%; }

.procont2-p2-phone{font-family: 'poppins', sans-serif;  font-size:18px; line-height:35px;
  margin-block-end: 28.8px;
  margin-block-start: 0px;
  margin-bottom: 28.8px;
  margin-inline-end: 0px;
  margin-inline-start: 0px;
  margin-left: 25px;
  margin-right: -9px;
margin-top: 32px;    overflow-wrap:break-word;
  text-size-adjust:100%; }




  .procont1-p3-phone{font-family: 'poppins', sans-serif;  font-size:18px; line-height:35px;
    margin-block-end: 28.8px;
    margin-block-start: 0px;
    margin-bottom: 28.8px;
    margin-inline-end: 0px;
    margin-inline-start: 0px;
    margin-left: 25px;
    margin-right: -9px;
margin-top: 32px;    overflow-wrap:break-word;
    text-size-adjust:100%; }
  
    .procont2-p3-phone{font-family: 'poppins', sans-serif;  font-size:18px; line-height:35px;
      margin-block-end: 28.8px;
      margin-block-start: 0px;
      margin-bottom: 28.8px;
      margin-inline-end: 0px;
      margin-inline-start: 0px;
      margin-left: 25px;
      margin-right: -9px;
margin-top: 32px;    overflow-wrap:break-word;
      text-size-adjust:100%; }
    
  




      


.footer{display:none}
.footer-phone{display:block}




.footer-phone{width:100%; height:auto; background-color:black;  margin-top:15px; tedxt-align: center; }

.footer-phone h3{color: #ffbf00;
  font-size: 1.4em;  padding-top:5px; text-align:center  }

#coi1-phone{ color:white; margin-top:10px; margin-left: 27px;}
.coi1-span-phone{color:white; margin-left:4px}


#coi2-phone{ color:white;margin-top: 15px; margin-left: 29px;}
.coi2-span-phone{color:white; margin-left:4px}

#coi3-phone{ color:white; margin-top:15px; margin-left: 30px;}
.coi3-span-phone{color:white; margin-left:4px}


#coi4-phone{ color:white; margin-top:15px; margin-left: 30px;}
.coi4-span-phone{color:white; margin-left:4px}



.footer-allright-phone{ color:white;  margin-top: 17px;
  text-align: center;
  font-size: 1.2em;}

  .footer-icons-phone{text-align:center; margin-top: -13px;}
#footer-sociali-one-phone{ font-size:22px; color:white; }
#footer-sociali-two-phone{ font-size:22px; color:white;  margin: 9px;}
#footer-sociali-three-phone{ font-size:22px; color:white;}

}




                        /* procont p1  450 - 768 */ 

@media screen and (min-width:449px) and (max-width:450px){

  .procont1-phone p,  .procont2-phone p, .procont1-p2-phone, .procont2-p2-phone, .procont1-p3-phone, .procont2-p3-phone{ margin-left: 25px;
    margin-right: -9px;}
  }


  @media screen and (min-width:458px) and (max-width:470px){

    .procont1-phone p,  .procont2-phone p{margin-left: 7px;}
    }
  

    @media screen and (min-width:471px) and (max-width:486px){

      .procont1-phone p,  .procont2-phone p{margin-left: 17px;}
      }
  
      @media screen and (min-width:487px) and (max-width:540px){

        .procont1-phone p,  .procont2-phone p{    margin-left: 11px;}
        }

        @media screen and (min-width:541px) and (max-width:550px){

          .procont1-phone p,  .procont2-phone p{    margin-left: 33px;}
          }
  



          @media screen and (min-width:551px) and (max-width:575px){

            .procont1-phone p,  .procont2-phone p{    margin-left: 45px;}
            }


            @media screen and (min-width:576px) and (max-width:590px){

              .procont1-phone p,  .procont2-phone p{    margin-left: 34px;}
              }

              @media screen and (min-width:591px) and (max-width:600px){

                .procont1-phone p,  .procont2-phone p{    margin-left: 38px;}
                }

                @media screen and (min-width:601px) and (max-width:610px){

                  .procont1-phone p,  .procont2-phone p{    margin-left: -1px; margin-right:-41px}
                  }
  

    
                @media screen and (min-width:611px) and (max-width:670px){

                  .procont1-phone p,  .procont2-phone p{  font-size:19px;     margin-left: -22px; margin-right:-46px}
                  }
        
                  @media screen and (min-width:671px) and (max-width:730px){

                    .procont1-phone p,  .procont2-phone p{  font-size:19px; margin-left: -17px; margin-right:-46px}
                    }
  

                    @media screen and (min-width:731px) and (max-width:750px){

                      .procont1-phone p,  .procont2-phone p{  font-size:19px; margin-left: -17px; margin-right:-46px}
                      }
    
                      @media screen and (min-width:751px) and (max-width:767px){

            .procont1-phone p,  .procont2-phone p{  font-size:19px; margin-left: -10px; margin-right:-46px}
                        }
  


                        /* procont p2  450 - 768 */ 

                      
                      @media screen and (min-width:458px) and (max-width:470px){
                        
                         .procont1-p2-phone, .procont2-p2-phone {margin-left: 7px;}
                            }
                          
                        
                            @media screen and (min-width:471px) and (max-width:486px){
                        
                             .procont1-p2-phone, .procont2-p2-phone {margin-left: 17px;}
                              }
                          
                              @media screen and (min-width:487px) and (max-width:540px){
                              .procont1-p2-phone, .procont2-p2-phone {    margin-left: 11px;}
                                }
                        
                                @media screen and (min-width:541px) and (max-width:550px){
                        
                                .procont1-p2-phone, .procont2-p2-phone {    margin-left: 18px;}
                                  }
                          
                        


                        @media screen and (min-width:551px) and (max-width:575px){

                          .procont1-p2-phone  {    margin-left: -30px;}
                }


                @media screen and (min-width:551px) and (max-width:575px){

                  .procont2-p2-phone  {    margin-left:21px;}
        }



                

                @media screen and (min-width:576px) and (max-width:590px){


                  .procont1-p2-phone { margin-left: -34px;}
                }

                @media screen and (min-width:576px) and (max-width:590px){

                   .procont2-p2-phone { margin-left: 15px;}
                }





                @media screen and (min-width:591px) and (max-width:600px){

                  .procont1-p2-phone,   .procont2-p2-phone{ margin-left: 38px;}
                }                  

                @media screen and (min-width:601px) and (max-width:610px){
                  .procont1-p2-phone, .procont2-p2-phone   {margin-left: -1px; margin-right:-37px}
                }

                @media screen and (min-width:611px) and (max-width:670px){
                  .procont1-p2-phone, .procont2-p2-phone   {font-size:19px;     margin-left: -22px; margin-right:-46px}
                }

                @media screen and (min-width:671px) and (max-width:730px){
                  .procont1-p2-phone, .procont2-p2-phone   {font-size:19px; margin-left: -14px; margin-right:-46px}
                }


                @media screen and (min-width:731px) and (max-width:750px){

                  .procont1-p2-phone, .procont2-p2-phone   {font-size:19px; margin-left: -17px; margin-right:-46px}
                }

                @media screen and (min-width:751px) and (max-width:767px){
                  .procont1-p2-phone, .procont2-p2-phone   {font-size:19px; margin-left: -10px; margin-right:-46px}
                }



          /* procont p3  450 - 768 */ 

                      
                                        @media screen and (min-width:458px) and (max-width:470px){
                        
                                          .procont1-p3-phone, .procont2-p3-phone {margin-left: 7px;}
                                             }
                                           
                                         
                                             @media screen and (min-width:471px) and (max-width:486px){
                                         
                                              .procont1-p3-phone, .procont2-p3-phone {margin-left: 17px;}
                                               }
                                           
                                               @media screen and (min-width:487px) and (max-width:540px){
                                               .procont1-p3-phone, .procont2-p3-phone {    margin-left: 11px;}
                                                 }
                                         
                                                 @media screen and (min-width:541px) and (max-width:550px){
                                         
                                                 .procont1-p3-phone, .procont2-p3-phone {    margin-left: 18px;}
                                                   }
                                           
                                         
                 
                 
                                         @media screen and (min-width:551px) and (max-width:575px){
                 
                                           .procont1-p3-phone, .procont2-p3-phone  {    margin-left: -30px;}
                                 }
                 
                                 @media screen and (min-width:576px) and (max-width:590px){
                 
                 
                                   .procont1-p3-phone, .procont2-p3-phone { margin-left: -34px;}
                                 }
                 
                                 @media screen and (min-width:591px) and (max-width:600px){
                 
                                   .procont1-p3-phone,   .procont2-p3-phone{ margin-left: -38px;}
                                 }                  
                 
                                 @media screen and (min-width:601px) and (max-width:610px){
                                   .procont1-p3-phone, .procont2-p3-phone   {margin-left: -54px; margin-right:-37px}
                                 }
                 
                                 @media screen and (min-width:611px) and (max-width:670px){
                                   .procont1-p3-phone, .procont2-p3-phone   {font-size:19px;     margin-left: -70px; margin-right:-46px}
                                 }
                 
                                 @media screen and (min-width:671px) and (max-width:730px){
                                   .procont1-p3-phone, .procont2-p3-phone   {font-size:19px; margin-left: -61px; margin-right:-46px}
                                 }
                 
                 
                                 @media screen and (min-width:731px) and (max-width:750px){
                 
                                   .procont1-p3-phone, .procont2-p3-phone   {font-size:19px; margin-left: -63px; margin-right:-46px}
                                 }
                 
                                 @media screen and (min-width:751px) and (max-width:767px){
                                   .procont1-p3-phone, .procont2-p3-phone   {font-size:19px; margin-left: -53px; margin-right:-46px}
                                 }
                 



                                 @media screen and (min-width:701px) and (max-width:750px){
                                  .procont2-p3-phone{margin-left: -92px;}
                                   }

                                   @media screen and (min-width:751px) and (max-width:767px){
                                    .procont2-p3-phone{margin-left: -81px;}
                                     }
  
  
@media screen and (min-width:441px) and (max-width:450px){
  .open{margin-left:166px}
  
  }


/* start inside mobile screen 2 */ 

  @media screen and (min-width:451px) and (max-width:491px){
.open{margin-left: 182px;}
  }

  @media screen and (min-width:492px) and (max-width:535px){
    .open{margin-left: 225px;}
        }
    
        @media screen and (min-width:536px) and (max-width:590px){
          .open{margin-left: 269px;}
              }
    
              @media screen and (min-width:591px) and (max-width:641px){
                .open{margin-left: 320px;}
                    }
    
                    @media screen and (min-width:642px) and (max-width:700px){
                      .open{margin-left: 372px;}
                          }

                          @media screen and (min-width:701px) and (max-width:768px){
                            .open{margin-left: 406px;}
                                }



      
















          /* start project one - 768 */ 
   @media screen and (min-width:451px) and (max-width:470px){

          .procont1 h3,  .procont2 h3 {    margin-top: -308px;
            margin-left: 178px;}
   }


   @media screen and (min-width:471px) and (max-width:490px){

    .procont1 h3{    margin-top: -296px;
      margin-left: 186px;}
}

@media screen and (min-width:491px) and (max-width:500px){

.procont1 h3{    margin-top: -284px;
  margin-left: 192px}
}

@media screen and (min-width:501px) and (max-width:520px){

  .procont1 h3{    margin-top: -276px;
    margin-left: 202px}
  }
  


@media screen and (min-width:521px) and (max-width:530px){

.procont1 h3{    margin-top: -272px;
  margin-left: 214px}
}


@media screen and (min-width:531px) and (max-width:540px){

  .procont1 h3{    margin-top: -264px;
    margin-left: 199px}
  }
  
  


@media screen and (min-width:541px) and (max-width:560px){

.procont1 h3{    margin-top: -264px;
  margin-left: 220px}
}


@media screen and (min-width:561px) and (max-width:570px){

.procont1 h3{    margin-top: -244px;
  margin-left: 235px}
}



@media screen and (min-width:571px) and (max-width:580px){

  .procont1 h3{    margin-top: -244px;
    margin-left: 235px}
  }
  
  
  @media screen and (min-width:581px) and (max-width:590px){

    .procont1 h3{    margin-top: -244px;
      margin-left: 214px}
    }
  



@media screen and (min-width:591px) and (max-width:620px){

.procont1 h3{    margin-top: -224px;
  margin-left: 206px}
}





@media screen and (min-width:621px) and (max-width:660px){

.procont1 h3{    margin-top: -200px;
  margin-left: 213px}
}



@media screen and (min-width:661px) and (max-width:700px){

.procont1 h3{    margin-top: -176px;
  margin-left: 224px}
}

@media screen and (min-width:701px) and (max-width:730px){

.procont1 h3{    margin-top: -156px;
  margin-left: 224px}
}

@media screen and (min-width:731px) and (max-width:767px){

.procont1 h3{    margin-top: -140px;
  margin-left: 223px}
}








@media screen and (min-width:451px) and (max-width:470px){
.procont2 h3 {    margin-left: 150px;
  margin-top: 8px;}
}


@media screen and (min-width:471px) and (max-width:490px){
.procont2 h3 {    margin-left: 158px;
  margin-top: 8px;}
}


@media screen and (min-width:491px) and (max-width:500px){
  .procont2 h3 {    margin-left: 164px;
    margin-top: 8px;}
  }

  @media screen and (min-width:501px) and (max-width:520px){
    .procont2 h3 {    margin-left: 174px;
      margin-top: 8px;}
    }
  

  @media screen and (min-width:521px) and (max-width:530px){
    .procont2 h3 {    margin-left: 185px;
      margin-top: 8px;}
    }

    @media screen and (min-width:531px) and (max-width:535px){
      .procont2 h3 {    margin-left: 172px;
        margin-top: 8px;}
      }
  


    @media screen and (min-width:536px) and (max-width:540px){
      .procont2 h3 {    margin-left: 172px;
        margin-top: 8px;}
      }

      @media screen and (min-width:541px) and (max-width:545px){
        .procont2 h3 {    margin-left: 192px;
          margin-top: 8px;}
        }
  
  
      @media screen and (min-width:546px) and (max-width:560px){
        .procont2 h3 {    margin-left: 193px;
          margin-top: 8px;}
        }
  





    @media screen and (min-width:561px) and (max-width:767px){
      .procont2 h3 {    margin-left: 207px;
        margin-top: 8px;}
      }




      @media screen and (min-width:575px) and (max-width:767px){
      
        .tt1::before{width:1128px; margin-left:-111px} 
        .tt2::after{width:1128px; margin-left:-111px} 

      }
      
      @media screen and (min-width:576px) and (max-width:660px){

        .tt1span h3 {margin-left: 23px;}
      }

      @media screen and (min-width:661px) and (max-width:720px){

        .tt1span h3 {margin-left: -6px;}
      }

      @media screen and (min-width:721px) and (max-width:767px){

        .tt1span h3 {margin-left: -32px;}
      }




      

          /* End project one - 768 */ 








          /* start project two - 768 */ 
          @media screen and (min-width:451px) and (max-width:470px){

            .procont1-p2 h3{    margin-top: -306px;
              margin-left: 181px;}
     }


     @media screen and (min-width:471px) and (max-width:490px){

      .procont1-p2 h3{    margin-top: -294px;
        margin-left: 186px;}
}

@media screen and (min-width:491px) and (max-width:500px){

  .procont1-p2 h3{    margin-top: -278px;
    margin-left: 194px}
}

@media screen and (min-width:501px) and (max-width:520px){

  .procont1-p2 h3{    margin-top: -278px;
    margin-left: 203px}
}






@media screen and (min-width:521px) and (max-width:530px){

  .procont1-p2 h3{    margin-top: -270px;
    margin-left: 214px}
}

@media screen and (min-width:531px) and (max-width:540px){

  .procont1-p2 h3{    margin-top: -270px;
    margin-left: 200px}
}




@media screen and (min-width:541px) and (max-width:560px){

  .procont1-p2 h3{    margin-top: -262px;
    margin-left: 221px}
}


@media screen and (min-width:561px) and (max-width:590px){

  .procont1-p2 h3{    margin-top: -242px;
    margin-left: 235px}
}

@media screen and (min-width:591px) and (max-width:620px){

  .procont1-p2 h3{    margin-top: -230px;
    margin-left: 235px}
}

@media screen and (min-width:621px) and (max-width:660px){

  .procont1-p2 h3{    margin-top: -202px;
    margin-left: 235px}
}

@media screen and (min-width:661px) and (max-width:700px){

  .procont1-p2 h3{    margin-top: -182px;
    margin-left: 235px}
}

@media screen and (min-width:701px) and (max-width:730px){

  .procont1-p2 h3{    margin-top: -162px;
    margin-left: 236px}
}

@media screen and (min-width:731px) and (max-width:767px){

  .procont1-p2 h3{    margin-top: -138px;
    margin-left: 235px}
}




@media screen and (min-width:551px) and (max-width:590px){

  .procont1-p2-phone p{margin-left:50px}
}



@media screen and (min-width:451px) and (max-width:470px){
  .procont2-p2 h3 {    margin-left: 158px;
    margin-top: 8px;}
  }


@media screen and (min-width:471px) and (max-width:490px){
  .procont2-p2 h3 {    margin-left: 164px;
    margin-top: 8px;}
  }
  

  @media screen and (min-width:491px) and (max-width:500px){
    .procont2-p2 h3 {    margin-left: 172px;
      margin-top: 8px;}
    }

    @media screen and (min-width:501px) and (max-width:520px){
      .procont2-p2 h3 {    margin-left: 180px;
        margin-top: 8px;}
      }
  
  
    @media screen and (min-width:521px) and (max-width:530px){
      .procont2-p2 h3 {    margin-left: 191px;
        margin-top: 8px;}
      }
      @media screen and (min-width:531px) and (max-width:540px){
        .procont2-p2 h3 {    margin-left: 177px;
          margin-top: 8px;}
        }
  
        @media screen and (min-width:541px) and (max-width:560px){
          .procont2-p2 h3 {    margin-left: 195px;
            margin-top: 8px;}
          }
  
          @media screen and (min-width:561px) and (max-width:767px){
            .procont2-p2 h3 {    margin-left: 212px;
              margin-top: 8px;}
            }
    



  
        
        

            /* End project two -  768 */ 




          /* start project three - 768 */ 
          @media screen and (min-width:451px) and (max-width:470px){

            .procont1-p3 h3{    margin-top: -274px;
              margin-left: 187px;}
     }


     @media screen and (min-width:471px) and (max-width:490px){

      .procont1-p3 h3{    margin-top: -258px;
        margin-left: 193px;}
}

@media screen and (min-width:491px) and (max-width:520px){

  .procont1-p3 h3{    margin-top: -246px;
    margin-left: 201px}
}

@media screen and (min-width:521px) and (max-width:530px){

  .procont1-p3 h3{    margin-top: -222px;
    margin-left: 220px}
}

@media screen and (min-width:531px) and (max-width:540px){

  .procont1-p3 h3{    margin-top: -222px;
    margin-left: 206px}
}





@media screen and (min-width:541px) and (max-width:560px){

  .procont1-p3 h3{    margin-top: -218px;
    margin-left: 220px}
}


@media screen and (min-width:561px) and (max-width:590px){

  .procont1-p3 h3{    margin-top: -198px;
    margin-left: 235px}
}

@media screen and (min-width:591px) and (max-width:620px){

  .procont1-p3 h3{    margin-top: -174px;
    margin-left: 241px}
}

@media screen and (min-width:621px) and (max-width:660px){

  .procont1-p3 h3{    margin-top: -158px;
    margin-left: 241px}
}

@media screen and (min-width:661px) and (max-width:700px){

  .procont1-p3 h3{    margin-top: -130px;
    margin-left: 241px}
}

@media screen and (min-width:701px) and (max-width:730px){

  .procont1-p3 h3{    margin-top: -110px;
    margin-left: 240px}
}

@media screen and (min-width:731px) and (max-width:767px){

  .procont1-p3 h3{    margin-top: -90px;
    margin-left: 241px}
}




@media screen and (min-width:551px) and (max-width:590px){

  .procont1-p3-phone p{margin-left:50px}
}

@media screen and (min-width:591px) and (max-width:700px){

  .procont1-p3-phone p{margin-left:48px}
}
@media screen and (min-width:701px) and (max-width:767px){

  .procont1-p3-phone p{margin-left:43px}
}




@media screen and (min-width:451px) and (max-width:470px){
  .procont2-p3 h3 {    margin-left: 164px;
    margin-top: 8px;}
  }




@media screen and (min-width:471px) and (max-width:490px){
  .procont2-p3 h3 {    margin-left: 171px;
    margin-top: 8px;}
  }
  

  @media screen and (min-width:491px) and (max-width:520px){
    .procont2-p3 h3 {    margin-left: 174px;
      margin-top: 8px;}
    }

  
    @media screen and (min-width:521px) and (max-width:530px){
      .procont2-p3 h3 {    margin-left: 196px;
        margin-top: 8px;}
      }
  


      @media screen and (min-width:531px) and (max-width:540px){
        .procont2-p3 h3 {    margin-left: 183px;
          margin-top: 8px;}
        }
    
  


      @media screen and (min-width:541px) and (max-width:550px){
        .procont2-p3 h3 {    margin-left: 197px;
          margin-top: 8px;}
        }


        @media screen and (min-width:551px) and (max-width:560px){
          .procont2-p3 h3 {    margin-left: 198px;
            margin-top: 8px;}
          }


      @media screen and (min-width:561px) and (max-width:590px){
        .procont2-p3 h3 {    margin-left: 206px;
          margin-top: 8px;}
        }

        @media screen and (min-width:591px) and (max-width:767px){
          .procont2-p3 h3 {    margin-left: 217px;
            margin-top: 8px;}
          }
    
  
  
        @media screen and (min-width:551px) and (max-width:590px){

          .procont2-p3-phone p{margin-left:50px}
        }
        
        @media screen and (min-width:591px) and (max-width:700px){
        
          .procont2-p3-phone p{margin-left:48px}
        }
        @media screen and (min-width:701px) and (max-width:767px){
        
          .procont2-p3-phone p{margin-left:71px}
        }
        
        

            /* End project three -  768 */ 


/* end inside mobile screen 2 */ 


    /* 768 */ 


    @media screen and (min-width:768px) and (max-width: 768px) {
      .open{    margin-left: 469px;}
  
      .procont1 h3{    margin-top: -116px;
        margin-left: 134px;
    }

    .procont1-phone p {margin-left: -8px;
      margin-right: -14px;}

      .procont2 h3{    margin-left: 100px;
        margin-top: -112px}
        .procont2-phone p{    margin-left: 12px;
          margin-right: -37px;}
  
          .procont1-p2 h3{    margin-top: -114px;
            margin-left: 134px;
        }
  
        .procont1-p2-phone p {margin-left: -8px;
          margin-right: -14px;}
  
          .procont2-p2 h3{    margin-left: 100px;
            margin-top: -114px}
            .procont2-p2-phone p{      margin-left: 12px;
              margin-right: -13px;
              margin-top: -3px;}
      
    

              .procont1-p3 h3{    margin-top: -74px;
                margin-left: 134px;
            }
      
            .procont1-p3-phone p {margin-left: -8px;
              margin-right: -14px;}
      
              .procont2-p3 h3{    margin-left: 100px;
                margin-top: -70px}
                .procont2-p3-phone p{        margin-left: 33px;
                  margin-right: 9px;
                  margin-top: -3px;}
        
  }




/* project1 */ 
    /* min width 769 */ 
    @media screen and (min-width:769px) and (max-width: 790px) {
      .open{    margin-left: 493px;}
    }

    @media screen and (min-width:791px) and (max-width: 820px) {
      .open{    margin-left: 510px;}
    }
    @media screen and (min-width:821px) and (max-width: 850px) {
      .open{    margin-left: 538px;}
    }

    @media screen and (min-width:851px) and (max-width: 880px) {
      .open{    margin-left: 570px;}
    }
    @media screen and (min-width:881px) and (max-width: 910px) {
      .open{    margin-left: 598px;}
    }
    @media screen and (min-width:911px) and (max-width: 930px) {
      .open{    margin-left: 627px;}
    }
    @media screen and (min-width:931px) and (max-width: 960px) {
      .open{    margin-left: 649px;}
    }

    @media screen and (min-width:961px) and (max-width: 990px) {
      .open{    margin-left: 676px;}
    }

    @media screen and (min-width:991px) and (max-width:1015px) {
      .open{    margin-left: 703px;}
    }







    @media screen and (min-width:769px) and (max-width: 991px) {

  .overlay-main {height:650px}
  #solutionani1{margin-top: -208px;}
  .projectcontent h1::before {margin-left: -34px;}

  .projectcontent h1::after{    margin-left: -442px;}
  .procont1 h3{ margin-top: -120px;}
  .procont1 p{      margin-left: 21px;
    text-align: left;
    padding-right: 3px;}

  .procont2 h3{ margin-top: -120px;}
  .procont2 p{  margin-left: 25px; text-align:left}


  .ttest {    margin-left: -95px;}


  .tt1span h3{ margin-left: 28px;}


  .footer{display:none}
  .footer-phone{display:block}
  
  
  
  
  .footer-phone{width:100%; height:auto; background-color:black;  margin-top:15px; tedxt-align: center; }
  
  .footer-phone h3{color: #ffbf00;
    font-size: 1.6em;  padding-top:5px; text-align:center  }
  
  #coi1-phone{ color:white; margin-top:10px; margin-left: 27px;}
  .coi1-span-phone{color:white; margin-left:4px; font-size:1.1em }
  
  
  #coi2-phone{ color:white;margin-top: 15px; margin-left: 29px;}
  .coi2-span-phone{color:white; margin-left:4px; font-size:1.1em}
  
  #coi3-phone{ color:white; margin-top:15px; margin-left: 30px;}
  .coi3-span-phone{color:white; margin-left:4px; font-size:1.1em}
  
  
  #coi4-phone{ color:white; margin-top:15px; margin-left: 30px;}
  .coi4-span-phone{color:white; margin-left:4px; font-size:1.1em}
  
  
  
  .footer-allright-phone{ color:white;  margin-top: 7px;
    text-align: center;
    font-size: 1.2em;}
  
    .footer-icons-phone{text-align:center; margin-top: -13px;}
  #footer-sociali-one-phone{ font-size:22px; color:white; }
  #footer-sociali-two-phone{ font-size:22px; color:white;  margin: 9px;}
  #footer-sociali-three-phone{ font-size:22px; color:white;}


    }

    @media screen and (min-width:900px) and (max-width: 991px) {

      .overlay-main {height:650px}
    
    }

    @media screen and (min-width:900px) and (max-width: 940px) {

      #solutionani1{    margin-top: -223px;}
    }

    @media screen and (min-width:941px) and (max-width: 991px) {

      #solutionani1{    margin-top: -225px;}
    }


    @media screen and (min-width:992px) and (max-width: 1000px) {

      #solutionani1{    margin-top: -127px;}
    }



/* start inside min width 769 */ 

@media screen and (min-width:791px) and (max-width: 814px) {

.procont1 h3{    margin-top: -104px;}
.procont2 h3{    margin-top: -104px;}

}

@media screen and (min-width:815px) and (max-width: 830px) {

  .procont1 h3{    margin-top: -84px;}
  .procont2 h3{    margin-top: -84px;}
}

  @media screen and (min-width:831px) and (max-width: 875px) {

    .procont1 h3{    margin-top: -68px;}
    .procont2 h3{    margin-top: -68px;}
  }
  
  @media screen and (min-width:876px) and (max-width: 900px) {

    .procont1 h3{    margin-top: -48px;}
    .procont2 h3{    margin-top: -48px;}
  }
  
  @media screen and (min-width:901px) and (max-width: 950px) {

    .procont1 h3{    margin-top: -28px;}
    .procont2 h3{    margin-top: -28px;}
  }

  @media screen and (min-width:951px) and (max-width: 991px) {

    .procont1 h3{    margin-top: -8px;}
    .procont2 h3{    margin-top: -8px;}
  }


  @media screen and (min-width:880px) and (max-width: 991px) {

    .procont1{margin-left:-38px}

    .procont1 p {margin-left: 33px;}

    .procont2{margin-left:3px}

  }


  @media screen and (min-width:801px) and (max-width: 991px) {

  .ttest {    margin-left: -198px;}
  }

  @media screen and (min-width:801px) and (max-width: 840px) {

  .tt1span h3{ margin-left: 124px;}
  }

  @media screen and (min-width:841px) and (max-width: 900px) {

    .tt1span h3{ margin-left: 106px;}
    }

    @media screen and (min-width:900px) and (max-width: 950px) {

      .tt1span h3{ margin-left: 80px;}
      }
  
      @media screen and (min-width:951px) and (max-width: 991px) {

        .tt1span h3{ margin-left: 52px;}
        
      }


      @media screen and (min-width:769px) and (max-width: 850px) {

      .carousel-control-prev{    margin-top: -166px;}
      .carousel-control-next{    margin-top: -166px;}
      }

      @media screen and (min-width:851px) and (max-width: 900px) {

        .carousel-control-prev{    margin-top: -105px;}
        .carousel-control-next{    margin-top: -105px;}
        }

        @media screen and (min-width:901px) and (max-width: 950px) {

          .carousel-control-prev{    margin-top: -87px;}
          .carousel-control-next{    margin-top: -87px;}
          }

          @media screen and (min-width:951px) and (max-width: 991px) {

            .carousel-control-prev{    margin-top: -37px;}
            .carousel-control-next{    margin-top: -37px;}
            }
  





        /* project2 */ 
        @media screen and (min-width:769px) and (max-width: 991px) {

        .project2content h1::before {margin-left: -34px;}

        .project2content h1::after{    margin-left: -442px;}
        .procont1-p2 h3{ margin-top: -119px;}
        .procont1-p2 p{      margin-left: 21px;
          text-align: left;
          padding-right: 3px;     margin-top: 27px;
        }
    
        .procont2-p2 h3{ margin-top: -119px;}
        .procont2-p2 p{  margin-left: 25px; text-align:left;     padding-right: 13px;}
    
    
        .ttest {    margin-left: -95px;}
    
    
        .tt1span h3{ margin-left: 28px;}
        .project2content h1::after {margin-left: -584px; margin-top:45px}

          }
    
    
    /* start inside min width 769 */ 
    
    @media screen and (min-width:791px) and (max-width: 814px) {
    
      .procont1-p2 h3{    margin-top: -103px;}
      .procont2-p2 h3{    margin-top: -103px;}
    
    }
    
      @media screen and (min-width:815px) and (max-width: 830px) {
    
        .procont1-p2 h3{    margin-top: -83px;}
        .procont2-p2 h3{    margin-top: -83px;}
      }
    
        @media screen and (min-width:831px) and (max-width: 875px) {
    
          .procont1-p2 h3{    margin-top: -67px;}
          .procont2-p2 h3{    margin-top: -67px;}
        }
        
        @media screen and (min-width:876px) and (max-width: 900px) {
    
          .procont1-p2 h3{    margin-top: -47px;}
          .procont2-p2 h3{    margin-top: -47px;}
        }
        
        @media screen and (min-width:901px) and (max-width: 950px) {
    
          .procont1-p2 h3{    margin-top: -27px;}
          .procont2-p2 h3{    margin-top: -27px;}
        }
    
        @media screen and (min-width:951px) and (max-width: 991px) {
    
          .procont1-p2 h3{    margin-top: -7px;}
          .procont2-p2 h3{    margin-top: -7px;}
        }
    
    
        @media screen and (min-width:880px) and (max-width: 991px) {
    
          .procont1-p2{margin-left:-38px}
    
          .procont1-p2 p {margin-left: 33px;}
    
          .procont2-p2{margin-left:3px}
    
        }
    
    
        @media screen and (min-width:801px) and (max-width: 991px) {
    
        .ttest {    margin-left: -198px;}
        }
    
        @media screen and (min-width:801px) and (max-width: 840px) {
    
        .tt1span h3{ margin-left: 124px;}
        }
    
        @media screen and (min-width:841px) and (max-width: 900px) {
    
          .tt1span h3{ margin-left: 106px;}
          }
    
          @media screen and (min-width:900px) and (max-width: 950px) {
    
            .tt1span h3{ margin-left: 80px;}
            }
        
            @media screen and (min-width:951px) and (max-width: 991px) {
    
              .tt1span h3{ margin-left: 52px;}
              }
          
              @media screen and (min-width:811px) and (max-width: 991px) {

                .project2content h1::before {width: 729px; margin-left: -20px;}
                .project2content h1::after {width: 729px; margin-left: -709px;
                  margin-top: 49px;}

                }




                          /* project3 */ 
        @media screen and (min-width:769px) and (max-width: 991px) {
          .project3content h1::before{ margin-left: -17px;}
          .project3content h1::after{ margin-left: -504px;}


          .procont1-p3 h3{ margin-top: -79px;}
          .procont1-p3 p{      margin-left: 21px;
            text-align: left;
            padding-right: -42px;     margin-top: 27px;
          }
      
          .procont2-p3 h3{ margin-top: -79px;}
          .procont2-p3 p{  margin-left: 46px; text-align:left;     padding-right: 42px;}
        }


            /* start inside min width 769 */ 

            @media screen and (min-width:791px) and (max-width: 814px) {
    
              .procont1-p3 h3{    margin-top: -63px;}
              .procont2-p3 h3{    margin-top: -63px;}
            
            }
            
              @media screen and (min-width:815px) and (max-width: 830px) {
            
                .procont1-p3 h3{    margin-top: -51px;}
                .procont2-p3 h3{    margin-top: -51px;}
              }
            
                @media screen and (min-width:831px) and (max-width: 875px) {
            
                  .procont1-p3 h3{    margin-top: -23px;}
                  .procont2-p3 h3{    margin-top: -23px;}
                }
                
                @media screen and (min-width:876px) and (max-width: 900px) {
            
                  .procont1-p3 h3{    margin-top: -7px;}
                  .procont2-p3 h3{    margin-top: -7px;}
                }
                
                @media screen and (min-width:901px) and (max-width: 950px) {
            
                  .procont1-p3 h3{    margin-top: 29px;}
                  .procont2-p3 h3{    margin-top: 29px;}
                }
            
                @media screen and (min-width:951px) and (max-width: 991px) {
            
                  .procont1-p3 h3{    margin-top: 49px;}
                  .procont2-p3 h3{    margin-top: 49px;}
                }
            
            
                @media screen and (min-width:880px) and (max-width: 991px) {
            
                  .procont1-p3{margin-left:-38px}
            
                  .procont1-p3 p {margin-left: 33px;}
            
                  .procont2-p3{margin-left:3px}
            
                }

                @media screen and (min-width:850px) and (max-width: 991px) {
                  /*
                  .procont2-p3 p{    margin-left: 64px;
                    text-align: left;
                    padding-right: 21px;}
*/

                    .procont2-p3 h3{margin-left: 114px;}

                  }


                  



                  /* start 992 */ 

                  @media screen and (min-width:992px) {
                    .projectcontent h1::before {margin-top: -13px;
                      margin-left: -32px;}

                      .projectcontent h1::after {   margin-left: -440px; }


                      .project2content h1::before {margin-top: -14px;
                        margin-left: -48px;}

                        .project2content h1::after {
                          margin-left: -737px;}

                          .project3content h1::before{    margin-top: -15px;
                            margin-left: -14px;}
                            .project3content h1::after{    margin-top: 56px;
                              margin-left: -501px;}

                              .procont1-p3 h3::before {margin-top: -10px;
                                margin-left: -41px;}


                              .procont1-p3 h3::after{    margin-top: 38px;
                                margin-left: -120px;}



                              .procont1-p2 h3::before {margin-top: -10px;
                                margin-left: -45px;}
                                .procont1-p2 h3::after{    margin-left: -124px;}



                      .procont1 h3 {margin-top: 4px;     margin-left: 174px;}

                      .procont1 p{text-align:left;     margin-left: 7px;
                        padding: 0px;
                        word-spacing: -1px;}


                        .procont2 h3 {margin-top: 4px;     margin-left: 158px;}
                        .procont2 p{text-align:left;     margin-left: 7px;
                          padding: 0px;
                          word-spacing: -1px;}

                          .procont1-p2 h3 {margin-top: 5px;     margin-left: 174px;}
          
                          .procont1-p2 p{text-align:left;     margin-left: 7px;
                            padding: 0px;
                            word-spacing: -1px;}
  
  
                            .procont2-p2 h3 {margin-top: 5px; margin-left: 158px;}
                            .procont2-p2 p{text-align:left;     margin-left: 7px;
                              word-spacing: -1px ; }
  
  


                              .procont1-p3 h3 {margin-top: 50px;     margin-left: 174px;}
          
                              .procont1-p3 p{text-align:left;     margin-left: 7px;
                                padding: 0px;
                                word-spacing: -1px; margin-top:31px}
      
      
                                .procont2-p3 h3 {margin-top: 50px;     margin-left: 158px;}
                                .procont2-p3 p{text-align:left;     margin-left: 7px;
                                  padding: 37px; margin-top: -14px;
                                  word-spacing: -1px ; }
      


                          .ttest{    margin-left: -76px;}
                          .tt1span h3{    margin-left: 40px;}

                  }




            /* start inside 992 */ 

            @media screen and (min-width:992px) and (max-width: 1000px) {

              .solution-overlay-content {margin-top: 317px;}

            }


              /* project1 - 992 */ 
            @media screen and (min-width:1015px) and (max-width: 1050px) {

              .procont1 h3,   .procont2 h3  {margin-top: 28px;    }
            }

            @media screen and (min-width:1051px) and (max-width: 1080px) {

              .procont1 h3,   .procont2 h3 {margin-top: 48px;    }
            }

            @media screen and (min-width:1081px)  {

              .procont1 h3,   .procont2 h3 {margin-top: 68px;    }
            }


            @media screen and (min-width:1001px)  {

            .procont2 p{margin-top:29px}
            }

            @media screen and (min-width:1200px)  {

              .procont2 p {padding:2px}
              .procont1 h3{margin-left:227px}
              .procont2 h3{margin-left:193px}

            }


              /* project2 - 992 */ 
              @media screen and (min-width:992px) and (max-width: 1000px) {
                .procont2-p2 p{margin-top:16px; padding:24px; }

              }

              

              @media screen and (min-width:1015px) and (max-width: 1050px) {

                .procont1-p2 h3,   .procont2-p2 h3  {margin-top: 29px;    }
              }

              @media screen and (min-width:1051px) and (max-width: 1080px) {

                .procont1-p2 h3,   .procont2-p2 h3 {margin-top: 49px;    }
              }

              @media screen and (min-width:1081px)  {

                .procont1-p2 h3,   .procont2-p2 h3 {margin-top: 69px;    }
              }


              @media screen and (min-width:1001px)  {

              .procont2-p2 p{margin-top:16px; padding:25px}
              }




              @media screen and (min-width:1200px)  {

                .procont1-p2 h3{margin-left:228px}
                .procont2-p2 h3{margin-left:194px}

              }



              /* project3 - 992 */ 
              @media screen and (min-width:992px) and (max-width: 1000px) {

              .project3content h1::before{    margin-top: -17px;
                margin-left: -14px;}
                .project3content h1::after{    margin-top: 58px;
                  margin-left: -501px;}
                }


              @media screen and (min-width:1001px)  {

                .procont1-p3 h3 {
                  margin-top: 52px;}

                  .procont2-p3 h3 {
                    margin-top: 52px;}
  

                .procont2-p3 p {margin-left: 27px;}


              }

              @media screen and (min-width:1200px)  {

                .procont2-p3 p {margin-left: 7px;}

                .procont2-p3 h3 {  margin-left: 204px;}
              
                
                }






              @media screen and (min-width:1001px) and (max-width: 1100px) {

                .ttest {    margin-left: -129px;}

                .tt1span h3 {
                  margin-left: 94px;
              }

            }
              @media screen and (min-width:1101px) and (max-width: 1199px) {

                .ttest {    margin-left: -129px;}

                .tt1span h3 {
                  margin-left: 94px;
              }
            }


            @media screen and (min-width:1200px) {

              .ttest {    margin-left: -52px;}

              .tt1span h3 {
                margin-left: 16px;
            }
          }






          /* min 991 - footer */ 
          @media screen and (min-width:992px) {


          .footer-phone{display:none}


.footer{width:100%; height:120px; background-color:black;  margin-top:0px; }

.footer h3{color: #ffbf00;
  font-size: 1.5em; margin-left:140px; padding-top:5px;  }

#coi1{margin-left:140px; color:white; margin-top:10px}
.coi1-span{color:white; margin-left:4px}

.footer-allright{float:right; color:white; margin-right:186px}


#coi2{margin-left:40px; color:white; margin-top:10px}
.coi2-span{color:white; margin-left:4px}

#coi3{margin-left:140px; color:white; margin-top:20px}
.coi3-span{color:white; margin-left:8px}


#coi4{margin-left:246px; color:white; margin-top:20px}
.coi4-span{color:white; margin-left:4px}




#footer-sociali-one{float:right; margin-right:-12px;  font-size:25px; color:white; margin-top:10px}
#footer-sociali-two{float:right; margin-right:-66px;  font-size:25px; color:white; margin-top:10px}
#footer-sociali-three{float:right; margin-right:-107px;  font-size:25px; color:white; margin-top:10px}
          }

@media screen and (min-width: 991px) {
  .footer{height:140px}
  .footer h3{margin-left:36px;}
  #coi1{margin-left:36px}
  #coi2{margin-left:18px}
  #coi3{margin-left:37px}
  #coi4{margin-left:175px}

  .footer-allright {margin-right:114px;}

  #footer-sociali-one{margin-right:-6px}
  #footer-sociali-two{margin-right:-77px}
  #footer-sociali-three{margin-right:-125px}

}


@media screen and (min-width: 900px) and (max-width:991px){
  .footer{height:140px}

  .footer h3{margin-left:36px;}
  #coi1{margin-left:5px; }
  #coi2{margin-left:11px; margin-top:20px;}
  #coi3{margin-left:8px}
  #coi4{margin-left:212px}

  .footer-allright {margin-right:72px; margin-top:14px}

  #footer-sociali-one{margin-right:-103px}

  #footer-sociali-two{margin-right:-56px}
  #footer-sociali-three{margin-right:-8px}

}



@media screen and (min-width: 1070px) and (max-width:1200px){

  #coi2 {margin-left: 108px;}

  #coi4 {margin-left: 265px;}
}


@media screen and (min-width: 1201px) and (max-width:1300px){

  #coi2 {margin-left: 108px;}

  #coi4 {margin-left: 265px;}
}


@media screen and (min-width: 1300px) and (max-width:1350px) {
  .footer h3{margin-left:95px;}
  #coi1 {
    margin-left: 91px;}

  #coi2 {margin-left: 108px;}

  #coi4 {margin-left: 265px;}

  #coi3{margin-left:92px}
  .footer-allright {margin-right:126px; margin-top:4px}

  #footer-sociali-one{margin-right:-103px; margin-top: 16px; font-size: 23px;}

  #footer-sociali-two{margin-right:-56px; margin-top: 16px; font-size: 23px;}
  #footer-sociali-three{margin-right:-8px; margin-top: 16px; font-size: 23px;}
}

@media screen and (min-width: 1351px) and (max-width:1450px) {
  .footer h3{margin-left:148px;}
  #coi1 {
    margin-left: 145px;}
    #coi2 {margin-left: 70px;}

    #coi3 {margin-left: 145px;}

    #coi4 {margin-left: 228px;}
    .footer-allright {margin-right:175px;}

  }


  @media screen and (min-width: 1451px) and (max-width:1500px) {
    .footer h3{margin-left:203px;}
    #coi1 {
      margin-left: 200px;}
      #coi2 {margin-left: 70px;}
  
      #coi3 {margin-left: 200px;}
  
      #coi4 {margin-left: 228px;}
      .footer-allright {margin-right:241px;}
  
    }
  

    @media screen and (min-width: 1501px) and (max-width:1600px) {
      .footer h3{margin-left:203px;}
      #coi1 {
        margin-left: 200px;}
        #coi2 {margin-left: 70px;}
    
        #coi3 {margin-left: 200px;}
    
        #coi4 {margin-left: 228px;}
        .footer-allright {margin-right:241px;}
    
      }
  


      @media screen and (min-width: 1600px){
        .footer h3{margin-left:203px;}
        #coi1 {
          margin-left: 200px;}
          #coi2 {margin-left: 120px;}
      
          #coi3 {margin-left: 200px;}
      
          #coi4 {margin-left: 278px;}
          .footer-allright {margin-right:341px;}
      
        }
    






        @media screen and  (min-width:331px) and (max-width:450px) {

          #coi1SpanPhone-Hidden-space{display:none}
        .coi1SpanPhone-Hidden{display:none}
        .coiAlignedspanMobile-Hidden{display:none}
        
        
        .coi1-span-phone{display:block;     margin-left: 54px;
        margin-top: -25px;}
        }
        
        
        
        @media screen and (min-width:417px) and (max-width:435px){
          .coi1-span-phone {
            margin-left: 29px;    margin-top: -23px;}
          }
        
          @media screen and (min-width:436px) and (max-width:450px){
            #coi1-phone {
              margin-left: 15px;}
            .coi1-span-phone {
              margin-left: 41px;    margin-top: -23px;}
        
              #coi2-phone {
                margin-left: 17px;
            }
            .coi2-span-phone {
              margin-left: 4px;
            }
        
            #coi3-phone {
              margin-left: 18px;
          }
        
          .coi3-span-phone {
            margin-left: 3px;}
            #coi4-phone {
              margin-left: 18px;
          }
          .coi4-span-phone {
            margin-left: 2px;}
          }
        


          /* after editing */ 


          @media screen and (min-width:992px) {
            .project3content h1 {margin-top: 21px;}
           }


           /* project one content */ 

           @media screen and (min-width:800px) {
                                                     
            #projectonecontent{    margin-top: -45px;}
           }
           @media screen and (min-width:815px) {
                                                          
             #projectonecontent{    margin-top: -49px;}
            }
            @media screen and (min-width:849px) {
                                                          
              #projectonecontent{    margin-top: -61px;}
             }
             @media screen and (min-width:876px) {
                                                          
              #projectonecontent{    margin-top: -81px;}
             }
             @media screen and (min-width:901px) {
                                                          
              #projectonecontent{    margin-top: -113px;}
             }

             @media screen and (min-width:931px) {
                                                          
              #projectonecontent{    margin-top: -89px;}
             }

             @media screen and (min-width:969px) {
                                                          
              #projectonecontent{    margin-top: -125px;}
             }

             @media screen and (min-width:992px) {
                                                          
              #projectonecontent{    margin-top: -21px;}
             }

             @media screen and (min-width:1015px) {
                                                          
              #projectonecontent{    margin-top: -49px;}
             }

             @media screen and (min-width:1051px) {
                                                          
              #projectonecontent{    margin-top: -57px;}
             }

             @media screen and (min-width:1081px) {
                                                          
              #projectonecontent{    margin-top: -81px;}
             }

             @media screen and (min-width:1200px) {
                                                          
              #projectonecontent{    margin-top: -29px;}
             }


                                                              @media screen and (min-width:1101px) and (max-width:1199px) {
                                                                                                            
                                                                .carousel-indicators{ bottom:50px}
                                                              }


           /* project two content */ 
           
           @media screen and (min-width:800px) {
                                                     
            #projecttwocontent{    margin-top: -42px;}
           }
           @media screen and (min-width:815px) {
                                                          
            #projecttwocontent{    margin-top: -50px;}
            }

            @media screen and (min-width:849px) {
                                                          
              #projecttwocontent{    margin-top: -62px;}
             }
             @media screen and (min-width:876px) {
                                                          
              #projecttwocontent{    margin-top: -82px;}
             }
             @media screen and (min-width:901px) {
                                                          
              #projecttwocontent{    margin-top: -114px;}
             }

             @media screen and (min-width:931px) {
                                                          
              #projecttwocontent{    margin-top: -90px;}
             }

             @media screen and (min-width:969px) {
                                                          
              #projecttwocontent{    margin-top: -126px;}
             }

             @media screen and (min-width:992px) {
                                                          
              #projecttwocontent{    margin-top: -22px;}
             }

             @media screen and (min-width:1015px) {
                                                          
              #projecttwocontent{    margin-top: -50px;}
             }

             @media screen and (min-width:1051px) {
                                                          
              #projecttwocontent{    margin-top: -58px;}
             }

             @media screen and (min-width:1081px) {
                                                          
              #projecttwocontent{    margin-top: -82px;}
             }

             @media screen and (min-width:1200px) {
                                                          
              #projecttwocontent{    margin-top: -30px;}
             }






                        /* project three content */ 
              
           @media screen and (min-width:800px) {
                                                     
            #projectthreecontent{    margin-top: -35px;}
           }
           @media screen and (min-width:815px) {
                                                          
            #projectthreecontent{    margin-top: -39px;}
            }
            @media screen and (min-width:830px) and (max-width:830px) {
                                                          
              #projectthreecontent{    margin-top: -31px;}
              }
  
              @media screen and (min-width:832px) {
                                                          
                #projectthreecontent{    margin-top: -51px;}
               }
  

            @media screen and (min-width:849px) {
                                                          
              #projectthreecontent{    margin-top: -63px;}
             }
             @media screen and (min-width:876px) {
                                                          
              #projectthreecontent{    margin-top: -83px;}
             }
             @media screen and (min-width:901px) {
                                                          
              #projectthreecontent{    margin-top: -115px;}
             }

             @media screen and (min-width:931px) {
                                                          
              #projectthreecontent{    margin-top: -91px;}
             }


             @media screen and (min-width:951px) and (max-width:968px) {
                                                          
              #projectthreecontent{    margin-top: -111px;}
             }


             @media screen and (min-width:969px) {
                                                          
              #projectthreecontent{    margin-top: -127px;}
             }

             @media screen and (min-width:992px) {
                                                          
              #projectthreecontent{    margin-top: -20px;}
             }

             @media screen and (min-width:1015px) {
                                                          
              #projectthreecontent{    margin-top: -12px;}
             }

             @media screen and (min-width:1101px) {

             #carouselindicators3{bottom:0px}
             }

             @media screen and (min-width:992px) {

              .project3content h1::before {
                margin-top: -18px;}
  
            }     

            @media screen and (min-width: 1001px) {
            .project3content h1::before {
                margin-top: -20px;
            }
          }
      
     
     




          @media screen and (min-width:800px) {
#demo, #demo-p2, #demo-p3{width:93%; margin:0 auto; margin-top: 45px;}
            .project2content h1 {    margin-top: 19px;}
            .project2content h1::after {margin-top: 43px;}

          }     
          
          @media screen and (min-width:811px) {

            .project2content h1::after {margin-top: 50px;}

          }     


          @media screen and (min-width:832px) {
            #demo, #demo-p2, #demo-p3{width:92%; margin:0 auto; margin-top: 45px;}
                      }       
                         @media screen and (min-width:850px) {
                        #demo, #demo-p2, #demo-p3{width:89%; margin:0 auto ; margin-top: 45px;}
                                  }  
                                  @media screen and (min-width:870px) {
                                    #demo, #demo-p2, #demo-p3{width:87%; margin:0 auto; margin-top: 45px;}
                                              }  
            
                                              @media screen and (min-width:880px) {
                                                #demo, #demo-p2, #demo-p3{width:86%; margin:0 auto; margin-top: 45px;}
                                                          }  
            
                                  
                                  @media screen and (min-width:900px) {
                                    #demo, #demo-p2, #demo-p3{width:83%; margin:0 auto; margin-top: 45px;}
                                              }  
                                              
                                              @media screen and (min-width:930px) {
                                                #demo, #demo-p2, #demo-p3{width:83%; margin:0 auto; margin-top: 45px;}
                                                          }
                                                          @media screen and (min-width:970px) {
                                                            #demo, #demo-p2, #demo-p3{width:79%; margin:0 auto; margin-top: 45px;}
                                                                      }

                                                                      @media screen and (min-width:992px) {
                                                                        #demo, #demo-p2, #demo-p3{width:97%; margin:0 auto; margin-top: 45px;}
                                                                                  }

                                                                                  @media screen and (min-width:1015px) {
                                                                                    #demo, #demo-p2, #demo-p3{width:94%; margin:0 auto; margin-top: 45px;}
                                                                                              }

                                                                               @media screen and (min-width:1050px) {
                                                                                        #demo, #demo-p2, #demo-p3{width:92%; margin:0 auto; margin-top: 45px;}
                                                                                     }

                                                                                                          @media screen and (min-width:1080px) {
                                                                                                            #demo, #demo-p2, #demo-p3{width:89%; margin:0 auto; margin-top: 45px;}
                                                                                                                      }



                                                                       @media screen and (min-width:1110px) {
                                                                        #demo, #demo-p2, #demo-p3{width:87%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1140px) {
                                                                        #demo, #demo-p2, #demo-p3{width:85%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1170px) {
                                                                        #demo, #demo-p2, #demo-p3{width:83%; margin:0 auto; margin-top: 45px;
                                                                       }

                                                                       @media screen and (min-width:1200px) {
                                                                        #demo, #demo-p2, #demo-p3{width:93%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1220px) {
                                                                        #demo, #demo-p2, #demo-p3{width:92%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1240px) {
                                                                        #demo, #demo-p2, #demo-p3{width:90%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1270px) {
                                                                        #demo, #demo-p2, #demo-p3{width:88%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1290px) {
                                                                        #demo, #demo-p2, #demo-p3{width:87%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1310px) {
                                                                        #demo, #demo-p2, #demo-p3{width:85%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1340px) {
                                                                        #demo, #demo-p2, #demo-p3{width:83%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1380px) {
                                                                        #demo, #demo-p2, #demo-p3{width:81%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1400px) {
                                                                        #demo, #demo-p2, #demo-p3{width:80%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1420px) {
                                                                        #demo, #demo-p2, #demo-p3{width:79%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1440px) {
                                                                        #demo, #demo-p2, #demo-p3{width:78%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1460px) {
                                                                        #demo, #demo-p2, #demo-p3{width:77%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1490px) {
                                                                        #demo, #demo-p2, #demo-p3{width:75%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1520px) {
                                                                        #demo, #demo-p2, #demo-p3{width:74%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1550px) {
                                                                        #demo, #demo-p2, #demo-p3{width:72%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1580px) {
                                                                        #demo, #demo-p2, #demo-p3{width:71%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1600px) {
                                                                        #demo, #demo-p2, #demo-p3{width:70%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1650px) {
                                                                        #demo, #demo-p2, #demo-p3{width:68%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1680px) {
                                                                        #demo, #demo-p2, #demo-p3{width:67%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1730px) {
                                                                        #demo, #demo-p2, #demo-p3{width:65%; margin:0 auto; margin-top: 45px;}
                                                                       }
                                                                       @media screen and (min-width:1800px) {
                                                                        #demo, #demo-p2, #demo-p3{width:62%; margin:0 auto; margin-top: 45px;}
                                                                       }
 
                                                                      }

/* last updates 30-6 */
@media screen and (min-width:300px) {
  .projectcontent h1 {
    font-size: 22px;}
    .projectcontent h1::after {  
      width: 548px;}
  }
  

  @media screen and (min-width:320px) {
  .projectcontent h1::before {    width: 383px;
    margin-left: -39px;}
} 
@media screen and (min-width:350px) {

  .projectcontent h1::before {width:600px;     margin-left: -131px;}
  .projectcontent h1::after {width:600px;  }

}

@media screen and (min-width:360px) {
  .projectcontent h1 {
    font-size: 23px;}
  }

  @media screen and (min-width:413px) {
  .projectcontent h1 {
    font-size: 24px;}
}
@media screen and (min-width:413px) and (max-width:536px) {

.projectcontent h1::after {width:700px; margin-left:-390px }
}


@media screen and (min-width:431px) {
  .projectcontent h1 {
    font-size: 25px;}
  }
  @media screen and (min-width:449px) {
    .projectcontent h1 {
      font-size: 26px;}
    }
    @media screen and (min-width:466px) {
      .projectcontent h1 {
        font-size: 27px;}
      }
      @media screen and (min-width:484px) {
        .projectcontent h1 {
          font-size: 28px;}
        }
        @media screen and (min-width:502px) {
          .projectcontent h1 {
            font-size: 29px;}
          }

          
          @media screen and (min-width:520px) and (max-width:536px) {
            .projectcontent h1 {
              font-size: 30px;}
            }

          

              

            @media screen and (min-width:500px) {

              .projectcontent h1::after {
                width: 800px;
                margin-left: -500px;}

                .projectcontent h1::after {
                  width: 752px;
                  margin-left: -431px;}
            }

            @media screen and (min-width:537px) {
              .projectcontent h1 {
                font-size: 23px;}
                .projectcontent h1::before {
                  width: 513px;
                  margin-left: 0px;}
                  .projectcontent h1::after {
                    width: 513px;
                    margin-left: -519px;}
  
              }

            @media screen and (min-width:700px) {
              .projectcontent h1::before {
                width: 541px;
                margin-left: 0px;}
                .projectcontent h1::after {
                  width: 541px;
                  margin-left: -541px;}

                .projectcontent h1 {
                  font-size: 24px;
              }
            }



          @media screen and (min-width:769px) and (max-width:810px){
            .projectcontent h1 {
              font-size: 28px;}
              .projectcontent h1::before {
                width: 629px;}
                .projectcontent h1::after {
                  width: 629px;     margin-top: 43px;     margin-left: -631px;}
          }

          @media screen and (min-width:811px){
            .projectcontent h1 {
              font-size: 29px;}
              .projectcontent h1::before {
                width: 650px; margin-left: 0px;}
                .projectcontent h1::after {
                  width: 650px;
                  margin-left: -655px; margin-top: 42px;
              }

            }

            @media screen and (min-width:537px) and (max-width:768px){
              .projectcontent h1::after {
                margin-top: 43px;}
              }



                          /* project 1 text min 992 */ 

                      @media screen and (min-width:992px) and (max-width:1200px){

                            .procont2 p {    padding: 5px; margin-top:23px}
                      }                     
                      @media screen and (min-width:1200px) {

                        .procont2 p {    padding: 13px; margin-top:16px}
                  }



  /* project 2 */ 

  @media screen and (min-width:300px) {
.project2content h1 {
    font-size: 22px;}
  }

  @media screen and (min-width:325px) {
    .project2content h1::after {    width: 734px;
      margin-top: 46px;
      margin-left: -458px;}
    }

  @media screen and (min-width:330px) {
  .project2content h1::after {margin-top: 46px;}
  }

  @media screen and (min-width:340px) {
    .project2content h1::before {    width: 734px;
      margin-left: -252px;}
    }

    @media screen and (min-width:340px) {
      .project2content h1::before {    width: 734px;
        margin-left: -252px;}
      }
  
      @media screen and (min-width:360px) {
        .project2content h1 {
            font-size: 23px;}
          }

          @media screen and (min-width:413px) {
            .project2content h1 {
                font-size: 24px;}
              }
              @media screen and (min-width:431px) {
                .project2content h1 {
                    font-size: 25px;}
                  }
                  @media screen and (min-width:449px) {
                    .project2content h1 {
                        font-size: 26px;}
                        .project2content h1::after {
                          margin-top: 50px;
                      }
                      }
                    
                      @media screen and (min-width:466px) {
                        .project2content h1 {
                            font-size: 27px;}
                          }
                          @media screen and (min-width:484px) {
                            .project2content h1 {
                                font-size: 28px;}
                              }
                              @media screen and (min-width:502px) {
                                .project2content h1 {
                                    font-size: 29px;}
                                  }
                                  @media screen and (min-width:520px) {
                                    .project2content h1 {
                                        font-size: 30px;}
                                      }
                                      
    
                                  @media screen and (min-width:537px) {
                                    .project2content h1 {
                                        font-size: 23px;}
                                        .project2content h1::before {
                                          width: 502px;
                                          margin-left: -7px;
                                      }
                                      .project2content h1::after {
                                        width: 502px;
                                        margin-left: -292px; margin-top: 43px;
                                    }
                                     }
                    
                                     @media screen and (min-width:575px) {
                                     .project2content h1::before {
                                      width: 571px;
                                      margin-left: 2px;}

                                      .project2content h1::after {
                                        width: 571px;
                                        margin-left: -573px;
                                        margin-top: 43px;}
                                    }

                                    @media screen and (min-width:700px) {
                                    .project2content h1 {
                                      font-size: 24px;}
                                      .project2content h1::before {
                                        width: 595px;
                                        margin-left: 2px;}
                                        
                                        .project2content h1::after {
                                          width: 595px;
                                          margin-left: -598px;
                                          margin-top: 46px;}
                                  }



                                  @media screen and (min-width:769px) and (max-width:810px){
                                    .project2content h1 {
                                      font-size: 28px;}
                                      .project2content h1::before {
                                        width: 697px; margin-left:0px;}
                                        .project2content h1::after {
                                          width: 697px;     margin-top: 42px;     margin-left: -699px;}
                                  }
                        
                                  @media screen and (min-width:811px){
                                    .project2content h1 {
                                      font-size: 29px;}
                                      .project2content h1::before {
                                        width: 723px; margin-left: 0px;}
                                        .project2content h1::after {
                                          width: 723px;
                                          margin-left: -724px; margin-top: 43px;
                                      }
                                    }
                        
                                    @media screen and (min-width:1200px){
                                      .project2content h1::after {margin-top: 45px;}
                                      }



                                      @media screen and (min-width:769px){
                                      .procont2-p2 p {    padding: 9px;   margin-top: 18px;}
                                      }               
                                    @media screen and (min-width:992px){
                                        .procont2-p2 p {    padding: 21px;   margin-top: 20px;}
                                        }

                                        @media screen and (min-width:1200px){
                                        .procont2-p2 h3::before {margin-top: -11px;}
                                        }


  /* project 3 */ 


  @media screen and (min-width:300px) {
    .project3content h1 {
        font-size: 22px;}
      }
    

      @media screen and (min-width:341px) {
      .project3content h1:before {
        width: 700px;
        margin-top: -21px;
        margin-left: -316px;}
        .project3content h1::after {
          width: 700px;
          margin-top: 47px;
          margin-left: -327px;
      }
    }
    @media screen and (min-width:360px) {
    .project3content h1 {
      font-size: 23px;}
  }

  @media screen and (min-width:385px) {
  .project3content h1::after {margin-left: -390px;}
  }


  @media screen and (min-width:413px) {
    .project3content h1 {
        font-size: 24px;}
      }
      @media screen and (min-width:431px) {
        .project3content h1 {
            font-size: 25px;}
          }
    
          @media screen and (min-width:400px) {
          .project3content h1::after {margin-top: 50px;}
          }
          
          @media screen and (min-width:449px) {
            .project3content h1 {
                font-size: 26px;}
              }
              @media screen and (min-width:466px) {
                .project3content h1 {
                    font-size: 27px;}
                  }
                  @media screen and (min-width:484px) {
                    .project3content h1 {
                        font-size: 28px;}
                      }

                      @media screen and (min-width:460px) {
                        .project3content h1:before {width:800px; margin-left: -275px;}

                      .project3content h1::after {
                        width:800px;    margin-left: -487px;}
                    }

                    @media screen and (min-width:484px) {
                    .project3content h1::after {
                      margin-top: 54px;}
                  }

                  @media screen and (min-width:502px) {
                    .project3content h1 {
                        font-size: 29px;}
                      }
                      @media screen and (min-width:520px) {
                        .project3content h1 {
                            font-size: 30px;}
                          }

                          @media screen and (min-width:537px) {
                            .project3content h1 {
                                font-size: 23px;}
                                .project3content h1:before {
                                  width: 282px;
                                  margin-left: -8px;
                              }
                              .project3content h1::after {
                                width: 282px;
                                margin-left: -276px; margin-top:46px
                            }
                              }
        
                              @media screen and (min-width:700px) {
                                .project3content h1 {
                                    font-size: 24px;}
                                    .project3content h1:before {
                                      width: 282px;
                                      margin-left: -1px;}
                                      .project3content h1::after {
                                        width: 282px;
                                        margin-left: -281px;
                                        margin-top: 46px;}
                                }

                                @media screen and (min-width:769px) and (max-width:810px){
                                  .project3content h1 {
                                    font-size: 28px;}
                                    .project3content h1:before {
                                      width: 330px;}
                                      .project3content h1::after {
                                        width: 330px;
                                        margin-left: -327px; margin-top: 54px;}

                                  }
                                  @media screen and (min-width:811px) {
                                    .project3content h1 {
                                      font-size: 29px;}
                                      .project3content h1:before {
                                        width: 340px;}
                                        .project3content h1::after {
                                          width: 340px;
                                          margin-left: -340px; margin-top: 54px; }
                                    }
                                    @media screen and (min-width:991px) {
                                      .project3content h1::after {
                                        margin-top: 52px; }
                                      }
                                      @media screen and (min-width:1200px) {
                                        .project3content h1::after {
                                          margin-top: 54px; }
                                        }
  


                                        @media screen and (min-width:768px) {
                                        .procont2-p3-phone p {
                                          margin-left: 11px;
                                          margin-right: -34px;
                                          margin-top: -3px;}
                                      }


                                      @media screen and (min-width:769px) {
                                        .procont1-p3 p {margin-top: 13px; padding:16px;     margin-left: 47px;}
                                      }


                                      @media screen and (min-width:992px) {
                                      .procont2-p3 p {margin-top: -10px; padding:30px}
                                      }



                                      @media screen and (min-width:769px) {
                                        .procont1-p3 h3::after {    margin-top: 39px;}
                                      .procont2-p3 h3::after {margin-top: 36px;}
                                      }

                                      @media screen and (min-width:992px) and (max-width:1000px) {
                                        .procont1-p3 h3::before {
                                          margin-top: -11px;}
                                          .procont1-p3 h3::after {
                                            margin-top: 40px;}
                                            .procont2-p3 h3::before {    margin-top: -12px;}

                                        }
  
                                @media screen and (min-width:1001px) and (max-width:1200px) {
                                  .procont2-p3 h3::after {
                                    margin-top: 38px;}
                                }

                                @media screen and (min-width:1200px) {
                                .procont1-p3 h3::after {
                                  margin-top: 38px;}
                                  .procont2-p3 h3::before {    margin-top: -11px;}
                              }

                              @media screen and (min-width:1201px) {
                              .procont2-p3 h3::after {
                                margin-top: 37px;}
                            }


                            










                            






/* footer */ 
.page-footer{background-color:black; height: 135px; color:white; margin-top: 20px;}
.footer-icons{        margin-left: 180px;
  margin-top: -16px;
  line-height: 38px;}

#footerI{float:left; }
.footerSpan{float:left;     margin-top: -12px;
  padding-left: 10px;}



.footer-social a i{    color: white;
  font-size: 25px;
  text-decoration: none!important;
  margin-left: 29px;
  margin-top: 40px;}


  .footer-social a:hover{text-decoration: none !important;
    outline:none
  }

  .footer-copyright{    margin-top: 18px;}

  .footer-sectionTwo{margin-left:20px}



  /* footer responsive */ 
  /* min 300 */
  @media screen and  (min-width:300px)  {

  .footerSpan {    padding-left: 8px;}

  .footer-icons {
    margin-left: -5px;}

    .page-footer{height:229px}


    .footer-social a i {margin-left: 18px;
      margin-top: 23px;}

      .footer-sectionTwo {
        margin-left: -39px;
    }
    .footer-copyright {
      margin-top: 15px;
      font-size: 13px;
      margin-left: 33px;
  }

  }


  @media screen and  (min-width:310px)  {

  .footer-icons {margin-left: 4px;}
  }

  @media screen and  (min-width:320px)  {

    .footer-icons {margin-left: 9px;}
    }
    @media screen and  (min-width:330px)  {

      .footer-icons {margin-left: 16px;}
      }  
        @media screen and  (min-width:350px)  {

        .footer-icons {margin-left: 29px;}
        }
  
        @media screen and  (min-width:370px)  {

          .footer-icons {margin-left: 35px;}
          }
    
          @media screen and  (min-width:380px)  {

            .footer-icons {margin-left: 42px;}
            }
            @media screen and  (min-width:390px)  {
              .footer-copyright {font-size: 14px;}

              .footer-icons {margin-left: 45px;}
              }
              @media screen and  (min-width:400px)  {

                .footer-icons {margin-left: 50px;}
                }
                @media screen and  (min-width:410px)  {
.footer-copyright {
    font-size: 15px;
}
                  .footer-icons {margin-left: 59px;}
                  }
                  @media screen and  (min-width:420px)  {

                    .footer-icons {margin-left: 65px;}
                    }

                    @media screen and  (min-width:440px)  {
                      .footer-icons {margin-left: 70px;}
                    .footerSpan {
                      padding-left: 10px;}
                    }

                    @media screen and  (min-width:450px)  {

                      .footer-icons {margin-left: 78px;}
                      }
  
                      @media screen and  (min-width:470px)  {

                        .footer-icons {margin-left: 88px;}
                        }
                        @media screen and  (min-width:490px)  {

                          .footer-icons {margin-left: 100px;}
                          }
                          @media screen and  (min-width:500px)  {

                          .footer-icons {
                            margin-left: 24px;
                        }
                      }
                        @media screen and  (min-width:768px)  {

                        .footer-sectionTwo {    margin-top: 9px;}
                        .page-footer {
                          height: 137px}
                      }

                      @media screen and  (min-width:850px)  {
                      .footer-icons {
                        margin-left: 60px;
                    }
                  }
                
                  @media screen and  (min-width:992px)  {

                  .footer-icons {
                    margin-left: 90px;}
                  }

                  @media screen and  (min-width:1000px)  {

                  .footer-icons {
                    margin-left: 115px; }
                  }
                  @media screen and  (min-width:1150px)  {

                    .footer-icons {
                      margin-left: 147px; }
                    }
                    @media screen and  (min-width:1300px)  {

                      .footer-icons {
                        margin-left: 187px; }
                      }
                      @media screen and  (min-width:1400px)  {

                        .footer-icons {
                          margin-left: 225px; }
                        }