/*
Theme Name: Olfactum
Theme URI: https://odwebsites.it/ 
Author: ODWebsites
Author URI: https://www.odwebsites.it/web-designer-freelance-bergamo
Description: descrizione
Version: 1.0
Text domain: Prefisso 3 lettere
*/
/* I - Settings */
@font-face {
  font-family: "Goudy-regular-local";
  src: url(assets/fonts/Goudy-regular-local.woff2);
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato-Regular-local";
  src: url(assets/fonts/Lato-Regular-local.woff2);
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Goudy-bold-local";
  src: url(assets/fonts/Goudy-bold-local.woff2);
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* F - Settings */
/* I - Mixins */
/* F - Mixins */
/* I - Classes */
.ff-primary {
  font-family: "Goudy-regular-local";
}

.ff-primary-bold {
  font-family: "Goudy-bold-local";
}

.d-c-secondary {
  color: #b96911;
}

.d-bg-black {
  background-color: #1f1513;
}

.d-bg-primary {
  background-color: #3a2823;
}

/* .ff-secondary-bold {
  font-family: "Goudy-bold-local";
}
 */
/* F - Classes */
/* I - General */
body {
  font-family: "Lato-Regular-local", serif;
  background-color: #3a2823;
  color: #fff;
}

button {
  background-color: unset;
  border: 0;
}

.of-anchor {
  scroll-margin-top: 80px;
}

/* .d-cta {
  position: relative;
  display: inline-block;
  background: transparent;
  overflow: hidden;
  border: 2px solid $white;
  padding: 8px 12px;
  color: $white;
  text-decoration: none;
  align-self: center;
  transition: color 0.4s ease;
  &:hover {
    color: $black;
    &::before {
      width: 100%;
    }
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #fff;
    z-index: -1;
    transition: width 0.4s ease;
  }
} */
.d-cta,
#modulo-di-contatto .wpcf7-submit {
  all: unset;
  position: relative;
  display: inline-block;
  background: transparent;
  overflow: hidden;
  border: 2px solid #fff;
  padding: 8px 12px;
  color: #fff;
  text-decoration: none;
  transition: color 0.4s ease;
  z-index: 1;
}
.d-cta::before,
#modulo-di-contatto .wpcf7-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #fff;
  z-index: -1;
  transition: width 0.4s ease;
}
.d-cta:hover,
#modulo-di-contatto .wpcf7-submit:hover {
  color: #000;
}
.d-cta:hover::before,
#modulo-di-contatto .wpcf7-submit:hover::before {
  width: 100%;
}

.overlay {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100%;
  background-color: #000;
  opacity: 0.35;
}

.pre-title {
  font-family: "Goudy-regular-local";
  letter-spacing: 5px;
}

.accent {
  font-weight: 700;
  font-size: 1.3rem;
}

.quote {
  font-family: "Goudy-bold-local";
  font-size: 1.3rem;
  font-style: italic;
}

.sec {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.col {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

p {
  margin-bottom: 0;
  color: #f2f2f2;
}

.carousel .carousel-item {
  height: 90vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel .carousel-item div {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  color: #fff;
  width: 70%;
  text-align: center;
}
.carousel .carousel-item div .title {
  font-size: 3rem;
  font-family: "Goudy-bold-local";
}
.carousel .carousel-item div .subtitle {
  font-size: 1.2rem;
}
.carousel .controls-container {
  position: absolute;
  bottom: 10%;
  right: 5%;
  z-index: 2;
  display: flex;
  gap: 10px;
}
.carousel .controls-container .control {
  height: 50px;
  width: 50px;
  border-radius: 50px;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition-duration: 0.6s;
}
.carousel .controls-container .control:hover {
  box-shadow: 0px 0rem 12px 8px rgba(255, 255, 255, 0.3137254902);
  background-color: rgba(255, 255, 255, 0.1254901961);
}
.carousel .carousel-indicators {
  all: unset;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5%;
  z-index: 2;
  display: flex;
  gap: 10px;
  flex-direction: column;
  align-items: center;
}
.carousel .carousel-indicators [data-bs-target] {
  all: unset;
  width: fit-content;
  color: #fff;
}
.carousel .carousel-indicators [data-bs-target].active {
  color: #b96911;
}
.carousel .carousel-indicators [data-bs-target]:hover {
  cursor: pointer;
}
.carousel .carousel-indicators .vr {
  height: 3rem;
  background-color: #fff;
  opacity: 1;
  align-self: unset;
}

/* F - General */
/* I - Effects */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* F - Effects */
/* I - Header */
header {
  background: #000000;
  background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.52) 100%);
  background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.52) 100%);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.52) 100%);
  position: fixed;
  width: 100vw;
  z-index: 2;
  transition: background-color 0.35s ease, border-bottom 0.35s ease, backdrop-filter 0.35s ease;
}
header.d-bg-primary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3019607843);
}
header .navbar-brand {
  max-width: 200px;
}
header .navbar-toggler {
  display: none;
}
header .nav-link {
  color: #fff;
}
header .nav-link:hover {
  color: #fff;
}
header .navbar-collapse {
  justify-content: flex-end;
}

