* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
   }
   
   body {
    font-family: 'Amatic SC', cursive;
    font-weight: bold;

    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #D50000, #c7aa02);
    color: #333;
    text-align: center;
   }
   
   nav, nav ul {
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    font-size: 38px;
   }
   
   nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
   }
   
   nav ul li {
    margin: 10px;
   }


 
   
   nav a {
    color: white;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 5px;
    transition: background-color 0.3s;
   }
   
   nav a:hover, button:hover {
    background-color: #FFD700;
    color: #D50000;
   }
   
   /* Section styles */
   section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
 }
   
   section h2 {
    font-size: 5.5em;
    margin-bottom: 20px;
    color: #FFD700;
   }
   
   button {
    font-family: 'Amatic SC', cursive;
    font-weight: 900;

    background-color: #FFD700;
    color: #D50000;
    border: none;
    padding: 10px 20px;
    font-size: 28px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
   }
   
   button:hover {
    background-color: #D50000;
    color: white;
    transform: scale(1.05);
   }


   

    .accordion {
        background-color: #800d0d;
        color: #e9e102;
        cursor: pointer;
        padding: 18px;
        width: 40%;
        text-align: left;
        border: none;
        outline: none;
        transition: 0.4s;
        margin: 8px;
    }

    .faqText{
        margin-bottom: 20px;
    }
    
    .active, .accordion:hover {
        background-color: #a70a0a;
    }
    
    .panel {
        padding: 0 18px;
        background-color: rgb(188, 176, 4);
        max-height: 0;
        width: 40%;
        border-radius: 0 0 5px 5px;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }

    .faqPanelText{

        text-align: left;
        margin-bottom: 20px;
    }
   
   @media screen and (max-width: 768px) {
    nav ul {
      flex-direction: column;
    }
   
   }
   
   section img {
    max-width: 30%;
    height: auto;
    margin: 20px auto; 
 }
   
   #how-to-buy button {
    display: block;
    margin: 5px;
    padding: 15px 30px;
   }
   
   section p {
    font-size: 2.2em;
    color: #FFF8DC;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-block;
    margin-top: 20px; 
 }
   
   img {
    max-width: 100%;
    height: auto;
    border: 3px solid #f0f0f0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   
   img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   }
   
   
   h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: #333;
    margin: 0.5em 0;
   }
   
   p {
    line-height: 1.6;
    color: #555;
   }

   .social-media-buttons {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);  
    z-index: 1000;
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    }

    .icon {
        padding: 12px;
        width: 60px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 30%;
    }

    .fa:hover , .fa-brands:hover {
        opacity: 0.7;
    }

    .aboutSection {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;

        justify-content: center;
        align-items: center;
        padding: 40px 20px;
    }

    .aboutSection p{
        margin: 25px 25px;
        flex-basis: 71%
    }

    .aboutSection h2{
        
        margin: 10px 10px;
        margin-top: 70px;
    }

    .logo{
        box-sizing: border-box;
        margin: 2px 20px;
        margin-bottom: 50px;
        border: 0px;
        box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
        transition: none;
        max-width: 30%;
    }

    .walletSvgButton{
        background-color: #e8c501;
        max-width: 15%;
    
    
    }

    .walletSvg{
        min-width: 95%;
        border: 0px;
        box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
        transition: none;
    }

    .iframe-widget{
        color-scheme: light;
    }

    .bridgeText{
        margin-top: 50px;
        margin-bottom: 20px;
    }

    .tokenomicsText{
        margin-bottom: 20px;
        text-align: left;
    }



   
    @media (max-width: 768px) {
        h1 {
          font-size: 1.5em;
        }
        p {
          font-size: 0.9em;
        }
           nav, nav ul {
               display:none;
           }

           .mobileMenu {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.8);
            width: 100%;
            min-height: 5%;
            max-height: 10%;
            

            position: fixed;
          }
          
          .mobileMenu a {
            /* float: left; */
            color: white;
            justify-content: center;
            text-align: center;
            
            padding: 10px 15px;
            text-decoration: none;
            font-size: 18px;
          }
          
          .mobileMenu a:hover, button:hover {
            background-color: #FFD700;
            color: #D50000;
          }

           
           .walletSvgButton {
               max-width: 100%;
           }
           .accordion {
               width:90%;
           }
           .panel {
               width:90%;
           }
           .faqPanelText {
               font-size:1.2em !important;
           }
           section img {
               max-width: 100%;
           }

           .logo{
            background-size: cover;
            object-fit: cover;

            max-width: 80%;
           }
    }

        .button-container {
            display: flex;
            flex-direction: column;
            align-items: center; /* Center-aligns the buttons vertically */
            text-align: center; /* Ensures text within buttons is centered */
        }

        .frens-container {
            display: flex;
            flex-direction: column;
            align-items: center; /* Center-aligns the frens vertically */
            text-align: center; /* Ensures text within frens is centered */
        }

        .frens-member {
            
            align-items: center; /* Center-aligns the frens vertically */
            text-align: center; /* Ensures text within frens is centered */
            padding: 40px 40px;
        }

        .frens-container img {
            max-width: 100%;
            height: auto;
            border: 3px solid #f0f0f0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .frens-container p {
            display: flex;
            flex-direction: column;
            align-items: center; /* Center-aligns the frens vertically */
            margin-bottom: 20px; /* Adds spacing between the frens and the buttons */
            padding: 20px 0px; /* Adds spacing between the frens and the buttons */

        }

        .copyrightText {
            display: flex;
            flex-direction: column;
            align-items: center; /* Center-aligns the frens vertically */
            text-align: center; /* Ensures text within frens is centered */
            padding: 30px 40px;
            font-size: 1.2em;
            font-weight: 900;
            
        }




        /* Styles for larger screens */
        @media (min-width: 768px) {
            .button-container, .frens-container {
                flex-direction: row;
                justify-content: center; /* Centers buttons horizontally */
                align-items: center; /* Centers buttons vertically */
            }

            .button-container button, .frens-container button {
                margin-right: 10px; /* Adds spacing to the right of each button */
                margin-bottom: 0; /* Removes bottom margin */
            }

            .button-container button:last-child, .frens-container button:last-child {
                margin-right: 0; /* Removes spacing from the right of the last button */
            }
        }