/* Red Circular Box Shadow */
.cus-box-shadow {
  position: absolute;
  /* min-width: 30px; */
  /* min-height: 30px; */
  /* width: 20%;
  height: 20%; */
  /* padding-top: 20%;
  padding-left: 20%; */
  /* max-width: 20%;
  max-height: 20%; */
  background: #d7213c26;
  box-shadow: 0px 0px 500px 250px #d7213c26;

  animation: upDown 2s linear 0s infinite alternate none !important;
}

/* Animation for Box Shadow */
@keyframes upDown {
  0% {
    transform: translateY(-200px);
  }

  100% {
    transform: translateY(200px);
  }
}




/* Wrapper added by GSAP on Scroll Trigger element when using "pin"  */
/* here CSS does not affect the 'animation' at all */
.pin-spacer {
  /* margin: 0px !important; */
  /* padding: 0px !important; */
}


/* Note: "skew()" */
/* skewX(): */
/* 
  +ve value of skewX() rotates the Element "Anti-Clockwise" and -ve value rotates "Clockwise". 
  now 2 conditions:
  1) when "transform-origin: top left or top right" then the +ve value of skewX() rotates the "element's Bottom side Anti-Clockwise"
     and -ve value rotates "Clockwise".
  2) when "transform-origin: bottom left or bottom right" then the +ve value of skewX() rotates the "element's Top side Anti-Clockwise"
     and -ve value rotates "Clockwise".
 */
/* skewY(): */
/* 
  +ve value of skewY() rotates the Element "Clockwise" and -ve value rotates "Anti-Clockwise". 
  now 2 conditions:
  1) when "transform-origin: top left or bottom left" then the +ve value of skewY() rotates the "element's Right side Clockwise"
     and -ve value rotates "Anti-Clockwise".
  2) when "transform-origin: top right or bottom right" then the +ve value of skewY() rotates the "element's Left side Clockwise"
     and -ve value rotates "v".
 */





/***************************************** Skewed Background *****************************************/

.skewed-bg {
  position: relative;
  z-index: 0;
  /* z-index: 1; */
}

.skewed-bg::before {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  background: inherit;
}

.skewed-bg::after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  background: inherit;
}

/***************************************** Skewed Background of 'Text' *****************************************/

.skewed-bg-text {
  /* background: linear-gradient(90deg, #FF0014 0%, #5956E9 45.85%, #424297 100%); */
}

.skewed-bg-text::before {
  transform: skewX(-10deg);
  transform-origin: top left;
}

.skewed-bg-text::after {
  transform: skewX(-10deg);
  transform-origin: bottom left;
}

.skewed-bg-text,
.skewed-bg-text::before,
.skewed-bg-text::after {
  border-radius: 6px 10px;
}

/***************************************** Skewed Background of 'Container' *****************************************/

.skewed-bg-container {
  width: 100vw;
}

/* "Skewed Background Classes" definitions:
      ".skewed-bg" for 'Skewed Background'
      ".skewed-bg-text" for 'Skewed Angle of some Text'
      ".skewed-bg-container" for 'Skewed Angle of some Container'
*/









/*############################################### "Hero" start ###############################################*/

/* Hero Background */
.cus-homepage-hero {
  /* height: 292px; */
  height: 320px;
  /* for making the video dark */
  background: rgba(0, 0, 0, 0.75);

  /* padding-top: 70% !important; */
  /* background-color: blueviolet !important; */
  /* background-image: url("../../../app-assets/images/backgrounds/hero-bg-1.svg") !important; */
  /* background-repeat: no-repeat;
  background-size: cover;
  background-position: center; */
  /* background-size: 100% 100%; */
}

/* Hero Background "Video" */
.cus-homepage-hero video {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: -1;
}

.cus-homepage-hero-content {
  inset: 100px 0px 0px 0px;
}

/* Hero Heading */

/* .hero-heading>span:first-of-type,
.hero-heading span:first-of-type::before,
.hero-heading span:first-of-type::after {
  border-radius: 6px 10px;
} */
/* .hero-heading>span:first-of-type {
  background: linear-gradient(90deg, #FF0014 0%, #5956E9 45.85%, #424297 100%);
} */

.hero-heading>span:nth-of-type(2) {
  margin-left: -4px;
}



/* .hero-heading > span:first-of-type *:is(::before, ::after) { */
/* .hero-heading *:is(span:first-of-type::before, span:first-of-type::after) {
  border-radius: 8px 12px;
} */
/* .hero-heading span:first-of-type::before,
.hero-heading span:first-of-type::after {
  border-radius: 6px 10px;
} */


/* Hero Project Images Background */
.hero-project-images-bg {
  height: 8%;
  max-width: 100% !important; /* without this the ::before and ::after of this element causes horizontal scrollbar */
  position: absolute;
  bottom: 0%;
  transform: translateY(100%);
  z-index: -1;
}

