/*=========================================================
PHIUM ESSENCE
UTILITY CLASSES
=========================================================*/


/*=========================================
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;}


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

.flex-row{flex-direction:row;}
.flex-column{flex-direction:column;}

.align-start{align-items:flex-start;}
.align-center{align-items:center;}
.align-end{align-items:flex-end;}

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

.flex-wrap{flex-wrap:wrap;}
.flex-nowrap{flex-wrap:nowrap;}

.gap-10{gap:10px;}
.gap-20{gap:20px;}
.gap-30{gap:30px;}
.gap-40{gap:40px;}
.gap-60{gap:60px;}


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

.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:30px;
}


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

.w-25{width:25%;}
.w-33{width:33.333%;}
.w-50{width:50%;}
.w-75{width:75%;}
.w-100{width:100%;}

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

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

.max-1200{
max-width:1200px;
margin:auto;
}


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

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

.text-uppercase{text-transform:uppercase;}
.text-capitalize{text-transform:capitalize;}

.text-primary{color:var(--phium-primary);}
.text-heading{color:var(--phium-heading);}
.text-muted{color:var(--phium-light-text);}
.text-white{color:#fff;}


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

.bg-white{
background:#fff;
}

.bg-primary{
background:var(--phium-primary);
}

.bg-light{
background:var(--phium-bg);
}

.bg-section{
background:var(--phium-section);
}


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

.border{
border:1px solid var(--phium-border);
}

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

.shadow-sm{
box-shadow:var(--shadow-sm);
}

.shadow-md{
box-shadow:var(--shadow-md);
}

.shadow-lg{
box-shadow:var(--shadow-lg);
}


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

.mt-0{margin-top:0;}
.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-60{margin-top:60px;}
.mt-80{margin-top:80px;}

.mb-0{margin-bottom:0;}
.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}
.mb-80{margin-bottom:80px;}


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

.pt-20{padding-top:20px;}
.pt-40{padding-top:40px;}
.pt-60{padding-top:60px;}

.pb-20{padding-bottom:20px;}
.pb-40{padding-bottom:40px;}
.pb-60{padding-bottom:60px;}

.p-20{padding:20px;}
.p-30{padding:30px;}
.p-40{padding:40px;}


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

.img-fluid{
max-width:100%;
height:auto;
display:block;
}


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

.pointer{
cursor:pointer;
}


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

.overflow-hidden{
overflow:hidden;
}