/* ==========================================================
   PET WELLNESS 360
   Layout System
   ========================================================== */

/* ==========================================================
   Container
   ========================================================== */

.container{

    max-width:var(--container);

}

/* ==========================================================
   Sections
   ========================================================== */

.section{

    padding:var(--section-space) 0;

    position:relative;

}

.section-light{

    background:var(--pw-white);

}

.section-gray{

    background:var(--pw-section);

}

.section-primary{

    background:var(--pw-primary);

    color:var(--pw-white);

}

/* ==========================================================
   Flex Helpers
   ========================================================== */

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

}

/* ==========================================================
   Width Helpers
   ========================================================== */

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}

/* ==========================================================
   Spacing
   ========================================================== */

.mt-section{

    margin-top:var(--section-space);

}

.mb-section{

    margin-bottom:var(--section-space);

}

.py-section{

    padding-top:var(--section-space);

    padding-bottom:var(--section-space);

}

/* ==========================================================
   Overflow
   ========================================================== */

.overflow-hidden{

    overflow:hidden;

}

/* ==========================================================
   Position
   ========================================================== */

.position-relative{

    position:relative;

}

.position-absolute{

    position:absolute;

}

/* ==========================================================
   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);

}

/* ==========================================================
   Shadows
   ========================================================== */

.shadow-sm{

    box-shadow:var(--shadow-sm);

}

.shadow-md{

    box-shadow:var(--shadow-md);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}

/* ==========================================================
   Glass Effect
   ========================================================== */

.glass{

    backdrop-filter:blur(14px);

    background:rgba(255,255,255,.72);

    border:1px solid rgba(255,255,255,.35);

}

/* ==========================================================
   INTERNAL GRID COMPATIBILITY
   Supports the existing Layout engine classes without
   introducing an external framework dependency.
   ========================================================== */

.container{
    width:min(calc(100% - 32px), var(--pw-container));
    margin-inline:auto;
}

.row{
    display:flex;
    flex-wrap:wrap;
    margin-inline:-12px;
}

.row > [class*="col-"]{
    width:100%;
    padding-inline:12px;
}

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

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

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

.g-4{
    row-gap:1.5rem;
}

.mt-4{
    margin-top:1.5rem;
}

.col-12{
    width:100%;
}

.col-md-12{
    width:100%;
}

@media (min-width:768px){

    .col-md-12{
        width:100%;
    }

}

@media (min-width:992px){

    .col-lg-4{
        width:33.333333%;
    }

    .col-lg-6{
        width:50%;
    }

    .col-lg-10{
        width:83.333333%;
    }

    .col-lg-12{
        width:100%;
    }

}

@media (max-width:767px){

    .container{
        width:min(calc(100% - 24px), var(--pw-container));
    }

    .row{
        margin-inline:-8px;
    }

    .row > [class*="col-"]{
        padding-inline:8px;
    }

}