/*
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;

  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  --antd-wave-shadow-color: #1890ff;
  --scroll-bar: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-family: "Inter", sans-serif;
  background-color: #000000;
  color: #343a40;
  overflow-x: hidden;
}

.navbar {
  padding: 1.2rem 0.8rem;
}

.navbar-nav {
  gap: 3.2rem;
}

.navbar-nav .nav-item .nav-link {
  color: #fff;
  font-size: 1.4rem;
  padding: 0.8rem 1rem;
  transition: all 0.5s;
}

.navbar-nav .nav-item .nav-link:hover {
  box-shadow: inset 0 0 0 1px #fff;
}

.hero {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)),
    url(../img/bgs/christina-wocintechchat-com-glRqyWJgUeY-unsplash.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
}

.content {
  margin-top: 18rem;
}

.hero h1,
.hero h2,
.hero p {
  color: #fff;
}

.hero h1 {
  margin-bottom: 3.2rem;
  font-size: 4.4rem;
  line-height: 1.1;
  letter-spacing: -1;
  color: #fff;
}

.header-text {
  margin-bottom: 2.4rem;
  font-size: 1.6rem;
  line-height: 1.7;
  font-weight: 400;
}

.btn:link {
  font-size: 1.4rem;
  transition: all 0.5s;
}

.btn-info:hover {
  background-color: #fff;
  color: rgb(32, 158, 193) !important;
}

.btn-light {
  color: rgb(32, 158, 193) !important;
}

.btn-light:hover {
  background-color: rgb(32, 158, 193);
  color: #fff !important;
}

.btn-fix {
  font-weight: 700;
  padding: 0.8rem 1.8rem !important;
  border-radius: 2.4rem;
}

.hero .carousel-heading {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  font-weight: 500;
  margin-top: 4.2rem;
  margin-bottom: 1.8rem;
  color: #888;
}

.carousel-tools {
  width: 3.2rem !important;
  /* filter: brightness(0); */
  /* filter: grayscale(5); */
  opacity: 30%;
}

.services {
  padding: 9.6rem 0;
  background-color: #000000;
  color: #fff;
}

.services-heading-box {
  text-align: center;
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.services-heading {
  font-size: 3rem;
  line-height: 1.6;
}

.services-text-box {
  padding-left: 8rem !important;
  padding-right: 8rem !important;
  align-self: center;
}

.services-text {
  font-size: 1.6rem;
  line-height: 1.6;
  font-weight: 200;
}

.service-card {
  background-color: #0c0c0c;
  border-radius: 25px;
  padding: 2.4rem;
  transition: all 0.5s;
}

.service-card:hover {
  background-color: #2b9fbf;
  transform: scale(1.05);
}

ion-icon {
  height: 2.4rem;
  width: 2.4rem;
}

.service-card ion-icon {
  color: #fff;
  height: 3.2rem !important;
  width: 3.2rem !important;
  background-color: #2b9fbf;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.09);
  margin-bottom: 3.2rem;
  padding: 1.6rem;
  border-radius: 50%;
}

.service-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 1.6rem;
}

.service-text {
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: 200;
}

.service-card:hover .service-text {
  color: #000;
}

.ads {
  padding: 9.6rem 0;
  background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)),
    url(../img/bgs/h-heyerlein-ndja2LJ4IcM-unsplash.jpg);
  background-color: rgb(0, 0, 0);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  z-index: 1;
  color: #fff;
  position: relative;
}

.ads-heading {
  font-size: 2.8rem;
  line-height: 3.8rem;
}

.ads-text {
  font-size: 1.6rem;
  font-weight: 200;
  line-height: 3rem;
  opacity: 0.5;
}

.department {
  padding: 9.6rem 0;
  background-color: rgb(0, 0, 0);
  color: #fff;
}

.department-heading {
  font-size: 4rem;
  line-height: 4.5rem;
  margin-bottom: 0.5rem;
}

.department-sub-text {
  font-size: 1.6rem;
  font-weight: 200;
  line-height: 3rem;
  display: inline-block;
}

.department-card {
  border-radius: 21px;
  padding: 1rem 1.5rem;
  transition: all 0.5s ease 0s;
  background-color: #0c0c0c;
}

.department-card:hover {
  background-color: #2b9fbf;
  transform: scale(1.05);
}

.department-card-body {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.department-card h3 {
  font-size: 2rem;
  line-height: 2.8rem;
  font-weight: 400;
}

.department-card-icon {
  height: 2.4rem;
  width: 2.4rem;
  opacity: 0.3;
}

.right-side {
  align-self: center;
}

.cta {
  padding: 9.6rem 0;
  background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)),
    url(../img/bgs/andrea-piacquadio-3769021.jpg);
  background-color: rgb(0, 0, 0);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.cta h2 {
  font-size: 3.8rem;
  line-height: 3.8rem;
  margin-bottom: 3rem;
  color: #fff;
}

.cta p {
  font-size: 1.6rem;
  font-weight: 200;
  opacity: 0.5;
  color: #fff;
}

.cta-form label {
  font-size: 1.4rem;
  font-weight: 200;
  color: #fff;
  opacity: 0.5;
}

.form-group .form-control {
  padding: 2.4rem !important;
  font-size: 1.4rem;
  font-family: inherit;
  color: inherit;
  border: none;
  border-radius: 9px;
  background-color: #e9f5f7;
}

.cta *:focus {
  outline: none;
  box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5);
}

