.btn {
  background-color: #ff0935;
  border-radius: 0.313rem;
  color: #FFFFFF;
  font-size: 1.125rem;
  padding: 0.865rem 3.55rem;
}

.sencondarybtn {
  border-radius: 1.313rem;
  background-color: #FFFFFF;
  font-size: 1rem;
  color: #000000;
  padding: 0.85rem 2.55rem;
  min-width: 11rem;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

body {
  font-family: "IBM Plex Sans", sans-serif;
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
  font-size: 3px;
}

header {
  background-color: #f7f8fa;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
}

.header-container {
  max-width: 107.5rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  min-height: 5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.header-container .moblieview-btn {
  margin-right: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.4rem;
}
.header-container .moblieview-btn div {
  width: 1.7rem;
  height: 0.3rem;
  background-color: #000;
}

.header-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
}
.header-buttons .desktopview-btn {
  border-radius: 3rem;
}

.header-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8.125rem;
  margin-left: 1.875rem;
}
.header-left .logo-link {
  width: 7.563rem;
}
.header-left .logo-link img {
  width: 100%;
}

nav {
  display: none;
}
nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2.188rem;
  padding: 1rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: absolute;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: white;
  width: 100%;
  left: 0;
  top: 5rem;
}
nav a {
  font-size: 1.125rem;
  color: #000;
}

.banner {
  height: auto;
  background: -webkit-gradient(linear, left top, left bottom, from(#e1edfa), to(rgba(246, 249, 252, 0.6196078431)));
  background: linear-gradient(180deg, #e1edfa, rgba(246, 249, 252, 0.6196078431));
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.563rem;
}
.banner .banner-img {
  width: 40rem;
}
.banner .banner-img img {
  width: 100%;
}

.banner-left {
  height: 30rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.563rem;
  padding: 2rem;
}
.banner-left h1 {
  font-size: 4rem;
  text-align: center;
  color: #000000;
}
.banner-left p {
  font-size: 1.6rem;
  text-align: center;
  width: 28rem;
  color: #0a2540;
}

.buttons-group .transparent-btn {
  background-color: transparent;
  color: #0A2540;
  position: relative;
  padding-left: 1.563rem;
}

.services {
  height: auto;
  background-color: #93a4fc;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.25rem;
  padding: 3rem;
}
.services .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.25rem;
}

.title {
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.875rem;
  margin: 0 auto;
}
.title h1 {
  width: 39rem;
  font-size: 3.125rem;
  font-weight: bold;
  text-align: center;
  color: #000000;
}

.Service-card {
  width: 100%;
  border-radius: 0.625rem;
  background-color: #FFFFFF;
  padding: 1.875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.813rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transition: all 300ms;
  transition: all 300ms;
}
.Service-card:hover {
  -webkit-transform: translateY(-0.714rem);
          transform: translateY(-0.714rem);
  border-bottom: 1.214rem solid #fecd2a;
}
.Service-card .service-image {
  width: 5rem;
}
.Service-card h2 {
  font-size: 2rem;
}
.Service-card ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  word-spacing: 0.162rem;
}
.Service-card ul li {
  font-size: 1.5rem;
  line-height: 1.8rem;
}
.Service-card ul li a {
  color: #434343;
  border-right: solid 0.125rem #A2A2A2;
  padding: 0 0.313rem;
}
.Service-card ul li .services-link-last {
  border: none;
}

.Case-studies {
  min-height: 100vh;
  position: relative;
}
.Case-studies .overlay {
  height: 35%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.8)));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  z-index: 1;
}
.Case-studies video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100vh;
  width: 100%;
}

.Case-studies p {
  font-size: 1.429rem;
  width: 10.5rem;
  margin-bottom: 2.857rem;
}
.Case-studies .casestudies-description p {
  font-size: 1.286rem;
  width: auto;
  margin: 0;
}
.Case-studies .casestudies-description p span {
  color: #ff0935;
}

