@media (max-width:800px) {
    .case-studies-content {
        width: 100%;
      flex-direction: column;
    }
   
  }
@media (max-width:800px) {
  .case-studies-content {
    height: 500px;
    gap: 20px;
  }
  }

/* Responsive Design */
@media (min-width: 1025px) {
  
    .techno-content {
      flex-direction: row; /* Side-by-side layout for tablets and larger screens */
      padding: 0 40px; /* Adjusted padding for tablets */
      margin-bottom: 80px; /* Adjusted margin for tablets */
    }
    .techno-content .overlay-content.two {
      width: 60%;
  }
    .techno-content .overlay-content {
      width: 38%; /* Half width for tablets and larger screens */
      height: 560px; /* Fixed height for tablets and larger screens */
       /* Adjusted padding for tablets */
      margin-bottom: 0; /* Remove margin between items */
    }
  
    .tool-icons {
      gap: 35px; /* Restore gap for tablets and larger screens */
      padding: 0 50px; /* Restore padding for tablets and larger screens */
    }
  
    .tool-icons img {
      width: 50px; /* Restore icon size for tablets and larger screens */
    }
  
    .overlay-content h1 {
      font-size: 33px; /* Restore font size for tablets and larger screens */
    }
  
    .overlay-text h2 {
      font-size: 30px; /* Restore font size for tablets and larger screens */
      margin-bottom: 20px; /* Restore margin for tablets and larger screens */
    }
  
    .overlay-text p {
      font-size: 20px; /* Restore font size for tablets and larger screens */
              font-weight: 400;
        /*letter-spacing: .6px;*/
    }
  
    .overlay-text {
      
      text-align: left;
    }
  }
  
  
  @media (min-width: 1024px) {
    .where-creativity {
      padding: 80px 80px; /* Restore padding for desktops */
      padding-bottom: 0px;
    }
  
    .techno-content {
      padding: 0 ; /* Restore padding for desktops */
      margin-bottom: 100px; /* Restore margin for desktops */
      width: 100%;
    }
  }

/* Responsive Design */
@media (max-width: 768px) {
  section.client {
    margin: 10px 20px;
}
  .container.business-process {
    width: 100%;
  }
  .section-title {
    text-align: left;
  }
  .text-center.title {
    display: flex;
    text-align: left;
    gap: 22px;
}
  .creative-grid-content.two {
    align-items: flex-start !important;
    gap: 26px;
    padding-left: 40px !important;
}
.overlay-text {
  width: 80%;
  text-align: left;
}
.creative-para {
  margin-left: 0px;
}
.creative-para .creative-content {
  padding-left: 0px;
        text-align: center;
}
    .services-grid {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }
  
    .section-title {
      font-size: 35px;
      text-align: center !important;
    }
  
    .service-title {
      font-size: 22px;
    }
  
    .service-description {
      font-size: 14px;
    }
    .creative-head {
        margin-bottom: 0px;
        text-align: left;
        padding: 25px;
        /* padding-left: 0; */
    }
    .creative-head h2{
        font-size: 28px;
    }
    .creative-para .creative-content {
      padding-left: 0px;
    }
    .service-content {
        text-align: center;
        padding: 25px;
        /* padding-left: 0px; */
        margin-bottom: 40px;
    }
    .featured-works {
      padding: 0px;
  }
  .how-we-help-section .container {
    align-items: center;
    /* padding: 0 7%; */
}
.where-creativity .container {
  align-items: center;
}
  .featured-works .container {
    padding-top: 0px;
    padding-bottom: 70px;
    background: transparent;
    border: none;
    border: 1px solid transparent;
    border-radius: 0;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
  }
  .feature-box-works {
    margin: 0 !important;
  }
  }

  @media (max-width:1000px) and (min-width:768px) {
    .project-works {
          gap: 25px;

}
    .work-detail-content {
        padding-left: 0%;
    }
  }

  @media (max-width: 768px) {
    .about-banner .about-counter {
              bottom: -30px;
    }
    .project-stand-out-content.aos-init.aos-animate {
    border-top: 1px solid #222222;
}
    .about-banner .banner-content h2 {
      font-size: 55px;
    }
    .business-bg-head h1 {
      font-size: 40px !important;
    }
    .where-creativity {
        padding: 80px 0px;
    }
    .project-works {
      display: flex;
      flex-direction: column;
    }
    .project-stand-out-content.left {
      width: 100%;
      height: auto;
  }
  .project-stand-out-content.right {
    height: auto;
    width: 100%;
}
.project-works hr {
  display: none;
}
.table-content .touble-content .first-content h1 {
  font-size: 30px;
}
}

  /* Responsive Design */
