body {
	/*font-family: "Quan", Verdana, sans-serif;*/
	/*background:transparent url(https://www.desktopbackground.org/download/o/2014/01/02/695148_download-wallpapers-1280x720-background-line-solid-color-hdtv_1280x720_h.jpg);*/
	/*background-repeat: no-repeat;*/
  /*background-attachment: fixed;
  background-size: 100%;*/

}


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

  
}


/* -----------------Header navbar style starts */

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: #333; */
  padding: 35px 80px;
}
.navbar .logo {
  color: #2e2e2e;
  font-size: 30px;
  text-decoration: none;
}
.navbar .nav-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}
.navbar .nav-links li {
  margin-left: 20px;
}
.navbar .nav-links a {
  color: #2e2e2e;
  text-decoration: none;
  padding: 5px 15px;
  transition: background-color 0.3s ease;
}
.navbar .nav-links a:hover {
  background-color: rgb(0, 0, 0);
  color: white;
}
.navbar .nav-links a.active {
  /* background-color: #007BFF; */
  border-bottom: 1px solid #2e3e3e;
}
@media (max-width: 1200px) {
  .navbar {
      flex-direction: column;
  }
  .navbar .nav-links {
      flex-direction: column;
      width: 100%;
      text-align: center;
  }
  .navbar .nav-links li {
      margin: 10px 0;
  }
   .logo {
    margin-bottom: 15px;
  }
}




.navbar-projects {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: #333; */
  padding: 35px 80px;
}
.navbar-projects .logo {
  color: #2e2e2e;
  font-size: 30px;
  text-decoration: none;
}
.navbar-projects .nav-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}
.navbar-projects .nav-links li {
  margin-left: 20px;
}
.navbar-projects .nav-links a {
  color: #2e2e2e;
  text-decoration: none;
  padding: 5px 15px;
  transition: background-color 0.3s ease;
}
.navbar-projects .nav-links a:hover {
  background-color: rgb(0, 0, 0);
  color: white;
}
.navbar-projects .nav-links a.active {
  /* background-color: #007BFF; */
  border-bottom: 1px solid #2e3e3e;
}
@media (max-width: 1200px) {
  .navbar-projects {
      flex-direction: column;
  }
  .navbar-projects .nav-links {
      flex-direction: column;
      width: 100%;
      text-align: center;
  }
  .navbar-projects .nav-links li {
      margin: 10px 0;
  }
   .logo {
    margin-bottom: 15px;
  }
}

/* -----------------Header navbar style ends */


h1 {
	/*font-family: 'AvenirNextLTPro-Regular', Helvetica, Arial, sans-serif;*/
	font-weight: 100;
	font-size: 4.0em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 15px;
	color: white;
  text-shadow: 1px 1px 2px black, 0px 0px 25px blue, 0 0 5px darkblue;
  font-family: "Roboto", sans-serif;

}
h2 {
  font-family: "Roboto", sans-serif;
	font-weight: 100;
  font-size: 1.5em;
  color:#4b4b4b !important;
  /* color: #6bccef; */
	/* text-shadow: 1px 1px 2px black, 0px 0px 25px blue, 0 0 5px darkblue; */

}

p{
  font-size: 1.1em;
  font-family: "Roboto", sans-serif;

}
h3 {
  font-family: "Roboto", sans-serif;
	text-decoration-color: #AD1D1D;
}
h4{
  font-size: .7em;
  font-family: "Roboto", sans-serif;
  color:#4b4b4b !important;


}

/* it makes personas images on Project5 side by side */
.image-container {
  display: flex;
  justify-content: space-between;
}
.image-container img {
  width: 50%;
  height: auto; 
}



.top-margin-title{    /*set top margin to 0 for product titles*/
  margin-top: 15px;
  margin-left: 12px;
  color:#4b4b4b;
  font-family: "Roboto", sans-serif;
  font-size: 0.9em;
  line-height: 14px;
}

.top-margin-title2{    /*set top margin to 0 for product titles*/
  margin-top: 15px;
  margin-left: 12px;
  color:#4b4b4b;
  font-family: "Roboto", sans-serif;
  font-size: 0.9em;
  line-height: 14px;
}

.top-margin-title3{    /*set top margin to 0 for product titles*/
  margin-top: 15px;
  margin-left: 12px;
  color:#4b4b4b;
  font-family: "Roboto", sans-serif;
  font-size: 0.9em;
  line-height: 14px;
}

.top-margin-title4{    /*set top margin to 0 for product titles*/
  margin-top: 15px;
  margin-left: 12px;
  color:#4b4b4b;
  font-family: "Roboto", sans-serif;
font-size:0.9em;
line-height: 14px;
}

.top-margin-title5{    /*set top margin to 0 for product titles*/
  margin-top: 15px;
  margin-left: 12px;
  color:#4b4b4b;
  font-family: "Roboto", sans-serif;
  font-size: 0.9em;
  line-height: 14px;
}

.top-margin-title6{    /*set top margin to 0 for product titles*/
  margin-top: 15px;
  margin-left: 12px;
  color:#4b4b4b;
  font-family: "Roboto", sans-serif;
font-size: 0.9em;
line-height: 14px;
}
ul {
  list-style-type: none;
}
/*img {
    width: 100%;

		max-height: 250px;
}*/
div{
	background-size: contain;
}
a{
  color:rgba(255,255,255,0.6);
  text-decoration: none;
}

/* hr{
		border: 1px solid #4b4b4b;
} */
a:hover, a:focus{
  color:rgba(255, 255, 255, 0.9);
}
#alink{
color: #4b4b4b;;
}


