@font-face {
    font-family: satoshi-l;
    src: url('../font/Satoshi-Light.otf') format('opentype');
}

@font-face {
    font-family: satoshi;
    src: url('../font/Satoshi-Regular.otf') format('opentype');
}

@font-face {
    font-family: satoshi-m;
    src: url('../font/Satoshi-Medium.otf') format('opentype');
}

@font-face {
    font-family: satoshi-b;
    src: url('../font/Satoshi-Bold.otf') format('opentype');
}

@font-face {
    font-family: satoshi-black;
    src: url('../font/Satoshi-Black.otf') format('opentype');
}

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smotthing: antialiased;
    font-family: satoshi, sans-serif;
}

html,
body {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* width */
::-webkit-scrollbar {
    width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #4A9EFF;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.navbar-toggler:focus,
.navbar-toggler,
.navbar-toggler:active,
.navbar-toggler .navbar-toggler-icon:focus,
.navbar-toggler-icon {
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}

body {
    background-color: #000000;
    color: #fff;
}

.title {
    font-weight: 900;
    font-size: 70px;
    line-height: 82%;
    letter-spacing: -0.03em;
    background: linear-gradient(0deg, #fff2a9 0%, #fff9fc 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: satoshi-black, sans-serif;
}

.para {
    font-weight: 400;
    font-size: 16px;
    line-height: 170%;
    color: #fff;
}

.small-para {
    font-weight: 400;
    font-size: 16px;
    line-height: 156%;
    color: #fff;
}

.heading {
    font-family: satoshi-b, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 112%;
    letter-spacing: -0.03em;
    color: #fff;
}

.upper-text {
    font-weight: 300;
    font-size: 22px;
    line-height: 258%;
    letter-spacing: -0.03em;
    color: #fff;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 60px;
    -webkit-backdrop-filter: blur(94.99476623535156px);
    backdrop-filter: blur(94.99476623535156px);
    background: rgba(255, 255, 255, 0.15);
    font-family: satoshi-b, sans-serif;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -0.03em;
    color: #fff;
    position: relative;
    border-radius: 0;
}

.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0px;
    padding: 1.5px;
    padding-left: 2.5px;
    background: linear-gradient(90deg, rgba(215, 215, 215, 0.44) 0%, #fff 100%);
    -webkit-mask:
        linear-gradient(#15056d 0 0) content-box,
        linear-gradient(#c90a0a 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.btn:hover {
    background-color: #fff;
    color: #000;
}

.btn-2 {
    font-family: satoshi-black, sans-serif;
    font-weight: 900;
    font-size: 20px;
    line-height: 474%;
    letter-spacing: -0.03em;
    color: #101010;
    background: #fff;
    width: 159px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-2:hover {
    background-color: #4A9EFF;
}

.card-heading {
    font-family: satoshi-black, sans-serif;
    font-weight: 900;
    font-size: 22px;
    line-height: 118%;
    letter-spacing: -0.03em;
    color: #fff;
}

.card-heading-small {
    font-family: satoshi-b, sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #fff;
}

.card-heading-small1 {
    font-family: satoshi-b, sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.03em;
    color: #d6d6d6;
}

.m-para {
    font-family: satoshi-m, sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.03em;
    color: #fff;
}

.ease { transition: all 0.5s ease; }
.effect:hover { transform: scale(0.90); }

.padding { padding: 100px 0; }

.offcanvas { width: 50vw !important; background-color: #1f1f1f; color: #fff; }
.offcanvas-header { justify-content: end; }

header nav {
    /* -webkit-backdrop-filter: blur(20px); */
    /* backdrop-filter: blur(20px); */
    /* background: rgba(255, 255, 255, 0.05); */
    border-radius: 100px;
    width: 0px;
    height: 0px;
    opacity: 0;
    padding-right: 32px;
    padding-left: 32px;
    margin-top: 26px;
    overflow: hidden;
    animation: nav 1s ease forwards;
}

header svg { cursor: pointer; opacity: 0; animation: nav_content 0.5s ease 1.8s forwards; }
header svg:hover { transform: scale(0.95); }
header svg:hover circle { fill: #4A9EFF; }
header svg:hover path { stroke: #000; }
header a { font-weight: 400; font-size: 20px; white-space: nowrap; opacity: 0; animation: nav_content 0.5s ease 1s forwards; }
header button { font-weight: 400; font-size: 20px; white-space: nowrap; opacity: 0; animation: nav_content 0.5s ease 1s forwards; border: none; color: white; cursor: pointer; }
header button.hamburger-menu { background: #2563EB !important; }
header .logo { opacity: 0; animation: nav_content 0.5s ease 1.5s forwards; }
header a:hover, header button:hover { color: #4A9EFF !important; transition: color 0.3s ease !important; }
nav a:hover, nav button:hover { color: #4A9EFF !important; transition: color 0.3s ease !important; }

@keyframes nav { 0% { transform: translateY(-100px); width: 0px; height: 0px; opacity: 0; } 100% { transform: translateY(0); width: 746px; height: 81px; opacity: 1; } }
@keyframes nav_content { 0% { opacity: 0; transform: translateY(-5px); } 100% { opacity: 1; transform: translateY(0); } }
section.banner { 
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  margin: 0;
  position: relative;
  background: none;
  width: 100%;
  overflow: visible; /* Changed to visible to allow image to extend */
}

.banner .container {
  height: auto; /* Changed to auto */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

.banner .relative {
  width: auto; /* Changed to auto */
  height: auto; /* Changed to auto */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}

.banner img {
  width: auto;
  height: 100vh; /* This will now work as expected */
  max-width: none; /* Changed from 100% to none */
  object-fit: contain;
  object-position: bottom;
  margin: 0;
  display: block;
}

/* Optional: Add media query for very large screens */
@media (min-width< 1920px) {
  .banner img {
    padding-top: 100px;
    height: 100vh; /* Even larger on big screens */
  }
}
section.about { background-image: url('../Images/about-banner.webp'); mix-blend-mode: luminosity; background-repeat: no-repeat;background-position: center; background-size: cover; }

section.metaverse .video-box { position: relative; width: 100%; height: 100%; overflow: hidden; }
section.metaverse video { width: 100%; height: 90vh; object-fit: cover; }
section.metaverse .size { width: 101vw; position: absolute; height: 91vh; }
section.metaverse .video-box .small-para:hover { color: #fff2a9; }
section.metaverse .top { transform: translateY(-200px); }

section.feature .card { background: #1f1f1f; padding: 20px; height: 100%; }
section.feature .card .img-box { margin-top: -68px; }
section.feature .row>div { margin-bottom: 60px }

section.music .card { background: #1b1b1b; padding: 15px; height: calc(100% + 60px); transition: all 0.5s ease; border: 1px solid transparent; }
section.music .card:hover { background: #2563EB; transform: scale(0.95); border: 1px solid #ededed; }
section.music .card:hover h4, section.music .card:hover p { color: #ffffff !important; }
section.music .card h4 { margin: 20px 0; height: 60px; }

.owl-theme .owl-nav { display: none; }
.owl-theme .owl-dots { margin-top: 20px; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background-color: #4A9EFF; }

section.recog ul li { display: flex; align-items: self-start; gap: 10px; border-bottom: 0.2px solid #4F4F4F; padding: 30px 0; }
section.recog ul li:last-child { border-bottom: 1px solid transparent; }
section.recog .row { background-color: #1B1B1B; }

section.news .card-img-overlay { top: auto; bottom: 20px; }
section.video .card { background-color: #1B1B1B; padding: 15px; height: 100%; }
section.video .card .small-para { height: 60px; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; }
section.video .card .d-flex.align-items-center { margin-top: 0 !important; padding-top: 0 !important; }

footer { background-color: #000; }
footer li { font-size: 16px; margin-bottom: 10px; }
footer iframe { width: 100%; height: 200px; }
footer .social a:hover { transform: scale(0.9); }

#dialog-content { max-width: 70%; }