@media (min-width:1600px) and (max-width:2000px){
  header .logo-box a{ right:calc(56% - 60px);}
  header nav ul li{ font-size:22px; line-height:26px;}
  header nav ul li a{ padding:70px 18px 14px;}
  header .right-header .call span{ font-size:30px; line-height:35px;}
  header .right-header .call a{ font-size:30px; line-height:50px;}

  .middle-container.padd-btm{ padding-bottom:85px;}

  .home-page{ min-height:78vh;}
  .home-page .right-content h1{ font-size:64px; line-height:80px;}
  .home-page .right-content span{ font-size:100px;}
  .cta-btn{ font-size:21x; padding:18px 39px;}
  .home-page .our-service h2{ font-size:30px; line-height:40px;}
  .home-page .our-service ul li{ font-size:24px; line-height:30px; letter-spacing:5px; padding:10px 18px 5px; margin-bottom:12px;}

  footer{ padding:25px 5%;}
  footer p{ font-size:16px;}
  footer.black .social-icon li .facebook{ background-position:0 -35px;}
  footer.black .social-icon li .twitter{ background-position:-48px -35px!important;}
  footer.black .social-icon li .pinterest{ background-position:-95px -35px!important;}
  footer.black .social-icon li .insta{ background-position:-142px -35px!important;}

  .social-icon li a{ width:35px; height:35px; background-size:auto 70px!important;}
  .social-icon li .twitter{ background-position:-48px 0!important;}
  .social-icon li .pinterest{ background-position:-95px 0!important;}
  .social-icon li .insta{ background-position:-142px 0!important;}

  .work-page{ min-height:84.5vh;}
  .work-left h1{ font-size:89px; margin-right:5%;}
  .work-left .formated-text ul li{ font-size:50px; line-height:60px; padding:5px 20px;}
  .work-left .cta-btn{ padding:20px 30px;}

  .custom-arrow .owl-nav button{ width:50px; height:50px;}
  .custom-arrow .owl-nav button.owl-prev{ left:-100px;}
  .custom-arrow .owl-nav button.owl-next{ right:-100px;}

  .service-content h1{ font-size:60px; line-height:80px;}
  .service-content h2{ font-size:70px; line-height:90px;}
  .service-detail .right-detail p{ font-size:30px; line-height:45px;}
  .service-detail .right-detail .progres-sec{ margin:50px 0;}
  .service-detail .right-detail .single-progress{ margin-right:8%;}
  .service-detail .right-detail .single-progress p{ font-size:30px; line-height:40px; margin-left:30px;}
  div[role="progressbar"]{ --size:200px;}
  .service-detail .right-detail .cta-btn{ font-size:25px; padding:25px 35px;}

  .service-list{ padding:70px 10%;}
  .service-list h2{ font-size:60px; line-height:70px; margin-bottom:60px;}
  .service-box{ padding:60px 12%;}
  .services-slider .owl-item .icon img{ width:60px;}
  .services-slider h4{ font-size:25px; line-height:35px; margin-bottom:30px;}
  .services-slider p{ font-size:25px; line-height:35px; margin-bottom:25px;}
  .services-slider a{ font-size:25px; line-height:30px;}
  .services-slider .icon::before{ width:80px; height:80px; left:30px; top:-20px;}
  .top-slider-arrows .owl-nav{ top:-100px;}

  .about-banner{ padding:370px 4.2% 45px;}
  .about-banner h1{ font-size:45px;}
  .about-banner p{ font-size:30px;}
  .about-banner .pointer{ flex:none; padding:0 50px;}
  .about-banner .pointer img{ width:80px;}
  .about-banner .pointer span{ font-size:25px; line-height:1.5;}

  .offer-list .offer-box{ margin-bottom:50px;}
  .offer-box .offer-body{ font-size:22px;}
  .offer-box .offer-head h4{ font-size:30px;}
  .offer-box .offer-head img{ width:100px; margin-right:20px;}

  .worktogether-sec{ padding-bottom:220px;}
  .worktogether-sec h4{ font-size:90px;}
  .worktogether-sec p{ font-size:28px;}
  .worktogether-sec .number{ font-size:40px;}
  .worktogether-sec .mail{ font-size:18px; line-height:25px;}
}

@media (max-width:1024px){
  .about-page .wrapper{ width:95%;}
}

