/* General Styles */
body {
    font-family: 'Times New Roman', serif;
    background-color: #1a1a1a; /* Dark Grey Background */
    color: #d3d3d3; /* Light Gray Text */
    margin: 0;
    padding: 0;
    line-height: 1.6;
    text-align: center;
}

/* Header Styles */
header.main-header {
    background-color: #000000; /* Black Background for Header */
    padding: 20px;
    border-bottom: 3px solid #333; /* Darker Border for Definition */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add Shadow for Depth */
    transition: background-color 0.3s ease, border-bottom 0.3s ease, box-shadow 0.3s ease; /* Smooth Transitions */
    display: flex;
    align-items: center;
    justify-content: center; /* Center contents horizontally */
    position: relative; /* Allows absolute positioning of nav */
}

/* Container for logo */
header.main-header .logo-container {
    flex: 1;
    display: flex;
    justify-content: center; /* Center logo horizontally */
}

header.main-header img {
    max-width: 10%; /* Smaller image size */
    height: auto;
    border-bottom: 3px solid #333; /* Dark Border Below Image */
    transition: max-width 0.3s ease, border-bottom 0.3s ease; /* Smooth Image Resize and Border Transition */
    animation: fadeIn 1s ease-in-out; /* Fade-in effect for the logo */
}

header.main-header h1 {
    font-size: 2.5em; /* Adjusted for better balance with smaller image */
    color: #e0e0e0; /* Slightly Brighter Gray for Contrast */
    margin: 20px 0 0; /* Margin for Spacing */
    transition: color 0.3s ease, margin 0.3s ease; /* Smooth Text Color and Margin Transition */
    animation: slideInFromTop 1s ease-in-out; /* Slide-in effect for the title */
}

/* Navigation Styles */
nav.main-nav {
    margin-left: auto; /* Push nav to the right */
    display: flex;
    gap: 20px;
    align-items: center; /* Align nav items centrally */
    animation: fadeIn 1.5s ease-in-out; /* Fade-in effect for navigation */
}

nav.main-nav a {
    color: #d3d3d3; /* Light Gray for Links */
    text-decoration: none;
    font-size: 1.2rem;
    padding: 10px 20px;
    border-radius: 5px;
    border: 2px solid #333; /* Darker Border for Links */
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease; /* Smooth Transition for Links */
}

nav.main-nav a:hover {
    background-color: #111111; /* Slightly Lighter Background on Hover */
    color: #ffffff; /* Brighten Text on Hover */
    border: 2px solid #555; /* Lighter Border on Hover */
    transform: translateY(-5px); /* Hover effect to lift the link */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add shadow on hover */
}

/* Optional Hover Effect for Header */
header.main-header:hover {
    background-color: #111111; /* Slightly Lighter Background on Hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6); /* Deeper Shadow on Hover */
}

header.main-header img:hover {
    max-width: 15%; /* Slightly larger size on hover */
    border-bottom: 5px solid #555; /* Lighter Border on Hover */
}

header.main-header h1:hover {
    color: #ffffff; /* Brighten Text on Hover */
}

/* Media Queries for Mobile Devices */
@media (max-width: 768px) {
    header.main-header {
        flex-direction: column;
        padding: 10px;
        align-items: center; /* Center items vertically on mobile */
        position: static; /* Remove absolute positioning on mobile */
    }

    header.main-header .logo-container {
        position: static; /* Reset positioning on mobile */
        transform: none; /* Reset transform on mobile */
        margin-bottom: 10px; /* Space between logo and nav on mobile */
    }

    header.main-header img {
        max-width: 50%; /* Adjusted for mobile visibility */
    }

    header.main-header h1 {
        font-size: 1.5em; /* Adjusted for better mobile readability */
        margin: 10px 0;
    }

    nav.main-nav {
        margin-left: 0; /* Remove margin-left on mobile */
        margin-top: 10px; /* Add top margin for spacing on mobile */
        flex-direction: column; /* Stack links vertically */
        gap: 10px;
        align-items: center; /* Center nav items on mobile */
    }

    nav.main-nav a {
        font-size: 0.9rem; /* Adjusted font size for better mobile readability */
        padding: 8px;
    }
}

