/************************************************************
    Fonts & Responsiveness
************************************************************/
@media (min-width: 768px) {

}

@media (max-width: 768px) {

}


/************************************************************
    Variables
************************************************************/
:root {
    --color-dark: 21,21,21;  /* #151515 */
    --color-black: 0,0,0;  /* #000 */
    --color-white: 255,255,255; /* #FFF */
    --color-accent: 177,177,177;  /* #b1b1b1 */
    --color-background: 232,232,232;  /* #e8e8e8 */
    --color-border: 137,137,137;  /* #898989 */
    --color-main-text: 48,48,48;  /* #303030 */
    --color-sub-text: 47,47,47;  /* #2f2f2f */
}


/************************************************************
    Common
************************************************************/
html {
    scroll-behavior: smooth;
}

body {
    font-family: "Google Sans", sans-serif;
    font-size: 1.3em;
    color: rgb(var(--color-main-text));
}

a {
    transition: all .2s ease-in-out;
}
a:hover {
    text-decoration: none;
    transition: all .2s ease-in-out;
}
a.btn-continue, a:hover.btn-continue, a.btn-more, a:hover.btn-more {
    transition: all 0s;
}

.inherit {
    font-family: inherit;
}

.img-cover {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
}

.img-cover-full {
    width: 100%;
    object-fit: cover;
}

.img-beautified {
    border-radius: .75rem;
    box-shadow: 0 .3rem .6rem 0 rgba(var(--color-black), 0.2), 0 .45rem 1.5rem 0 rgba(var(--color-black), 0.18);
}

.elm-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wrap-around {
    float: right;
    margin: 1rem;
}

.text-clipped {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.highlight-on-hover {
    transition: all .2s;
}
.highlight-on-hover:hover {
    transform: translateY(-.1rem);
    box-shadow: 0 0 .6rem rgba(0, 0, 0, 0.15);
    transition: all .2s;
}
.move-on-hover:hover {
    transform: translateY(-.1rem);
}
.move-on-click:active {
    transform: translateY(.1rem);
}

.video-wrapper {
    width: 1080px;
    max-width: 100%;
    margin: 0 auto;
}
.video-wrapper-small {
    width: 720px;
    max-width: 100%;
    margin: 0 auto;
}
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
    overflow: hidden;
    width: 100%;
    z-index: 1;
}
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pagination-wrapper {
	display: block;
	list-style: none;
	font-size: 1em;
	text-align: center;
}
.pagination-wrapper ul { display: inline-block; padding: 0; margin: .75em 0;}
.pagination-wrapper ul a {color: rgb(var(--color-button-text))}
.pagination-wrapper ul a:hover {color: rgb(var(--color-accent))}
.pagination-wrapper ul li {
	display: inline-block;
	padding: .25em .4em;
    margin: .2em .2em;
    font-weight: lighter;
    transition: all .2s ease-in-out;
}
.pagination-wrapper ul li.active {
    color: rgb(var(--color-black));
    font-weight: bold;
}
/* .pagination-wrapper ul li:hover {
	background-color: rgba(var(--color-accent), .4);
	border-color: rgba(var(--color-accent), 1);
} */

.progress-container-h {
    width: 100%;
    height: .15rem;
    background: rgb(var(--color-progress-back));
}
.progress-bar-h {
    /* min-width: 10%; */
    height: .15rem;
    background: rgb(var(--color-accent));
    transition: all .3s ease-out;
}
.progress-container-v {
    width: .15rem;
    height: 20%;
    max-height: 350px;
    margin: 0 auto;
    background: rgb(var(--color-progress-back));
}
.progress-bar-v {
    width: .15rem;
    /* min-height: 10%; */
    background: rgb(var(--color-accent));
    transition: all .3s ease-out;
}



/************************************************************
    Backgrounds, Colors, Gradients & Shadows
************************************************************/
.color-main-text {
    color: rgb(var(--color-main-text));
}
.color-accent {
    color: rgb(var(--color-accent));
}

