/* ======================================================
   SEAN B SOLUTIONS
   GLOBAL UTILITY CLASSES
   /assets/css/home/utilities.css

   Includes:
   - Display Helpers
   - Flex Helpers
   - Grid Helpers
   - Spacing
   - Text Alignment
   - Colors
   - Width Helpers
   - Shadows
   - Borders
   - Position Helpers
   - Accessibility
====================================================== */


/* ======================================================
   DISPLAY UTILITIES
====================================================== */


.d-none{

    display:none!important;

}


.d-block{

    display:block!important;

}


.d-inline{

    display:inline!important;

}


.d-inline-block{

    display:inline-block!important;

}


.d-flex{

    display:flex!important;

}


.d-grid{

    display:grid!important;

}





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


.flex-row{

    flex-direction:row!important;

}


.flex-column{

    flex-direction:column!important;

}


.align-center{

    align-items:center!important;

}


.align-start{

    align-items:flex-start!important;

}


.align-end{

    align-items:flex-end!important;

}


.justify-center{

    justify-content:center!important;

}


.justify-between{

    justify-content:space-between!important;

}


.justify-start{

    justify-content:flex-start!important;

}


.justify-end{

    justify-content:flex-end!important;

}


.flex-wrap{

    flex-wrap:wrap!important;

}





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


.grid-2{

    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:30px;

}



.grid-3{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;

}



.grid-4{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:25px;

}





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


.w-100{

    width:100%!important;

}


.w-auto{

    width:auto!important;

}


.max-sm{

    max-width:500px;

}



.max-md{

    max-width:750px;

}



.max-lg{

    max-width:1000px;

}





/* ======================================================
   TEXT ALIGNMENT
====================================================== */


.text-center{

    text-align:center!important;

}


.text-left{

    text-align:left!important;

}


.text-right{

    text-align:right!important;

}





/* ======================================================
   TEXT COLORS
====================================================== */


.text-primary{

    color:

    var(--primary)!important;

}



.text-secondary{

    color:

    var(--secondary)!important;

}



.text-white{

    color:#fff!important;

}



.text-muted{

    color:

    var(--text-light)!important;

}





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


.bg-primary{

    background:

    var(--primary)!important;

}



.bg-secondary{

    background:

    var(--secondary)!important;

}



.bg-light{

    background:

    var(--background)!important;

}



.bg-white{

    background:#fff!important;

}





/* ======================================================
   SPACING UTILITIES
====================================================== */


.m-0{

    margin:0!important;

}


.mt-10{

    margin-top:10px!important;

}


.mt-20{

    margin-top:20px!important;

}


.mt-30{

    margin-top:30px!important;

}


.mt-50{

    margin-top:50px!important;

}


.mt-80{

    margin-top:80px!important;

}



.mb-10{

    margin-bottom:10px!important;

}


.mb-20{

    margin-bottom:20px!important;

}


.mb-30{

    margin-bottom:30px!important;

}


.mb-50{

    margin-bottom:50px!important;

}


.mb-80{

    margin-bottom:80px!important;

}



.p-0{

    padding:0!important;

}


.p-20{

    padding:20px!important;

}


.p-30{

    padding:30px!important;

}


.p-50{

    padding:50px!important;

}





/* ======================================================
   BORDER & RADIUS
====================================================== */


.border-none{

    border:none!important;

}


.border{

    border:

    1px solid var(--border);

}



.rounded-sm{

    border-radius:12px;

}



.rounded{

    border-radius:20px;

}



.rounded-lg{

    border-radius:30px;

}



.rounded-full{

    border-radius:999px;

}





/* ======================================================
   SHADOWS
====================================================== */


.shadow-sm{

    box-shadow:

    var(--shadow-sm);

}



.shadow{

    box-shadow:

    var(--shadow-md);

}



.shadow-lg{

    box-shadow:

    var(--shadow-lg);

}





/* ======================================================
   POSITION HELPERS
====================================================== */


.position-relative{

    position:relative!important;

}



.position-absolute{

    position:absolute!important;

}



.overflow-hidden{

    overflow:hidden!important;

}



.pointer{

    cursor:pointer;

}





/* ======================================================
   IMAGE HELPERS
====================================================== */


.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}



.img-contain{

    width:100%;

    height:100%;

    object-fit:contain;

}





/* ======================================================
   BUTTON HELPERS
====================================================== */


.full-btn{

    width:100%;

}



.no-decoration{

    text-decoration:none!important;

}





/* ======================================================
   CARD HELPERS
====================================================== */


.card{

    background:#fff;

    border-radius:

    var(--radius-lg);

    box-shadow:

    var(--shadow-sm);

    border:

    1px solid var(--border);

}





/* ======================================================
   ANIMATION HELPERS
====================================================== */


.hover-up{

    transition:

    var(--transition);

}



.hover-up:hover{

    transform:

    translateY(-8px);

}





/* ======================================================
   VISIBILITY
====================================================== */


.desktop-only{

    display:block;

}



.mobile-only{

    display:none;

}





/* ======================================================
   ACCESSIBILITY
====================================================== */


.sr-only{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}





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


@media(max-width:992px){


.grid-4{

    grid-template-columns:

    repeat(2,1fr);

}



.desktop-only{

    display:none;

}



.mobile-only{

    display:block;

}



}



@media(max-width:768px){


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

    grid-template-columns:

    1fr;

}



.text-mobile-center{

    text-align:center!important;

}



}



@media(max-width:480px){


.p-50{

    padding:30px!important;

}



.mt-80{

    margin-top:50px!important;

}



.mb-80{

    margin-bottom:50px!important;

}



}