@media (min-width:992px) and (max-width:1024px){
  .home-page{ min-height:83vh;}
  .home-page .right-content .text-content{ padding-right:10%;}
  .home-page .left-banner{ margin-top:5%;}
  .home-page .right-content h1{ font-size:42px; line-height:55px;}
  .home-page .right-content span{ font-size:70px;}

  .work-page{ padding-top:5%; min-height: 83.5vh;}
  .work-left .formated-text ul li{ font-size:30px; line-height:35px; padding:4px 10px;}
  .work-left h1{ font-size:60px;}

  .wrapper{ width:90%;}
  .contact-map iframe{ height:300px;}
  .formSec{ padding:50px 0;}

  .service-content{ padding:30px 3% 50px;}
  .service-content h1{ font-size:35px; line-height:45px;}
  .service-content h2{ font-size:41px; line-height:50px; margin:0 0 50px;}

  .service-detail .service-banner:after, .service-detail .service-banner:before{ width:70px; height:70px; left:-45px;}
  .service-detail .service-banner:after{ right:-10px; left: auto;}

  .service-list{ padding:40px 3%;}
  .service-list h2{ font-size:40px; line-height:50px;}

  .about-banner{ padding:184px 4.2% 22px;}
  .about-banner h1{ font-size:20px; margin:0 0 20px;}
  .about-banner p{ font-size:16px;}
  .about-banner .points{ margin-top:20px;}
  .about-banner .pointer{ padding:0 7%;}

  .offer-list .offer-box{ padding:25px 3%;}
  .offer-box .offer-body{ font-size:15px;}
  .offer-box .offer-head h4{ font-size:21px;}

  .worktogether-sec .text-content{ width:40%;}
  .worktogether-sec h4{ font-size:50px;}
}

@media (min-width:768px) and (max-width:991px){
  header .logo-box a{ width:45%; top:12%; right:calc(50% - 30px);}
  header nav{ margin-right:10px;}
  header nav ul li{ font-size:13px;}
  header nav ul li a{ padding:35px 10px 10px;}
  header .right-header .call span{ font-size:15px; line-height:20px;}
  header .right-header .call a{ font-size:20px;}

  .home-page{ min-height:calc(100vh - 97px); }
  .home-page .left-banner{ margin-top:10%;}
  .home-page .our-service ul li{ font-size:16px; letter-spacing:1px;}

  .home-page .right-content h1{ font-size:32px; line-height:40px;}
  .home-page .right-content span{ font-size:55px;}
  .home-page .right-content .text-content{ padding-right:10%;}

  .cta-btn{ font-size:14px; padding:5px 15px; border-radius:3px;}

  footer{ padding:15px 3%;}

  /* Our Work Page responsive start here */
  .work-page{ padding-top:0; min-height:90.5vh; flex-direction: column;}
  .work-left{ flex:none;}
  .work-left h1{ font-size:70px;}
  .work-left .formated-text ul li{ font-size:40px; line-height:40px; padding:4px 10px;}
  .work-left .cta-btn{ padding:10px 15px; letter-spacing:1px; font-size:15px;}
  .custom-arrow .owl-nav button.owl-prev{ left:-60px;}
  .custom-arrow .owl-nav button.owl-next{ right:-60px;}
  .ipad-slider{ width:50%; margin:25px auto 170px; padding:7.1% 5.1% 5.3% 5.9%; min-height:10px;}

  /* Contact Page responsive start here */
  .wrapper{ width:95%;}
  .contact-map{ padding:15px 0;}
  .contact-map iframe{ height:250px;}
  .formSec{ padding:20px 0;}
  .contact-form{ padding:40px 4%;}
  .contact-form{ padding:40px 2%;}
  .contact-page .heading-sec{ margin-bottom:30px;}
  .contact-page .heading-sec h3{ font-size:35px; line-height:40px;}

  /* Service Page responsive start here */
  .service-content{ padding:20px 3% 40px;}
  .service-content h1{ font-size:28px; line-height:35px;}
  .service-content h2{ font-size:32px; line-height:45px; margin:0 0 40px;}
  .service-detail .service-banner{ margin-right:5%;}
  .service-detail .right-detail p{ font-size:16px; line-height:25px;}
  .service-detail .right-detail .progres-sec{ margin:20px 0;}
  .service-detail .right-detail .single-progress{ margin-right:30px;}
  .service-detail .right-detail .single-progress p{ font-size:14px; margin-left:15px;}
  div[role="progressbar"]{ --size: 80px;}
  .service-detail .right-detail .cta-btn{ font-size:14px; padding:7px 15px;}

  .service-detail .service-banner:after, .service-detail .service-banner:before{ width:50px; height:50px; left:-30px;}
  .service-detail .service-banner:after{ right:-10px; left: auto;}

  .service-list{ padding:25px 4%;}
  .service-list h2{ font-size:28px; line-height:40px; margin:0 0 20px;}
  .top-slider-arrows .owl-nav{ top:-55px;}

  .about-banner{ padding:150px 3% 20px;}
  .about-banner .banner-content{ width:40%;}
  .about-banner h1{ font-size:22px; line-height:1.5; margin:0 0 20px;}
  .about-banner h1 strong{ padding-bottom:5px;}
  .about-banner p{ font-size:14px;}
  .about-banner .points{ margin-top:20px;}
  .about-banner .pointer{ padding:0 5%;}
  .about-banner .pointer img{ width:30px; margin-right:10px;}
  .about-banner .pointer span{ font-size:13px; line-height:1.5;}

  .offer-sec{ padding:30px 0;}
  .offer-list .offer-box{ padding:20px 2.5%; margin:0 0 20px;}
  .offer-box .offer-body{ font-size:13px;}
  .offer-box .offer-head h4{ font-size:16px;}
  .offer-box .offer-head img{ width:50px;}
  .worktogether-sec{ padding-bottom:60px;}
  .worktogether-sec .text-content{ width:45%;}
  .worktogether-sec h4{ font-size:50px; margin:0 0 20px;}
  .worktogether-sec p{ font-size:16px; margin:0 0 10px;}
}

