@font-face {
  font-family: power-grostek;
  src: url('../fonts/power-grostek/PowerGroteskTrial-UltraBold.ttf');
  font-weight: 800;
}
@font-face {
  font-family: power-grostek;
  src: url('../fonts/power-grostek/PowerGroteskTrial-Medium.ttf');
  font-weight: 500;
}

@font-face {
  font-family: euclic-circular-a;
  src: url('../fonts/euclid-circular-a/Euclid\ Circular\ A\ Light.ttf');
  font-weight: 300;
}
@font-face {
  font-family: euclic-circular-a;
  src: url('../fonts/euclid-circular-a/Euclid\ Circular\ A\ Regular.ttf');
  font-weight: 400;
}

@font-face {
  font-family: euclic-circular-a;
  src: url('../fonts/euclid-circular-a/Euclid\ Circular\ A\ Medium.ttf');
  font-weight: 500;
}

@font-face {
  font-family: euclic-circular-a;
  src: url('../fonts/euclid-circular-a/Euclid\ Circular\ A\ SemiBold.ttf');
  font-weight: 600;
}
@font-face {
  font-family: euclic-circular-a;
  src: url('../fonts/euclid-circular-a/Euclid\ Circular\ A\ Bold.ttf');
  font-weight: 700;
}

* {
  font-family: 'Inter', 'sans-serif';
}

html {
  background: #f3f9fd;
  scroll-behavior: smooth;
}

/* Utility Classes */

.ff-euclid {
  font-family: euclic-circular-a, sans-serif;
}

.ff-grostek {
  font-family: power-grostek, sans-serif;
}

.ff-inter {
  font-family: 'Inter', sans-serif;
}

/* Styling Classes */

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  filter: grayscale(1);
  border-radius: 50px;
  left: 0;
  right: 0;
  background-position-x: center;
  bottom: 0;
  background-image: url('../images/container-1.png');
  background-size: cover;
  z-index: -1;
}
.hero2::before {
  content: '';
  position: absolute;
  top: 0;
  filter: grayscale(1);
  border-radius: 50px;
  left: 0;
  right: 0;
  background-position-x: center;
  bottom: 0;
  background-image: url('../images/hero-2.png');
  background-size: cover;
  z-index: -1;
}
.about-hero::before {
  content: '';
  position: absolute;
  top: 0;
  filter: grayscale(1);
  border-radius: 50px;
  left: 0;
  right: 0;
  background-position-x: center;
  bottom: 0;
  background-image: url('../images/about-bg.png');
  background-size: cover;
  z-index: -1;
}
.contact-us-hero::before {
  content: '';
  position: absolute;
  top: 0;
  filter: grayscale(1);
  border-radius: 50px;
  left: 0;
  right: 0;
  background-position-x: center;
  bottom: 0;
  background-image: url('../images/contact-us-hero.png');
  background-size: cover;
  z-index: -1;
}
.contact-hero::before {
  content: '';
  position: absolute;
  top: 0;
  filter: grayscale(1);
  border-radius: 50px;
  left: 0;
  right: 0;
  background-position-x: center;
  bottom: 0;
  background-image: url('../images/contact-hero.png');
  background-size: cover;
  z-index: -1;
}

.dotted-bg {
  top: 0;
  left: 0;
  right: 0;
  background-position-x: center;
  bottom: 0;
  background-image: url('../images/dotted-bg.png');
  background-size: cover;
  z-index: 101;
}

.strips-bg {
  top: 0;
  left: 0;
  right: 0;
  background-position-x: center;
  bottom: 0;
  background-image: url('../images/strips-bg.png');
  background-size: cover;
  z-index: 101;
}

@media screen and (min-width: 1500px) {
  .strips-bg {
    background-position-y: 16%;
  }
}

.service-1 {
  background-image: url('../images/service-1.png');
  background-position-x: center;
  background-size: cover;
}

.service-2 {
  background-image: url('../images/service-2.png');
  background-position-x: center;
  background-size: cover;
}

.caro-1 {
  background-image: url('../images/caro-1.png');
  background-position-x: center;
  background-size: cover;
}
.caro-2 {
  background-image: url('../images/caro-2.png');
  background-position-x: center;
  background-size: cover;
}
.caro-3 {
  background-image: url('../images/caro-3.png');
  background-position-x: center;
  background-size: cover;
}
.caro-4 {
  background-image: url('../images/caro-4.png');
  background-position-x: center;
  background-size: cover;
}
.caro-5 {
  background-image: url('../images/caro-5.png');
  background-position-x: center;
  background-size: cover;
}

.contact-us-bg::before {
  content: '';
  position: absolute;
  top: 0;
  filter: grayscale(1);
  border-radius: 50px;
  left: 0;
  right: 0;
  background-position-x: center;
  background-position-y: center;
  bottom: 0;
  background-image: url('../images/contact-us-bg.png');
  background-size: cover;
  z-index: -1;
}

.footer-bg {
  background-image: url('../images/footer.png');
  background-position-x: center;
  background-size: cover;
}
.about-modal-bg {
  background-image: url('../images/about-bg-2.png');
  background-position-x: center;
  background-size: cover;
}