#project-banner { padding-top:135px; padding-bottom: 60px;}
#project-banner .container-fluid{width: 88%; margin-left: 120px;}
#project-banner img.ban{width: 100%; margin-top: 11%; display: block;}
#project-banner img.ban-mb{display: none;}


#project-banner .flickity-enabled {position: relative;}
#project-banner .flickity-enabled:focus {outline: none;}
#project-banner .flickity-viewport {overflow: hidden; position: relative; height: 100%;}
#project-banner .flickity-slider {position: absolute; width: 100%; height: 100%;}
#project-banner .flickity-enabled.is-draggable {-webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
#project-banner .flickity-enabled.is-draggable .flickity-viewport {cursor: move; cursor: -webkit-grab; cursor: grab;}
#project-banner .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {cursor: -webkit-grabbing; cursor: grabbing;}
#project-banner .flickity-prev-next-button {position: absolute; top: 50%; width: 44px; height: 44px; border: none; border-radius: 50%; background: white; background: hsla(0, 0%, 100%, 0.75);
cursor: pointer; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
#project-banner .flickity-prev-next-button:hover {background: white;}
#project-banner .flickity-prev-next-button:focus {outline: none; box-shadow: 0 0 0 5px #09F;}
#project-banner .flickity-prev-next-button:active {opacity: 0.6;}
#project-banner .flickity-prev-next-button.previous {left: 10px;}
#project-banner .flickity-prev-next-button.next {right: 10px; }
#project-banner .flickity-prev-next-button:disabled {opacity: 0.3; cursor: auto;}
#project-banner .flickity-prev-next-button svg {position: absolute; left: 30%; top: 20%; width: 35%; height: 60%;}
#project-banner .flickity-prev-next-button .arrow {fill: #333;}
#project-banner .carousel-main {margin-bottom: 8px;}
/*#project-banner .carousel-cell {width: 100%; height: 400px;}*/
#project-banner .carousel-nav .carousel-cell {height: 60px; width: 120px; margin-right: 8px;}
#project-banner .carousel-main img {display: block; margin: 0 auto; }
#project-banner .carousel-nav .carousel-cell img {width: 100%; height: 60px;}
#project-banner .container {margin: 0 auto;}
#project-banner .carousel-nav .flickity-prev-next-button.previous {display: none;}
#project-banner .carousel-nav .flickity-prev-next-button.next {display: none;}
#project-banner h2 {margin-top: 0px; margin-bottom: 30px; font-size: 26px;     text-align: center;}
#project-banner i {font-size: 20px; float: right; color:#fde32a;}
#project-banner a {text-decoration: none;     display: block; }
#project-banner .heading{position: relative;}
#project-banner a.arrow {text-decoration: none;     display: block; position: absolute; top:0;  right: 0; }
#project-banner .heading a.arrow {text-decoration: none;     display: block; position: absolute;  right: 10px; }
#project-banner p {font-size: 14px; color: #000; margin-top: 30px; margin-bottom: 0px;}
#project-banner p span {font-weight: bold;}



* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;     width: 70%;
    margin: 0 auto;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 45%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: normal;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none; width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;     padding: 8px 15px;
}

/* Position the "next button" to the right */
.next {
  right:17%;
}
.prev{    left: 17%;}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white; display: block;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  display: inline-block;
  width: 8%;
  padding: 5px;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

.box-small{margin: 0 auto; display: block;     text-align: center;}







/*Testimonial*/
#testimonial{padding-top: 80px; padding-bottom: 80px; background: url(../images/testim.png) no-repeat; background-size: cover;}
#testimonial .container-fluid{width: 85%; margin-left: 143px;}
#testimonial h3{color: #fff;font-size: 24px;position: relative;margin-top: 0;padding-bottom: 50px;padding-left: 15px;}
#testimonial h3:after{position: absolute;content: '';bottom: 0;width: 255px; height: 3px;background: #fde32a;left: 15px;}
#testimonial .line{background: #fde32a; height: 1px;margin-top: 10px;}
#testimonial p{color: #fff;font-size: 12px;line-height: 22px; text-align: justify;}
#testimonial-btn .container-fluid{width: 80%;}
#testimonial-btn {padding-bottom:55px;}
#testimonial-btn a{margin: 0 auto;display: table;color:#121211;padding: 8px;border-radius: 20px;background:#fde32a;font-size: 11px;width: 15%;text-align: center;text-transform: uppercase;}
#testimonial-btn a:hover{text-decoration: none;background: #121211 ;color: #fde32a;}
#testimonial-btn .testim-link:hover{animation: pulse 1s infinite;transition: 0.3s;-webkit-transition: all 0.3s;transition: all 0.3s;}
#testimonial-btn .testim-link{;transition: .8s;}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(.9);
  }
    100% {
    transform: scale(1);
  }
}

