body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding-top: 0px;
    box-sizing: border-box;
    background-image: url('Godcandle background image.png'); /* Path to your image */
    background-size: cover; /* Ensures the image covers the element without stretching */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
}


/* Optional: Add media query for extra control on mobile devices */
@media (max-width: 768px) {
    body {
        background-size: contain;
        background-size: 100% 100%;
        background-position: center; /* Centers the image */
        background-repeat: no-repeat; /* Prevents the image from repeating */
    }
}



/* Container styles */
.container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 0 0px;
    box-sizing: border-box;
    word-wrap: break-word; /* Allows long words to wrap onto the next line */
}


/* General button styles for social buttons */
.social-btn {
    width: 50px; /* Set width for the button */
    height: 50px; /* Set height for the button */
    padding: 0; /* Remove default padding */
    display: inline-block; /* Ensures buttons are inline */
    background-size: contain; /* Ensure icon fits within the button */
    background-position: center; /* Center the icon in the button */
    background-repeat: no-repeat; /* No repeat of background image */
    background-color: transparent; /* Ensure background color is transparent */
    border: none; /* Remove default border */
    cursor: pointer; /* Show pointer cursor on hover */
    margin: 7px; /* Default margin */
}




/* Hover effect for buttons */
.social-btn:hover {
    opacity: 0.8; /* Slightly change opacity on hover */
}



/* Header styling */
header {
    background-color: #004d00; /* Dark green background */
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensures the header stays on top */
    overflow-x: auto; 
    white-space: nowrap; /* Prevent wrapping */
}



/* Custom scrollbar for WebKit browsers */
header::-webkit-scrollbar {
    height: 10px; /* Height of the scrollbar */
}

header::-webkit-scrollbar-track {
    background: #006400; /* Darker green for the track */
}

header::-webkit-scrollbar-thumb {
    background: #004d00; /* Dark green for the thumb */
    border-radius: 5px; /* Rounded corners for the thumb */
}

header::-webkit-scrollbar-thumb:hover {
    background: #003300; /* Even darker green on hover */
}




header .logo {
    display: flex;
    align-items: center;
}


header .logo .logo-link {
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-size: 1.5em; /* Larger font size for the text */
}


header .logo .logo-link:hover {
    text-decoration: underline; /* Underline on hover */
}


header .logo img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}


header nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}


header nav ul li {
    margin: 0 10px;
}


header nav ul li a {
    color: #fff;
    text-decoration: none;
}


/* Button style for header */
header .nav-button {
    background-color: #008a00; /* Slightly different green for navigation buttons */
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
}


header .nav-button:hover {
    background-color: #004400; /* Darker green on hover */
}


header .social-btn-container {
    display: flex;
    align-items: center; /* Aligns buttons vertically center */
}





#home {
    margin-top: 40px;  /* Adjust the value as needed */
    margin-bottom: 120px;  /* Adjust the value as needed */
}






/* Script that help nav-buttons to go to correct place with sticky header */


/* Ensure this matches the height of your sticky header */
section {
    scroll-margin-top: 70px; /* Adjust this value to match the height of your sticky header */
}


/* If you have specific sections you want to target */
#home {
    scroll-margin-top: 170px; /* Adjust to match your sticky header height */
}



/* Footer styling */
footer {
    background-color: #004d00; /* Dark green background */
    color: #fff;
    text-align: center;
    padding: 10px 0; /* Adjust padding for less space around content */
    width: 100%; /* Full width of the page */
    margin-top: 0; /* Ensure there's no extra margin above the footer */
    position: static; /* Normal flow positioning */
}


footer #social-footer {
    margin-bottom: 10px; /* Space below the social buttons */
    margin-top: 10px; /* Remove or adjust space above the section */
    padding: 0; /* Remove padding if adding extra space */
}


footer #social-footer h2 {
    margin: 0; /* Remove margin around the heading */
    font-size: 1.2em; /* Size of the heading */
    color: #ffffff; /* White text color for high contrast */
}




/* Additional spacing rules for specific button pairs */
.social-btn.telegram + .social-btn.dexscreener {
    margin-left: 30px; /* Extra space between Telegram and DexScreener */
}


/* Individual button styles for different icons */
.social-btn.x {
    background-image: url('X icon.png'); /* Replace with actual icon path */
}


