body {
    background-image: url('images/background.jpg'); /* Path to your background image */
    background-size: header only; /* Ensures the image covers the header page */
    background-position: center; /* Centers the image on the page */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-attachment: moving; /* Keeps the background moving when scrolling */
    color: #ffffff; /* Optional: Adjusts the text color for better visibility */
}
/* Reset some default styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Copperplate Gothic Bold';
    color: #000000;
}

header {
    background-color: #d3d3d3;
    color: light brown;
    text-align: center;
    padding: 0rem 0;
}
h1 {
    font-size: 2.5rem;
    font-family: Mongolian Baiti; 
}
p1 {
    font-size: 2.5rem;
    font-family: Mongolian Baiti,Bold;
}
section {
    padding: 2rem;
    text-align: center;
}

#about, #portfolio, #contact {
    margin: 2rem auto;
    max-width: 800px;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

input, textarea {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 0.75rem;
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #357ab8;
}

footer {
    background-color: #222;
    color: #ccc;
    text-align: center;
    padding: 1rem;
}

#founders-note {
    padding: 20px;
    background-color: #d3d3d3;
}
#founders-note h2 {
    font-size: 24px;
    color: #000000;
}
.founder-content img {
    width: 100px;
    border-radius: 50%;
}
.founder-content p {
    font-size: 16px;
    color: #000000;
}
#founders-note {
    background-color:#d3d3d3;
}
body {
    background-color:#D2B48C;
}
 #collection {
    text-align: center;
    margin: 2rem 0;
}

button {
    padding: 0.75rem 1.5rem;
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #D2B48C;
}

#collectionList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.gemstone-item {
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.gemstone-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

#movingText {
    text-align: center;
    overflow: hidden; /* Prevents text from overflowing the container */
    width: 100%; /* Make sure it spans across the screen */
}

.marquee {
    display: inline-block;
    white-space: nowrap;
    animation: moveText 20s linear infinite; /* Adjust duration and behavior */
}

@keyframes moveText {
    0% {
        transform: translateX(100%); /* Start off-screen to the right */
    }
    100% {
        transform: translateX(-100%); /* End off-screen to the left */
    }
}
 #addition {
    margin-top: 1px;
}

.clickable-option {
    font-size: 30px;
    font-weight: bold;
    color: #357AB8; /* medium blue color for the text */
    cursor: pointer; /* Change cursor to indicate it's clickable */
    margin-bottom: 2px;
}

.clickable-option:hover {
    text-decoration: underline; /* Underline on hover for better interaction */
}

.content {
    margin-top: 5px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
    border: 1px solid #ddd;
}

#hidden-link-section {
    margin-top: 20px;
}

#hidden-link {
    display: none; /* Initially hidden */
    margin-top: 10px;
    font-size: 18px;
    color: #007BFF;
    text-decoration: none;
}

#hidden-link:hover {
    text-decoration: underline;
}

button {
    font-size: 16px;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}
.header-section {
    background-image: url('images/header.jpg');
    background-size: cover;
    background-position: center;
    height: 100px;
    color: #fff;
    display: flex;
    align-items: top;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.header-section h1 {
    font-size: 60px;
    font-weight: bold;
    margin: 2;
}

.header-section p {
    font-size: 18px;
    margin: 200px 0 0;
}

 /* Green Button Style */
.green-button {
    display: inline-block;
    background-color: #28a745; /* Green color */
    color: #fff; /* White text */
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 5px; /* Rounded corners */
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.green-button:hover {
    background-color: #218838; /* Darker green on hover */
}
/* Default styles (for desktops) */
body {
    font-size: 16px;
}

/* Styles for mobile devices */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .green-button {
        width: 100%; /* Full-width buttons for smaller screens */
        text-align: center;
    }

    .header-section {
        height: auto; /* Allow the header to adjust height */
        background-size: cover;
    }
}
.container {
    width: 90%; /* Flexible width */
    margin: 0 auto; /* Centered container */
}
img {
    max-width: 100%;
    height: auto;
}
 
.header-content {
    display: flex; /* Use flexbox to align items horizontally */
    align-items: center; /* Vertically align the text and flag */
    gap: 10px; /* Add space between the flag and the text */
}

.flag-icon {
    width: 40px; /* Set the width of the flag */
    height: auto; /* Maintain the aspect ratio */
    border-radius: 3px; /* Optional: Add rounded corners */
}