@media (max-width: 768px) {
  .creative-para {
    justify-content: center;
}
  section.how-we-help-section.service {
    margin-top: 0px;
}
    .services-grid {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjust for smaller screens */
      gap: 20px;
    }
  
    .section-title {
      font-size: 28px;
    }
  
    .service-title {
      font-size: 22px;
    }
  
    .service-description {
      font-size: 14px;
    }
    .service-content p {
      /* font-family: 'Lufga Black semi bold'; */
      text-align: center;
  }
  .container.case-staudies{
    align-items: center;
  }

  }

  @media (max-width: 701px) {
    .hero-grediant {
        top: 9%;
        left: 19%;
       
    }
}
  @media (max-width: 601px) {
    .mock-cont-right.third3 p {
      width: 100% !important;
  }
}

/* Responsive Design */
@media (max-width: 991px) {
  .table-content .touble-content .second-content .tb-content-about p {
    width: 100%;
  }
  .user-service-content {
    width: 100%;
  }
  .user-service-img {
      width: 100%;
  }
  .user-services {
    flex-direction: column;
    gap: 50px;
}
  .cotainer.work-scope {
    flex-direction: column;
    gap: 20px;
  }
  .scope-contents {
    width: 100%;
  }
  .demo-img.demo-one {
    position: sticky;
    top: 10%;
    padding: 20px;
}
  .hero-grediant {
    top: 15%;
    left: 31%;
    width: 318px;
}
  .where-creativity {
    padding: 80px 40px; /* Adjusted padding for tablets */
  }
    .counter-number {
      font-size: 60px;
    }
    span.counter-plus {
      font-size: 60px !important;
    }
    .counter-label {
      font-size: 25px;
    }
   
    .counter-section {
     margin-top: 0;
      padding: 80px 10px;
      padding-top: 10px;
	  margin: 0 15px;
     
    }
    .editors-logos {
      margin-left: 5%;
      width: 90%;
    }
    .logo-item {
      flex: 0 0 auto;
      margin-right: 0px;
  }
  .text-center.title h6 {
    font-size: 18px
  }
  }

  @media (max-width: 420px) {
    .counter-label {
        font-size: 21px;
    }
}

  @media (max-width: 600px) {
    .container.case-staudies.contact.success-story {
      padding: 50px 0px !important;
      margin: 0;
    }
    .case-studies-content.one {
      height: 600px;
    }
   
    .creative-head p{
      text-align: left;
    }
    .creative-para .creative-content{
      font-size: 17px;
    }
    h2.section-title.techno {
      text-align: left;
    }
    .how-we-help-section {
      padding: 80px 0px !important;
      padding-top: 0% !important;
  }
  .tool-icons{
    justify-content: flex-start !important;
  }
  .techno-content{
    padding: 0 !important;
  }
  .where-creativity {
    padding:80px 0;
  }
  .container.case-staudies{
    padding: 50px 25px !important;
  }
  section.section-contact {
      margin: 15px;
  }
}

  @media (max-width: 768px) {
    .logos-grid {
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 20px;
    }
  
    .section-title {
      font-size: 25px;
    }
    .value.content .text-row {
      flex-direction: column;
      gap: 25px;
    }
    .value.content .head {
      width: 100%;
  }
  .value.content .foot-description {
    width: 100%;
}
.foot-print-container h2 {
  font-size: 40px !important;
  width: 100% !important;
  text-align: left !important;
}
.foot-print-container p {
  font-size: 20px !important;
  width: 100% !important;
  text-align: left !important;
}
.foot-print-container h1 {
  text-align: left;
  line-height: 1.4;
}
.foot-print-container {
  align-items: start;
}

  }

  @media (max-width:500px) {
    .how-we-help-section .container {
      align-items: center;
  }
    h1.hero-title.text-primary{
      font-size: 38px;
      
    }
      .container.flex.hero {
        justify-content: flex-start;
        padding: 90px 20px;
      
    }
    p.hero-description.text-secondary{
      text-align: left;
    }
    .creative-para .creative-content{
      font-size: 15px;
    }
   
    .our-service-grid-container:hover .service-grid-content h1 {
      font-size: 38px;
    }
    .our-service-grid-container .service-grid-content h1 {
      font-size: 38px;
    }
    .our-service-grid-container .service-grid-content p {
      text-wrap: wrap;
    }
	.containerbox {
    & .list-item:nth-child(1) {
        margin-bottom: -32.5%;
	}
    }
	.containerbox {
    & .list-item:nth-child(2) {
        margin-bottom: -35.5%;
        transform: scale(0.95);
    }
    }
  
.containerbox {
    width: 87%;
    padding-top: 36px;
 
}
}
  

  @media (max-width:771px) {
    footer .contact {
      flex-wrap: wrap;
  }
    .container.header {
      padding: 0 20px;
  }
      h1.hero-title.text-primary{
        font-size: 39px;
        text-align: left;
      }
      .container.flex.hero {
        justify-content: flex-start;
        padding: 90px 30px;
        align-items: flex-start;
        padding-bottom: 0;
      
    }
    p.hero-description.text-secondary{
      text-align: left;
    }
    .next-swiper.creativity {
      justify-content: left;
  }
  .creative-grid-content.two h1 {
    font-family: 'Lufga Black semi bold';
    text-align: left;
    font-size: 30px;
  }
  .case-studies-content .service-content {
    margin-bottom: 20px;
    padding-left: 0;
    /* padding-right: 10px; */
   width: 100%;
   text-wrap: wrap;
}
.case-studies-content {
  padding-left: 25px;
}

.case-studies-content.code-face-why-content {
  height: 250px;
  width: 311px;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.case-studies-content.code-face-why-content .service-content.case-s p {
  line-height: 1.2;
  text-align: center;
}
.case-studies-content.code-face-why-content .service-content.case-s h2 {
  line-height: 1.2;
  text-align: center !important;
}
.service-content.case-s.why-code-fase {
  text-align: center;
  padding: 0;
}
.our-team-grid {
  display: flex !important;
  flex-direction: column !important;
}

}


  @media (max-width:1022px) {
      h1.hero-title.text-primary{
        font-size: 50px;
        line-height: 1.2;
      }    
  }

  @media (max-width:991px) {
    .logo-container {
      height: 90%;
      right: 2%;
      top: 10%;
      bottom: 10%;
    }
    .creative-grid-content.two h1 {
      width: 60%;
    }
    footer{
        flex-direction: column;
        margin: 120px 0 0 0px;
        padding: 20px;
        padding-top: 60px;
        border-radius: 0;
        padding-bottom: 80px;
    }
    .col-rt {
        flex-direction: column;
        width: 100%;
        padding-top: 50px;
        gap: 30px;
      }

      .col-lf h2{
        font-size: 30px;
        margin-top: 40px;
      }
      .copy-right{
        width: 100%;
        left: 0px;
        padding-left: 15px;
        border-radius: 0;
      }
  
    .container.header{
        padding: 0 3%
    }
  }

  @media (max-width:1400px) {
    h1.company-name {
        left: 25%;
        font-size: 72px;
    }
  }
  @media (max-width:1200px) {
    h1.company-name {
        left: 20%;
        font-size: 72px;
    }
    .next-swiper {
      padding-right: 0;
      justify-content: center;
      
    }
  }
  @media (max-width:1100px) {
    h1.company-name {
        left: 20%;
        font-size: 65px;
        bottom: 17px;
    }
  }


  @media (max-width:991px) {
    .pt-3.pb-3.hero .bg-eye {
      display: none;
    }
    .counter-item {
      width: 100%;
      align-items: center;
      justify-content: center;
      padding-bottom: 20px;
      height: 250px;
   
    }
    .counters-grid {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    h1.company-name {
        display: none;
    }
    .case-staudies.contact.container {
      padding-top: 80px;
  }
  .next-swiper {
    padding-right: 0;
    justify-content: center;
    
  }
  .service-grid {
    display: flex;
    flex-direction: column;
  } 
  .grid-content.one1 {
    padding-top: 10%;
}
.grid-content.three3 {
  padding-top: 10% ;
}
.grid-content{
  padding-top: 10%;
}
.creative-grid-container{
  display: flex;
  flex-direction: column;
}
.creative-grid-content.three{
  display: none;
}
.creative-grid-content.one .grid-three-content{
  display: flex;
  width: 200px;
  height: 200px;
  border-radius: 75px;
  font-size: 48px;
}
.creative-grid-content.one{
  display: flex;
  /* padding-top: 30px;
  padding-right: 30px; */
  align-items: center;
  justify-content: center;
  
}
.glass-bgclr{
  padding-bottom: 15%;
  padding-top: 30px;
  padding-right: 30px;
}
.creative-grid-content.one h1{
  padding-top: 15%;
}
.creative-grid-content.two{
  align-items: flex-start;
  gap: 26px;
  padding-left: 40px;
  height: 440px;
}
.overlay-text {
  width: 60%;
  text-align: left;
}
.our-team-grid {
  display: grid;
  grid-template-columns: 45% 45%;
}
}

@media (max-width:1195px) {
  .service-grid {
    display: flex;
    flex-direction: column;
  }
  .grid-content.one1 {
    padding-top: 10%;
}
.grid-content.three3 {
  padding-top: 10%;
}
.grid-content{
  padding-top: 10%;
}
.grid-content.six6 {
  padding-top: 10%;
 
}
.grid-item.seven img{
  width: 44%;
}
}

@media (max-width:991px) {
  .creative-grid-content.one h1 {
    width: 70% ;
  }
 
.grid-item.one #bg-video-grid{
  right: 9%;
}
.grid-item.three video#bg-video-grid {
  top: 8%;
  right: 9%;
}
.grid-item.four #bg-video-grid{
  top: 8% !important;
 right: 9% !important;
}
.grid-item.five video#bg-video-grid {
  top: 8% !important;
  right: 9%;
}
.grid-item.six video#bg-video-grid {
  top: 18%;
  right: 9%;
}
.grid-item.one #bg-video-grid{
  right: 9%;
}
.grid-item.one #bg-video-grid{
  right: 9%;
}
.grid-item .grid-content {
  width: 100% !important;
}
.grid.right-icon {
  margin-bottom: auto;
  position: absolute;
  right: 27px;
  top: 7%;
}
}

