@font-face {
    font-family: 'Benzin-ExtraBold';
    src: url('../fonts/Benzin-ExtraBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    background: linear-gradient(to bottom, #000000, #000000);
    color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Benzin-ExtraBold', sans-serif;
    color: #fff;
}

p,
li,
span,
a,small {
    color: #dcdcdc;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 121%;
    letter-spacing: 0.5px;

}

.gradient-text {
    background: linear-gradient(90deg, #FFFFFF 0%, #E29CFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.sidebar {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #fff;
    padding: 20px 0px;
    border-radius: 10px;
    box-shadow: 0px 4px 20px 0px #00000099;
}

.sidebar-1{
    background: #505050;
}
.sidebar-2{
    background: #E29CFF;
}


.sidebar-text {
    font-family: 'Benzin-ExtraBold', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-align: center;
}

.sidebar-img img {
    max-height: 120px;
    height: auto;
    width: auto;
    object-fit: contain;
    transform: rotate(180deg);
}

/* Custom styles for the navbar */

.custom-navbar {
    background-color: black;
    padding: 10px 20px;
}

/* Logo */
.custom-navbar .navbar-brand img {
    height: 40px;
}


/* Nav links */
.custom-navbar .nav-link {
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-size: 16px;
    margin: 0 10px;
    transition: color 0.3s ease;
}

/* Hover effect */
.custom-navbar .nav-link:hover {
    color: #9b59b6;
}

/* Desktop nav styling */
.custom-navbar .navbar-nav {
    border: 2px solid #9b59b6;
    border-radius: 20px;
    padding: 10px 15px;
}

.zindex-0{
    z-index: 0;
}

#buttons .btns{
    z-index: 99;
}

#buttons .btn-custom {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    background-color: #543F5D;
    color: #fff;
    padding: 14px 10px;
    border: 2px solid #8837A9;
    border-radius: 20px;
    min-width: 180px;
    cursor: pointer;
    
}

#buttons .btn-custom:hover {
    background-color: #A170B5;
}

/* Responsive spacing */
@media (max-width: 991.98px) {

    .custom-navbar .navbar-nav {
        border: none;
        padding: 10px 0;
    }

    .sidebar {
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
        background: transparent;
        color: #484848;
        padding: 0px 0px 30px 0px;
        border-radius: 10px;
        box-shadow: 0px 4px 20px 0px #00000099;
    }

    .sidebar-1, .sidebar-2 {
        background: transparent;
    }

    .custom-navbar .nav-link {
        margin: 5px 0;
        padding: 8px 12px;
    }
}

section{
    box-shadow: 40px 4px 20px 0px #00000099;
}

/* Hero Style */

#hero {
    margin-top: -200px;
}

#hero video{
    cursor: pointer;
}

section .main-content {
    padding-left: 40px;
}

section .hero-body {
    padding: 0px 60px 60px 60px;
    background: linear-gradient(180deg, #000000 35%, #505355 100%);
    border-radius: 12px;
    box-shadow: 0px 4px 20px 0px #00000099;
}

section .heading {
    color: #fff;
    font-size: clamp(1.5rem, 2vw + 1rem, 2.6rem);
    font-weight: bold;
}

section .sub-heading {
    font-size: clamp(1.5rem, 2vw + 1rem, 2.6rem);
    color: #fff;
}

section .hero-ball {
    animation: float 3s ease-in-out infinite;
    margin-bottom: -50px;
    margin-left: -40px;
}

@media (max-width: 768px) {
    #hero {
        margin-top: 0px;
    }
    section .hero-body {
        padding: 40px 0px;
        margin: 0px 5px;
    }
    section .main-content {
        padding: 0px 15px;
        text-align: center;
    }
    section .hero-ball {
        margin: 0 auto;

    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* NFT Cards Style */

#nft-cards {
    margin: 100px 0px;
}
@media (max-width: 768px){
    #nft-cards {
        margin: 0px;
    }
    .mob-left{
        text-align: left;
    }
}

/* Skill */

#skill {
    margin: 100px 0px;
}
@media (max-width: 768px){
    #skill {
        margin: 0px;
    }

}

#how-it-works {
    margin: 100px 0px;
}

#how-it-works .main-content{
    padding-left: 0px;
}

#how-it-works .heading{
    margin-left: 40px;
}

#how-it-works .box-1{
    background: linear-gradient(90deg, #685473 0%, #C49FD9 100%);
    border-radius: 0px 12px 12px 0px;
    box-shadow: 0px 4px 20px 0px #00000099;
    padding: 20px;
    
}

#how-it-works .box-2{
    background: #4E4E4E;
    border-radius: 0px 12px 12px 0px;
    box-shadow: 0px 4px 20px 0px #00000099;
    padding: 20px;
    
}

@media (max-width: 768px){
    #how-it-works {
        margin: 0px;
    }

    #how-it-works .main-content{
    padding-left: 15px;
}

    #how-it-works .heading{
        margin-left: 0px;
    }
    #how-it-works .box-1, #how-it-works .box-2{
        border-radius: 12px;
    }
    
}

/* Roadmap */

#roadmap {
    margin: 100px 0px;
}

.roadmap-container {
    background: linear-gradient(to right, #572E1B, #BD643B);
    border-radius: 12px;
    padding: 12px;
    /* margin: 0 auto; */
    box-shadow: 0px 4px 20px 0px #00000099;
  }

  .roadmap-inner {
    background-color: #00563F;
    border-radius: 12px;
    color: white;
  }

  .roadmap-inner .box-1,  .roadmap-inner .box-2,  .roadmap-inner .box-3,  .roadmap-inner .box-4{
    padding: 40px 50px;
  }

  #roadmap ul{
    padding-left: 15px;
  }

  #roadmap ul li{
    font-size: 14px;
    padding-bottom: 5px;
  }

  #roadmap .roadmap-line{
    max-width: 90%;
  }

  @media (max-width: 768px){
    #roadmap {
        margin: 0px;
        margin-bottom: 60px;
    }

    #roadmap .hero-body{
        padding: 40px 10px;
    }

    .roadmap-inner .box-1,  .roadmap-inner .box-2,  .roadmap-inner .box-3,  .roadmap-inner .box-4{
        padding: 10px 10px 10px 40px ;
      }
      #roadmap .roadmap-mob-line{
        position: absolute;
        max-height: 90%;
        left: 20px;
        top: 5%;        

      }
}

/* Footer */

.footer {
    background: linear-gradient(to bottom, #3C4040, #000000);
    border-top: 1px solid #8837A9;
  }
  
  .footer .social a img{
    max-width: 100px;
  }

  .footer small{
    font-size: 12px;
  }