/*==================================================
                    01 Container
==================================================*/

/*==================================================
TOPCABS LAYOUT SYSTEM
==================================================*/

.container{
    width:min(92%,1280px);
    margin:0 auto;
}

.container-sm{
    width:min(92%,1000px);
    margin:0 auto;
}

.container-lg{
    width:min(95%,1400px);
    margin:0 auto;
}

/*==================================================
                02 Section Spacing
==================================================*/

.section{
    padding:90px 0;
}

.section-sm{
    padding:70px 0;
}

.section-lg{
    padding:120px 0;
}

.section-light{
    background:var(--tc-light);
}

.section-white{
    background:#fff;
}

/*==================================================
                03 Grid System
==================================================*/

.grid{
    display:grid;
    gap:30px;
}

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

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

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

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

/*==================================================
                04 Flex Utilities
==================================================*/

.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;
}

/*==================================================
                05 Column Layouts
==================================================*/

.items-center{
    align-items:center;
}

.justify-center{
    justify-content:center;
}

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

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

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


/*==================================================
                06 Section Header
==================================================*/

.section-header{
    text-align:center;
    max-width:820px;
    margin:0 auto 60px;
}

.section-header h2{
    margin:18px 0;
}

.section-header p{
    margin:0 auto;
}



/*==================================================
                07 Common Wrappers
==================================================*/

.w-100{
    width:100%;
}

.max-600{
    max-width:600px;
}

.max-800{
    max-width:800px;
}

.max-1000{
    max-width:1000px;
}


/*==================================================
                08 Responsive Layout Helpers
==================================================*/

.gap-10{
    gap:10px;
}

.gap-20{
    gap:20px;
}

.gap-30{
    gap:30px;
}

.gap-40{
    gap:40px;
}


/*==================================================
                09 Width Helpers
==================================================*/

.mt-20{margin-top:20px;}
.mt-40{margin-top:40px;}
.mt-60{margin-top:60px;}

.mb-20{margin-bottom:20px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}

/*==================================================
                10 Display Utilities
==================================================*/

.d-none{
    display:none;
}

.d-block{
    display:block;
}

.d-inline{
    display:inline-block;
}


/*==================================================
                11 Position Helpers
==================================================*/

.overflow-hidden{
    overflow:hidden;
}

.position-relative{
    position:relative;
}


/*==================================================
                12 Overflow Helpers
==================================================*/

@media (max-width:991px){

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

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

.section{
    padding:70px 0;
}

}

@media (max-width:768px){

.grid-2,
.grid-3,
.grid-4{
    grid-template-columns:1fr;
}

.container,
.container-sm,
.container-lg{
    width:94%;
}

.section{
    padding:60px 0;
}

.flex-between{
    flex-direction:column;
    gap:20px;
}

}


/*==================================================
                Extra TOPCABS LAYOUT SYSTEM
==================================================*/