*, *::after, *::before {
  box-sizing: border-box;

}
* {
  font-size: 100%;
  font-family: "Roboto", sans-serif;
  font-weight: 400;

 }
  
@media (min-width:320px) and (max-width:568px) {
  .top-margin-title6, .top-margin-title5, .top-margin-title4, .top-margin-title3, .top-margin-title2, .top-margin-title{
    /*background-color: #F09A9D;*/
    text-align: center;
    margin-top: -85px;
  }
  }

.page {
  /*display: flex;*/
  flex-wrap: wrap;
}

.main-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;    
  padding: 20px 20px;
  max-height: 100px;
  /*min-width:450px;*/
  min-width: 750px;
}

.textstyle-about{
  width:40%; 
  margin-left: 20%; 
  color: white;
}

.description-section{
  padding: 10px 10px;
  background-color: rgb(230, 237, 241);
}
.description-section p{
  font-size: 0.9em;
}

.header-wrapper{
  display: flex;
  width: 370px;
  justify-content: space-between;
}

.main-nav, .about-nav-btn, .projects-nav-btn, .logo-img{
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  /*margin-left: 20px;*/
  /* border-radius: 50px; */
 
}

.banner-img{
  display: flex;
  align-items: center;
  max-width: 450px;
  max-height: 200px;
  padding: 10px;
  border: 2px solid black ;
}

.banner-img2{
  display: flex;
  align-items: center;
  max-width: 450px;
  max-height: 200px;
  padding: 10px;
  margin:2px;
  border: 2px solid black ;
}

.reference-img{
  display: flex;
  align-items: center;
  max-width: 450px;
  max-height: 200px;
  padding: 10px;
  border: 2px solid black ;
}


.stylesheet-img2{
  display: flex;
  align-items: center;
  max-width: 450px;
  max-height: 200px;
  padding: 10px;
  margin:2px;
  border: 2px solid black ;
}


.home-wrapper{
  display: flex;
  justify-content: center;

}
.home-wrapper-index{
  display: flex;
  justify-content: center;
  /* margin-left: 25px; */

}
.home-wrapper-p1-process{
  display: flex;
  justify-content: center;
  /*max-width: 200px;*/
}

.home-products-wrapper{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
 

}

.home-products-wrapper-p1{
  width: 1150px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
 

}


.home-products-wrapper-p5{
  width: 1150px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
 

}

.home-products-wrapper-p4{
  width: 1150px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
 

}

.home-products-wrapper-p10{
  width: 1150px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
 

}

.home-products-wrapper-p9{
  width: 1150px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
 

}

.home-products-wrapper-p6{
  width: 1150px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

}
.home-products-wrapper-p1-process{
  width: 700px;
  display: flex;
  /*justify-content: flex-start;*/
  flex-wrap: wrap;


}

.home-products-wrapper-p5-process{
  /* width: 50px; */
  /* display: flex;
  justify-content: flex-start;
  flex-wrap: wrap; */
 /* margin-top: -38.5%;
 margin-left: 14%; */
}
.home-products-wrapper-p1-process-gallery{
  width: 700px;
  display: flex;
  /*justify-content: flex-start;*/
  flex-wrap: wrap;
}

#p1-process-gallery-size{
  /* width:100%; 
  height:450px; */
  /* border-radius: 20px; */
}

#p3-process-gallery-size{
  width:100%; 
  height:550px;
  /* border-radius: 20px; */
}
.home-products{
  /*border: 1px solid #fff;*/
  /* max-width: 800px; */
  /* padding-right: 25px; */
  /* padding-bottom: 25px; */
  /* margin-right: 0;
  margin-left: 0; */
  padding: 55px;
}

.home-products-p2{
  /*border: 1px solid #fff;*/
  
 
}

.home-products-p1{
 
}

.p1-sample-process-wrapper{
  width: 630px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

}

.products-detail-wrapper{

  display: flex;
  width: 1200px;
  /*justify-content: flex-start;*/
  /*flex-wrap: wrap;*/

}

.product-detail-description{
  background-color: rgb(230, 237, 241);
  min-width: 170px;
  /*max-height: 390px;*/
  padding-left: 10px;
  padding-right: 10px;

}