@media (max-width:600px) {
  .grid-item .grid-content {
    width: 100% !important;
    padding-top: 39%;
}
.footprint-headers .second {
  width: 68% !important;
}
.hero-grediant {
 left: 20%;
 width: 240px;
}
}

@media (max-width: 760px) {
  .creative-grid-content.one {
      gap: 70px;
      flex-direction: column;
      display: flex;
     
      align-items: flex-start;
  }
}
@media (max-width: 700px) {
  .logo-container {
     right: 2%;
     height: 90%;
  }
}
@media (max-width: 1400px) {
  .grid-item.three img{
    position:absolute;
    left: 20%;
    top: 9%;
  }
  
}

@media (max-width: 1300px) {
  .how-we-help-section .container {
    padding: 0 4% ;
}
.service-grid{  
  padding-left: 0px ;
  padding-right: 0;
  width: 100%;
}
}
@media (max-width: 1200px) {
  
  .service-grid .grid-item{
            padding-top: 0px;
    padding-left: 35px;
    padding-bottom: 5px;
  }
  .grid-item.four img {
  
    top: 15%;
   
}
}
@media (max-width:1195px) {
  .grid-item.three {
    align-items: flex-start;
  }
  .grid-item.four {
    align-items: flex-start;
  }
  .grid-item.five {
    align-items: flex-start;
  }
  .grid-item.one img{
    position:absolute;
    left: 60%;
    top: 20%;
  }
  .grid-item.two img{
    position:absolute;
    right: 10%;
    top: 20%;
  }
  .grid-item.three img{
    position:absolute;
    left: 60% ;
    top: 20%;
  }
  .grid-item.four img{
    position:absolute;
    left: 62% ;
    top: 20%;
  }
  .grid-item.five img{
    position:absolute;
    left: 62% ;
    top: 20%;
  }
  .grid-item.six img{
    position:absolute;
    right: 10%;
    top: 20%;
  }

}


