/* =========================================================
   PSK ROOFING V2 - UTILITIES CSS
========================================================= */


/* =========================================================
   DISPLAY UTILITIES
========================================================= */

.d-block {
    display: block;
}

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

.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

.d-none {
    display: none;
}


/* =========================================================
   FLEX UTILITIES
========================================================= */

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

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

.align-start {
    align-items: flex-start;
}

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

.align-end {
    align-items: flex-end;
}

.justify-start {
    justify-content: flex-start;
}

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

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}


/* =========================================================
   TEXT ALIGNMENT
========================================================= */

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

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

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


/* =========================================================
   WIDTH UTILITIES
========================================================= */

.w-100 {
    width: 100%;
}

.w-75 {
    width: 75%;
}

.w-50 {
    width: 50%;
}

.w-auto {
    width: auto;
}


/* =========================================================
   HEIGHT UTILITIES
========================================================= */

.h-100 {
    height: 100%;
}


/* =========================================================
   MARGIN UTILITIES
========================================================= */

.m-0 {
    margin: 0;
}

.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;
}

.mt-60 {
    margin-top: 60px;
}

.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;
}

.mb-60 {
    margin-bottom: 60px;
}

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}


/* =========================================================
   PADDING UTILITIES
========================================================= */

.p-0 {
    padding: 0;
}

.pt-10 {
    padding-top: 10px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-50 {
    padding-top: 50px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-50 {
    padding-bottom: 50px;
}


/* =========================================================
   POSITION UTILITIES
========================================================= */

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}


/* =========================================================
   OVERFLOW
========================================================= */

.overflow-hidden {
    overflow: hidden;
}


/* =========================================================
   BORDER RADIUS
========================================================= */

.radius-sm {
    border-radius: var(--radius-sm);
}

.radius-md {
    border-radius: var(--radius-md);
}

.radius-lg {
    border-radius: var(--radius-lg);
}

.radius-xl {
    border-radius: var(--radius-xl);
}


/* =========================================================
   SHADOW UTILITIES
========================================================= */

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}


/* =========================================================
   BACKGROUND UTILITIES
========================================================= */

.bg-primary {
    background-color: var(--primary-color);
}

.bg-secondary {
    background-color: var(--secondary-color);
}

.bg-light {
    background-color: var(--light-bg);
}

.bg-white {
    background-color: var(--white-color);
}


/* =========================================================
   TEXT COLORS
========================================================= */

.text-primary {
    color: var(--primary-color);
}

.text-secondary {
    color: var(--secondary-color);
}

.text-accent {
    color: var(--accent-color);
}

.text-white {
    color: var(--white-color);
}

.text-light {
    color: var(--text-light);
}


/* =========================================================
   FONT WEIGHT UTILITIES
========================================================= */

.fw-light {
    font-weight: var(--fw-light);
}

.fw-regular {
    font-weight: var(--fw-regular);
}

.fw-medium {
    font-weight: var(--fw-medium);
}

.fw-semibold {
    font-weight: var(--fw-semibold);
}

.fw-bold {
    font-weight: var(--fw-bold);
}

.fw-extrabold {
    font-weight: var(--fw-extrabold);
}


/* =========================================================
   GAP UTILITIES
========================================================= */

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-30 {
    gap: 30px;
}

.gap-40 {
    gap: 40px;
}


/* =========================================================
   Z-INDEX
========================================================= */

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-10 {
    z-index: 10;
}

.z-100 {
    z-index: 100;
}


/* =========================================================
   CURSOR
========================================================= */

.cursor-pointer {
    cursor: pointer;
}


/* =========================================================
   TRANSITION
========================================================= */

.transition {
    transition: var(--transition);
}


/* =========================================================
   RESPONSIVE HELPERS
========================================================= */

@media screen and (max-width: 767px) {

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

    .mobile-w-100 {
        width: 100%;
    }

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

    .mobile-mt-30 {
        margin-top: 30px;
    }

}