:root {
  --c-primary: #4bbeea;
  --c-secondary: #297fc3;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--c-secondary);
  font-weight: 300;
}

a {
  transition: all ease 0.3 !important;
}

nav.bg-semitransparent {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px)
}

#banner-home {
  height: 80vh;
  text-align: center;
  color: white;
  background: url('../img/banner-home.jpg') center bottom;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

[id*="banner-"]>.jumbotron {
  height: 100%;
  background-color: rgba(75, 189, 234, 0.2);
}

[id*="banner-"] .container-fluid, [id*="banner-"] .container-fluid>.content {
  height: 100%
}

#banner-about {
  background: url('../img/banner-about.jpg') center 0;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  border-radius: 0.25rem;
  margin: 0px 50px;
}

#banner-about p, #banner-about h1 {
  color: white;
}

#contact-section a {
  text-decoration: none;
}

#products a {
  text-decoration: none;
}

#products a>div.card {
  height: 300px;
  background-size: cover;
  background-attachment: scroll;
  background-repeat: no-repeat;
  padding: 0;
  border: none;
  overflow: hidden;
}

#products .title {
  background-color: rgba(75, 189, 234, 0.7);
  transform: translateY(0%);
  margin: 0;
  position: absolute;
  width: 100%;
  bottom: 10px;
  transition: ease 0.5s;
}

#products .description {
  position: absolute;
  display: flex;
  height: 100%;
  transform: translateY(100%);
  border-radius: .25rem;
  background-color: rgba(75, 189, 234, 0.7);
  color: white;
  padding: 1rem;
  transition: ease 0.5s;
}

#products .title h2 {
  color: white;
}

#products .card:hover .description {
  transform: translateY(0);
}

#products .card:hover .title {
  transform: translateY(-530%);
}

#products #auto {
  background: url('../img/auto.jpg') -200px center;
}

#products #residential {
  background: url('../img/residencial.jpg') center;
}

#products #life {
  background: url('../img/vida.jpg') center -10px;
}

#products #health {
  background: url('../img/saude-ind.webp') center -10px;
}

#products #rc {
  background: url('../img/rc.jpg') center -10px;
}

#products #cons {
  background-image: url('../img/consorcio.webp');
}

#products #frota {
  background: url('../img/frota.jpg') center -10px;
}

#products #motorcycle {
  background-image: url('../img/moto.webp');
}

#products #life-emp {
  background-image: url('../img/saude-emp.webp');
}

#products #odon-ind {
  background: url('../img/odonto-ind.jpg') center -50px;
}

#products #odon-emp {
  background: url('../img/odonto-emp.jpg') center -10px;
}

#products #plano-saude {
  background-image: url('../img/plano-saude.jpg');
}

#banner-products {
  height: 50vh;
  text-align: center;
  color: white;
  background: url('../img/banner-products.jpg') center -250px;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.btn-primary {
  background-color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}

.btn-primary:hover {
  background-color: var(--c-secondary) !important;
  border-color: var(--c-secondary) !important;
}

.dropdown-menu {
  background-color: var(--c-secondary) !important;
}

.dropdown-item {
  color: white;
}

.text-primary {
  color: var(--c-secondary) !important;
}

a.text-primary:hover {
  color: var(--c-primary) !important;
}

@media screen and (max-width: 425px) {
  #banner-about {
    border-radius: 0 !important;
    margin: 0 !important;
  }
}

/* iPhone specific support */

@supports (-webkit-touch-callout: none) {
  [id*="banner-"] {
    background-attachment: scroll;
  }
}