.social-btn.telegram {
    background-image: url('Telegram icon.png'); /* Replace with actual icon path */
}


.social-btn.dexscreener {
    background-image: url('Dexscreener icon.png'); /* Replace with actual icon path */
}


.social-btn.dextools {
    background-image: url('Dextools icon.jpg'); /* Replace with actual icon path */
}


.social-btn.birdeye {
    background-image: url('Birdeye icon.jpg'); /* Replace with actual icon path */
}


/* Footer text styling */
footer p {
    margin: 10px 0 0; /* Space above the text */
    font-size: 0.9em; /* Slightly smaller font size */
}




/* Hero section styling */
.hero {
    text-align: center;
    padding: 50px 20px;
}


/* Hero logo text */
.hero-logo h1 {
    margin: 0;
    color: #004d00; /* Dark green text to match the theme */
    font-size: 1.5em; /* Adjust font size */
    font-family: Arial, sans-serif; /* Font family */
    font-weight: bold; /* Bold text */
}

/* Hero image styling */
.hero-logo img {
    max-width: 100%; /* Ensure the image scales within the container */
    height: auto; /* Maintain aspect ratio */
    margin: 20px auto; /* Center the image horizontally */
    display: block; /* Remove extra space below the image */
}

/* Hero section text styling */
.hero p {
    font-size: 1.2em; /* Adjust font size */
    color: #ffffff; /* Text color */
}



/* Center the hero-logo */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
    
/* Style for the hero text */
.hero-logo h1 {
    font-size: 48px; /* Adjust this value to change the size */
    margin-bottom: 10px; /* Optional: add some space between the text and the image */
    color: #008a00; /* Dark green color to match the theme */
}





.ca-address {
    margin-top: 20px;
    font-size: 1em;
    color: #666;
}




/* Section styling */
section {
    padding: 20px;
}


section h2 {
    font-size: 2.5em !important; /* Larger font size for section headings */
    margin-bottom: 20px !important;
    color: #008a00; /* Dark green text */
    font-weight: bold !important; /* Bold section headings */
}


section p {
    font-size: 1.1em;
    color: #555;
}


/* Tokenomics section styling */
#tokenomics {
    padding: 40px 20px;
    text-align: center; /* Center text within the section */
    margin: 20px auto;
    max-width: 1200px; /* Max width for better layout */
}


/* Style for plain text in tokenomics section */
#tokenomics p {
    font-size: 1.1em; /* Adjust font size to match the other text */
    color: #e0e0e0; /* Dark color for readability */
    margin: 10px 0; /* Add margin to separate paragraphs */
    line-height: 1.6; /* Improved line spacing for readability */
}

#tokenomics h2 {
    color: #008a00; /* Dark grey color for the text */
}

/* Style for the tokenomics links */
#tokenomics a.plain-link {
    color: #008a00; /* Dark green color for links */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Bold for emphasis */
    transition: color 0.3s ease; /* Smooth color transition */
}


#tokenomics a.plain-link:hover {
    color: #003300; /* Darker green on hover */
    text-decoration: underline; /* Underline on hover */
}


/* Heading for the pie chart */
.tokenomics-visual h3 {
    font-size: 1.8em; /* Larger font size for the heading */
    color: #008a00; /* Dark green color to match the theme */
    margin: 20px 0; /* Space above and below the heading */
}


.tokenomics-visual {
    margin-top: 40px;
}


/* Margin adjustments for text elements */
#buy-sell-tax {
    margin-bottom: 10px; /* Space below the element */
}


.minted {
    margin-bottom: 10px; /* Space below the element */
}


#total-supply {
    margin-bottom: 10px; /* Space below the element */
}


.lp-locked-text {
    margin-bottom: 60px; /* Space below the element */
}




/* Buy guide section styling */
#buy-guide {
    max-width: 800px;
    margin: 0 auto;
    text-align: center; /* Center the text */
}


#buy-guide h2 {
    font-size: 2.5em; /* Larger font size for heading */
    margin-bottom: 30px;
    color: #008a00; /* Dark green text */
    font-weight: bold; /* Make heading bold */
}


.buy-steps {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between steps */
}


.buy-step {
    background-color: #f9fff9; /* Lighter background for steps */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left; /* Align text to the left within steps */
}


