@media screen and (max-width: 1600px) {
}

@media screen and (max-width: 1440px) {
}

@media screen and (max-width: 1366px) {
  .container {
    max-width: 1170px;
  }
  .bannerImg {
    max-width: 590px;
    width: 590px;
    flex: 0 0 590px;

  }
  .pattern-images img {
    max-width: 413px;
  }
  .hmServicesInnerRow {
    margin-bottom: 40px;
  }
  .pattern-images {
    bottom: -130px;
  }
  .hmAbout {
    padding:70px 0 100px;
  }
  .aboutImg {
    height: 450px;
    width: 450px;
    margin-right: 40px;
  }
  
  .aboutIconImg .about-icon {
    width: 80px;
    height: 80px;
  }
  .aboutIconImg .about-icon.html-icon {
    top: -10px;
    right: 30px;
  }
  .aboutIconImg .about-icon.wordpress-icon {
    top: 110px;
    right: -40px;
  }
  .aboutIconImg .about-icon.woo-icon {
    bottom: 110px;
    right: -40px;
  }
  .aboutIconImg .about-icon.w-icon {
    bottom: -10px;
    right: 30px;
  }
  .theTeamSection {
    padding: 100px 0;
  }
  .projectSlidSection {
    padding:0 0 100px 0;
  }
  .projectLogoSection {
    padding:100px 0;
  }
  .project-image {
    width: 400px;
    height: 400px;
    margin-right: 60px;
  }
  .project-image .project-animation-logo {
    width: 600px;
    height: 600px;
    top: -100px;
    left: -100px;
  }
}