/* Intro Section Styles */
section.intro {
    padding: 20px;
    background-color: #1a1a1a; /* Dark Background for Intro Section */
    color: #d3d3d3; /* Light Gray Text Color */
    animation: fadeIn 2s ease-in-out; /* Fade-in effect for the intro section */
}

.intro-content {
    display: flex;
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space between video and text */
    flex-wrap: wrap; /* Allows wrapping if screen is too small */
    gap: 20px; /* Space between video and text */
}

.intro-content video {
    max-width: 45%; /* Adjust to fit well within the layout */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow for Depth */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
    animation: slideInFromLeft 1s ease-in-out; /* Slide-in effect for the video */
}

.intro-content video:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}

.intro-text {
    max-width: 45%; /* Ensure text takes up remaining space */
    text-align: left; /* Align text to the left */
    color: #d3d3d3; /* Match text color with the body */
    line-height: 1.6; /* Improve readability */
    padding: 10px; /* Add padding for better spacing */
    animation: slideInFromRight 1s ease-in-out; /* Slide-in effect for the text */
}

.intro-text p {
    font-size: 1.1rem; /* Adjust as needed */
    margin: 0;
}

/* Sneak Peek Section Styles */
section.sneak-peek {
    background-color: #1a1a1a; /* Dark Grey Background */
    padding: 40px 20px;
    transition: background-color 0.3s ease; /* Smooth Background Transition */
    animation: fadeIn 2s ease-in-out; /* Fade-in effect for the section */
}

.content {
    max-width: 80%;
    margin: 0 auto;
}

.content h2 {
    font-size: 2.5em;
    color: #e0e0e0; /* Slightly Brighter Gray */
    border-bottom: 2px solid #333; /* Darker Border */
    padding-bottom: 10px;
    margin-bottom: 20px;
    transition: color 0.3s ease, border-bottom 0.3s ease; /* Smooth Text Color and Border Transitions */
    animation: slideInFromTop 1s ease-in-out; /* Slide-in effect for the heading */
}

.image-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-gap: 20px; /* Space between images */
    animation: fadeIn 2s ease-in-out; /* Fade-in effect for the images */
}

.image-container img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Smooth Corner Radius */
    object-fit: cover; /* Ensure Images Cover Grid Cells */
    transition: transform 0.3s ease; /* Smooth Image Transform */
}

.image-container img:hover {
    transform: scale(1.05); /* Slight Zoom on Hover */
}

.outside-text {
    text-align: center;
    margin-top: 20px;
    color: #ffffff; /* White Text */
    transition: color 0.3s ease; /* Smooth Text Color Transition */
    animation: fadeIn 2s ease-in-out; /* Fade-in effect for the text */
}

.outside-text p {
    font-size: 1.5rem;
    margin: 0;
    line-height: 1.4;
}

/* End Section Styles */
section.end {
    padding: 40px 20px;
    background-color: #2a2929; /* Darker Gray Background */
    color: #d3d3d3; /* Light Gray Text Color */
    text-align: center;
    border-top: 3px solid #333; /* Border for distinction */
    animation: fadeIn 2s ease-in-out; /* Fade-in effect for the section */
}

section.end .content {
    max-width: 800px; /* Limit width for better readability */
    margin: 0 auto; /* Center the content */
    padding: 20px;
}

section.end h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #e0e0e0; /* Slightly lighter gray for the heading */
    line-height: 1.4; /* Improve readability */
    animation: slideInFromTop 1s ease-in-out; /* Slide-in effect for the heading */
}

section.end p {
    font-size: 1.2rem;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Button Styles */
.button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background-color: #19191a; /* Twitter Blue */
    border-radius: 25px;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions for background and transform */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add shadow for depth */
    animation: fadeIn 2s ease-in-out; /* Fade-in effect for the button */
}

