@font-face {
	font-family: 'Inter-Regular';
	src: url('../fonts/Inter_24pt-Regular.ttf') format('truetype');
	font-display: swap;
}
@font-face {
	font-family: 'Inter-Medium';
	src: url('../fonts/Inter_24pt-Medium.ttf') format('truetype');
	font-display: swap;
}



body {
	background-color: #717171;	
	font-family: 'Inter-Regular';
}


main {
	background: linear-gradient(to bottom, #9F9A96 60%, #717171);
	height: 100dvh;
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.starline {
display: none;

}
nav.navmain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5vw;
  display: flex;
  align-items: center;
  padding: 0 3rem;
  justify-content: space-between;
  z-index: 999;
  transition: all 0.3s ease;

}
.navmain.frosted {
  backdrop-filter: blur(10px);
  background-color: rgb(109 109 109 / 20%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0%);
}
.fullscreen-menu {
  /* existing styles */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(rgb(64 64 64), #000000);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}
.fullscreen-menu::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(../images/bg-noise.png) no-repeat;
  background-size: cover;
  background-position: center;
opacity: 1;
pointer-events: none;
}
.fullscreen-menu.active {
  opacity: 1;
  pointer-events: all;
}
ul.mainul {
  list-style: none;
  padding-left: 0;
  font-family: 'Inter-Regular';
  font-size: 3vw;
  letter-spacing: -2px;
  text-align: center;
}
ul.mainul li:hover {
  color: #B0FF66;
}
/* close button */
.close-menu {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 3rem;
  cursor: pointer;
  color: white;
}

/* prevent scroll */
body.noscroll {
  overflow: hidden;
}

main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url(../images/bg-noise.png) no-repeat;
    background-size: cover;
    background-position: center;
	opacity: 0.4;
	pointer-events: none;
}
main::after {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url(../images/top-grid.png) no-repeat;
    background-size: contain;
    background-position: top;
    opacity: 1;
    pointer-events: none;
}

h1 {
    font-family: 'Inter-Regular';
    font-size: 5.9vw;
    text-align: center;
    height: 100%;
    text-transform: uppercase;
    letter-spacing: -2px;
    background: linear-gradient(100deg, #FFFFFF, #f5f8fc, #ebebeb);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

h6 {
	text-align: end;
    text-transform: uppercase;
    letter-spacing: -1px;
    font-size: 1.3vw;
	font-family: 'Inter-Regular';
	color: #fff;
}
.topgd {
	position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    right: 0;
    background: linear-gradient(to top, #717171, transparent);
    width: 100%;
    height: 10vw;

}
span.thegap {
    width: 9vw;
    display: inline-block;
	position: relative;
}
span.thegap::before {
    width: 100%;
    height: 9vw;
    content: "";
    background: url(../images/img-span.png);
    position: absolute;
    left: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    bottom: -13px;

}

.max-wd {
    max-width: 90%;
    padding: 4rem 1rem;
    margin: auto;
    width: 100%;
}
.max-wd2 {
    max-width: 90%;
    margin: auto;
    width: 100%;
    padding: 0 0;
}

span.ini-space {
	width: 9vw;
    display: inline-block;
}

h2 {
    font-family: 'Inter-Regular';
    font-size: 2.5vw;
    text-align: left;
    height: 100%;
    line-height: 1.25;
    letter-spacing: -1.5px;
    color: #fff;
}

.intro {
    max-width: 35ch;
    height: auto;
	margin-bottom: 3rem;
}

.about {
    display: flex;
    flex-direction: column;
}

span.neon {
	color: #B0FF66;
}

.subheader {
	display: inline-flex;
	gap: 1ch;
	font-family: 'Inter-Regular';
	color: #fff;
	text-transform: uppercase;
}

span.svimg {
    background: url(../images/Vector.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.5vw;
    background-position: center;
}

p {
    font-family: 'Inter-Regular';
    font-size: 1.3vw;
	color: #fff;
	line-height: 1.3;
}

p.intp {
	max-width: 41ch;
	height: auto;
}

.selectedwork {
	background-color: #424242;
}

.flx_layout {
    display: grid;
    grid-auto-flow: column;
    gap: 30px;
    align-items: start;
}
.layout_card {
    border-radius: 0;
    padding: 0;
    width: 100%;
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  
  .card-img {
    width: 7vw;
    height: 9vw;
    object-fit: contain;
  }
  
  .card-img-pt {
    position: absolute;
    bottom: 0;
    width: 19vw;
    height: 19vw;
    object-position: bottom;
    object-fit: contain;
  }
  
  .crd_bg {
    background: #2E2E2E;
    height: 16vw;
    width: 20vw;
    border-radius: 20px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .card-text {
    margin-top: 1rem;
  }
  
  .card-text h4 {
    margin: 0 0 10px;
    font-size: 1.4rem;
    font-family: 'Inter-Medium';
    letter-spacing: -1px;
    color: #fff;
  }
  
  .card-text p {
    font-size: 14px;
    line-height: 1.4;
    font-family: 'Inter-Regular';
  }
  
  /* Custom vertical offsets using align-self or margin */
  .card1 { align-self: start; margin-top:9rem; }
  .card2 { align-self: start; margin-top: 6rem; }
  .card3 { align-self: start; margin-top: 3rem; }
  .card4 { align-self: start; margin-bottom:0; }

  
.gallery {
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    overflow: visible;
    max-width: auto;
    width: 800vh;

  }
  
  .gallery .image {
    width: 30vw;
    filter: saturate(0);
    padding: 1rem;
    align-items: center;
    display: inline-flex;
    justify-content: center;
    transition: 0.3s ease-out;
    overflow: hidden;
    object-fit: cover;
  }
  
  .gallery .image:nth-child(2n) {
    width: 25vw;
    height: 77vh;
    object-fit: cover;
  }
  
  .gallery .image:hover {
    z-index: 99999999999 !important;
    filter: saturate(1);
  }
  
  .wrapper-gall {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .this_accordion {
    /* border-top: 1px solid #016681;
      border-bottom: 1px solid #016681; */
    border-left: 0;
    border-right: 0;
  }
  
  .this_accordion .tag .wrapper2 {
    position: relative;
    cursor: pointer;
    padding-right: 30px;
  }
  
  /* Arrow icon via ::after */
  .this_accordion .tag .wrapper2::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 20px;
    height: 20px;
    background-image: url('../images/arrow.svg');
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease-in-out;
  }
  
  /* Rotate arrow when open */
  .this_accordion .tag.open .wrapper2::after {
    transform: translateY(-50%) rotate(180deg);
  }
  
  .this_accordion p {
    margin-top: 0;
    margin-bottom: 0 !important;
    color: #fff;
    line-height: 1.4;
    font-family: 'Inter-Medium';
    font-size: 1.5vw;
  
  }
  
  
  .this_accordion:first-child {
    border-top: 2px solid transparent;
  }
  


  .this_accordion .tag .wrapper img {
    margin-left: 20px;
    z-index: 1;
    width: 16px;
    height: auto;
  }
  
  .this_accordion .tag {
    padding: 20px 0px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 2px solid #fff;
  }
  
  .this_accordion .plus {
    width: 24px;
    z-index: 2;
  }
  
  .this_accordion .minus {
    width: 24px;
    z-index: 2;
  }
  
  .this_accordion .tag .wrapper2 img.minus {
    display: none;
  }
  
  .this_accordion .tag .wrapper2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }
  
  .this_accordion .content {
    height: 0;
    overflow: hidden;
    transition: 0.3s;
    font-family: 'Inter-Medium';
    color: #fff;
    font-size: 2rem;
  }
  
  .this_accordion .tag {
    padding: 20px 0px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
  
  
  }
  
  ul.list_wrapper {
    font-family: 'Inter-Medium';
    list-style: none;
    padding-left: 0;
    color: #fff;


  }

  ul.list_wrapper li {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  hr:not([size]) {
    height: 1px;
    background: #e9e9e9;
}
  footer {
    padding: 1vw 2vw;
    font-family: 'Inter-Medium';
    background: linear-gradient(to top, #4f4f4f, #424242);
    font-size: 1rem;
}

.list-link:hover {
  color: #B0FF66;
}

@media (max-width:768px) { 
 h1 {
  font-size: 13vw;
  text-align: left;
 }
main h6 {
  text-align: left;
  letter-spacing: -1px;
  font-size: 3.3vw;
}
main {
  padding: 2rem;
  justify-content: normal;
}
main::after { 
  height: 36vh;
  background-size: cover;
  background-position: top center;
}
.img-th-span {
  width: 38vw;
  position: absolute;
  right: -28vw;
  top: 30vw;
}
.starline {
  position: absolute;
  top: 66%;
  left: 0;
  width: 83vw;
  display: block;

}
h2 {
  font-size: 6.8vw;
}
.subheader {
  font-size: 3vw;
}
.intro {
  max-width: 100%;
}
p {
  font-size: 1.05rem;
}
.panel {
  height: auto !important;
}
  /* Custom vertical offsets using align-self or margin */
  .card1 { align-self: start; margin-top:0; }
  .card2 { align-self: start; margin-top: 0; }
  .card3 { align-self: start; margin-top: 0; }
  .card4 { align-self: start; margin-bottom:0; }
  
  .flx_layout {
display: none;
}
.about {
  overflow: hidden;
}
.crd_bg {
  background: #2E2E2E;
  height: 51vw;
  width: 60vw;
}
.this_accordion p {
  font-size: 1.18rem;
}
ul.list_wrapper li {
  font-size: 1.6rem;
}
.card-text {
  margin-top: 1rem;
}
.layout_card {
  width: 60vw;
}
.card-img-pt {
  width: 57vw;
  height: 59vw;
}
.card-img {
  width: 24vw;
  height: 24vw;
  object-fit: contain;
}
.intro-carousel::after {
  content: "";
  position: absolute;
  right: -2px;
  width: 28vw;
  height: 100%;
  background: linear-gradient(to left, #727272, transparent);
  top: 0;
  pointer-events: none;
}
#part_b.max-wd2 {
max-width: 100%;
}
.gallery .image {
  width: 60vw;
}

.gallery .image:nth-child(2n) {
  width: 45vw;
}
footer p {
  font-size: 0.8rem;
}
nav.navmain {
  height: 22vw;
  padding: 0 1.5rem;
}
ul.mainul {
  font-size: 8vw;
}
}