@media (max-width:767px){
  /* Home Page responsive start here */
  body.overlay{ position: relative; overflow: hidden;}
  body.overlay:before{ position: absolute; left:0; top:0; width:100%; height:100%; content: ''; background:rgba(0,0,0,.5); z-index:2;}
  header .toggle-btn{ display: inline-flex;}

  .middle-container.padd-btm{ padding-bottom:83px;}
  .middle-container.work-page{ padding-bottom:200px;}

  header.absolute{ position: static; background:#e9efff;}
  header nav{ position: fixed; left:0%; top:0; margin:0; height:100%; background:#fff; z-index:3; width:250px; transform: translateX(-260px); transition:.4s;}
  header nav.slide{transform: translateX(0);}
  header nav ul{ flex-direction: column;}
  header nav ul li{ border-bottom:1px solid rgba(0,0,0,.2); font-size:14px; margin:0;}
  header nav ul li a{ display: block; padding:10px 15px;}

  header .logo-box{ width:40%; height:78px;}
  header .logo-box a{ width:50%; top:10%; right:calc(50% - 25px);}
  header .right-header{ padding-top:10px; align-items: flex-start;}
  header .right-header .call span{ font-size:15px; line-height:20px;}
  header .right-header .call a{ font-size:20px; line-height:25px;}

  .home-page{ flex-direction: column; padding-left:15px; padding-right:15px; background-size:60%;}
  .home-page .left-banner{ width:100%; margin-top:0;}
  .home-page .right-content{ text-align: left; align-items: flex-start;}
  .home-page .right-content .text-content{ padding-right:0;}
  .home-page .right-content h1{ font-size:30px; line-height:35px;}
  .home-page .right-content span{ font-size:40px;}
  .home-page .right-content strong{ font-weight:bold;}

  .home-page .clock{ left:3%; top:60px; width:12%;}
  .chatbox{ width:10%; bottom:33%; top: auto; right:3%;}

  .cta-btn{ font-size:14px; padding:5px 15px;}

  .home-page .our-service{ align-items: flex-start; margin-top:30px;}
  .home-page .our-service h2{ font-size:16px; line-height:20px; font-weight:600;}
  .home-page .our-service h2:after{ left:0; right: auto;}
  .home-page .our-service ul{ align-items: flex-start;}
  .home-page .our-service ul li{ font-size:14px; letter-spacing:2px;}

  footer{ flex-direction: column; text-align: center; padding:15px 3%;}
  footer p{ font-size:12px; margin-bottom:10px;}

  /* Our Work Page responsive start here */
  .full-container.work{ background-position:center calc(100% - 83px);}
  .work-page{ flex-direction: column; padding-left:15px; padding-right:15px;}
  .work-left{ flex-direction: column;}
  .work-left h1{ margin:0 0 10px; font-size:70px;}
  .work-left .cta-btn{ padding:5px 15px;}
  .work-left .formated-text ul li{ font-size:30px; line-height:36px; padding:2px 10px;}

  .ipad-slider{ width:300px; margin:20px auto; min-height:300px; padding:42px 30px 36px 35px; background-size:100% 100%; min-height:10px;}
  .custom-arrow .owl-nav button{ width:25px; height:25px;}

  /* Service Page responsive start here */
  .service-content{ padding:20px 4% 30px;}
  .service-content h1{ font-size:16px; line-height:25px; margin-bottom:2px;}
  .service-content h2{ font-size:16px; line-height:25px; margin-bottom:30px;}
  .service-content h2:after{ left:0; right:auto;}

  .service-detail{ flex-direction: column;}
  .service-detail .service-banner{ width:100%; margin:0;}
  .service-detail .right-detail .progres-sec{ flex-direction: column; margin:20px 0;}
  .service-detail .right-detail p{ font-size:14px; line-height:20px;}
  .service-detail .right-detail .single-progress{ margin:0 0 15px;}
  .service-detail .right-detail .single-progress:last-child{ margin:0;}
  .service-detail .right-detail .single-progress p{ margin-left:15px; font-size:14px;}
  .service-detail .right-detail .cta-btn{ font-size:13px; padding:5px 15px;}
  div[role="progressbar"]{ --size: 50px;}

  .service-detail .service-banner:after, .service-detail .service-banner:before{ width:70px; height:70px; left:0;}
  .service-detail .service-banner:after{ right:0; left:auto;}

  .service-list{ padding:20px 4%;}
  .service-list h2{ font-size:16px; line-height:25px;}
  .services-slider{ margin-top:55px;}
  .service-box{ padding:20px 8%;}
  .services-slider .icon{ margin-bottom:20px;}
  .services-slider .owl-item .icon img{ width:35px;}
  .services-slider h4{ font-size:14px; line-height:20px; margin-bottom:12px;}
  .services-slider p{ font-size:14px; line-height: 20px;}
  .services-slider a{ font-size:14px;}
  .services-slider .icon::before{ width:40px; height:40px;}

  .top-slider-arrows .owl-nav{ top:-40px;}


  /* Contact Page responsive start here */
  .wrapper{ width:94%;}
  .contact-page .wrapper{ flex-direction: column;}
  .contact-map{ padding:15px 0;}
  .contact-map iframe{ height:150px;}
  .formSec{ padding:0 0 15px;}
  .contact-form{ padding:25px 5%;}

  .contact-page .heading-sec{ margin-bottom:20px;}
  .contact-page .heading-sec h5{ font-size:13px; margin-bottom:5px;}
  .contact-page .heading-sec h3{ font-size:20px; line-height:25px; font-weight:700;}

  .formSec .contact-form input{ font-size:13px; height:40px;}
  .formSec .contact-form textarea{ font-size:13px;}
  .formSec .contact-form .submit-btn{ font-size:12px; width:130px;}

  .address-sec{ padding:25px 5%; text-align: left;}
  .address-sec address{ margin-bottom:15px;}
  .address-sec h6{ margin-bottom:0; font-size:13px;}
  .address-sec .social-icon{ justify-content: flex-start; margin-top:5px;}

  /* About us Page responsive start here */
  .about-page .wrapper{ width:90%;}
  .about-banner{ background-position:bottom right; background-size:175%; padding:15px 15px 270px;}
  .about-banner h1{ font-size:18px; line-height:1.5; margin:0 0 15px;}
  .about-banner h1 strong{ padding-bottom:10px;}
  .about-banner p{ font-size:14px;}
  .about-banner .points{ margin-top:20px;}
  .about-banner .pointer{ flex-direction: column; padding:0 5%;}
  .about-banner .pointer img{ width:35px; margin:0 0 15px;}
  .about-banner .pointer span{ text-align: center; font-size:14px;}
  .about-banner .banner-content{ width:100%;}

  .offer-sec{ padding:25px 0 15px;}
  .offer-list{ flex-direction:column; flex-wrap:nowrap;}
  .offer-list .offer-box{ flex:0 0 100%; margin-bottom:15px; padding:20px 5%; box-shadow:0 0 10px #ddd;}
  .offer-box .offer-head{ margin-bottom:10px;}
  .offer-box .offer-head img{ width:50px;}
  .offer-box .offer-head h4{ font-size:18px; font-weight:600;}
  .offer-box .offer-body{ font-size:14px;}

  .title-sec{ margin:0 0 20px;}
  .title-sec h5{ font-size:12px;}
  .title-sec h3{ font-size:22px;}

  .worktogether-sec{ padding-bottom:70px;}
  .worktogether-sec .text-content{ width:100%;}
  .worktogether-sec h4{ font-size:22px; margin:0 0 10px;}
  .worktogether-sec p{ font-size:15px; margin:0 0 10px;}
  .worktogether-sec .number{ font-size:22px;}
  .worktogether-sec .mail{ margin-bottom:20px;}
  .worktogether-sec .cta-btn{ font-size:11px; padding:10px 35px 10px 15px;}
}