.home-products-text{
  /*border: 1px solid #fff;*/
  /*margin-top: 30px;*/
  margin-bottom: 5em;
  width: 100%;
  text-align: center;
  /* margin-right: 2%; */
  /* margin-left: 5%; */
}

.home-products-text-about{
  /*border: 1px solid #fff;*/
  /*margin-top: 30px;*/
  margin-bottom: 5em;
  /* width: 100%; */
  text-align: center;
  /* margin-right: 2%; */
  /* margin-left: 5%; */
}

.home-products-text-p6{
 /* margin-left: 0px; */
  margin-bottom: 5em;
  text-align: center;

}

.home-products-text2{
  /*border: 1px solid #fff;*/
  /*margin-top: 30px;*/
  margin-bottom: 5em;
  width: 100%;
  text-align: center;
  /* margin-right: 2%; */
  /* margin-left: 5%; */
}


.footer-contents{
  display: flex;
  justify-content: space-between;
  flex: 1;                /*  stretch to match the width of footer */
  flex-wrap: wrap;
  justify-content: center;
  /*min-width: 450px;*/
  position:absolute;
  width:100%;
  /* min-width: 750px; */
}

.footer-Contact, .footer-info, .footer-address, .footer-social{
  /* background-color: #1a1b1c; */
  flex: initial;
  /*width: 800px;*/
  flex-wrap: wrap;

}
.footer-address{
  width: 80%;
}
.footer-Contact{
 width: 150px;
}
.footer-social{
  /* margin-bottom: 50px; */
  width: 95%;
  margin-top:-100px;
 }
/*---------------------------------------------------FAQ section*/
.faq-container {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
  justify-content: center;
  background-color: rgb(230, 237, 241);
  margin-bottom: 4em;
}

.faq-content-left{
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 50%;
	padding: 10px;


}

.faq-content-right{
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 50%;
  padding: 10px;

}

#ilook{
  width: 250px;
  /* height: 200px; */
}

#mag{
  width: 100%;
  /* height: 450px; */
}


.resumeImg{
  max-width: 100%;
  max-width: 700px;
  transform: rotate(90deg);
}


.resumeImg2{
  max-width: 100%;
  max-width: 700px;
}

.back-but-container{
  text-align: center;
  /* margin-right: 10%; */
  margin-top: 15px;
}

.phase-vid{
  
  width: 100%;
  height: 100%;
  max-height: 500px;
  /* padding: 55px; */
  /* max-width: 900px; */
}


/* vertical scrolling tabs on process pages */
.vertic-nav{
  /* display: block; */
  position:fixed;
  width: 75%;
  padding: 15px 10px;
  /* top:138px; */
  margin-left: -25%;
  height: auto;
  max-height: 95%;
}

.vertic-nav2{
 /* display: block; */
 position:fixed;
 width: 50%;
 padding: 15px 10px;
 /* top:138px; */
 margin-left: -26.5%;
 height: auto;
 max-height: 95%;
}





/* Mobile Styles */
@media only screen and (max-width: 435px) {
  body {
    /*background-color: #F09A9D; */
  }
  .navbar-projects .logo{
    font-size: 15px;
  }
  /* Will fix the width for tools used picture */
  .tools-usedp5{
    width: 100%;
    }

#p3-h2{
  width: 100%;
  text-align: unset;
}
#p-h6{
  /* width: 100%; */
  /* text-align: unset */
}

.main-header{
  width: 100%;
  min-width: unset;
  justify-content: center;
}
.header-logo{
  margin-left: 0;
  justify-content: left;
}

.p3-sketch-section{
  width: 100%;
}

.index-img{
  border-radius: 50%;
  width: 25%; 
  margin-top: 82%;
}
#p3-h6{
  width: 100%;
  font-size: 0.7em;
}

.project1sample{
width: 100%;
}

/* .p4-txt{
  width: 50%;
  margin-left: 25%;
} */
.project4sample{
width: 100%;
margin-left: 0;
}

.process-p7-sample1-big:hover{
  -ms-transform: scale(1); /* IE 9 */
  -webkit-transform: scale(1); /* Safari 3-8 */
  transform: scale(1); 
  padding: 30px;
  z-index: 5;
  cursor: zoom-in;

}

