/*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;
}









/*how can i Mack a  style square  multiple box with text inside with style  to my website and  title up  and multiple box down*/
/* Basic Reset and Global Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* Light background for contrast */
}

/* 1. Main Title Style */
.main-header {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: white;
}

.main-header h1 {
    margin: 0; /* Remove default margin for clean look */
}

/* 2. Box Container Layout using Flexbox */
.boxes-container {
    display: flex; /* Enables Flexbox layout */
    justify-content: space-around; /* Spreads the boxes out evenly */
    align-items: flex-start; /* Aligns items to the top (important for multi-row layouts) */
    flex-wrap: wrap; /* Allows boxes to wrap to the next line on smaller screens */
    padding: 20px;
    max-width: 1200px; /* Max width for the content area */
    margin: 0 auto; /* Center the container on the page */
}

/* 3. Individual Box Styles */
.style-box {
    /* Define dimensions for a square box. 
       Note: You can use percentage for responsive design. */
    width: 250px; 
    height: 250px; 
    
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px; /* Slightly rounded corners */
    padding: 20px;
    margin: 15px; /* Spacing between the boxes */
    
    /* Center the text and make it look nice */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    
    /* Ensures padding and border don't increase the total size */
    box-sizing: border-box; 
    
    /* Transition for hover effect */
    transition: transform 0.3s, box-shadow 0.3s;
}

/* 4. Box Hover/Interactive Style (Optional but recommended) */
.style-box:hover {
    transform: translateY(-5px); /* Lift the box up */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Stronger shadow */
}

/* 5. Text inside the box */
.box-title {
    color: #007bff; /* A nice blue color */
    margin-top: 0;
    font-size: 1.5em;
}

.style-box p {
    color: #555;
    line-height: 1.6;
}