@font-face {
  font-family: 'Graphik Black';
  src: url('../font/HvDTrial_Graphit-Black-BF649ba95ba77e9.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Graphik Bold';
  src: url('../font/HvDTrial_Graphit-Bold-BF649ba95b29d5a.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Graphik Medium';
  src: url('../font/HvDTrial_Graphit-Medium-BF649ba95b835b6.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}


@font-face {
  font-family: 'Graphik Regular';
  src: url('../font/HvDTrial_Graphit-Regular-BF649ba95b99054.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}


@font-face {
  font-family: 'Graphik Light';
  src: url('../font/HvDTrial_Graphit-Light-BF649ba95b7de45.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

a {
  text-decoration: none;
}

header {
  background-image: url(../images/header-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 80px 0px;
  background-position: top;
}

.contact-icons {
  display: grid;
  gap: 25px;
}

.contact-icons a svg {
  width: 22px;
  fill: #fff;
}

.contact-icons a {
  display: flex;
  gap: 15px;
  text-decoration: none;
  align-items: center;
}

.contact-icons a h5 {
  color: #fff;
  font-size: 18px;
  font-family: 'Graphik light';
  margin-bottom: 0;
}

header .mobile-block {
  display: none;
}

.expertise-section {
  background-color: #EDEFF0;
  padding: 80px 0px 100px;
}

.expertise-section h1 {
  font-size: 30px;
  color: #716767;
  font-family: 'Graphik Medium';
  padding-bottom: 40px;
  text-transform: capitalize;
}

.expertise-section .expertise-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 33px;
  padding-bottom: 80px;
}

.expertise-section .expertise-items .expertise-item {
  background-color: #fff;
  padding: 31px 10px;
  text-align: center;
  border-radius: 9px;
  border-bottom: 9px solid #DFE0E2;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.3s ease-in;
  cursor: pointer;
}

.expertise-section .expertise-items .expertise-item h4 {
  font-size: 26px;
  margin-bottom: 0;
  color: #716767;
  font-family: 'Graphik Regular';
  margin-top: 14px;
}

.expertise-section .expertise-items .expertise-item:hover h4 {
  color: #000;
}

/* Mobile page CSS */
.hero-section {
  background-image: url(../images/mobile-page-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: end;
  padding: 211px 0px 50px !important;
}
.hero-section-ai {
  background-image: url(../images/ai-image.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: end;
  padding: 211px 0px 50px !important;
} 


.hero-section .top-logo {
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
}

.hero-section .contact-icons {
  display: flex;
  justify-content: space-between;
}

.social-media-icons {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  padding-top: 200px;
  padding-bottom: 66px;
}

.social-media-icons a {
  cursor: pointer;
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 8px;
}

.hero-section .contact-icons a h5 {
  color: #fff;
  font-size: 25px;
  font-family: 'Graphik Regular';
  margin-bottom: 0;
}

.hero-section .contact-icons a svg {
  width: 22px;
  fill: #fff;
}

/* Quick facts CSS */
.quick-facts {
  display: flex;
  height: 100%;
  background: #0946E7;
  overflow: hidden;
}

.bg-light-gray {
  background-color: #EDEFF0;
}

.bg-dark-gray {
  background-color: #DFE0E2;
}

.slide1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #0946E7;
  color: #fff;
  padding: 42px;
}

.slide1 h1 {
  font-size: 65px;
  font-family: 'Graphik Medium';
  text-transform: uppercase;
  text-align: center;
}

.slide1 p {
  line-height: 38px;
  font-size: 30px;
  font-family: 'Graphik Regular';
  margin-bottom: 0;
  color: #fff;
}

.slide1 hr {
  border: 1.5px solid #fff;
  border-radius: 5px;
  opacity: 1;
}

.top-heading p {
  margin-top: 25px;
}

.bottom-facts .card {
  background-color: #0946E7;
  border: none;
  display: flex;
  flex-direction: row;
  gap: 8px;
  color: #fff;
  align-items: end;
  padding-top: 23px;
  justify-content: start;
  padding: 0;
  margin: 0;
  min-height: 0;
  margin-top: 20px;
}

.bottom-facts h2 {
  font-size: 65px;
  line-height: 75px;
  font-family: 'Graphik Medium';
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bottom-facts h2 span {
  font-size: 55px;
  font-family: 'Graphik Regular';
}

.card-text {
  font-size: 1.375rem;
  font-weight: bold;
  padding-left: 10px;
  padding-top: 10px;
}

.slide2 {
  flex: 4;
}

.slide2 .row {
  margin: 0;
  height: 50%;
}

.cards-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 100px;
}

.quick-facts-block {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.quick-facts-block h5 {
  font-size: 34px;
  margin: 40px 0 30px;
  font-family: 'Graphik Medium';
  text-align: center;
}

.margin-right {
  margin-right: 15px !important;
}

.margin-left {
  margin-left: 15px !important;
}

.cards-row .card {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 35px 10px;
  margin: 25px 30px;
  min-height: 186px;
  background: #fff;
  width: 100%;
  align-items: center;
  border: 0;
  gap: 28px;
}


.fp-section .card .card img {
  object-fit: contain;
}


.fp-section .card .card-text {
  color: #676767;
}


.fp-section .card .card-text h3 {
  font-size: 34px;
  font-family: 'Graphik Medium';
  margin-bottom: -6px;
}


.fp-section .card .card-text span {
  font-size: 24px;
  font-family: 'Graphik Regular';
  font-weight: 400;
  color: #7B7B7B;
}


.fp-section .card .partners .card img {
  width: 100%;
  height: 42px;
}

/* Happy Clients CSS */

.happy-clients {
  background-color: #fff;
  padding: 78px 80px;
}

.Clientele-heading h1 {
  color: #000;
  font-size: 65px;
  padding-top: 10px;
  text-transform: uppercase;
  position: relative;
  font-family: 'Graphik Medium';
}

.Clientele-heading h1:before {
  position: absolute;
  content: "";
  background: #000;
  width: 200px;
  height: 7px;
  bottom: -30px;
  border-radius: 20px;
  margin: auto;
  text-align: center;
  left: 40%;
  right: 40%;
}

.happy-clients .client-logo {
  border: 1px solid #BCDAFF;
  border-radius: 12px;
  padding: 30px 10px;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding-top: 40px;
}


/*Latest-2*/
.color-green {
  color: #7ED957 !important;
}

.color-blue {
  color: #4169E2 !important;
}

.color-green2 {
  color: #54B66D !important;
}

.color-pink {
  color: #D9318B !important;
}

.Project-heading h4 {
  font-size: 40px;
  font-weight: bold;
  margin-top: 60px;
  font-family: 'Graphik Black';
}

.project-main {
  padding: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;

}

.project-main.one {
  padding: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #D3BEB7;
  border: 1px solid #FCB9B9;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgb(218 65 8 / 45%) 100%);

}

.project-main.two {
  padding: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #7ED957;
  background-image: linear-gradient(to right, #FFF8F4, #E1FDD5);
}

.project-main.three {
  padding: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #5A85E9;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.28) 0%, rgba(90, 133, 233, 0.3) 100%);
}

.project-main.four {
  padding: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E7CB57;
  background-image: linear-gradient(to right, #FFF8F4, #CBA33F);
}

.project-main.five {
  padding: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #5A85E9;
  background-image: linear-gradient(to right, rgba(202, 255, 231, 0.25) 0%, rgba(65, 105, 226, 0.25) 100%);
}

.project-main.six {
  padding: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #58BD71;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.28) 0%, rgba(86, 184, 111, 0.28) 100%);
}

.project-main.seven {
  padding: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E21689;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(226, 22, 137, 0.23) 100%);
}

.project-main.eight {
  padding: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #66BA85;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(65, 207, 118, 0.30) 100%);
}

.project-main.nine {
  padding: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E53D00;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(218, 65, 8, 0.5) 100%);
}

.project-main.ten {
  padding: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #D32685;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(226, 22, 137, 0.23) 100%);
}

.project-main.eieven {
  padding: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #14552B;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(19, 87, 43, 0.5) 100%);
}

.project-main.leun {
  border: 1.17px solid #FD7003;
  background: linear-gradient(99.93deg, rgba(255, 156, 1, 0.15) 2.54%, rgba(252, 106, 2, 0.15) 93.42%);
}
.project-main.recs {
  border: 1.17px solid #3797EF;
  background: linear-gradient(99.93deg, rgba(76, 231, 255, 0.15) 2.54%, rgba(55, 151, 239, 0.15) 93.42%);
}
.color-dark-sky-blue {
  color: #3797EF !important;
}
.project-main.sabre {
  border: 1.17px solid #4169DD;
  background: linear-gradient(99.93deg, rgba(65, 105, 221, 0.15) 2.54%, rgba(65, 105, 221, 0.15) 93.42%);
}
.color-ultramarine-blue {
  color: #3797EF !important;
}
.project-main.homeland {
  border: 1.17px solid #22B092;
  background: linear-gradient(99.93deg, rgba(58, 185, 158, 0.15) 2.54%, rgba(34, 176, 146, 0.15) 93.42%);
}
.color-mountain-meadow {
  color: #22B092 !important;
}
.project-main.printo {
  background: linear-gradient(99.93deg, #3ab99e1c 2.54%, #22b0923d 93.42%);
  border: 1.17px solid #22B092;
}
.color-aqua-green {
  color: #04DA8D !important;
}
.project-main.whistler {
  background: linear-gradient(99.93deg, rgba(246, 0, 255, 0.15) 2.54%, rgba(224, 37, 231, 0.15) 93.42%);
  border: 1.17px solid #E025E7;
}
.color-fuchsia {
  color: #E025E7 !important;
}
.project-main.popkart {
  background: linear-gradient(99.93deg, rgba(85, 159, 246, 0.15) 2.54%, rgba(0, 115, 251, 0.15) 93.42%);
  border: 1.17px solid #3899F7;
}
.color-cornflower-blue {
  color: #559FF6 !important;
}
.project-main.zuckerberg {
  background: linear-gradient(99.93deg, #CECECE 2.54%, #868686 93.42%);
  border: 1.17px solid #000000;
}
.project-main.my-choice {
  background: linear-gradient(99.93deg, rgba(171, 155, 133, 0.15) 2.54%, rgba(171, 155, 132, 0.15) 93.42%);
  border: 1.17px solid #01468D;
}
.color-cornflower-blue {
  color: #00458D !important;
}
.project-main.bildmart {
  background: linear-gradient(99.93deg, rgba(43, 109, 255, 0.15) 2.54%, rgba(0, 79, 255, 0.15) 93.42%);
  border: 1.17px solid #2B6DFF;
}
.color-clear-blue {
  color: #2B6DFF !important;
}
.project-main.luxn {
  background: linear-gradient(99.93deg, rgba(171, 155, 133, 0) 2.54%, rgba(171, 155, 132, 0.15) 93.42%);
  border: 1.17px solid #000000;
}
.project-main.epic {
  background: linear-gradient(99.93deg, rgba(2, 220, 145, 0.15) 2.54%, rgba(100, 92, 255, 0.15) 93.42%);
  border: 1.17px solid #000000;
}
.color-blue-lotus {
  color: #645CFF !important;
}
.project-main.killik {
  background: linear-gradient(99.93deg, rgba(20, 53, 57, 0.1512) 2.54%, rgba(20, 53, 57, 0.27) 93.42%);
  border: 1.17px solid #000000;
}
.color-dark-blue-grey {
  color: #26374D !important;
}
.project-main.plumbing {
  background: linear-gradient(99.93deg, rgba(1, 54, 114, 0.27) 2.54%, rgba(218, 38, 29, 0.27) 93.42%);
  border: 1.17px solid #000000;
}
.color-lava-red {
  color: #EC1A24 !important;
}
.project-main.amcheck {
  background: linear-gradient(99.93deg, rgba(0, 0, 0, 0.27) 2.54%, rgba(246, 146, 31, 0.27) 93.42%);
  border: 1.17px solid #000000;
}
.color-cadmium-orange {
  color: #F4841C !important;
}
.project-main.open-route {
  background: linear-gradient(99.93deg, rgba(208, 230, 255, 0.27) 2.54%, rgba(66, 154, 255, 0.27) 93.42%);
  border: 1.17px solid #000000;
}
.color-butterfly-blue {
  color: #429AFF !important;
}
.project-main.insight {
  background: linear-gradient(99.93deg, rgba(132, 25, 27, 0.27) 2.54%, rgba(2, 29, 90, 0.27) 93.42%);
  border: 1.17px solid #000000;
}
.color-red-berry {
  color: #900304 !important;
}
.project-main.se-keys {
  background: linear-gradient(99.93deg, rgba(0, 0, 0, 0.27) 2.54%, rgba(101, 172, 88, 0.27) 93.42%);
  border: 1.17px solid #000000;
}
.color-dark-pastel-green {
  color: #4CAF50 !important;
}
.project-main.instafilings {
  background: linear-gradient(99.93deg, rgba(75, 215, 209, 0.27) 2.54%, rgba(255, 255, 255, 0.27) 93.42%);
  border: 1.17px solid #000000;
}
.project-main.titan {
  background: linear-gradient(99.93deg, rgba(16, 92, 108, 0.27) 2.54%, rgba(1, 167, 167, 0.27) 93.42%);
  border: 1.17px solid #000000;
}
.project-main.cleaning {
  background: linear-gradient(99.93deg, rgba(2, 37, 184, 0.15) 2.54%, rgba(35, 141, 212, 0.15) 93.42%);
  border: 1.17px solid #4169DD;
}
.color-forest-green {
  color: #3E8E62 !important;
}
.project-main.storise {
  background: linear-gradient(99.93deg, rgba(49, 84, 112, 0.17) 2.54%, rgba(22, 217, 121, 0.17) 93.42%);
  border: 1.17px solid #315470;
}
.color-forest-green {
  color: #3E8E62 !important;
}
.project-main.experts4u {
  background: linear-gradient(99.93deg, rgba(55, 107, 172, 0.22) 2.54%, rgba(5, 67, 145, 0.22) 93.42%);
  border: 1.17px solid #376BAC;
}
.color-flat-blue {
  color: #376BAC !important;
}
.project-main.posh {
  background: linear-gradient(103.59deg, rgba(220, 4, 158, 0.1) 0.86%, rgba(104, 57, 188, 0.1) 100.21%);
  border: 1px solid #CD0BA2;
}
.color-flat-purple-heart {
  color: #6938BC !important;
}
.project-main .main-sec {
  padding-right: 5px;
}

.project-main .main-sec .logo h2 {
  font-size: 42px;
  font-family: 'Graphik Black';
  font-weight: bold;
  line-height: 52px;
  padding-top: 10px;
}

.project-main .main-sec .logo h2 span {
  color: #DA4108;
}

.color-blaze-orange {
  color: #FD7302 !important;
}

.project-main .main-sec .logo p {
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  font-family: 'Graphik Light';
  padding: 5px 0px;
}

.project-main .main-sec .logo p span {
  color: #7ED957;
  font-weight: 600;
}

.project-main .main-sec .Tec-logo h4 {
  font-size: 20px;
  font-family: 'Graphik Medium';
  color: #000;
  padding-top: 9px;
}

.project-main:nth-child(3) .main-sec .Tec-logo .Tec-main-logo {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: start;
}

.project-main .main-sec .Tec-logo .Tec-main-logo {
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: space-between;
}

.project-main .main-sec .Tec-logo .Store-logo {
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.project-main .main-sec .Tec-logo .Tec-main-logo h6 {
  font-size: 16px;
  font-family: 'Graphik Medium';
}

.project-main .main-sec .logo p a {
  cursor: pointer;
  color: #000;
  text-decoration: underline !important;
  font-family: 'Graphik Medium';
}

.project-main .main-sec .Tec-logo .Tec-main-logo .All-logo {
  text-align: center;
}

.project-main .project-img {
  text-align: end;
}

footer {
  background-color: #0840E6;
  padding: 100px 100px 87px;
  position: relative;
}



footer h6 {
  font-size: 39px;
  color: #fff;
  font-family: 'Graphik Regular';
}

footer h2 {
  font-size: 140px;
  color: #fff;
  font-family: 'Graphik Regular';
}

footer hr {
  color: #fff;
  opacity: 1;
  border-width: 6px;
  border-radius: 8px;
  margin-bottom: 60px;
  margin-top: 20px;
}

footer .contact-icons a h5 {
  color: #fff;
  font-size: 25px;
  font-family: 'Graphik Regular';
  margin-bottom: 0;
}

footer .contact-icons a svg {
  width: 25px;
  fill: #fff;
}

footer .contact-icons a span {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer img {
  z-index: 9;
  position: relative;
}

.nav-dots {
  position: fixed;
  top: 50%;
  right: 1%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  cursor: pointer;
  z-index: 999;
}

.nav-dot {
  width: 12px;
  height: 12px;
  border: 2px solid #52616a;
  border-radius: 50%;
  list-style: none;
  background: #c9d6de;
  transition: all 0.3s;
}

.nav-dot:not(:last-of-type) {
  margin-bottom: 20px;
}

.nav-dot:hover, .nav-dot.is-active {
  transform: scale(1.8);
  background: transparent;
}

.url-sec img {
    padding-right: 10px;
}
.logo img {
    max-width: 70px;
  }