/* F - Header */
/* I - Front page */
.home .hero {
  height: 90vh;
}
.home .sec-1 img {
  aspect-ratio: 3/4;
  background-color: #fff;
  width: 100%;
}
.home .sec-2 {
  background-color: #1f1513;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.home .sec-2 .overlay {
  opacity: 0.6;
}
.home .sec-2 .card {
  padding: 2rem;
  aspect-ratio: 3/4;
  border: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.home .sec-2 .card div {
  position: absolute;
  bottom: 0;
  width: calc(100% - 4rem);
}
.home .sec-2 .card div h3 {
  font-size: 1.5rem;
}
.home .sec-3 .card {
  padding: 2rem;
  gap: 10px;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  background-color: #3a2823;
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: start;
  height: 100%;
}
.home .sec-3 .card svg {
  color: #b96911;
  width: 40px;
  height: 40px;
}
.home .sec-4 #of-vertical-slider {
  height: 340px;
}
.home .sec-4 #of-vertical-slider .splide__arrow {
  background-color: #3a2823;
  height: 35px;
  width: 35px;
  border: 1px solid #fff;
  border-radius: 35px;
  transition-duration: 0.6s;
}
.home .sec-4 #of-vertical-slider .splide__arrow:hover {
  box-shadow: 0px 0rem 12px 8px rgba(255, 255, 255, 0.3137254902);
  background-color: rgba(255, 255, 255, 0.1254901961);
}
.home .sec-4 #of-vertical-slider .splide__arrow svg {
  fill: #fff;
}
.home .sec-4 #of-vertical-slider .splide__track {
  overflow: hidden;
}
.home .sec-4 #of-vertical-slider .splide__slide {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home .sec-4 #of-vertical-slider .card {
  background-color: #3a2823;
  border: 2px solid #b96911;
  border-radius: 10px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.home .sec-4 #of-vertical-slider .card span {
  font-family: "Goudy-regular-local";
  font-size: 1.8rem;
}
.home .sec-4 #of-vertical-slider .card span .value {
  color: #b96911;
  font-family: "Goudy-bold-local";
}
.home .sec-5 .border-sx {
  border-left: 1px solid #fff;
  padding: 0 0 0 2rem;
}
.home .sec-5 .border-dx {
  border-right: 1px solid #fff;
  padding: 0 2rem 0 0;
  text-align: right;
}
.home .sec-6 {
  background-color: #1f1513;
}
.home .sec-7 .fs-big {
  font-size: 3rem;
}
.home .sec-8 .d-bg-img {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.home .sec-8 .col {
  aspect-ratio: 5/3;
  justify-content: center;
}
.home .sec-8 .col hr {
  background-color: #b96911;
  height: 1px;
  opacity: 1;
  width: 20%;
}
.home .sec-10 .card {
  border: 2px solid #b96911;
  background-color: #3a2823;
  border-radius: 10px;
  padding: 2rem;
  height: 100%;
}
.home .sec-11 .border-sx {
  border-left: 1px solid #fff;
  padding: 0 0 0 2rem;
}
.home .sec-11 .border-dx {
  border-right: 1px solid #fff;
  padding: 0 2rem 0 0;
  text-align: right;
}

/* F - Front page */
/* I - Modulo di contatto */
#modulo-di-contatto .row {
  row-gap: 1rem;
}
#modulo-di-contatto .wpcf7-acceptance .wpcf7-list-item > label {
  display: flex;
  align-items: center;
}
#modulo-di-contatto .wpcf7-acceptance .wpcf7-list-item > label a {
  color: #b96911;
}
#modulo-di-contatto .wpcf7-acceptance .wpcf7-list-item > label #d-consenso {
  width: auto !important;
  margin-right: 0.5rem;
}
#modulo-di-contatto input {
  width: 100%;
}
#modulo-di-contatto textarea {
  width: 100%;
}
#modulo-di-contatto .submit-container {
  display: flex;
  justify-content: center;
}
#modulo-di-contatto .submit-container p {
  width: fit-content;
  display: flex;
  flex-direction: column;
}
#modulo-di-contatto .submit-container .wpcf7-submit:hover {
  color: #fff;
  cursor: pointer;
}

/* F - Modulo di contatto */
/* I - Footer */
footer a {
  color: #fff;
  text-decoration: none;
}
footer a:hover {
  color: #fff;
}

/* F - Footer */
/* I - Responsive */
/* I - XS - S */
@media (min-width: 100px) and (max-width: 767.5px) {
  .navbar .container-fluid {
    justify-content: center;
  }
  .home .sec {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .home .col {
    padding: 0 1rem;
  }
  .home .carousel .carousel-item div {
    width: 90%;
  }
  .home .carousel .carousel-item div .title {
    font-size: 2rem;
  }
  .home .carousel .carousel-indicators {
    display: none;
  }
  .home .carousel .controls-container {
    display: none;
  }
  .home .sec-5 .border-dx,
  .home .sec-5 .border-sx {
    padding: 0 1rem;
    border: 0;
  }
  .home .sec-7 .fs-big {
    font-size: 2rem;
  }
  .home .sec-8 .col:not(.d-bg-img) {
    aspect-ratio: unset;
  }
  .home .sec-11 .border-dx,
  .home .sec-11 .border-sx {
    padding: 0 1rem;
    border: 0;
    text-align: start;
  }
  .home .sec-11 .border-dx svg,
  .home .sec-11 .border-sx svg {
    display: none;
  }
}
/* F - XS - S */
/* I - MD */
@media (min-width: 767px) and (max-width: 991.5px) {
  .navbar .container-fluid {
    justify-content: center;
  }
  .home .sec {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .home .carousel .carousel-item div {
    width: 80%;
  }
}
/* F - MD */
/* I - LG */
/* F - LG */
/* I - XL */
/* F - LG */
/* I - XXL */
/* F - XXL */
/* F - Responsive */