.d-flex { display: flex; }
.align-items-center { align-items: center; }
.align-items-end { align-items: end; }
.align-items-start { align-items: start; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-start { justify-content: start; }
.justify-content-end { justify-content: end; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

.text-center { text-align: center; }
.text-start { text-align: start; }
.text-end { text-align: end; }
.text-muted { color: #6c757d!important; }
.relative { position: relative !important; }
.white { color: #fff !important; }
.brightness-5 { filter: brightness(0.5) !important; }
.color-main { color: var(--main-color); }
.bold { font-weight: 600; }

.w-100 { width: 100% !important; }
.w-80 { width: 80% !important; }
.w-50 { width: 50% !important; }
.w-30 { width: 30% !important; }
.h-100 { height: 100vh !important; }
.h-80 { height: 80vh !important; }
.h-50 { height: 50vh !important; }

.m-0 { margin: 0px !important; }
.m-1 { margin: 10px !important; }
.m-2 { margin: 20px !important; }
.m-3 { margin: 30px !important; }
.m-4 { margin: 40px !important; }
.m-5 { margin: 50px !important; }
.m-10 { margin: 100px !important; }
.m-20 { margin: 200px !important; }
.my-10 { margin-top: 100px !important; margin-bottom: 100px !important; }
.mx-10 { margin-left: 100px !important; margin-right: 100px !important; }
.mx-20 { margin-left: 200px !important; margin-right: 200px !important; }

.mx-auto { 
    margin-left: auto; 
    margin-right: auto;
}

.mb-0 { margin-bottom: 0px !important; }
.mb-1 { margin-bottom: 10px !important; }
.mb-2 { margin-bottom: 20px !important; }
.mb-3 { margin-bottom: 30px !important; }
.mb-4 { margin-bottom: 40px !important; }
.mb-5 { margin-bottom: 50px !important; }
.mb-10 { margin-bottom: 100px !important; }

.mt-0 { margin-top: 0px !important; }
.mt-1 { margin-top: 10px !important; }
.mt-2 { margin-top: 20px !important; }
.mt-3 { margin-top: 30px !important; }
.mt-4 { margin-top: 40px !important; }
.mt-5 { margin-top: 50px !important; }
.mt-10 { margin-top: 100px !important; }

.ms-0 { margin-left: 0px !important; }
.ms-1 { margin-left: 10px !important; }
.ms-2 { margin-left: 20px !important; }
.ms-3 { margin-left: 30px !important; }
.ms-4 { margin-left: 40px !important; }
.ms-5 { margin-left: 50px !important; }
.ms-10 { margin-left: 100px !important; }

.me-0 { margin-right: 0px !important; }
.me-1 { margin-right: 10px !important; }
.me-2 { margin-right: 20px !important; }
.me-3 { margin-right: 30px !important; }
.me-4 { margin-right: 40px !important; }
.me-5 { margin-right: 50px !important; }

.p-1 { padding: 10px !important; }
.p-2 { padding: 20px !important; }
.p-3 { padding: 30px !important; }
.p-4 { padding: 40px !important; }
.p-5 { padding: 50px !important; }
.p-10 { padding: 100px !important; }
.py-10 { padding-top: 100px !important; padding-bottom: 100px !important; }

.pb-1 { padding-bottom: 10px !important; }
.pb-2 { padding-bottom: 20px !important; }
.pb-3 { padding-bottom: 30px !important; }
.pb-4 { padding-bottom: 40px !important; }
.pb-5 { padding-bottom: 50px !important; }
.pb-10 { padding-bottom: 100px !important; }

.pt-1 { padding-top: 10px !important; }
.pt-2 { padding-top: 20px !important; }
.pt-3 { padding-top: 30px !important; }
.pt-4 { padding-top: 40px !important; }
.pt-5 { padding-top: 50px !important; }
.pt-10 { padding-top: 100px !important; }

.ps-1 { padding-left: 10px !important; }
.ps-2 { padding-left: 20px !important; }
.ps-3 { padding-left: 30px !important; }
.ps-4 { padding-left: 40px !important; }
.ps-5 { padding-left: 50px !important; }

.pe-1 { padding-right: 10px !important; }
.pe-2 { padding-right: 20px !important; }
.pe-3 { padding-right: 30px !important; }
.pe-4 { padding-right: 40px !important; }
.pe-5 { padding-right: 50px !important; }

.z-10 { z-index: 10; }
.z-100 { z-index: 100; }
.z-200 { z-index: 200; }
.z-300 { z-index: 300; }

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.absolute-center-bottom {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.absolute-center-top {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.absolute-left {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
}

.absolute-bottom-right {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.fixed-bottom-right {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.fixed-center-right {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.gsap-absolute-center {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
}

.gsap-absolute-25 {
    position: absolute;
    top: 25%;
    left: 0;
    height: 100vh;
    width: 100%;
}

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