.hero-project-images-bg::before {
  transform: skewY(3deg);
  transform-origin: top left;
}

/*############################################### "Hero" end ###############################################*/

/*############################################### "Hero Project Images" start ###############################################*/

.hero-project-images {
  /* Note: don't use "translate();" nor "position: relative;" because it will leave space at the bottom of the Element 
      while moving the Element upwards, and you will see the border will not cover this space and you will think from where
      this space is coming as nothing will be shown in the Browser's Inspect Tools. Because the Element will be in the
      Document's Flow and not outside the Document's Flow, so it will take space regardless of moving it anywhere.
  */
  /* transform: translateY(-22%); */
  margin-top: -6%;
  /* using it to only move the Element above of the absolutely positioned Black Background (and not for moving the Element upwards) */
  position: relative;
}

/*############################################### "Hero Project Images" end ###############################################*/
/*############################################### "Digital Thinkers" start ###############################################*/

/* People Images */
.star-blue-img {
  transform: translate(-15%, -35%);
}

/*############################################### "Digital Thinkers" end ###############################################*/

/*############################################### "Our Services" start ###############################################*/

/* .our-services-container .skewed-bg-text{
  background: linear-gradient(180deg, #FF0014 0%, #5956E9 100%);
} */

/* Our Services 'Vertical Tabs' */
/* Single Tab Button */
.nav-pills .nav-link.active {
  background-color: var(--black) !important;
  color: var(--white) !important;
}

/* Our Services 'Content (Images and Links)' */
.tab-content>.active {
  display: flex;
}

/*############################################### "Our Services" end ###############################################*/

/*############################################### "Design Process" start ###############################################*/

.hero-project-images-bg {
  height: 8%;
  bottom: 0%;
  transform: translateY(100%);
}

.hero-project-images-bg::before {
  transform: skewY(3deg);
  transform-origin: top left;
}

/*############################################### "Design Process" end ###############################################*/

/*############################################### "Trusted by Leading Brands" start ###############################################*/

/************* "Logos 'Infinite Slider' using CSS and JS" start *************/
@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  padding: 60px 0;
  /* background: white; */
  white-space: nowrap;
  position: relative;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos:before {
  left: 0;
  /* background: linear-gradient(to left, rgba(255, 255, 255, 0), white); */
}

.logos:after {
  right: 0;
  /* background: linear-gradient(to right, rgba(255, 255, 255, 0), white); */
}

.logos:hover .logos-slide {
  animation-play-state: paused;
}

.logos-slide {
  display: inline-block;
  animation: 20s slide infinite linear;
}

.logos-slide img {
  height: 50px;
  margin: 0 40px;
}

/************* "Logos 'Infinite Slider' using CSS and JS" end *************/

.leading-brands-heading {

  /* background: #423f3f 100px,
  linear-gradient(90.17deg, #E11E2F 27.8%, #3C31E9 70.08%) padding-box text;
  color: transparent; */
}

/* Brands Logos */
.brands-logos-container {
  /* background: #24242433; */
  /* border-width: 1px, 1px, 1px, 1px; */

  /* border-style: solid; */

  /* border-color: #262626; */
  /* border: 1px solid #262626 !important; */
}

.brands-logos {
  width: 30px;
}

/*############################################### "Trusted by Leading Brands" end ###############################################*/

