/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Fullscreen Intro */
#intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.5s ease; /* Smooth fade-out transition */
}

/* Hide the intro text smoothly */
#intro-text {
    transition: opacity 0.5s ease;  /* Smooth fade-out for the text */
}


/* Fade-out effect for the overlay */
#overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Video settings */
#intro-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* Main content background settings */
#main-content {
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; /* Set height to fill the entire viewport */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;  /* Initially hidden */
    transition: opacity 1s ease; /* Smooth fade-in transition */
}

#mute-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    z-index: 3000; /* Higher than the shop overlay */
}

#mute-btn:hover {
    background-color: rgba(0, 0, 0, 0.9);
}


/* Hide intro screen after transition */
.hidden {
    display: none;
}
/* Style for the Enter button */
#enter-btn {
    background-color: #FFD700; /* Gold/Yellow color */
    color: #000000; /* Black text */
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 15px 30px;
    border: none;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Light shadow */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-block;
    text-align: center;
    margin-left: 0px; /* Adjust this value to move it to the right */
}

#enter-btn:hover {
    transform: scale(1.05); /* Slightly enlarge the button on hover */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); /* Darker and bigger shadow on hover */
}

#enter-btn:active {
    transform: scale(0.95); /* "Pressed" effect on click */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Lighter shadow on click */
}

.shop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(1px); /* Only apply the blur effect */
    -webkit-backdrop-filter: blur(1px); /* Safari support */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Higher than intro screen */
    transition: opacity 2s ease; /* Smooth fade-in effect */
    opacity: 0; /* Initially hidden */
}

/* When the shop is visible, this will show it with full opacity */
.shop-overlay.show {
    opacity: 1; /* Fully visible when 'show' class is added */
}


.hidden {
    display: none; /* Hide by default */
}

.wooden-background {
    position: relative; /* Needed for positioning the pseudo-element */
    width: 70%; /* Adjust width as needed */
    height: auto; /* Set height to auto so it adjusts to content */
    min-height: 40%; /* Set a minimum height to keep the initial look */
    border-radius: 15px; /* Optional rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.055); /* Optional shadow effect */
    padding: 20px; /* Optional padding */
    border: 3px solid black; /* Thin black border */
    overflow: hidden; /* Ensure content doesn't overflow */
    display: flex; /* Flexbox for easy alignment */
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
}

/* Add a pseudo-element for the semi-transparent overlay */
.wooden-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('wood-texture.jpg'); /* Keep the wood texture here */
    background-size: cover; /* Cover the entire area */
    opacity: 0.8; /* Set desired transparency (0.0 to 1.0) */
    z-index: 1; /* Place below the content */
}

/* Ensure content in the wooden background is above the pseudo-element */
.shop-container {
    position: relative; /* Needed for z-index to work */
    z-index: 2; /* Place above the pseudo-element */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}


/* Ensure content in the wooden background is above the pseudo-element */
.shop-container {
    position: relative; /* Needed for z-index to work */
    z-index: 2; /* Place above the pseudo-element */
}


.shop-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px; /* Adds spacing between the two cards */
}

.item-card, .item-card2, .item-card3 {
    background-color: rgb(150, 130, 130); /* Light pastel background for card */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow */
    width: 300px; /* Adjust width */
    padding: 20px; /* Add padding */
    text-align: center;
    border: 3px solid #000000; /* Black border */
    position: relative; /* Needed for absolute positioning of the info icon */
    opacity: 1;
    margin: 0; /* Remove any margin if present */
}
.item-card img {
    width: 100%; /* Image takes full width of the card */
    height: auto; /* Keep aspect ratio */
    border-radius: 5px; /* Slightly rounded image corners */
    margin-bottom: 10px; /* Add space below the image */
    opacity: 1;
}

.item-name {
    font-weight: bold; /* Make item name bold */
    font-size: 20px; /* Slightly larger text */
    margin-bottom: 10px; /* Add space below the name */
}