.projects-nav-btn{
  display: inline-block;
  /* padding: 0.5em 2.38em; */
  color: #4b4b4b;
 /*  background-color: #000000; */
  /* border-radius: 0.25em; */
  text-decoration: none;
  /* transition: background-color 0.5s ease-out; */
  text-align: center;
  /* width: 130px; */
  margin-left: 2.5em;
  margin-right: 2em;
}
.certifimg{
  width:100%;
  max-width: 1000px;
 
 }

.projects-nav-btn:hover, .projects-nav-btn:focus {
  background-color: #ffffff;
  color: #051421;
  transition: background-color 0.5s ease-in;

padding-bottom: 5px;
border-bottom: 1px solid black;
text-decoration: none;
}
.projects-nav-btn-p4{
  display: inline-block;
  padding: 0.5em 2.38em;
  color: #fdc40a;
  background-color: #000000;
  border-radius: 0.25em;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
  text-align: center;
  width: 130px;
  border-radius: 50px;
}

.projects-nav-btn-p5{
  display: inline-block;
  padding: 0.5em 2.38em;
  color: #AE3FCF;
  background-color: #000000;
  border-radius: 0.25em;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
  text-align: center;
  width: 130px;
  border-radius: 50px;
}

.bg-about{
  background-image: url('../img/sali4.jpg');
	min-height: 30em;
	background-size: cover;
	background-position: 60% center;
	-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

.projects-nav-btn-p6{
  display: inline-block;
  padding: 0.5em 2.38em;
  color: #FF9595;
  background-color: #000000;
  border-radius: 0.25em;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
  text-align: center;
  width: 130px;
  border-radius: 50px;
}
.logo-img{
	display: inline-block;
  padding: 0.5em 2.38em;
  color: #FFF;
  /*background-color: #000000;*/
  border-radius: 0.25em;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
  text-align: center;
	/*width: 117px;*/

}
.projects-nav-btn:hover, .projects-nav-btn:focus {
  background-color: #ffffff;
  color: rgb(35, 13, 59)
}

.projects-nav-btn-p4:hover, .projects-nav-btnp4:focus {
  background-color: #fac022;
  color: #051421;
}

.projects-nav-btn-p5:hover, .projects-nav-btnp5:focus {
  background-color: #AE3FCF;
  color: #051421;
}

.projects-nav-btn-p6:hover, .projects-nav-btnp6:focus {
  background-color: #FF9595;
  color: #051421;
}
.about-nav-btn{
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #4b4b4b;
  text-decoration: none;
	text-align: center;
  margin-left: 2em;
  /* transition: 1s; */

}


.about-nav-btn:hover, .about-nav-btn:focus {
  background-color: #ffffff;
  color: #051421;
border-bottom: 1px solid black;
padding-bottom: 5px;
text-decoration: none;
}


.about-nav-btn-p4{
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #fdc40a;
  background-color: #000000;
  border-radius: 0.25em;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
	text-align: center;
  width: 130px;
  border-radius: 50px;
}

.about-nav-btn-p4:hover, .about-nav-btn-p4:focus {
  background-color: #fac022;
  color: #051421;
}

.about-nav-btn-p5{
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #AE3FCF;
  background-color: #000000;
  border-radius: 0.25em;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
	text-align: center;
  width: 130px;
  border-radius: 50px;
}

.about-nav-btn-p5:hover, .about-nav-btn-p5:focus {
  background-color: #AE3FCF;
  color: #051421;
}

.about-nav-btn-p6{
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #FF9595;
  background-color: #000000;
  border-radius: 0.25em;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
	text-align: center;
  width: 130px;
  border-radius: 50px;
}

.about-nav-btn-p6:hover, .about-nav-btn-p6:focus {
  background-color: #FF9595;
  color: #051421;
}

.projects-nav-btn-p1{
  display: inline-block;
  padding: 0.5em 2.38em;
  color: #aefa22;
  background-color: #000000;
  border-radius: 0.25em;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
  text-align: center;
  width: 130px;
  border-radius: 50px;
}

.projects-nav-btn-p1:hover, .projects-nav-btnp1:focus {
  background-color: #aefa22;
  color: #051421;
}


.about-nav-btn-p1{
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #aefa22;
  background-color: #000000;
  border-radius: 0.25em;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
	text-align: center;
  width: 130px;
  border-radius: 50px;
}

.about-nav-btn-p1:hover, .about-nav-btn-p1:focus {
  background-color: #aefa22;
  color: #051421;
}


.projects-nav-btn-p2{
  display: inline-block;
  padding: 0.5em 2.38em;
  color: #900C3F;
  background-color: #000000;
  border-radius: 0.25em;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
  text-align: center;
  width: 130px;
  border-radius: 50px;
}

.projects-nav-btn-p2:hover, .projects-nav-btnp2:focus {
  background-color: #900C3F;
  color: #051421;
}


.about-nav-btn-p2{
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #900C3F;
  background-color: #000000;
  border-radius: 0.25em;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
	text-align: center;
  width: 130px;
  border-radius: 50px;
}

.about-nav-btn-p2:hover, .about-nav-btn-p2:focus {
  background-color: #900C3F;
  color: #051421;
}


.projects-nav-btn-p3{
  display: inline-block;
  padding: 0.5em 2.38em;
  color: #3766D5;
  background-color: #000000;
  border-radius: 0.25em;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
  text-align: center;
  width: 130px;
  border-radius: 50px;
}

.projects-nav-btn-p3:hover, .projects-nav-btnp3:focus {
  background-color: #3766D5;
  color: #051421;
}


.about-nav-btn-p3{
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #3766D5;
  background-color: #000000;
  border-radius: 0.25em;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
	text-align: center;
  width: 130px;
  border-radius: 50px;
}

.about-nav-btn-p3:hover, .about-nav-btn-p3:focus {
  background-color: #3766D5;
  color: #051421;
  
}


.tools-usedp5{
width: 30%;
}
.footer-container{
  /* color: white; */
	/* margin-top: 10em; */
}
.footer-contents{
  /*border: 1px solid #fff;*/
  /* background-color: #1a1b1c; */
  /*height: 200px;*/

}
.footer-info{
  color: #FFF;
}
.footer-address{

}
#address{
  color:rgba(255,255,255,0.6);
  line-height: 1.6;
  font-family: "Roboto", sans-serif;
}