.project2sample-process{
  width: 100%;
  /* max-width: 320px; */
  max-height: 280px;
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
}
.footer-contents{
  width: 100%;
  height: unset;
  /* padding: 20px; */
}
.footer-address{
  width: unset;
  height: 220px;
}
.footer-container{
 height: 300px;
}

.textstyle-challenge{
  max-width: unset;
}
.textstyle-overcoming{
max-width: unset;

}

#videosList{
  height: 100%;
  width: 100%;
}
.animate{
  font-size: 25px;
}
#animated-border-red{
  width: 100%;
}
#animated-border-green{
  width: 100%;

}
#animated-border-blue{
  width: 100%;

}
#animated-border-orange{
  width: 100%;

}

#animated-border-pink{
  width: 100%;

}
.home-products{
  width: 100%;
}
.process-p1-sample1{
width: 100%;
height: unset;
}
.process-p1-sample1-small{
width: 100%;
height: unset;
}
.process-p1-sample1-big{
  width: 100%;
  height: unset;
}
.process-p2-sample1{
  width: 100%;
  height: 200px;
}
.process-p3-sample1{
  width: 100%;
  height: unset;
}
#iframemobile{
  width: 100%;
  height: 200px;
}
.leftside{
  float: unset;
  width: 100%;
}
#ilook{
  width: 100%;
}
#mag{
  width: 100%;
  height: unset;
}


.home-products-wrapper-p5-process{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;

}

.resumeImg{
  max-width: 100%;
  max-width: 200px;
  transform: rotate(90deg);
}

.resumeImg2{
  max-width: 100%;
  max-width: 300px;
}




h2 {
	/*font-family: 'AvenirNextLTPro-UltLt', Helvetica, Arial, sans-serif;*/
	font-weight: 100;
	font-size: 1.5em;
  color: #6bccef;
	/* text-shadow: 1px 1px 2px black, 0px 0px 25px blue, 0 0 5px darkblue; */

}

#p1-process-gallery-size{
  width:100%; 
  height:200px;
  border-radius: 20px;
}

#p3-process-gallery-size{
  width:100%; 
  height:200px;
}

.back-but-container{
  text-align: center;
  margin-right: 0px;
}

.process-p5-download{
	width: 100%;
	height: 100px;
	/* max-height: 650px; */
	border-radius: 10%;
	background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
	overflow:hidden;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid purple;
	margin-bottom: 1em;
}

.home-products-p2-p5{
  width: 100%;
}

.rightside2{
  float: right;
  margin-right: 0px;
}

.home-wrapper-index{
  margin-left: 0px;
}


#home-project-border{
  width: 100%;
}

.phase-vid{
width: 100%;
height: 100%;
}


.footer-social{
margin-top: -60px;
}


.vertic-nav{
display: none;
}
.vertic-nav2{
  display: none;
  }



/* zoom on hover */

.process-p1-sample1-small:hover{
  -ms-transform: scale(1); /* IE 9 */
  -webkit-transform: scale(1); /* Safari 3-8 */
  transform: scale(1); 
  /* padding: 20px; */
  /* z-index: 5; */
}

/* do not display zoom icon on mobile */
.fa {
  display: none !important;
}

/* do not show home tab and frames' strings */
.tabs{
  display: none;
}
.nakh{
  display: none;

}

.p4-process-img{
  width: 100%;
  height: unset;
}

/* do not display my picture in about on mobile */

.bg-about{
  background-image: unset !important;
}
.textstyle-about{
  width: 100%;
  color: #4b4b4b;
}
}



