/*banner*/

#banner {height: 657px;position: relative;}
/*#banner h2 {font-size: 32px; font-weight: 600;color: #5f5f5f;text-shadow: 0px 1px 4px rgba(95,95,95,0.8);text-transform: uppercase;margin: 0;}
*/
#banner h2 {font-size: 100px; font-weight: 700; color: #5f5f5f;text-shadow: 0px 1px 4px rgba(95,95,95,0.8);text-transform: uppercase;margin: 0;}
#banner .animated {-webkit-animation-duration: 3s; animation-duration: 3s;}
#banner .slide__text { position: absolute; width: 40%; bottom: 35%; left: 17%; color: #fff;}
#banner .slider .slide .read {background: #5f5f5f; padding: 8px 25px; border-radius: 20px;}
#banner .slider .slide .read:hover {background: #0000;color: #5f5f5f;}
#banner .slider .slide a {color: #fff; font-size: 11px; font-weight: 300; text-decoration: none;position: relative;border:1px solid transparent;}
#banner .hiden{display: block;}
#banner .show{display: none;}
/*Button Hover*/



.btn-border-o:before, .btn-border-o:after {content: '';border-style: solid;position: absolute; z-index: 5;border-radius: 20px;box-sizing: content-box;}
.btn-border-o:before { width: 0; height: 100%;border-width: 1px 0 1px 0;top: -1px; left: 0;-webkit-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transition: all 0.5s;transition: all 0.5s;}
.btn-border-o:after {width: 100%;height: 0;border-width: 0 1px 0 1px;top: 0;left: -1px;}
.btn-border-o:hover:before { width: 100%;}
.btn-border-o:hover:after { height: 100%;}
.btn-border-o.read:before, .btn-border-o.read:after {border-color: #5f5f5f;}
.btn-border-o.read:hover { color: #5f5f5f;}



#banner .slider .slide i {margin-left: 10px;}
#banner .slider .slide p {font-size: 14px; font-weight: 500; color: #5f5f5f; margin-bottom: 18px; margin-top: 5px;}
#banner .slider {margin: 0 auto; width: 100%;}
#banner .slide_viewer {height: 657px; overflow: hidden; position: relative;}
#banner .slide img{width: 100%; display: block; margin-left: auto; margin-right: auto;}
#banner .slide_group {height: 100%; position: relative; width: 100%;}
#banner .slide { display: none; height: 100%; position: absolute; width: 100%;}
#banner .slide:first-child {display: block;}
#banner .slide_buttons {left: 7%; position: absolute; text-align: center;;top:15%; display: block; opacity: 0;}
#banner a.slide_btn {padding: 0px; color: #000; font-size: 0; margin: 10px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;background: #5f5f5f; display: inline-block;width:6px;height: 6px;border-radius: 30px;}
#banner .slide_btn.active, .slide_btn:hover {margin: 5px 7px; border: 0;padding: 7px;background: inherit; position: relative; box-shadow: 0 0 0 2px  #5f5f5f; color: #FFEB3B; cursor: pointer; text-decoration: none; }
#banner .directional_nav {margin: 0 auto;width: 100%; position: absolute; top: 51%; left:0%; opacity: 0;}
#banner .slide_btn.active:after{   transform: scale(0.5);background-color: #5f5f5f;content: "";position: absolute;left: 1px;top: 1px;width: 11px;height: 11px;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;}
#banner .previous_btn {bottom: 0; left: 100px; margin: auto; position: absolute; top: 0;}
#banner .next_btn {bottom: 0; margin: auto; position: absolute; right: 0; top: 0;}
#banner .previous_btn, .next_btn {cursor: pointer; opacity: 0.8; -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -ms-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; width: 65px;}
#banner .previous_btn:hover, .next_btn:hover { opacity: 1;}

@media only screen and (max-width: 767px) {
#banner .previous_btn { left: 50px;}
#banner .next_btn { right: 50px;}
}

#banner .directional_nav i{background: #fde32a7a; width: 33px; height: 33px; line-height: 33px; border-radius: 30px; color: #5f5f5f; font-size: 8px;}
#banner .directional_nav:hover i{background: #fde32a;}
.scroll a {padding-top: 60px;}
.scroll  a span {position: absolute; bottom: 10px; left: 10%; 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;
  }
}


/*About*/
/*#about{padding-top: 60px; padding-bottom: 60px;}*/
#about .container-fluid{width: 88%; margin-left: 142px;}
#about img{width: 90%;}
#about .txt {padding-top: 30px;}
#about .txt h3{font-size: 22px; font-weight: 500; line-height: 40px; text-transform: uppercase;}
#about .txt > h3 > span{font-weight: 200;}
#about .txt p{font-weight: 400;font-size: 12px;line-height: 22px;margin-bottom:40px; text-align: justify;}
#about .txt .read {border:1px solid #fde32a;transition: .8s; position: relative;color: #5f5f5f;padding: 8px 25px;border-radius: 20px;background: #fde32a;font-size: 11px;transition: .8s;}
#about .txt .read:hover{-webkit-transition: all 0.3s; -moz-transition: all 0.3s;-o-transition: all 0.3s; transition: all 0.3s; text-decoration: none;color:#5f5f5f; background: transparent;border:1px solid #5f5f5f;}




/*PORTFOLIO*/
#portfolio{padding-bottom: 60px; padding-top: 60px}
#portfolio .container-fluid{width: 88%; margin-left: 142px;}
#portfolio  .read {border:1px solid #5f5f5f;transition: .8s;position: relative;color: #fde32a;padding: 8px 25px;border-radius: 20px;background: #5f5f5f;font-size: 11px;text-transform: uppercase;}
#portfolio h3{margin: 0; position: relative; font-size: 24px; font-weight: 400;}
#portfolio h3:after{position: absolute;content: '';width:65px;height: 1px; background: #5f5f5f;top: 50%;right: 13%;}
#portfolio .proc{display: inline-block;}
#portfolio i {cursor: pointer; color: #fde32a; font-size: 21px;}
#portfolio .ico {cursor: pointer;background: #b4b3ab;width: 60px;height: 60px; border-radius: 50px; text-align: center;line-height: 65px;}
#portfolio  .ico:hover{background: #fde32a;color:#5f5f5f;-webkit-transition: all .8s ease;-moz-transition: all .8s ease;-ms-transition: all .8s ease;-o-transition: all .8s ease;transition: all .8s ease;}
#portfolio  .ico:hover i{color:#5f5f5f;}
#portfolio .ico {margin-top: -15px;display: inline-block;}
#portfolio .ico {transition: .8s;position: relative;}
#portfolio .ico:hover {animation: pulse 1s infinite;transition: 0.3s;-webkit-transition: all 0.3s;transition: all 0.3s;}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(.9);
  }
    100% {
    transform: scale(1);
  }
}