.footer-Contact{

  /* line-height: 1.6; */
  
}



.project2sample{
	max-width: 800px;
	}

.project1sample{
	max-width: 520px;
  float: right;
  border-radius: 20px;
  }
  .project4sample{
    max-width: 520px;
    float: left;
    border-radius: 20px;
    margin-right: 50px;
    opacity: 0.9; 
    /* margin-left: 20px; */
    }

  .project1sample:hover{
    -ms-transform: scale(2); /* IE 9 */
  -webkit-transform: scale(2); /* Safari 3-8 */
  transform: scale(2); 
  padding: 30px;
  z-index: 5;
  cursor: zoom-in;
  }
  

  .project5sample{
    max-width: 80%;
    max-width: auto;
   
    }

	.project1sample-process{
    max-width: 520px;
    height: 275px;
    filter: blur(3px);
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
  }

  .project1sample-process:hover{
    filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
  }

  .textstyle2{
    color: #4b4b4b;
    /* max-width: 1070px; */
    text-align: left;
    LINE-HEIGHT: 30px;
    margin-bottom: 0.5em;
    font-size: 1em;
  }
  
  .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);
  }
  
  .project2sample-process:hover{
    filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
	}

	.textstyle{
    color: #4b4b4b;
		max-width: 1070px;
		text-align: left;
		LINE-HEIGHT:30px;
    margin-bottom: 0.5em;
    font-size: 1.1em;
    margin-left: 10px;
  }
  
  .textstyle-gem{
    color: #4b4b4b;
		max-width: 100%;
		text-align: left;
		LINE-HEIGHT:30px;
    margin-bottom: 0.5em;
    font-size: 1.1em;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    margin-left: 10px;
	}


	.textstyle-challenge{
    color: #4b4b4b;
		text-align: left;
		font-size: 1em;
		LINE-HEIGHT:30px;
    margin-bottom: 0.5em;
    /* margin-left: 10px; */
    font-weight: 400;
    
  }

  
	.textstyle-challenge-p4{
    color: #4b4b4b;
		max-width: 630px;
		text-align: left;
    margin-left: 10px;
		/*margin-left: 13em;*/
		/* font-size: 0.83em; */
		margin-bottom: 0.5em;
    
  }

  .textstyle-top-p4{
    color: #4b4b4b;
		/* max-width: 630px; */
		text-align: left;
    margin-left: 10px;
		/*margin-left: 13em;*/
		/* font-size: 0.83em; */
		margin-bottom: 0.5em;
    
  }
  
  .textstyle-challenge-p6{
    color:black;
		max-width: 530px;
		text-align: left;
		/*margin-left: 13em;*/
		/* font-size: 0.83em; */
		LINE-HEIGHT:30px;
		margin-bottom: 0.5em;
	}

  
	.textstyle-overcoming{
		text-align: left;
		font-size: 1.1em;
		LINE-HEIGHT:30px;
		margin-bottom: 0.5em;
    font-weight: 400;
    margin-left: 10px;
  }

  .textstyle-overcoming-p6{
    color:#4b4b4b;
		max-width: 528px;
		text-align: left;
		/*margin-left: 13em;*/
		/* font-size: 0.83em; */
		LINE-HEIGHT:30px;
		margin-bottom: 0.5em;
  }
  
	.leftside{
		float: left;
		margin-right:10px;
	}
	.rightside{
		float: left;
	}
  .rightside2{
    float: right;
    margin-right: 35px;
  }
  .rightside3{
    float: right;
    /* margin-right: 35px; */
  }
  
  
	.leftside-p1-process{
		float: left;
		margin-right:50px;
		margin-left: 10em;
	}
	.rightside-p1-process{
		float: left;
		margin-right:50px;
		margin-left: 10em;
	}
	.textstyle1{
		color:rgb(255, 255, 255);
		text-align: left;
		font-size: 1em;
		LINE-HEIGHT:30px;

	}

.textstyle-about{
	/*color:black; */
	text-align: left;
	font-size: 1.1em;
	/* margin-left: 16em; */
	LINE-HEIGHT:30px;
	width: 100%;
	/* background: rgba(0, 0, 0, 0.2); */
  padding: 15px;
  color: #4b4b4b;

}

.textstyle-about2{
	/*color:black; */
	text-align: left;
	font-size: 1.1em;
	/* margin-left: 16em; */
	LINE-HEIGHT:30px;
	width: 100%;
	/* background: rgba(0, 0, 0, 0.2); */
  padding: 15px;
  color: #4b4b4b;

}

	.but-back{
  display: inline-block;
  padding: 0.5em 2.38em;
  background-color: #000000;
  color: #FFF;
  text-decoration: none;
  transition: background-color 0.2s ease-out;
  margin-top: 20px;
  /* border-radius: 50px; */
}