/* Tablet Styles */
@media only screen and (min-width: 415px) and (max-width: 1024px) {
  body {
    /*background-color: #F5CF8E; /* Yellow */
  }

  #p3-h2{
    width: 100%;
    /* text-align: unset; */
  }
  #p-h6{
    width: 100%;
    /* text-align: unset */
  }
  .main-header{
    width: 100%;
    min-width: unset;
    /* justify-content: center; */
  }

  .header-logo{
    margin-left: 0;
    justify-content: left;
  }
  
  #p3-h6{
    width: 100%;
    /* font-size: 0.7em; */
    max-width: unset;
  }
  
  .project1sample{
  width: 100%;
  
  
  }

  

  .p3-sketch-section{
    width: 100%;
  }
  

  .index-img{
    border-radius: 50%;
    width: 25%; 
    margin-top: 82%;
  }
  .footer-contents{
    width: 100%;
  
  }
  .footer-address{
height: 500px;
width: unset;  
  }
  .textstyle-challenge{
    max-width: unset;
  }
.textstyle-overcoming{
  max-width: unset;

}

.home-products-wrapper{
  justify-content: center;
}
.project1sample-process{
  max-width: 100%;
}

.process-p1-sample1{
  width: 100%;
  /* height: unset; */
  }
.process-p1-sample1-small{
    width: 100%;
  }
  .process-p1-sample1-big{
    width: 100%;
  }
  
  .home-products{
    max-width: unset;
  }

  .process-p2-sample1{
    width: 100%;
    height: unset;
  }

  .process-p3-sample1{
    width: 100%;
    height: unset;
  }
  #iframemobile{
    width: 100%;
  }
  .leftside{
    float: unset;
  }
  .rightside{
    float: unset;
  }

 

  .home-products-wrapper-p5-process{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
  
  }
  
  

  .resumeImg2{
    max-width: 100%;
    max-width: 500px;
  
  }
 



  .back-but-container{
    text-align: center;
    margin-right: 0px;
 }

 .home-products-p2-p5{
  width: 100%;
}

.footer-social{
/* width: 620px; */
/* margin-top: -300px; */
/* margin-left: 20%; */

}

/* disable scrolling tab on mobile and tablet */
.vertic-nav{
  display: none;
  }

  .vertic-nav2{
    display: none;
    }


  
  /* zoom on hover */
  
  .process-p1-sample1-small:hover{
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Safari 3-8 */
    transform: scale(1); 
    /* padding: 20px; */
    /* z-index: 5; */
  }
}



/* Desktop Styles */
@media only screen and (min-width: 961px) {
  body {
 

  }

}

/* if the screen gets less than 15.3 inch */
@media only screen and (max-width: 1550px) {
  .vertic-nav{
    display: none;
    }

    .vertic-nav2{
      display: none;
      margin-right: 15%;
      }
}


@media only screen and (min-width: 1400px) and (max-width: 1560px) {

 /* Start0--- it will make projects images smaller so they can be side by side in a column of 2 */
 #videosList {
  width: 100%
}
.home-products{
 padding:15px;
}

.video-brick {
 background-repeat: no-repeat;
 background-image: url('https://i.ibb.co/DkNyTN8/puzzle-template.jpg');
 height: 450px;
 width: 650px;
 /* border-radius: 10%; */
 background-size: 100% 100%;
 box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
.dealbazar {
 background-repeat: no-repeat;
 background-image: url('https://i.ibb.co/HDd5Qv8/dealbazar-template.jpg');
 height: 450px;
 width: 650px;
 /* border-radius: 10%; */
 background-size: 100% 100%;
 box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
 transition: all 0.5s ease;
}
.parent
{
  height: 450px;
  overflow: hidden; 
}
.magDesign {
background-repeat: no-repeat;
background-image: url('https://i.ibb.co/hfk76WW/MAGAZINE-design-min.jpg');
height: 450px;
width: 650px;
/* border-radius: 10%; */
background-size: 100% 100%;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
transition: all 0.5s ease;
}
.evolve {
background-repeat: no-repeat;
background-image: url('https://i.ibb.co/VBD0qzZ/evolvex.png');
height: 450px;
width: 650px;
/* border-radius: 10%; */
background-size: 100% 100%;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
transition: all 0.5s ease;
}
.video-kobe {
background-repeat: no-repeat;
background-image: url('https://i.ibb.co/NFPf1Dr/Kobe-Template.jpg');
height: 450px;
width: 650px;
/* border-radius: 10%; */
background-size: 100% 100%;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
transition: all 0.5s ease;
}
.iat334{
background-repeat: no-repeat;
background-image: url('https://i.ibb.co/f4NgzKM/Hiddengems3.jpg');
height: 450px;
width: 650px;
/* border-radius: 10%; */
background-size: 100% 100%;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
transition: all 0.5s ease;

}

.ux-ui-project{
background-repeat: no-repeat;
background-image: url('https://i.ibb.co/C5Lb2RN/334-template2.jpg');
height: 450px;
width: 650px;
/* border-radius: 10%; */
background-size: 100% 100%;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
transition: all 0.5s ease;

}

.BlueRoute{
background-repeat: no-repeat;
background-image: url('https://i.ibb.co/n3N9S9Y/Blue-Route5.png');
height: 450px;
width: 650px;
/* border-radius: 10%; */
background-size: 100% 100%;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
transition: all 0.5s ease;
}


/* End0--- it will make projects images smaller so they can be side by side in a column of 2 */
}