#portfolio .proc .txt{display: inline-block;padding: 0 10px;}
#portfolio .proc .txt h4{font-size: 13px;text-transform: uppercase;}
#portfolio .port-btn{float: left; margin-right: 20px; }
#portfolio .port-btn .read:hover{background:transparent;border:1px solid #fde32a;color: #5f5f5f;transition: .8s; text-decoration: none;}
#portfolio .port-txt{float: left; width: 270px;}
#portfolio .port{float: left; margin-top: 0px;}




/*Customers*/
#customers{padding-top: 80px; padding-bottom: 80px; background: url(../images/projects-bac.png) no-repeat;background-size: cover;}
#customers .container-fluid{width: 88%; margin-left: 142px;}
#customers h3{color: #fff; font-size: 30px; position: relative; margin-top: 0; padding-bottom: 40px; padding-left: 15px;}
#customers h3:after{position: absolute;content: '';bottom: 0;width: 255px; height: 3px;background: #fde32a;left: 15px;}
#customers .line{background: #fde32a; height: 1px;margin-top: 10px;}
#customers p{color: #fff;font-size: 12px;line-height: 22px; text-align: justify;}
#customers .counter{padding-top: 30px;}
#customers .count-title {font-size: 30px;font-weight: 500;margin-top: 10px;margin-bottom: 0;text-align: center;color: #fff;}
#customers .count-text {font-size: 16px ;font-weight: 400;margin-top: 10px;margin-bottom: 0;text-align: justify;}