.buy-step h3 {
    font-size: 1.8em; /* Larger text for steps */
    color: #004d00; /* Dark green text */
    margin-bottom: 15px;
    font-weight: bold; /* Make step headings bold */
}


.buy-step p {
    font-size: 1.1em;
    color: #333;
    line-height: 1.6;
    margin-bottom: 15px;
}


.buy-step ul {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}


.buy-step ul li {
    margin-bottom: 10px;
}


.buy-step ul li a {
    color: #004d00; /* Dark green text */
    text-decoration: none;
    font-weight: bold; /* Make link text bold */
    transition: color 0.3s ease; /* Smooth color transition */
}


.buy-step ul li a:hover {
    color: #003300; /* Darker green on hover */
}


/* Additional styling for nested list inside Step 2 */
.buy-step ul ul {
    margin-left: 15px; /* Slightly reduce indent for nested list */
    padding-left: 0; /* Ensure padding is consistent */
}


.buy-step ul ul li {
    margin-bottom: 5px; /* Smaller margin for nested items */
}


/* Buy button style */
.buy-button {
    display: inline-block;
    background-color: #004d00; /* Dark green button */
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 10px;
    font-weight: bold; /* Make button text bold */
}


.buy-button:hover {
    background-color: #003300; /* Even darker green on hover */
}


/* Error and loading messages */
.error {
    color: red;
    font-weight: bold;
}


.loading {
    font-size: 1.2em;
    color: #555;
}


/* Contact Us Section Styling */
#contact-us {
    padding: 40px 20px;
    background-color: #e8f5e9; /* Slight green background to match the theme */
    text-align: center; /* Center text within the section */
    border-radius: 8px; /* Rounded corners for better appearance */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
    margin: 20px auto; /* Center the section horizontally */
    max-width: 600px; /* Max width for better layout */
}


/* Contact Us Heading */
#contact-us h2 {
    font-size: 2.5em; /* Larger font size for better visibility */
    color: #004d00; /* Dark green color to match the theme */
    margin-bottom: 20px; /* Space below the heading */
}


/* Contact Us Introduction Paragraph */
#contact-us .intro {
    font-size: 1.2em; /* Slightly larger font size for readability */
    color: #333; /* Dark color for text */
    margin-bottom: 20px; /* Space below the introduction paragraph */
}




/* Email Link Styling */
.email-address {
    color: #004d00; /* Dark green color for the link */
    text-decoration: none; /* Remove underline from the link */
    font-weight: bold; /* Make the link text bold */
    margin-bottom: 20px;
}


/* Hover effect for email link */
.email-address:hover {
    text-decoration: underline; /* Underline on hover for better indication */
    color: #003300; /* Darker green on hover */
}




/* Solmail Address Styling */
.solmail-address {
    color: #004d00; /* Dark green color for the link */
    text-decoration: none; /* Remove underline from the link */
    font-weight: bold; /* Make the link text bold */
    margin-right: 10px; /* Space between the address and the copy icon */
    margin-bottom: 20px;
}


/* Hover effect for Solmail address link */
.solmail-address:hover {
    text-decoration: underline; /* Underline on hover for better indication */
    color: #003300; /* Darker green on hover */
}


/* Style for the copy button */
.copy-button {
    cursor: pointer; /* Indicate that it's clickable */
    font-size: 1.5em; /* Slightly larger icon size */
    color: #004d00; /* Dark green color to match the theme */
    transition: color 0.3s; /* Smooth color transition */
}


/* Change color on hover for better feedback */
.copy-button:hover {
    color: #006400; /* Darker green for hover state */
}




/* Roadmap section styling */
#roadmap {
    padding: 40px 20px;
    text-align: center; /* Center text within the entire roadmap section */
}



#roadmap h2 {
    color: #004d00; /* Dark green color to match the theme */
}



/* Container for timeline to center it */
.timeline-container {
    position: relative;
    width: 80%; /* Adjust as needed */
    margin: 0 auto; /* Center the container */
}


/* Timeline */
.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}


/* Timeline line */
.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 2px;
    background: #004d00; /* Color for the timeline line */
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
}


/* Timeline items */
.timeline-item {
    position: relative;
    margin-bottom: 50px; /* Increased margin for spacing between items */
    padding-left: 50px; /* Increased padding for better placement */
}