.but-back:hover, .but-back:focus {
  /* opacity: 0.7; */
  /* background-color: #00000073; */
  background-color: #00000096;

  text-decoration: none;
  color: #FFF;
}



.but-back-blue{
  display: inline-block;
  padding: 0.5em 2.38em;
  background-color: #3766D5;
  color: #051421;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
  border-radius: 50px;
}

.but-back-blue:hover, .but-back-blue:focus {
  background-color: #000000;
  color: #0e82af;
  text-decoration: none;
}

.but-back-red{
  display: inline-block;
  padding: 0.5em 2.38em;
  background-color: #900C3F;
  color: #051421;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
  border-radius: 50px;
}

.but-back-red:hover, .but-back-red:focus {
  background-color: #000000;
  color: #900C3F;
  text-decoration: none;
}
.but-back-orange{
  display: inline-block;
  padding: 0.5em 2.38em;
  background-color:#fdc40a;
  color: #051421;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
  border-radius: 50px;
}

.but-back-orange:hover, .but-back-orange:focus {
  background-color: #000000;
  color: #fdc40a;
  text-decoration: none;
}

.but-back-pink{
  display: inline-block;
  padding: 0.5em 2.38em;
  background-color:#FF9595;
  color: #051421;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
  border-radius: 50px;
}

.but-back-pink:hover, .but-back-pink:focus {
  background-color: #000000;
  color: #FF9595;
  text-decoration: none;
}


.but-back-purple{
  display: inline-block;
  padding: 0.5em 2.38em;
  background-color:#AE3FCF;
  color: #051421;
  text-decoration: none;
  transition: background-color 0.5s ease-out;
  border-radius: 50px;
}

.but-back-purple:hover, .but-back-purple:focus {
  background-color: #000000;
  color: #AE3FCF;
  text-decoration: none;
}

#p1-h2{
  color: #4b4b4b;
		margin-bottom: 0.5em;
    font-weight: bold;
}

.p1-h2{
  color: #4b4b4b;
		margin-bottom: 0.5em;
    font-weight: bold;
}
#p1-h2-process{
	color: #000;
    /* text-shadow: 1px 1px 2px black, 0px 0px 25px #cbf34d, 0 0 5px #cbf34d; */
	margin-bottom: 5px;
  /* text-align: left; */
  font-size: 1.5em;
}


#p1-h2-process-gallery{
	color: #000;
    /* text-shadow: 1px 1px 2px black, 0px 0px 25px #cbf34d, 0 0 5px #cbf34d; */
	margin-bottom: 5px;
  /* text-align: left; */
  font-size: 1.5em;
}

/* style for p4 Key Insights affinity map section start*/
.containerp4 {
  display: flex; /* Use Flexbox layout */
}
.text-devider {
  width: 50%; /* Each takes up 50% of the width */
  padding: 10px;
  box-sizing: border-box; /* Include padding in width calculation */
  border: 1px solid #86c3ff; /* Optional border */
  text-align: left; /* Center-align the text */
  text-transform: none;
}
/* style for p4 Key Insights affinity map section end*/

/* Create the flashing underline */
.flashing-underline-text {
  font-size: 1.5rem;
  font-weight: bold;

  position: relative; /* Needed for the pseudo-element positioning */
}


/* Create the flashing underline using ::after */
.flashing-underline-text::after {
  content: ""; /* Empty content for the underline */
  position: absolute;
  left: 0;
  bottom: -5px; /* Position below the text */
  width: 100%;
  height: 2px; /* Thickness of the underline */
  background: linear-gradient(90deg, #337ab7, #337ab7);
  animation: flash-underline 1s infinite; /* Animates the underline flashing */
}

/* Keyframes for the flashing underline effect */
@keyframes flash-underline {
  0%, 100% {
      opacity: 1; /* Underline visible */
  }
  50% {
      opacity: 0; /* Underline hidden */
  }
}

/* Put two sketches side by side in P4 */

.image-containerp4 {
  display: flex;
  /* gap: 5px; Space between images */
}

.side-image {
  width: 50%; /* Adjust width as needed */
  height: auto; /* Maintain aspect ratio */
  /* border: 2px solid #ccc; */
  /* border-radius: 5px;  */
}


#p1-h2-challenge{
  color: #4b4b4b;
		margin-bottom: 0.5em;
    font-weight: bold;

}
#p1-h2-overcoming{
  color: #4b4b4b;
	margin-bottom: 0.5em;
  /* font-weight:bold; */
}

#p4-h2{
  color: #4b4b4b;
  margin-bottom: 0.5em;
}
#p4-h2-process{
  color: #4b4b4b;
  margin-bottom: 0.5em;

}

#p5-h2-process{
  color: #4b4b4b;
  margin-bottom: 0.5em;
  }
#p5-h2-process{
  color: #4b4b4b;
  margin-bottom: 0.5em;
  }
  #p5-h2{
    color: #4b4b4b;
    margin-bottom: 0.5em;
    }
#p4-h2-process-gallery{
	color: #000;
	/* text-shadow: 1px 1px 2px black, 0px 0px 25px #fdc40a, 0 0 5px #fdc40a; */
	margin-bottom: 5px;
  text-align: left;
  font-size: 1.5em;
}

/* Gallery left and right color */
.carousel-control.right{
  /* right: 0;
    left: auto;
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(125, 35, 35, 0.5) 100%) !important;
    background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%) !important;
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(123, 130, 222, 0.5))) !important;
    background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(226, 200, 255, 0.25) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1) !important;
    background-repeat: repeat-x; */
}


.carousel-control.left{

  /* background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(125, 35, 35, 0.5) 100%) !important;
    background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%) !important;
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(123, 130, 222, 0.5))) !important;
    background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(226, 200, 255, 0.25) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1) !important;
    background-repeat: repeat-x; */
}