@media (max-width:678px) {
  .night {
    right: 0; 
}
}

@media (max-width:991px) {
  .grid-content {
    width: 55% !important;
  }
  .creative-grid-content.four {
    height: auto;
    /* object-fit: contain; */
}
.creative-grid-content.five{
  height: auto;
}
  
}


@media (max-width:600px) {
  .grid-item.one img {
    position: absolute;
    left: 40%;
    top: 20%;
}
  .grid-item.three img{
    position:absolute;
    left: 40% ;
    top: 20%;
  }
  .grid-item.four img{
    position:absolute;
    left: 40% ;
    top: 20%;
  }
  .grid-item.five img{
    position:absolute;
    left: 40% ;
    top: 20%;
  }
  .grid-item.six video#bg-video-grid {
    top: 8%;
            right: 49%;
}
}
@media (max-width:500px) {
  .list.overlay {
    display: flex;
    flex-direction: column;
    gap: 24px;
    view-transition-name: list;
}
.subtitle.overlay {
  font-size: 12px;
  color: #d3d3d3;
  font-weight: 200;
}
.title.overlay {
  font-size: 17px;
  font-weight: 500;
  color: white;
}
  .grid-item.one img{
    position:absolute;
    right: 10%;
    top: 20%;
  }
  .grid-item.two img{
    position:absolute;
    right: 10%;
    top: 20%;
  }
  .grid-item.three img{
    position:absolute;
    left: 40% ;
    top: 20%;
  }
  .grid-item.four img{
    position:absolute;
    left: 40% ;
    top: 20%;
  }
  .grid-item.five img{
    position:absolute;
    left: 40% ;
    top: 20%;
  }
  .grid-item.six img{
    position:absolute;
    right: 10%;
    top: 20%;
  }
  .grid-content {
    padding-top: 60%;
    width: 90% !important;
  }
  .grid-content.one1 {
    padding-top: 60%;
}
.grid-content.two2 {
  padding-top: 60%;
  width: 90% !important;
}
.grid-content.three3 {
  padding-top: 60%;
  width: 90% !important;
}
.grid-content.four4 {
  width: 90% !important;
}
.grid-content.six6 {
  padding-top: 60%;
  width: 90% !important;
}
.grid-item img{
  width: 65% !important;
}
.service-grid .grid-item {
  padding-left: 20px;
  padding-bottom: 20px;
}
}