.current-value {
    font-size: 1.2em; /* Adjust font size if necessary */
    margin-top: auto; /* Adjust this value to control how much space is above the text */
    margin-bottom: 12px; /* Adjust this value to control how much space is below the text */
    padding: auto; /* Adds some internal spacing */
    line-height: auto; /* Adjust the line-height to space out the text vertically if needed */
    text-align: center; /* Centers the text horizontally */
    color: #333; /* Text color */
}

.price-info {
    font-size: 0.7em;                   /* Very small font */
    color: rgba(0, 0, 0, 0.5);          /* Transparent black */
    position: absolute;                  /* Use absolute positioning */
    bottom: 77px;                        /* Adjust this value to move it vertically */
    left: 215px;                             /* Adjust this value to move it horizontally */
    margin: 0;                          /* Remove any default margin */
    pointer-events: none;               /* Ensure the text doesn't interfere with clicking on the button */
}



/* General styling for the buy button */
.buy-button {
    background: linear-gradient(45deg, #907755, #423815); /* Gradient color */
    border: none;
    color: rgb(0, 0, 0); /* Text color */
    font-weight: bold;
    font-size: 1.0em; /* Font size */
    padding: 12px 24px; /* Padding for size */
    border-radius: 17px; /* Rounded corners */
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
    outline: none;
    width: 100px;
    height: 40px;
}

/* Hover effect */
.buy-button:hover {
    background: linear-gradient(45deg, #392524, #ffaf40); /* Gradient changes direction */
    transform: scale(1.05); /* Slightly enlarges the button */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Enhance the shadow */
}

/* Active/Pressed state */
.buy-button:active {
    transform: scale(0.98); /* Slightly shrinks when pressed */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Reduce shadow */
}


/* Ensure the info icon is above the item card and clickable */
.info-icon {
    position: absolute;
    top: 3px;
    right: 3px;
    background-color: #f0f0f0;
    color: #000;
    border: 2px solid #000;
    border-radius: 40%;
    width: 25px;
    height: 25px;
    font-size: 20px;
    text-align: center;
    line-height: 19px; /* Vertically center the "i" */
    cursor: pointer;
    z-index: 5; /* Increase z-index to ensure it's above the item card */
}

/* Ensure the info popup is above all other content */
.info-popup {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 2px solid #000;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 10000; /* High z-index to ensure it's above all content */
    width: 395px;
    height: 455px;
    text-align: center;
}

.info-header {
    margin-top: -13px; /* Move the "Information" header upwards */
    padding-bottom: 0px; /* Adjust spacing below the header */
}


.info-popup p {
    margin-bottom: 20px;
}

.close-popup {
    margin-top: 200px;
    background-color: #f0f0f0;
    color: #000;
    border: 1px solid #000;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}




/* Background box behind the image */
/* Background box behind the image */
.image-background {
    position: relative; /* Allows for z-index to work */
    width: 100%; /* Full width of the item card */
    padding: 10px; /* Padding around the image */
    background-color: rgba(253, 248, 242, 0.5); /* Customizable background color */
    border: 3px solid #000; /* Frame with black border */
    border-radius: 10px; /* Slightly rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for effect */
    margin-bottom: 15px; /* Space between the image and text below */
    z-index: 1; /* Ensure background is behind the image */
}

/* Adjust the image styling */
.image-background img {
    position: relative; /* Ensures image is inside the background box */
    z-index: 2; /* Ensure image is above the background */
    width: 100%; /* Fit image to the width of the card */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px; /* Rounded corners for image */
    display: block; /* Prevent any gaps */
}

/* Ensure the item card has some padding */
.item-card {
    padding: 20px; /* Add padding around the card content */
    position: relative; /* Needed for absolute positioning of the info icon */
}



.item-card2 img {
    width: 100%; /* Image takes full width of the card */
    height: auto; /* Keep aspect ratio */
    border-radius: 5px; /* Slightly rounded image corners */
    margin-bottom: 10px; /* Add space below the image */
    opacity: 1;
}

.item-name2 {
    font-weight: bold; /* Make item name bold */
    font-size: 20px; /* Slightly larger text */
    margin-bottom: 10px; /* Add space below the name */
}


/* General styling for the buy button */
.buy-button2 {
    background: linear-gradient(45deg, #907755, #423815); /* Gradient color */
    border: none;
    color: rgb(0, 0, 0); /* Text color */
    font-weight: bold;
    font-size: 1.0em; /* Font size */
    padding: 12px 24px; /* Padding for size */
    border-radius: 17px; /* Rounded corners */
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
    outline: none;
    width: 100px;
    height: 40px;
}

/* Hover effect */
.buy-button2:hover {
    background: linear-gradient(45deg, #392524, #ffaf40); /* Gradient changes direction */
    transform: scale(1.05); /* Slightly enlarges the button */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Enhance the shadow */
}

/* Active/Pressed state */
.buy-button2:active {
    transform: scale(0.98); /* Slightly shrinks when pressed */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Reduce shadow */
}


/* Ensure the info icon is above the item card and clickable */
.info-icon2 {
    position: absolute;
    top: 3px;
    right: 3px;
    background-color: #f0f0f0;
    color: #000;
    border: 2px solid #000;
    border-radius: 40%;
    width: 25px;
    height: 25px;
    font-size: 20px;
    text-align: center;
    line-height: 19px; /* Vertically center the "i" */
    cursor: pointer;
    z-index: 5; /* Increase z-index to ensure it's above the item card */
}

/* Error Message Styles */
.error-message {
    color: red; /* Red text for error */
    font-weight: bold; /* Bold text */
    margin-top: 10px; /* Space above the error message */
}

/* Hidden class to hide the error message */
.hidden {
    display: none; /* Hide the element */
}

/* Ensure the info popup is above all other content */
.info-popup2 {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 2px solid #000;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 10000; /* High z-index to ensure it's above all content */
    width: 395px;
    height: 410px;
    text-align: center;
}


.info-header2 {
    margin-top: -10px; /* Move the "Information" header upwards */
    padding-bottom: 13px; /* Adjust spacing below the header */
}


.info-popup2 p {
    margin-bottom: 20px;
}

.close-popup2 {
    background-color: rgba(88, 84, 84, 0.8); /* Light red color */
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 250px; /* Space above the close button */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.close-popup2:hover {
    background-color: rgb(0, 0, 0);
    transform: scale(1.05);
}

/* Background box behind the image */
/* Background box behind the image */
.image-background2 {
    position: relative; /* Allows for z-index to work */
    width: 100%; /* Full width of the item card */
    padding: 10px; /* Padding around the image */
    background-color: rgba(253, 248, 242, 0.5); /* Customizable background color */
    border: 3px solid #000; /* Frame with black border */
    border-radius: 10px; /* Slightly rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for effect */
    margin-bottom: 15px; /* Space between the image and text below */
    z-index: 1; /* Ensure background is behind the image */
}

/* Adjust the image styling */
.image-background2 img {
    position: relative; /* Ensures image is inside the background box */
    z-index: 2; /* Ensure image is above the background */
    width: 100%; /* Fit image to the width of the card */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px; /* Rounded corners for image */
    display: block; /* Prevent any gaps */
}

/* Ensure the item card has some padding */
.item-card2 {
    padding: 20px; /* Add padding around the card content */
    position: relative; /* Needed for absolute positioning of the info icon */
}


.current-value2 {
    font-size: 1.2em; /* Adjust font size if necessary */
    margin-top: auto; /* Adjust this value to control how much space is above the text */
    margin-bottom: 12px; /* Adjust this value to control how much space is below the text */
    padding: auto; /* Adds some internal spacing */
    line-height: auto; /* Adjust the line-height to space out the text vertically if needed */
    text-align: center; /* Centers the text horizontally */
    color: #333; /* Text color */
}





.item-card3 img {
    width: 100%; /* Image takes full width of the card */
    height: auto; /* Keep aspect ratio */
    border-radius: 5px; /* Slightly rounded image corners */
    margin-bottom: 10px; /* Add space below the image */
    opacity: 1;
}

.item-name3 {
    font-weight: bold; /* Make item name bold */
    font-size: 20px; /* Slightly larger text */
    margin-bottom: 10px; /* Add space below the name */
}

.current-value3 {
    font-size: 1.2em; /* Adjust font size if necessary */
    margin-top: auto; /* Adjust this value to control how much space is above the text */
    margin-bottom: 12px; /* Adjust this value to control how much space is below the text */
    padding: auto; /* Adds some internal spacing */
    line-height: auto; /* Adjust the line-height to space out the text vertically if needed */
    text-align: center; /* Centers the text horizontally */
    color: #333; /* Text color */
}


/* General styling for the buy button */
.buy-button3 {
    background: linear-gradient(45deg, #907755, #423815); /* Gradient color */
    border: none;
    color: rgb(0, 0, 0); /* Text color */
    font-weight: bold;
    font-size: 1.0em; /* Font size */
    padding: 12px 24px; /* Padding for size */
    border-radius: 17px; /* Rounded corners */
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
    outline: none;
    width: 100px;
    height: 40px;
}

/* Hover effect */
.buy-button3:hover {
    background: linear-gradient(45deg, #392524, #ffaf40); /* Gradient changes direction */
    transform: scale(1.05); /* Slightly enlarges the button */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Enhance the shadow */
}

/* Active/Pressed state */
.buy-button3:active {
    transform: scale(0.98); /* Slightly shrinks when pressed */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Reduce shadow */
}


/* Ensure the info icon is above the item card and clickable */
.info-icon3 {
    position: absolute;
    top: 3px;
    right: 3px;
    background-color: #f0f0f0;
    color: #000;
    border: 2px solid #000;
    border-radius: 40%;
    width: 25px;
    height: 25px;
    font-size: 20px;
    text-align: center;
    line-height: 19px; /* Vertically center the "i" */
    cursor: pointer;
    z-index: 5; /* Increase z-index to ensure it's above the item card */
}

/* Ensure the info popup is above all other content */
.info-popup3 {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 2px solid #000;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 10000; /* High z-index to ensure it's above all content */
    width: 395px;
    height: 410px;
    text-align: center;
}

.info-header3 {
    margin-top: -10px; /* Move the "Information" header upwards */
    padding-bottom: 13px; /* Adjust spacing below the header */
}


.info-popup3 p {
    margin-bottom: 20px;
}

.close-popup3 {
    background-color: rgba(88, 84, 84, 0.8); /* Light red color */
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 250px; /* Space above the close button */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.close-popup3:hover {
    background-color: rgb(0, 0, 0);
    transform: scale(1.05);
}




/* Background box behind the image */
/* Background box behind the image */
.image-background3 {
    position: relative; /* Allows for z-index to work */
    width: 100%; /* Full width of the item card */
    padding: 10px; /* Padding around the image */
    background-color: rgba(253, 248, 242, 0.5); /* Customizable background color */
    border: 3px solid #000; /* Frame with black border */
    border-radius: 10px; /* Slightly rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for effect */
    margin-bottom: 15px; /* Space between the image and text below */
    z-index: 1; /* Ensure background is behind the image */
}

/* Adjust the image styling */
.image-background3 img {
    position: relative; /* Ensures image is inside the background box */
    z-index: 2; /* Ensure image is above the background */
    width: 100%; /* Fit image to the width of the card */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px; /* Rounded corners for image */
    display: block; /* Prevent any gaps */
}

/* Ensure the item card has some padding */
.item-card3 {
    padding: 20px; /* Add padding around the card content */
    position: relative; /* Needed for absolute positioning of the info icon */
}


/* Wallet Connect Button */
.connect-wallet-button {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(45deg, #907755, #423815); /* Gradient color */
    color: #ffffff; /* Use white text for better contrast */
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000; /* Ensure it's above other content */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.connect-wallet-button:hover {
    background: linear-gradient(45deg, #392524, #ffaf40); /* Gradient changes direction */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
}

#wallet-address {
    position: fixed;
    top: 60px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    z-index: 5000;
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
    .connect-wallet-button {
        padding: 8px 16px;
        font-size: 14px;
    }

    #wallet-address {
        font-size: 12px;
        padding: 8px;
    }
}

/* Ensure the connection options popup is above all other content */
.connect-options-popup {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff; /* White background */
    border: 2px solid #000; /* Black border */
    padding: 20px; /* Padding around content */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Shadow for depth */
    z-index: 10000; /* High z-index to ensure it's above all content */
    width: 400px; /* Adjusted width */
    height: 310px; /* Allow height to adjust based on content */
    text-align: center; /* Center text */
}

/* Popup Content */
.popup-content {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: none; /* Center content horizontally */
    position: relative; /* Position relative to allow absolute positioning of children */
}

/* Wallet button container */
.wallet-buttons {
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Space buttons evenly */
    align-items: center; /* Center buttons vertically */
    width: 55%; /* Adjust the width as needed */
    height: 150px; /* Height to allow for placement; adjust as needed */
    margin: 30px;
}

/* Button styles */
.connect-wallet-button {
    flex: 1; /* Allow buttons to take equal space */
    margin: 0 10px; /* Adjust space between buttons */
    background-color: rgba(130, 121, 41, 0.8); /* Button color */
    color: #ffffff; /* Text color */
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Hover effect */
}

/* MetaMask Button */
.metamask-button {
    background: linear-gradient(45deg, #f6851b, #cd6116); /* Orange tones for MetaMask */
    color: #ffffff;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: 60px; /* Space above the button */
    margin-bottom: 10px; /* Space below the button */
    margin-left: 15px; /* Space to the left */
    margin-right: 65px; /* Space to the right */
    /* Additional styles specific to MetaMask button */
    /* You can adjust margins, padding, etc. here */
}

.metamask-button:hover {
    background: linear-gradient(45deg, #ffaf40ee, #ff6347eb); /* Lighter gradient on hover */
    transform: scale(1.05);
}

/* Rabby Button */
.rabby-button {
    /* Rabby Button Styling */
    background: linear-gradient(45deg, #695acded, #473d8be9); /* Purple tones for Rabby */
    color: #ffffff;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: 150px; /* Space above the button */
    margin-bottom: 10px; /* Space below the button */
    margin-left: 15px; /* Space to the left */
    margin-right: 79px; /* Space to the right */
}
.rabby-button:hover {
    background: linear-gradient(45deg, #836fff, #4b0082); /* Lighter gradient on hover */
    transform: scale(1.05);
}


/* Close button style */
.close-popup {
    background-color: rgba(88, 84, 84, 0.8); /* Light red color */
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: auto; /* Space above the close button */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.close-popup:hover {
    background-color: rgb(0, 0, 0);
    transform: scale(1.05);
}

.hidden {
    display: none;
}

.approve-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    border: 2px solid #000; 
    transform: translate(-50%, -50%);
    background-color: rgb(255, 255, 255);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 100;
    width: 450px;
    height: 380px; 
}

.golden-button {
    background-color: rgb(192, 167, 22); /* Golden background color */
    color: white; /* White text */
    border: none; /* Remove borders */
    border-radius: 8px; /* Rounded corners */
    padding: 10px 20px;
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: all 0.3s ease; /* Smooth transition */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); /* Glow effect */
    margin-left: 154px; /* Space to the left */
    margin-right: 75px; /* Space to the right */
    margin-top: 12px;
}

.golden-button:hover {
    background-color: #ffd700; /* Slightly lighter on hover */
    transform: scale(1.05); /* Slightly larger on hover */
}

.approve-popup {
    /* Center the popup */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(255, 255, 255);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Make sure it's on top of everything */
}

.button-container {
    display: flex; /* Flexbox layout */
    justify-content: space-between; /* Space between buttons */
    margin: 20px 0; /* Margin around button container */
}

#errorPopup {
    display: none; /* Keep it hidden on page load */
}


#listingFormPopup {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -20%);
    width: 400px;
    border-radius: 2%;
    background-color: white;
    border: 2px solid #000000;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    height: 820px;
}

.form-group {
    margin-bottom: 20px;
}

#listingFormPopup h3 {
    text-align: center;
}

#Listing-button {
    position: fixed;
    bottom: 20px;
    right: 200px;
    background: linear-gradient(45deg, #907755, #423815); /* Gradient color */
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 100;
    width: 70px;
    height: 70px;
}

#Listing-button img {
    margin-left: -3px;
    margin-top: -3px;
    width: 55px;
    height: 55px;
}

#Listing-button:hover {
    background: linear-gradient(45deg, #392524, #ffaf40); /* Gradient changes direction */
}


/* Close Button */
.close-listing {
    position: absolute;
    background-color: rgba(88, 84, 84, 0.8); /* Light red color */
    color: #fff;
    border: none;
    border-radius: 10px; /* Rounded corners */
    padding: 12px 20px;
    font-size: 16px; /* Font size */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: -42px; /* Move the button up by 20px */
    margin-left: 40px;
}

.close-listing:hover {
    background-color: rgb(0, 0, 0);
    transform: scale(1.05);
}

.confirm-listing {
    background-color: rgb(192, 167, 22); /* Golden background color */
    color: white; /* White text */
    border: none; /* Remove borders */
    border-radius: 10px; /* Rounded corners */
    padding: 12px 20px;
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: all 0.3s ease; /* Smooth transition */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); /* Glow effect */
    margin-left: 230px; /* Space to the left */
    margin-right: 75px; /* Space to the right */
    margin-top: 10px;
}

.confirm-listing:hover {
    background-color: #ffd700; /* Slightly lighter on hover */
    transform: scale(1.05); /* Slightly larger on hover */
  }

#telegram-button {
    position: fixed;
    bottom: 20px;
    right: 110px;
    background: linear-gradient(45deg, #907755, #423815); /* Gradient color */
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 100;
    width: 70px;
    height: 70px;
}

#telegram-button img {
    margin-left: -1px;
    margin-top: -2px;
    width: 50px;
    height: 50px;
}

#telegram-button:hover {
    background: linear-gradient(45deg, #392524, #ffaf40); /* Gradient changes direction */
}

#twitter-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(45deg, #907755, #423815); /* Gradient color */
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 100;
    width: 70px;
    height: 70px;
}

#twitter-button img {
    margin-top: 3px;
    margin-left: -2px;
    width: 55px;
    height: 40px;
}

#twitter-button:hover {
    background: linear-gradient(45deg, #392524, #ffaf40); /* Gradient changes direction */
}

.popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .popup-confirm {
    background-color: rgb(255, 255, 255);
    border: 3px solid #000; 
    margin-top: -60px;
    margin-left: -127px;
    height: 500px;
    border-radius: 10px;
    padding: 20px;
    width: 700px; /* Could be more or less, depending on screen size */
    text-align: center;
  }
  
  .close-confirm {
    background-color: rgba(244, 0, 0, 0.8); /* Light red color */
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 16px;
    margin-right: 100px;
    font-weight: bold;
    cursor: pointer;
    position: relative; /* Enable the 'top' adjustment */
    margin-right: 140px;
    top: -41px; /* Moves the button up by 30px (adjust as needed) */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

  
  .close-confirm:hover {
    background-color: #d12b2b;
    transform: scale(1.05); /* Slightly larger on hover */
  }
  
  .confirm-popup {
    background-color: rgb(192, 167, 22); /* Golden background color */
    color: white; /* White text */
    border: none; /* Remove borders */
    border-radius: 10px; /* Rounded corners */
    padding: 12px 20px;
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: all 0.3s ease; /* Smooth transition */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); /* Glow effect */
    margin-left: 270px; /* Space to the left */
    margin-right: 75px; /* Space to the right */
    margin-top: 30px;
  }
  
  .confirm-popup:hover {
    background-color: #ffd700; /* Slightly lighter on hover */
    transform: scale(1.05); /* Slightly larger on hover */
  }

  /* Popup Container */
.popup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
}

/* Popup Content */
.popup-approve-error {
    background-color: white;
    border: 2px solid #000; 
    border-radius: 8px;
    margin: 22% auto; /* 15% from the top and centered */
    padding: 20px;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 500px; /* Maximum width */
    text-align: center;
}

/* Close Button */
.close-popup-approve {
    background-color: rgba(88, 84, 84, 0.8); /* Light red color */
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 5px; /* Space above the close button */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.close-popup-approve:hover {
    background-color: rgb(0, 0, 0);
    transform: scale(1.05);
}