*{
    padding: 0;
    margin: 0;
  }
  body{
    background: #1E1D2E;
    color: white;
  }
  section {
    overflow: hidden;
  }
  .header-container {
     display: flex;
     justify-content: space-around;
     background-color: #1F1E33;
     padding: 15px;
  }
  .Mobileheader{
     display: none;
  }
  #menuBtn , #cancelBTn{
  display: none;
  border:none;
     padding: 5px;
     border-radius: 10px;
     background-color: transparent;
     outline: none;
     font-size: medium;
     font-weight: bold;
     text-transform: capitalize;
      text-decoration: none;
      color: white;
      letter-spacing: 2px;
  }
  .logoText{
     font-size: xx-large;
     font-weight: bolder;
     font-family: Arial, Helvetica, sans-serif;
     letter-spacing: 2px;
     text-transform: capitalize;
     padding: 5px;
     color: white;
  }
  .PC-view{
     display: flex;
     padding-top: 9px;
  }
  li{
     margin: 8px;
     list-style: none;
  }
  a{
     font-size: medium;
     font-weight: bold;
     text-transform: capitalize;
      text-decoration: none;
      color: white;
      letter-spacing: 2px;
  }
  .buttonContainer{
     margin-top: 10px;
  }
  :where(#signUp,#logIN){
     margin: 10px;
     border:none;
     padding: 5px;
     border-radius: 10px;
     background-color: transparent;
     outline: none;
     font-size: medium;
     font-weight: bold;
     text-transform: capitalize;
      text-decoration: none;
      color: white;
      letter-spacing: 2px;
  }
  #exploreText{
     color: green;
     text-align: center;
     font-size: 4rem;
     background: linear-gradient(45deg , #CBA5F4 , #B44CF3 );
     background-clip: text;
     -webkit-text-fill-color: transparent;
     padding-top: 20px;
  }
  #spn1{
     color: red;
     display: block;
  }
  #diveText{
     text-align: center;
     font-size: medium;
     font-weight: 200;
     padding-top: 15px;
     background: #F4F4F4CC;
     background-clip: text;
     -webkit-text-fill-color: transparent;
  }
  .overlappingContainer{
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 30px;
     margin-right: 50px;
  }
  .ExtrabuttonContainer{
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 20px;
  }
  :where(#createBTn,#exploreBtn){
     margin: 10px;
     width: 150px;
     border:1.5px solid;
     padding: 5px;
     border-radius: 10px;
     background-color:transparent;
     outline: none;
     font-size: medium;
     font-weight: 100;
     text-transform: capitalize;
      text-decoration: none;
      color: white;
      letter-spacing: 2px;
  }
  :where(#createBTn:hover,#exploreBtn:hover){
     background-image:  linear-gradient(179.16deg, #8624EE 0.72%, #B44CF3 240.84%);
     transition: .5s all ease-in;
     transition-timing-function: ease-in-out;
  }
  .textContainer{
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px;
  
  }
  .numbes {
      padding: 15px;
      margin: 20px;
      text-align: center;
      font-size: 5rem;
      font-family:sans-serif;
  }
  #numtext{
     display: block;
     font-size: medium;
     text-transform: capitalize;
  }
  .nftComponents{
     display: flex;
     justify-content: space-evenly;
     margin: 30px;
  }
  .compo1{
      width: 250px;
      margin: 20px;
  }
  .compotext {
   margin: 20px;
   text-align: center;
   font-weight: bold;
   font-size: 1.5rem;
   text-transform: capitalize;
  }
  .compotext2 {
     margin: 20px;
     text-align: center;
     letter-spacing: 1.5px;
     line-height: 30px;
    }
    .createNft{
      font-size: 2rem;
      font-weight: bolder;
      padding: 20px;
      text-transform: capitalize;
    }
    .choiceContainer{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      margin: 8px;
    }
    #choice {
     padding: 5px;
     height: 33px;
     background: #2A2444; 
     color: white;
     text-transform: capitalize;
     outline: none;
     border-radius: 5px;
    }
    .cartoonDiv{
     display: flex;
     margin-top: 30px;
    }
    .cartoondiv1 ,  .cartoondiv2 ,.cartoondiv3 ,.cartoondiv4{
      font-size: larg;
      font-weight: bold;
      margin: 40px;
      width: 250px;
      padding: 20px;
      text-transform: capitalize;
      background: #2D1C3C;
      border-radius: 10px;
      perspective: 150rem;
    }
    #cart1{
      height: 200px;
      width: 200px;
    }
    .nftPrice{
     padding-top: 10px;
    }
  .nfttext{
      display: flex;
      justify-content: space-between;
  }
  #trend{
     font-weight: bold;
   font-size: 2rem;
   text-transform: capitalize;
   padding: 10px;
  }
  
  .trendingBtn{
     display: flex;
     justify-content: center;
     align-items: center;
  }
  :where(.today ,.thismonth){
     margin: 10px;
     width: 100px;
     border:1.5px solid;
     padding: 5px;
     border-radius: 10px;
     outline: none;
     font-size: medium;
     font-weight: 100;
     text-transform: capitalize;
      text-decoration: none;
      color: white;
      background-color: #1F1E33;
  }
  #red {
     color: red;
  }
  table{
     border: none;
     color: white;
     text-transform: capitalize;
     display: flex;
     justify-content: center;
     text-align: center;
  }
  th{
      font-size: 1rem;
      padding: 10px;
      background-color: #2D1C3C;
      border:none;
      width: 150px;
  }
  td {
     font-size: 1rem;
     padding: 10px;
     border: none;
     width: 150px;
  }
  .accordion{
   margin-top: 30px;
  }
  .accordion .contentBox{
     position: relative;
     margin: 10px 20px;
  }
  .accordion .contentBox .label {
  position: relative;
  padding: 10px;
  background-color: #373466;
  color: #fff;
  font-weight: bolder;
  }
  .accordion .contentBox .label::before{
  content: "+"; 
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  }
  .accordion .contentBox.active .label::before{ 
     content: "-";
  }
  .accordion .contentBox .content {
      position: relative; 
      overflow: hidden;
      transition: 0.5s;
      height: 0;
      overflow-y: auto; 
      color: white;
      line-height: 30px;
  }
  .accordion .contentBox.active .content{
  height: 150px;
  padding: 10px;
  }
  .createContainer{
      background-color:  rgba(45, 28, 60, 1);
      display: flex;
      justify-content: center;
       margin-top: 40px;
       border-radius: 20px;
  }
  .createContainer .createTExt{
      text-align: center;
      padding: 30px;
      text-transform:capitalize;
      font-weight: bolder;
      font-family: sans-serif;
      font-size: 2.5rem;
  
  }
  .createContainer #create {
    margin-left: 450px;
    width: 150px;
    border-radius: 10px;
    padding: 5px;
    font-size: 1rem;
    border: none;
    margin-bottom: 30px;
  }
  .footer{
      display: flex;
      justify-content: space-around;
      margin-top: 30px;
      padding: 30px;
  }
  .seconFOoterDiv{
      display: flex;
      justify-content: space-between;
  }
  .ftinfo{
     padding: 30px;
  }
  .iconFooter{
      margin-top: 50px;
      padding: 10px;
  }
  .fa-facebook , .fa-instagram , .fa-github , .fa-twitter {
      margin: 10px;
  }
  .fa-twitter:hover , .fa-facebook:hover{
     background-clip: image;
     -webkit-text-fill-color:#1DA1F2;
     text-shadow: 0px 10px 5px 5px  black;
     transition-duration: .2s;
     transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
     transition-property:all;
     transform: translateY(-20px);
  }
  .fa-instagram:hover{
     background-clip: image;
     -webkit-text-fill-color:(rgb(255,223,158) , rgb(255,194,115) ,rgb(229,105,105), rgb(193,85,139) , rgb(138,73,161));
     text-shadow: 0px 10px 5px 5px  black;
     transition-duration: .2s;
     transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
     transition-property:all;
    transform: translateY(-10px);
  }
  .fa-github:hover{
     background-clip: image;
     -webkit-text-fill-color:black;
     text-shadow: 0px 10px 5px 5px  black;
     transition-duration: .2s;
     transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
     transition-property:all;
    transform: translateY(-10px);
  }
  #footerTExt{
     font-size: 1.5rem;
     font-weight: bolder;
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
     font-size: 2rem;
     text-transform: capitalize;
  }
  #headerfooter2{
     font-size: 1.5rem;
     font-weight: bolder;
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
     font-size: 1.5rem;
     text-transform: capitalize;
  }
  .inner{
      margin-top: 10px;
  }
  #discoverTEXT{
    padding: 20px;
      font-size: medium;
     text-transform: capitalize;
  }
  @media only screen and (max-width:768px){
    .Mobileheader {
       display: none;
       background: rgb(2,0,36);
       /* background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); */
       box-shadow:2px 2px 2px -3px black;
       color: black;
       position: absolute;
       width: 100vw; 
       animation-name: slidefromTop;
       animation-duration: 5s;
       animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    }
    @keyframes slidefromTop {
       0% { transform: translateY(-50px);} 
    }
    .PC-view , .buttonContainer{
       display: none;
    }
    .mobile-UL{
       display: grid;
        grid-template-columns: repeat(3 , 1fr);  
    }
    #menuBtn , #cancelBTn{
       display: block;
    }
    li {
       color: black;
       padding: 5px;
    }
    a:hover{
        background-color:white;
        transition:cubic-bezier(0.23, 1, 0.320, 1) all .5s;
        color: black;
        padding: 5px;
    }

   .numbes {
       padding: 15px;
       margin: 9px;
       text-align: center;
       font-size: 5rem;
       font-family:sans-serif;
   }
   #numtext{
   display: block;
   font-size: medium;
   text-transform: capitalize;
   }
   #img2{
       position: relative;
       right: 100px;
   }
   .createNft{
       text-align: center;
   }
   .nftComponents , .cartoonDiv{
       flex-wrap: wrap;
   }
   .cartoondiv1 ,.cartoondiv2,.cartoondiv3,.cartoondiv4{
       text-align: center;
       font-size: 1rem;
       color: white;
       font-weight: bolder;
   }
   .cos , .cosmoicText  , .nftPrice {
        margin: 8px;
   }
   #choice {
        margin:9px;
        padding: 5px;
        font-size: 1rem;
   }

   table{
       border: none;
       color: white;
       text-transform: capitalize;
       display: flex;
       justify-content: center;
       text-align: center;
    }
    th{
        padding: 2px;
        background-color: #2D1C3C;
        border:none;
        width: 50px;
    }
    td {
       padding: 2px;
       border: none;
       width: 50px;
    }
    .FAQS{
        margin-top: 50px;
    }
    #questions{
        font-size: 1.5rem;
    }
    .questionContainer {
        margin-top: 20px;
    }
    
   .createContainer{
      display: flex;
      justify-content: baseline;
       margin-top: 40px;
       border-radius: 20px;
   }
           
       .createContainer .createTExt{
           text-align: center;
           padding: 30px;
           text-transform:capitalize;
           font-weight: bolder;
           font-family: sans-serif;
           font-size: 2.5rem;

       }
       .createContainer #create {
       margin-left: 120px;
       width: 150px;
       border-radius: 10px;
       padding: 9px;
       font-size: 1rem;
       border: none;
       margin-bottom: 30px;
       }
     
.footer{
  flex-wrap: wrap;
}
.seconFOoterDiv{
  flex-wrap: wrap;
}
.quest1 {
    font-size: 1.5rem;
}   
   }