/* 
Theme Name: Buttermilk Falls Theme
Text Domain: bmftheme
Version: 1.000000
Description: This is the Buttermilk Falls Theme.
Tags: 
Author: Jonathan Misayah
Author URI: https://jonmisayah.com
*/

/* https://colorhunt.co/palette/eeeeee2228314f8a8bfbd46d */
:root {
  --theme-color--primary: #4F8A8B;
  --theme-color--highlight: #FBD46D;
  --theme-color--secondary: #EEEEEE;
  --theme-color--tertiary: #222831;
  --navigation-icon-color: #FFFFFF;
  --transition-duration--fast: 0.3s;
  --transition-duration--slow: 0.6s;
  --header-color: #F8F9FA;
  --bg-img--primary: url('assets/images/1920/modern-box-home-diagonal.jpg');
  --bg-img--developers: url('assets/images/1920/modern-box-home-side-night.jpg');
  /*--bg-img--estate-buyers: url('assets/images/1920/mansion-side-entrance.jpg');*/
  --bg-img--estate-buyers: url('assets/images/others/sun-through-green-forest.jpg');
  --bg-img--explore: url('assets/images/others/buttermilk-falls-bridge.jpg');
  --bg-img--contact: url('assets/images/1920/mansion-entrance.jpg');
  --bg-img--forest: url('assets/images/others/light-in-forest.jpg');
}

/* Fonts */
.ff-lora {
  font-family: "Lora", serif;
}

.ff-montserrat {
  font-family: "Montserrat", sans-serif;
}

.ff-playfair-display {
  font-family: "Playfair Display", serif;
}

.ff-source-sans-3 {
  font-family: "Source Sans 3", sans-serif;
}

body {
  font-family: "Lora", sans-serif;
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

/* Styles */

/* Background Colors */
.bg-color--primary {
  background-color: var(--theme-color--primary) !important;
}

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

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

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

/* Text Colors */
.text-color--primary {
  color: var(--theme-color--primary) !important;
}

.text-color--highlight {
  color: var(--theme-color--primary) !important;
}

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

.text-color--tertiary {
  color: var(--theme-color--tertiary) !important;
}

#section-hero {
  height: 100vh;
}

.bg-img--hero {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #fff;
  /*background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--bg-img--primary);*/
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--bg-img--forest);
}
.bg-img--hero.bg-img--developers {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--bg-img--developers);

}
.bg-img--hero.bg-img--estate-buyers {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--bg-img--estate-buyers);

}
.bg-img--hero.bg-img--explore {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--bg-img--explore);

}
.bg-img--hero.bg-img--contact {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--bg-img--contact);

}

.theme-brand-title {
  color: #fff;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
}

@media (min-width:992px) {
  .navbar-brand.theme-brand-title, .offcanvas-title.theme-brand-title {
    font-size: 2.5rem !important; 
  }
}

.navbar-nav .nav-item .nav-link {
  letter-spacing: 2.3px;
  text-transform: uppercase;
}

/* Header & Nav with Effects */

.fixed-header {
  transition-property: background-color;
  transition-duration: var(--transition-duration--slow);
  transition-timing-function: ease;
}

.fixed-header.scrolled {
  background-color: black;
  background-color: var(--header-color);
}

.navbar {
  z-index: 1046;
  transition-property: transform;
  transition-duration: var(--transition-duration--slow);
  transition-timing-function: ease;
}

.navbar .nav-link {
  color: #fff;
  opacity: 0.85;
  transition-property: color, opacity;
  transition-duration: var(--transition-duration--fast);
  transition-timing-function: ease;
}

.fixed-header.scrolled .navbar-brand.theme-brand-title{
  color: #000;
}

.fixed-header.scrolled .navbar .nav-link {
  opacity: 0.6;
  color: #000;
}

.navbar .nav-link:hover, .fixed-header.scrolled .navbar .nav-link:hover {
  opacity: 1;
}

.navbar.hidden {
  transform: translateY(-100%);
}

.nav-btn {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}

@media (min-width:992px) {

  .nav-btn {
    display: none;
  }
  
  .nav--active .nav-btn {
    display: block;
  }
}

.nav--active .nav-btn {
  opacity: 0.5;
}

.navbar-brand.theme-brand-title {
  color: #fff;
  transition-property: color;
  transition-duration: var(--transition-duration--fast);
}

.nav--active .navbar-brand.theme-brand-title {
  color: #000;
}

.navigation-icon {
  display: inline-block;
  position: relative;
  width: 2rem;
  height: 2px;
  background-color: var(--navigation-icon-color);
  transition-property: background-color, transform;
  transition-duration: var(--transition-duration--fast);
}

.navigation-icon:before,
.navigation-icon:after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  background: var(--navigation-icon-color);
  transition-property: margin, transform, background-color;
  transition-duration: var(--transition-duration--fast);
}

.fixed-header.scrolled .navigation-icon, .fixed-header.scrolled .navigation-icon:before, .fixed-header.scrolled .navigation-icon:after {
  background-color: #000;
}

.navigation-icon:before {
  margin-top: -10px;
}

