/*
|--------------------------------------------------------------------------
| Aanya Organics Theme
|--------------------------------------------------------------------------
| Module : Design System
| File   : utilities.css
| Version: 1.0.0
|--------------------------------------------------------------------------
*/

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

.container{

    width:min(calc(100% - 40px), var(--container-width));

    margin-inline:auto;

}

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

.section{

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

}

.section-sm{

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

}

.section-lg{

    padding:140px 0;

}

/* ==========================================================
   Display
========================================================== */

.d-flex{
    display:flex;
}

.d-grid{
    display:grid;
}

.d-block{
    display:block;
}

.d-none{
    display:none;
}

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

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

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

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

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

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

.gap-sm{
    gap:16px;
}

.gap-md{
    gap:24px;
}

.gap-lg{
    gap:40px;
}

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

.w-100{
    width:100%;
}

.h-100{
    height:100%;
}

/* ==========================================================
   Text
========================================================== */

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

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

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

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

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

/* ==========================================================
   Font Weight
========================================================== */

.fw-400{
    font-weight:400;
}

.fw-500{
    font-weight:500;
}

.fw-600{
    font-weight:600;
}

.fw-700{
    font-weight:700;
}

/* ==========================================================
   Margin Bottom
========================================================== */

.mb-1{
    margin-bottom:var(--space-2);
}

.mb-2{
    margin-bottom:var(--space-4);
}

.mb-3{
    margin-bottom:var(--space-6);
}

.mb-4{
    margin-bottom:var(--space-8);
}

.mb-5{
    margin-bottom:var(--space-10);
}

/* ==========================================================
   Padding
========================================================== */

.p-1{
    padding:var(--space-2);
}

.p-2{
    padding:var(--space-4);
}

.p-3{
    padding:var(--space-6);
}

.p-4{
    padding:var(--space-8);
}

/* ==========================================================
   Border Radius
========================================================== */

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

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

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

.rounded-pill{
    border-radius:var(--radius-pill);
}

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

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

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

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

/* ==========================================================
   Backgrounds
========================================================== */

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

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

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

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:768px){

    .section{

        padding:80px 0;

    }

    .section-lg{

        padding:100px 0;

    }

    .hide-mobile{

        display:none;

    }

}