/*############################################### "Our Services All" start ###############################################*/
  
  /* Our Services 'Cards' */
  .our-services-cards-container {
    /* border-top: 1px solid #fe2032af !important;
    border-bottom: 1px solid #fe2032af !important; */
  }
  
  /* Single Card */
  .services-single-card {
    background: rgba(247, 247, 247, 1);

    /* background: linear-gradient(180deg, rgba(46, 51, 90, 0) 0%, rgba(28, 27, 51, 0.1) 100%),
      radial-gradient(146.13% 118.42% at 50% -15.5%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 99.59%);
  
    border: 1px solid #59B0E2;
    box-shadow: 0px 0px 50px 0px #00a2ff34 inset !important; */
    /* box-shadow: 0px 0px 50px 0px #CCD7FF40 inset !important; */
  }
  
  /* Card Icon*/
  .services-card-icon {
    width: var(--card-icon-width-1);
  }
  
  /* Card Detail */
  .services-single-card p {
    max-height: 4lh !important;
    overflow: hidden !important;
  }
  .solutions-single-card p {
    max-height: 6lh !important;
  }
  
  /* View All Services 'link' */
  .view-all-services {
    /***** using "border-image" *****/
  
    /* border: 2px solid; */
  
    /* border-image-slice of 1px is required because the 'linear-gradient-images don't have any intrinsic-size, so the default value of 100% does not work */
    /* border-image: linear-gradient(180deg, #D7213B 0%, #574DA0 100%) 1; */
  
    /* when using "border-image" property, the "border-radius" property does not work, so use the "multiple backgrounds method" */
    /* border-radius: 20px !important; */
  
  
    /* use "background-clip" to display 'multiple backgrounds' to mimick the look of 'borders' */
    background: linear-gradient(white, white) padding-box,
      linear-gradient(90deg, #FF0014 0%, #5956E9 100%) border-box;
    border: 1px solid transparent;
    cursor: pointer !important;
    box-shadow: 0px 4px 11px 0px #ff00152d;
  
  }
  
  .view-all-services img {
    width: 20px;
  }
  
  /*############################################### "Our Services All" end ###############################################*/
  

/*############################################### "Design Process" start ###############################################*/

/* Design Process 'Cards' */
.design-process-container {}

/* Single Card */
.design-process-card {
  /* background: radial-gradient(146.13% 118.42% at 50% -15.5%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 100%); */
  /* border: 1px solid #FFFFFF33 */
}

/* Card Icon*/
.design-process-card-img {
  /* width: 30px; */
  width: 100%;
  border-radius: 6px;
}

/* Card Detail */
.design-process-card p {
  max-height: 2lh !important;
  overflow: hidden !important;
}

/*############################################### "Design Process" end ###############################################*/

/*############################################### "Process Moves Forward" start ###############################################*/

/* Process Moves Forward 'Cards' */
.process-forward-cards-container {}

/* Red Box Shadow */
.box-shadow-process-1 {
  top: 10%;
  right: 0%;
  padding-top: 50%;
}

.box-shadow-process-2 {
  top: 70%;
  left: 0;
  padding-top: 40%;
  padding-left: 30%;
}

/* Single Card */
.process-forward-single-card {
  border: 1px solid #E7DAED !important;
  background: rgba(255, 255, 255, 0.09);

}

/* Card Icon*/
.process-forward-card-icon {
  width: 32px;
}

/* Card Detail */
.process-forward-single-card p {
  max-height: 3lh !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.76);
}

/*############################################### "Process Moves Forward" end ###############################################*/

/*############################################### "Our Projects" start ###############################################*/

.see-more-btn:hover {
  background-color: var(--black) !important;
  color: var(--white) !important;
}

/* Default slide */
.center-slider .slick-slide {
  color: #FFF;
  min-height: 200px;
  /* margin: 0 15px 0 0; */
  display: flex !important;
  align-items: center;
  justify-content: center;
  /* transform: scale(0.8); */
  transition: all 0.4s ease-in-out;
}

.center-slider .slick-slide,
.center-slider .slick-slide[aria-hidden="true"]:not(.slick-cloned)~.slick-cloned[aria-hidden="true"] {
  /* transform: scale(0.8, 0.8); */
  transition: all 0.4s ease-in-out;
}

/* Active center slide (You can change anything here for center slide)*/
.center-slider .slick-center,
.center-slider .slick-slide[aria-hidden="true"]:not([tabindex="-1"])+.slick-cloned[aria-hidden="true"] {
  /* transform: scale(1.1); */
  /* background-color: #000000; */
}

.center-slider .slick-current.slick-active {
  /* transform: scale(1.1); */
  /* background-color: #000000; */
}

.slick-next,
.slick-prev {
  z-index: 1;
  /* z-index: 5; */
}

/* arrow-right-black-fill-circular-icon-1 */

.slick-next {
  right: 15px;
}

.slick-prev {
  left: 15px;
}

.slick-next:before,
.slick-prev:before {
  color: #aaa;
  transition: all 500ms;
  /* font-size: 26px !important; */
}

/* Changing "Next" and "Previous" Arrows */
.slick-next,
.slick-prev {
  width: 20px !important;
  height: 20px !important;
}

