/*
|--------------------------------------------------------------------------
| Universal Layout System
|--------------------------------------------------------------------------
| Responsibility:
| Containers
| Sections
| Grids
| Structural alignment only
|--------------------------------------------------------------------------
*/

/* Main Container */
.container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Universal Sections */
section {
    position: relative;
    width: 100%;
}

.section-spacing-lg {
    padding: var(--section-spacing-lg) 0;
}

.section-spacing-md {
    padding: var(--section-spacing-md) 0;
}

.section-spacing-sm {
    padding: var(--section-spacing-sm) 0;
}

.section-spacing-xs {
    padding: var(--section-spacing-xs) 0;
}

/* Universal Wrapper */
.content-wrapper {
    width: 100%;
    position: relative;
}

/* Universal Grid Base */
.grid {
    display: grid;
    width: 100%;
}

/*
|--------------------------------------------------------------------------
| Stats Grid
|--------------------------------------------------------------------------
*/
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap-md);
    align-items: stretch;
}

/*
|--------------------------------------------------------------------------
| Contact Grid
|--------------------------------------------------------------------------
*/
.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap-md);
    align-items: stretch;
}

/*
|--------------------------------------------------------------------------
| Packages Grid
|--------------------------------------------------------------------------
*/
.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap-md);
    align-items: stretch;
}

/*
|--------------------------------------------------------------------------
| Features Grid
|--------------------------------------------------------------------------
*/
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap-md);
    align-items: stretch;
}

/*
|--------------------------------------------------------------------------
| Universal Full Width Element
|--------------------------------------------------------------------------
*/
.full-width {
    grid-column: 1 / -1;
}

/*
|--------------------------------------------------------------------------
| Universal Card Box Wrapper
|--------------------------------------------------------------------------
*/
.card-box {
    width: 100%;
    background: var(--white);
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/*
|--------------------------------------------------------------------------
| Button Groups
|--------------------------------------------------------------------------
*/
.button-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/*
|--------------------------------------------------------------------------
| Text Alignment Helpers
|--------------------------------------------------------------------------
*/
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/*
|--------------------------------------------------------------------------
| Universal Flex Helpers
|--------------------------------------------------------------------------
*/
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/*
|--------------------------------------------------------------------------
| Responsive Layout
|--------------------------------------------------------------------------
*/
@media (max-width: 992px) {
    .stats-grid,
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .packages-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid,
    .contact-grid,
    .packages-grid,
    .features-grid {
        grid-template-columns: 1fr;
    }

    .container {
        padding: 0 15px;
    }

    .card-box {
        padding: 25px;
    }
}
.section-block {
    padding: 80px 0;
}

.section-alt {
    background: var(--ivory-dark);
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}