/*responsive*/
@media (max-width: 1200px){
  .banners-slider .container{
    padding: 150px 75px;
  }
  .banners-slider .col-md-9{
    max-width: 100%;
    flex:0 0 100%;
  }
  .banners-slider .col-md-3{
    display: none;
  }
  .time-period{
    left: 0;
  }
}
@media (max-width: 1025px){
  .service-page .welcome-style .img-fluid{
    margin-top: 133px;
  }

}


@media (max-width: 991.5px){
  .main-menu{
    display: none;
  }
  .mobile-main-menu{
    display: block;
  }
  .slider-text h1{
    font-size: 50px;
  }
  .slider-text h1 br{
    display: none;
  }
  .navbar-brand{
    padding-top: 0;
    padding-bottom: 0;
  }
  .team-header{
    font-size: 75px;
  }
  .work-with-title h2{
    font-size: 50px;
    text-align: center;
  }
  .work-with-content .row .col-md-6:first-child{
    padding-left: 15px;
  }
  .work-with-title{
    width: 100%;
  }
  section, .case-studies, .testimonial-content {
    padding: 70px 0;
  }
  .ideas{
    padding-left: 0;
  }
  .works .slick-slide{
    height: 500px;
  }
  .works .slick-slide .img-fluid{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .works .slick-dots, .testimonial-slide .slick-dots {
    bottom: 0px !important;
    position: relative;
    margin-top: 36px;
  }

}

@media (min-width: 768px) {
  .dropdown-menu .dropdown .dropdown-menu {
    margin:0;
    border-width: 1px;
  }



}

@media (max-width: 1025px) {
  .slider-text h1{
    font-size: 120px;
  }
  .banners-slider.slick-initialized .slick-slide{
    height: 768px;
  }

}

@media (max-width: 991.5px) {
  .slider-text h1{
    font-size: 70px;
  }
  .banners-slider.slick-initialized .slick-slide{
    height: 600px;
  }
  .service-list> .row,  .benefits-content> .row {
    flex-wrap: nowrap;
    flex-wrap: nowrap;
    scroll-snap-type: x;
    overflow-x: scroll;
    scrollbar-width: none;
    width: 100%;
  }
  .service-list> .row::-webkit-scrollbar,  .benefits-content> .row::-webkit-scrollbar{
    background: transparent; /* make scrollbar transparent */
    -webkit-appearance: none;
    width: 0;
    height: 0;
  }
  .service-list> .row> .col-md-3{
    min-width: 280px;
    scroll-snap-align: start;
  }
  /*  .portfolio-page .tab-content article{
     margin-bottom: 0;
     scroll-snap-align: start;
   }
   .portfolio-page .works.notportfolio{
     width: 75vw;
     } */
  .benefits-content> .row> .col-md-4{
    min-width: 310px;
    scroll-snap-align: start;
  }
  .gallery-tab .tab-content .col-md-6 .tab-img{
    height: 350px;
  }

}


@media (max-width: 835.5px) {
  .work-slide .row{
    left: 15px;
    bottom: -55px;
  }
  .skill-content .design-skill{
    padding: 60px 20px;
  }
  .modal__description{
    padding: 1.6em 1.6em 0em;
  }
  .modal__portfolio .row p {
    padding: 0 1em;
  }
}

@media (max-width: 800.5px){
  .work-with-content .row .col-md-6:last-child{
    padding: 40px;
  }
  .work-with-content .mission-title:last-child p{
    margin-bottom: 0;
  }
  .work-with-content.work-together-content .row .col-md-6:first-child{
    padding: 0 12px;
    text-align: center;
  }
  .work-with-title h2{
    font-size: 40px;
    line-height: 75px;
  }
  .tab-pane .ideas p:last-child{
    margin-bottom: 0;
  }
  .work-with-content.work-together-content{
    width: 98%;
    margin: auto;
  }
  .abt-news-content .col-md-4 {
    height: 480px;
    overflow: hidden;
  }
  .welcome-content .color-gradient {
    height: 350px;
    margin-top: 50px;
    width: 350px;
    margin-bottom: 2em;
  }
  .welcome-content img{
    position: absolute;
    top: -35px;
    right: 0px;
    height: 100%;
    width: 90%;
    object-fit: contain;
  }
  .service-tab .tab-img {
    text-align: left;
  }
  .form-content .col-md-6:last-child{
    padding: 30px;
  }
  .form-fill iframe{
    height: 460px;
  }
  .case-page.service-page .ideas{
    padding-left: 0;
  }
  .case-page .mobile-img{
    margin-bottom: 10px;
  }
  .sub-header{
    margin-left: 80px;
  }
  .case-page ul {
    list-style: none;
    margin-left: 7px;
  }
  .app-content {
    padding-bottom: 0;
  }
}

/* tab */
@media (max-width: 768.5px){
  h2, .all-testimonial p, .design-header{
    font-size: 22px;
  }
  .service-page .ideas{
    padding-left: 6px;
  }
  .best-service .nav.nav-tabs, .gallery-tab #myTab, .portfolio-page .service-tab #myTab{
    flex-wrap: nowrap;
    scroll-snap-type: x;
    overflow-x: scroll;
    scrollbar-width: none;
    width: 100%;
    justify-content: flex-start;
  }
  .best-service .nav.nav-tabs::-webkit-scrollbar, .gallery-tab #myTab::-webkit-scrollbar,
  .portfolio-page .service-tab #myTab::-webkit-scrollbar{
    background: transparent; /* make scrollbar transparent */
    -webkit-appearance: none;
    width: 0;
    height: 0;
  }
  .service-tab .nav-tabs .nav-item, .gallery-tab #myTab .nav-item, .portfolio-page .service-tab #myTab .nav-item{
    scroll-snap-align: start;

  }
  .service-tab .nav-tabs .nav-link, .gallery-tab #myTab .nav-item .nav-link{
    padding: 10px 20px;
    font-size: 16px;
    word-break: keep-all;
    white-space: nowrap;
  }
  .modal__portfolio .modal-body .col-md-6 .img-fluid{
    width: 100%;
    height: max(40vh,300px);
    object-fit: cover;
  }
  .modal__portfolio .modal-body .row{
    padding: 2em;
  }
  .modal__portfolio .modal-body .col-md-6:last-child{
    margin-top: -30px;
    background-color: #fff;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1em;
  }
  .modal__portfolio .img--last .img-fluid{
    height: 300px;
  }
  .modal__portfolio .img--last:last-child{
    margin-bottom: 0;
  }

}

