/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Butcherman&family=Poppins:wght@400;500;600;700&display=swap");
@keyframes zoomInOutjj{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes tinySpiderMove-one{0%,to{transform:translateY(-100vh)}50%{transform:translateY(4vh)}}@keyframes tinySpiderMove-two{0%,to{transform:translateY(-100vh)}50%{transform:translateY(6vh)}}@keyframes spiderMove{0%,to{transform:translateY(-100vh)}50%{transform:translateY(12vh)}}@keyframes opacityAnimation2{0%,to{opacity:.05}50%{opacity:.15}}@keyframes rotateYPause{0%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}to{transform:rotateY(360deg)}}@keyframes swingIn{0%{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}@keyframes upAndDown{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes animate-star-1{0%,to{transform:scale(.7) rotate(-15deg);opacity:.2}50%{transform:scale(1) rotate(-15deg);opacity:1}}@keyframes animate-star-2{0%,to{transform:scale(1) rotate(1deg);opacity:1}50%{transform:scale(.7) rotate(1deg);opacity:.2}}@keyframes colorTransition{0%,to{border-color:#db6724;background-color:transparent}50%{border-color:#fff;background-color:transparent}}@keyframes swing{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes opacityChange{0%,to{opacity:.5}50%{opacity:.9}}@keyframes shake{0%,to{transform:translateY(0)}25%{transform:translateY(-5px)}75%{transform:translateY(5px)}}@keyframes fadeInOut{0%,to{opacity:.7}50%{opacity:1}}:root{--header-height:3.5rem;--first-color:#db6724;--first-color-alt:hsl(22, 72%, 46%);--white-color:#fff;--text-color:hsl(22, 4%, 75%);--text-color-light:hsl(22, 4%, 55%);--body-color:hsl(22, 8%, 6%);--container-color:hsl(22, 8%, 7%);--body-font:'Poppins', sans-serif;--second-font:'Creepster', cursive;--biggest-font-size:2.25rem;--h1-font-size:2.1rem;--h2-font-size:1.6rem;--h3-font-size:1.2rem;--h4-font-size:0.9rem;--normal-font-size:16px;--small-font-size:.85rem;--smaller-font-size:.79rem;--font-medium:500;--font-semi-bold:600;--font-bold:700;--z-tooltip:10;--z-fixed:100}.main__social{margin-top:2rem;column-gap:1.25rem}.scrollup{position:fixed;bottom:20px;left:97%;transform:translateX(-50%);display:none;background-color:rgba(255,108,3,.1);background-blend-mode:screen;color:#fff;padding:10px 15px;border-radius:50%;box-shadow:0 4px 8px rgba(0,0,0,.1);transition:all .3s ease;z-index:1000}.scrollup i{font-size:1.5rem}#scroll-up.show,.button-jj a{display:block}@media screen and (max-width:1024px){.scrollup{left:97%}}@media screen and (max-width:768px){.scrollup{left:95%}}@media screen and (max-width:480px){.scrollup{left:94%}}.button-jj{padding:10px 20px;border:2px solid #db6724;background-color:transparent;color:#db6724;font-size:12px;cursor:pointer;text-transform:capitalize;border-radius:10px;transition:all .3s ease;animation:zoomInOutjj 2s infinite}.button-jj:hover{border-color:#fff;color:#db6724;animation:none;transform:scale(1.1)}.button-jj a{color:inherit;text-align:center}@media screen and (min-width:1024px){:root{--biggest-font-size:3.5rem;--h1-font-size:2.25rem;--h2-font-size:1.5rem;--h3-font-size:1.25rem;--normal-font-size:1rem;--small-font-size:.875rem;--smaller-font-size:.813rem}}.burned-text{font-size:13px;font-weight:lighter;font-style:italic;white-space:nowrap;overflow:hidden;color:#28a745;animation:colorTransition 2s infinite;animation:typing 4s steps(40,end),colorTransition 8s infinite}*{box-sizing:border-box;padding:0;margin:0}html{scroll-behavior:smooth}body{font-family:var(--body-font);font-size:var(--normal-font-size);background-color:var(--body-color);color:var(--white-color)}ul{list-style:none}.button-jj a,a{text-decoration:none}img{max-width:100%;height:auto}.container{max-width:1024px;margin-inline:1.5rem}.grid{display:grid;gap:1.5rem}.tiny-spider{position:absolute;top:0;z-index:-1;opacity:.2;pointer-events:none}.tiny-spider-one{left:8%;height:40vh;animation:tinySpiderMove-one 8s ease-in 1s infinite normal forwards;pointer-events:none}.tiny-spider-two{right:8%;height:40vh;animation:tinySpiderMove-two 10s ease 2s infinite normal forwards;pointer-events:none}.spider{position:absolute;top:0;left:35%;z-index:-1;opacity:.2;height:50vh;animation:spiderMove 12s ease-in infinite normal forwards;pointer-events:none}.section{padding-block:5rem 1.5rem}.section__title{font-size:var(--h1-font-size);font-family:var(--second-font);font-weight:initial;line-height:130%;color:var(--first-color);text-align:center}.shape__small{left:60%;opacity:.3}.shape__big,.shape__small{position:absolute;background-color:var(--first-color);filter:blur(96px);z-index:-1;border-radius:50%}.shape__big,.shape__small{width:10vw;height:10vw;pointer-events:none}.shape__big{width:20vw;height:20vw;left:60%;opacity:.3}@media screen and (max-width:767px){.shape__small{width:15vw;height:15vw}.shape__big{width:25vw;height:25vw}}@media screen and (max-width:480px){.shape__small{width:20vw;height:20vw}.shape__big{width:30vw;height:30vw}}.cobweb{position:fixed;top:0;left:0;width:100%;height:100vh;display:flex;pointer-events:none;z-index:-2;animation:opacityAnimation2 2s infinite ease-in-out;background-size:cover;background-position:center}@media screen and (max-width:767px){.cobweb{background-size:contain}}@media screen and (max-width:480px){.cobweb{background-size:contain}}#scrollSpider{display:block;width:50px;height:auto}#scrollSpider img{width:100%;height:auto}@media (max-width:768px){#scrollSpider{width:40px}}@media (max-width:480px){#scrollSpider{width:30px}}.header{position:fixed;width:100%;background:0 0;top:0;left:0;z-index:10;transition:background .3s,box-shadow .3s}.header-hidden{transform:translateY(-150%);transition:transform .3s ease}.nav{position:relative;height:var(--header-height);display:flex;justify-content:space-between;align-items:center;top:20px;transition:top .3s}.nav.hidden{top:-var(--header-height)}.nav__logo img{width:70px;animation:rotateYPause 4s infinite;transform-style:preserve-3d}.nav__logo{perspective:1000px}.nav__close,.nav__logo,.nav__toggle{display:inline-flex;color:var(--white-color)}.nav__logo{align-items:center;column-gap:.5rem;font-weight:500;transition:color .3s}.nav__logo:hover{color:var(--first-color)}.nav__toggle{font-size:1.25rem;cursor:pointer;display:none}@media screen and (max-width:767px){.nav__toggle{display:inline-flex}.nav__menu{position:fixed;top:-100%;left:0;background-color:var(--body-color);width:100%;box-shadow:0 4px 8px rgba(6,5,5,.5);padding-block:3.5rem 3rem;border-radius:0 0 2rem 2rem;transition:top .4s}.nav__menu.show{top:0}}.nav__list{display:flex;flex-direction:column;text-align:center;row-gap:1.5rem}.nav__link{color:var(--white-color);font-family:var(--second-font);transition:color .4s}.nav__link:hover{color:var(--first-color)}.nav__close{position:absolute;top:1rem;right:1.5rem;font-size:1.5rem;cursor:pointer;display:none}@media screen and (max-width:767px){.nav__close{display:inline-flex}}.nav__img{width:180px;position:absolute;top:40%;left:1rem}.show-menu{top:0}.active-link{color:var(--first-color)}.intro{display:flex;justify-content:center;align-items:center;padding:1rem;text-align:center}.intro-main{max-width:95%;width:90%;padding:1rem;border-radius:8px;border:solid rgba(176,89,36,.2) 2px}@media (max-width:768px){.section__title{font-size:1.7rem}.intro__description{font-size:16px}.intro-main{padding:1rem}}@media (max-width:480px){.section__title{font-size:1.5rem}.intro__description{font-size:16px}.intro-main{padding:1rem}}.home{position:relative}.home__container{padding-top:3.5rem}.home__data{text-align:center}.home__title,.home__title span{font-size:var(--biggest-font-size)}.home__title{position:relative;line-height:140%;width:max-content;margin:0 auto .5rem}.home__title-img-1,.home__title-img-2{width:40px;position:absolute}.home__title span{display:block;font-family:var(--second-font);font-weight:initial;color:var(--first-color)}.home__title-img-1{top:-1rem;left:-.2rem;transform:rotate(-15deg);animation:animate-star-1 5s infinite ease-in-out;pointer-events:none}.home__title-img-2{bottom:2.75rem;right:-.5rem;transform:rotate(15deg);animation:animate-star-2 5s infinite ease-in-out;pointer-events:none}.home__description{margin:.7rem -1rem .5rem;padding:0 1.5rem;font-size:16px}.home__img{width:300px;justify-self:center;margin-top:1.5rem;animation:animate-star-2 5s infinite ease-in-out;pointer-events:none}.home__tree-1,.home__tree-2{width:120px;position:absolute;top:18rem;opacity:0;pointer-events:none;animation:swingIn 2s forwards,upAndDown 2s 2s infinite ease-in-out;background-color:transparent;z-index:-1}.home__tree-1{left:-1rem}.home__tree-2{right:-1rem}.home .shape__small{top:-3rem;left:0}.home .shape__big{bottom:5rem;right:-10rem}.button{border:solid #db6724 3px;border-radius:2rem;font-weight:400;font-size:medium;overflow:hidden;animation:colorTransition 4s infinite}.button:hover{color:#fff;border-color:#db6724;transform:scale(1.2)}.button,.category{position:relative}.category__container{padding-top:4rem;grid-template-columns:228px;justify-content:center;row-gap:6rem}.category__card{position:relative;margin:0-2rem;background-color:var(--container-color);border-radius:2rem;padding-left:5px;padding-right:5px;padding:5.5rem 3rem 2rem;box-shadow:0 4px 8px rgba(255,136,0,.2);text-align:center;transition:background .3s}.category__img{width:120px;position:absolute;inset:0;margin:0 auto;top:-3.5rem;transition:transform .3s;pointer-events:none}.category__title{font-weight:700;color:var(--first-color);font-size:larger;text-align:center;margin-bottom:.5rem}.category__description{font-size:16px;margin:1rem -2rem 1rem -2em}.category__star{width:40px;position:absolute;top:3.5rem;right:.5rem;transform:rotate(15deg);pointer-events:none}.category__card:hover .category__img{transform:translateY(-.5rem)}.category .shape__small{top:25rem;left:-1rem}.about{position:relative}.about__container{row-gap:3.5rem}.about__container .section__title{margin-bottom:1rem}.about__data{text-align:center}.about__description{margin:2rem;text-align:justify;font-size:16px}p{margin-bottom:2rem;font-size:16px}.about__img{width:300px;justify-self:center;pointer-events:none;animation:swing 5s infinite ease-in-out}.about .shape__small{top:2rem;right:-3rem}.about .shape__big{bottom:0;left:-1rem}.items{position:relative}.items__container{padding-top:2rem;grid-template-columns:repeat(2,1fr);justify-content:center;gap:4rem 1.5rem}.items__card{position:relative;background-color:var(--container-color);border-radius:1.5rem;padding:4rem 1.25rem 1.25rem;box-shadow:0 4px 8px rgba(255,140,0,.4);text-align:center}.items__img{width:100px;position:absolute;inset:0;top:-2rem;margin:0 auto;transition:transform .3s;pointer-events:none}.items__name{font-size:var(--normal-font-size);font-weight:var(--font-medium);margin-bottom:.25rem}.items__price{display:block;font-weight:var(--font-semi-bold);color:var(--first-color);margin-bottom:.5rem;animation:opacityChange 2s infinite}.connect__btn,.items__button{display:inline-flex;color:var(--white-color);padding:.25rem 1.5rem;border-radius:4rem;cursor:pointer;transition:background .3s;border:0;outline:0;margin-top:.5rem}.items__button{background-color:var(--first-color)}.connect__btn{font-style:italic;text-transform:capitalize;font-size:12px;font-weight:lighter}.connect__btn,.connect__btn.connected{background-color:#28a745}.items__button.mint-button{background-color:#db6724}.items__button.mint-button.disabled{background-color:#6c757d;cursor:not-allowed}.items__button i{font-size:1.25rem}.connect__btn:hover,.items__button:hover{background-color:#fff;color:#db6724}.items__card:hover .items__img{transform:translateY(-.5rem)}.items .shape__big{bottom:-8rem;right:-3rem}.party{position:relative;padding:1rem;margin-top:5rem}.party__container{row-gap:3rem}.party__container .section__title{margin-bottom:1rem;font-size:1.5rem;text-align:center}.party__data{text-align:center;margin-bottom:2rem}.party__description{margin-bottom:2rem;text-align:justify;font-size:16px}.play{position:relative;padding:1rem;margin-top:5rem}.play__container{max-width:1200px;margin:0 auto;text-align:center}.play__grid{display:flex;flex-direction:column;align-items:center;gap:2rem}.section__title{margin-bottom:2rem;font-size:1.5rem}.play__item{width:100%;display:flex;flex-direction:column;align-items:center}.play__img{max-width:100%;height:auto;border-radius:8px;margin-bottom:1rem;animation:shake 2s infinite,fadeInOut 2s infinite alternate}.button{display:inline-block;padding:.5rem 1rem;background-color:#ff5722;color:#fff;text-decoration:none;border-radius:4px;transition:background-color .3s}.button:hover{background-color:#e64a19}@media (min-width:768px){.play__grid{flex-direction:row;justify-content:center}.play__item{width:45%}}


/* Countdown Timer */

.countdown-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px; /* Space between countdown items */
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(255, 119, 0, 0.3); /* Optional shadow for better visibility */
}

.countdown-number {
  font-size: 1.4em;
  color: #db6724; /* Orange color for numbers */
}

.countdown-label {
  font-size: 0.7em;
  color: #ffffff;
  margin-top: 2px;
  text-transform:capitalize;
}

/* Responsive design */
@media (max-width: 768px) {
  .countdown-1 {
    flex-wrap: wrap;
    gap: 10px;
  }

  .countdown-item {
    width: auto;
  }
}

@media (max-width: 480px) {
  .countdown-item {
    width: auto;
  }
}

/* Party Images and Stars */
.party__images {
  position: relative;
  display: flex;
  margin-top: 7rem;
  justify-content: center; /* Center images */
  align-items: center;
}

.party__img {
  width: 100%; /* Make the image responsive */
  max-width: 400px; /* Set a maximum width */
  height: auto; /* Maintain aspect ratio */
  pointer-events: none; /* Ignore pointer events */
}

.party__star-1,
.party__star-2 {
  width: 30px; /* Adjusted width for smaller screens */
  position: absolute;
  transform: rotate(15deg);
  pointer-events: none; /* Ignore pointer events */
}

.party__star-1 {
  top: -1rem; /* Adjusted position for smaller screens */
  left:10rem;
  animation: animate-star-1 5s infinite ease-in-out;
  pointer-events: none; /* Ignore pointer events */
}

.party__star-2 {
  right: 2rem; /* Adjusted position for smaller screens */
  bottom: 15rem;
  animation: animate-star-2 5s infinite ease-in-out;
  pointer-events: none; /* Ignore pointer events */
}

/* Media Queries for Responsiveness */
@media screen and (max-width: 767px) {
  .party__container {
    row-gap: 2rem; /* Reduced gap for smaller screens */
  }

  .party__description {
    font-size:16px ; /* Adjusted font size for smaller screens */
    margin: 0 0.5rem; /* Reduced margin for smaller screens */
  }

  .countdown-timer {
    flex-direction: column; /* Stack countdown elements vertically on smaller screens */
    font-size: 1.25rem; /* Adjusted font size for smaller screens */
  }

  .party__img {
    max-width: 450px; /* Adjusted max-width for smaller screens */
  }

  .party__star-1,
  .party__star-2 {
    width: 70px; /* Adjusted width for smaller screens */
  }
}

@media screen and (max-width: 480px) {
  .party__container {
    row-gap: 1.5rem; /* Further reduced gap for very small screens */
  }

  .party__description {
    font-size:16px; /* Further adjusted font size for very small screens */
    margin: 0 0.25rem; /* Further reduced margin for very small screens */
  }

  .countdown-timer {
    padding: 0.5rem; /* Reduced padding for very small screens */
    font-size: 1rem; /* Further adjusted font size for very small screens */
    flex-direction: column; /* Stack countdown elements vertically on smaller screens */
  }

  .party__img {
    max-width: 300px; /* Adjusted max-width for very small screens */
  }

  .party__star-1,
  .party__star-2 {
    width: 60px; /* Further adjusted width for very small screens */
  }
}

.footer{position:relative;overflow:hidden}.footer__container{row-gap:4rem}.footer__logo{display:inline-flex;align-items:center;column-gap:.5rem;color:var(--first-color);font-weight:var(--font-medium);margin-bottom:1.25rem;transition:color .3s}.footer__logo img{width:20px;pointer-events:none}.footer__logo:hover{color:var(--first-color-alt)}.footer__description{font-size:var(--small-font-size)}.footer__content,.footer__links{display:grid;margin:0 0 0 2rem}.footer__content{grid-template-columns:repeat(2,max-content);gap:2.5rem 4.5rem}.footer__title{font-size:var(--h3-font-size);font-weight:var(--font-semi-bold);margin-bottom:1.5rem;text-align:center}.footer__links{row-gap:.75rem}.footer__link{color:var(--text-color);font-size:var(--small-font-size);transition:color .3s}.footer__link:hover{color:var(--first-color)}.footer__social{display:flex;column-gap:1.25rem}.footer__social-link{color:var(--first-color);font-size:1.25rem;transition:color .3s,transform .3s}.footer__social-link:hover{color:#db6724;transform:translateY(-.25rem)}.footer__tree-1,.footer__tree-2{width:150px;position:absolute}.footer__tree-1{top:4rem;background-color:transparent;right:-1.5rem}.footer__tree-2{left:1rem;background-color:transparent;bottom:-.5rem}.footer__copy{position:relative;display:block;margin-top:8rem;font-size:var(--smaller-font-size);text-align:center;color:var(--text-color-light)}.footer .shape__small{right:-7rem;top:15rem}.footer .shape__big{left:0;bottom:-1rem}::-webkit-scrollbar{width:.6rem;border-radius:.5rem;background-color:#1c1917}::-webkit-scrollbar-thumb{border-radius:.5rem;background-color:#292523}::-webkit-scrollbar-thumb:hover{background-color:#453e3b}.scrollup{position:fixed;right:1rem;bottom:-50%;color:var(--first-color);font-size:1.1rem;background-color:var(--container-color);box-shadow:0 4px 8px rgba(6,5,5,.6);padding:.45rem;border-radius:.35rem;display:inline-flex;z-index:var(--z-tooltip);transition:bottom .3s,transform .3s}.scrollup:hover{transform:translateY(-.25rem)}.show-scroll{bottom:3rem}@media screen and (max-width:340px){.container{margin-inline:1rem}.home__title{font-size:1.5rem}.home__tree-1{background-color:transparent;left:0}.home__tree-2{right:-4rem;background-color:transparent}.items__container{grid-template-columns:180px}.party{width:200px}.footer__content{gap:2.5rem}}@media screen and (min-width:576px){.about__container,.home__container,.party__container{grid-template-columns:.6fr;justify-content:center}.home__tree-1,.home__tree-2{background-color:transparent;width:200px}.items__container{grid-template-columns:repeat(2,200px)}.footer__content{grid-template-columns:repeat(3,max-content)}}@media screen and (min-width:767px){.section{padding-block:7rem 1.5rem}.section__title{margin-bottom:4rem}.nav{height:calc(var(--header-height) + 1.5rem)}.nav__close,.nav__img,.nav__toggle{display:none}.nav__list{flex-direction:row;column-gap:4rem}.category__container{grid-template-columns:repeat(2,228px);column-gap:4rem}.footer__content{grid-template-columns:repeat(4,max-content)}}@media screen and (min-width:1024px){.shape__big,.shape__small{filter:blur(132px);opacity:.5}.shape__small{width:350px;height:350px}.shape__big{width:450px;height:450px}.home__title-img-1,.home__title-img-2{width:60px;pointer-events:none}.home__title-img-2{bottom:5.75rem}.home__tree-1,.home__tree-2{width:300px;background-color:transparent;top:14rem}.home__img{width:500px;pointer-events:none}.category__container{grid-template-columns:repeat(3,254px)}.category__img{width:150px;pointer-events:none}.category__star{right:1rem;pointer-events:none}.category .shape__small{top:10rem;left:-1rem}.about__img{order:-1;width:500px;pointer-events:none}.about__container{padding-top:2rem;grid-template-columns:max-content .9fr;column-gap:7rem;align-items:center}.about .shape__big{bottom:-12rem}.about__data,.party__data{text-align:initial}.about__container .section__title,.party__container .section__title{text-align:initial;margin-bottom:1.5rem}.party__container{margin-bottom:2.5rem}.items__container{grid-template-columns:repeat(3,200px);gap:6rem 3.5rem}.items__card{padding:6rem 1rem 1.5rem}.items__img{width:130px;pointer-events:none}.items__name{font-size:var(--h3-font-size)}.items__button i{font-size:1.5rem}.items .shape__big{bottom:-12rem}.party__container{padding-top:5rem;grid-template-columns:.7fr max-content;column-gap:8rem;align-items:center}.party__img{width:400px;pointer-events:none}.party__star-1,.party__star-2{width:100px;top:-5rem;left:-1rem;pointer-events:none}.party__star-2{top:-3rem;left:10rem}.footer__container{grid-template-columns:repeat(2,max-content);justify-content:space-between}.footer__logo{font-size:var(--h3-font-size);margin-bottom:1.5rem}.footer__content{column-gap:5rem}.footer__link{font-size:var(--normal-font-size)}.footer__social{column-gap:1.5rem}.footer__social-link{font-size:1.5rem}.footer__copy{margin:10rem 0 4rem}.footer__tree-1,.footer__tree-2{width:250px;pointer-events:none}.footer__tree-1{top:initial;background-color:transparent;bottom:1.5rem;right:0}.footer__tree-2{bottom:-1.5rem;background-color:transparent}.footer .shape__big{bottom:-5rem}.scrollup{right:3rem}}@media screen and (min-width:1072px){.container{margin-inline:auto}}@media screen and (min-width:1248px){.home__tree-1,.home__tree-2{background-color:transparent;width:450px}.home__img{width:600px;margin-top:3rem}.footer__tree-2{left:1%;background-color:transparent}}@media screen and (min-width:2048px){.home{position:relative;max-width:1400px;overflow:hidden}.home__tree-1,.home__tree-2{top:5rem;background-color:transparent;pointer-events:none}.footer__tree-1,.footer__tree-2{pointer-events:none;width:300px;background-color:transparent}}.section6{padding:20px;width:100%;height:auto;text-align:center}.burning-mechanism{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}.burning-left,.burning-right{flex:1 1 45%;max-width:500px;box-sizing:border-box}.burning-left{text-align:left;display:flex;margin:10rem 3rem}.burning-right img{max-width:100%;margin:8rem -1rem;height:auto}#chart{background:0 0;height:400px;width:80%;margin:0 auto;color:#db6724}.group-list ul{padding-left:20px}.bgroup-burn,.bgroup-list1,.bgroup-list2,.bgroup-list3,.bgroup-list4,.bgroup-list5{display:none}.toggle-label{cursor:pointer;display:block;padding:10px;margin-bottom:5px;border-radius:5px;box-shadow:0 4px 6px rgba(219,103,36,.4)}.toggle-label:hover{background-color:#999;color:#fff;box-shadow:0 4px 6px rgba(219,103,36,.6)}#bgroup-1:checked~.bgroup-list1,#bgroup-2:checked~.bgroup-list2,#bgroup-3:checked~.bgroup-list3,#bgroup-4:checked~.bgroup-list4,#bgroup-5:checked~.bgroup-list5,#bgroup-now:checked~.bgroup-burn{display:block}span{font-size:1.1rem;color:#db6724;padding:10px}label{color:#c9c9c9}@media (max-width:768px){.burning-left,.burning-right{flex:1 1 100%}}.roadmap{text-align:justify;padding:50px 20px;background-color:transparent}.roadmap h2{font-size:2em;text-align:center;color:#db6724;font-family:"Creepster",sans-serif;margin-bottom:20px}.roadmap-container{display:flex;flex-wrap:wrap;justify-content:center}.roadmap-item{background-color:transparent;border-radius:10px;box-shadow:0 4px 8px rgba(255,119,0,.3);padding:20px;margin:10px;width:100%;max-width:300px;box-sizing:border-box}.roadmap-item h3{font-size:18px;font-weight:700;margin-bottom:10px;color:#db6724}.roadmap-item p{margin:10px 0;font-size:15px;color:#fff;position:relative;padding-left:25px}.roadmap-item p.accomplished::before,.roadmap-item p.waiting::before{content:"✔";color:#db6724;position:absolute;left:0;top:0;font-size:15px}.roadmap-item p.waiting::before{color:#783323}@media (min-width:600px){.roadmap-item{width:45%}}@media (min-width:900px){.roadmap-item{width:22%}}


/* Token Sale Section */
.token-sale-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.token-sale-container {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(255, 119, 0, 0.4);
  max-width: 500px;
  width: 100%;
  text-align: center;
}

.token-sale-container h1 {
  font-size: 22px;
  color: #db6724;
  margin-bottom: 20px;
}

.token-sale-container p {
  font-size: 16px;
  margin-bottom: 10px;
}

/* Contract Address */
.contract-address {
  margin-bottom: 20px;
}

.address-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.address-box input {
  width: 80%;
  border: none;
  background: none;
  font-size: 14px;
  color: #333;
  padding: 5px;
  outline: none;
}

.address-box button {
  width: 20%;
  padding: 8px;
  background-color: #ff7a00;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.address-box button:hover {
  background-color: #db6724;
}

/* Buy Instructions */
.buy-instructions p {
  text-align: left;
  font-size: 14px;
  margin: 5px 0;
}

/* Responsive Design */
@media (max-width: 480px) {
  .token-sale-container {
      padding: 20px;
  }

  .address-box input {
      width: 65%;
  }

  .address-box button {
      width: 30%;
  }
}



/* Contact Form Section */
.contact-form-section {
  background-color: transparent;
  padding: 40px 20px;
  display: flex;
  justify-content: center; /* Center align the form horizontally */
}

.contact-form-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color:rgb(255, 255, 255);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative; /* Ensure proper stacking */
  z-index: 1; /* Bring the form to the front */
}

.contact-form-container h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.contact-form {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
  text-align: left;
}

.contact-form input,
.contact-form textarea {
  font-size: 16px;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
}

.contact-form button {
  font-size: 16px;
  padding: 10px;
  background-color: #db6724;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: #783323;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .contact-form-container {
    padding: 15px;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 14px;
  }

  .contact-form button {
    font-size: 14px;
    padding: 8px;
  }
}



/* Game play start here */


ol, ul {
  list-style: none;
}

@keyframes opacityChange {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}

.gameheading {
  color: #FFF;
  font-size: 20px;
  margin-top: 10px;
  font-family: 'Creepster', sans-serif;
  text-align: center;
  text-transform: capitalize;
  margin-bottom: 40px;
  text-shadow: 1px 1px 30px #db6724;
  letter-spacing: 2px;
  animation: opacityChange 2s infinite;
}

.gameheading span {
  display: block;
  font-size: 80px;
}

/* Add margin to buttons */
#playgame, #claimScore {
  margin: 0 10px; /* Adjust the value as needed for spacing */
}

#game {
  margin: 0 auto;
  width: 360px;
  height: auto;
  min-height: 480px;
  border: 3px solid #783323;
  border-radius: 15px;
  border-radius: 10;
  padding: 20px 0 0;
  position: relative;
  
  @media (min-height: 800px) {
    min-height: 570px;
  }
  &:not(.in-game) {
    padding-bottom: 100px;
  }
  &:not(.in-game):after {
    content: "";
    width: 40px;
    height: 40px;
    background-image: url('');
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -45px;
  }
}

