#about-banner {width: 94%; margin-left: 80px; position: relative;}
#about-banner .container-fluid{width: 95%;}
#about-banner img.ban{width: 100%; margin-top: 11%; display: block;}
#about-banner img.ban-mb{display: none;}
#about-banner .txt{position: absolute; left: 15%; top: 55%;}
#about-banner .txt h2{font-size: 40px; font-weight: 500; margin: 0; color: #5f5f5f;}
#about-banner .txt p{font-size: 14px; font-weight:500; margin: 0; color: #5f5f5f;}
.scroll a { padding-top: 0;}
.scroll  a span { position: absolute; bottom: 30px; left: 9%; width: 30px; height: 50px; margin-left: -15px; border: 1px solid #5f5f5f; border-radius: 50px; box-sizing: border-box;}
.scroll  a span::before {position: absolute; top: 10px; left: 50%; content: ''; width: 6px; height: 6px; margin-left: -3px; background-color: #5f5f5f; border-radius: 100%; -webkit-animation: sdb10 2s infinite; animation: sdb10 2s infinite; box-sizing: border-box;}

@-webkit-keyframes sdb10 {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb10 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


/*project*/

#project {padding-top: 130px; padding-bottom: 60px;}
#project .container-fluid {width: 85%; margin-left: 143px;}
#project img {width: 100%;}
#project .top {margin-bottom: 25px;}
#project .rig {text-align: right;}
#project a {color: #5f5f5f; text-decoration: none; font-size: 14px;}
#project h2 {margin-top: 0px; margin-bottom: 0px; font-size: 26px;}
#project .port-txt{display: inline-block; width: 270px;}
#project .gal {position: relative; padding: 5px 5px; overflow: hidden;}
#project .gal .gal-img{overflow: hidden;}
#project .gal .gal-img img{width: 100%; transition: transform 0.9s ease-in-out;}
#project .gal .gal-img img:hover{transform: scale(1.1);}
#project .gal .txt .txt-btm a{color: #fff; text-decoration: none;}
#project .gal:hover .txt .txt-btm a{color: #fde32a; text-decoration: none;}
#project .gal:hover .txt  h3{color: #fde32a;}
#project .gal:hover .txt .txt-btm h5{color: #fde32a;}
#project .gal .txt{width: 84%;}
#project .gal .txt h3{position: absolute; top: 40px; left: 50px; margin: 0; color: #fff; font-size: 18px; font-weight: 300;}
#project .gal .txt .txt-btm{color: #fff; position: absolute; bottom: 25px; width: 100%; text-align: right; padding: 0 50px;}
#project .gal .txt .txt-btm h5{text-align: left; font-weight: 400; font-size: 14px; float: left; margin: 0;}
#project .gal .txt .txt-btm a{color: #fff; font-size: 14px;}


















/*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 .container-fluid {margin-left: 135px;}
#project .gal .txt h3 {font-size: 16px;}

}



@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;}


}



@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 .container-fluid {margin: auto;}
#project .rig { text-align: inherit; margin-top: 10px;}




}



@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;}

#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 .container-fluid {margin: auto;}
#project {padding-top: 110px; padding-bottom: 50px;}
#project h2 {font-size: 20px;}
#project a {font-size: 13px;}
#project .top {margin-bottom: 15px;}
#project .gal .txt h3 {top: 35px; left: 35px;}
#project .rig { text-align: inherit; margin-top: 10px;}



}



@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;}


}



@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;}



}