/*==================================================
    KURUNJI MASALA V2
    UTILITIES.CSS
==================================================*/

/*==============================
DISPLAY
==============================*/

.d-none{
    display:none !important;
}

.d-block{
    display:block !important;
}

.d-flex{
    display:flex !important;
}

.d-grid{
    display:grid !important;
}

/*==============================
ALIGNMENT
==============================*/

.text-left{
    text-align:left;
}

.text-center{
    text-align:center;
}

.text-right{
    text-align:right;
}

/*==============================
JUSTIFY CONTENT
==============================*/

.justify-start{
    justify-content:flex-start;
}

.justify-center{
    justify-content:center;
}

.justify-end{
    justify-content:flex-end;
}

.justify-between{
    justify-content:space-between;
}

/*==============================
ALIGN ITEMS
==============================*/

.items-start{
    align-items:flex-start;
}

.items-center{
    align-items:center;
}

.items-end{
    align-items:flex-end;
}

/*==============================
WIDTH
==============================*/

.w-100{
    width:100%;
}

.h-100{
    height:100%;
}

/*==============================
MARGIN TOP
==============================*/

.mt-0{margin-top:0;}
.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}
.mt-6{margin-top:60px;}

/*==============================
MARGIN BOTTOM
==============================*/

.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}
.mb-6{margin-bottom:60px;}

/*==============================
PADDING
==============================*/

.p-1{padding:10px;}
.p-2{padding:20px;}
.p-3{padding:30px;}
.p-4{padding:40px;}
.p-5{padding:50px;}

/*==============================
BACKGROUND
==============================*/

.bg-white{
    background:var(--white);
}

.bg-primary{
    background:var(--primary);
}

.bg-secondary{
    background:var(--secondary);
}

.bg-light{
    background:var(--bg);
}

/*==============================
TEXT COLORS
==============================*/

.text-primary{
    color:var(--primary);
}

.text-secondary{
    color:var(--secondary);
}

.text-white{
    color:var(--white);
}

.text-dark{
    color:var(--heading);
}

.text-muted{
    color:var(--text);
}

/*==============================
BORDER RADIUS
==============================*/

.radius-sm{
    border-radius:var(--radius-sm);
}

.radius-md{
    border-radius:var(--radius-md);
}

.radius-lg{
    border-radius:var(--radius-lg);
}

.radius-xl{
    border-radius:var(--radius-xl);
}

.round{
    border-radius:50%;
}

/*==============================
SHADOW
==============================*/

.shadow-sm{
    box-shadow:var(--shadow-sm);
}

.shadow-md{
    box-shadow:var(--shadow-md);
}

.shadow-lg{
    box-shadow:var(--shadow-lg);
}

/*==============================
POSITION
==============================*/

.relative{
    position:relative;
}

.absolute{
    position:absolute;
}

/*==============================
OVERFLOW
==============================*/

.overflow-hidden{
    overflow:hidden;
}

/*==============================
CURSOR
==============================*/

.pointer{
    cursor:pointer;
}

/*==============================
TRANSITION
==============================*/

.transition{
    transition:var(--transition);
}