.carousel-control{
  opacity: 0.1 !important;
}

.carousel-control:hover{
  opacity: 0.5 !important;
}


#p4-h2-challenge{
  color: #4b4b4b;
  margin-bottom: 0.5em;

}

#p6-h2-challenge{
  color: #4b4b4b;
  /* text-shadow: 1px 1px 2px black, 0px 0px 25px #FF9595, 0 0 5px #FF9595; */
  margin-bottom: 0.5em;
  /* text-align: left; */
}
#p4-h2-overcoming{
  color: #4b4b4b;
  margin-bottom: 0.5em;
}

#p1-bg{
	background:transparent url(https://wallpapercave.com/wp/KCrpznb.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 100%;
}

#p-h6{
	/* background-color: rgba(230, 241, 232, 0.59); */
	padding: 10px;
  margin-top: 5px;
  border-radius: 20px;

}

#p-h7{
  /* background:transparent url(https://image.ibb.co/cSAVO7/Untitled_1.png); */
	/* background-color: rgba(255, 247, 229, 0.59); */
	padding: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 20px;
}
#p6-h7{
  /* background:transparent url(https://image.ibb.co/cSAVO7/Untitled_1.png); */
	/* background-color: rgba(255, 149, 149, 0.07); */
	padding: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 20px;

}
.rightside-p6{
  float: left;
  margin-bottom: 0.5em;
}

#p5-h7{
  /* background:transparent url(https://image.ibb.co/cSAVO7/Untitled_1.png); */
	/* background-color: #F1EDFA; */
	padding: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 20px;
}


#p5-img{

	padding: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 20px;
}


#p2-h2{
  color: #4b4b4b;
	margin-bottom: 0.5em;
}

#p2-h6{
	/* background-color: rgba(241, 230, 230, 0.59); */
	padding: 10px;
  margin-top: 5px;
  justify-content: center;
  border-radius: 20px;
  font-family: "Roboto", sans-serif;
  LINE-HEIGHT:30px;
}

#p2-h2-challenge{
  color: #4b4b4b;
	margin-bottom: 0.5em;

}
#p2-h2-overcoming{
  color: #4b4b4b;
	margin-bottom: 0.5em;
}
#p2-h2-process{
	color: #000;
  /* text-shadow: 1px 1px 2px black, 0px 0px 5px #ff0767, 0 0 50px #ff4d92; */
	margin-bottom: 5px;
  text-align: left;
  font-size: 1.5em;
}

#p2-h2-process-gallery{
	color: #000;
  /* text-shadow: 1px 1px 2px black, 0px 0px 5px #ff0767, 0 0 50px #ff4d92; */
	margin-bottom: 5px;
  text-align: left;
  font-size: 1.5em;
}


#p3-h2{
	color: #000;
	/* text-shadow: 1px 1px 2px black, 0px 0px 25px #3766D5, 0 0 5px #3766D5; */
	margin-bottom: 5px;
	text-align: left;
}

#p3-h6{
	/* background-color: rgba(230, 237, 241, 0.59); */
	padding: 10px;
  margin-top: 5px;
  border-radius: 20px;
  color:#4b4b4b;
}

#p3-h2-challenge{
	color: #4b4b4b;
	margin-bottom: 0.5em;
}

#p3-h2-overcoming{
	color: #4b4b4b;
	margin-bottom: 0.5em;
}
#p3-h2-process{
	color: #000;
	/* text-shadow: 1px 1px 2px black, 0px 0px 25px #3766D5, 0 0 5px #3766D5; */
	margin-bottom: 5px;
  text-align: left;
  font-size: 1.5em;

}

#p3-h2-process-gallery{
	color: #000;
	/* text-shadow: 1px 1px 2px black, 0px 0px 25px #3766D5, 0 0 5px #3766D5; */
	margin-bottom: 5px;
  text-align: left;
  font-size: 1.5em;
}

.process-p1-sample1{
	/* width: 100%; */
	/* height: 250px; */
	max-height: 450px;
	/* 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 #D4F2D1; */
  margin-bottom: 1em;
  /* border-radius: 20px; */
}

/* #space{
  margin-left: 40px;
}

#space-photoshop{
  margin-left: 28px;
}
#space-vs{
  margin-left: 69px;
}

#space-unity{
  margin-left: 122px;
} */

.p4-process-img{
	width: 100%;
  /* height: 500px; */
  /* max-height: 800px; */
	/* border: 1px solid #FFDCA7; */
  /* border-radius: 20px; */
}



.process-p1-sample1-small{
	/* width: 100%; */
	/* height: 100%; */
	max-height: 200px;
	/* 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 #D4F2D1; */
  margin-bottom: 1em;
  border-radius: 20px;
}



.process-p1-sample1-small:hover{
	width: 100%;
	height: 200px;
	max-height: 200px;
	/* 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 #D4F2D1; */
  margin-bottom: 1em;
  border-radius: 20px;
  cursor: zoom-in;
}


.process-p1-sample1-big{
	width: 100%;
	/* height: 550px; */
	/* max-height: 550px; */
	/* 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 #D4F2D1; */
  margin-bottom: 1em;
  /* border-radius: 20px; */
}




.process-p7-sample1-big{
width: 100%;

	background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
	overflow:hidden;
	background: rgba(0, 0, 0, 0.2);
  margin-bottom: 1em;
  
}


.process-p2-sample1{
	/* width: 100%; */
	height: 450px;
	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 red; */
	margin-bottom: 1em;
}

