body {
    font-family: "Jost", sans-serif;
    font-weight:300;
    font-style: normal;
    color:#000;
}
body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.9);
}
/* Add a thumb */
body::-webkit-scrollbar-thumb {background: rgba(250, 250, 250, 0.5);}
body, html {
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
}
h1{font-family: "Jost", sans-serif;font-weight:300;font-size:3em;}
h2{font-family: "Jost", sans-serif;font-weight:300;font-size: 2em;}
h3{font-family: "Jost", sans-serif;font-weight:300;font-size: 1.7em; }
h4{font-family: "Jost", sans-serif;font-weight:300;font-size: 1.4em; text-transform:uppercase;}
h5{font-family: "Jost", sans-serif;font-weight:300;font-size: 1.1em;}
a{
  color:#000;
  text-decoration:none;
    font-weight:400;
  letter-spacing: 0.5px;
}
a:hover{
  color:#31eaea;
  text-decoration:none;
}
p{
  font-size:.9rem;
  letter-spacing: 0.5px;
  font-weight:300;
}
ul{list-style: none; padding-inline-start:0;}
small{font-weight:300;}
/* BGD */
.bgd img{
    height:100%;
    width:100%;
    z-index:-258;
    position:fixed;
    top:0;
    left:0;
}
/* Nav Bar */
nav {
    height: 80px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 300;
}
.logo{
    margin:1em;
    padding:.2rem .4rem .2rem;
    background: #fff;
    z-index:500;
    text-align: center;
    display: flex;
}
.logo img,.logo h5{
    display: inline-block;
    align-self: flex-end;
    float:left;
}
.logo img{
    width:2.5rem;
}
.logo h5{
    font-weight:400;
    margin:0 0 0 10px;
}
.menu-line{
    background-color:#fff;
    width: fit-content;
    list-style:none; 
    position:fixed;
    top: 0;
    right: 0;
    margin: 1em;
}
.menu-line li{
  list-style: none;
  font-weight:400;
  float:left;
  padding:.2rem .4rem .2rem;
  cursor: pointer;
}
.menu-line a{
 font-size:1rem;
}
#sub-menu-line{
  background-color:#fff;
  padding:15px;
  position:absolute;
}
#sub-menu-line li{
  clear:both;
  margin:0;
  padding:0;
}
/* PROJECT PAGE*/
.project{
  margin:7em auto 7em;
  max-width:800px;
}
.project .about-text{
  margin:auto;
}
.project-title h2{
    margin: 1em auto 2em;
    width: 100%;
    text-align:center;
    font-size:2em;
    font-weight:300;
}
.video-wrap {
  width: 100%;
  max-width: 711px;
  margin: 2em auto;
  aspect-ratio: 16/9;
}
.video-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
}
.gallery-outer {
  position: relative;
}
.gallery {
  display: flex;
  gap: 4px;
  padding: 2em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  cursor: grab;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery img {
  height: 40vh;
  width: auto;
  flex-shrink: 0;
  cursor: zoom-in;
  display: block;
}
.scroll-hint {
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
    right: 1em;
  bottom: 3em;
  top: auto;
  transform: none;
}
.scroll-hint.hidden {
  opacity: 0;
  pointer-events: none;
}
.scroll-hint svg { width: 52px; height: 12px; }
.lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.95);
  z-index: 9998;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lb-overlay.open { display: flex; }
.lb-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}
.lb-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  color: #000;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0.6;
}
.lb-close:hover { opacity: 1; }
.series-text{
    color:#A9A9A9;
}
/* NEWS GALLERY */
.portfolio{
    margin-top:3em;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content:center;
}
.portfolio .portfolio-item {
    line-height: 150%;
    width: calc((100% - 5em) / 6);
    cursor: pointer;
    overflow: hidden;
}
.portfolio-item img {
    width: 100%;
    height:100%;
    overflow: hidden;
}
.portfolio-item .thumb {
    position: relative;
    outline:2px solid #fff;
}
.portfolio .portfolio-item h1 {
    background-color: #fff;
    font-size: 10px;
    color: #000;
    padding: 5px;
    position: absolute;
    bottom:-10px;
    z-index:107;
}
.portfolio .portfolio-item  span{
    color: #a7afb2;
}
.portfolio-item img:hover{
   transform:scale(1.1);
   -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out; 
}
.news .portfolio-item{
   padding:2px; 
}
/* ABOUT */
.about-image {
    max-width:200px;
    max-height:200px;
    margin:100px 40px 50px;
    float:right;
}
.about-text {
    font-weight:400;
    max-width:700px;
}
.about-text small{
     width: 100%;
   display: inline-block;
   clear: both;
}
.about-text, .about-links{
    margin-left:40px;
    clear:right;
}
.about h3{
    font-size:1.5em;
    line-height:1.5;
    font-weight:300;
}
.vertical-bar{
    color:#31eaea;
    font-weight:700;
}
.about{
    margin:7em 10px 3em;
}
.project .about-text {
    margin:2em;
}
.project-title h2{
    margin-top:3em; 
}
/* INDEX PAGE */
.worksList{
    margin:100px 0 4em 1em;
}
.worksList p{
    margin-bottom:.3rem;
}
/* main image on hover */
#cursor-preview {
  position: fixed;
  pointer-events: none; 
  display: none;
  z-index: 9999;
  transform: translate(50px, -50%); 
}
#cursor-preview img {
  width: 300px;
  height: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
@media (max-width: 530px) {
.portfolio .portfolio-item {
    width: 100%;
}
.menu-line{
    margin:0;
    padding:0;
    top:3em;
    left:1em;
}
}