/* Timeline marker */
.timeline-item::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 15px;
    height: 15px;
    background: #004d00; /* Color for the markers */
    border-radius: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 1;
}


/* Content of timeline item */
.timeline-item-content {
    background: #e8f5e9; /* Light green background for content */
    padding: 30px; /* Increased padding for more space inside the item */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: background-color 0.3s ease; /* Smooth background color transition */
    text-align: center; /* Center text within each timeline item */
    margin: 0 auto; /* Center content in the timeline item */
    max-width: 600px; /* Max width for better fit */
}


/* Visuals for completed phases */
.timeline-item-content.completed {
    background: #c8e6c9; /* Lighter green for completed phases */
    border: 2px solid #4caf50; /* Green border for completed phases */
}


.timeline-item-content.completed::before {
    content: '✓';
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 20px;
    color: #4caf50;
}


/* Hover effect for timeline items */
.timeline-item-content:hover {
    background-color: #dcedc8; /* Slightly darker green on hover */
}


/* Larger text for phases */
.timeline-item-content h3 {
    font-size: 1.5em; /* Larger text for phases */
    margin: 0 0 30px; /* Increased margin bottom for more space between heading and text */
    text-align: center; /* Center phase headings */
    font-weight: bold; /* Make phase headings bold */
}


/* List styling in timeline items */
.roadmap-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}


.roadmap-checklist li {
    margin-bottom: 20px; /* Increased margin for better spacing between checklist items */
    font-size: 1em;
    color: #333;
    position: relative;
    padding-left: 30px;
    text-align: center; /* Center checklist items */
}


/* Style for completed checklist items */
.roadmap-checklist li.completed {
    color: #4caf50; /* Green color for completed items */
}


.roadmap-checklist li.completed::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #4caf50; /* Green checkmark */
    font-size: 1.2em;
}






/* Style for the Jupiter Terminal container */
#integrated-terminal {
    width: 100%;
    max-width: 500px; /* Increased max-width for better fit */
    height: 400px;
    border: 1px solid #ccc; /* Slightly softer border color */
    border-radius: 12px; /* More rounded corners */
    background: #f9f9f9; /* Light background for a softer look */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow for depth */
    margin: 20px auto;
    position: relative; /* Position relative for overlay positioning */
    padding: 20px; /* Optional padding inside the terminal */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Arrange children in a column */
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center content vertically */
}

/* Style for the loading overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9); /* Slightly more opaque background */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px; /* Larger font size for better visibility */
    color: #555; /* Darker text color for better contrast */
    z-index: 9999;
}



/* Style for the headline container */
.headline-container {
    margin-top: 30px; /* Space above the headline */
    margin-bottom: 20px; /* Space below the headline */
    display: flex; /* Flexbox for headline alignment */
    justify-content: center; /* Center the headline horizontally */
    width: 100%; /* Full width for the headline container */
}


/* Style for the headline */
.headline-container h2 {
    margin: 0; /* Remove margin to control spacing via container */
    padding: 20px 0; /* Space above and below the headline */
    color: #004d00; /* Dark green color to match the theme */
    font-size: 2.5em; /* Font size to match navigation links or adjust as needed */
    font-family: Arial, sans-serif; /* Ensure the font family is consistent */
    font-weight: bold; /* Make the text bold to match navigation links */
    text-align: center; /* Center the text */
}


/* Chart Heading */
#chart h2 {
    font-size: 2.5em; /* Larger font size for better visibility */
    color: #008a00; /* Dark green color to match the theme */
    margin-bottom: 20px; /* Space below the heading */
    text-align: center; /* Center heading text */
}


/* Birdeye graph */
.chart-container {
    position: relative;
    width: 100%; /* Full width of the parent container */
    max-width: 1000px; /* Increased max width by 20% */
    height: 450px; /* Increased height by 50% */
    margin: 0 auto 20px; /* Center the container and add space below */
    padding-top: 0; /* Removed aspect ratio padding */
}


/* Ensure the chart fits within the container */
.chart-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ensures the iframe fits within the container */
    border: none; /* Remove default border */
}

    .chart-container {
        width: 95%; /* Increase width percentage for better fit on small screens */
        height: 350px; /* Adjust height for smaller screens if needed */
    }




