/* age limet to open a websit*/
/* --- Age Gate Styles --- */

/* Full-screen overlay to block content */
#age-gate-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black background */
    z-index: 9999; /* Ensure it's on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s;
    opacity: 0;
    visibility: hidden;
}

#age-gate-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.age-gate-box {
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.age-gate-box h1 {
    color: #cc0000; /* Red color for emphasis */
    margin-bottom: 20px;
}

.button-container button {
    padding: 10px 20px;
    margin: 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

#btn-over-age {
    background-color: #4CAF50; /* Green for YES */
    color: white;
}

#btn-under-age {
    background-color: #f44336; /* Red for NO */
    color: white;
}

.disclaimer {
    font-size: 0.8em;
    color: #666;
    margin-top: 20px;
}

/* Hide content by default, though the overlay should block it */
#main-content {
    /* Styles for the rest of your site */
}







/*how to make my website title by the left multiple button with link  bellow down in the middle and search button with link on top and  login by the right side card button by the right side at the end*/
 /* --- 1. Overall Header Layout --- */
.main-header {
    display: flex;
    /* Horizontally spaces the Left, Middle, and Right sections */
    justify-content: space-between; 
    /* Vertically aligns all section content to the center */
    align-items: center; 
    padding: 10px 20px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ccc;
    width: 100%;
}

/* --- 2. Middle Section (Buttons Bellow Down) --- */
.header-middle {
    /* Auto margins push the left and right sections away, centering the middle */
    margin-left: auto;
    margin-right: auto;
    /* This ensures the middle section doesn't stretch too wide */
    flex-grow: 0; 
}

.main-nav {
    display: flex; /* Makes the buttons sit next to each other */
    gap: 15px; /* Adds space between the buttons */
}

.nav-button {
    /* Style for the buttons */
    text-decoration: none;
    padding: 8px 15px;
    border: 1px solid #007bff;
    color: #007bff;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.nav-button:hover {
    background-color: #007bff;
    color: white;
}

/* --- 3. Right Section (Search, Login, Cart) --- */
.header-right {
    display: flex;
    /* Aligns the items to the right side of the screen */
    align-items: center; 
    gap: 15px; /* Space between the items */
}

/* Style for the title, login, and cart links */
.site-title, .login-btn, .cart-btn, .search-btn {
    text-decoration: none;
    color: #333;
    padding: 5px 0;
}

.site-title {
    font-size: 1.5em;
    font-weight: bold;
}

.cart-btn {
    font-weight: bold;
    color: #cc0000;
}

















/*the first page text at the left and picture at right sliceshow */
/* Container holds both columns and enables the layout */
.container {
    display: flex; /* Activates Flexbox */
    justify-content: space-between; /* Pushes content to the edges, or you can use "flex-start" if you don't want a full-width container */
    gap: 10px; /* This creates the space between the left and right columns! */
    max-width: 150px; /* Optional: Sets a max width for the whole section */
    margin: 0 auto; /* Optional: Centers the container on the page */
    padding: 40px; /* Optional: Adds some padding around the outside */
}





/* Left Column for text and link */
.left-column {
    flex: 0 0 20%; /* Sets the column to be 40% of the container width */
    /* You can add text styling here: */
    padding-right: 1px; /* Extra space near the divide */
}

/* Right Column for the slideshow */
.right-column {
    flex: 0 0 60%; /* Sets the column to be 60% of the container width */
    overflow: hidden; /* Important for the slideshow setup */
    position:relative; /* Important for positioning the images */
}