/* text-style */
#testimonial .testimonial-style .testimonial-caption-style {font-weight: 400;font-size: 24px;left: 0;line-height: 30px;bottom: 40%;text-shadow: none;top: 0%;padding: 0;right:0;}
#testimonial .testimonial-style .testimonial-authors {font-weight: 400;font-size: 22px;color: #fff;line-height: 30px;margin-top: 20px;}
#testimonial .testimonial-style .carousel-inner > .item { padding-top: auto;padding-bottom: auto; height: 200px;z-index: 1;}
#testimonial .testimonial-style .carousel-control.left {background: none;box-shadow: none;text-shadow: none;}
#testimonial .testimonial-style .carousel-control.right {background: none;box-shadow: none;text-shadow: none;left: 24%;}
#testimonial .carousel-control.right{ left:35%;}
#testimonial .carousel-control.left,#testimonial .carousel-control.right{background-image: none;}
#testimonial .testimonial-style .carousel-control { color: #354052;}
#testimonial .testimonial-style .carousel-control:hover {color: #354052;text-decoration: none;transition: background-color 1s ease;}
#testimonial .carousel-control{background: #fde32a;width: 33px;height: 33px;bottom: 0;top: inherit;opacity: 1;border-radius: 30px;text-shadow: inherit;z-index: 1;}
#testimonial .carousel-control span{text-shadow: inherit;}
#testimonial .fa{font-size: 16px;color: #5f5f5f;}
#testimonial .carousel-indicators{bottom: 0;left: 7%;width: 25%;margin-left: 0%;margin-bottom: 6px;z-index: 1;}
#testimonial .testimonial-style .carousel-indicators li{padding: 0;width: 10px;height: 10px;background: transparent;text-indent: 0;overflow: hidden;text-align: left;position: relative;letter-spacing: 1px;-webkit-font-smoothing: antialiased;-webkit-border-radius: 50%;border-radius: 30;margin-right: 5px;-webkit-transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99);transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99);z-index: 10;cursor: pointer;border: 1px solid transparent;}
#testimonial .testimonial-style .carousel-indicators li:after{background-color:#fff;content: "";position: absolute;left: 0px;top: 0px;width: 10px;height: 10px;border-radius: 50%;}
#testimonial .testimonial-style .carousel-indicators .active{margin: 1px 5px 1px 1px;box-shadow: 0 0 0 2px#fff;background-color:transparent;position: relative;-webkit-transition: box-shadow 0.3s ease;-moz-transition: box-shadow 0.3s ease;-o-transition: box-shadow 0.3s ease;transition: box-shadow 0.3s ease;-webkit-transition: background-color 0.3s ease;-moz-transition: background-color 0.3s ease;-o-transition: background-color 0.3s ease;transition: background-color 0.3s ease;}
#testimonial .testimonial-style .carousel-indicators .active::after{transform: scale(0.5);background-color:#fff;content: "";position: absolute;left: -1px;top: -1px;width: 10px; height: 10px;border-radius: 50%;-webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease;-o-transition: background-color 0.3s ease; transition: background-color 0.3s ease;}
/* Textimonial CSS Code End */





/*Instagram Slider*/
#insta{padding-top: 60px; padding-bottom: 65px;}
#insta .container-fluid{width: 85%; margin-left: 143px;}
#insta #services-slider {padding-top: 25px;}
#insta #services-slider .owl-carousel .item {position: relative;z-index: 100; -webkit-backface-visibility: hidden;}
#insta #services-slider .owl-nav > div {margin-top: -26px;position: absolute;top: 50%;color: #cdcbcd;}
#insta #services-slider .owl-nav i {font-size: 17px;line-height: 33px;color: #5f5f5f;}
#insta #services-slider .owl-nav .owl-prev {left: 0;background:#fde32a;width: 33px;height: 33px;text-align: center;line-height: 26px;border-radius: 50px;}
#insta #services-slider .owl-nav .owl-next {right: -155px;background:#fde32a;width: 33px;height: 33px;text-align: center;line-height: 26px;border-radius: 50px;}
#insta #services-slider .owl-carousel .owl-dot{display: block;background: #5f5f5f;width: 10px;border: 2px solid #fff;height: 10px;display: inline-block;border-radius: 30px;margin: 0 10px;}
#insta #services-slider .owl-dots{width: 100px;position: absolute;bottom: 0;left: 5%;}
#insta #services-slider .owl-carousel .owl-dot.active{box-shadow:0 0 0 2px #5f5f5f;border: 2px solid #fff;}
#insta #services-slider .owl-nav{position: absolute;width: 40px;bottom: 0}
#insta #services-slider .owl-carousel .item-txt h4{font-family: 'DM Sans', sans-serif !important; color:#141313; font-size: 1em; line-height: 1.4em; padding-top: 20px; padding-bottom:40px; font-weight: 300;margin: 0;}
#insta .insta-link a:hover {text-decoration: none; background: #5f5f5f; color: #fde32a;}
#insta .insta-link:hover {animation: pulse 1s infinite; transition: 0.3s;-webkit-transition: all 0.3s; transition: all 0.3s;}
#insta .insta-top a {color: #121211; padding: 8px 30px; border-radius: 20px; background: #fde32a;font-size: 11px;width: 15%;text-align: center;text-transform: uppercase;}
#insta .insta-top h3:after {position: absolute; right: 0%; top: 50%; width: 100px; background: #121211; content: ''; height: 1px;}
#insta .insta-top {padding-bottom: 10px;}
#insta .insta-txt {float: left; padding-right:20px ; width:400px;}
#insta .insta-link {display: inline-block; padding:0 20px ; transition: .8s;}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(.9);
  }
    100% {
    transform: scale(1);
  }
}

