.how-section1{
  margin-top:-15%;
  /*padding: 10%;*/
}
.how-section1 h4{
  color: #ffa500;
  font-weight: bold;
  font-size: 30px;
}
.how-section1 .subheading{
  color: #3931af;
  font-size: 20px;
}
.how-section1 .row
{
  margin-top: 2%;
}
.how-img 
{
  text-align: center;
}
.how-img img{
  width: 40%;
}


/* USER PROFILE PAGE */
.card {
  margin-top: 20px;
  padding: 30px;
  background-color: rgba(214, 224, 226, 0.2);
  -webkit-border-top-left-radius:5px;
  -moz-border-top-left-radius:5px;
  border-top-left-radius:5px;
  -webkit-border-top-right-radius:5px;
  -moz-border-top-right-radius:5px;
  border-top-right-radius:5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.card.hovercard {
  position: relative;
  padding-top: 0;
  overflow: hidden;
  text-align: center;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 1);
}
.card.hovercard .card-background {
  height: 130px;
}
.card-background img {
  -webkit-filter: blur(25px);
  -moz-filter: blur(25px);
  -o-filter: blur(25px);
  -ms-filter: blur(25px);
  filter: blur(25px);
  margin-left: -100px;
  margin-top: -200px;
  min-width: 130%;
}
.card.hovercard .useravatar {
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
}
.card.hovercard .useravatar img {
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.5);
}
.card.hovercard .card-info {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
}
.card.hovercard .card-info .card-title {
  padding:0 5px;
  font-size: 20px;
  line-height: 1;
  color: #262626;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.card.hovercard .card-info {
  overflow: hidden;
  font-size: 12px;
  line-height: 20px;
  color: #737373;
  text-overflow: ellipsis;
}
.card.hovercard .bottom {
  padding: 0 20px;
  margin-bottom: 17px;
}
.btn-pref .btn {
  -webkit-border-radius:0 !important;
}
.btn-primary1{
  color: #000;
  background-color: #f5f5f5;
  /* border-color: #314aae; */
  border-bottom-style: inset;
  border-bottom-color: #314aae;
  border-bottom-width: 7px;
  font-size: 20px;
}
.box{
  padding:60px 0px;
}

.box-part{
  background: #d3d3d3;
  border-radius:0;
  padding:60px 10px;
  margin:30px 0px;
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #fff !important;
}
input[type=button]:focus {
  border-color: #fff !important;
}
.hero-widget { text-align: center; padding-top: 20px; padding-bottom: 20px; }
.hero-widget .icon { display: block; font-size: 96px; line-height: 96px; margin-bottom: 10px; text-align: center; }
.hero-widget var { display: block; height: 64px; font-size: 64px; line-height: 64px; font-style: normal; }
.hero-widget label { font-size: 17px; }
.hero-widget .options { margin-top: 10px; }
#aa-slider .aa-slider-area .seq .seq-prev:hover, #aa-slider .aa-slider-area .seq .seq-prev:focus {
  background-color: #314aae;
}
#aa-slider .aa-slider-area .seq .seq-next:hover, #aa-slider .aa-slider-area .seq .seq-next:focus {
  background-color: #314aae;
}
@import url('https://fonts.googleapis.com/css?family=Amiri|Aref+Ruqaa|Cairo|Changa|El+Messiri|Harmattan|Jomhuria|Lateef|Mirza|Rakkas|Lato|Source+Sans+Pro|Ubuntu');
/* *{transition: 0.3s linear; padding:0;margin:0;} */

.item8 {
/*  background: #FFF; */
margin: 2em;
display: inline-block;
width: 200px;
height: 200px;
border-radius: 20px;
/*transform: rotate(45deg);*/
position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
padding:0;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
margin: 0 auto;
}
.item8 p {
  position: absolute;
  /*transform: rotate(-45deg);*/
  /*top: 30%;*/
  bottom: -12px;
  left: -20%;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px 20px;
  width:130%;
  text-align:center;
  color: #fff;
  transition: all 0.3s ease-in-out;
  
}