/*Services*/
#services{padding-top: 60px; padding-bottom: 60px;}
#services .container-fluid{width: 88%; margin-left: 142px;}
#services .read {position: relative; color: #fde32a; padding: 8px 25px; border-radius: 20px; background: #5f5f5f; border:1px #5f5f5f solid; font-size: 11px; text-transform: uppercase;}
#services h3{margin: 0; position: relative; font-size: 24px; font-weight: 400;}
#services h3:after{position: absolute; content: ''; width:65px; height: 1px; background: #5f5f5f; top: 55%; right:0;}
#services .port-btn{float: left; margin-right: 40px; transition: .8s;}
#services .port-btn a:hover{border-color: #fde32a; background:transparent; color: #5f5f5f; transition: .8s; text-decoration: none;}
#services .port-txt{display: inline-block; width: 270px;}
#services p{font-size: 18px; line-height: 30px; font-weight: 400; margin-bottom: 20px;}
#services-slider .owl-carousel .item a:hover{text-decoration: none;}
.owl-carousel .owl-stage{padding-bottom: 10px}
.item-img:hover .item-txt h4{font-weight: 600; text-decoration: none;}

/* fix blank or flashing items on carousel */
#services #services-slider .owl-carousel .item {position: relative;z-index: 100; -webkit-backface-visibility: hidden;}

/* end fix */
#services #services-slider .owl-nav > div {margin-top: -26px;position: absolute;top: 50%;color: #cdcbcd;}
#services #services-slider .owl-nav i {font-size: 17px;line-height: 33px;color: #5f5f5f;}
#services #services-slider .owl-nav .owl-prev {left: 0;background:#fde32a;width: 33px;height: 33px;text-align: center;line-height: 26px;border-radius: 50px;}
#services #services-slider .owl-nav .owl-next {right: -155px;background:#fde32a;width: 33px;height: 33px;text-align: center;line-height: 26px;border-radius: 50px;}
#services #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;}
#services #services-slider .owl-dots{width: 100px; bottom: 0; margin-left: 5%;}
#services #services-slider .owl-carousel .owl-dot.active{box-shadow:0 0 0 2px #5f5f5f;border: 2px solid #fff;}
#services #services-slider .owl-nav{position: absolute;width: 40px;bottom: 0}
#services #services-slider .owl-carousel .item-txt h4{color:#141313; font-size: 16px; padding-top: 20px; padding-bottom: 20px; font-weight: 400;line-height: 27px;margin: 0;}




/*Project*/
#project{padding-bottom: 30px; width: 94%; margin-left: 70px;}
#project .container-fluid{width: 100%;}
#project .gallery img {width: 100%;}
#project .top{width: 90%; margin: 0 auto; display: table; padding-bottom: 30px;}
#project .top .read {border:1px solid #5f5f5f;color: #fde32a;padding: 8px 35px;border-radius: 20px;background: #5f5f5f;font-size: 11px;text-transform: uppercase;}
#project .top .read a {color: #fde32a; font-size: 11px; text-transform: uppercase; text-decoration: none;}
#project .port-btn{float: left; margin-right: 40px; transition: .8s; }
#project .top .read:hover{text-decoration: none;border-color: #fde32a;color: #5f5f5f;background: transparent;}
#project .top h3{margin: 0; position: relative; font-size: 27px; font-weight: 400;}
#project .top h3:after{position: absolute; content: ''; width:100px; height: 1px; background: #5f5f5f; top: 55%; right: 5%;}
#project .port-txt{display: inline-block;    width: 270px;}
#project .gallery .gal {position: relative;padding: 10px 5px;overflow: hidden;}
#project .gallery .gal .gal-img{overflow: hidden;}
#project .gallery .gal .gal-img img{width: 100%;transition: transform 0.9s ease-in-out;}
#project .gallery .gal .gal-img img:hover{transform: scale(1.1); }
#project .gallery .gal:hover .txt .txt-btm a{color: #fde32a;text-decoration: none;}
#project .gallery .gal:hover .txt  h3{color: #fde32a;}
#project .gallery .gal:hover .txt .txt-btm h5{color: #fde32a;}
#project .gal{height: 620px;}
#project .sm-gal {height: 320px;}
#project .gal .txt{width: 84%;}
#project .gal .txt h3{position: absolute; top: 50px; left: 50px; margin: 0; color: #fff; font-size: 25px; 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: 20px;float: left;margin: 0;}
#project .gal .txt .txt-btm a{color: #fff;font-size: 20px;}
#project .sm-gal .txt{bottom: 0;width: 80%;}
#project .sm-gal  .txt h3{top: 30px; left: 30px; position: absolute; margin: 0; color: #fff; font-size: 18px;}
#project .sm-gal .txt .txt-btm{;color: #fff;width: 100%;text-align: right;padding: 0 30px;right: 0;    bottom: 30px;}
#project .sm-gal .txt .txt-btm h5{text-align: left;font-weight: 400; font-size: 16px;float: left;margin: 0;}
#project .sm-gal .txt .txt-btm a{color: #fff;font-size: 16px;}