@media (max-width: 767.5px) {
  .counter-number> .row, .work-with .mission, .skill-content .row,.service-page .service-tab .tab-pane .flex{
    flex-wrap: nowrap;
    scroll-snap-type: x;
    overflow-x: scroll;
    scrollbar-width: none;
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }

  .counter-number> .row::-webkit-scrollbar , .work-with .mission::-webkit-scrollbar, .skill-content .row::-webkit-scrollbar,.service-page .service-tab .tab-pane .flex::-webkit-scrollbar{
    background: transparent; /* make scrollbar transparent */
    -webkit-appearance: none;
    width: 0;
    height: 0;
  }
  .counter-number> .row> .col-md-4{
    min-width: 210px;
    scroll-snap-align: start;
  }
  .skill-content .row{
    margin: 0 auto;
  }
  .footer-content .menu-header{
    font-size: 20px;
  }
  .footer-links li, .detail-list li{
    margin-bottom: 13px;
    line-height: 1.4;
    font-size: 15px;
  }
  .skill {
    margin-top: 70px;

  }
  .home .footer-content{
    padding-top: 160px;
  }
  .service-page .welcome-style .img-fluid{
    margin-top: 0;
    height: 300px;
    margin-bottom: 40px;
  }
  .service-page .ideas{
    padding-left: 16px;
  }
  .service-tab .tab-content{
    padding-top: 15px;
  }
  .service-tab .tab-pane img{
    height: auto;
    width: 300px;
    margin-bottom: 40px;
  }
  .service-tab .tab-pane{

  }
  .service-page .service-tab .ideas{
    padding-left: 0;
  }
  .service-tab .tab-content .row{
    margin-right: 15px;
    min-width: 460px;
    scroll-snap-align: center;
  }
  .form-fill iframe{
    height: auto;
    min-height: 260px;
  }
  .img--main .img-fluid{
    height: max(50vh,500px);
  }
  .modal__portfolio .img--last{
    padding: 0.5em 0em;
  }



}

