/*=========================================================
  Electronic Jacquard Sales & Services
  File : utilities.css
  Version : 1.0.0
  Description : Utility Classes
=========================================================*/


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

.container-custom{

    width:min(100% - 32px, var(--container));

    margin-inline:auto;

}


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

.section{

    padding-block:var(--space-96);

}


.section-sm{

    padding-block:var(--space-64);

}


.section-lg{

    padding-block:var(--space-120);

}



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

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

}



/*=========================================================
  FLEXBOX
=========================================================*/

.flex-row{

    flex-direction:row;

}


.flex-column{

    flex-direction:column;

}


.flex-wrap{

    flex-wrap:wrap;

}


.flex-nowrap{

    flex-wrap:nowrap;

}


.justify-start{

    justify-content:flex-start;

}


.justify-center{

    justify-content:center;

}


.justify-end{

    justify-content:flex-end;

}


.justify-between{

    justify-content:space-between;

}


.justify-around{

    justify-content:space-around;

}


.align-start{

    align-items:flex-start;

}


.align-center{

    align-items:center;

}


.align-end{

    align-items:flex-end;

}


.align-stretch{

    align-items:stretch;

}


.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}



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

.grid-2{

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

}


.grid-3{

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

}


.grid-4{

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

}


.gap-1{

    gap:var(--space-8);

}


.gap-2{

    gap:var(--space-16);

}


.gap-3{

    gap:var(--space-24);

}


.gap-4{

    gap:var(--space-32);

}


.gap-5{

    gap:var(--space-48);

}



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

.text-left{

    text-align:left;

}


.text-center{

    text-align:center;

}


.text-right{

    text-align:right;

}



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

.text-primary{

    color:var(--clr-primary);

}


.text-accent{

    color:var(--clr-accent);

}


.text-dark{

    color:var(--text-dark);

}


.text-light{

    color:var(--text-light);

}


.text-muted{

    color:var(--text-muted);

}



/*=========================================================
  BACKGROUND COLORS
=========================================================*/

.bg-primary{

    background:var(--clr-primary);

}


.bg-dark{

    background:var(--bg-dark);

}


.bg-light{

    background:var(--bg-body);

}


.bg-white{

    background:var(--bg-card);

}



/*=========================================================
  GRADIENTS
=========================================================*/

.bg-gradient-primary{

    background:var(--gradient-primary);

}


.bg-gradient-dark{

    background:var(--gradient-dark);

}


.bg-gradient-orange{

    background:var(--gradient-orange);

}



/*=========================================================
  MARGIN
=========================================================*/

.m-auto{

    margin:auto;

}


.mt-1{

    margin-top:var(--space-8);

}

.mt-2{

    margin-top:var(--space-16);

}

.mt-3{

    margin-top:var(--space-24);

}

.mt-4{

    margin-top:var(--space-32);

}

.mt-5{

    margin-top:var(--space-48);

}



.mb-1{

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

}


.mb-2{

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

}


.mb-3{

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

}


.mb-4{

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

}


.mb-5{

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

}



/*=========================================================
  PADDING
=========================================================*/

.p-1{

    padding:var(--space-8);

}


.p-2{

    padding:var(--space-16);

}


.p-3{

    padding:var(--space-24);

}


.p-4{

    padding:var(--space-32);

}


.p-5{

    padding:var(--space-48);

}



/* Vertical Padding */

.py-1{

    padding-block:var(--space-8);

}


py-2{

    padding-block:var(--space-16);

}


.py-3{

    padding-block:var(--space-24);

}


.py-4{

    padding-block:var(--space-32);

}


.py-5{

    padding-block:var(--space-48);

}


.py-6{

    padding-block:var(--space-64);

}


.py-7{

    padding-block:var(--space-80);

}



/* Horizontal Padding */

.px-1{

    padding-inline:var(--space-8);

}


.px-2{

    padding-inline:var(--space-16);

}


.px-3{

    padding-inline:var(--space-24);

}


.px-4{

    padding-inline:var(--space-32);

}



/*=========================================================
  WIDTH / HEIGHT
=========================================================*/

.w-100{

    width:100%;

}


.h-100{

    height:100%;

}


.min-vh-100{

    min-height:100vh;

}



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

.rounded-sm{

    border-radius:var(--radius-sm);

}


.rounded{

    border-radius:var(--radius-md);

}


.rounded-lg{

    border-radius:var(--radius-lg);

}


.rounded-xl{

    border-radius:var(--radius-xl);

}


.rounded-full{

    border-radius:var(--radius-round);

}



/*=========================================================
  SHADOW
=========================================================*/

.shadow-sm{

    box-shadow:var(--shadow-sm);

}


.shadow{

    box-shadow:var(--shadow-md);

}


.shadow-lg{

    box-shadow:var(--shadow-lg);

}



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

.position-relative{

    position:relative;

}


.position-absolute{

    position:absolute;

}


.position-fixed{

    position:fixed;

}


.top-0{

    top:0;

}


.bottom-0{

    bottom:0;

}


.left-0{

    left:0;

}


.right-0{

    right:0;

}



/*=========================================================
  OVERFLOW
=========================================================*/

.overflow-hidden{

    overflow:hidden;

}


.overflow-auto{

    overflow:auto;

}



/*=========================================================
  OPACITY
=========================================================*/

.opacity-50{

    opacity:.5;

}


.opacity-75{

    opacity:.75;

}


.opacity-100{

    opacity:1;

}



/*=========================================================
  CURSOR
=========================================================*/

.cursor-pointer{

    cursor:pointer;

}



/*=========================================================
  TRANSITIONS
=========================================================*/

.transition{

    transition:var(--transition);

}


.transition-fast{

    transition:var(--transition-fast);

}


.transition-slow{

    transition:var(--transition-slow);

}



/*=========================================================
  GLASS EFFECT
=========================================================*/

.glass{

    background:var(--glass-bg);

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

    backdrop-filter:var(--glass-blur);

    -webkit-backdrop-filter:var(--glass-blur);

}



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

.object-cover{

    object-fit:cover;

}


.object-contain{

    object-fit:contain;

}



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

.visible{

    visibility:visible;

}


.invisible{

    visibility:hidden;

}