/* ===================================
   18. UTILITY CLASSES
=================================== */

/* ---------- Text ---------- */

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

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

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

/* ---------- Margin ---------- */

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-50{margin-top:50px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-50{margin-bottom:50px;}

/* ---------- Padding ---------- */

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

/* ---------- Width ---------- */

.w-100{
    width:100%;
}

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

/* ---------- Display ---------- */

.d-flex{
    display:flex;
}

.d-block{
    display:block;
}

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

/* ---------- Flex ---------- */

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

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

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

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

.gap-10{
    gap:10px;
}

.gap-20{
    gap:20px;
}

.gap-30{
    gap:30px;
}

/* ---------- Border Radius ---------- */

.radius-10{
    border-radius:10px;
}

.radius-15{
    border-radius:15px;
}

.radius-20{
    border-radius:20px;
}

/* ---------- Shadow ---------- */

.shadow{

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.shadow-lg{

    box-shadow:0 15px 40px rgba(0,0,0,.15);

}

/* ---------- Background ---------- */

.bg-white{

    background:#fff;

}

.bg-primary{

    background:#02024f;

    color:#fff;

}

.bg-warning{

    background:#ffb000;

    color:#111;

}

/* ---------- Buttons ---------- */

.btn{

    display:inline-block;

    padding:14px 28px;

    border-radius:10px;

    text-decoration:none;

    transition:.3s;

    font-weight:bold;

}

.btn-primary{

    background:#02024f;

    color:#fff;

}

.btn-primary:hover{

    background:#00004d;

}

.btn-warning{

    background:#ffb000;

    color:#111;

}

.btn-warning:hover{

    background:#ff9800;

}

/* ---------- Hide ---------- */

.hidden{

    display:none;

}

.show{

    display:block;

}