/*Testimonial*/
#testimonial{padding-top: 80px; padding-bottom: 80px; background: url(../images/testim.png) no-repeat;background-size: cover;}
#testimonial .container-fluid{width: 88%; margin-left: 142px;}
#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: 60px;}
#insta .container-fluid{width: 85%; margin-left: 142px;}
#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;}








/*Responsive*/

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

#banner .slide_viewer{height: 875px;}
#banner{height: 875px;}
#banner h2{font-size: 45px;}
#banner .slider .slide p{font-size: 20px;}
#banner .slider .slide .read{font-size: 14px;}

#about .txt h3{font-size: 35px; line-height: 50px; margin: 0; padding-bottom: 35px;}
#about .txt{padding-top: 80px;}
#about .txt p{font-size: 15px; line-height: 23px;}
/*#about{padding-top: 150px; padding-bottom: 100px;}*/

#portfolio h3{font-size: 35px;}
#portfolio h3:after{width: 150px}
#portfolio .port-txt{width: 450px}
#portfolio .port-btn{margin-right: 40px;}
#portfolio .read{font-size: 15px;}
#portfolio .proc .txt h4{font-size: 18px;}
#portfolio .proc .txt{padding: 0 15px;}
#portfolio .ico{width: 70px; height: 70px; line-height: 70px;}

#project {width: 96%}
#project .gallery .sm-gal .txt h3{font-size: 25.5px; left: 40px; top: 40px;}
#project .top{padding-bottom: 80px;}

#customers p{font-size: 14px; line-height: 23px;}
#customers h3{font-size: 35px; line-height: 52px; padding-bottom: 60px;}
#customers{padding-top: 140px; padding-bottom: 140px; width: 96%; margin-left: 80px;}
#customers h3:after{height: 5px;}

#services{padding-top: 100px; padding-bottom: 100px; width: 96%; margin-left: 80px;}
#services h3{font-size: 27px;}

#testimonial p{font-size: 14px; line-height: 23px;}
#testimonial h3{font-size: 35px; line-height: 52px;}
#testimonial-btn a{width: 10%; font-size: 14px;}
#testimonial{width: 96%;padding-bottom: 100px; padding-top: 110px;}

#insta {padding-top: 90px;}
#insta .insta-top{padding:0;}
#insta .item-img p{font-size: 30px;}
#insta #services-slider .owl-carousel .item-txt h4{line-height: 27px;     font-size: 1.5em;}
#insta #services-slider .owl-nav{width: 95px;}
#insta .insta-top a{font-size: 14px;}

.gal .txt .txt-btm h5{font-size: 27.63px;}
.gal .txt .txt-btm a{font-size: 27.63px;}
.sm-gal .txt .txt-btm h5{font-size: 20.37px;}
.sm-gal .txt .txt-btm a{font-size: 18px;}
.sm-gal {height: 490px !important;}
.gal{height: 985px;}



}



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

#banner .slide_viewer{height: 700px;}
#banner{height: 700px;}
#banner h2{line-height: 48px;}

#about .txt h3 {font-size: 30px;}
#about .txt p{font-size: 13px;}
#about{padding-top: 0; width: 95%; margin-left: 80px; padding-bottom: 0;}

#portfolio{width: 95%;}
#portfolio h3{font-size: 30px;}
#portfolio .port-txt{width: 350px;}
#portfolio h3:after{width: 120px;}
#portfolio .proc .txt {padding: 0 15px;}
#portfolio .proc .txt h4 {font-size: 17px;}

#customers {width: 95%;margin-left: 80px;}
#customers h3 {line-height: 40px;}
#customers p {font-size: 13px;}