.button:hover {
    background-color: #1da1f2; /* Darker Blue on Hover */
    transform: translateY(-5px); /* Lift on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Deeper shadow on hover */
}

/* Footer Styles */
footer {
    background-color: #111111; /* Very Dark Background */
    padding: 20px;
    color: #d3d3d3; /* Light Gray Text */
    text-align: center;
    border-top: 3px solid #333; /* Border for distinction */
    animation: fadeIn 2s ease-in-out; /* Fade-in effect for the footer */
}

footer a {
    color: #d3d3d3; /* Light Gray Text */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth transitions for color and transform */
}

footer a:hover {
    color: #1da1f2; /* Twitter Blue */
    transform: translateY(-2px); /* Slight lift on hover */
}

/* Keyframes for Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInFromTop {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Initial hidden state */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px); /* Slightly move the elements down */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition */
}

/* Visible state to trigger animations */
.visible {
    opacity: 1;
    transform: translateY(0); /* Move elements back to the normal position */
}

/*about us content*/
.about-us-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.about-us-left,
.about-us-right {
    flex: 1;
    margin-right: 20px;
}

.about-us-right ul {
    list-style-type: disc; /* Use disc bullets */
    padding-left: 20px; /* Indent bullets */
}

.about-us-right ul li {
    margin-bottom: 10px;
}

/*Mint Details section*/
.mint-details-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 40px;
}

.mint-details-left,
.mint-details-right {
    flex: 1;
    margin-right: 20px;
}

.mint-details-right img {
    max-width: 100%;
    height: auto;
}

.mint-details-left ul {
    list-style-type: disc; /* Use disc bullets */
    padding-left: 20px; /* Indent bullets */
}

.mint-details-left ul li {
    margin-bottom: 10px;
}

/* Media Queries for Mobile Devices */
@media (max-width: 768px) {
    header.main-header {
        flex-direction: column;
        padding: 10px;
    }

    header.main-header img {
        max-width: 70%; /* Adjusted for mobile visibility */
    }

    header.main-header h1 {
        font-size: 1.5em; /* Adjusted for better mobile readability */
        margin: 10px 0;
    }

    nav.main-nav {
        flex-direction: column; /* Stack links vertically */
        gap: 10px;
        align-items: center;
        margin-top: 10px;
    }

    nav.main-nav a {
        font-size: 0.9rem; /* Adjusted font size for better mobile readability */
        padding: 8px;
    }

    .intro-content {
        flex-direction: column; /* Stack video and text vertically */
        gap: 20px;
    }

    .intro-content video {
        max-width: 100%; /* Ensure video fits within container */
    }

    .intro-text {
        font-size: 0.9rem; /* Adjust text size for mobile */
        max-width: 100%; /* Ensure text container fits well */
    }

    .sneak-peek .content {
        max-width: 100%; /* Adjust width for mobile */
        padding: 20px;
    }

    .image-container {
        flex-direction: column; /* Stack images vertically */
        gap: 15px;
    }

    .button {
        font-size: 0.9rem; /* Adjust button text size for mobile */
        padding: 10px 20px; /* Adjust button padding */
    }

    section.end .content {
        max-width: 100%; /* Adjust width for mobile */
        padding: 20px;
    }

    section.end h2 {
        font-size: 1.5em; /* Adjusted font size for mobile */
    }

    section.end p {
        font-size: 0.9rem; /* Adjusted font size for mobile */
    }

    .about-us-content,
    .mint-details-content {
        flex-direction: column; /* Stack items vertically */
        gap: 20px;
    }

    .about-us-left,
    .about-us-right,
    .mint-details-left,
    .mint-details-right {
        margin-right: 0; /* Remove margin-right on mobile */
    }

    .about-us-right ul,
    .mint-details-left ul {
        padding-left: 0; /* Remove padding on mobile */
    }
}

/* Music Button Style */
#musicControl {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

#musicButton {
    background-color: #000;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

#musicButton:hover {
    background-color: #fff;
    color: #000;
    transform: scale(1.05);
}

#musicButton:active {
    transform: scale(0.95);
}