/* Layout & Container Styles */

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Section padding */
section {
    padding: 80px 16px;
}

/* Grid & Flexbox utilities */
.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-center {
    align-items: center;
    justify-content: center;
}

.flex-between {
    justify-content: space-between;
}

.flex-wrap {
    flex-wrap: wrap;
}

.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }
.gap-30 { gap: 30px; }
.gap-50 { gap: 50px; }

/* Responsive grid */
.grid {
    display: grid;
}

.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
}

/* Spacing utilities */
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-50 { margin-bottom: 50px; }

.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-50 { margin-top: 50px; }

.p-20 { padding: 20px; }
.p-30 { padding: 30px; }
.p-50 { padding: 50px; }

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Max width utilities */
.max-w-300 { max-width: 300px; }
.max-w-500 { max-width: 500px; }
.max-w-600 { max-width: 600px; }
.max-w-750 { max-width: 750px; }

/* Full width/height utilities */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* Position utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }

.z-1 { z-index: 1; }
.z-10 { z-index: 10; }
.z-100 { z-index: 100; }
.z-1000 { z-index: 1000; }
.z-10000 { z-index: 10000; }