#services {width: 95%; margin-left: 80px; padding-top: 100px; padding-bottom: 0;}
#services h3 {font-size: 30px; line-height: 40px;}
#services p {font-size: 25px; line-height: 35px;}
#services #services-slider {padding-top: 35px;}
#services .read {font-size: 14px; padding: 8px 30px;}
#services #services-slider .owl-nav {width: 50px;}
#services #services-slider .owl-carousel .item-txt h4 {font-size: 1.2em; line-height: 1.5em;}

#testimonial {width: 95%;}
#testimonial h3 {line-height: 35px;}
#testimonial p {font-size: 13px;}
#testimonial-btn a {width: 10%; font-size: 12px;}

#project .top h3 {font-size: 30px; line-height: 35px;}
#project .top h3:after {width: 80px; right: 10%;}
#project .top .read {font-size: 12px;}
#project .top {padding-top: 90px;}

#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 .item-img p {font-size: 25px; left: 12%;}
#insta {width: 95%; padding-top: 70px; padding-bottom: 100px;}




}



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

#about {padding-top: 0; padding-bottom: 0; width: 100%;}
#testimonial{width: 95%;}
#project{width: 95%; padding-top: 80px;}
#customers{width: 95%;}
#customers h3{font-size: 26px;}
/*#banner .slider{margin-left: 8px;}*/
#services #services-slider .owl-carousel .item-txt h4{font-size: 1.1em; line-height: 1.5em;}
#insta #services-slider .owl-carousel .item-txt h4{font-size: 1.1em;}

#services{padding-bottom: 0;}

}



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

.gal .txt h3{margin: 0; color: #fff; font-size: 27px; line-height: 30px;}
.sm-gal .txt h3{font-size:15px; line-height: 22px;}
.gal .txt .txt-btm h5,.gal .txt .txt-btm a{font-size: 16px;}
.sm-gal .txt .txt-btm h5,.sm-gal .txt .txt-btm a{font-size: 12px;}
#project{padding-bottom: 50px;}
#testimonial-btn {padding-bottom: 50px;}
#project .top{padding-top: 60px;}
#insta #services-slider .owl-carousel .item-txt h4{padding-top: 10px;}
#customers h3{font-size: 24px;}
#portfolio{padding-bottom: 60px;}
#services{padding-top: 60px;}
#services #services-slider { padding-top: 35px;}
#services p{font-size: 18px;line-height: 25px;   }
#services #services-slider .owl-carousel .item-txt h4{padding-top: 10px; font-size: 1em; line-height: 1.4em;}
#project .top h3{font-size: 24px;}
#insta{padding-bottom: 60px; padding-top: 60px;}


}*/



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

#testimonial{width: 94.3%;}
#project{width: 94.3%; padding-top: 45px;}
#portfolio{width: 94.3%;}
#footer .footer-sec h4{font-size: 17px; line-height: 28px;}


}



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

#about .container-fluid{margin-left: 140px;}
#portfolio .container-fluid{margin-left: 140px;}
#customers .container-fluid{margin-left: 140px;}
#services .container-fluid{margin-left: 140px;}
#testimonial .container-fluid{margin-left: 140px;}
#insta .container-fluid{margin-left: 140px;}
#project {margin-left: 75px; padding-bottom: 0;}
}



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

#banner {height: 578px;}
#banner .slide_viewer{height: 578px;}
#about .container-fluid{margin-left: 135px;}
#portfolio .container-fluid{margin-left: 135px;}
#customers .container-fluid{margin-left: 135px;}
#services .container-fluid{margin-left: 135px;}
#testimonial .container-fluid{margin-left: 135px;}
#insta .container-fluid{margin-left: 135px;}
#project {margin-left: 70px;}
#portfolio .port-txt {width: 250px;}
#portfolio .port-btn {margin-right: 12px;}

}



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

#banner h2{font-size: 22px;}
#banner .slider .slide p{font-size: 11px;}
#banner .slide_viewer { height: 575px;}
#banner {height: 575px;}
#banner .slide_buttons{left: 10%; top: 16%;}

#about .txt h3{font-size: 20px; line-height: 28px; margin-top: 0px;}
#about .txt p{font-size: 10px; line-height: 18px;}
#about{padding:  0;}
#about .txt .read{font-size: 9px;}
#about .txt {padding-top: 0px;}