.Casestudies-container {
  min-height: 100vh;
  margin: 0 auto;
  max-width: 101.875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 9.286rem 0 4.375rem 1.875rem;
}
.Casestudies-container .Casestudies-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}
.Casestudies-container .Casestudies-top button {
  font-weight: bold;
}

.counter {
  height: 27.5rem;
  width: 13.643rem;
  background-color: rgba(79, 65, 99, 0.2);
  -webkit-backdrop-filter: brightness(0.7);
          backdrop-filter: brightness(0.7);
  -webkit-box-shadow: 0px 0.214rem 0.429rem rgba(0, 0, 0, 0.1607843137);
          box-shadow: 0px 0.214rem 0.429rem rgba(0, 0, 0, 0.1607843137);
  border-radius: 0.714rem;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0 1.786rem 0 1.786rem;
  position: absolute;
  right: 1.5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.counter h1 {
  font-size: 3.286rem;
  font-weight: bold;
  margin-bottom: 0.571rem;
}
.counter .detail {
  margin-bottom: 0;
}

.Casestudies-bottom {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 1rem;
  position: relative;
  z-index: 2;
}

.Casestudies-details {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.429rem;
  color: white;
}
.Casestudies-details .logo {
  width: 17.857rem;
  height: 4.429rem;
}
.Casestudies-details .logo img {
  width: 100%;
}
.Casestudies-details h2 {
  font-size: 3.571rem;
  text-align: center;
}

.casestudies-description {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
.casestudies-description hr {
  display: none;
}
.casestudies-description .description {
  width: 31.429rem;
}
.casestudies-description h3 {
  font-size: 1.714rem;
  margin-bottom: 0.714rem;
}

.slide h4 {
  font-size: 2.286rem;
  color: #FFFFFF;
}
.slide h4 span {
  font-size: 1.143rem;
}

.about {
  height: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.625rem;
  padding: 1rem;
}
.about button {
  background-color: #0781fd;
  color: #FFFFFF;
}
.about h1 {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  color: #000000;
}

.about-container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
.about-container .about-imgleft {
  width: 21rem;
}

.about-containerright {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 1.25rem;
}

.aboutcontainer-box {
  width: 19rem;
  border: 0.063rem solid #ededed;
  border-radius: 2.857rem;
  -webkit-box-shadow: 0.06rem 0.714rem 0.714rem rgba(0, 0, 0, 0.1019607843);
          box-shadow: 0.06rem 0.714rem 0.714rem rgba(0, 0, 0, 0.1019607843);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.8rem;
  padding: 2.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.aboutcontainer-box p {
  font-size: 1.4rem;
  text-align: center;
  width: 13.75rem;
}
.aboutcontainer-box button {
  width: 12rem;
  height: 3.5rem;
  border-radius: 0.714rem;
  background-color: #768cff;
  font-size: 1.5rem;
}
.aboutcontainer-box .about-btn {
  margin-top: 1.5rem;
}

.aboutcontainer-box h2 {
  width: 10.813rem;
  color: transparent;
  font-size: 2rem;
  text-align: center;
}
.aboutcontainer-box .color1 {
  background: linear-gradient(129deg, #4B90FD, #610FFC);
  -webkit-background-clip: text;
          background-clip: text;
  width: 6rem;
}
.aboutcontainer-box .color2 {
  background: linear-gradient(131deg, #FC7F7F, #EB2A2A);
  -webkit-background-clip: text;
          background-clip: text;
}
.aboutcontainer-box .color3 {
  background: linear-gradient(150deg, #FFD855, #FFAB0F);
  -webkit-background-clip: text;
          background-clip: text;
}
.aboutcontainer-box .color4 {
  background: linear-gradient(137deg, #17C4A0, #86B210);
  -webkit-background-clip: text;
          background-clip: text;
}

footer {
  background-color: #1b1e3a;
  color: white;
}

.footer-info {
  width: 100%;
}
.footer-info .logo-img {
  width: 7.188rem;
  margin: 0 auto;
}
.footer-info p {
  margin-top: 1.438rem;
  font-size: 1.125rem;
}

.footer-container {
  max-width: 86.5rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1rem;
}
.footer-container ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.875rem;
}
.footer-container ul h5 {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}
.footer-container ul a {
  color: #FFFFFF;
  font-size: 1rem;
}

.footer-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6rem;
}

@media screen and (min-width: 180px) {
  html {
    font-size: 4px;
  }
}
@media screen and (min-width: 320px) {
  html {
    font-size: 8px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 7px;
  }
  .Service-card {
    width: calc(50% - 1.813rem);
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 7px;
  }
  .header-container .desktopview-btn {
    border-radius: 0.313rem;
  }
  .header-container .moblieview-btn {
    display: none;
  }
  nav {
    display: block;
  }
  nav ul {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    position: static;
    background-color: transparent;
    gap: 2.55rem;
  }
  nav .header-arrow {
    position: relative;
  }
  nav .header-arrow::before {
    content: "";
    position: absolute;
    top: 0.3rem;
    right: -1.18rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.125rem;
    border-top: 0.125rem solid #141414;
    border-left: 0.125rem solid #141414;
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
    -webkit-transition: all 300ms;
    transition: all 300ms;
  }
  nav .header-arrow:hover::before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    top: 0.5rem;
  }
  .banner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    height: 60.625rem;
  }
  .banner .banner-img {
    width: 52.438rem;
    display: block;
  }
  .banner-left {
    width: 34.875rem;
    padding: 0;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .banner-left h1 {
    font-size: 5rem;
    background: transparent url("/images/Path 40956.svg") no-repeat;
    background-position: 10rem 10.563rem;
    background-size: 18.125rem 1.875rem;
    text-align: left;
  }
  .banner-left p {
    font-size: 1.125rem;
    width: 26.938rem;
    text-align: left;
  }
  .transparent-btn::after {
    content: "";
    position: absolute;
    top: 1.3rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 0.125rem;
    border-top: 0.125rem solid #141414;
    border-left: 0.125rem solid #141414;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  .services {
    min-height: 100vh;
    padding-top: 3rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .services .Service-card {
    width: 23.25rem;
  }
  .Service-card ul li {
    font-size: 1rem;
  }
  .title {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 47.5rem;
  }
  .title h1 {
    text-align: left;
  }
  .Casestudies-details {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .Casestudies-details h2 {
    text-align: left;
  }
  .casestudies-description {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 0;
  }
  .casestudies-description hr {
    display: block;
    position: relative;
    right: 1rem;
    bottom: 0.714rem;
    height: 9.286rem;
  }
  .Casestudies-bottom {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    padding: 0;
  }
  .about {
    min-height: 100vh;
  }
  .about-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 9.313rem;
  }
  .aboutcontainer-box p {
    font-size: 1.125rem;
  }
  .aboutcontainer-box button {
    font-size: 1rem;
    width: 9.286rem;
    height: 2.143rem;
  }
  footer .footer-info {
    width: 33.313rem;
  }
  footer .footer-info .logo-img {
    margin: 0;
  }
  .footer-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding: 5rem 0;
  }
}
@media screen and (min-width: 1024px) {
  html {
    font-size: 9.4px;
  }
}
@media screen and (min-width: 1280px) {
  html {
    font-size: 10.7px;
  }
}
@media screen and (min-width: 1534px) {
  html {
    font-size: 12.8px;
  }
}
@media screen and (min-width: 1744px) {
  html {
    font-size: 14.6px;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 16px;
  }
}
@media screen and (min-width: 2133px) {
  html {
    font-size: 17.8px;
  }
}
@media screen and (min-width: 2400px) {
  html {
    font-size: 20px;
  }
}
@media screen and (min-width: 2560px) {
  html {
    font-size: 21.5px;
  }
}
@media screen and (min-width: 2880px) {
  html {
    font-size: 24px;
  }
}
@media screen and (min-width: 3840px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 5760px) {
  html {
    font-size: 48px;
  }
}
@media screen and (min-width: 7680px) {
  html {
    font-size: 64px;
  }
}