#insta .insta-top h3{ margin: 0; position: relative; }
#insta .item-img {position: relative;}
#insta .item-img p{position: absolute; bottom: 15%; color:#fde32a; font-size: 18px; left: 15%; margin: 0;}
#insta .item-img .layer {position:absolute; top:0px; right:0px; bottom:0px; left:0px;}
#insta .item-img {cursor: pointer; position: relative;}
#services #services-slider .owl-carousel .item:hover h4{font-weight: 600;}
#insta .item-img:hover .layer{box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 1); -moz-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 1); -webkit-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 1)}
#insta .item-img .layer
{
transition:all 0.6s ease-in-out;
-webkit-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
}

#insta .item-img:hover .layer
{
transition:all 0.6s ease-in-out;
-webkit-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
}
#insta .item-img:hover p{font-weight: 600;}
#insta #services-slider .owl-carousel .item:hover h4{font-weight: 600; text-decoration: none;}













@media only screen and (min-width : 1920px) and (max-width : 2560px){

#testimonial p {font-size: 14px; line-height: 23px;}
#testimonial h3 {font-size: 35px; line-height: 52px;}
#testimonial-btn a {width: 10%; font-size: 14px;}
#insta {padding-top: 115px;}
#insta .insta-top {padding:0;}
#insta .item-img p {font-size: 30px;}
#insta #services-slider .owl-carousel .item-txt h4 {line-height: 27px;}
#insta #services-slider .owl-nav {width: 95px;}
#insta .insta-top a {font-size: 14px;}
#testimonial{padding-bottom: 100px; padding-top: 110px;}
#about-banner {margin-left: 95px;}
#about-banner img.ban {margin-top: 10%;}

}



@media only screen and (min-width : 1600px) and (max-width : 1919px){

#testimonial{width: 95%;}
#testimonial h3{line-height: 35px;}
#testimonial p{font-size: 13px;}
#testimonial-btn a{width: 10%; font-size: 12px;}
#insta .insta-top a{font-size: 12px;}
#insta .insta-top h3{font-size: 30px;}
#insta .insta-txt{padding-right: 20px; padding:0; width: 465px;}
#insta {width: 95%; padding-top: 100px; padding-bottom: 100px;}

}



@media only screen and (min-width : 1440px) and (max-width : 1599px){

#testimonial{width: 95%;}
#insta #services-slider .owl-carousel .item-txt h4{font-size: 1.1em;}


}



@media only screen and (min-width : 1366px) and (max-width : 1439px){

}



@media only screen and (min-width : 1240px) and (max-width : 1279px){

#testimonial{width: 94.3%;}

}



@media only screen and (min-width : 1280px) and (max-width : 1365px){

#insta .container-fluid {margin-left: 140px;}
#testimonial .container-fluid {margin-left: 140px;}
#project .container-fluid {margin-left: 140px;}


}



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

#insta #services-slider .owl-carousel .item-txt h4{font-size: 15px;}
#insta .container-fluid {margin-left: 135px;}
#testimonial .container-fluid {margin-left: 135px;}
#project-banner .container-fluid {width: 87%;}
#project-banner h2 {font-size: 24px;}


}



@media only screen and (min-width : 1024px) and (max-width : 1199px){

#about-banner img.ban {margin-top: 13%;}
#insta{padding-top: 55px;padding-bottom: 55px;}
#insta #services-slider .owl-carousel .item-txt h4{font-size: 13px;}
#insta .item-img p{font-size: 15px}
#insta .insta-top h3{font-size: 24px;}
#insta .container-fluid {margin-left: 120px;}
#testimonial .container-fluid {margin-left: 120px;}
#project .container-fluid {margin-left: 120px;}
#project-banner .container-fluid {width: 85%;}
#project-banner h2 {font-size: 20px;}


}



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

