/* Utility Classes */
.mobile-only {display: none;}

.m-0 {margin: 0px;}
.p-0 {padding: 0px;}
.nowrap {white-space: nowrap;}
.uppercase {text-transform: uppercase;}

/* Margin Bottom */
.mb-0 { margin-bottom: 0px; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mb-35 { margin-bottom: 35px; }
.mb-40 { margin-bottom: 40px; }
.mb-45 { margin-bottom: 45px; }
.mb-50 { margin-bottom: 50px; }

/* Margin Top */
.mt-0 { margin-top: 0px; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-35 { margin-top: 35px; }
.mt-40 { margin-top: 40px; }
.mt-45 { margin-top: 45px; }
.mt-50 { margin-top: 50px; }

/* Padding Top */
.pt-0 { padding-top: 0px; }
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pt-25 { padding-top: 25px; }
.pt-30 { padding-top: 30px; }
.pt-35 { padding-top: 35px; }
.pt-40 { padding-top: 40px; }
.pt-45 { padding-top: 45px; }
.pt-50 { padding-top: 50px; }

/* Padding Bottom */
.pb-0 { padding-bottom: 0px; }
.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }
.pb-25 { padding-bottom: 25px; }
.pb-30 { padding-bottom: 30px; }
.pb-35 { padding-bottom: 35px; }
.pb-40 { padding-bottom: 40px; }
.pb-45 { padding-bottom: 45px; }
.pb-50 { padding-bottom: 50px; }

/* Layout Utilities */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-none { display: none; }

/* Text Utilities */
.fs-10 {font-size: 10px;}
.fs-15 {font-size: 15px;}
.fs-20 {font-size: 20px;}
.fs-25 {font-size: 25px;}
.fs-30 {font-size: 30px;}
.fs-35 {font-size: 35px;}
.fs-40 {font-size: 40px;}
.fs-45 {font-size: 45px;}
.fs-50 {font-size: 50px;}
.fs-55 {font-size: 55px;}
.fs-60 {font-size: 60px;}
.fs-65 {font-size: 65px;}
.fs-70 {font-size: 70px;}
.fs-75 {font-size: 75px;}
.fs-80 {font-size: 80px;}
.fs-85 {font-size: 85px;}
.fs-90 {font-size: 90px;}
.fs-95 {font-size: 95px;}
.fs-100 {font-size: 100px;}

.fw-100 {font-weight:100;}
.fw-200 {font-weight:200;}
.fw-300 {font-weight:300;}
.fw-400 {font-weight:400;}
.fw-500 {font-weight:500;}
.fw-600 {font-weight:600;}
.fw-700 {font-weight:700;}
.fw-800 {font-weight:800;}
.fw-900 {font-weight:900;}

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.fw-bold { font-weight: bold; }
.fw-normal { font-weight: normal; }

/* Width & Height Utilities */
.w-100 { width: 100%; }
.w-auto { width: auto; }
.h-100 { height: 100%; }
.h-auto { height: auto; }

/* Flexbox Helpers */
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

/* Spacing Shorthands */
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-0 { margin-left: 0px; margin-right: 0px; }
.my-0 { margin-top: 0px; margin-bottom: 0px; }
.px-0 { padding-left: 0px; padding-right: 0px; }
.py-0 { padding-top: 0px; padding-bottom: 0px; }

p, h1, h2, h3, h4, h5 { text-wrap: balance; }

/* Media Query for Mobile */
@media screen and (max-width: 720px) {
    .mobile-only {display: block;}
    .desktop-only {display: none;}
}