.shadow-light {
    box-shadow: 0 .125rem .25rem rgba(var(--color-black),.075);
}
.shadow-normal {
    box-shadow: 0 .5rem 1rem rgba(var(--color-black),.15);
}
.shadow-heavy {
    box-shadow: 0 1rem 3rem rgba(var(--color-black),.175);
}
.shadow-text {
    text-shadow: #ccc -1px 1px 0, #c9c9c9 -2px 2px 0, #bbb -3px 3px 0, #b9b9b9 -4px 4px 0, #aaa -5px 5px 0, rgba(0,0,0,.1) -6px 6px 1px, rgba(0,0,0,.1) -7px 0 5px, rgba(0,0,0,.3) -1px 1px 3px, rgba(0,0,0,.15) -3px 3px 5px, rgba(0,0,0,.2) -5px 5px 10px, rgba(0,0,0,.2) -10px 10px 10px, rgba(0,0,0,.1) -20px 20px 20px;
}

.grad-text {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text !important;
}
.grad-overlay {
    position: relative;
    display: block;
}
.grad-overlay:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
}
.grd-dark-to-right:after {
    background: linear-gradient(to right, rgba(var(--color-black),.0) 0%, rgba(var(--color-black)) 130%);
}
.grd-dark-to-bottom:after {
    background: linear-gradient(to bottom, rgba(var(--color-black),.0) 0%, rgba(var(--color-black)) 130%);
}
.grd-red {
    background: linear-gradient(to left, #720050 0%, #ff7695 100%);
}
.grd-blue {
    background: linear-gradient(to left, #2e6982 0%, #41d4e6 100%);
}
.grd-green {
    background: linear-gradient(to left, #227625 0%, #77fd86 100%);
}
.grd-pink {
    background: linear-gradient(to left, #ac0078 0%, #ff8ddd 100%);
}
.grd-violet {
    background: linear-gradient(to left, #480090 0%, #e375ff 100%);
}

.glassy-light {
    background-color: rgba(255,255,255,0.3);
    backdrop-filter: saturate(180%) blur(7px);
    -webkit-backdrop-filter: saturate(180%) blur(7px);
}
.glassy-dark {
    background-color: rgba(0,0,0,0.3);
    backdrop-filter: saturate(180%) blur(7px);
    -webkit-backdrop-filter: saturate(180%) blur(7px);
}



/************************************************************
    Navigation Menus
************************************************************/
nav.hnav {
    display: block;
    min-height: 3rem;
    margin-top: -1rem;
    box-shadow: 0 1rem 3rem -.05rem rgba(var(--color-black),.15);
}
nav.hnav .nav-item {
    display: inline-block;
    letter-spacing: .05rem;
    padding: 1rem 1rem;
}
nav.hnav a {
    color: rgb(var(--color-border));
}
nav.hnav a:hover {
    color: rgb(var(--color-accent));
}

nav.drawer .open-btn {
    color: rgb(var(--color-accent));
    font-size: 1.5em;
    line-height: 2.3rem;
    cursor: pointer;
    transition: all .2s ease-in-out;
}
nav.drawer .open-btn:hover {
    color: rgb(var(--color-accent));
    transition: all .2s ease-in-out;
}
nav.drawer .close-btn {
    padding: 3rem 4rem;
    font-size: 1.5em;
    cursor: pointer;
    transition: all .2s ease-in-out;
}
nav.drawer .close-btn:hover {
    color: rgb(var(--color-accent));
    transition: all .2s ease-in-out;
}
nav.drawer .nav-content {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    color: rgb(var(--color-blog-text));
    background: rgba(var(--color-black), .9);
    overflow-x: hidden;
    transition: all .3s ease;
    z-index: 3;
}
nav.drawer .nav-content a {
    font-size: 1.4em;
    font-weight: bold;
    color: rgb(var(--color-accent));
}
nav.drawer .nav-content a:hover {
    color: rgb(var(--color-blog-text));
}
nav.drawer .nav-content ul {
    list-style: none;
    padding: 2rem;
}
nav.drawer .nav-content ul li {
    clear: both;
    text-align: center;
    font-size: 1.5rem;
    padding: 1rem;
    transition: all .2s ease-in-out;
    z-index: 1;
}



/************************************************************
    Buttons
************************************************************/



/************************************************************ Pages ************************************************************/

/************************************************************
    Pages :: 404
************************************************************/
body.p404 {
    background: rgb(var(--color-black));
    color: rgb(var(--color-accent));
}

#logo.p404 {
	height: 105px;
    margin: 0 auto;
    margin-top: 10rem;
    margin-bottom: 3rem;
    background-image: url(../images/hover.png);
    background-repeat: no-repeat;
    background-position: center;
}

.p404 .main-message {
    font-weight: lighter;
    font-size: 2rem;
}

.p404 .error-message {
    font-weight: bold;
    font-size: 8rem;
}



/************************************************************
    Pages :: Blog Post
************************************************************/
.bp-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 1rem;
    box-shadow: 0 .3rem .6rem 0 rgba(var(--color-black), 0.2), 0 .45rem 1.5rem 0 rgba(var(--color-black), 0.18);
}



/************************************************************
    Pages :: Blog Landing
************************************************************/



/************************************************************
    Pages :: Landing Page
************************************************************/

/* ── Body ── */
body.lp-body {
    margin: 0;
    background: #f4feff;
}

/* ── Hero ── */
.lp-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 1rem 1rem;
    z-index: 10;
}
/* Contains the decorative blobs so they don't leak outside the hero */
.lp-blob-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
}

/* Decorative gradient blobs */
.lp-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    opacity: .55;
    pointer-events: none;
}
.lp-blob-1 {
    width: 500px; height: 500px;
    top: -110px; left: -90px;
    background: radial-gradient(circle, #7AC6E7 0%, transparent 70%);
}
.lp-blob-2 {
    width: 440px; height: 440px;
    bottom: 20px; right: -70px;
    background: radial-gradient(circle, #92E689 0%, transparent 70%);
}
.lp-blob-3 {
    width: 360px; height: 360px;
    top: 52%; left: 54%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #ABF0B3 0%, transparent 70%);
}

.lp-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 625px;
}

/* App icon orb */
.lp-app-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 13%;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 .5rem 2rem rgba(21,186,133,.4), 0 .2rem .6rem rgba(0,0,0,.12);
    margin-bottom: -2.75rem;
    z-index: 2;
}
.lp-app-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Glass card */
.lp-card {
    background: rgba(255,255,255,.6);
    backdrop-filter: saturate(200%) blur(20px);
    -webkit-backdrop-filter: saturate(200%) blur(20px);
    border: 1.5px solid rgba(255,255,255,.82);
    border-radius: 1.5rem;
    padding: 4.25rem 2.5rem 2rem;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* Trust badge */
.lp-badge {
    display: inline-block;
    background: rgba(55,187,203,.1);
    border: 1px solid rgba(55,187,203,.02);
    color: #2a9daa;
    border-radius: 50rem;
    font-size: .72em;
    padding: .28rem .9rem;
    letter-spacing: .03rem;
    margin-bottom: 1.4rem;
}

/* App title */
.lp-app-name {
    font-family: 'Outfit', sans-serif;
    font-size: 3.2rem;
    font-weight: 200;
    letter-spacing: .18rem;
    line-height: 1.05;
    margin: 0 0 .3rem;
    background: linear-gradient(125deg, #37BBCB 0%, #4cce7e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tagline */
.lp-app-tagline {
    font-size: .82em;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: #5a8e98;
    margin: 0 0 1.4rem;
}

/* Description */
.lp-app-desc {
    font-size: .92em;
    color: #3d6870;
    line-height: 1.8;
    max-width: 480px;
    margin: 0 auto 3rem;
}

/* CTA buttons row */
.lp-cta-row {
    display: flex;
    gap: .85rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.lp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(135deg, #37BBCB 0%, #4cce7e 100%);
    color: #fff !important;
    text-decoration: none !important;
    font-family: inherit;
    font-weight: 700;
    font-size: .95em;
    padding: .76rem 1.9rem;
    border-radius: 50rem;
    border: none;
    box-shadow: none;
    cursor: pointer;
    transition: box-shadow .2s ease;
}
.lp-btn-primary:hover {
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 .45rem 1.5rem rgba(55,187,203,.45), 0 .15rem .4rem rgba(0,0,0,.08);
}

.lp-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    /* background: rgba(255,255,255,.55); */
    color: #37BBCB !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: .95em;
    padding: .76rem 1.6rem;
    border-radius: .3rem;
    /* border: 1.5px solid rgba(55,187,203,.4); */
    box-shadow: none;
    transition: box-shadow .2s ease, background .2s ease, color .2s ease;
}
.lp-btn-ghost:hover {
    background: rgba(55,187,203,.08);
    color: #2a9daa !important;
    text-decoration: none !important;
    box-shadow: 0 .3rem 1rem rgba(55,187,203,.22);
}

/* Download dropdown */
.lp-dl-wrapper {
    position: relative;
    display: inline-flex;
    z-index: 9999;
}
.lp-dl-caret {
    font-size: .75em;
    margin-left: .3rem;
    margin-right: -.1rem;
    transition: transform .2s ease;
}
.lp-dl-wrapper.open .lp-dl-caret {
    transform: rotate(180deg);
}
.lp-dl-dropdown {
    position: absolute;
    top: calc(100% + .55rem);
    left: 50%;
    transform: translateX(-50%) translateY(-.4rem);
    min-width: 215px;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(200%) blur(18px);
    -webkit-backdrop-filter: saturate(200%) blur(18px);
    border: 1.5px solid rgba(255,255,255,.88);
    border-radius: 1rem;
    box-shadow: 0 .6rem 2.4rem rgba(30,90,100,.18), 0 .12rem .4rem rgba(0,0,0,.07);
    padding: .4rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 9999;
}
.lp-dl-wrapper.open .lp-dl-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* Upward-opening variant */
.lp-dl-wrapper.open-up .lp-dl-dropdown {
    top: auto;
    bottom: calc(100% + .55rem);
    transform: translateX(-50%) translateY(.4rem);
}
.lp-dl-wrapper.open-up.open .lp-dl-dropdown {
    transform: translateX(-50%) translateY(0);
}
.lp-dl-os-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .64em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08rem;
    color: #8cbec6;
    padding: .3rem .55rem .15rem;
    margin: 0;
    user-select: none;
}
.lp-os-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.lp-dl-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .65rem;
    border-radius: .6rem;
    text-decoration: none !important;
    color: #1e5a64 !important;
    font-size: .8em;
    transition: background .14s ease;
    white-space: nowrap;
}
.lp-dl-item:hover {
    background: rgba(55,187,203,.1);
    text-decoration: none !important;
}
.lp-dl-item-name { font-weight: 500; }
.lp-dl-item-arch {
    font-size: .82em;
    font-weight: 700;
    color: #37BBCB;
    background: rgba(55,187,203,.12);
    padding: .08rem .4rem;
    border-radius: 50rem;
    flex-shrink: 0;
    letter-spacing: .02rem;
}
.lp-dl-divider {
    height: 1px;
    background: rgba(55,187,203,.15);
    margin: .3rem .3rem;
}

/* Platform note */
.lp-platform-note {
    font-size: .7em;
    color: #8cbec6;
    margin: 0;
}

/* ── Features section ── */
.lp-features {
    background: linear-gradient(180deg, #f0fefb 0%, #e8f8f0 100%);
    padding: 5.5rem 1.5rem;
}

.lp-container {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.lp-section-heading {
    font-size: 1.9em;
    font-weight: 800;
    color: #1e5a64;
    margin: 0 0 .4rem;
}
.lp-section-sub {
    color: #5a8e98;
    font-size: .9em;
    margin: 0 0 3rem;
}

.lp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.5rem;
    text-align: left;
}

.lp-feat-card {
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 1.4rem;
    padding: 1.75rem 1.5rem;
    box-shadow: none;
    transition: box-shadow .2s ease;
}
.lp-feat-card:hover {
    box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.11);
}
.lp-feat-card h3 {
    font-size: .95em;
    font-weight: 700;
    color: #1e5a64;
    margin: .75rem 0 .45rem;
}
.lp-feat-card p {
    font-size: .8em;
    color: #4d7e88;
    line-height: 1.72;
    margin: 0;
}

/* Feature icon bubble */
.lp-feat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: .9rem;
    font-size: 1.3rem;
}
.lp-icon-teal  { background: rgba(55,187,203,.13); color: #37BBCB; }
.lp-icon-green { background: rgba(146,230,137,.18); color: #3aab4c; }
.lp-icon-blue  { background: rgba(122,198,231,.18); color: #3a94c4; }

/* ── Footer ── */
.lp-footer {
    background: #e8f8f0;
    border-top: 1px solid rgba(55,187,203,.18);
    text-align: center;
    padding: 1.5rem 1rem;
    font-size: .8em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.lp-footer-brand { color: #37BBCB; font-family: 'Outfit', sans-serif; font-weight: 400; }
.lp-footer-sep   { color: #aed4d8; }
.lp-footer-copy  { color: #8cbec6; }

/* ── Responsive ── */
@media (max-width: 540px) {
    .lp-card {
        padding: 3.5rem 1.4rem 2rem;
    }
    .lp-app-name {
        font-size: 2.4rem;
    }
    .lp-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Auth Form ── */
.lp-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.1rem;
}

.lp-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,.55);
    border: 1.5px solid rgba(55,187,203,.25);
    border-radius: .75rem;
    padding: .76rem 1.1rem;
    font-family: inherit;
    font-size: .92em;
    color: #1e5a64;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.lp-input::placeholder { color: #8cbec6; }
.lp-input:focus {
    border-color: rgba(55,187,203,.6);
    box-shadow: 0 0 0 3px rgba(55,187,203,.12);
}

.lp-auth-error {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: rgba(220,50,50,.07);
    border: 1px solid rgba(220,50,50,.18);
    border-radius: .65rem;
    color: #b93333;
    font-size: .83em;
    padding: .6rem .9rem;
    margin-top: .75rem;
    text-align: left;
}



/************************************************************ Custom Helpers ************************************************************/
.dir-rtl {direction: rtl}
.dir-ltr {direction: ltr}
/************************************************************
    Margin & Padding
************************************************************/
.m-0 {margin: 0rem !important}
.p-0 {padding: 0rem !important}
.mt-0 {margin-top: 0rem !important}
.pt-0 {padding-top: 0rem !important}
.mr-0 {margin-right: 0rem !important}
.pr-0 {padding-right: 0rem !important}
.mb-0 {margin-bottom: 0rem !important}
.pb-0 {padding-bottom: 0rem !important}
.ml-0 {margin-left: 0rem !important}
.pl-0 {padding-left: 0rem !important}
.m-1 {margin: 0.125rem !important}
.p-1 {padding: 0.125rem !important}
.mt-1 {margin-top: 0.125rem !important}
.pt-1 {padding-top: 0.125rem !important}
.mr-1 {margin-right: 0.125rem !important}
.pr-1 {padding-right: 0.125rem !important}
.mb-1 {margin-bottom: 0.125rem !important}
.pb-1 {padding-bottom: 0.125rem !important}
.ml-1 {margin-left: 0.125rem !important}
.pl-1 {padding-left: 0.125rem !important}
.m-2 {margin: 0.25rem !important}
.p-2 {padding: 0.25rem !important}
.mt-2 {margin-top: 0.25rem !important}
.pt-2 {padding-top: 0.25rem !important}
.mr-2 {margin-right: 0.25rem !important}
.pr-2 {padding-right: 0.25rem !important}
.mb-2 {margin-bottom: 0.25rem !important}
.pb-2 {padding-bottom: 0.25rem !important}
.ml-2 {margin-left: 0.25rem !important}
.pl-2 {padding-left: 0.25rem !important}
.m-3 {margin: 0.5rem !important}
.p-3 {padding: 0.5rem !important}
.mt-3 {margin-top: 0.5rem !important}
.pt-3 {padding-top: 0.5rem !important}
.mr-3 {margin-right: 0.5rem !important}
.pr-3 {padding-right: 0.5rem !important}
.mb-3 {margin-bottom: 0.5rem !important}
.pb-3 {padding-bottom: 0.5rem !important}
.ml-3 {margin-left: 0.5rem !important}
.pl-3 {padding-left: 0.5rem !important}
.m-4 {margin: 1rem !important}
.p-4 {padding: 1rem !important}
.mt-4 {margin-top: 1rem !important}
.pt-4 {padding-top: 1rem !important}
.mr-4 {margin-right: 1rem !important}
.pr-4 {padding-right: 1rem !important}
.mb-4 {margin-bottom: 1rem !important}
.pb-4 {padding-bottom: 1rem !important}
.ml-4 {margin-left: 1rem !important}
.pl-4 {padding-left: 1rem !important}
.m-5 {margin: 2rem !important}
.p-5 {padding: 2rem !important}
.mt-5 {margin-top: 2rem !important}
.pt-5 {padding-top: 2rem !important}
.mr-5 {margin-right: 2rem !important}
.pr-5 {padding-right: 2rem !important}
.mb-5 {margin-bottom: 2rem !important}
.pb-5 {padding-bottom: 2rem !important}
.ml-5 {margin-left: 2rem !important}
.pl-5 {padding-left: 2rem !important}
.m-6 {margin: 3rem !important}
.p-6 {padding: 3rem !important}
.mt-6 {margin-top: 3rem !important}
.pt-6 {padding-top: 3rem !important}
.mr-6 {margin-right: 3rem !important}
.pr-6 {padding-right: 3rem !important}
.mb-6 {margin-bottom: 3rem !important}
.pb-6 {padding-bottom: 3rem !important}
.ml-6 {margin-left: 3rem !important}
.pl-6 {padding-left: 3rem !important}
.m-7 {margin: 4rem !important}
.p-7 {padding: 4rem !important}
.mt-7 {margin-top: 4rem !important}
.pt-7 {padding-top: 4rem !important}
.mr-7 {margin-right: 4rem !important}
.pr-7 {padding-right: 4rem !important}
.mb-7 {margin-bottom: 4rem !important}
.pb-7 {padding-bottom: 4rem !important}
.ml-7 {margin-left: 4rem !important}
.pl-7 {padding-left: 4rem !important}
.m-8 {margin: 5rem !important}
.p-8 {padding: 5rem !important}
.mt-8 {margin-top: 5rem !important}
.pt-8 {padding-top: 5rem !important}
.mr-8 {margin-right: 5rem !important}
.pr-8 {padding-right: 5rem !important}
.mb-8 {margin-bottom: 5rem !important}
.pb-8 {padding-bottom: 5rem !important}
.ml-8 {margin-left: 5rem !important}
.pl-8 {padding-left: 5rem !important}
.m-9 {margin: 7.5rem !important}
.p-9 {padding: 7.5rem !important}
.mt-9 {margin-top: 7.5rem !important}
.pt-9 {padding-top: 7.5rem !important}
.mr-9 {margin-right: 7.5rem !important}
.pr-9 {padding-right: 7.5rem !important}
.mb-9 {margin-bottom: 7.5rem !important}
.pb-9 {padding-bottom: 7.5rem !important}
.ml-9 {margin-left: 7.5rem !important}
.pl-9 {padding-left: 7.5rem !important}
.m-10 {margin: 10rem !important}
.p-10 {padding: 10rem !important}
.mt-10 {margin-top: 10rem !important}
.pt-10 {padding-top: 10rem !important}
.mr-10 {margin-right: 10rem !important}
.pr-10 {padding-right: 10rem !important}
.mb-10 {margin-bottom: 10rem !important}
.pb-10 {padding-bottom: 10rem !important}
.ml-10 {margin-left: 10rem !important}
.pl-10 {padding-left: 10rem !important}
/************************************************************
    Font Size
************************************************************/
.fs-0 {font-size: 0.6em !important}
.fs-1 {font-size: 0.75em !important}
.fs-2 {font-size: 0.9em !important}
.fs-3 {font-size: 1em !important}
.fs-4 {font-size: 1.2em !important}
.fs-5 {font-size: 1.35em !important}
.fs-6 {font-size: 1.5em !important}
.fs-7 {font-size: 2em !important}
.fs-8 {font-size: 2.5em !important}
.fs-9 {font-size: 3em !important}
.fs-10 {font-size: 4em !important}