/*the text at the middle screen*/
/* Container to hide the overflow and set the text's visible area */
.scrolling-text-container {
    width: 100%; /* Spans the full width of the screen */
    overflow: hidden; /* **Crucial:** Hides the text when it's outside the container */
    background-color: #007bff; /* Blue background for the banner */
    padding: 10px 0;
    white-space: nowrap; /* Keeps all text on a single line */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Style the actual text */
.scrolling-text {
    /* Basic text styling */
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0;

    /* Apply the animation */
    animation: scroll-left-to-right 15s linear infinite; /* 15s speed, constant rate, loop forever */
}

/* Define the animation movement */
@keyframes scroll-left-to-right {
    /* Start the text off-screen to the right */
    0% {
        transform: translateX(100%);
    }

    /* End the text off-screen to the left (passing all the way across) */
    100% {
        transform: translateX(-100%);
    }
}








/* --- 1. Positioning the Frames --- */   
.gallery-container {
    /* Use flexbox to put them in a row. */
    display: flex; 
    /* Wrap to the next line if the screen is too narrow */
    flex-wrap: wrap; 
    /* Space out the boxes evenly */
    justify-content: space-around; 
    padding: 20px;
}

/* --- 2. Styling the Individual Box --- */
.picture-frame-box {
    /* Make each box take up about a third of the space */
    width: 300px; 
    margin: 15px;
    padding: 20px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    text-align: center; /* Center the content inside the box */
}

/* --- 3. Styling Elements within the Box --- */
.box-title {
    color: #333;
    font-size: 1.5em;
    margin-bottom: 15px;
}

.picture-box {
    margin-bottom: 15px;
    /* Optional: Create a fixed-size container for the image */
    height: 200px;
    overflow: hidden; 
    border-radius: 4px;
}

.picture-box img {
    width: 100%;
    /* This helps ensure images fill the box and are cropped nicely */
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

.description-text {
    color: #666;
    margin-bottom: 20px;
}

/* --- 4. Styling the Link --- */
.details-link {
    display: inline-block; /* Allows padding and margin */
    color: white; 
    background-color: #007bff; /* A nice primary color */
    padding: 8px 15px;
    text-decoration: none; /* Remove underline */
    border-radius: 50px; /* Pill-shaped button */
    font-weight: bold;
    transition: background-color 0.3s; /* Smooth hover effect */
}

.details-link:hover {
    background-color: #0056b3; /* Darker color on hover */
}








/* --- 1. Gallery Container Setup (CSS Grid) --- */
.gallery-container {
    /* Enables CSS Grid layout */
    display: grid; 
    
    /* Creates a responsive grid of columns. It will try to fit 
       as many columns as possible between 250px and 1fr (equal width). */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    
    /* Adds space between the rows and columns */
    gap: 30px; 
    padding: 20px;
    width: 90%; /* Keeps the gallery centered and spaced from edges */
    margin: 0 auto; 
}

/* --- 2. Individual Picture Item Styling (The Frame) --- */
.picture-item {
    text-align: center;
    /* Optional: Add a subtle border or shadow to the frame */
    border: 1px solid #eee;
    padding: 10px;
}

/* --- 3. Image Styling --- */
.picture-item img {
    /* Makes the image fill its container */
    width: 100%; 
    /* Ensures all images are the same height regardless of aspect ratio */
    height: 250px; 
    object-fit: cover; /* Crops image to fit without stretching */
    display: block;
    transition: transform 0.3s ease; /* Smooth hover transition */
}

/* --- 4. Link and Text Styling --- */
.picture-link, .picture-caption a {
    text-decoration: none; /* Remove underline from links */
    color: #333;
}

.picture-caption {
    padding-top: 10px;
    font-size: 1.1em;
}

/* Optional: Hover Effect */
.picture-link:hover img {
    /* Slightly scales the image for a 'zoom' effect on hover */
    transform: scale(1.05); 
}









/*how can i make a text should be passing from right to left at the top of my screen website */
/* 1. Container for the scrolling text */
.marquee-container {
    /* Puts the bar across the entire top width */
    width: 100%; 
    /* Ensures nothing overflows the container */
    overflow: hidden; 
    /* Sets the height of the bar */
    height: 30px; 
    /* Style for the bar itself */
    background-color: #ff9900; /* Bright orange background */
    color: #ffffff; /* White text color */
    white-space: nowrap; /* Forces text onto a single line */
    box-sizing: border-box;
    padding: 0;
    line-height: 30px; /* Vertically centers the text */
}

/* 2. The Text Element that will be animated */
.marquee-text {
    /* Removes default paragraph margin */
    margin: 0; 
    /* Apply the animation */
    animation: scroll-right-to-left 15s linear infinite;
    /* Adjust this time (15s) to control the speed. Lower = Faster. */
    
    /* Ensure the text is long enough to cover the screen */
    display: inline-block;
    padding-left: 100%; /* Pushes the text off-screen to the right to start the scroll */
}

/* 3. The Animation Rule */
/* This is what tells the browser *how* to move the text */
@keyframes scroll-right-to-left {
    /* 0% is the starting position (completely off-screen to the right) */
    0% {
        transform: translateX(0); /* The starting point, relative to its own padding */
    }
    /* 100% is the ending position (completely off-screen to the left) */
    100% {
        transform: translateX(-100%); /* Moves text to the left by 100% of its own width */
    }
}





/* Container for alignment (puts the boxes next to each other) */
.box-container {
  display: flex; /* Use flexbox for easy horizontal layout */
  justify-content: space-around; /* Distributes space evenly */
  align-items: center;
  width: 90%; /* Take up the full width of its parent element */
  margin-top: 15px;
}

/* Base styling for all three boxes */
.round-box {
  /* Dimensions for a small box */
  width: 50px;
  height: 50px;
  /* Make it round */
  border-radius: 50%;
  /* Optional: Add a shadow for depth */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Center the text inside the box */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Styling for the small text inside the box */
.box-text {
  font-family: sans-serif;
  font-size: 0.9em; /* Small text size */
  color: #fff; /* White text for contrast */
  text-align: center;
  padding: 5px;
}

/* Specific colors for each box */
#box1 {
  background-color: #ff5733; /* Bright Red */
}

#box2 {
  background-color: #33ff57; /* Bright Green */
}

#box3 {
  background-color: #3357ff; /* Bright Blue */
}







.red-text {
  color: red;
}


    





.stage {
  perspective: 1000px; /* Gives the 3D depth feeling */
  width: 300px;
  height: 200px;
  margin: 100px auto;
}

.spinner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 15s infinite linear; /* This makes it turn */
}

.spinner img {
  position: absolute;
  width: 300px;
  height: 200px;
  border: 2px solid white;
}

/* Position each image in a circle */
.spinner img:nth-child(1) { transform: rotateY(0deg) translateZ(300px); }
.spinner img:nth-child(2) { transform: rotateY(90deg) translateZ(300px); }
.spinner img:nth-child(3) { transform: rotateY(180deg) translateZ(300px); }
.spinner img:nth-child(4) { transform: rotateY(270deg) translateZ(300px); }


 /* The "Spin" animation */
@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}





/*Media Queries for small phones to big phones to tablet to laptop to pc */
/* 1. Reset everything to zero gaps */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Lock the width so it doesn't "re-flow" on smaller screens */
html, body {
    width: 1280px; /* This MUST match your meta tag above */
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* Or your preferred color */
    overflow-x: hidden; /* Stops the page from shaking left-to-right */
}

/* 3. Ensure your main container fills that locked width */
.wrapper {
    width: 100%;
    min-height: 100vh;
}