@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Inter:wght@300;400;800&display=swap");

body {
  font-family: "Inter", sans-serif;
}
h1,
h2,
h3,
.brand-font {
  font-family: "Oswald", sans-serif;
}

.hero-pattern {
  background-image: url("images/img2.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cus-color {
  color: #0f172a;
}
.cus-bg {
  background-color: #0f172a;
}
.cus-bg2 {
  background-color: #8993a9;
}

.overlay-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.overlay-bg.bg1 {
  background-color: rgba(0, 0, 0, 0.55);
}
.overlay-bg.bg2 {
  background-color: rgba(255, 255, 255, 0.55);
}

.text-bg {
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
}

.skew-bg {
  transform: skewY(-2deg);
}
.unskew {
  transform: skewY(2deg);
}

.border-left-accent {
  border-left: 8px solid #0f172a;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: #0f172a;
}

.hero-gradient {
  background:
    linear-gradient(rgba(0, 32, 63, 0.8), rgba(0, 32, 63, 0.8)),
    url("https://images.unsplash.com/photo-1567891777981-04505f690ed5?auto=format&fit=crop&q=80");
  background-size: cover;
  background-position: center;
}
.accent-blue {
  color: #0f172a;
}
.bg-navy {
  background-color: #00203f;
}