@media only screen and (min-width: 1560px) and (Max-width: 1840px) {
 /* Start1--- it will make projects images smaller so they can be side by side in a column of 2 */
 #videosList {
  width: 100%
}
.home-products{
 padding:15px;
}

.video-brick {
 background-repeat: no-repeat;
 background-image: url('https://i.ibb.co/DkNyTN8/puzzle-template.jpg');
 height: 480px;
 width: 750px;
 /* border-radius: 10%; */
 background-size: 100% 100%;
 box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
.dealbazar {
 background-repeat: no-repeat;
 background-image: url('https://i.ibb.co/HDd5Qv8/dealbazar-template.jpg');
 height: 480px;
 width: 750px;
 /* border-radius: 10%; */
 background-size: 100% 100%;
 box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
 transition: all 0.5s ease;
}
.parent
{
  height: 480px;
  overflow: hidden; 
}
.magDesign {
background-repeat: no-repeat;
background-image: url('https://i.ibb.co/hfk76WW/MAGAZINE-design-min.jpg');
height: 480px;
width: 750px;
/* border-radius: 10%; */
background-size: 100% 100%;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
transition: all 0.5s ease;
}
.evolve {
background-repeat: no-repeat;
background-image: url('https://i.ibb.co/VBD0qzZ/evolvex.png');
height: 480px;
width: 750px;
/* border-radius: 10%; */
background-size: 100% 100%;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
transition: all 0.5s ease;
}
.video-kobe {
background-repeat: no-repeat;
background-image: url('https://i.ibb.co/NFPf1Dr/Kobe-Template.jpg');
height: 480px;
width: 750px;
/* border-radius: 10%; */
background-size: 100% 100%;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
transition: all 0.5s ease;
}
.iat334{
background-repeat: no-repeat;
background-image: url('https://i.ibb.co/f4NgzKM/Hiddengems3.jpg');
height: 480px;
width: 750px;
/* border-radius: 10%; */
background-size: 100% 100%;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
transition: all 0.5s ease;

}

.ux-ui-project{
background-repeat: no-repeat;
background-image: url('https://i.ibb.co/C5Lb2RN/334-template2.jpg');
height: 480px;
width: 750px;
/* border-radius: 10%; */
background-size: 100% 100%;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
transition: all 0.5s ease;

}

.BlueRoute{
background-repeat: no-repeat;
background-image: url('https://i.ibb.co/n3N9S9Y/Blue-Route5.png');
 height: 480px;
 width: 750px;
/* border-radius: 10%; */
background-size: 100% 100%;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
transition: all 0.5s ease;
}


/* End1--- it will make projects images smaller so they can be side by side in a column of 2 */
}