#game-target {
  width: 60px;
  height: 60px;
  border: 3px solid #999;
  border-radius: 15px;
  margin: 30px auto 10px;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
}

#game-main {
  width: 100%;
  height: auto;
  border: 3px solid #783323;
  border-radius: 15px;
  padding: 10px;
  &.clicked {
    .icon:not(.correct) {
      opacity: 0.2;
    }
  }
}

@keyframes points {
  0%   { top: -10px; opacity: 1;}
  100% { top: -30px; opacity: 0;}
}

.icon {
  width: 34px;
  height: 34px;
  margin: 10px;
  display: inline-block;
  cursor: pointer;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;

  transition: opacity 0.3s ease-in-out;

  &:before {
    position: absolute;
    top: -10px;
    color: #FFF;
    font-size: 24px;
    font-weight: 800;
    text-shadow: 1px 1px 5px #000;
    opacity: 0;
  }

  &.correct {
    &:before {
      content: "+1000";
      animation: points 0.8s;
    }
  }
  &.wrong {
    &:before {
      content: "-200";
      animation: points 0.8s;
    }
  }
}

#score {
  font-size: 10px;
  background-color: transparent; /* Transparent background */
  border: 2px solid #db6724; /* Solid border with 2px thickness and color */
  border-radius: 5px; /* Rounded corners */
  color: #FFF; /* Text color */
  display: inline-block;
  padding: 3px 0; /* Padding */
  width: 35%; /* Width */
  text-align: center; /* Center text alignment */
  position: absolute; /* Absolute positioning */
  top: 125px; /* Top position */
  left: 62%; /* Left position */
}