@media (max-width: 600.5px) {
  .mobile-search-form{
    width: 280px;
    font-size: 14px;
  }
  .mobile-search-form .form-slide .form-control{
    height: 38px;
    width: 200px;
    font-size: 1em;
  }
  .slider-text h1{
    font-size: 50px;
  }
  .studies-header, .ideas-header, .work-with-title h2{
    font-size: 30px;
    text-align: left;
  }
  .works .slick-slide{
    height: 350px;
  }
  .work-text h4{
    font-size: 20px;
    margin-bottom: 10px;
  }
  .work-text .work-subheader{
    margin-bottom: 20px;
    font-size: 16px;
  }
  .work-text{
    padding: 25px;
  }
  .value h3{
    font-size: 40px;
  }
  .value .col-6{
    padding: 0 6px;
  }
  .benefits-list{
    padding: 20px;
  }
  .benefits-list .benefit-title{
    font-size: 18px;
    margin-bottom: 6px;
  }
  p {
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    margin-bottom: 15px;
  }
  .benefits-list p{
    margin-bottom: 0;
  }
  .work-with-content> .row{
    width: 90%;
    margin: 0 auto;
  }
  .work-with-title{
    padding: 12px;
  }
  .work-with-title h2{
    margin-bottom: 0;
    line-height: 1.7;
  }
  .work-with-content .row .col-md-6:last-child {
    padding: 30px;
  }
  .work-with-content .mission-title p{
    margin-bottom: 0;
  }
  h2, .all-testimonial p, .design-header {
    font-size: 18px;
    margin-bottom: 6px;
  }
  .work-with-content .mission-title.col-6{
    min-width: 300px;
    scroll-snap-align: start;
  }
  .all-testimonial p, .design-header{
    line-height: 1.5;
  }
  .skill-content .design-skill{
    padding: 35px;
    min-width: 250px;
  }
  .design-skill .sub-header{
    margin-bottom: 10px;
  }
  .service-tab .nav-tabs .nav-link{
    padding: 10px 14px;
    font-size: 16px;
    word-break: keep-all;
    white-space: nowrap;
  }
  div.about-banner,  div.banner{
    height: 420px !important;
  }
  .banner-content{
    padding: 200px 0 0px;
  }
  .service-tab .tab-pane img{
    margin-bottom: 20px;
  }
  .service-page .work-with-title h2 {
    font-size: 46px;
  }
  .service-tab .nav-tabs .nav-link, .gallery-tab #myTab .nav-item .nav-link{
    border: 1px solid #ddd;
    border-radius: 0px;
    margin: 0 4px;
  }
  .service-tab .nav-tabs .nav-link.active, .gallery-tab #myTab .nav-item .nav-link.active{
    border: 0;
  }
  .service-tab .nav-tabs .nav-item, .gallery-tab #myTab .nav-item{
    border: 0;
    margin-bottom: 0;
  }
  .service-tab .tab-pane img{
    margin-bottom: 20px;
  }
  .service-tab .tab-header{
    margin-bottom: 5px;
  }
  .service-tab .tab-content{
    border: 0;
  }
  .gallery-tab .tab-content .col-md-6 .tab-img{
    height: 260px;
  }
  .gallery-tab #myTab .nav-item .nav-link{
    border: 1px solid #ddd;
  }
  .gallery-tab #myTab .nav-item .nav-link.active{
    background: #2A2273;
    color: #fff !important;
  }
  .gallery-tab .tab-content {
    padding-top: 15px;
  }
  .gallery-content .ideas .sub-header{
    margin-left: 80px;
  }
  .modal-body .inside-gallery{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-flow: row wrap;
  }
  .detail-modal .modal-dialog{
    width: 90%;
    margin: 1rem auto;
  }
  .abt-news-content .col-md-4{
    padding: 12px;
  }

}


