/* ==========================================================
   CONTAINERS
========================================================== */

.container {

    width: 100%;

    max-width: 1440px;

    margin: 0 auto;

    padding: 0 24px;

}

.page-content {

    max-width: 1200px;

    margin: 0 auto;

}


/* ==========================================================
   PAGE SECTIONS
========================================================== */

section {

    position: relative;

}

.section-spacing {

    padding: 40px 0;

}

.catalogue-search,
.category-directory,
.brand-directory,
.vehicle-directory,
.product-directory,
.catalogue-products {

    padding: 20px 0;

}


/* ==========================================================
   SECTION HEADINGS
========================================================== */

.section-heading {

    text-align: center;

    margin-bottom: 48px;

}

.section-heading h2 {

    margin-bottom: 12px;

    font-size: 42px;

    font-weight: 800;

    color: #111827;

}

.section-heading p {

    max-width: 700px;

    margin: 0 auto;

    color: #6b7280;

}


/* ==========================================================
   CTA
========================================================== */

.cta-banner {

    padding: 20px 0;

}

.cta-wrapper {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    padding: 24px;

    background: #ffffff;

    border: 1px solid var(--border-color);

    border-radius: 20px;

}

.cta-content {

    max-width: 700px;

}

.cta-tag {

    display: inline-block;

    margin-bottom: 8px;

    color: var(--color-primary);

    font-weight: 700;

}

.cta-content h2 {

    margin-bottom: 8px;

}

.cta-content p {

    color: var(--text-secondary);

}

.cta-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}


/* ==========================================================
   BREADCRUMB
========================================================== */

.breadcrumb {

    padding: 16px 0;

    background: #ffffff;

    border-bottom: 1px solid var(--border-color);

}

.breadcrumb-list {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    list-style: none;

}

.breadcrumb-item {

    font-size: 14px;

}

.breadcrumb-item.active {

    font-weight: 600;

}


/* ==========================================================
   FLEX UTILITIES
========================================================== */

.flex {

    display: flex;

}

.flex-center {

    display: flex;

    justify-content: center;

    align-items: center;

}

.flex-between {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


/* ==========================================================
   GRID UTILITIES
========================================================== */

.grid {

    display: grid;

}

.grid-2 {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 24px;

}

.grid-3 {

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 24px;

}

.grid-4 {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 24px;

}