.navigation-icon:after {
  margin-top: 10px;
}

.nav--active .navigation-icon, .fixed-header.scrolled .nav--active .navigation-icon {
  background: rgba(0, 0, 0, 0.0);
}

.nav--active .navigation-icon:before {
  background-color: black;
  margin-top: 0;
  transform: rotate(45deg);
}

.nav--active .navigation-icon:after {
  background-color: black;
  margin-top: 0;
  transform: rotate(-45deg);
}

.offcanvas-body .nav-link:hover:after {
  transform: scaleX(1);
}

.offcanvas-body .nav-link:after {
  background-color: currentColor;
  width: 5rem;
  height: 2px;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 8px;
  transform: scaleX(0);
  transition: all .2s ease;
  position: absolute;
  content: '';
} 

.offcanvas-body .nav-link {
  font-size: 2rem;
  opacity: 0;
  visibility: none;
  transform: translateY(100%);
  transition-property: opacity, transform;
  transition-duration: var(--transition-duration--fast);
  transition-timing-function: ease;
}

.offcanvas .nav-item:nth-of-type(2) .nav-link {
  transition-delay: 0.1s, 0;
}

.offcanvas .nav-item:nth-of-type(3) .nav-link {
  transition-delay: 0.2s, 0;
}

.offcanvas .nav-item:nth-of-type(4) .nav-link {
  transition-delay: 0.3s, 0;
}

.offcanvas .nav-item:nth-of-type(5) .nav-link {
  transition-delay: 0.4s, 0;
}

.offcanvas.show .nav-item .nav-link {
  opacity: 0.6;
  visibility: visible;
  transform: translateY(0%);
}

.offcanvas.show .nav-item .nav-link:hover, .offcanvas.show .nav-item .nav-link:focus {
  transform: scale(1.2);
  opacity: 1;
}


/* Footer */
.footer-wrapper {
  background-color: var(--header-color);
}

/* Others */

.min-height-vh {
  min-height: 100vh;
}

@media (min-width:992px) {
  .slim-container {
    width: 1000px;
  }
  
  .slim-column {
    min-height: 600px;
  }
  
  .slim-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.card {
  transition: all ease var(--transition-duration--fast);
}

.card:hover {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
  /* transform: scale(1.1); */
  border: none;
}

.card, .card .card-body, .card img {
  border-radius:0;
}

.btn--theme-primary {
  color: #fff;
  background-color: var(--theme-color--primary);
}
.btn--theme-primary:hover {
  color: #000;
  background-color: var(--theme-color--secondary);

}

.bg-img--fixed {
  /*background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('assets/images/1920/mansion-living-room.jpg');*/
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('assets/images/others/bg-scroll.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 400px;
  overflow: hidden;
}

@media (min-width:992px) {
  .bg-img--fixed {
    background-attachment: fixed;
  }
}

.bg-img--fixed.bg-img--1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), var(--bg-img--primary);
}

.video-container, .image-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 800px;
}

.video-container:hover img {
  transform: scale(1.1);
  transition: transform var(--transition-duration--fast) ease;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000;
  opacity: 0.3;
  transition: opacity var(--transition-duration--fast) ease;
}
.video-container:hover .video-overlay {
  opacity: 0.6;
}

/* Play Icon */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.stroke-solid {
  stroke-dashoffset: 0;
  stroke-dasharray: 300;
  stroke-width: 4px;
  transition: stroke-dashoffset 1s ease, 
              opacity 1s ease;
}

.play-icon {
  transform: scale(.8);
  transform-origin: 50% 50%;
  transition: transform 200ms ease-out;
}

#play:hover .stroke-solid {
  opacity: 1;
  stroke-dashoffset: 300;
}
#play:hover .icon {
  transform: scale(.9);
}

#play {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
#play-btn {
  border: none;
  padding: 0;
}
/* /Play Icon */
.modal.show {
  background-color: rgba(0, 0, 0, 0.8);
}
.modal-dialog {
  width: 100%;
  max-width: 80%;
}

.btn-close {
  color: #fff;
  background-color: #fff;
}

/* Hero Arrow */
@keyframes jump {
  0%, 100% {
    transform: translateY(0); /* Start and end position */
  }
  50% {
    transform: translateY(-20px); /* Jump up */
  }
}

.jumping-anchor {
  color: #fff;
  position: absolute;
  bottom: 0;
  animation: jump 1s infinite; /* Animation */
  border: 1px solid transparent;
  transition-property: color, border;
  transition-duration: var(--transition-duration--fast);
  transition-timing-function: ease;
}

.jumping-anchor:hover {
  border: 1px solid #fff;
}

/* Navbar dropdown hover */
.dropdown-toggle::after {
  display: none;
}

.nav-link.dropdown-toggle:hover~.dropdown-menu, .dropdown-menu:hover {
  position: absolute;
  inset: 0px auto auto 0px;
  margin: 0px;
  transform: translate3d(0px, 40px, 0px);
  display: block;
}

.nav-link.dropdown-toggle:active .dropdown-item, .dropdown-item:active {
  background-color: var(--theme-color--primary);
}