#project .gal .txt h3 {font-size: 18px;}
#project .gal .txt .txt-btm h5 {font-size: 16px;}
#project .gal .txt .txt-btm a {font-size: 16px;}
#project .sm-gal .txt h3 {font-size: 14px;}
#project .sm-gal .txt .txt-btm h5 {font-size: 12px;}
#project .sm-gal .txt .txt-btm a {font-size: 12px;}
#project .sm-gal .txt .txt-btm {bottom: 15px;}
#project .gal {height: 520px;}
#project .sm-gal {height: 255px;}

#portfolio .port-btn {margin-right: 12px;}
#portfolio h3 {font-size: 20px;}
#portfolio h3:after {right: 8%;}
#portfolio .proc .txt h4 {font-size: 10px;}
#portfolio .ico{width: 45px; height: 45px; line-height: 50px;}
#portfolio i {font-size: 15px;}
#portfolio .port-txt{width: 220px;}

#services h3 {font-size: 20px;}
#services .port-txt {width: 200px;}
#services .port-btn{margin-right: 20px;}
#services p {font-size: 15px; line-height: 24px;}

#project .top h3 {font-size: 20px;}
#project .port-btn{margin-right: 20px;}
#project .port-txt{width: 210px;}

#insta{padding-top: 30px;}

#customers h3 {font-size: 18px; padding-bottom: 30px; padding-left: 0px;}
#customers .counter{padding-top: 0px;}

#about .container-fluid{margin-left: 120px;}
#portfolio .container-fluid{margin-left: 120px;}
#customers .container-fluid{margin-left: 120px;}
#services .container-fluid{margin-left: 120px;}
#testimonial .container-fluid{margin-left: 120px;}
#insta .container-fluid{margin-left: 120px;}
#project {margin-left: 60px;}


}


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

#about{width: 100%;margin: 0}
#about .txt h3{font-size: 23px;}
#about img {width: 50%; margin: auto; display: block;}
#about {padding-top: 0; padding-bottom: 0;}

#banner .slide .hiden img{display: block;}
#banner .slide .show {display: none !important;}
#banner .slide img {height: 480px;}
#banner .slide_viewer {height: 480px;}
#banner{height: 480px;}
#banner .slide__text {width: 58%;bottom: 31%;left: 20%;}
#banner .directional_nav{top: 55%;}
#banner .previous_btn{left: 30px;}
#banner h2 {font-size: 22px;}
#banner .slider .slide p {font-size: 13px; font-weight: 300;}
#banner .slider .slide .read {padding: 5px 15px;}
#banner .slide_buttons{top: 20%;}

#portfolio{width: 100%; margin: 0; padding-bottom: 40px;}
#portfolio .port{padding-top: 60px;}
#portfolio .proc .txt h4{font-size: 10px; margin-top: 14px;}
#portfolio .proc {width: 190px;}
#portfolio h3:after {top: 56%;}
#portfolio .container-fluid { width: 80%;}

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

#customers{width: 100%; margin: 0;}
#customers h3{font-size: 20px; padding-bottom: 15px; padding-left: 0; text-align: center;}
#customers h3:after{width: 210px; margin: auto; display: block; position: inherit; top: 22px; left: 0px;}
#customers .line{display: none;}
#customers p{padding-top: 20px; font-size: 12px;}
#customers .counter{padding-top: 10px;}
#customers .counter h2{margin: 0px;}
#customers .count-title{font-size: 24px;}
#customers .count-text{padding-top: 10px; margin: 0; text-align: center;}

#services{width: 100%; margin: 0;}
#services p{font-size: 18px; padding-top: 30px;}
#services #services-slider .owl-dots{width: 155px; left: 8%;}
#services #services-slider .owl-nav .owl-next{right: -180px;}
#services #services-slider .owl-carousel .item-txt h4{font-size: 13px; line-height: 17px;}
#services {padding-top: 60px;}

#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-btn { padding-bottom: 35px;}

#about .container-fluid{margin: auto;}
#portfolio .container-fluid{margin: auto;}
#customers .container-fluid{margin: auto;}
#services .container-fluid{margin: auto;}
#testimonial .container-fluid{margin: auto;}
#insta .container-fluid{margin: auto;}

