/* Import Custom Font */
@font-face {
font-family: 'Lemon Days';
src: url('assets/fonts/Lemon Days.ttf') format('truetype');
}

/* Reset and Base Styles */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


body {
font-family: Arial, sans-serif;
overflow-x: hidden;
}

/* Sticky Header */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: white;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}


.nav {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
gap: 40px;
padding-left: 40%;
}

.nav-link {
font-family: 'Lemon Days', sans-serif;
color: white;
text-decoration: none;
font-size: 24px;
font-weight: bold;
-webkit-text-stroke: 6.5px #0d6691;
text-stroke: 4px #0d6691;
paint-order: stroke fill;
transition: transform 0.3s ease;
}

.nav-link:hover { transform: scale(1.1); }
/* Sections */
.section {
min-height: 100vh;
padding-top: 100px;
}

.home-section {
background-image: url('Assets/1-First\ Section\ Background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}


/* Titles */
.main-title {
    font-family: 'Lemon Days', sans-serif;
    color: white;
    font-size: 95px;
    -webkit-text-stroke: 12px #0d6691;
    text-stroke: 4px #0d6691;
    paint-order: stroke fill;
    margin-bottom: 20px;
    z-index: 2;
    position: relative;
    top: -35px;
    left: -145px;

    /* ADDED FOR PHOTOSHOP SMALL CAPS EFFECT */
    font-variant: small-caps;
    letter-spacing: 2px;
    text-transform: none; 
}

.subtitle {
font-family: 'Lemon Days', sans-serif;
color: white;
font-size: 40px;
-webkit-text-stroke: 8px black;
text-stroke: 3px black;
paint-order: stroke fill;
margin-bottom: 50px;
z-index: 2;
position: relative;
top: -58px;
left: -160px;

/* ADDED HERE TOO FOR MOBILE */
        font-variant: small-caps;
        text-transform: none;
}

.character {
position: absolute;
right: 14%;
bottom: 5%;
width: 350px;
max-width: 80%;
height: auto;
z-index: 1;
}

/* Contract Section */
.contract-section {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
top: -80px;
left: -100px;
}

.contract-label {
font-family: 'Lemon Days', sans-serif;
color: white;
font-size: 25px;
-webkit-text-stroke: 5px #000000;
text-stroke: 2px #0d6691;
paint-order: stroke fill;
margin-bottom: 20px;
position: relative;
left: -200px;
}

.contract-copy-container {
display: flex;
align-items: center;
gap: 15px;
position: relative;
top: -30px;
left: -40px;
}

.contract-address-bar {
    background-color: white;
    border: 4px solid #0d6691;
    border-radius: 15px;
    padding: 5px 5px 5px 1px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
    min-width: 670px; /* INCREASED from 600px to prevent overlap */
    
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contract-address-text {
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: #000000;
margin: 0;
flex-grow: 1;
}

.simple-copy-button {
background-color: #ff0000;
border: 2px solid #000000;
border-radius: 8px;
padding: 10px 20px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.simple-copy-button span {
font-family: 'Lemon Days', sans-serif;
color: white;
font-size: 15px;
font-weight: bold;
-webkit-text-stroke: 1px rgb(0, 0, 0);
text-stroke: 1px rgb(255, 255, 255);
}

.simple-copy-button:hover { transform: scale(1.05); }
.simple-copy-button:active { transform: scale(0.95); }

/* Buy Button */
.buy-button {
position: relative;
top: -22px;
left: -85px;
transition: transform 0.2s ease;
}
.buy-button img { width: 200px; height: auto; }
.buy-button:hover { transform: scale(1.05); }

/* Notification */
.copied-notification {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(13, 102, 145, 0.95);
color: white;
padding: 20px 40px;
border-radius: 10px;
font-family: 'Lemon Days', sans-serif;
font-size: 32px;
z-index: 9999;
animation: fadeInOut 2s ease-in-out;
}

@keyframes fadeInOut {
0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
20%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Titles */
.main-title {
    font-family: 'Lemon Days', sans-serif;
    color: white;
    font-size: 95px;
    -webkit-text-stroke: 12px #0d6691;
    text-stroke: 4px #0d6691;
    paint-order: stroke fill;
    margin-bottom: 20px;
    z-index: 2;
    position: relative;
    top: -35px;
    left: -145px;

    /* ADDED FOR PHOTOSHOP SMALL CAPS EFFECT */
    font-variant: small-caps;
    letter-spacing: 2px;
    text-transform: none; 
}

/* ALL MOBILE STYLES IN ONE PLACE */
@media (max-width: 768px) {
    .nav { padding-left: 0; flex-wrap: wrap; gap: 10px; }
    .nav-link { font-size: 18px; }
    
    .main-title { 
        font-size: 50px; 
        left: 0; 
        /* ADDED HERE TOO FOR MOBILE */
        font-variant: small-caps;
        text-transform: none;
    }

    .subtitle {
        font-size: 25px; left: 0;
    /* ADDED HERE TOO FOR MOBILE */
        font-variant: small-caps;
        text-transform: none;
    
    }

    .character { width: 250px; }
    .contract-address-bar { min-width: 90%; padding: 10px; }
    .contract-address-text { font-size: 10px; }
    .contract-label { left: 0; font-size: 18px; }
    .contract-section { left: 0; }
    .contract-copy-container { left: 0; }
    .buy-button { left: 0; }
}

/* Import AmberlySans - Make sure path is correct */
@font-face {
    font-family: 'AmberlySans';
    src: url('assets/fonts/AmberlySans') format('truetype');
}

/* About Section Styles */
.about-section {
    background-image: url('Assets/2nd-page-about.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 5% 50px 5%;
}

/* Top Titles */
.about-header {
    text-align: center;
    margin-bottom: 50px;
}

.about-title {
    font-family: 'Lemon Days', sans-serif;
    color: white;
    font-size: 80px;
    -webkit-text-stroke: 11px #0d6691;
    paint-order: stroke fill;
    font-variant: small-caps;
    text-transform: none;
    /* ADDED FOR PHOTOSHOP SMALL CAPS EFFECT */
    font-variant: small-caps;
    letter-spacing: 2px;
    text-transform: none; 
}

.about-subtitle {
    font-family: 'Lemon Days', sans-serif;
    color: white;
    font-size: 30px;
    -webkit-text-stroke: 5px black;
    paint-order: stroke fill;
    margin-top: 10px;
}

/* Layout Grid */
.about-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    gap: 1;
    align-items: flex-start;
}   

/* Left Column Text */
.about-text-content {
    flex: 1; /* Takes 50% width */
    color: white;
    font-family: 'AmberlySans', sans-serif;
    text-align: left;
    font-variant: small-caps;
    text-transform: none;
    line-height: 1.4;
}

.about-description, .different-title, .different-list, .about-footer {
    -webkit-text-stroke: 4px black;
    paint-order: stroke fill;
    font-size: 24px;
    margin-bottom: 25px;
}

.different-title {
    font-size: 24px;
    margin-top: 20px;
}

.different-list {
    list-style: none;
    padding: 0;
}

.different-list li {
    margin-bottom: 15px;
}

/* Right Column (Empty for now) */
.about-video-space {
    flex: 1; /* Takes other 50% width */
    min-height: 400px; /* Placeholder height */
}

/* Mobile Fix */
@media (max-width: 1024px) {
    .about-container {
        flex-direction: column;
    }
    .about-title { font-size: 50px; }
    .about-text-content { text-align: center; }
}

/* Container to hold the video and button */
.video-adjuster {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    
    /* MOVE OPTIONS: Adjust these to move the video left or right */
    margin-left: 20px; 
    margin-top: 100;
}

#booby-video {
    width: 110%;      /* Slightly bigger than the container */
    max-width: 600px; /* Limits size on big screens */
    height: auto;
    display: block;
}

/* Style for the unmute button under the video */
.audio-toggle {
    margin-top: -20px; /* Pulls button up slightly onto the video */
    z-index: 5;
    transform: scale(0.8); /* Makes it a bit smaller */
}

/* Featured Section */
.featured-section {
    background-color: #c8f8ff;
    padding: 100px 5% 50px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.featured-header {
    text-align: center;
    margin-bottom: 50px;
}

.featured-main-title {
    font-family: 'Lemon Days', sans-serif;
    color: white;
    font-size: 80px;
    -webkit-text-stroke: 8px #0d6691;
    paint-order: stroke fill;
    font-variant: small-caps;
    text-transform: none;
}

.featured-subtitle {
    font-family: 'Lemon Days', sans-serif;
    color: white;
    font-size: 28px;
    -webkit-text-stroke: 5px black;
    paint-order: stroke fill;
    margin-top: 10px;
}

/* 3-Column Grid */
.media-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1300px;
    margin-bottom: 60px;
}

/* YouTube Styling */
.video-wrapper iframe {
    width: 100%;
    height: 250px; /* Fixed height for consistency */
    border-radius: 15px;
    border: 5px solid white;
    box-shadow: 0 10px 25px rgba(13, 102, 145, 0.2);
}

/* X (Twitter) Styling - Matching your image's vertical look */
.x-card {
    background: white;
    border-radius: 15px;
    padding: 10px;
    border: 3px solid #0d6691;
    display: flex;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Article Boxes - Styled like your screenshot */
.article-box {
    background-color: white;
    padding: 20px;
    border-radius: 15px;
    border: 2px solid #0d6691;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
}

.article-box:hover {
    transform: translateY(-5px);
}

.article-thumb {
    width: 100%;
    height: 140px;
    background-color: #f0f0f0;
    border: 2px solid #ddd;
    border-radius: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* You can add a placeholder icon here later */
}

/* Final Article Box Styles for Screenshots */
.article-box {
    background-color: white;
    padding: 20px;
    border-radius: 20px;
    border: 3px solid #0d6691;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px; /* Increased slightly to fit images + text */
    transition: all 0.3s ease;
    box-shadow: 0 10px 0px rgba(13, 102, 145, 0.1);
}

.article-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(13, 102, 145, 0.2);
}

.article-thumb {
    width: 100%;
    height: 160px; /* Best height for your 800x450 screenshots */
    background: #f0f0f0;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden; /* This crops the image to the rounded corners */
    border: 1px solid #ddd;
    position: relative;
}

/* This is the new part for your Photoshop images */
.thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps image looking perfect */
    display: block;
}

.article-headline {
    font-family: 'AmberlySans', sans-serif;
    font-size: 20px;
    color: #333;
    line-height: 1.3;
    margin-bottom: 15px;
    font-variant: small-caps;
    text-transform: none;
    -webkit-text-stroke: 0.5px #0d6691;
}

.read-article-btn {
    display: block;
    background-color: #0d6691;
    color: white;
    text-decoration: none;
    padding: 12px;
    border-radius: 10px;
    font-family: 'Lemon Days', sans-serif;
    font-size: 16px;
    text-align: center;
    border: 2px solid black;
    transition: all 0.2s ease;
}

.read-article-btn:hover {
    background-color: #0a4d6e;
    transform: scale(1.03);
}

.buy-section-custom .contract-copy-container {
    margin-bottom: 10px; /* Pushes the BUY button down from the bar */
}

.buy-section-custom {
    min-height: 120vh; /* Increased height to make sure everything fits without overlapping */
    padding-bottom: 100px;
}

.buy-section-custom {
    background: url('Assets/4th-How-to-buy.jpg') no-repeat center center;
    background-size: cover;
    padding: 100px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

.buy-main-title {
    font-family: 'Lemon Days', sans-serif;
    color: white;
    font-size: 70px;
    -webkit-text-stroke: 10px #0d6691;
    text-stroke: 4px #0d6691;
    paint-order: stroke fill;
    text-align: center;
    margin-bottom: 40px;
    /* ADDED FOR PHOTOSHOP SMALL CAPS EFFECT */
    font-variant: small-caps;
    letter-spacing: 2px;
    text-transform: none; 
}

.buy-steps-row {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
    justify-content: center;
    width: 95%; /* Takes up more width to fit 3 boxes */
    max-width: 1300px;
}

.buy-step-card {
    background: rgba(200, 248, 255, 0.95); 
    border: 4px solid #0d6691;
    border-radius: 20px;
    padding: 25px;
    flex: 1; /* This makes all three boxes exactly the same width */
    max-width: 380px; 
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 10px 0px #0d6691;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.buy-step-card:hover {
    transform: translateY(-15px) scale(1.03);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 20px 40px rgba(13, 102, 145, 0.4);
}

.step-card-title {
    font-family: 'Lemon Days', sans-serif;
    color: #ffffff;
    font-size: 24px;
    -webkit-text-stroke: 5px #0d6691;
    paint-order: stroke fill;
    margin-bottom: 15px;
}

.step-card-text {
    font-family: 'AmberlySans', sans-serif;
    color: #ffffff;
    font-size: 18px;
    -webkit-text-stroke: 3.5px #000000;
    paint-order: stroke fill;
    line-height: 1.4;
}


/* Push the instruction text away from the boxes */
.ca-instruction-text {
    font-family: 'Lemon Days', sans-serif;
    color: white;
    font-size: 24px;
    -webkit-text-stroke: 4px black;
    paint-order: stroke fill;
    margin-top: 60px;    /* Pushes text down from the 3 boxes */
    margin-bottom: 44px; /* Pushes the copy bar down from this text */
    text-align: center;
}

/* Adjusting the Buy Button for this section */
.buy-button-secondary img {
    width: 200px;
    height: auto;
    margin-top: 1px;
    transition: transform 0.2s;
}

.buy-button-secondary:hover img {
    transform: scale(1.1);
}

/* Update Mobile Fix for 3 boxes */
@media (max-width: 1100px) {
    .buy-steps-row {
        flex-direction: column;
        align-items: center;
    }
    .buy-step-card {
        width: 90%;
        max-width: 450px;
    }
}


/* Specific Fix to match Top Bar exactly and Center it */
.buy-section-custom .contract-address-bar {
    min-width: 670px;     /* Matches your top bar width */
    height: auto;         /* Resets thickness to match top bar */
    margin: 0 auto;       /* Centers the bar */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 5px 5px 1px; /* Matches top bar padding */
}

/* Adjust the text inside to match top bar exactly */
#contractAddressSecondary {
    padding-left: 20px;   /* Pushes text away from the left stroke */
    font-size: 18px;      /* Matches top bar font size */
    font-weight: bold;
    line-height: normal;  /* Resets the height-centering */
    flex-grow: 1;
}

/* Resets the copy button size to match the top bar */
.buy-section-custom .simple-copy-button {
    height: auto;         /* Matches top bar button thickness */
    margin-right: 0px;
}

/* Make sure the COPY button also shrinks to fit the thin bar */
.buy-section-custom .simple-copy-button {
    height: 35px;         /* Smaller button height */
    margin-right: 5px;    /* Keeps it away from the right edge */
}


/* Community Section Styling */
.community-section-custom {
    background: url('Assets/5-community.jpg') no-repeat center center;
    background-size: cover;
    padding: 100px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.community-main-title {
    font-family: 'Lemon Days', sans-serif;
    color: white;
    font-size: 75px;
    -webkit-text-stroke: 8px #0d6691;
    paint-order: stroke fill;
    text-align: center;
    margin-bottom: 60px;
    font-variant: small-caps;
}

.community-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    gap: 50px;
}

/* Social Boxes Left Side */
.community-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: 0 1 auto; /* Prevents the left side from stretching to 50% width */
    align-items: flex-start; /* Keeps boxes aligned to the left */
}

.social-box {
    background: rgba(200, 248, 255, 0.9);
    border: 4px solid #0d6691;
    border-radius: 20px;
    padding: 20px 25px;
    width: 450px;       /* FIXED WIDTH: Change this number to make it even shorter */
    max-width: 100%;    /* Ensures it doesn't break on small screens */
    transition: all 0.3s ease;
    box-shadow: 0 10px 0px #0d6691;
}

.social-box:hover {
    transform: scale(1.03) translateY(-5px);
    background: white;
}

.social-box-title {
    font-family: 'Lemon Days', sans-serif;
    color: #0d6691;
    font-size: 28px;
    margin-bottom: 15px;
    text-align: center;
}

.social-box-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-logo-img {
    width: 80px;
    height: auto;
    transition: transform 0.2s ease;
}

.social-logo-link:hover .social-logo-img {
    transform: rotate(10deg) scale(1.1);
}

.social-box-text {
    font-family: 'AmberlySans', sans-serif;
    color: #333;
    font-size: 18px;
    line-height: 1.3;
}

/* Mascot Animation Right Side */
.community-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* New Video Animation Container */
.community-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-animation-container {
    width: 100%;
    max-width: 500px; /* Adjust this to make the video bigger or smaller */
    display: flex;
    justify-content: center;
    align-items: center;
}

.community-gif {
    width: 100%;
    height: auto;
    border-radius: 20px; /* Optional: adds a slight curve to the video corners */
    /* Optional: If you want a blue glow behind the video like the boxes */
    filter: drop-shadow(0 10px 20px rgba(13, 102, 145, 0.3));
}

/* Ensure the container spacing stays clean */
.community-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    gap: 60px; /* Space between the social boxes and your video */
}






/* Responsive Fix */
@media (max-width: 1024px) {
    .community-container { flex-direction: column; text-align: center; }
    .social-box-content { justify-content: center; }
    .community-main-title { font-size: 50px; }
}