:root{

  --header-height:100px;

}

/* ========================================
Hero
======================================== */

.hero{

  position:relative;

  overflow:hidden;
	
	margin-top:0;

}

/* ========================================
Common
======================================== */

.hero-template-center,
.hero-template-left,
.hero-template-right,
.hero-template-video{

height:100vh;
	
	

}

.hero-template-center .hero-inner,
.hero-template-left .hero-inner,
.hero-template-right .hero-inner,
.hero-template-video .hero-inner{

  height:100%;
  display:flex;
  align-items:center;

}


.hero-content{

  position:relative;

  z-index:10;

  max-width:700px;

}

/* ========================================
Logo
======================================== */

.hero-logo{

  margin-bottom:24px;

}

.hero-align-center .hero-logo img{

  display:block;

  margin:0 auto;

}

.hero-align-left .hero-logo img{

  display:block;

  margin-right:auto;

}

.hero-align-right .hero-logo img{

  display:block;

  margin-left:auto;

}

.hero-logo img{

  max-width:120px;

  width:100%;

  height:auto;

}

/* ========================================
Button
======================================== */

.hero-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-width:220px;

  height:56px;

  padding:0 32px;

  text-decoration:none;

}

/* ========================================
Background Image
======================================== */

.hero-image{

  position:absolute;

  inset:0;

  z-index:1;

  background-size:cover;

  background-position:center;

}

/* ========================================
Video
======================================== */

.hero-template-video{

  position:relative;

}

.hero-video{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;

  z-index:1;

}

.hero-template-video .hero-inner{

  position:relative;

  z-index:3;

  justify-content:center;

  padding:80px 40px;

}

/* ========================================
Center
======================================== */

.hero-template-center .hero-inner{

  justify-content:center;

  padding:80px 40px;

}

/* ========================================
Left
======================================== */

.hero-template-left .hero-inner{

  justify-content:flex-start;

  padding:80px;

}

/* ========================================
Right
======================================== */

.hero-template-right .hero-inner{

  justify-content:flex-end;

  padding:80px;

}

/* ========================================
Overlay Layout
======================================== */

.hero-template-center::before,
.hero-template-left::before,
.hero-template-right::before{

  content:'';

  position:absolute;

  inset:0;

  z-index:2;

}

.hero-template-center .hero-inner,
.hero-template-left .hero-inner,
.hero-template-right .hero-inner{

  position:relative;

  z-index:3;

}

/* ========================================
Text Align
======================================== */

.hero-align-left .hero-content{

  text-align:left;

}

.hero-align-center .hero-content{

  text-align:center;

}

.hero-align-right .hero-content{

  text-align:right;

}

/* ========================================
Card Hero
======================================== */

.hero-template-card_left,
.hero-template-card_center,
.hero-template-card_right{

  position:relative;

  height:100vh;

}


/* ========================================
Card Hero
======================================== */

.hero-template-card_left,
.hero-template-card_center,
.hero-template-card_right{

  position:relative;

height:100vh;
}

.hero-template-card_left .hero-card,
.hero-template-card_center .hero-card,
.hero-template-card_right .hero-card{

  position:absolute;

  z-index:10;

  width:560px;

  max-width:90%;

  padding:60px;

}

.hero-template-card_left .hero-card{

  left:8%;

  top:50%;

  transform:
    translateY(-50%);

}

.hero-template-card_center .hero-card{

  left:50%;

  top:50%;

  transform:
    translate(
      -50%,
      -50%
    );

}

.hero-template-card_right .hero-card{

  right:8%;

  top:50%;

  transform:
    translateY(-50%);

}

.hero-card{

  background:
    rgba(
      255,
      255,
      255,
      .82
    );

  backdrop-filter:
    blur(16px);

}

/* ========================================
Card Typography
======================================== */

.hero-template-card_left .hero-title,
.hero-template-card_center .hero-title,
.hero-template-card_right .hero-title{

  max-width:100%;

}

/* ========================================
Mobile
======================================== */
@media(max-width:768px){

  :root{

    --header-height:80px;

  }

  .hero-template-card_left,
  .hero-template-card_center,
  .hero-template-card_right{

	  height: 100svh;
	  min-height: 650px;
  }

  .hero-template-card_left .hero-card,
  .hero-template-card_center .hero-card,
  .hero-template-card_right .hero-card{

    left:16px;

    right:16px;

    width:auto;

    max-width:none;

    top:auto;

    bottom:16px;

    transform:none;

    padding:24px;

  }

  .hero-logo img{

    max-width:100px;

  }

}