.slick-next::before,
.slick-prev::before {
  display: block !important;
  content: "" !important;
  width: 100% !important;
  height: 100% !important;
  background: url("../../images/icons/arrow-right-black-fill-circular-icon-1.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

/* Changing "Next Arrow" */
.slick-next::before {
  /* background: url("../../images/icons/arrow-right-black-fill-circular-icon-1.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important; */
}

/* Changing "Previous Arrow" */
.slick-prev::before {
  /* background: url("../../images/icons/arrow-right-black-fill-circular-icon-1.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important; */
  transform: rotate(180deg);
}

.slick-arrow:hover {
  background: none !important;
}



.our-project-img {
  /* width: 130px !important; */
  /* width: 100% !important; */
  /* height: 100% !important; */
}



/*############################################### "Our Projects" end ###############################################*/

/*############################################### "Our Solutions" start ###############################################*/

/* Red Box Shadow */
.box-shadow-solutions-1 {
  top: 45%;
  padding-top: 70%;
  width: 15% !important;
}

.box-shadow-solutions-2 {
  top: 0%;
  right: 0;
  padding-top: 70%;
}

/*############################################### "Our Solutions" end ###############################################*/

/*############################################### "Testimonials" start ###############################################*/

/* Red Box Shadow */
.box-shadow-testimonials-1 {
  top: -10%;
  right: 0%;
  padding-top: 80%;
}

.testimonial-card {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.13) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.testimonial-paragraph {
  max-height: 5lh;
  overflow: hidden;
}

.testimonials-reel .slick-slide {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.testimonials-reel .slick-slide.slick-cloned {
  opacity: 0;
}

.testimonials-reel .slick-slide.slick-current.slick-active {
  opacity: 1;
}

.testimonials-reel .slick-slide {
  padding: 20px 10px 10px;
}

.testimonials-reel .slick-prev {
  left: 40%;
  top: 110%;
}

.testimonials-reel .slick-prev {
  left: 40%;
  top: 110%;
}

/* width is not being applied to this Image, so not using it */
/* .testimonials-reel .slick-prev::before{
  content: url('../../images/icons/left-arrow-grey-icon-1.svg');
  display: block;
  width: calc(var(--card-icon-width-1)/2);
  height: calc(var(--card-icon-width-1)/2);
  object-fit: contain;
}
.testimonials-reel .slick-next::before {
  content: url('../../images/icons/right-arrow-grey-icon-1.svg');
  display: block;
  width: calc(var(--card-icon-width-1)/2);
  height: calc(var(--card-icon-width-1)/2);
} */

.testimonials-reel .slick-next {
  right: 40%;
  top: 110%;
}

/*############################################### "Testimonials" end ###############################################*/

/*############################################### "map-container" start ###############################################*/

/* Red Box Shadow */
.box-shadow-map-1 {
  top: 40%;
  padding-top: 50%;
}

.map-container {
  /* background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)) padding-box, */
  /* background: linear-gradient(rgb(13, 13, 13), rgb(13, 13, 13)) padding-box,
    linear-gradient(90deg, rgba(215, 33, 59, 0.4) 0%, #D7213B 100%) border-box; */

  /* border: 2px solid transparent; */
  border: 2px solid #D7213B;
}

.map-container iframe {
  border: 2px solid #F1F3F7;
}

/*############################################### "map-container" end ###############################################*/

/*############################################### "Contact Us" start ###############################################*/

/* Contact Info */
.contact-info-icon {
  width: calc(var(--card-icon-width-1) - 15px);
}

.contact-us-container {
  background: url("../../images/backgrounds/people-bg-1.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* Contact Us Form */
.cus-input-field {
  /* background: #F1F3F7; */
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(241, 243, 247, 1) !important;
  box-shadow: 0px 1px 4px 0px rgba(25, 33, 61, 0.08) !important;
}

.cus-input-field:focus {
  background: rgba(255, 255, 255, 0.14) !important;
}

.cus-input-field::placeholder {
  /* color: rgba(241, 243, 247, 0.926) !important; */
}

/*############################################### "Contact Us" end ###############################################*/





/* ############################################################################################################### */
/* ######################### Media Queries ######################### */
/* ############################################################################################################### */

@media (min-width: 576px) {

  /* Red Circular Box Shadow */
  .cus-box-shadow {
    width: 20%;
    height: 20%;
  }

  /*############################################### "Hero" start ###############################################*/

  .cus-homepage-hero {
    /* height: 425px; */
    height: 375px;
  }

  .cus-homepage-hero-content {
    top: 120px;
  }

  /* Hero Robot Image */
  .hero-robot-image {
    width: 170px;
  }

  /* Hero Heading */
  .hero-heading>span:nth-of-type(2) {
    margin-left: -8px;
  }

  /* Hero Project Images Background */
  .hero-project-images-bg {
    height: 10%;
  }

  /*############################################### "Hero" end ###############################################*/

  /*############################################### "Trusted by Leading Brands" start ###############################################*/

  /* Brands Logos */
  .brands-logos {
    width: 60px;
  }

  /*############################################### "Trusted by Leading Brands" end ###############################################*/


  /*############################################### "Our Services All" start ###############################################*/
  
    /* Our Services 'Cards' */
    .our-services-cards-container {
      /* border-top: 1px solid #fe2032af !important;
      border-bottom: 1px solid #fe2032af !important; */
    }
  
    /* Single Card */
  
    /* Card Detail */
    .services-single-card p {
      /* max-height: 3lh !important; */
    }
  
    /* View All Services 'link' */
    .view-all-services img {
      width: 24px;
    }
  
    /*############################################### "Our Services All" end ###############################################*/

  /*############################################### "Design Process" start ###############################################*/

  /* Design Process 'Cards' */
  .design-process-container {}

  /* Single Card */
  .design-process-card {}

  /* Card Icon*/

  .design-process-card-img {
    /* width: 36px; */
  }

  /*############################################### "Design Process" end ###############################################*/


  /*############################################### "Our Projects" start ###############################################*/

  /* Default slide */
  .center-slider .slick-slide {
    /* min-height: 300px; */
  }

  /* "Next" and "Previous" Arrows */
  .slick-next,
  .slick-prev {
    width: 28px !important;
    height: 28px !important;
  }

  /*############################################### "Our Projects" end ###############################################*/

  /*############################################### "Process Moves Forward" start ###############################################*/

  /* Process Moves Forward 'Cards' */
  .process-forward-cards-container {}

  /* Single Card */
  .process-forward-single-card {}

  /* Card Icon*/
  .process-forward-card-icon {
    width: 42px;
  }

  /*############################################### "Process Moves Forward" end ###############################################*/


  /*############################################### "Testimonials" start ###############################################*/

  .testimonials-reel .slick-slide {
    opacity: 1;
  }

  .testimonials-reel .slick-slide.slick-cloned {
    opacity: 1;
  }

  .testimonials-reel .slick-slide.slick-current.slick-active {
    opacity: 1;
  }

  .testimonials-reel .slick-slide {
    /* padding: 20px 10px 10px; */
  }

  .testimonials-reel .slick-prev {
    left: 42%;
    top: 110%;
  }

  .testimonials-reel .slick-next {
    right: 42%;
    top: 110%;
  }

  /*############################################### "Testimonials" end ###############################################*/

  /*############################################### "Contact Us" start ###############################################*/

  .contact-us-container {
    border-radius: 16px !important;
  }

  /* Contact Us Form */
  #contact-us-form .view-all-services img {
    width: 20px;
  }

  .view-all-services {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /*############################################### "Contact Us" end ###############################################*/

}

@media (min-width: 768px) {

  /* Skewed Gradient Background of Text */
  .skewed-bg-text,
  .skewed-bg-text::before,
  .skewed-bg-text::after {
    border-radius: 8px 14px;
  }

  /* Justified Text */
  .text-align-md-justify {
    text-align: justify !important;
  }

  /*############################################### "Hero" start ###############################################*/

  .cus-homepage-hero {
    /* height: 538px; */
    height: 470px;
  }

  .cus-homepage-hero-content {
    top: 170px;
  }

  /* Hero Robot Image */
  .hero-robot-image {
    width: 200px;
  }

  /* Hero Heading */
  /* .hero-heading>span:first-of-type,
  .hero-heading span:first-of-type::before,
  .hero-heading span:first-of-type::after {
    border-radius: 8px 14px;
  } */

  /* .hero-heading>.skewed-bg-text { */
  .hero-heading>span:first-of-type {
    line-height: 1.5 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .hero-heading>span:nth-of-type(2) {
    margin-left: -10px;
  }

  /* Hero Detail */
  .hero-heading+p {
    line-height: 1.8 !important;
  }

  /*############################################### "Hero" end ###############################################*/


  /*############################################### "Trusted by Leading Brands" start ###############################################*/

  /* Brands Logos */
  .brands-logos {
    width: 70px;
  }

  /*############################################### "Trusted by Leading Brands" end ###############################################*/



  /*############################################### "Our Services All" start ###############################################*/
  
    /* Our Services 'Cards' */
    .our-services-cards-container {
      /* border: 1px solid #fe2032af !important; */
      /* padding-bottom: 24px !important; */
    }
  
    /* Single Card */
    .services-single-card {
      /* border-radius: 20px !important; */
    }
  
    /* Card Icon*/
    :root {
      --card-icon-width-1: 50px;
    }
  
    .services-card-icon {}
  
    /* Card Detail */
    .services-single-card p {
      /* max-height: 4lh !important; */
    }
  
    /* View All Services 'link' */
    .view-all-services {
      column-gap: 12px !important;
    }
  
    .view-all-services img {
      width: 30px;
    }
  
    /*############################################### "Our Services All" end ###############################################*/

  /*############################################### "Design Process" start ###############################################*/

  /* Design Process 'Cards' */
  .design-process-container {}

  /* Single Card */
  .design-process-card {
    border-radius: 24px !important;
    /* padding: 28px 32px !important; */

  }

  /* Card Icon*/

  .design-process-card-img {
    /* width: 48px; */
    border-radius: 10px;
    /* padding: 12px !important; */
  }

  /*############################################### "Design Process" end ###############################################*/

  /*############################################### "Process Moves Forward" start ###############################################*/

  /* Process Moves Forward 'Cards' */
  .process-forward-cards-container {}

  /* Single Card */
  .process-forward-single-card {
    border-radius: 20px !important;
    padding: 28px !important;
  }

  /* Card Icon*/
  .process-forward-card-icon {
    width: 46px;
  }

  /*############################################### "Process Moves Forward" end ###############################################*/


  /*############################################### "Our Projects" start ###############################################*/

  /* Default slide */
  .center-slider .slick-slide {
    /* height: 300px; */
  }

  /* "Next" and "Previous" Arrows */
  .slick-next,
  .slick-prev {
    /* width: 30px !important;
    height: 30px !important; */
  }

  /*############################################### "Our Projects" end ###############################################*/


  /*############################################### "Testimonials" start ###############################################*/

  .testimonials-reel .slick-slide {
    opacity: 1;
  }

  .testimonials-reel .slick-slide.slick-cloned {
    opacity: 1;
  }

  .testimonials-reel .slick-slide.slick-current.slick-active {
    opacity: 1;
  }

  .testimonials-reel .slick-slide {
    padding: 30px 16px 10px;
  }

  .testimonials-reel .slick-prev {
    left: 44%;
    top: 112%;
  }

  .testimonials-reel .slick-next {
    right: 44%;
    top: 112%;
  }

  /*############################################### "Testimonials" end ###############################################*/

  /*############################################### "Contact Us" start ###############################################*/

  .contact-us-container {
    border-radius: 24px !important;
  }

  div:has(#contact-us-form) {
    /* border-radius: 10px !important; */
  }

  /* Contact Us Form */
  #contact-us-form {
    column-gap: 28px !important;
  }

  #contact-us-form .view-all-services img {
    width: 22px;
  }

  .view-all-services {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .cus-input-field {
    /* border-radius: 6px !important; */
  }

  /*############################################### "Contact Us" end ###############################################*/

}

@media (min-width: 992px) {

  /* Skewed Gradient Background of Text */
  .skewed-bg-text,
  .skewed-bg-text::before,
  .skewed-bg-text::after {
    border-radius: 10px 16px;
  }

  /*############################################### "Hero" start ###############################################*/

  .cus-homepage-hero {
    /* height: 630px; */
    height: 540px;
    background-size: 200% 100%;
  }

  .cus-homepage-hero-content {
    top: 190px;
  }

  /* Hero Robot Image */
  .hero-robot-image {
    width: 230px;
  }

  /* Hero Heading */
  /* .hero-heading>span:first-of-type,
  .hero-heading span:first-of-type::before,
  .hero-heading span:first-of-type::after {
    border-radius: 10px 16px;
  } */


  .hero-heading>span:first-of-type {
    line-height: 1.7 !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .hero-heading>span:nth-of-type(2) {
    margin-left: -13px;
  }

  /* Hero Project Images Background */
  .hero-project-images-bg {
    height: 12%;
  }

  /*############################################### "Hero" end ###############################################*/


  /*############################################### "Trusted by Leading Brands" start ###############################################*/

  /* Brands Logos */
  .brands-logos {
    width: 100px;
  }

  /*############################################### "Trusted by Leading Brands" end ###############################################*/

  /*############################################### "Our Services All" start ###############################################*/
  
    /* Our Services 'Cards' */
    .our-services-cards-container {
      /* border: 1px solid #fe2032af !important; */
      /* border-radius: 48px !important;
      padding-bottom: 48px !important; */
    }
  
    /* Single Card */
    .services-single-card {
      /* border-radius: 32px !important; */
    }
  
    /* Card Icon*/
    :root {
      --card-icon-width-1: 60px;
    }
  
    .services-card-icon {}
  
    /* Card Detail */
    .services-single-card p {
      /* max-height: 3lh !important; */
    }
  
    /* View All Services 'link' */
    .view-all-services img {
      width: 36px;
    }
  
    /*############################################### "Our Services All" end ###############################################*/


  /*############################################### "Design Process" start ###############################################*/

  /* Design Process 'Cards' */
  .design-process-container {}

  /* Single Card */
  .design-process-card {
    /* row-gap: 32px !important; */
    border-radius: 32px !important;
    /* padding: 32px 48px !important; */
    padding: 28px 28px !important;


  }

  /* Card Icon*/

  .design-process-card-img {
    /* width: 60px; */
    /* padding: 16px !important; */
  }

  /* Card Detail */
  .design-process-card p {
    /* max-height: 3lh !important; */
  }

  /*############################################### "Design Process" end ###############################################*/


  /*############################################### "Process Moves Forward" start ###############################################*/

  /* Process Moves Forward 'Cards' */
  .process-forward-cards-container {}

  /* Single Card */
  .process-forward-single-card {
    border-radius: 32px !important;
    padding: 38px 28px !important;
  }

  /* Card Icon*/
  .process-forward-card-icon {
    width: 56px;
  }

  /*############################################### "Process Moves Forward" end ###############################################*/

  /*############################################### "Our Projects" start ###############################################*/

  /* Default slide */
  .center-slider .slick-slide {
    /* height: 400px; */
  }

  .our-project-img {
    /* width: 250px !important; */
  }

  .slick-next:before,
  .slick-prev:before {
    /* font-size: 32px !important; */
  }

  /* "Next" and "Previous" Arrows */
  .slick-next::before,
  .slick-prev::before {
    /* width: 28px !important; */
    /* height: 28px !important; */
  }

  /*############################################### "Our Projects" end ###############################################*/


  /*############################################### "Testimonials" start ###############################################*/

  .testimonials-reel .slick-slide {
    opacity: 1;
  }

  .testimonials-reel .slick-slide.slick-cloned {
    opacity: 1;
  }

  .testimonials-reel .slick-slide.slick-current.slick-active {
    opacity: 1;
  }

  .testimonials-reel .slick-slide {
    padding: 30px 16px 10px;
  }

  .testimonials-reel .slick-prev {
    left: 45%;
    /* top: 112%; */
  }

  .testimonials-reel .slick-next {
    right: 45%;
    /* top: 112%; */
  }

  /*############################################### "Testimonials" end ###############################################*/

  /*############################################### "map-container" start ###############################################*/

  .map-container {

    border-radius: 50rem !important;
    padding: 70px 70px !important;

  }

  .map-container iframe {
    border-radius: 50rem !important;
  }

  /*############################################### "map-container" end ###############################################*/

  /*############################################### "Contact Us" start ###############################################*/

  div:has(#contact-us-form) {
    /* border-radius: 14px !important; */
  }

  /* Contact Us Form */
  #contact-us-form .view-all-services img {
    width: 24px;
  }

  .view-all-services {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .cus-input-field {
    /* border-radius: 8px !important; */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /*############################################### "Contact Us" end ###############################################*/

}

@media (min-width: 1200px) {

  /* Skewed Gradient Background of Text */
  .skewed-bg-text,
  .skewed-bg-text::before,
  .skewed-bg-text::after {
    border-radius: 12px 18px;
  }

  /*############################################### "Hero" start ###############################################*/

  .cus-homepage-hero {
    /* height: 703px; */
    height: 600px;
    background-size: 160% 100%;
  }

  /* .cus-homepage-hero-content {
    top: 270px !important;
  } */

  /* Hero Robot Image */
  .hero-robot-image {
    width: 290px;
  }

  /* Hero Heading */
  /* .hero-heading>span:first-of-type,
  .hero-heading span:first-of-type::before,
  .hero-heading span:first-of-type::after {
    border-radius: 12px 18px;
  } */

  .hero-heading>span:first-of-type {
    line-height: 1.8 !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .hero-heading>span:nth-of-type(2) {
    margin-left: -16px;
  }

  /* Hero Project Images Background */
  .hero-project-images-bg {
    height: 14%;
  }

  /*############################################### "Hero" end ###############################################*/


  /*############################################### "Our Services All" start ###############################################*/
  
    /* Our Services 'Cards' */
    .our-services-cards-container {
      /* padding-bottom: 48px !important; */
      /* padding-left: 30px !important;
      padding-right: 30px !important; */
      /* padding-left: 80px !important;
    padding-right: 80px !important; */
    }
  
    /* Single Card */
    .services-single-card {
      /* padding-left: 40px !important;
      padding-right: 40px !important; */
      padding: 32px !important;
    }
  
    /* Card Icon*/
    :root {
      --card-icon-width-1: 70px;
    }
  
    .services-card-icon {}
  
    /* View All Services 'link' */
    .view-all-services {
      padding-left: 34px !important;
      padding-right: 34px !important;
    }
  
    .view-all-services img {
      width: 40px;
    }
  
    /*############################################### "Our Services All" end ###############################################*/

  /*############################################### "Design Process" start ###############################################*/

  /* Design Process 'Cards' */
  .design-process-container {}

  /* Single Card */
  .design-process-card {
    /* row-gap: 40px !important; */
    border-radius: 42px !important;
    /* padding: 50px 64px !important; */
    padding: 32px 32px !important;


  }

  /* Card Icon*/

  .design-process-card-img {
    /* width: 70px; */
    border-radius: 14px;
    /* padding: 20px !important; */
  }

  /*############################################### "Design Process" end ###############################################*/

  /*############################################### "Process Moves Forward" start ###############################################*/

  /* Process Moves Forward 'Cards' */
  .process-forward-cards-container {}

  /* Single Card */
  .process-forward-single-card {
    border-radius: 36px !important;
    padding: 50px 38px !important;
  }

  /* Card Icon*/
  .process-forward-card-icon {
    width: 66px;
  }

  /*############################################### "Process Moves Forward" end ###############################################*/

  /*############################################### "Our Projects" start ###############################################*/

  /* Default slide */
  .center-slider .slick-slide {
    /* height: 400px; */
  }

  .our-project-img {
    /* width: 220px !important; */
  }

  .slick-next::before,
  .slick-prev::before {
    /* width: 30px !important; */
    /* height: 30px !important; */
  }

  /*############################################### "Our Projects" end ###############################################*/

  /*############################################### "map-container" start ###############################################*/

  .map-container {
    padding: 80px 80px !important;
  }

  /*############################################### "map-container" end ###############################################*/

  /*############################################### "Testimonials" start ###############################################*/

  .testimonials-reel .slick-slide {
    opacity: 1;
  }

  .testimonials-reel .slick-slide.slick-cloned {
    opacity: 1;
  }

  .testimonials-reel .slick-slide.slick-current.slick-active {
    opacity: 1;
  }

  .testimonials-reel .slick-slide {
    padding-top: 42px;
  }

  .testimonials-reel .slick-prev {
    left: 46%;
    top: 112%;
  }

  .testimonials-reel .slick-next {
    right: 46%;
    top: 112%;
  }

  /*############################################### "Testimonials" end ###############################################*/

}

@media (min-width: 1400px) {

  /*############################################### "Hero" start ###############################################*/

  .cus-homepage-hero {
    /* height: 715px; */
    height: 700px;
    background-size: 110% 100%;
  }

  .cus-homepage-hero-content {
    /* top: 170px !important; */
    top: 56% !important;
    transform: translateY(-50%);
  }

  /* Hero Robot Image */
  .hero-robot-image {
    width: 340px;
  }

  /* Hero Project Images Background */
  .hero-project-images-bg {
    height: 17%;
  }

  /*############################################### "Hero" start ###############################################*/

  /*############################################### "Digital Thinkers" start ###############################################*/

  /* People Images */
  .star-blue-img {
    transform: translate(0%, -35%);
  }

  /*############################################### "Digital Thinkers" end ###############################################*/


  /*############################################### "Our Services All" start ###############################################*/
  
    /* Our Services 'Cards' */
    .our-services-cards-container {
      /* padding-bottom: 72px !important;
      border-radius: 58px !important; */
    }
  
    /* Single Card */
    .services-single-card {
      /* border-radius: 40px !important; */
      /* padding-top: 28px !important;
      padding-bottom: 28px !important; */
      /* padding: 45px !important; */
    }
  
    /* Card Icon*/
    :root {
      --card-icon-width-1: 80px;
    }
  
    .services-card-icon {}
  
    /* View All Services 'link' */
    .view-all-services {
      column-gap: 16px !important;
    }
  
    .view-all-services img {
      width: 44px;
    }
  
    /*############################################### "Our Services All" end ###############################################*/

  /*############################################### "Design Process" start ###############################################*/

  /* Design Process 'Cards' */
  .design-process-container {}

  /* Single Card */
  .design-process-card {
    /* border-radius: 48px !important; */
    border-radius: 56px !important;
    /* padding: 58px 78px !important; */
    /* padding: 78px 78px !important; */
    padding: 45px !important;
  }

  /* Card Icon*/

  .design-process-card-img {
    /* width: 86px; */
    /* padding: 24px !important; */
  }

  /*############################################### "Design Process" end ###############################################*/

  /*############################################### "Process Moves Forward" start ###############################################*/

  /* Process Moves Forward 'Cards' */
  .process-forward-cards-container {}

  /* Single Card */
  .process-forward-single-card {
    /* border-radius: 40px !important; */
    /* padding: 66px 44px !important; */
    border-radius: 44px !important;
    padding: 76px 44px !important;
  }

  /* Card Icon*/
  .process-forward-card-icon {
    width: 76px;
  }

  /*############################################### "Process Moves Forward" end ###############################################*/

  /*############################################### "Our Projects" start ###############################################*/

  /* Default slide */
  .center-slider .slick-slide {
    /* height: 400px; */
  }

  .our-project-img {
    /* width: 250px !important; */
  }

  .slick-next:before,
  .slick-prev:before {
    /* font-size: 36px !important; */
  }

  /* "Next" and "Previous" Arrows */
  .slick-next,
  .slick-prev {
    width: 40px !important;
    height: 40px !important;
  }

  /*############################################### "Our Projects" end ###############################################*/


  /*############################################### "Testimonials" start ###############################################*/

  .testimonials-reel .slick-slide {
    opacity: 1;
  }

  .testimonials-reel .slick-slide.slick-cloned {
    opacity: 1;
  }

  .testimonials-reel .slick-slide.slick-current.slick-active {
    opacity: 1;
  }

  .testimonials-reel .slick-slide {
    padding-top: 44px;
  }

  .testimonials-reel .slick-prev {
    /* left: 42%; */
    /* top: 112%; */
  }

  .testimonials-reel .slick-next {
    /* right: 42%; */
    /* top: 112%; */
  }

  /*############################################### "Testimonials" end ###############################################*/


  /*############################################### "map-container" start ###############################################*/

  .map-container {
    padding: 80px 90px !important;
  }

  /*############################################### "map-container" end ###############################################*/

  /*############################################### "Contact Us" start ###############################################*/

  div:has(#contact-us-form) {
    /* border-radius: 16px !important; */
  }

  /* Contact Us Form */
  #contact-us-form {
    row-gap: 28px !important;
  }

  #contact-us-form .view-all-services img {
    width: 30px;
  }

  .view-all-services {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .cus-input-field {
    /* border-radius: 10px !important; */
    padding: 12px 18px !important;
  }

  /*############################################### "Contact Us" end ###############################################*/


}