/* --- General Setup --- */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    background-color: #f8f0e5;
    color: #333;
    text-align: center; /* Center all text content by default */
}

/* ★ KEY CHANGE ★ This is a more standard and reliable way to create a centered column */
.container {
    width: 90%; /* Use 90% of the screen width on mobile */
    max-width: 400px; /* But don't go wider than 400px on desktops */
    margin: 20px auto; /* Center the container on the page with space on top/bottom */
    box-sizing: border-box;
}

/* --- Header --- */
.brand-name {
    font-size: 2.8rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    white-space: nowrap;
}

/* --- Main Content --- */
main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center all direct children (image, buttons) */
}

.mascot-image {
    max-width: 150px;
    height: auto;
    margin-bottom: 40px;
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* ★ KEY CHANGE ★ This will now correctly fill the container's width */
    padding: 15px 20px;
    margin-bottom: 15px;
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; /* Crucial for including padding in the 100% width */
}

.cta-button i {
    margin-right: 10px;
}

/* Specific button styles */
.whatsapp-button { background-color: #25d366; }
.whatsapp-button:hover { background-color: #1da851; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); }
.how-to-buy-button { background-color: #4a6d80; }
.how-to-buy-button:hover { background-color: #3b5a6b; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); }
.about-us-button { background-color: #2d4a5c; }
.about-us-button:hover { background-color: #1e3a4b; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); }

/* --- Styles for How-to-Buy Page --- */
.info-box {
    background-color: #ffffff;
    padding: 25px 35px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}
.mascot-image-small {
    max-width: 100px;
    height: auto;
    margin-bottom: 25px;
    animation: float 4s ease-in-out infinite;
}
.page-title {
    text-align: center;
    font-size: 2.2rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 25px;
}
.instructions-list {
    padding-left: 20px;
    font-size: 1rem;
    line-height: 1.8;
}
.instructions-list li { margin-bottom: 12px; }
.instructions-list ul { padding-left: 25px; margin-top: 12px; }
.back-button {
    margin-top: 25px;
    width: auto;
    padding-left: 30px;
    padding-right: 30px;
    background-color: #4a6d80;
}
.back-button:hover { background-color: #3b5a6b; }

/* --- Responsive Design --- */
@media (max-width: 480px) {
    .brand-name {
        font-size: 2.2rem;
    }
    .cta-button {
        padding: 12px 15px;
        font-size: 1rem;
    }
    .info-box {
        padding: 20px;
    }
    .page-title {
        font-size: 1.8rem;
    }
}