.cta-textarea {
  resize: none;
  font-size: 1.4rem;
  border-radius: 9px;
  border: none;
}

.quote-btn {
  font-size: 1.6rem;
}

.cta-items {
  align-items: center;
}

.external-quote-btn:link,
.external-quote-btn:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 21px;
  padding: 2.4rem 3.6rem !important;
  transition: all 0.5s ease 0s;
  background-color: #0c0c0c;
  color: #fff;
  border: none;
  font-size: 1.6rem !important;
  line-height: 2.8rem !important;
  font-weight: 400 !important;
}

.external-quote-btn:hover {
  background-color: #2b9fbf;
  transform: scale(1.05);
}

footer {
  padding: 9.6rem 0;
  background-color: rgb(0, 0, 0);
  color: #fff;
}

.footer-logo {
  display: block;
  margin-bottom: 3.2rem;
}

.footer-logo img {
  width: 30%;
}

.social-links {
  list-style: none;
  display: flex;
  gap: 2.4rem;
}

.social-icon {
  height: 2.4rem;
  width: 2.4rem;
}

.copyright {
  font-size: 1.4rem;
  line-height: 1.6;
  color: #fff;
  opacity: 0.5;
  margin-top: auto;
}

.footer-heading {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 4rem;
}

.contacts {
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.6;
}

.address {
  margin-bottom: 2.4rem;
  opacity: 0.5;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.6rem;
  color: inherit;
  opacity: 0.5;
  transition: all 0.3s;
}

.footer-link:hover,
.footer-link:active {
  color: #555;
}

.jumbotron {
  padding: 1rem;
  border-radius: 0;
}

/*---Bootstrap Padding Fix---*/
[class*="col-"] {
  padding: 1rem;
}

.navbar-dark .navbar-toggler {
  color: transparent !important;
  border-color: transparent !important;
}

.offsetcanvas-header {
  display: none;
}

.navbar-toggler {
  font-size: 1.8rem;
}

.navbar-dark .navbar-toggler-icon {
  background-image: url(../img/menu-icon.svg) !important;
}

/*
  About Page Styling
*/

.about-hero {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)),
    url(../img/bgs/fabio-oyXis2kALVg-unsplash.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  background-attachment: fixed;
}

.about-hero h1,
.about-hero h2,
.about-hero p {
  color: #fff;
}

.about-hero h1 {
  margin-bottom: 3.2rem;
  font-size: 4.4rem;
  line-height: 1.1;
  letter-spacing: -1;
  color: #fff;
}

.about-hero .carousel-heading {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  font-weight: 500;
  margin-top: 4.2rem;
  margin-bottom: 1.8rem;
  color: #888;
}

.about {
  padding: 9.6rem 0;
  background-color: #000000;
  color: #fff;
}

.about-heading-box {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.about-heading {
  font-size: 4rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.count-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content-left span,
.content-right span {
  font-size: 2.8rem;
}

.content-left p,
.content-right p {
  font-size: 1.6rem;
  font-weight: 200;
  line-height: 25px;
  opacity: 0.3;
}

.about-text-box {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
  align-self: center;
}

.about-text {
  font-size: 1.6rem;
  line-height: 1.6;
  font-weight: 200;
  margin-bottom: 4.8rem;
  opacity: 0.8;
}

.our-story {
  margin-top: 15rem;
  align-items: center;
}

.our-story-heading {
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 2.4rem;
}

.our-story-text {
  font-size: 1.6rem;
  line-height: 1.6;
  font-weight: 200;
  margin-bottom: 4.8rem;
  opacity: 0.5;
}

.our-story-img-box {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

/* Services Page Styling */

.service-hero {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1)),
    url(../img/bgs/pexels-andrea-piacquadio-3768894.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  background-attachment: fixed;
}

.service-hero h1,
.service-hero h2,
.service-hero p {
  color: #fff;
}

.service-hero h1 {
  margin-bottom: 3.2rem;
  font-size: 4.4rem;
  line-height: 1.1;
  letter-spacing: -1;
  color: #fff;
}

.service-hero .carousel-heading {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  font-weight: 500;
  margin-top: 4.2rem;
  margin-bottom: 1.8rem;
  color: #888;
}

.services {
  padding: 9.6rem 0;
  background-color: #000000;
  color: #fff;
}

.service-heading {
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 4.5rem;
  text-align: center;
}

.service-article {
  font-size: 1.6rem;
  line-height: 2.5rem;
  font-weight: 200;
  opacity: 0.4;
  text-align: center;
}

.services-items {
  margin-top: 6.4rem;
}

.services-card {
  background-color: #242424;
  transition: all 0.5s;
}

.card-content {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.card-img-top {
  height: 180px;
}

.services-card .card-text {
  font-size: 1.6rem;
}

.card-text-link:link,
.card-text-link:visited {
  text-decoration: none !important;
  color: #fff;
  transition: all 0.5s;
}

.card-text-link:hover,
.card-text-link:active {
  color: rgb(32, 158, 193);
}

.card-separator {
  border-color: #fff;
  opacity: 0.1;
}

.starting-at-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.starting-at-items {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.starting-at-box ion-icon {
  width: 2.4rem;
  height: 2.4rem;
  color: rgb(32, 158, 193);
  justify-self: flex-start;
}

.starting-at {
  text-transform: uppercase;
  opacity: 0.6;
}

.starting-at-price {
  font-size: 2.4rem;
  opacity: 0.8;
}