/* =====================================================
   OSORIO PLUMBING SERVICES
   GLOBAL LAYOUT SYSTEM
   UNIFIED MARGINS + RESPONSIVE
===================================================== */

:root {
    --os-container: 1440px;
    --os-gutter: 40px;
    --os-section-space: 55px;

    --os-blue: #0788df;
    --os-navy: #102e52;
    --os-wine: #84233d;
}

/* GLOBAL BOX MODEL */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
}

body {
    width: 100%;
    min-width: 320px;
    margin: 0;
}

/* COMMON CONTAINER */

.os-container {
    width: calc(100% - (var(--os-gutter) * 2));
    max-width: var(--os-container);
    margin-inline: auto;
}

/* SECTION BACKGROUNDS REMAIN FULL WIDTH */

.os-section {
    width: 100%;
    position: relative;
}

/* =====================================================
   EXISTING SECTION CONTAINERS
===================================================== */

.osp-quick__container,
.os3-container,
.osp-about__container {
    width: calc(100% - (var(--os-gutter) * 2));
    max-width: var(--os-container);
    margin-inline: auto;
}

/* QUICK SERVICES */

.osp-quick {
    padding-block: var(--os-section-space);
}

/* ABOUT */

.os3-about,
.osp-about {
    padding-block: var(--os-section-space);
}

/* =====================================================
   TYPOGRAPHY MINIMUM
===================================================== */

body {
    font-size: 16px;
}

.os-section p,
.os-section a,
.os-section button,
.os-section span,
.os-section small,
.osp-quick p,
.osp-quick a,
.osp-quick span,
.osp-quick small,
.os3-about p,
.os3-about a,
.os3-about span,
.os3-about small {
    font-size: max(14px, 1em);
}

/* =====================================================
   RESPONSIVE CONTAINER
===================================================== */

@media (max-width: 1199px) {

    :root {
        --os-gutter: 32px;
        --os-section-space: 48px;
    }

}

@media (max-width: 767px) {

    :root {
        --os-gutter: 20px;
        --os-section-space: 42px;
    }

}

@media (max-width: 380px) {

    :root {
        --os-gutter: 16px;
        --os-section-space: 36px;
    }

}