/* ==========================================================
   Bahonar Hospital Design System
   Layout
   Version 1.0
========================================================== */


/* ==========================
   RESET
========================== */

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

html,
body{
    width:100%;
    overflow-x:hidden;
}

body{
    min-height:100vh;
}


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

.container-xl{

    width:100%;

    max-width:1320px;

    margin-inline:auto;

    padding-inline:20px;

}

.container-lg{

    width:100%;

    max-width:1180px;

    margin-inline:auto;

    padding-inline:20px;

}

.container-md{

    width:100%;

    max-width:960px;

    margin-inline:auto;

    padding-inline:20px;

}


/* Bootstrap Container Override */

.container{

    max-width:1320px;

    padding-inline:20px;

}


/* ==========================
   SECTION
========================== */

.section{

    padding-block:100px;

}

.section-sm{

    padding-block:70px;

}

.section-lg{

    padding-block:140px;

}

.section-light{

    background:#fff;

}

.section-gray{

    background:var(--color-background);

}


/* ==========================
   SECTION TITLE
========================== */

.section-header{

    margin-bottom:64px;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:999px;

    background:var(--color-primary-light);

    color:var(--color-primary);

    font-size:14px;

    font-weight:700;

    margin-bottom:18px;

}

.section-title{

    font-size:var(--fs-h2);

    font-weight:900;

    margin-bottom:18px;

    color:var(--color-text);

}

.section-description{

    max-width:700px;

    color:var(--color-text-light);

    line-height:2;

}


/* ==========================
   GRID HELPERS
========================== */

.grid{

    display:grid;

}

.grid-2{

    display:grid;

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

    gap:32px;

}

.grid-3{

    display:grid;

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

    gap:32px;

}

.grid-4{

    display:grid;

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

    gap:28px;

}


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

.flex{

    display:flex;

}

.items-center{

    align-items:center;

}

.justify-between{

    justify-content:space-between;

}

.justify-center{

    justify-content:center;

}

.flex-column{

    flex-direction:column;

}

.flex-wrap{

    flex-wrap:wrap;

}

.gap-8{

    gap:8px;

}

.gap-16{

    gap:16px;

}

.gap-24{

    gap:24px;

}

.gap-32{

    gap:32px;

}


/* ==========================
   SPACING
========================== */

.mt-16{margin-top:16px;}
.mt-24{margin-top:24px;}
.mt-32{margin-top:32px;}
.mt-48{margin-top:48px;}
.mt-64{margin-top:64px;}

.mb-16{margin-bottom:16px;}
.mb-24{margin-bottom:24px;}
.mb-32{margin-bottom:32px;}
.mb-48{margin-bottom:48px;}
.mb-64{margin-bottom:64px;}


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

.w-100{

    width:100%;

}

.max-600{

    max-width:600px;

}

.max-700{

    max-width:700px;

}

.max-800{

    max-width:800px;

}


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

.bg-primary{

    background:var(--color-primary);

    color:#fff;

}

.bg-white{

    background:#fff;

}

.bg-gray{

    background:var(--color-background);

}


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

.border{

    border:1px solid var(--color-border);

}

.rounded-sm{

    border-radius:var(--radius-sm);

}

.rounded-md{

    border-radius:var(--radius-md);

}

.rounded-lg{

    border-radius:var(--radius-lg);

}


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

.shadow-sm{

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

}

.shadow-md{

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

}

.shadow-lg{

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

}


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

.d-none{

    display:none;

}

.d-block{

    display:block;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}


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

@media(max-width:1200px){

    .grid-4{

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

    }

}

@media(max-width:992px){

    .section{

        padding-block:80px;

    }

    .grid-4{

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

    }

    .grid-3{

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

    }

    .grid-2{

        grid-template-columns:1fr;

    }

    .section-header{

        margin-bottom:48px;

    }

}

@media(max-width:768px){

    .container{

        padding-inline:16px;

    }

    .section{

        padding-block:64px;

    }

    .grid-3,

    .grid-4{

        grid-template-columns:1fr;

    }

    .section-title{

        font-size:28px;

    }

}

@media(max-width:576px){

    .container{

        padding-inline:14px;

    }

    .section{

        padding-block:52px;

    }

}