/* i call this bootsrip*/
.f-center { display: flex; justify-content: flex-start; align-items: center; gap: 5px;}
.f-row-center { display: flex; justify-content: center; align-items: center; gap: 5px;}
.f-row-between { display: flex; justify-content: space-between; align-items: center; gap: 5px;}
.f-row-between-end { display: flex; justify-content: end; align-items: center; gap: 5px;}
.f-row-between-top { display: flex; justify-content: space-between; align-items: start; gap: 5px;}
.f-row-between-bottom { display: flex; justify-content: space-between; align-items: end; gap: 5px;}
.f-row-start-top { display: flex; justify-content: flex-start; align-items: start; gap: 5px;}
.f-row-end { display: flex; justify-content: flex-end; align-items: center;}
.f-column-end { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; }
.f-column-start { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.f-column-center { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.f-column-between { display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.f-evenly { display: flex; justify-content: space-evenly; align-items: center; }
.f-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.f-column-reverse { display: flex; flex-direction: column-reverse; }
.f-row-reverse { display: flex; flex-direction: row-reverse; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end;}
/* Text Alignment */
.text-left { text-align: left; } 
.text-center { text-align: center; } 
.text-right { text-align: right; }
.w100p-auto {width: 100%; max-width: 100%; margin: auto;}
.w100p {width: 100%; max-width: 100%;}
/* Spacing Utilities: */
.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.py-10 { padding-top: 30px; padding-bottom: 30px; }
.m-10 { margin: 10px; }
.m-20 { margin: 20px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-size {max-width: max-content;}
/* Positioning Utilities: */
/* Fixed full-width container */
.fixed-top { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; }
/* Absolute bottom-center */
.p-abs-bottom { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.p-abs-top { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
/* Sticky top */
.sticky-top { position: sticky; top: 0; }