@media (max-width: 500px) {
  .grid-item.five video#bg-video-grid {
      top: 8% !important;
      right: 49%;
  }
  .grid-item.two video#bg-video-grid {
    right: 49%;
    top: 5%;
}
    .grid-item.four #bg-video-grid {
        top: 8% !important;
        right: 49% !important;
    }
	    .grid-item.three video#bg-video-grid {
        top: 8%;
        right: 49%;
    }
	    .grid-item.one #bg-video-grid {
        right: 49%;
    }
    .featured-works .container {
      align-items: center;
    }
}

@media (max-width:450px) {
  .grid-item.three img {
    position: absolute;
    left: 31%;
    top: 9%;
}
.grid-item.one img {
  position: absolute;
  left: 26%;
    top: 11%;;
}


  .grid-item.four img{
    position:absolute;
    left: 31%;
    top: 9%;
  }
  .grid-item.five img{
    position:absolute;
    left: 31%;
    top: 9%;
  }
  .grid-item.six img{
    position:absolute;
    right: 10%;
    top: 20%;
  }
  .grid-content {
    padding-top: 60%;
    width: 90% !important;
  }
  .grid-content.one1 {
    padding-top: 60%;
}
.grid-content.two2 {
  padding-top: 60%;
  width: 90% !important;
}
.grid-content.three3 {
  padding-top: 60%;
  width: 90% !important;
}
.grid-content.four4 {
  width: 90% !important;
}
.grid-content.six6 {
  padding-top: 60%;
  width: 90% !important;
}
.grid-item img{
  width: 150px;
}
.service-grid .grid-item {
  height: 400px;
  padding-top: 28px;
  padding-left: 20px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.service-facilitate {
  padding-bottom:0px;
}
}
@media (max-width:550px) {
  .title.overlay {
    font-size: 15px;
    font-weight: 500;
    color: white;
}
.subtitle.overlay {
  font-size: 11px;
  color: #d3d3d3;
  font-weight: 200;
}
.date.overlay {
  font-size: 12px;
  color: #959595;
  text-align: right;
}
  .service-grid .grid-item {
    height: 500px;
  }
  .grid-item .grid-content {
    width: 100% !important;
    padding-top: 39%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
}


/* Apply these styles only for screens up to 991px */
@media (max-width: 991px) {
  .feature-box-works {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 20px;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px; /* Optional: Add padding to avoid scrollbar overlap */
    justify-content: flex-start;
    margin: 25px;
  }

  .feature-box-works .card {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: start;
  }

  .feature-box-works .card img {
    width: 100%;
    height: 100%;
    border-radius: 20px; /* Optional: Add rounded corners to images */
  }

  .next-swiper {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }

  .next-swiper i {
    cursor: pointer;
    font-size: 18px;
  }

  /* Optional: Style the scrollbar */
  .feature-box-works::-webkit-scrollbar {
    display: none;
  }

  .feature-box-works .card .card__head {
    
    border-radius: 25px;
  
    text-align: center;
    position: absolute;
    width: 200px;
    font-size: 20px;
    height: 44px;
    text-align: center;
    top: 10%;
    border: 1px solid white;
    color: white;
    left: 6%;
    font-size: 17px;
    transform: rotate(0deg);
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding-left: 25px; */
    padding: 0 20px;
  }
  
}
@media (min-width:991px) {
  .next-swiper.mobile-pagination{
     display: none;
  }
}


@media (max-width:1400px) {
  .Get-in-touch .get-content {
    justify-content: center;
  }
  
  .Get-in-touch .get-content .get-locate-box{
    width: 33.3%;
  }
  .connect-boxes {
    padding: 25px 50px;
  }
  
.connect-boxes.connect-mobile {
  padding: 30px 50px;
}
}
@media (max-width:991px) {
  .Get-in-touch .get-content {
    justify-content: center;
    flex-direction: column;
    gap: 25px;
  }
  
  .Get-in-touch .get-content .get-locate-box{
    width: 70%;
  }
  section.Get-in-touch {
    height: auto;
  }
  
.form-row {
  flex-direction: column;
}
.our-service-grid {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
}
@media (max-width:1050px) {
  .connect-boxes {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    justify-content: flex-start;
    width: 100%;
  }
  .cotainer.connect-container {
    padding: 0;
  }
  .cotainer.connect-container {
    flex-direction: column;
  }
  .connect-boxes.connect-mobile {
    padding: 25px 25px;
}
  .connect-boxes.connect-mobile {
    border-top: 1px solid #272727;
    border-bottom: 1px solid #272727;
    border-left: none;
    border-right: none;
  }
  .form-container {
    width: 100%;
  }
  .connect-boxes {
    padding: 25px 25px;
}
}
@media (max-width:800px) {
  section.section-form {
    padding: 0px;
    background-image: none;
  }
}
@media (max-width:1100px) {
  .work-details-content {
    flex-direction: column;
  }
  .work-details-content .work-content {
    flex-direction: row;
    width: 100%;
  }
  .work-details-content .work-details {
    width: 100%;
  }
  
.work-methods {
  width: 60%;
  align-items: end;
}
.work-content .heder p {
  width: 100%;
}
.work-content .heder  {
  width: 40%;
}
.using-tool1 {
  align-items: flex-end;
}
.container.mockup-container {
  flex-direction: column;
}
.mock-cont.content111 {
  width: 100%;
}
}
@media (max-width:700px) {
  .work-details-content .work-content {
    flex-direction: column;
  }
  .work-content .heder {
    width: 100%;
  }
  .work-methods {
    width: 100%;
    align-items: flex-start;
  }

  h1.service-number {
    display: none;
  }
  .container.our-service {
    padding: 60px 15px;
  }
  
}

@media (max-width:650px) {
  .cotainer.work-scope {
    padding: 50px 25px;
  }
}

@media (max-width:1200px) and (min-width:991px) {
  .grid-value {
 
    padding: 20px 50px;
}
}
@media (max-width:1375px) and (min-width:991px) {
  h1.service-number {
    display: none;
}
.service-grid-content {
  
  margin-left: 7px;
  margin-bottom: 0px;
}
.our-service-grid-container .service-grid-content h1 {
  font-size: 42px;
}
.container.our-service {
  padding: 50px;
  /* gap: 55px; */
}
}

@media (max-width:600px) {
  .service-grid-content {
  
    margin-left: -9px;
    margin-bottom: 1px;
  }
  #button{
    font-size: 50px;
  }
  .our-service-grid-container {
    height: 330px;
  }

}
@media (max-width:991px) {
  img.footer-logo.two {
    display: none;
  }
  
  
  .scroll-text.active-hr {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }
  .scroll-text {
    display: none;
  }
  .services-tiltles.scroll-cse {
    justify-content: flex-start;
  }
  .get-header {
    margin-bottom: 40px;
}
}
@media (max-width: 691px) {
  .Get-in-touch .get-content .get-locate-box {
      width: 100%;
  }
  	.creative-grid-content.one img {
  display:none;
}
.about-banner {
  height: 500px;
}
section.about-img {
  position: relative;
  margin-top: -140px;
  z-index: -200;
}
}
@media (max-width: 768px) {
  .business-content {
     flex-direction: column-reverse;
     align-items: self-start;
  }
  .content-text p {
    width: 100% !important;
}
  .footprint-headers {
    position: absolute;
    top: 16px;
    left: 7px;
    padding-top: 55px;
    padding-left: 5px;
}
.footprint-headers .second {
  font-size: 16px;
  font-weight: 200;
  line-height: 1.5;
  color: white;
  margin-top: 27px;
}
section.values {
  padding-top: 45px;
}
section.about-approaches {
  padding-top: 45px;
}

}

@media (max-width:991px) {
	.creative-grid-content.one img {
  
    left: 57%;
 
}
  .panel {
    display: flex;
    flex-direction: column;
  }
  
footer .contact {
  margin-left: 15px;
}
}
@media (max-width:1450px)  {
  .approaches-bg {
    position: absolute;
    left: 28%;
    
  }
  
}
@media (max-width:1150px)  {
  .approaches-bg {
    position: absolute;
    left: 23%;
    
  }
  
}
@media (max-width:1450px)  {
  .approaches-content {
    gap: 3%;
  }
  
}
@media (max-width:1300px)  {
 .colxl-1 {
            padding-left: 20px;
        padding-top: 0px;
        padding-bottom: 50px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 80px;
        align-items: start;
        flex-wrap: wrap;
}
  
}
@media (max-width:1350px)  {
  img.footer-logo {
    /* position: absolute; */
    bottom: 4%;
    width: 600px;
}
}
@media (max-width:1250px) and (min-width:991px) {
  .where-creativity .container {
    padding: 0 0;
  }
}
@media (max-width:991px)  {
  .how-we-help-section {
    padding-top: 0;
  }
  section.about-approaches {
    padding-top: 90px;
}
}
@media (max-width: 601px) {
    .containerbox {
        .list-item:nth-child(1) {
           margin-bottom: -34.5%;
        }
    }
}
@media (max-width:651px) and (min-width:480px)  {
  .list-item.overlay {
    height: 98px;
  }
  .containerbox {
    .list-item:nth-child(1) {
        margin-bottom: -22.5%;
    }
}

.containerbox {
    .list-item:nth-child(2) {
        margin-bottom: -25.5%;
        transform: scale(0.95);
    }
}
}

@media (max-width:903px) and (min-width:651px)  {
 .containerbox {
    .list-item:nth-child(2) {
                    margin-bottom: -15.5%;
        transform: scale(0.95);
    }
}

.containerbox {
    .list-item:nth-child(1) {
                    margin-bottom: -15.5%;
        transform: scale(0.95);
    }
}
}
@media (max-width:1023px) and (min-width:901px)  {
 .containerbox {
    .list-item:nth-child(2) {
        margin-bottom: -18.5%;
        transform: scale(0.95);
    }
}

.containerbox {
    .list-item:nth-child(1) {
        margin-bottom: -17.5%;
        transform: scale(0.95);
    }
}
}
@media (max-width:1201px) and (min-width:1023px)  {
.containerbox {
    .list-item:nth-child(2) {
        margin-bottom: -19.5%;
        transform: scale(0.95);
    }
}

.containerbox {
    .list-item:nth-child(1) {
        margin-bottom: -19.5%;
        transform: scale(0.95);
    }
}
}
@media (max-width:1451px) and (min-width:1201px)  {
.containerbox {
    .list-item:nth-child(2) {
         margin-bottom: -18.5%;
        transform: scale(0.95);
    }
}

.containerbox {
    .list-item:nth-child(1) {
        margin-bottom: -18.5%;
        transform: scale(0.95);
    }
}
}
@media (max-width:1678px) and (min-width:1451px)  {
.containerbox {
    .list-item:nth-child(2) {
         margin-bottom: -17.5%;
        transform: scale(0.95);
    }
}

.containerbox {
    .list-item:nth-child(1) {
         margin-bottom: -17.5%;
        transform: scale(0.95);
    }
}
.show-hide-btnbox {
    margin: 34px auto 0 auto;
}
}

@media (max-width:1300px)  {
  .table-content .touble-content .second-content .tb-content-about hr {
    width: 90%;
    margin-left: -84px;
  }
}
@media (max-width:991px)  {
  .table-content .touble-content .second-content .tb-content-about hr {
    width: 90%;
    margin-left: 0px;
  }
}



.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#ffffff;
  stroke-width:5.5;
  stroke-linecap:round;
}

.ham4 .top {
  stroke-dasharray: 40 121;
}
.ham4 .bottom {
  stroke-dasharray: 40 121;
}
.ham4.active .top {
  stroke-dashoffset: -68px;
}
.ham4.active .bottom {
  stroke-dashoffset: -68px;
}
svg.ham.hamRotate.ham4 {
  /* background-color: #FDD20D; */
  height: 50px;
  width: 50px;
  border-radius: 5px;
  position: relative;
  z-index: 999999;
}

@media (max-width:1220px) {
  .logo img {
   position: absolute;
   left: 45px;
   top: 5px;
}
@media (max-width: 600px) {
  .logo img {
      position: absolute;
      left: 10px;
      top: 5px;
  }
}
svg.ham.hamRotate.ham4 {
  /* background-color: #FDD20D; */
  height: 50px;
  width: 50px;
  border-radius: 5px;
  position: absolute !important;
  right: 45px;
  top: 25px;
  z-index: 999999;
}
}

.sidebar.mobile ul{
 width: 100%;
}

.sidebar.mobile .arrow-icon {
  display: inline-block;
  transition: transform 0.3s ease;
  margin-top: 5px;
  margin-left: 10px;
}
.sidebar.mobile .arrow-icon i{
  margin-top: 5px;
  transform: rotate(90deg);
}

.sidebar.mobile .arrow-icon.rotate {
  transform: rotate(270deg);
}

@media (max-width: 601px) {
    .col-lf h2 {
        font-size: 30px;
        margin-top: 40px;
        line-height: 1.2;
    }
}
@media (max-width:601px) {
 .case-studies-content.client-card.one {
    width: 360px;
    height: 550px;
 }
}
@media (max-width:601px) {
 .mock-cont-right.year-base {
    display: flex;
    align-items:flex-end;
    justify-content: center;
}

}
@media (max-width:601px) {
 .mock-cont.content111 img {
    /* height: 100%; */
    /* width: 100%; */
    height: 300px;
    border-radius: 16px;
}}