.process-p2-sample2{
	width: 100%;
	height: 350px;
	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 red; */
	margin-bottom: 1em;
}

.process-p3-sample1{
	/* width: 100%; */
	/* height: 250px; */
	/* max-height: 450px; */
	/* 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 #D4F2D1; */
  margin-bottom: 1em;
  /* border-radius: 20px; */
}

.process-p3-sketch-sample-left{
	background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
	overflow:hidden;
  margin-bottom: 1em;
  border-radius: 20px;
  float:left; 
  margin-right: 25%; 
  margin-top: -5%;
}

.process-p3-sketch-sample-right{
	background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
	overflow:hidden;
  margin-bottom: 1em;
  border-radius: 20px;
  float:right; 
  margin-left: 15%; 
  margin-top: -5%;
}

.process-p6-sample1{
	width: 950px;
	height: 350px;
	max-height: 350px;
	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 pink;
	margin-bottom: 1em;
}

.process-p5-download{
	width: 40%;
	height: 50%;
	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;
}
#aircraft{
  height: 200px;
}

 #videosList {
 /*max-width: 600px;*/
  /* overflow: hidden; */
	/* height: 390px; */
  width: 810px;
	/* border-radius: 10%; */
	background-size: 100% 100%;
}


.video-brick {
	background-repeat: no-repeat;
  background-image: url('https://i.ibb.co/DkNyTN8/puzzle-template.jpg');
  height: 500px;
  width: 850px;
	/* 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: 500px;
  width: 850px;
	/* border-radius: 10%; */
  background-size: 100% 100%;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  transition: all 0.5s ease;
}
/* Make the image bigger and black and white on hover */
.parent
{
     height: 500px;
     overflow: hidden; 
}
.dealbazar:hover{
  transform: scale(1.1);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%); 

}


.magDesign {
  background-repeat: no-repeat;
  background-image: url('https://i.ibb.co/hfk76WW/MAGAZINE-design-min.jpg');
  height: 500px;
  width: 850px;
	/* border-radius: 10%; */
  background-size: 100% 100%;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  transition: all 0.5s ease;
}
/* Make the image bigger and black and white on hover */
.parent
{
     height: 500px;
     overflow: hidden; 
}
.magDesign:hover{
  transform: scale(1.1);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%); 
}

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


/* Make the image bigger and black and white on hover */
.parent
{
     height: 500px;
     overflow: hidden; 
}
.evolve:hover{
  transform: scale(1.1);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%); 
}

.video-kobe {
	background-repeat: no-repeat;
  background-image: url('https://i.ibb.co/p4LyGTH/Kobe-Template.jpg');


  /* background-image: 
  linear-gradient(rgba(153, 255, 187,.2), rgba(51, 255, 51,.5)),
  url('https://image.ibb.co/mMOQDd/myprojectsample1_min.png'); */
  height: 500px;
  width: 850px;
	/* 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:hover{
  transform: scale(1.1);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%); 
}
.iat334{
  background-repeat: no-repeat;
  background-image: url('https://i.ibb.co/QrTWy0s/Hiddengems3.jpg');
  height: 500px;
  width: 850px;
	/* border-radius: 10%; */
  background-size: 100% 100%;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  transition: all 0.5s ease;
  
}
/* Make the image bigger and black and white on hover */
.parent
{
     height: 500px;
     overflow: hidden; 
}
.iat334:hover{
  transform: scale(1.1);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%); 

}


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

}
/* Make the image bigger and black and white on hover */
.parent
{
     height: 500px;
     overflow: hidden; 
}
.ux-ui-project:hover{
  transform: scale(1.1);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%); 

}


.BlueRoute{
  background-repeat: no-repeat;
  background-image: url('https://i.ibb.co/n3N9S9Y/Blue-Route5.png');
  height: 500px;
  width: 850px;
	/* border-radius: 10%; */
  background-size: 100% 100%;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  transition: all 0.5s ease;
}
/* Make the image bigger and black and white on hover */
.parent
{
     height: 500px;
     overflow: hidden; 
}
.BlueRoute:hover{
  transform: scale(1.1);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%); 
}

/*Css for Top Left Name Animation */
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');


p
{
    margin: 0 0 10px;
}

ul
{
    list-style: none;
}

.container {
    width: 100%;
    margin: auto;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    padding: 0 0 200px;
}


.animate {
    font-size: 40px;
    margin-top: 100px;

}

.seperate{
	margin-top: -90px;
	margin-bottom: 70px;
}

.animate span {
    display: inline-block;
}

a.repeat {
  display: inline-block;
  font-size: 12px;
  text-transform: none;
  text-decoration: none;
  color: orange;
  padding: 5px 12px;
  border: 1px solid #cecece;
  font-weight: normal;
  margin: 0 0 0 50px;
  border-radius: 5px;
  position: relative;
  bottom: 15px;
}

.animate span:nth-of-type(2) {
    animation-delay: .05s;
}
.animate span:nth-of-type(3) {
    animation-delay: .1s;
}
.animate span:nth-of-type(4) {
    animation-delay: .15s;
}
.animate span:nth-of-type(5) {
    animation-delay: .2s;
}
.animate span:nth-of-type(6) {
    animation-delay: .25s;
}
.animate span:nth-of-type(7) {
    animation-delay: .3s;
}
.animate span:nth-of-type(8) {
    animation-delay: .35s;
}
.animate span:nth-of-type(9) {
    animation-delay: .4s;
}
.animate span:nth-of-type(10) {
    animation-delay: .45s;
}
.animate span:nth-of-type(11) {
    animation-delay: .5s;
}
.animate span:nth-of-type(12) {
    animation-delay: .55s;
}
.animate span:nth-of-type(13) {
    animation-delay: .6s;
}
.animate span:nth-of-type(14) {
    animation-delay: .65s;
}


