@import url("Bankgthd/Bankgthd.css");
@import url("Concielian/Concielian.css");

:root {
  --white-color:                  #66ff00;
  --primary-color:                #66ff00;
  --secondary-color:              #66ff00;
  --section-bg-color:             #000;

  --body-font-family:             'Bankgthd', sans-serif;

  --p-font-size:                  28px;

  --copyright-font-size:          9px;

  --font-weight-light:            300;
  --font-weight-normal:           400;
  --font-weight-bold:             700;
}

body {
  background-color: #000;
  font color: #66ff00; 
}
h1 {
	font-family:"Concielian",sans sherif;
	font-size: 3.5vw;
	color:#FFF;
	text-shadow: 2px 2px 2px #000;
}
.fade-in-text {
  display: inline-block;
  font-family: "Bankgthd", sans-serif;
  font-size: 1.3vw;
  text-shadow: 2px 2px 2px #000;
  color: #66ff00;
  animation: fadeIn linear 5s;
  -webkit-animation: fadeIn linear 5s;
  -moz-animation: fadeIn linear 5s;
  -o-animation: fadeIn linear 5s;
  -ms-animation: fadeIn linear 5s;
}
.copyright {
	font-family:"Arial",sans sherif;
	font-size: 11px;
	color:#FFF;
}

/*---------------------------------------
  SECTION               
-----------------------------------------*/
.section-padding {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section-bg {
  background-color: #000;
}

.section-overlay {
  background-color: var(--dark-color);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

.section-overlay + .container {
  position: relative;
}



/*---------------------------------------
  VIDEO              
-----------------------------------------*/
.video-wrap {
  z-index: -100;
}

.custom-video {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}


/*---------------------------------------
  SITE HEADER              
-----------------------------------------*/
.site-header {
  background-color: #000;
  padding-top: 12px;
  padding-bottom: 12px;
}

.video-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1%;
  height: 1%;
}



/*---------------------------------------
  HERO        
-----------------------------------------*/
.hero-section {
  position: relative;
  overflow: hidden;
  padding-top: 100px;
  width: 100%;
  height: calc(100vh - 51px);
}

.hero-section small {
  color: var(--white-color);
  text-transform: uppercase;
}

.hero-section .section-overlay {
  z-index: 2;
  opacity: 0.45;
}

.hero-section .container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding-bottom: 50px;
}

.hero-section .container .row {
  width: 100%;
  height: 100%;
}


/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/
@media screen and (max-width: 991px) {
  h1 {
    font-family:"Concielian",sans sherif;
	font-size: 3.5vw;
	color:#FFF;
	text-shadow: 2px 2px 2px #000;
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 32px;
  }

  h4 {
    font-size: 28px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 18px;
  }

  .section-padding {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  
  .hero-section {
    padding-top: 150px;
  }

  

@media screen and (max-width: 767px) {
  .custom-btn {
    font-size: 14px;
    padding: 10px 20px;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-family:"Concielian",sans sherif;
	font-size: 3.5vw;
	color:#FFF;
	text-shadow: 2px 2px 2px #000;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 26px;
  }

  h4 {
    font-size: 22px;
  }

  h5 {
    font-size: 20px;
  }