/* bootstrap */
@media (max-width: 576px) {
  section, .case-studies, .testimonial-content {
    padding: 50px 0;
  }
  .time-period img:last-child{
    width: 200px;
  }
  h1, h2, h3, h4, h5, h6{
    margin-bottom: 10px;
  }
  .sub-header{
    margin-left: 80px;
  }
  .sub-header:before{
    top: 16px;
  }
  .works .work-text{
    min-width: 260px;
    max-width: 340px;
  }
  .service-page .ideas{
    padding-left: 0px;
  }
  .text-serve{
    margin-bottom: 0;
  }
  .portfolio-page .works.notportfolio{
    width: 90vw;
  }
}


@media (max-width:490px){
  .number{
    margin-bottom: 6px;
    font-size: 18px;
  }
  .service-header{
    font-size: 23px;
    margin-bottom: 8px;
  }
  .service-list > .row > .col-md-3{
    min-width: 230px;
    scroll-snap-align: center;
  }
  p{
    font-size: 13px;
    margin-bottom: 20px;
  }
  .banners-slider .container{
    padding: 150px 45px;
  }
  .work-slide .row{
    left: 10px;
    padding: 0;
    top: auto;
    bottom: 25px;
  }
  .work-slide .work-text{
    padding: 15px;
    min-width: 200px;
    max-width: 280px;
  }
  .benefits-content> .row> .col-md-4{
    min-width: 250px;
    scroll-snap-align: center;
  }
  .service-page .work-with-title h2 {
    font-size: 33px;
  }

}
@media (max-width: 430px) {
  .slider-text h1{
    font-size: 40px;
  }
  .banners-slider .container{
    padding: 190px 25px;
  }
  .slider-text a, .read-more{
    padding: 15px 35px;
  }
  .banners-slider.slick-initialized .slick-slide{
    height: 520px;
  }
  .mobile-search-form{
    right: 100%;
  }
  .company-images .slick-slide{
    height: 140px !important;

  }
  .works .slick-slide{
    height: 320px;
  }
  .work-text .work-add{
    padding: 10px 15px;
  }
  .work-with-content .row .col-md-6:last-child{
    padding: 20px;
  }
  .work-with-content .mission-title.col-6{
    min-width: 250px;
  }

  .testimonial-content .img-fluid{
    width: 100px;
  }
  .skill {
    margin-top: 40px;
  }
  .home .footer-content {
    padding-top: 140px;
  }
  .service-tab .tab-content .row{
    min-width: 320px;
  }
  .gallery-tab .tab-content .col-md-6 .tab-img{
    height: 220px;
  }
  .gallery-tab .tab-content .col-md-6 {
    margin: 8px 0;
  }
  .gallery-tab .tab-content{
    padding-top: 10px;
  }
  .port-modal .modal-header{
    font-size: 16px;
    padding: 9px;
  }
  .modal-header .close{
    font-size: 22px;
    padding: 15px;
  }
  .modal-body{
    padding: 12px;
  }
  .brief-information .title{
    font-size: 14px;
  }
  .welcome-content .color-gradient{
    height: 250px;
    width: 250px;
  }
  .welcome-content img{
    top: -15px;
    height: 100%;
    left: 15px;
    right: auto;
  }
  .abt-news-content .col-md-4{
    height: 380px;
    overflow: scroll;
    width: 100%;
  }
  .creative-icon i{
    font-size: 40px;
  }
  .creative-icon{
    margin-bottom: 20px;
  }
  .contact-number h3{
    font-size: 20px;
  }
  .contact-content .banner-header{
    margin-bottom: 10px;
    font-size: 30px;
  }
  .email-info{
    margin-bottom: 10px;
  }
  .form-fill h2{
    text-align: center;
  }
  .form-fill .form-group input, .form-fill .form-group textarea{
    padding: 12px;
  }
  .img--main .img-fluid {
    height: max(40vh,320px);
  }
  .modal__portfolio{
    font-size: 14px;
  }
  .modal__title{
    padding: 1em;
    font-size: 1.4em;
  }
  .title--small{
    font-size: 16px;
  }
  .modal__portfolio .modal-body .col-md-6 .img-fluid {
    height: min(30vh,300px);

  }
  .modal__portfolio .modal-body .row{
    padding: 1.3em;
  }
  .modal__portfolio .modal-body .col-md-6:last-child{
    margin-top: 0px;
    width: 100%;
  }
  .modal__portfolio .row p{
    padding: 0 0em;
  }
  .service-page .modal__portfolio .modal-dialog{
    width: 90%;
    margin: 1em auto;
  }
  .modal__portfolio .img--last .img-fluid{
    height: 220px;
  }
  .portfolio-page .works .col-lg-6{
    min-height: 180px;
    padding-left: 0;
  }
  .portfolio-page .work-texts .work-add {
    padding: 10px 15px;
  }
  .portfolio-page .tab-content article {
    margin-bottom: 15px;
  }
  .team-page .team-content .team-member .img-fluid{
    width: 100%;
    max-height: 300px;
    object-fit: cover;
  }
  .portfolio-page .works.notportfolio {
    height: 220px;
    padding: 8px;
  }
  .portfolio-page .works:hover .work-text{
    animation: none;
    opacity: 1;
  }
  .portfolio-page .works .work-text{
    padding: 14px;
    left: 0;
    right: auto;
  }
  .portfolio-page .works .work-text h4 a {
    font-size: 18px;
  }
  .portfolio-page .work-subheader {
    margin: 8px 0 12px;
  }
  .testimonial-content{
    padding-bottom: 100px !important;
  }
  .portfolio-page .banners-slider img {
    height: 220px !important;
  }

}