.item8:hover {
  transform: none;
  transform: scale(1.5);
  z-index:2;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.item8:hover > p {
  transform: none;
  top: 0;
  
}


.img_t {
  width: 100%;
  height: 100%;
  transition: 0.3s linear;
  /*transform: rotate(-45deg) scale(1.4) */
}
.item8:hover > img {
  transform: none;
  
}

p.ar {
  font-family: 'Rakkas', cursive;
  font-size:1.1em;

}




body::-webkit-scrollbar-thumb{
/*  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); */
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
/*  background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); */
/*   background: linear-gradient(to top, #2193b0, #6dd5ed);  */
border-radius:1em;
}

.gallery-title
{
  font-size: 36px;
  color: #42B32F;
  text-align: center;
  font-weight: 500;
  margin-bottom: 70px;
}
.gallery-title:after {
  content: "";
  position: absolute;
  width: 7.5%;
  left: 46.5%;
  height: 45px;
  border-bottom: 1px solid #5e5e5e;
}
.filter-button
{
  font-size: 18px;
  border: 1px solid #42B32F;
  border-radius: 5px;
  text-align: center;
  color: #42B32F;
  margin-bottom: 30px;

}
.filter-button:hover
{
  font-size: 18px;
  border: 1px solid #42B32F;
  border-radius: 5px;
  text-align: center;
  color: #ffffff;
  background-color: #42B32F;

}
.btn-default:active .filter-button:active
{
  background-color: #42B32F;
  color: white;
}

.port-image
{
  width: 100%;
}

.gallery_product
{
  margin-bottom: 30px;
}

.img-fluid{
  height: 260px;
  width: 100% !important;
}

.carousel {
  margin: 5px auto;
  padding: 0 10px;
}
.carousel .item8 {
  min-height: 330px;
  text-align: center;
  overflow: hidden;
}
.carousel .item3 .img-box {
  height: 160px;
  width: 100%;
  position: relative;
}
.carousel .item3 img { 
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  left: 0;
  right: 0;
}
.carousel .item3 h4 {
  font-size: 18px;
  margin: 10px 0;
}
.carousel .item3 .btn {
  color: #333;
  border-radius: 0;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  background: none;
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin-top: 5px;
  line-height: 16px;
}
.carousel .item3 .btn:hover, .carousel .item3 .btn:focus {
  color: #fff;
  background: #000;
  border-color: #000;
  box-shadow: none;
}
.carousel .item3 .btn i {
  font-size: 14px;
  font-weight: bold;
  margin-left: 5px;
}
.carousel .thumb-wrapper {
  text-align: center;
}
.carousel .thumb-content {
  padding: 15px;
}
.carousel .carousel-control {
  height: 100px;
  width: 40px;
  background: none;
  margin: auto 0;
  background: rgba(0, 0, 0, 0.2);
}
.carousel .carousel-control i {
  font-size: 30px;
  position: absolute;
  top: 50%;
  display: inline-block;
  margin: -16px 0 0 0;
  z-index: 5;
  left: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: none;
  font-weight: bold;
}
.carousel .item-price {
  font-size: 13px;
  padding: 2px 0;
}
.carousel .item-price strike {
  color: #999;
  margin-right: 5px;
}
.carousel .item-price span {
  color: #86bd57;
  font-size: 110%;
}
.carousel .carousel-control.left i {
  margin-left: -3px;
}
.carousel .carousel-control.left i {
  margin-right: -3px;
}
.carousel .carousel-indicators {
  bottom: -40px;
}
.carousel-indicators li, .carousel-indicators li.active {
  width: 10px;
  height: 10px;
  margin: 4px;
  border-radius: 50%;
  border-color: transparent;
}
.carousel-indicators li { 
  background: rgba(0, 0, 0, 0.2);
}
.carousel-indicators li.active {  
  background: rgba(0, 0, 0, 0.6);
}
.star-rating li {
  padding: 0;
}
.star-rating i {
  font-size: 14px;
  color: #ffc000;
}