/* if the screen gets less than 14.5 inch */
@media only screen and (max-width: 1400px) {
  /* Start--- it will make projects images smaller so they can be side by side in a column of 2 */
  #videosList {
     width: 100%
   }
   .home-products{
    padding:15px;
  }

   .video-brick {
    background-repeat: no-repeat;
    background-image: url('https://i.ibb.co/DkNyTN8/puzzle-template.jpg');
    height: 350px;
    width: 500px;
    /* border-radius: 10%; */
    background-size: 100% 100%;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  }
  .dealbazar {
    background-repeat: no-repeat;
    background-image: url('https://i.ibb.co/HDd5Qv8/dealbazar-template.jpg');
    height: 350px;
    width: 500px;
    /* border-radius: 10%; */
    background-size: 100% 100%;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
    transition: all 0.5s ease;
  }
  .parent
{
     height: 350px;
     overflow: hidden; 
}
.magDesign {
  background-repeat: no-repeat;
  background-image: url('https://i.ibb.co/hfk76WW/MAGAZINE-design-min.jpg');
  height: 350px;
  width: 500px;
	/* border-radius: 10%; */
  background-size: 100% 100%;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  transition: all 0.5s ease;
}
.evolve {
  background-repeat: no-repeat;
  background-image: url('https://i.ibb.co/VBD0qzZ/evolvex.png');
  height: 350px;
  width: 500px;
	/* border-radius: 10%; */
  background-size: 100% 100%;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  transition: all 0.5s ease;
}
.video-kobe {
	background-repeat: no-repeat;
  background-image: url('https://i.ibb.co/NFPf1Dr/Kobe-Template.jpg');
  height: 350px;
  width: 500px;
	/* border-radius: 10%; */
  background-size: 100% 100%;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  transition: all 0.5s ease;
}
.iat334{
  background-repeat: no-repeat;
  background-image: url('https://i.ibb.co/f4NgzKM/Hiddengems3.jpg');
  height: 350px;
  width: 500px;
	/* border-radius: 10%; */
  background-size: 100% 100%;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  transition: all 0.5s ease;
  
}

.ux-ui-project{
  background-repeat: no-repeat;
  background-image: url('https://i.ibb.co/C5Lb2RN/334-template2.jpg');
  height: 350px;
  width: 500px;
	/* border-radius: 10%; */
  background-size: 100% 100%;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  transition: all 0.5s ease;

}

.BlueRoute{
  background-repeat: no-repeat;
  background-image: url('https://i.ibb.co/n3N9S9Y/Blue-Route5.png');
  height: 350px;
  width: 500px;
	/* border-radius: 10%; */
  background-size: 100% 100%;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  transition: all 0.5s ease;
}


  /* End--- it will make projects images smaller so they can be side by side in a column of 2 */

  .vertic-nav{
margin-left: -20%;
    }

    .vertic-nav2{
      margin-left: -20%;
          }
          .home-products-wrapper{
            justify-content:center;
          }


    
    /* zoom on hover */
    


    .p4-process-img{
      width: 100%;
      height: unset;
    }

    
.process-p7-sample1-big:hover{
  -ms-transform: scale(1); /* IE 9 */
  -webkit-transform: scale(1); /* Safari 3-8 */
  transform: scale(1); 
  padding: 30px;
  z-index: 5;
  cursor: zoom-in;

}

.process-p3-sketch-sample-left{
	background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
	overflow:hidden;
  margin-bottom: 1em;
  border-radius: 20px;
  /* float:center;  */
  width: 40%;
 

}

.process-p3-sketch-sample-right{
	background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
	overflow:hidden;
  margin-bottom: 1em;
  border-radius: 20px;
  /* float:center;  */
  width: 40%;

}


/* screen less than */
@media only screen and (max-width: 1175px) {
  .home-products-wrapper{
    justify-content:center;
  }

  .bg-about{
    background-image: url('../img/sali4.jpg');
    /* min-height: 30em; */
    background-size: cover;
    background-position: 70% center;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  }
  .textstyle-about{
    margin-left: 0;
  }
  .parallax{
    width: 100%;
    
  }
  
  .parent{

    height:300px;
  }

  .home-products{
    padding: 0px;
  }
  .navbar .logo{
    font-size: 15px;
  }

}




}

/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .parallax{
      /* background-image: unset; */
      background: url(../img/main-img-MAC.jpg) no-repeat center center fixed;
      background-attachment: unset;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;

      
    }
    
}


/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .parallax{
      /* background-image: unset; */
      background: url(../img/main-img-MAC.jpg) no-repeat center center fixed;
      background-attachment: unset;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;

      
    }
}



/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .parallax{
      /* background-image: unset; */
      background: url(../img/main-img-MAC.jpg) no-repeat center center fixed;
      background-attachment: unset;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;

      
    }
}