#project {margin: auto;}
#project .gal .txt .txt-btm {padding: 0 30px;}
#project .gal .txt h3 {font-size: 14px; top: 30px; left: 30px;}
#project .gal .txt .txt-btm h5 {font-size: 12px;}
#project .gal .txt .txt-btm a {font-size: 12px;}
#project .sm-gal .txt h3 {font-size: 14px;}
#project .sm-gal .txt .txt-btm h5 {font-size: 12px;}
#project .sm-gal .txt .txt-btm a {font-size: 12px;}
#project .sm-gal .txt .txt-btm {bottom: 15px;}
#project .gal {height: 300px;}
#project .sm-gal {height: 300px;}

#testimonial-btn a {width: 25%;}

}




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

#customers .line{display: none;}
#customers h3{font-size: 22px; padding-bottom: 25px; text-align: center;}
#customers h3:after {margin: auto; display: block; position: inherit; left:0px; top: 15px;} 
#customers .count-title{font-size: 22px;}
#customers{width: 100%; margin: 0; padding-bottom: 40px;}
#customers .count-text{font-size: 11px; text-align: center;}
#customers .counter{padding-top: 0;}

#banner .slide .hiden{display: none;}
#banner .slide.show{display: block;}
#banner{height: 500px;overflow: hidden;}
#banner .slide_viewer{height: 500px;}
#banner .slide__text {width: 82%;bottom: 32%;left: 12%;}
#banner .slide_buttons{top: 5%;}
#banner h2{font-size: 24px;}
#banner .slider .slide p{font-size: 12px;}
#banner .directional_nav{ bottom: 10%; top: initial;}
#banner .previous_btn, .next_btn{width: 120px;}
#banner .previous_btn {left: 50%;}
#banner .directional_nav i{width: 28px; height: 28px; line-height: 28px;}
#banner .slider .slide .read {padding: 5px 15px;}
#banner .next_btn{right: 55px;}

#about{width: 100%;margin: 0}
#about .txt h3{font-size: 21px; line-height: 27px;}
#about .txt p{text-align: justify;}
#about img{margin: 0 auto;}
#about {padding-top: 50px; padding-bottom: 50px;}
#about .txt {padding-top:0px;}
#about .txt p{margin-bottom: 20px;}
#about .txt .read {text-align: center; margin: auto; display: block; width: 50%; padding: 8px;}

#services{width: 100%;margin: 0; padding-top: 50px; padding-bottom: 0px;}
#services p{font-size: 15px; line-height: 22px; padding-top: 25px;}
#services #services-slider{padding-top: 35px; padding-bottom: 55px;}
#services #services-slider .owl-dots{width: 100%; left: 0;}
#services #services-slider .owl-carousel .item-txt h4{font-size: 13px; padding-bottom: 20px; line-height: 16px;}
#services #services-slider .owl-nav .owl-next{right:-50px;}
#services #services-slider .owl-nav{bottom: -50px;}
#services .read {padding: 7px 15px; font-size: 9px; margin-right: 15px;}
#services h3 {font-size: 20px;}
#services .port-txt {display: block; width: auto;}
#services .port-btn {margin-right: 0px;}
#services h3:after {display: none;}
#services #services-slider .owl-carousel .owl-dot {margin: 0px 5px;}

#project{width: 100%; margin: 0; padding-top: 45px; padding-bottom: 20px;}
#project .gallery .gal{padding: 10px 10px !important; height: auto;}
#project .container-fluid {width: 85%;}
#project .top {width: 100%; margin: auto; display: block;}
#project .top .read {padding: 7px 15px; font-size: 9px; margin-right: 15px;}
#project .port-txt {display: block; width: auto;}
#project .top h3 {font-size: 20px;}
#project .port-btn {margin-right: 0px;}
#project .top h3:after {display: none;}

#insta{width: 100%; margin: 0;}
#insta .insta-top h3{text-align: center; padding-bottom: 30px;}
#insta .insta-link{margin: auto; display: block; text-align: center;}
#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 .insta-top h3:after{display: none;}
#insta .insta-txt{width: 100%;}
#insta {padding-top: 50px;}
#insta #services-slider {padding-top: 30px;}
#insta #services-slider .owl-carousel .owl-dot {margin: 0px 5px;}

