/* ==========================================================
   DJJ Healthcare
   layout.css
========================================================== */

/* ==========================================================
   CONTAINER
========================================================== */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* ==========================================================
   SECTIONS
========================================================== */
section {
    position: relative;
    overflow: hidden;
}

.section-light {
    background: var(--white);
}

.section-grey {
    background: var(--light);
}

.section-secondary {
    background: var(--secondary-dark);
    color: #fff;
}

.section-primary {
    background: var(--primary);
    color: #fff;
}

#services {
    background-image: url('/images/home-bg.jpg');
    background-size: cover;
    background-color: rgba(255, 255, 255, 0.6);
    background-blend-mode: lighten;
}

/* ==========================================================
   SECTION HEADINGS
========================================================== */
.sectionHeading {
    margin-bottom: 80px;
    text-align: center;
}

.sectionHeading span {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--secondary);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 14px;
}

.sectionHeading h2 {
    font-size: 48px;
    margin-bottom: 20px;
    color: var(--secondary-dark);
}

.sectionHeading p {
    max-width: 700px;
    margin: auto;
    color: var(--text-light);
    font-size: 19px;
}

.section-primary .sectionHeading p {
    color: rgba(255,255,255,.8);
}

/* ==========================================================
   GRID
========================================================== */
.grid {
    display: grid;
    gap: 32px;
}

.grid-2 {
    grid-template-columns: repeat(2,1fr);
}

.grid-3 {
    grid-template-columns: repeat(3,1fr);
}

.grid-4 {
    grid-template-columns: repeat(4,1fr);
}

/* ==========================================================
   FLEX
========================================================== */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

/* ==========================================================
   SPACING
========================================================== */
.mt-1 {margin-top: 16px;}
.mt-2 {margin-top: 32px;}
.mt-3 {margin-top: 48px;}
.mt-4 {margin-top: 64px;}
.mb-1 {margin-bottom: 16px;}
.mb-2 {margin-bottom: 32px;}
.mb-3 {margin-bottom: 48px;}
.mb-4 {margin-bottom: 64px;}

/* ==========================================================
   SVG DIVIDERS
========================================================== */
.wave-divider {
    width: 100%;
    line-height: 0;
    overflow: hidden;
}

.wave-divider.bottom {
    margin-bottom: -170px;
    position: relative;
    z-index: 1000;
}

.wave-divider.top {
    margin-top: -135px;
    position: relative;
    z-index: 1000;
}

.wave-divider svg {
    display: block;
    width: 100%;
    height: 170px;
}

.hero-wave {
    margin-top: -170px;
    position: relative;
    z-index: 10;
}

.services-wave {
    margin-top: -1px;
}

.footer-wave {
    margin-bottom: -1px;
}

/* ==========================================================
   FLOATING SHAPES
========================================================== */
.floatingShapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.floatingShapes span {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
}

.floatingShapes span:nth-child(1) {
    width: 260px;
    height: 260px;
    left: -80px;
    top: 120px;
}

.floatingShapes span:nth-child(2) {
    width: 180px;
    height: 180px;
    right: 10%;
    top: 40%;
}

.floatingShapes span:nth-child(3) {
    width: 340px;
    height: 340px;
    bottom: -140px;
    right: -80px;
}

/* ==========================================================
   TEXT HELPERS
========================================================== */
.text-center {
    text-align: center;
}

.text-white {
    color: #fff;
}

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

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

/* ==========================================================
   BACKGROUNDS
========================================================== */
.bg-primary {
    background: var(--primary);
}

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

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

/* ==========================================================
   DECORATIVE BLOB
========================================================== */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .12;
}