/* Animation One */

.one span {
    color: black;
    opacity: 0;
    transform: translate(-150px, -50px) rotate(-180deg) scale(3);
    animation: revolveScale 5s forwards;
}

@keyframes revolveScale {
    60% {
        transform: translate(20px, 20px) rotate(30deg) scale(.3);
    }

    100% {
        transform: translate(0) rotate(0) scale(1);
        opacity: 1;
    }
}


/* Animation Three */
.three span {
    color: #4b4b4b;
    opacity: 0;
    transform: translate(-300px, 0) scale(0);
    animation: sideSlide .5s forwards;
}

@keyframes sideSlide {
    60% {
        transform: translate(20px, 0) scale(1);
        color: #4b4b4b;
    }

    80% {
        transform: translate(20px, 0) scale(1);
        color: #641515;
    }

    90% {
        transform: translate(20px, 0) scale(1.2);
        color: #4b4b4b;
    }

    100% {
        transform: translate(0) scale(1);
        opacity: 1;
        color: #4b4b4b;
    }
}



#box-border{
position: relative;
width: 100px;
height: 100px;
background-color: gray;
border: 5px solid black;
display: block;

}

#box-border:hover {
  border-color: red;
  animation-name: flash_border;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: flash_border;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: flash_border;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
}

@keyframes flash_border {
  0% {
    border-color: red;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: red;
  }
}

@-webkit-keyframes flash_border {
  0% {
    border-color: red;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: red;
  }
}
/*Animated border*/
#animated-border-green {
  position: relative;
  border: 2px solid black;
  display: block;
	border-color: green;
  animation-name: flash_border;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: flash_border;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: flash_border;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  border-radius: 20px;
}

#home-project-border {
  position: relative;
 /*  border: 2px solid black; */
  display: block;
	border-color: #2c4762;

}

#animated-border-red {
  position: relative;
  border: 5px solid black;
  display: block;
	border-color: red;
  animation-name: flash_border-red;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: flash_border-red;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: flash_border-red;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
}

#animated-border-orange {
  position: relative;
  border: 2px solid black;
  display: block;
	border-color: rgb(236, 157, 53);
  animation-name: flash_border-orange;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: flash_border-orange;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: flash_border-orange;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  border-radius: 20px;
}

#animated-border-pink {
  position: relative;
  border: 2px solid black;
  display: block;
	border-color: rgb(255, 149, 149);
  animation-name: flash_border-pink;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: flash_border-pink;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: flash_border-pink;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  border-radius: 20px;
  width: fit-content;
}

#animated-border-purple {
  position: relative;
  border: 2px solid black;
  display: block;
	border-color: rgb(174, 63, 207);
  animation-name: flash_border-purple;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: flash_border-purple;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: flash_border-purple;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  border-radius: 20px;
}

#animated-border-blue {
  position: relative;
  border: 5px solid black;
  display: block;
	/*max-width: 800px;*/
	/*width: 810px;*/
	border-color: blue;
  animation-name: flash_border-blue;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: flash_border-blue;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: flash_border-blue;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
}
#animated-border-blue-process {
	position: relative;
  border: 2px solid black;
  display: block;
	/*max-width: 800px;*/
	/*width: 810px;*/
	border-color: blue;
  animation-name: flash_border-blue;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: flash_border-blue;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: flash_border-blue;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  border-radius: 20px;
}
#animated-border-red-process {
	max-width: 500px;
	position: relative;
  border: 2px solid black;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
	/*max-width: 800px;*/
	/*width: 810px;*/
	border-color: red;
  animation-name: flash_border-red;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: flash_border-red;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: flash_border-red;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  /* border-radius: 20px; */
}

@keyframes flash_border {
  0% {
    border-color: #C2FD0A; 
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: #C2FD0A;  
  }
}
@-webkit-keyframes flash_border {
  0% {
    border-color: #C2FD0A;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: #C2FD0A;  
  }
}

@-moz-keyframes flash_border {
  0% {
    border-color: #C2FD0A; 
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: #C2FD0A; 
  }
}

@keyframes flash_border-red {
  0% {
    border-color: red;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: red;
  }
}

@-webkit-keyframes flash_border-red {
  0% {
    border-color: red;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: red;
  }
}
@-moz-keyframes flash_border-red {
  0% {
    border-color: red;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: red;
  }
}


@keyframes flash_border-blue {
  0% {
    border-color: #1AC0FE;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: #1AC0FE;
  }
}

@-webkit-keyframes flash_border-blue {
  0% {
    border-color: #1AC0FE;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: #1AC0FE;
  }
}

@-moz-keyframes flash_border-blue {
  0% {
    border-color: #1AC0FE;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: #1AC0FE;
  }
}

@keyframes flash_border-orange {
  0% {
    border-color: orange;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: orange;
  }
}

@-webkit-keyframes flash_border-orange {
  0% {
    border-color: orange;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: orange;
  }
}
@-moz-keyframes flash_border-orange {
  0% {
    border-color: orange;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: orange;
  }

  
}


@keyframes flash_border-pink {
  0% {
    border-color: pink;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: pink;
  }
}

@-webkit-keyframes flash_border-pink {
  0% {
    border-color: pink;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: pink;
  }
}
@-moz-keyframes flash_border-pink {
  0% {
    border-color: pink;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: pink;
  }
}