#counter {
  border: 1px solid #000;
  font-size: 13px;
  background-color: #FFF;
  color: #000;
  display: inline-block;
  padding: 7px 0;
  float: right;
  margin-top: -1px;
  position: absolute;
  top: 155px;
  right: 125px;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 50%;
}


.icon0 {
  background-image: url(../file_4);
}
.icon1 {
  background-image: url(../file_2);
}
.icon2 {
  background-image: url(../file_1);
}
.icon3 {
  background-image: url(../file);
}
.icon4 {
  background-image: url(../file_5);
}
.icon5 {
  background-image: url(../file_3);
}



button {
  background-color: #db6724;
  font-weight: bold;
  letter-spacing: 0.5px;
  padding: 12px 30px;
  border: 0;
  font-size: 12px;
  border-radius: 4px;
  text-transform: uppercase;
  outline: 0;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  &:hover {
    background-color: lighten(orange, 5);
  }
}

@keyframes countdown {
  0%   { font-size: 70px;opacity: 1;}
  100% { font-size: 300px;opacity: 0;}
}

.countdown {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.number {
  font-size: 20px;
  color: #db6724;
  font-weight: bold;
  &.active {
    animation: countdown 1s infinite;
  }
}

#startgame {
  margin-top: 105px;
  background-color: #db6724; /* Custom background color */
  color: #FFF; /* Text color */
  text-transform: capitalize;
  padding: 15px 30px; /* Increased padding */
  font-size: 11px; /* Larger font size */
  border-radius: 8px; /* Larger border radius */
  border: none; /* Remove default border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for a lifted effect */
  transition: background-color 0.3s, transform 0.2s; /* Smooth transitions */
}