@media screen and (max-width: 1199px) {
  h1 {
    font-size: 32px;
    line-height: 48px;
  }
  h2 {
    font-size: 34px;
    line-height: 40px;
  }
  .container {
    max-width: 962px;
  }
  .bannerContent h4 { 
    font-size: 18px;
    line-height: 22px;
  }
  .bannerContent {
    padding-right: 30px;
    width: 700px;
  }
  .bannerImg .banner-icon {
    height: 70px;
    width: 70px;
  }
  .bannerImg .banner-icon.woo-icon {
    top: -24px;
    left: 30px; 
  }
  .bannerImg .banner-icon.w-icon {
    top: -30px;
  }
  .bannerImg .banner-icon.html-icon {
    bottom: 110px;
    right: -30px;
  }
  .bannerImg .banner-icon.wordpress-icon {
    bottom: 116px; 
  }
  .bannerImg {
    max-width: 480px;
    width: 480px;
    flex: 0 0 480px;
  }
  .casestudy-img{
    height: 220px;
  }
  .hmServicesList .hmServicesListRow {
    padding: 18px 20px;
    margin-bottom: 30px;
    width: 390px;
    height: 80px;
  } 
  .hmServicesList .hmServicesListRow:last-child {
    margin-bottom: 0;
  }
  .hmServicesList {
    max-width: 450px;
  }
  .hmServicesListRow::after {
    height: 75px;
    bottom: -82px;
    background-size: auto 70px;
  }
  .hmServicesListRow:nth-child(even)::after {
    background-size: auto 70px;
  }
  .hmServicesInnerRow:nth-child(odd) .hmServicesInnerImg img {
    margin-right: -15px;
  }
  .hmServicesInnerRow:nth-child(odd) .hmServicesInnerImg img {
    margin-left: -15px;
  }
  .pattern-images {
    bottom: -100px;
  }
  .pattern-images img {
    max-width: 300px;
    transform: rotate(-10deg);
  }
  .hmAbout { 
    padding :60px 0 80px;
  }
  .aboutImg {
    height: 350px;
    width: 350px;
    margin-right: 40px;
  } 
  
  .aboutIconImg .about-icon {
    width: 60px;
    height: 60px;
  }
  .aboutIconImg .about-icon.html-icon {
    top: -10px;
    right: 40px;
  }
  .aboutIconImg .about-icon.wordpress-icon {
    top: 85px;
    right: -30px;
  }
  .aboutIconImg .about-icon.woo-icon {
    bottom: 85px;
    right: -30px;
  }
  .aboutIconImg .about-icon.w-icon {
    bottom: -10px;
    right: 40px;
  } 
  .hmPortfolioCol {
    margin-bottom: 20px;
  }
  .hmOurPortfolio {
    padding: 80px 0 60px;
  }
  .hmtestimonial {
    padding: 100px 0;
  }
  .hmtestimonialInnerSlid {
    padding: 70px 50px;
  }
  .hmtestimonial .OneImg {
    left: -30px;
    top: -15px;
  }
  .hmtestimonialtop img {
    height: 80px;
    width: 80px;
  }
  .hmtestimonial .twoImg { 
    bottom: 50px;
    left: -20px;
  }
  .hmtestimonial .fiveImg { 
    right: -20px;
    top: -45px;
  }
  .hmtestimonial .sixImg { 
    right: 30px; 
    bottom: 65px;
  }
  .theTeamSection {
    padding: 80px 0;
  }
  .teamSliderRow {
    margin-top: 60px;
  }

  .aboutStorySection {
    padding: 80px 0;
  } 
  .aboutStoryInnerContent .aboutStoryWrap {
    padding-bottom: 60px;
  }
  .teamWrap::before { 
    top: 0;
    left:30px; 
  }
  .teamWrap::after { 
    bottom: 30px;
    right: 50px; 
  }
  .stroy-thumb-image {
    height: 300px;
    width: 300px;
  }
  .aboutStoryInnerImage {
    width: 340px;
    max-width: 340px;
    flex: 0 1 340px;
    margin-left: auto;
  }
  .stroy-thumb-image .stroy-icon-thumb { 
    top: -50px;
    left: -50px;
    height: 400px;
    width: 400px; 
  }
  .form-group select.form-control {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .projectSlidSection {
    padding:0 0 80px 0;
  }
  .projectLogoSection {
    padding:80px 0;
  }  
  .project-image {
    width: 360px;
    height: 360px;
    margin-right: 40px;
  }
  .project-image .project-animation-logo {
    width: 520px;
    height: 520px;
    top: -80px;
    left: -80px;
  }
  .webflowSection .projectIntroduction {
    padding-left: 15px;
  }
  /** Services css start **/
  .servicesSection {
    padding: 70px 0;
  }
  .servicesCardItemIcon span {
    margin: 0;
  }
  .centerBg::after {
    background-size: 70px;
  }
  /** Services css End **/
  .anyProject .anyProjectInner:after{
    width: 145px;
    right: -30px;
  }
  .what-we-offer .offer{
    padding: 38px;
  }
  .what-we-offer .offer-detail{
    border: 0;
  }
  .what-we-offer .monthly{
    padding: 38px 30px;
  }
  .hmServices, .what-we-offer{
    padding-top: 60px;
  }
  .how-process{
    padding: 60px 0 120px 0;
  }
  .pageTitle{
    margin-bottom: 40px;
  }
  .why-we-different {
    padding: 60px 0;
  }
  .footer{
    padding-top: 85px;
  }
}

@media screen and (min-width: 992px) {
  .teamWrap .slick-track .sliderWrap:nth-child(4n + 1) .teamProfile {
    padding-top: 177px;
  }
  .teamWrap .slick-track .sliderWrap:nth-child(4n + 2) .teamProfile {
    padding-top: 29px;
  }
  .teamWrap .slick-track .sliderWrap:nth-child(4n + 3) .teamProfile {
    padding-top: 151px;
  }
}

@media screen and (max-width: 991px) {
  /** Services css start **/
  .menuRow li {
    margin: 0 12px;
  }
  .headBtn {
    padding-left: 9px;
  }
  .headUnlock {
    margin-left: 10px;
  }
  .servicesSection {
    padding: 50px 0 20px;
  }
  .servicesCardItem {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .centerBg::after {
    background-size: 120px;
  }
  .servicesCardItemIcon {
    margin: 20px 0 45px;
  }
  .servicesCardCol {
    min-height: 432px;
  }
  h2 {
    font-size: 30px;
    line-height: normal;
  }
  h3 {
    font-size: 24px;
    line-height: normal;
  }
  .servicesCardItemContent h3 {
    font-size: 24px;
  }

  .anyProject .anyProjectInner,
  .aboutSection,
  .theTeamSection,
  .innerBanner,
  .projectSection, 
  .portfoiloSection,
  .infomationSection,
  .contactSection {
    padding: 50px 0;
  }
  .projectSlidSection {
    padding-bottom: 50px;
  }
  .aboutStorySection {
    padding: 60px 0;
  } 
  .aboutStoryInner {
    flex-direction: column;
  }
  .aboutStoryInnerContent p {
    max-width: 100%;
  }
  .aboutStoryInnerContent {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    padding-right: 0; 
    padding-bottom: 60px;
    text-align: center;
  }
  .aboutStoryWrap .slick-arrow {
    right: 0;
    left: 0;
    margin: 0 auto;
  }
  .aboutStoryWrap .slick-arrow.slick-prev {
    right: 50px; 
  }
  .aboutStoryWrap .slick-arrow.slick-next { 
    left: 50px;
  }
  .aboutStoryInnerImage {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
  }
  .stroy-thumb-image {
    margin: 0 auto;
  }
  /** Services css End **/
  h1 {
    font-size: 28px;
    line-height: 42px;
  }
  .main {
    padding-top: 82px;
  }
  .bannerContent {
    width: 100%;
    max-width: 100%;
    padding: 0 0 40px;
    text-align: center;
  }
  .bannerInner {
    display: flex;
    flex-direction: column;
  } 
  .hmBanner {
    padding-top: 40px;
  }
  .bannerContent p {
    max-width: 100%;
  }
  .bannerImg {
    flex: 1 1 auto;
    margin: 0 auto;
  }
  .hmBanner:after {
    background-size: 100%;
  }
  .hmServicesInnerRow {
    flex-direction: column;
    margin: 0;
  }
  .hmServicesInnerContent,
  .hmServicesInnerImg {
    width: 100%;
    max-width: 100%;
    padding: 0 0 40px;
  }
  .hmServicesInnerRow:first-child .hmServicesInnerImg {
    margin: 0;
  }
  .pattern-images {
    display: none;
  }
  .hmServicesInnerImg {
    text-align: center;
  }
  .hmServicesList {
    margin: 0 auto;
  }
  .hmServicesInnerRow .pageTitle {
    text-align: center;
    margin-bottom: 30px;
  }
  .hmServicesInnerRow .pageTitle p {
    margin: 0 auto;
  }
  .hmServicesInnerRow:nth-child(odd) {
    flex-direction: column;
  }
  .hmServicesInnerRow:nth-child(odd) .hmServicesInnerImg {
    text-align: center;
  }
  .hmAboutInner {
    flex-direction: column;
    margin: 0;
  }
  .hmAboutImg {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
  }
  .hmAboutContent {
    max-width: 100%;
    flex: 1 1 auto;
    width: 100%;
    text-align: center;
    padding-bottom: 30px;
  }
  .hmAboutContent p {
    margin: 0 auto 20px;
  }
  .aboutImg {
    margin: 20px auto;
  }
  .hmAbout {
    padding:20px 0 60px;
    
  }
  .hmOurPortfolio {
    padding: 60px 0 40px;
  }

  .hmtestimonial {
    padding: 60px 0;
  }
  .hmtestimonialTitle {
    margin-bottom: 30px;
  }
  .hmtestimonial .threeImg {
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -25px;
    height: 80px;
    width: 80px;
  }
  .hmtestimonial .fourImg {
    top: inherit;
    left: 0;
    right: 0;
    bottom: -25px;
    margin: 0 auto;
    height: 80px;
    width: 80px;
  } 
  .hmtestimonial .OneImg {
    left: -10px;
    top: -25px;
  }
  .hmtestimonial .twoImg {
    bottom: -25px;
    left: -10px;
  }
  .hmtestimonial .fiveImg {
    right: -10px;
    top: -25px;
  }
  .hmtestimonial .sixImg {
    right: -10px;
    bottom: -25px;
  }
  .anyProjectContent h2 {
    margin-bottom: 20px;
  }
  .anyProjectContent p {
    margin-bottom: 30px;
  }
  .hmtestimonialInnerSlid {
    padding: 80px 20px;
  }
  .projectLogoSection {
    padding: 60px 0;
  }
  .projectSlidInner .slick-slide {
    height: 320px;
  }

  .projectReviewInner {
    max-width: 420px;
  }
  .projectReviewSection {
      padding: 140px 0 70px;
  }
  .portfoiloInnerItemContent h3 {
    font-size: 20px;
    line-height: normal;
    text-align: left;
    width: calc(100% - 120px);
  }
  .teamWrap::after {
    top: inherit;
    right: 0;
    bottom: -10px;
  }
  .teamProfileImg img {
    height: 120px;
    width: 120px;
    margin: 0 auto;
  }
  .teamProfileImg {
    margin-bottom: 10px;
  } 
  .teamSliderRow::after {
    height: 250px;   
  }
  .teamWrap .slick-track .sliderWrap:nth-child(3n + 1) .teamProfile {
    padding-top: 70px; 
  }
  .teamWrap .slick-track .sliderWrap:nth-child(3n + 2) .teamProfile {
    padding-top: 40px;
  }  
  .teamWrap::before { 
    top: 0;
    left:15px; 
  }
  .teamWrap::after { 
    bottom: 0;
    right: 30px; 
  }
  .contactLeftImg {
    margin-bottom:30px;
  }
  .contactLeftImg, .contactForm {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  .contactLeftImg .pageTitle {
    margin-bottom: 30px;
    text-align: center;
  }
  .contactLeftImg .pageTitle p {
    margin: 0 auto;
  }
  .contactInfomation, .contactInfomationImg {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  .contactInfomation {
    order: 2;
  }
  .contactInfomationImg {
    text-align: center;
    margin-bottom: 50px;
  }
  .contactSection {
    padding-bottom: 30px;
  }
  .projectSectionInner {
    flex-direction: column;
  }
  .projectIntroduction {
    padding: 0 0 30px;
    text-align: center;
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }
  .projectIntroSection .projectIntroduction {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }
  .projectIntroductionImg {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
    text-align: center;
  }
  .project-image {
    margin: 40px auto 20px;  
  }
  .servicesCardItemIcon.services-details-icon {
    margin: 0 auto;
    bottom: -55px;
  }
  .projectSection.webflowSection {
    padding-top: 100px;
  }
  .webflowSection .projectIntroductionImg {
    margin-bottom: 30px;
  }
  .webflowSection .projectIntroductionImg, 
  .webflowSection .projectIntroduction {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding: 0 15px;
  }
  .featuresContent h3 {
    font-size: 20px;
  }
  .featuresContent p {
    font-size: 14px;
    line-height: 20px;
  }
  .projectReviewSection,
  .webflowPackageSection {
    padding: 50px 0;
  }
  .featuresInner .pageTitle {
    margin-bottom: 50px;
    position: relative;
    z-index: 5;
  }
  .servicesDetailsContactInner {
    padding: 50px 50px 30px;
  }
  .servicesDetailsContactInner::after {
    top: 10px;
    right: 0;
  }
  .servicesDetailsContact {
    padding-bottom:50px;
  }
  .hmBanner:after, .hmBanner:before, .anyProject .anyProjectInner:after, .anyProject .anyProjectInner:before{
    display: none;
  }
  .casestudyslider {
    margin-top: 30px;
  }
  .anyProject {
    margin-top: 20px;
  }
  .how-process{
    margin-top: 50px;
  }
  .monthly .monthly-flex{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
  }
  .what-we-offer .monthly h4, .what-we-offer .monthly h3, .what-we-offer .monthly p{
    text-align: left;
  }
  .what-we-offer .monthly .feature-included{
    border: 0;
    margin-top: 0;
    padding-top: 0;
  }
  .what-we-offer .offer{
    margin-top: 30px;
  }
  .why-we-different{
    padding: 60px 0 20px 0;
  }
  .why-we-different .col-md-6{
    margin-top: 20px;
  }
  .footer .d-flex{
    flex-direction: column;
  }
  .footer .email{
    text-align: left;
    margin-top: 20px;
  }
  .footer .email span::after{
    left: 220px;
    transform: scaleX(-1);
  }
  .footer {
    padding-top: 50px;
    padding-bottom: 15px;
  }
  footer h3 {
    font-size: 24px;
    line-height: 40px;
  }
  .footer .row:nth-child(2) {
    margin-top: 50px;
  }
  .footer .copywrite {
    margin-top: 20px;
  }
  .contactInfomation .pageTitle{
    text-align: center;
  }
  .contactInfomation .infomationList{
    align-items: center;
  }
  .contact-social ul{
    justify-content: center;
  }
  .form-all:after, .form-all:before{
    display: none;
  }
  .form-all{
    padding: 80px;
  }
  .innerBanner:before, .innerBanner:after{
    display: none;
  }
} 

@media screen and (max-width: 767px) {
  .main {
    padding-top: 60px;
  }
  .overflowHidden {
    overflow: hidden;
  }
  .headerInner {
    align-items: center;
  }
  .header {
    position: relative;
    z-index: 1000;
  } 
  .menuRight {
    position: fixed;
    top: 75px;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease-out;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100vh - 60px);
    background: #FBE8DE url('../images/background-pattern.png') repeat;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  .menuRow .menu {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
  }
  .menuRow .menu li {
    margin: 0px 0 10px;
  }
  .menuRow a {
    padding: 10px 0px;
    font-size: 18px;
  }
  .menuRow a:after{
    bottom: 0;
  }
  .headerTaskBtn {
    padding: 0;
    text-align: center;
  }
  .headerTaskBtn .btn {
    border: 1px solid #fff;
    color: #fff;
  }
  .menuRight.open {
    transform: scaleY(1);
  }
  .mobileMenuBtn {
    display: block;
  }
  .mobileMenuBtn button {
    border: 0;
    box-shadow: none;
    background: transparent;
    cursor: pointer;
    height: 25px;
    width: 25px;
    position: relative;
  }
  .mobileMenuBtn button img,
  .mobileMenuBtn button svg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: rotate(0deg);
    bottom: 0;
    transition: all 0.4s ease-in-out;
  }
  .mobileMenuBtn button .closeIcon {
    opacity: 0;
    transform: rotate(90deg);
  }
  .mobileMenuBtn button.open .menuIcon {
    opacity: 0;
    transform: rotate(45deg);
  }
  .mobileMenuBtn button.open .closeIcon {
    opacity: 1;
    transform: rotate(0deg);
  }

  .headerInner .logo a img {
    width: 180px;
  }
  .sticky .headerInner .logo a {
    width: 150px;
  }

  /** Services css start **/
  .headerMain {
    padding: 10px 0;
    height:75px;
  }
  .headBtn {
    padding-left: 9px;
  }
  .servicesCardItem, .anyProjectContent, .anyProjectImg {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .servicesCardCol {
    min-height: auto;
    max-width: 383px;
    margin: 0 auto;
    padding: 15px;
  }
  .servicesCardItemIcon {
    margin: 20px 0 25px;
  }

  .anyProjectContent {
    text-align: center;
    order: 2;
  }
  .anyProjectImg {
    text-align: center;
    margin-bottom: 30px;
  }

  /** Services css End **/
  .anyProjectContent p {
    margin: 0 auto 40px;
  }

  .aboutSectionContent {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    order: 2;
  }
  .aboutSectionImage {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    margin-bottom: 30px;
  }
  .aboutSectionContent h2,
  .aboutSectionContent p,
  .aboutStoryInnerContent p {
    max-width: 100%;
  }
  
  .aboutStoryInnerContent h2,
  .aboutStoryInnerContent p {
    margin-bottom: 15px;
  }
  .aboutStoryInnerContent h3 {
    margin: 9px 0 15px 0;
  }
  h1 {
    font-size: 22px;
  }
  h2 {
      font-size: 24px;
  }
  h3 {
      font-size: 20px;
  }
  .hmAbout {
    padding:0 0  50px;
  }
  .hmAboutContent h2 {
    margin-bottom: 20px;
  }
  .hmOurPortfolio {
    padding: 40px 0 20px;
  }
  .hmPortfolioCol {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 15px;
    margin-bottom: 20px;
    text-align: center;
  }
  .hmPortfolioCol p {
    margin:0 auto 20px;
  }
  .hmtestimonialSlidRow {
    flex-direction: column;
  }
  .hmtestimonialSlidContent {
    width: 100%;
    flex: 1 1 auto;
    max-width: 100%;
    text-align: center;
    padding-top: 20px;
  }
  .testimonialSlidText p {
    margin-bottom: 20px;
  }
  .testimonialProfileName {
    width: 100%;
    margin: 0;
  }
  .hmtestimonial .slick-dots {
    max-width: 100%;
    margin-top: 20px;
  }
  .testimonialProfileRetting {
    margin-top: 20px;
    width: 100%;
    justify-content: center;
    
  }
  .testimonialProfileNameTitle {
    width: 100%;
    text-align: center;
  }  
  .projectLogoSection {
    padding: 40px 0;
  } 

  .projectReviewContent::before {
    top: -90px;
    left: 0;
  }
  .projectSlidInner .slick-slide {
    height: 240px;
  }
  .projectIntroduction h2 {
    font-size: 24px;
    margin-bottom: 15px;
  }
  .portfoiloInnerItem {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin-bottom: 40px;
  }
  .portfoiloInnerItem:last-child {
    margin-bottom:0px;
  }
  .teamWrap .slick-track .sliderWrap:nth-child(3n + 1) .teamProfile {
    padding-top: 0; 
  }
  .teamWrap .slick-track .sliderWrap:nth-child(3n + 2) .teamProfile {
    padding-top: 0;
  }  
  .teamSliderRow {
    margin-top: 30px;
  }
  .aboutSection, .theTeamSection, .innerBanner, .projectSection, .portfoiloSection {
    padding: 40px 0;
  }
  .projectSlidSection {
    padding-bottom: 40px;
  }
  .theTeamSection .pageTitle{
    text-align: center;
  }
  .teamWrap::before {
    width: 65px;
    height: 65px;
    background-size: cover;
  }
  .teamWrap::after {
    width: 135px;
    height: 135px;
    background-size: cover;
    bottom: -40px;
    right: 0;
  }
  .aboutStorySection {
    padding: 40px 0 60px;
  }
  .servicesDetailsContactInner .pageTitle h2 {
    font-size: 26px;
  }
  .servicesDetailsContactInner .pageTitle p {
    font-size: 16px;
    line-height: 22px;
  }
  .webflowPackageSection .hmPortfolioCol {
    margin-bottom: 35px;
  }
  .how-process .text-center::before{
    display: none;
  }
  .how-process {
    padding: 50px;
  }
  .how-process h4 {
    padding: 20px 0 10px 0;
  }
  .how-process .process-icon{
    margin-top: 20px;
  }
  .how-process .col-md-4:first-child .process-icon{
    margin-top: 0;
  }
  .what-we-offer .offer{
    padding: 20px 35px;
  }
  .why-we-different .image-icon, .why-we-different h4, .why-we-different p{
    text-align: center;
  }
  .footer{
    margin-top: 70px;
  }
  .footer h4{
    margin-top: 20px;
  }
  .footer .row:nth-child(2) {
    margin-top: 30px;
  }
  .footer .email a {
    font-size: 30px;
  }
  .how-process {
    padding: 40px 20px;
  }
  .form-all {
    padding: 40px;
  }
  .projectIntroduction ul {
    padding-left: 15px;
  }
  .why-we-different h3{
    text-align: center;
  }
}

@media screen and (max-width: 575px) {
  /** Services css Start **/
  h2, h3, h4, h1{
    line-height: 1.2;
  }

  .anyProjectContent h2 {
    margin-bottom: 10px;
  }
  /** Services css End **/
  .bannerImg {
    max-width: 290px;
    width: 290px;
  }
  .bannerImg .banner-icon {
    height: 50px;
    width: 50px;
  }
  .bannerImg .banner-icon.woo-icon {
    top: -15px;
    left: 20px;
  }
  .bannerImg .banner-icon.w-icon {
    top: -20px;
  }
  .bannerImg .banner-icon.html-icon {
    bottom: 30px;
    right: 0px;
  }
  .bannerImg .banner-icon.wordpress-icon {
    bottom: 56px;
  }
  .hmServicesList { 
    max-width: 290px;
  }
  .hmServicesList .hmServicesListRow {
    width: 230px;
    height: 70px;
  }
  .hmServicesListRow h3 {
    padding: 0 5px;
    font-size: 15px;
  }
  .hmServicesListRow > img {
    max-width: 30px;
  }
  .hmServicesListRow.text-left h3 {
    padding-left: 15px;
  }

  .aboutImg {
    height: 250px;
    width: 250px;
    margin-right:auto;
  } 
  .aboutIconImg .about-icon {
    width: 50px;
    height: 50px;
  }
  .aboutIconImg .about-icon.html-icon {
    top: -10px;
    right: 20px;
  }
  .aboutIconImg .about-icon.wordpress-icon {
    top: 60px;
    right: -25px;
  }
  .aboutIconImg .about-icon.woo-icon {
    bottom: 60px;
    right: -25px;
  }
  .aboutIconImg .about-icon.w-icon {
    bottom: -10px;
    right: 20px;
  }
  .projectSlidInner .slick-slide {
    height: 180px;
  }
  .projectReviewContent::before {
    top: -62px;
    left: -30px;
    background-size: 45px;
  }
  .stroy-thumb-image {
    height: 250px;
    width: 250px;
  }
  .stroy-thumb-image .stroy-icon-thumb {
    top: -40px;
    left: -40px;
    height: 330px;
    width: 330px;
  }
  .project-image {
    width: 250px;
    height: 250px;
    margin: auto;
  }
  .project-image .project-logo {
    max-width: 136px;
    max-height: 225px;
  }
  .project-image .project-animation-logo { 
    top: -40px;
    left: -40px;
    height: 330px;
    width: 330px; 
  }
  .servicesCardItemIcon.services-details-icon {
    max-width: 250px;
  }
  .featuresInnerItem {
    max-width: 100%;
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 25px;
  }
  .featuresInnerItem:nth-last-child(2) {
    margin-bottom:25px;
  }
  .projectReviewSection, .webflowPackageSection {
    padding: 40px 0;
  }
  .webflowPackageSection .pageTitle {
    margin-bottom: 30px;
  }
  .servicesDetailsContactInner {
    padding: 15px;
  }
  .servicesDetailsContactInner .pageTitle h2 {
    font-size: 23px;
    line-height: normal;
  }
  .servicesDetailsContact {
    padding-bottom: 40px;
  }
  .servicesDetailsContactInner::after {
    top: 0px;
    right: 0;
    background-size: 25px;
  }
  .what-we-offer .offer{
    flex-direction: column;
    align-items: flex-start;
  }
  .what-we-offer .offer{
    padding: 30px 35px;
  }
  .what-we-offer .offer-detail{
    padding-top: 0;
  }
  .footer h3 {
    font-size: 25px;
    line-height: 47px;
  }
  .monthly .monthly-flex{
    flex-direction: column;
    padding-bottom: 0;
  }
  .what-we-offer .offer .btn-secondary{
    width: 100%;
  }
  li:not([data-payment=true]) [data-wrapper-react=true]{
    flex-direction: column;
  }
  li[data-type=control_fullname] .form-sub-label-container{
    width: 100%;
  }
  li.form-line:not(.form-line-column)[data-type=control_fullname] .form-input-wide [data-wrapper-react]:not(.extended) .form-sub-label-container+.form-sub-label-container{
    margin-left: 0;
  }
  .form-section .form-input-wide .form-sub-label-container{
    margin-bottom: 20px;
  }
  .form-section .form-input-wide .form-sub-label-container:last-child{
    margin-bottom: 0;
  }
  .projectIntroduction ul {
    padding-left: 10px;
  }
  .landingpage .bannerBtn{
    margin-top: 30px;
  }
  .landingpage .bannerBtn a{
    margin: 10px 5px;
  }
  .featureList ul li{
    width: 100%;
    margin-bottom: 20px;
  }
  .transparentBG .featuresInner .pageTitle, .wordpress-customization .featuresInner .pageTitle{
    margin-bottom: 20px;
  }
  .transparentBG .featuresInner .featureList{
    margin-bottom: 20px;
  }
  .hire-developer h2{
    margin-bottom: 30px;
  }
  .hire-developer .servicesCardCol {
    min-height: 330px;
  }
  .btn-row-center{
    margin-top: 30px;
  }
}

@media screen and (max-width: 480px) {
.innerTitle::before {
  right: 0;
  background-size: 100px;
  background-position: right;
}
.innerTitle::after {
  background-size: 100px;
  background-position: left;
}
.innerBanner, .anyProject {
  padding: 30px 0;
}
.innerTitle h2 {
  margin-bottom: 15px;
}
.infomationListRow {
  padding:0 15px;
}

.uploadWrap p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uploadInner {
  top: 0px;
}
.projectIntroduction ul {
  padding-left: 10px;
}
}

@media screen and (max-width: 380px) {
/** Services css Start **/
.servicesCardItemIcon span {
  height: 62px;
  width: 62px;
}
.servicesCardItemIcon span img {
  width: 30px;
}
/** Services css End **/
.portfoiloInnerItemContent h3 {
  font-size: 16px;
}
.projectIntroduction ul {
  padding-left: 10px;
}
}