@-webkit-keyframes flash_border-purple {
  0% {
    border-color: purple;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: purple;
  }
}
@-moz-keyframes flash_border-purple {
  0% {
    border-color: purple;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: purple;
  }

}

/*background color change*/
body{
 background-color: #000000;
 padding: 0px;
 margin: 0px;

}

#gradient
{
width: 100%;
height: 800px;
padding: 0px;
margin: 0px;
}

.submit-btn {
	background-color: #000000;
	/* border: 1px solid #000000b3; */
	color: #FFF;
	display: inline-block;
	padding: 0.8em 1.25em;
	font-weight: 300;
	font-size: 0.9em;
	text-decoration: none;
	width: 200px;

}

.submit-btn:hover, .submit-btn:focus {
  opacity: 0.7;
}

/* social media in footer */

.fa {
  padding: 12px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 0px 0px;
  
}


.fa {
  display: unset !important;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #000000b3;
  color: white;

}

.fa-twitter {
  background: #000000b3;
  color: white;
}

.fa-google {
  background: #000000b3;
  color: white;
}

.fa-linkedin {
  background: #000000b3;
  color: white;
}



.fa-instagram {
  background: #000000b3;
  color: white;
}

.fa-pinterest {
  background: #000000b3;
  color: white;
}



.fa-tumblr {
  background: #000000b3;
  color: white;
}


.box{
	width:100px;
	height:100px;
	background:#000;
	margin:30px;
	float:left;
}

/* swing effect  */
.swing {
  animation: swing ease-in-out 1s infinite alternate;
  transform-origin: center 20px;
  float:left;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  margin-bottom: 15px;
}

.swing:hover {
  animation: swing ease-in-out 0s infinite alternate;
  transform-origin: center -20px;
  float:left;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}



@keyframes swing {
  0% { transform: rotate(3deg); }
  100% { transform: rotate(-3deg); }
}

/* .swing {
  background: red;
} */




.nakh {
  animation: swing 10s infinite alternate;
  transform-origin: center 20px;
  float: none;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}



.nakh:after{
  content: '';
  position: absolute;  
  width: 30px; height: 30px;  
  border: 1px solid #999;
  top: -9px; left: 50%;
  z-index: 5;
  border-bottom: none;
  border-right: none;
  transform: rotate(45deg);
}
/* nail */
.nakh:before{
  content: '';
  position: absolute;
  width: 5px; height: 5px;
  top: -14px;left: 248px;
  z-index: 5;
  border-radius: 50% 50%;
  background: #000;
}



.small-images{
  width: 100%;

}

#text-padding{
  padding: 50px;
  padding-left: 0;
  font-size: 18px;
}

/* tabs in home page */
.wrapper{
  text-align:center;
  margin:50px auto;
}

.tabs{
  /* margin-top:50px; */
  font-size:15px;
  padding:0px;
  list-style:none;
  background:#fff;
  box-shadow:0px 5px 20px rgba(0,0,0,0.1);
  display:inline-block;
  /* border-radius:50px; */
  position:relative;
  /* margin-left: 24%; */
  /* margin-bottom: 2%; */
  /* width: 1070px; */
}
.tabs-side{
  /* margin-top:50px; */
  font-size:10px;
  padding:0px;
  list-style:none;
  background:#fff;
  /* box-shadow:0px 5px 20px rgba(0,0,0,0.1); */
  display:inline-block;
  border-radius:50px;
  position:relative;
  /* margin-left: 24%; */
  /* margin-bottom: 2%; */
  /* width: 1070px; */
}

.tabs-side a{
  text-decoration:none;
  color: #777;
  text-transform:uppercase;
  padding:10px 20px;
  display:inline-block;
  position:relative;
  z-index:1;
  /* transition-duration:0.6s; */
  cursor: pointer;
}

.tabs a{
  text-decoration:none;
  color: #777;
  text-transform:uppercase;
  padding:10px 20px;
  display:inline-block;
  position:relative;
  z-index:1;
  transition-duration:0.6s;
  cursor: pointer;
 
}

.tabs-side a.active{
  color:#fff;
}

.tabs a.active{
  color:#fff;
}

.tabs-side a i{
  margin-right:5px;
}


.tabs a i{
  margin-right:5px;
}

.tabs-side .selector{
  height:100%;
  display:inline-block;
  position:absolute;
  left:0px;
  top:0px;
  z-index:1;
  border-radius:50px;
  transition-duration:0.6s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  background: #4b4b4b;
 
}


.tabs .selector{
  height:100%;
  display:inline-block;
  position:absolute;
  left:0px;
  top:0px;
  z-index:1;
  /* border-radius:50px; */
  transition-duration:0.6s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  background: #4b4b4b;
 

  /*  background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
  background: -webkit-linear-gradient(45deg, #05abe0 0%,#8200f4 100%);
  background: linear-gradient(45deg, #05abe0 0%,#8200f4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(       startColorstr='#05abe0', endColorstr='#8200f4',GradientType=1 ); */
}

.parallax {
  /* The image used */
  background-image: url("https://image.ibb.co/h55EtA/img-main.jpg");

  /* Set a specific height */
  min-height: 900px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.khar {
  max-width: 100%;
  height: auto;

}

.index-img{
  border-radius: 50%;
  width: 5%; 
  margin-top: 32%;
}

.nav-pills>li>a{
  border-radius: 0px !important;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
  max-width: fit-content;
  background: #000000 !important;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05abe0', endColorstr='#8200f4',GradientType=1  !important;
}



#project4-process-imgs{
	width: 200px;
	height: 500px;
	max-height: 350px;
	border: 1px solid #FFDCA7;
  border-radius: 20px;


}

.home-name-wrapper{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}