#portfolio h3:after{ width: 40px; left: 110px; display: none;}
#portfolio .port-txt{width: inherit;}
#portfolio .port{padding-top: 50px; float: initial;}
#portfolio .proc {padding: 20px; display: block; background: #eaeaea; margin-top: 10px;}
#portfolio{width: 100%; margin: 0; padding-bottom: 50px;}
#portfolio .read{padding: 7px 15px; font-size: 9px;}
#portfolio h3{font-size: 20px;}
#portfolio .ico{width: 50px; height: 50px; line-height: 50px;}
#portfolio i{font-size: 15px;}
#portfolio .proc .txt {display: block; padding: 0px;}
#portfolio .ico {margin-top: 0px; margin: auto; display: block;}
#portfolio .proc .txt h4 {text-align: center; margin-bottom: 0px;}

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

#about .container-fluid{margin: auto;}
#portfolio .container-fluid{margin: auto;}
#customers .container-fluid{margin: auto;}
#services .container-fluid{margin: auto;}
#testimonial .container-fluid{margin: auto;}
#insta .container-fluid{margin: auto;}
#project {margin: auto;}


#project .gal .txt h3 {font-size: 16px; top: 30px; left: 30px;}
#project .gal .txt .txt-btm h5 {font-size: 14px;}
#project .gal .txt .txt-btm a {font-size: 14px;}
#project .sm-gal .txt h3 {font-size: 16px;}
#project .sm-gal .txt .txt-btm h5 {font-size: 14px;}
#project .sm-gal .txt .txt-btm a {font-size: 14px;}
#project .sm-gal .txt .txt-btm {bottom: 30px; padding: 0 30px;}
#project .gal .txt .txt-btm {padding: 0 30px; width: 96%;}

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


}



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

#banner .previous_btn {left: 45%;}
#banner .directional_nav{left: 2%;}
#banner .slide_viewer {height: 440px;}
#banner {height: 440px;}
#banner .slide__text{bottom: 28%;}

#about .txt h3{font-size: 18px;}
#about .txt .read{font-size: 8px; padding: 8px 15px;}

#services #services-slider .owl-dots{display: none;}
#services #services-slider .owl-nav {bottom: -20px;}
#services h3:after {display: none;}
#services #services-slider{padding-bottom: 30px;}
#services p{font-size: 13px;}
#services #services-slider .owl-nav .owl-next{right: -36px;}

#insta #services-slider .owl-dots{display: none;}
#insta #services-slider .owl-nav .owl-next{right: -77px;}
#insta .insta-top h3{font-size: 22px;}
#insta #services-slider .owl-carousel .item-txt h4{font-size: 13px; padding-bottom: 0px;}

#testimonial .testimonial-style .carousel-inner > .item{height: 300px;}
#testimonial-btn a {margin-top: 15px;}
#customers .count-text{font-size: 13px; text-align: center; line-height: 20px;}

#portfolio .read{font-size: 8px; padding: 8px 15px;}
#project {padding-bottom: 0px;}
#customers h3 {font-size: 20px;}
.gal .txt h3{font-size: 18px;}



}


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

#banner .directional_nav {bottom: 16%; left: 23%;}
#banner .previous_btn {left: 38%;}
.scroll a span {bottom: 35px;}
#project {padding-top: 20px;}
.testim-link {margin-top: 15px;}
#customers h3 { font-size: 18px;}


}



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

#banner h2{font-size: 18px; line-height: 20px;}
#banner .slider .slide p{line-height: 20px;}
#banner{height: 375px;}
#banner .next_btn {right: 15px;}
#banner .slider .slide .read {padding: 5px 15px;}
#banner .slide_viewer {height: 375px;}
#about .txt h3 {font-size: 22px;}
.insta-link{padding: 0; padding-top: 30px;}
#testimonial h3{font-size: 24px;}
#testimonial h3:after{width: 150px;}

#customers h3:after{width: 160px;}
#portfolio h3{font-size: 18px; margin-top: 2px;}
#banner .directional_nav i {font-size: 8px; width: 25px; height: 25px; line-height: 25px;}
#customers h3{font-size: 16px;}
#services h3 { font-size: 18px;}
#project .top h3:after{display: none;}
.gal .txt h3{left: 30px;}


}