/* Container for buttons */
.chart-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    align-items: center; /* Center buttons horizontally */
    justify-content: flex-start; /* Align buttons to the top */
    margin-top: 20px; /* Reduce space above the buttons */
}

/* Style for individual buttons */
.chart-buttons a {
    display: block; /* Ensure buttons are block elements */
    height: 50px; /* Fixed height for buttons */
    width: 300px; /* Adjust width to make buttons more compact */
    background-size: contain; /* Ensure background image fits within button */
    background-repeat: no-repeat; /* Prevent image repetition */
    background-position: center; /* Center background image */
    margin: 10px 0; /* Reduce space between buttons */
    padding: 0; /* Remove padding */
    text-align: center; /* Center text if there's any */
    line-height: 50px; /* Center text vertically if there's any */
    color: transparent; /* Hide text if only images are used */
}

/* Individual button styles */
.chart-buttons .dexscreenertext {
    background-image: url('Dexscreener text icon.png'); /* Icon path */
}

.chart-buttons .dextoolstext {
    background-image: url('Dextools text icon.png'); /* Icon path */
}

.chart-buttons .birdeyetext {
    background-image: url('Birdeye text icon.png'); /* Icon path */
    background-size: 70% auto; /* Adjust size for this button */
}




/* CA copy */


/* Styling for confirmation message */
.confirmation-message {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #4caf50; /* Green background */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 9999;
}


/* Styling for error message */
.error-message {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #f44336; /* Red background */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 9999;
}


/* Container for CA address and label */
.ca-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap onto the next line */
    align-items: center; /* Vertically center items */
    margin-top: 10px; /* Space above the container */
    gap: 10px; /* Space between items */
    max-width: 100%; /* Ensure it doesn’t exceed the width of the parent container */
    box-sizing: border-box; /* Include padding and border in element's total width */
}

/* CA address styling */
.ca-address {
    word-wrap: break-word; /* Break long words onto the next line */
    overflow-wrap: break-word; /* Break long words if necessary */
    max-width: 100%; /* Ensure it doesn’t exceed container width */
    white-space: normal; /* Allow text to wrap */
    display: inline-block; /* Allows it to sit alongside other elements */
    box-sizing: border-box; /* Include padding and border in element's total width */
}




/* Responsive adjustments */
@media (max-width: 768px) {
    .ca-container {
        flex-direction: column; /* Stack items vertically on smaller screens */
        align-items: flex-start; /* Align items to the start of the container */
    }
}




/* Styling for CA label */
.ca-label {
    margin-right: 10px; /* Space between label and address */
    font-weight: bold; /* Make the label bold */
    font-size: 1em; /* Adjust font size if needed */
    color: #008a00; /* Match the theme color */
}


/* Styling for CA address */
.ca-address {
    margin: 0; /* Remove default margin */
    padding-right: 10px; /* Space between the address and the icon */
    font-size: 1em; /* Adjust font size if needed */
    color: #008a00; /* Match the theme color */
    font-family: 'Courier New', Courier, monospace; /* Monospaced font for address */
}


/* Style for the copy button */
.copy-button {
    cursor: pointer; /* Indicate that it's clickable */
    font-size: 1.2em; /* Adjust size of the icon */
    color: #004d00; /* Match the theme color */
    transition: color 0.3s; /* Smooth color transition */
    margin-left: 10px; /* Space between address and copy button */
}


/* Change color on hover for better feedback */
.copy-button:hover {
    color: #006400; /* Darker green for hover state */
}


/* Style for Solmail address */
.solmail-address {
    margin-right: 10px; /* Space between Solmail address and copy button */
}


/* Styling for the tagline */
.tagline {
    font-size: 3em !important; /* Significantly larger font size for prominence */
    font-weight: 900 !important; /* Extra bold text for impact */
    color: #00FF00 !important; /* Bright green color for high contrast against dark background */
    text-align: center !important; /* Center alignment */
    margin: 40px 0 !important; /* Increase space above and below the tagline */
    margin-bottom: 100px !important; /* Increase bottom margin for more spacing */
    font-family: 'Georgia', serif !important; /* Elegant serif font for the tagline */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important; /* Subtle shadow for extra depth and visibility */
}