#about-banner img.ban {margin-top: 16%;}
#about-banner {width: 100%; margin: 0;}

#testimonial{width: 100%; margin: 0}
#testimonial .line{display: none;}
#testimonial h3{padding-left: 0; font-size: 21px; padding-bottom: 30px;}
#testimonial h3:after{left:0; width: 140px;}
#testimonial p{padding-top: 20px;}
#testimonial .carousel-control,#testimonial .carousel-indicators{bottom: -40px;}
#testimonial .carousel-control.right{left: 33%;}
#testimonial .container-fluid {margin: auto;}

#insta #services-slider .owl-dots{left: 8%; width: 140px;}
#insta #services-slider .owl-nav .owl-next{right: -185px;}
#insta {width: 100%; margin: 0}
#insta {padding-bottom: 60px; padding-top: 50px;}
#insta .insta-top h3{font-size: 22px;}
#insta .insta-top h3:after{right: 10%;}
#insta #services-slider .owl-carousel .item-txt h4{font-size: 13px;}
#insta .container-fluid {margin: auto;}

#project-banner .container-fluid {margin: auto;}
#project-banner h2 {font-size: 16px;}
#project-banner .flickity-prev-next-button {width: 35px; height: 35px;}



}



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

#about-banner img.ban {margin-top: 16%; display: none;}
#about-banner {width: 100%; margin: 0;}
#about-banner img.ban-mb{width: 100%; margin-top: 24%; display: block;}
#about-banner .txt h2 {font-size: 30px;}

#insta {width: 100%; margin: 0}
#insta .insta-top h3{text-align: center;}
#insta .insta-link{padding: 0;padding-top: 40px; margin: 0 auto; display: table;}
#insta #services-slider .owl-dots {width: 100%; left: 0;bottom: 10px;}
#insta #services-slider .owl-nav{width: 0px;bottom: -35px;}
#insta #services-slider .owl-nav .owl-next{right: -90px;}
#insta {padding-top: 50px;}
#insta .container-fluid {margin: auto;}
#insta .insta-top h3:after{display: none;}
#insta .insta-txt{width: 100%;}
#insta #services-slider .owl-carousel .owl-dot {margin: 0 5px;}

.table{overflow: scroll;}

#testimonial .line {display: none;}
#testimonial {width: 100%; margin: 0;}
#testimonial p {padding-top: 10px; text-align: center;}
#testimonial h3 {padding-bottom: 0px; margin-bottom: 20px; text-align: center;}
#testimonial-btn a {width: 45%;}
#testimonial .testimonial-style .testimonial-authors{margin-top: 10px;}
#testimonial {padding-bottom: 60px; padding-top: 60px;}
#testimonial .testimonial-style .carousel-inner > .item {height: 240px;}
#testimonial .carousel-indicators {width: 100%; left: 0%;}
#testimonial .carousel-control.left, #testimonial .carousel-control.right {display: none;}
#testimonial h3:after {margin: auto; display: block; position: inherit; left:0px; top: 15px;} 
#testimonial .container-fluid {margin: auto;}

.scroll a span {bottom: 20px; width: 22px; height: 35px; left: 50%;}
.scroll a span::before {top: 5px; left: 58%; width: 4px; height: 4px;}

#project-banner .container-fluid {margin: auto;}
#project-banner h2 {font-size: 14px;}
#project-banner {padding-top: 110px; padding-bottom: 50px;}
#project-banner .flickity-prev-next-button {width: 30px; height: 30px;}



}



@media only screen and (max-width : 375px){

#insta #services-slider .owl-dots{display: none;}
#insta #services-slider .owl-nav .owl-next{right: -76px;}
#insta .insta-top h3{font-size: 22px;}
#insta #services-slider .owl-carousel .item-txt h4{font-size: 13px; padding-bottom: 30px;}
#testimonial .carousel-indicators{width: 40%;}
#testimonial .testimonial-style .carousel-inner > .item{height: 300px;}
#about-banner img.ban-mb {margin-top: 26%;}
#project h2 {font-size: 18px;}
#project a {font-size: 11px;}
#project-banner h2 {font-size: 12px;} 


}



@media only screen and (max-width : 360px){

#about-banner img.ban-mb {margin-top: 28%;}  
#about-banner .txt p {font-size: 11px; line-height: 18px; margin-top: 6px;}
#about-banner .txt h2 {font-size: 25px;}

}



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

#insta.insta-link{padding: 0; padding-top: 30px;}
#testimonial h3{font-size: 24px;}
#testimonial h3:after{width: 150px;}
#about-banner img.ban-mb {margin-top: 31%;}  
#about-banner .txt h2 {font-size: 20px;}
#about-banner .txt p{font-size: 12px; line-height: 20px; margin-top: 5px;}
.scroll a span {bottom: 10px;}



}