/* =====================================================
   CrestBridge Services
   Premium Design System v2.0
   Layout
===================================================== */


/* =====================================================
   CONTAINER
===================================================== */

.container-custom{

    width:100%;
    max-width:var(--container);

    margin:0 auto;

    padding:0 28px;

}


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

.section{

    padding:var(--section-padding) 0;

}

.section-sm{

    padding:var(--section-padding-sm) 0;

}


/* =====================================================
   SECTION HEADERS
===================================================== */

.section-heading{

    max-width:1050px;

    margin:0 auto 50px;

    text-align:center;

}

.section-heading.left{

    max-width:1050px;

    text-align:left;

    margin:0 0 40px;

}

.section-heading span{

    display:inline-block;

    margin-bottom:var(--space-sm);

    font-size:14px;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--gold);

}

.section-heading h2{

    margin-bottom:var(--space-md);

}

    max-width:820px;

    margin:0 auto;

}

.section-heading.left p{

    max-width:820px;

    margin:0;

}


/* =====================================================
   GRID SYSTEM
===================================================== */

.grid-2{

    display:grid;

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

    gap:60px;

    align-items:center;

}

.grid-3{

    display:grid;

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

    gap:35px;

}

.grid-4{

    display:grid;

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

    gap:30px;

}


/* =====================================================
   FLEX HELPERS
===================================================== */

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.flex-column{

    display:flex;

    flex-direction:column;

}


/* =====================================================
   CONTENT WIDTHS
===================================================== */

.content-sm{

    max-width:640px;

}

.content{

    max-width:760px;

}

.content-lg{

    max-width:920px;

}


/* =====================================================
   SPACING HELPERS
===================================================== */

.mt-0{margin-top:0;}
.mt-1{margin-top:var(--space-sm);}
.mt-2{margin-top:var(--space-md);}
.mt-3{margin-top:var(--space-lg);}
.mt-4{margin-top:var(--space-xl);}

.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:var(--space-sm);}
.mb-2{margin-bottom:var(--space-md);}
.mb-3{margin-bottom:var(--space-lg);}
.mb-4{margin-bottom:var(--space-xl);}


/* =====================================================
   DIVIDERS
===================================================== */

.divider{

    width:100%;

    height:1px;

    background:var(--border-light);

}


/* =====================================================
   BACKGROUND HELPERS
===================================================== */

.bg-light{

    background:var(--silver);

}

.bg-white{

    background:#FFFFFF;

}

.bg-dark{

    background:var(--gradient-primary);

    color:#FFFFFF;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:991px){

    .section{

        padding:100px 0;

    }

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

    .section-heading{

        margin-bottom:50px;

    }

    .container-custom{

        padding:0 22px;

    }

}