@media (max-width: 390px) {
  .mobile-search-form .form-slide .form-control{
    width: 151px;
  }
  .mobile-search-form{
    width: 230px;
  }
  .container{
    padding: 0 8px;
    width: 100%;
    overflow: hidden;
  }
  .mobile-main-menu .row{
    height: 80px;
    line-height: 80px;
    width: 100%;
  }
  .sidenav{
    max-width: 270px;
    padding: 20px;
  }
  .section, .case-studies, .testimonial-content{
    padding: 35px 0;
  }
  .work-text h4 {
    font-size: 16px;
    margin-bottom: 4px;
  }
  .work-with-content > .row{
    width: 100%;
  }
  .work-with-title h2{
    line-height: 1.3;
  }
  .portfolio-page .works .work-texts h4 {
    font-size: 18px;
    line-height: 1.5;
  }
  .portfolio-page .work-subheader {
    font-size: 14px;
    margin-bottom: 16px;
  }
  .portfolio-page .works .row {
    padding: 1em 2em;
  }
  .modal__portfolio .modal-body .col-md-6 .img-fluid {
    height: min(30vh,200px);
  }


}
@media (max-width: 370px) {
  .service-page .work-with-title h2 {
    font-size: 27px;
  }
  .modal__description .title--small{
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 12px;
  }
  .modal__description {
    padding: 1.6em 1.6em 0em;
    width: auto;
  }
}

@media (max-width: 340px) {
  .work-with-content .mission-title.col-6{
    min-width: 230px;
  }
  .service-tab .tab-pane img{
    width: 260px;
  }
  .service-tab .tab-content .row{
    min-width: 300px;
  }
}