/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .parallax{
      /* background-image: unset; */
      background: url(../img/main-img-MAC.jpg) no-repeat center center fixed;
      background-attachment: unset;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
 
    }
    .index-img{
      width: 0px;
    }
}



/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

    .parallax{
      /* background-image: unset; */
      background: url(../img/main-img-iphones.jpg) no-repeat center center fixed;
      background-attachment: unset;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;      
    }
    .index-img{
      width: 0px;
    }

    .iat334{
      background-repeat: no-repeat;
      background-image: url(https://i.ibb.co/SXMYPhf/Hiddengemsmobile.jpg);
    }

    .ux-ui-project{
      background-repeat: no-repeat;
      background-image: url(https://i.ibb.co/s9nvYC7/334-template.jpg);
    }
    .bg-about{
      background-image: unset !important;
    }
    .textstyle-about{
      width: 100%;
      color: #4b4b4b;
    }
}



/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

    
    .parallax{
      /* background-image: unset; */
      background: url(../img/main-img-iphones.jpg) no-repeat center center fixed;
      background-attachment: unset;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
    }
    .index-img{
      width: 0px;
    }

    .iat334{
      background-repeat: no-repeat;
      background-image: url(https://i.ibb.co/SXMYPhf/Hiddengemsmobile.jpg);
    }

    .ux-ui-project{
      background-repeat: no-repeat;
      background-image: url(https://i.ibb.co/s9nvYC7/334-template.jpg);
    }
    #home-project-border{
      width: 100%;
      height: 200px;
    }
    .bg-about{
      background-image: unset !important;
    }
    .textstyle-about{
      width: 100%;
      color: #4b4b4b;
    }
}



/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    .parallax{
      /* background-image: unset; */
      background: url(../img/main-img-iphones.jpg) no-repeat center center fixed;
      background-attachment: unset;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
    }

    .index-img{
      width: 0px;
    }

    .iat334{
      background-repeat: no-repeat;
      background-image: url(https://i.ibb.co/SXMYPhf/Hiddengemsmobile.jpg);
    }

    .ux-ui-project{
      background-repeat: no-repeat;
      background-image: url(https://i.ibb.co/s9nvYC7/334-template.jpg);
    }
    .bg-about{
      background-image: unset !important;
    }
    .textstyle-about{
      width: 100%;
      color: #4b4b4b;
    }
}



/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

    .parallax{
      /* background-image: unset; */
      background: url(../img/main-img-iphones.jpg) no-repeat center center fixed;
      background-attachment: unset;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
    }

    .index-img{
      width: 0px;
    }

    .iat334{
      background-repeat: no-repeat;
      background-image: url(https://i.ibb.co/SXMYPhf/Hiddengemsmobile.jpg);
    }

    .ux-ui-project{
      background-repeat: no-repeat;
      background-image: url(https://i.ibb.co/s9nvYC7/334-template.jpg);
    }

    #home-project-border{
      width: 100%;
      height: 250px;
    }
    .bg-about{
      background-image: unset !important;
    }
    .textstyle-about{
      width: 100%;
      color: #4b4b4b;
    }
}



/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
  .top-margin-title6, .top-margin-title5, .top-margin-title4, .top-margin-title3, .top-margin-title2, .top-margin-title{
      /*background-color: #F09A9D;*/
      text-align: center;
      margin-top: -15px;
    }
    .parallax{
      /* background-image: unset; */
      background: url(../img/main-img-iphones.jpg) no-repeat center center fixed;
      background-attachment: unset;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
    }
    .index-img{
      width: 0px;
    }

    .iat334{
      background-repeat: no-repeat;
      background-image: url(https://i.ibb.co/SXMYPhf/Hiddengemsmobile.jpg);
    }

    .ux-ui-project{
      background-repeat: no-repeat;
      background-image: url(https://i.ibb.co/s9nvYC7/334-template.jpg);
    }
    #home-project-border{
      width: 100%;
      height: 250px;
    }
    .bg-about{
      background-image: unset !important;
    }
    .textstyle-about{
      width: 100%;
      color: #4b4b4b;
    }
}