/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/* HOMEPAGE */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
* {
  box-sizing: border-box;
}
.custom-homepage {
  display: flex;
  height: 100vh;
  margin: 0;
  padding: 0;
  gap: 0;
}
.column {
  flex: 1 1 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: flex-basis 0.4s cubic-bezier(.77,0,.175,1), background 0.3s;
  background: #f5f5f5;
  position: relative;
  overflow: hidden;
  margin: 0;
  border: none;
}
.bg-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}
.column-content {
  text-align: left;
  position: relative;
  z-index: 2;
}
.column h2 {
  margin: 0;
  font-size: 2em;
}
.description {
  margin-top: 1em;
  opacity: 0;
  width:80%;
  transition: opacity 0.3s;
  position: absolute;
  background: #111;
  color: #fff;
  padding: 2%;
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
  z-index: 3;
}
.haze {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
	z-index:2;
}
.haze-left{
	background-color: white;
	opacity:0.3;
}
.haze-center{
	background-color: white;
	opacity:0.3;
}
.haze-right{
	background-color: white;
	opacity:0.3;
}
.column:hover .haze{
	transition:0.3;
	opacity:0;
}
.column:hover {
  flex-basis: 50vw;
  background: #e0e0e0;
  z-index: 2;
}
.column:hover .description {
  opacity: 1;
  pointer-events: auto;
  top: 80%; /* adjust as needed for your design */
}
@media (max-width: 900px) {
  .custom-homepage {
    flex-direction: column;
  }
  .column {
    flex-basis: 33.33vh;
  }
  .column:hover {
    flex-basis: 50vh;
  }
}


/* CUSTOM FONTS */
@font-face {
    font-family: 'Alpaca Scarlett';
    src: url("/wp-content/themes/salient-child/fonts/Alpaca_Scarlett.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}