@import url("https://fonts.googleapis.com/css2?family=Mukta:wght@400;700&family=Poppins:wght@400;500;600;700&display=swap");

:root {
  --gold: #d4ae5b;
  --gold-muted: #d8b5557a;
  --darkblue: #435774;
  --darkgold: rgba(166, 133, 56, 1);
}

h1,
h2,
h3,
h5 {
  font-family: "Poppins", sans-serif !important;
}

.bg-gold {
  background-color: var(--gold) !important;
}

.bg-gold-muted {
  background-color: var(--gold-muted) !important;
}

.bg-golden {
  background: var(--gold);
  background: -moz-linear-gradient(276deg, var(--darkgold) 0%, var(--gold) 83%);
  background: -webkit-linear-gradient(
    276deg,
    var(--darkgold) 0%,
    var(--gold) 83%
  );
  background: linear-gradient(276deg, var(--darkgold) 0%, var(--gold) 83%);
}

.fg-gold {
  color: var(--gold) !important;
}

.gold-header {
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
}

body::before {
  display: block;
  content: "";
  height: 56px;
}

nav {
  z-index: 1;
}

.active {
  color: var(--gold) !important;
}

.custom-margin {
  margin: 0 auto;
  max-width: 768px;
}

.gold-header:hover {
  color: var(--gold-muted);
}

.bg-header {
  background-image: url(kuvat/laituri-tausta.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  background-attachment: fixed;
}

.blur-bg {
  backdrop-filter: blur(2px);
}

.button {
  max-width: 550px;
  margin: 0 auto;
}

.button a h2,
.button a h3 {
  transition: 0.5s ease;
}

.button a h2:hover,
.button a h3:hover {
  margin-bottom: 2em;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.185));
  background-color: rgba(240, 248, 255, 0) !important;
  border: solid rgb(255, 255, 255) 2px;
}

.secondary-button a h2,
.secondary-button a h3 {
  border: 2px solid var(--gold);
  transition: 0.5s ease;
}

.secondary-button a h2:hover, .secondary-button a h3:hover {
  background-color: var(--gold) !important;
  color: azure !important;
}

.wide-image-container {
  height: 15em;
  overflow: hidden;
}

.wide-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: all 0.5s;
}

.wide-image-container:hover .wide-image,
.wide-image:active {
  transform: scale(1.2);
}

#meista-1 {
  background-image: url(kuvat/leveat/meista-1.webp);
}

#tilaa-meilta {
  background-image: url(kuvat/leveat/tilaa-1.webp);
}

#yhteys {
  background-image: url(kuvat/puhelin.webp);
}

.bg-blue {
  background-color: var(--darkblue);
}

.vertical-line {
  width: 2px;
  background-color: black;
  height: 100%;
}

.footer-link:hover {
  text-decoration: underline;
}

a {
  transition: all 0.5s;
}

a.link:hover {
  filter: brightness(70%);
}

.image-container {
  overflow: hidden;
  aspect-ratio: 1/1;
}

.instagram-img {
  transition: all 0.5s;
}

.image-container:hover .instagram-img,
.instagram-img:active {
  transform: scale(1.2);
}

/* TILAA SIVU */

.carousel-caption-header,
.carousel-control-next-icon,
.carousel-control-prev-icon {
  filter: drop-shadow(0 0.2rem 0.2rem var(--darkblue));
}

.customlist li:nth-child(even) {
  background-color: var(--gold-muted) !important;
  transition: 1s ease;
}

.customlist li:nth-child(even):hover {
  background-color: rgba(255, 166, 0, 0) !important;
}

#rakennustelineet {
  background-image: url(kuvat/vuokrattavat/alumiini.png);
}

#pienkaivinkone {
  background-image: url(kuvat/vuokrattavat/gehl.png);
}

/* Yhteystiedot */

.card-body .row {
  transition: 0.5s ease;
}

.card-body .row:hover {
  background-color: var(--gold-muted) !important;
  font-weight: 600;
}

@media (max-width: 768px) {
  .nav-hide {
    display: none;
  }
}

@media (max-width: 360px) {
  .navbar-brand > img,
  .navbar-brand {
    display: none !important;
  }
}

#palvelumme, #vuokraa, #stressinhallinta {
  scroll-margin-top: 4em;
}