#startgame:hover {
  background-color: #ffffff; /* Darker background color on hover */
  color: #db6724;
  transform: scale(1.05); /* Slightly scale up on hover */
}

.social-share {
  color: #FFF;
  margin-top: 20px;
  font-size: 15px;
  @media (min-height: 800px) {
    margin-top: 30px;
  }
  ul {
    text-align: center;
    margin-top: 11px;
    li {
      max-width: 25px;
      display: inline-block;
      margin: 0 8px;
      a {
        display: block;
        img {
          width: 25px;
          display: block;
        }
      }
    }
  }
}

.scored {
  color: #FFF;
  font-size: 16px;
  margin-top: 15px;
  margin-bottom: 10px;
  font-weight: 600;
  @media (min-height: 800px) {
    margin-top: 20px;
  }
}

.intro {
  text-align: center;
}

.congratsimg {
  display: block;
  max-width: 250px;
  margin: 0 auto;
  pointer-events: none; /* Ignore pointer events */
  @media (min-height: 800px) {
    max-width: 300px;
  }
}
/* GIF Styling */
#gameGif {
  position: fixed; /* Keeps the GIF in place */
  top: 0;
  left: 0;
  width: 100%; /* Make the GIF full width */
  height: auto; /* Maintain aspect ratio */
  opacity: 0.01;
  z-index: -3; /* Ensure it is behind other content */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
  #gameGif {
    width: 100%; /* Full width on smaller screens */
    height: auto; /* Maintain aspect ratio */
  }
}

@media (max-width: 480px) {
  #gameGif {
    width: 100%; /* Full width on very small screens */
    height: auto; /* Maintain aspect ratio */
  }
}