:root{
    --theme-color:linear-gradient(90deg, #4E10FF 0%, #AB17DF 100%);
    --yellow-color:#FEAD10;
    --p-color:#ffffff99;
    --bg-purpel:#AB17DF;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Rajdhani';
    background-color: #0C0324;
    color: white;
}
p{
    font-family: 'NunitoSans-VariableFont_YTLC,opsz,wdth,wght';
    font-size: 18px;
    color: var(--p-color);
}
a{
    text-decoration: none;
    font-size: 18px;
    color: white;
}
li{
    list-style: none;
}
h1{
    font-size: 82px;
    line-height: 80px;
}
h2{
    font-size: 75px;
}
.py{
    padding: 150px 0;
}
/* header */
header{
    background-color: transparent;
}
header .toggle{
    color: var(--bg-purpel);
}
header .header-join-btn a , .banner .banner-explore-btn , .story a , .collection a , .testimonial a , footer .subscribe-btn{
    background: var(--theme-color);
}
/* hover effect animation */
header .header-join-btn a:hover , .banner .banner-explore-btn:hover , .banner .banner-learn-more-btn:hover , .story a:hover , .collection a:hover , .testimonial a:hover , footer .subscribe-btn:hover{
    animation: bounce 1.5s infinite ease-in-out;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
header nav ul li a:hover , header nav ul li:nth-child(1) a {
    color: var(--bg-purpel) !important;
    border-bottom: 3px solid var(--bg-purpel);
    transition-duration: 0.5s;
}
header nav ul li a:hover i{
    color: var(--bg-purpel) !important;
    transition-duration: 0.5s;
}
header nav ul li:hover .submenu{
    display: block !important;
}
header .submenu{
    min-width: 200px;
    left: 15px;
}
header .submenu ul li a{
    color: var(--p-color) !important;
    border: none;
}
header nav .submenu li:nth-child(1) a{
    border: none;
    color: var(--p-color) !important;
}
header .submenu ul li:hover{
    background-color: #4E10FF !important;
    transition-duration: 0.5s;
}
header .submenu ul li:hover a{
    color: white !important;
    transition-duration: 0.5s;
    border: none;
}
/* banner */
.banner{
    background-image: url(../images/bg-hero-home.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 200px !important;
}
.banner h1 span span{
    width: 140px;
    height: 40px;
    background-color: var(--yellow-color);
    bottom: 10px;
    right: -10px;
    z-index: -1;
}
.banner .banner-learn-more-btn{
    border: 1px solid var(--p-color);
    color: var(--p-color);
}
.banner h5{
    font-size: 48px;
    margin-top: 100px;
}
.banner h6{
    font-size: 18px;
    color: var(--p-color);
}
.banner .banner-img{
    width: 455px;
    height: 500px;
    border: 3px solid;
    border-image: linear-gradient(90deg, #4E10FF 0%, #AB17DF 100%) 1;
    border-radius: 20px;
}
.banner img{
    bottom: 20px;
    right: 20px;
}
.banner .partners h5{
    font-size: 24px;
}
.banner .partners img{
    width: 170px;
    height: 41px;
    opacity: 0.3;
    transition-duration: 1s;
}
.banner .partners img:hover{
    opacity: 1;
    transition-duration: 1s;
}
/* story */
.story h5{
    font-size: 24px;
    background-color: rgba(0, 0, 0, 0.466);
    width: 100%;
}
.story h6 , .collection h6 , .roadmap h6 , .faq h6 , .team .team-title h6 , .testimonial .testimonial-title h6 , .product .product-title h6 , .blog .blog-title h6 , footer .footer-title h6{
    color: var(--yellow-color);
    font-size: 18px;
}
/* collection */
.collection , .roadmap , .faq  , .product{
    background-image: url(../images/bg-boxstar.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
}
.collection .collection-items , .roadmap .roadmap-item , .team- , .testimonial .testi-content , .product .product-item , .blog .blog-item{
    background-color: rgba(255, 255, 255, 0.038);
    cursor: pointer;
}
.collection .collection-items h5 , .team-content{
    background-color: rgba(0, 0, 0, 0.238);
}
/* roadmap */
.roadmap::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../images/elipse-4.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 500px;
    height: 500px;
}
.roadmap::before{
    content: '';
    position: absolute;
    background-image: url(../images/noise.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
}
.roadmap span{
    color: #4A445C;
}
.roadmap img{
    width: 333px;
    height: 565px;
}
/* faq */
.faq::after , footer .footer-bg::after {
    background-image: url(../images/elipse-5.png);
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 500px;
    height: 500px;
}
.faq .accordion-item, .faq .accordion-button, .faq .accordion-button:not(.collapsed), .faq .accordion-body {
    background-color: transparent !important;
    box-shadow: none;
    border: none;     
    color: inherit;   
    box-shadow: none;
}
.faq .accordion-button:focus {
    box-shadow: none !important;
    outline: none !important;
}
.faq .accordion-button{
    font-size: 24px;
}
.faq .accordion-button::after{
    color: white;
}
/* team */
.team::after{
     content: '';
    position: absolute;
    background-image: url(../images/elipse-bottom-right.png);
    top: 500px;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 500px;
    height: 500px;
}
.team .team-item .team-content h6 , .testimonial .testi-content h6 , .product .product-item h5 , .product .product-item h6 , .blog .blog-item h6{
    font-size: 18px;
}
.team .team-item .team-content p , .testimonial .testi-content .testi-user-paragraph , .blog .blog-item p{
    font-size: 14px;
}
.team .team-item .team-content a{
    padding: 3px 9px;
    background-color: var(--bg-purpel);
}
.team .team-item .team-content a:hover{
    color: var(--bg-purpel);
    background-color: white;
    transition-duration: 0.5s;
}
.team .team-item .team-content i{
    font-size: 14px;
}
/* testimonial */
.testimonial::after{
    content: '';
    position: absolute;
    background-image: url(../images/elipse-3.png);
    top: 0;
    right: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 500px;
    height: 500px;
    z-index: -1;
}
.testimonial .testi-img img{
    width: 190px;
    height: 190px;
}
.testimonial h4{
    font-size: 36px;
}
.testimonial .test-paragraph{
    font-size: 22px;
}
.testimonial .testi-user-img{
    width: 64px;
    height: 64px;
}
/* product */
.product .product-item h6{
    color: var(--p-color);
}
.product .product-item a{
    background-color: var(--bg-purpel);
}
/* blog */
.blog a{
    color: var(--bg-purpel);
}
/* footer */
footer .footer-bg{
    background: var(--theme-color) !important;
    z-index: 99;
}
footer .footer-bg::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-image: url(../images/noise-footer.png);
    z-index: -1;
}
footer .footer-title h4{
    font-size: 36px;
}
footer .footer-bg input{
    border: none;
    font-size: 18px;
    font-weight: 600;
}
footer .footer-bg input:focus{
    outline: none;
}
footer .footer-bg input::placeholder{
    font-weight:600;
    font-size: 18px;
}
footer .footer-about a:hover , footer .footer-nav a:hover{
    color: orange !important;
}
footer .footer-about a:hover{   
    transform: translateY(-10px);
    transition-duration: 0.5s;
}
footer .footer-nav h5{
    font-size: 24px;
}
footer .copiright p , footer .copiright ul li a{
    font-size: 14px;
}
footer .copiright ul li a{
    color: var(--p-color);
}
footer .copiright ul li a:hover{
    color: var(--bg-purpel) !important;
}

@media (max-width: 991.98px) {
    header nav {
        background-color: #000; /* Optional: dark background for mobile menu */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 99;
        padding: 1rem 0;
    }

    header nav ul {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 1rem;
    }

    header nav ul li {
        width: 100%;
        margin-bottom: 10px;
    }
}