*, *::before, *::after {
    box-sizing: border-box;
  }

body {
    overflow-x: hidden;
    font-family: "Montserrat", Helvetica;
    /* font-size: 30px; */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #000000;
    background-color: #ffffff;
    transition: all 3s ease;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1rem 0 ;
    /* width: 100%; */
}

.logo {
    display: flex;
    padding-left: 2rem;
    align-items: center;
}

.logo img {
    width: 30px;
    margin-right: 0.2rem;
}

header h1 {
    font-family: "Montserrat-SemiBold", Helvetica;
    font-size: 20px;
    font-weight: 550;
}

nav a, .launch-dapp {
    margin: 0 1rem;
    text-decoration: none;
    color: #000000;
    font-family: "Montserrat", Helvetica;
    font-size: 15px;
    transition: color 0.3s ease, background-color 0.3s ease;
}


.launch-dapp {
    background-color: #000;
    color: #fff;
    padding: 0.5rem 2rem;
    border: none;
    cursor: pointer;
    border-radius: 30px;
    box-shadow: 0 3px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.launch {
    font-family: "Montserrat", Helvetica;
    font-weight: 700;
    background-color: #ffffff;
    color: #000000;
    padding: 0.5rem 2rem;
    border: none;
    cursor: pointer;
    border-radius: 30px;
    box-shadow: 0 3px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

nav :hover {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    transform: scale(1.05);   
}

#status {
    display: inline; /* Keep it in-line with other elements */
    margin-left: 10px; /* Optional: Add spacing to separate it from other items */
    margin-top: 5rem;
    color: green; /* Default text color */
    font-size: smaller;
}


/* header  {
    border: 1px solid rgba(107, 107, 107, 0.5);
    box-shadow: 0 3px 4px rgba(0,0,0,0.1);
    border-style: none none solid none;
}  */

.hero {
    display: flex;
    align-items: center;
    padding: 2.5rem;
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.hero-content {
    flex: 1;
}

/* .hero {
    margin-left: 3rem;
} */

.hero h3 {
    font-size: 2rem;
    font-weight: 500;
    transition: font-size 0.3s ease;
}


.hero .hero-content {
    font-size: 5rem;
    margin: 1rem 0;
}

.hero .hero-content p {
    font-size: 1.3rem;
    font-weight: 400;
    margin:  0;
}

.cta-buttons button {
    font-family: "Montserrat", Helvetica;
    font-weight: 400;
    font-size: 15px;
    margin: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 50px;
    background-color: #000000;
    color: white;
    cursor: pointer;
    box-shadow: 0 3px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, transform 0.3s ease;
    
}

.cta-buttons a {
    text-decoration: none;
}

.cta-buttons :hover {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    transform: scale(1.05);   
}

.hero-image img {
    width: 100%;
    max-width: 600px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.hero-image img:hover {
    transform: scale(1.05);
}

.how-it-works {
    background-color: #000;
    color: #ffffff;
    padding: 3rem;
    /* text-align: center; */
    border-radius: 60px;
    margin: 2rem;
    transition: transform 0.3s ease;
}

.how-it-works:hover {
    transform: scale(1.02);
}

.how-it-works h2 {
    font-family: "Montserrat", Helvetica;
    /* margin-bottom: 1rem; */
    margin-top: 0rem;
    font-weight: 500;
    font-size: 2.3rem;
}


.coming-soon {
    text-align: center;
    /* position: relative; */ 
}

.ribbon {
    /* position: absolute; */
    display: flex;
    max-width: 100%;
    /* width: 100%; */
}

/* Features Section */

.features {
    padding: 50px 0;
    text-align: center;
    width: 80%; /* Adjust width as necessary */
    max-width: 1200px; /* Optional: limit max width for very large screens */
  }
  
  .feature {
    display: inline-block;
    width: 26%; /* Adjusted to fit two boxes per row with margins */
    margin: 1%; /* Space around boxes */
    vertical-align: top;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    box-sizing: border-box; /* Ensures padding doesn't affect overall width */
  }
  
  .feature:hover {
    transform: scale(1.02);
  }
  
  .feature h3 {
    font-size: 20px;
    margin-top: 10px;
  }

  @media (max-width: 768px) {
    .feature {
      width: 78%; /* Full width on smaller screens or adjust as needed */
    }
  }
/* .features {

    padding: 50px 0;
    text-align: center;
}

.feature {
    display: inline-block;
    width: 23%;
    margin: 1%;
    vertical-align: top;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.feature:hover {
    transform: scale(1.02);
}

.feature h3 {
    font-size: 20px;
    margin-top: 10px;
} */

.email-signup {
    margin: 3.5rem 0 1rem;
    display: inline-block;
    border: 2px solid #000000; /* Dark border color */
    border-radius: 40px; /* Rounded corners */
    overflow: hidden; /* Ensures rounded border around both input and button */
    box-shadow: 0 3px 4px rgba(0,0,0,0.1);
    max-width: 30rem;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.email-input {
    border: none;
    outline: none;
    padding: 10px 15px;
    font-size: 16px;
    color: #000000; /* Placeholder text color */
    flex-grow: 1; /* Input takes the remaining space */
    border-radius: 40px 0 0 40px; /* Rounded corners on the left */
}

.email-input::placeholder {
    color: #c4c4c4; /* Placeholder text color */
    font-style: italic;
}

.email-signup button {
    font-family: "Montserrat", Helvetica;
    background-color: #000000; /* Dark background for button */
    color: #ffffff; /* White text color */
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 0 40px 40px 0; /* Rounded corners on the right */
    box-shadow: 0 3px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.email-signup button:focus {
    outline: none;
}

.email-signup button:hover {
    background-color: #ffffff; /* Slightly darker shade for hover effect */
    color: #000;
    transform: scale(1.05);  
}

.ribbon2 {
    display: flex;
    max-width: 100%;
    padding: 2rem 0;
}


/* Community Section */
.community {
    background: linear-gradient(15deg, #3F0453, #D0320D, #A13016, #3F0453);
    color: #F7E2FE;
    padding-bottom: 3rem;
    height: 43rem;
    
}

.community h2 {
    font-family: "Montserrat", Helvetica;
    font-weight: 400;
    padding-top: 3rem;
    padding-left: 3.5rem;
    font-size: 32px;
    margin-bottom: 20px;
}

.community p {
    font-size: 16px;
    margin-bottom: 30px;
    padding-left: 3.5rem;
    /* max-width: 600px; */
    margin: 0 auto 30px;
}

.community-buttons {
    padding: 2rem 3.5rem 9rem;
}

.community-buttons .btn {
    margin-right: 15px;
    width: 190px;
    height: 40px;
    background-color: hsl(11, 84%, 50%);
    color: #f9f9f9;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 3px 3px 3px 1px rgb(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.community-buttons .btn-dark{
    margin-right: 15px;
    width: 190px;
    height: 40px;
    /* background-color: #BE3211; */
    color: #f9f9f9;
    padding: 0.75rem 1.5rem;
    border: 2px solid hsl(285, 93%, 03%);
    border-radius: 20px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}



.community-buttons .btn:hover {
    color: hsl(285, 93%, 08%);
    background-color: #F7E2FE;
    transform: scale(1.05);   
}
.community-buttons .btn-dark:hover {
    color: hsl(285, 93%, 08%);
    background-color: #F7E2FE;
    transform: scale(1.05);   
}

/* .community-buttons .joining:hover {
    box-shadow: 3px 3px 3px 1px rgb(0, 0, 0, 0.1);
} */

.community-buttons .joining {
    align-items: center;
    max-width: 21px;
    top: 0.9rem;
}

.community .algo {
    float: right;
    padding-right: 1rem;
    padding-top: 1rem;
}


div #nfd-drop {
    margin-left: 65%;
    width: 32%;
    padding-bottom: 2rem;
    /* position: relative;
    left: 75%;
    top: -15rem;
    height: -40rem; */
}

/* Airdrop Section */
.airdrop {
    padding: 2.5rem;
    background-color: #ffffff;
    text-align: center;
    border: 2px solid #3F0453;
    border-top: white;
    margin: 2rem;
    border-radius: 2.3rem;
}

.airdrop h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.airdrop p {
    margin-bottom: 20px;
    font-size: 1rem;
}

.airdrop ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.airdrop ul li {
    margin-bottom: 15px;
    font-size: 1rem;
}

.join-community {
    /* background-color: #000; */
    color: #000000;
    padding: 2rem;
    text-align: center;
}

.join-community p {
    margin: 1rem 0;
}

button[aria-label="twitter"], [aria-label="discord"] {
    width: 190px;
    height: 40px;
    background-color: #000000;
    color: #000;
    padding: 0.75rem 1.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* .discord, .twitter {
    width: 190px;
    height: 40px;
    background-color: #fff;
    color: #000;
    padding: 0.75rem 1.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
} */


button[aria-label="discord"] img {
    width: 25px;
}
button[aria-label="twitter"] img {
    width: 20px;
}


.newsletter {
    display: flex;
    justify-content: center;
    align-items: center;
}

.newsletter input {
    width: auto;
    height: 0.7rem;
    padding: 0.75rem;
    margin-right: 0.5rem;
    border: 1px solid black;
    border-radius: 20px;
}

.newsletter button {
    background-color: #000000;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border: none;
    cursor: pointer;
    height: 2.5rem;
}

.faq {
    padding: 3rem;
    background-color: #ffffff;
    text-align: center;
    
}

.faq ul {
    list-style: none;
    padding: 0;
}


.faq li {
    margin: 0.9rem 0;
    border: 1px dashed black;
    border-style: none none dashed none;
    border-width: 0.2px;
    transition: background-color 0.3s ease;
}

/* .faq li:hover {
    background-color: #f0f0f0;
} */


.faq img {
    padding-right: 15px;
}

footer {
    text-align: center;
    padding: 1rem;
    /* border: 1px solid rgba(107, 107, 107, 0.5); */
    /* border-style: solid none none none; */
    color: #000000;
    box-shadow: 3px 3px 4px 4px rgba(0,0,0,0.1);
    max-width: 100%;
    margin-top: auto; /* Push footer to the bottom of the page */
  }


/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    body {
        transition: none;
    }
    header {
      display: flex;
      flex-direction: row;
      justify-items: center;
      align-items: center;
    }



    .logo {
        /* display: flex;
        justify-items: flex-start; */
        padding: 0.5rem 0 0;
        padding-left: 0.5rem;  
    }
  
    .logo img {
      width: 30px;
    }
  
    header h1 {
      font-size: 20px;
    }
  
    nav a, .launch-dapp {
        display: none;
        /* flex-direction: column;
      margin: 0.5rem 0;
      align-items: center;
      font-size: 14px; */
    }
  
    /* .launch-dapp {
      padding: 0.5rem 1.5rem;
    } */

    .hero {
        text-align: center;
        padding: 0;
        align-items: center;
    }

    .hero h3 {
        font-size: 1.4rem;
        font-weight: bold;
        margin: 2rem;
    }


   .hero .hero-content p {
        text-wrap: nowrap;
        font-size: 0.8rem;
        font-weight: 500;
        text-align: center;
        padding-bottom: 1rem;
   }

    .hero-image img {
        max-width: 600px;
        display: none;
    }

    

    .how-it-works h2 {
        font-size: 1.2rem;  
    }

 

    .how-it-works p {
        font-size: 0.7rem;
        text-wrap: wrap;
        line-height: 1.5rem;
    }

    .container h2 {
        padding-top: 0;
    }

    .email-signup {
        margin: 3.5rem 0 1rem;
        display: inline-block;
        border: 2px solid #000000; /* Dark border color */
        border-radius: 40px; /* Rounded corners */
        overflow: hidden; /* Ensures rounded border around both input and button */
        box-shadow: 0 3px 4px rgba(0,0,0,0.1);
        max-width: 20rem;
        align-items: center;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .email-signup button {
        font-family: "Montserrat", Helvetica;
        font-weight: 450;
        background-color: #000000; /* Dark background for button */
        color: #ffffff; /* White text color */
        border: none;
        padding: 10px 10px;
        font-size: 14px;
        cursor: pointer;
        border-radius: 0 40px 40px 0; /* Rounded corners on the right */
        box-shadow: 0 3px 4px rgba(0,0,0,0.1);
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .email-input {
        border: none;
        outline: none;
        padding: 8px;
        font-size: 11.5px;
        color: #000000; /* Placeholder text color */
        flex-grow: 1; /* Input takes the remaining space */
        border-radius: 40px 0 0 40px; /* Rounded corners on the left */
    }

    .community {
        background: linear-gradient(15deg, #3F0453, #D0320D, #A13016, #3F0453);
        color: #F7E2FE;
        padding-bottom: 3rem;
        height: 41rem; 
    }

    .community-buttons .btn-dark {
        text-align: center;

    }

    .container h2 {
        font-size: 1.6rem;
    }

    .container p {
        font-size: 0.9rem;
    }


    .community-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .community-buttons .btn {
        font-size: 0.9rem;
        width: 85%; /* Adjust width as needed */
        margin-bottom: 10px; /* Space between stacked buttons */
        text-align: center;
    }
    .community-buttons .btn-dark {
        font-size: 0.9rem;
        width: 85%; /* Adjust width as needed */
        margin-bottom: 10px; /* Space between stacked buttons */
        text-align: center;
    }

    .btn-dark .joining {
        display: none;
    }

    .community .algo {
        float: none; /* Remove float for mobile */
        display: block;
        margin: 0 auto; /* Center the image */
        padding-right: 0;
        width: 40%; /* Adjust width as needed or set max-width */
        max-width: 200px; /* Example max-width */
    }

    #nfd-drop {
        position: relative;
        top: -9rem;
    }



    footer {
        font-size: 0.8rem;
    }

}