/* ==========================================================
   HOMIE DESIGN SYSTEM
   COMPONENTS.CSS
   Version : 1.0
========================================================== */


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

.container-custom{
    width:min(100% - 40px,var(--container));
    margin-inline:auto;
}


/* ==========================================================
   BUTTON
========================================================== */

.btn-homie{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    min-height:50px;

    padding:0 28px;

    border:none;

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

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:all var(--transition);

    text-decoration:none;
}

.btn-primary{

    color:#fff;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark));

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

}

.btn-primary:hover{

    color:#fff;

    transform:translateY(-3px);

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

}

.btn-secondary{

    color:#fff;

    background:
    linear-gradient(
    135deg,
    var(--navy),
    var(--navy-dark));

}

.btn-secondary:hover{

    color:#fff;

    transform:translateY(-3px);

}

.btn-outline{

    color:var(--navy);

    border:2px solid var(--primary);

    background:#fff;

}

.btn-outline:hover{

    color:#fff;

    background:var(--primary);

}


/* ==========================================================
   CARD
========================================================== */

.card-homie{

    position:relative;

    overflow:hidden;

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

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

    background:#fff;

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

    transition:all var(--transition);

}

.card-homie:hover{

    transform:translateY(-8px);

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

}


/* ==========================================================
   ICON BOX
========================================================== */

.icon-box{

    display:grid;

    place-items:center;

    width:62px;

    height:62px;

    border-radius:18px;

    background:

    linear-gradient(
    145deg,
    rgba(17,185,90,.12),
    rgba(17,185,90,.03));

    color:var(--primary);

    font-size:28px;

    transition:all var(--transition);

}

.card-homie:hover .icon-box{

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark));

    color:#fff;

}


/* ==========================================================
   BADGE
========================================================== */

.badge-homie{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:34px;

    padding:0 16px;

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

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

    color:var(--primary-dark);

    font-size:13px;

    font-weight:600;

}


/* ==========================================================
   IMAGE
========================================================== */

.image-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.image-rounded{

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

}


/* ==========================================================
   GLASS CARD
========================================================== */

.glass{

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

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}


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

.shadow-xs{

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

}

.shadow-sm{

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

}

.shadow-md{

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

}

.shadow-lg{

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

}

.shadow-xl{

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

}


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

.mt-section{

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

}

.mb-section{

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

}

.py-section{

    padding-block:var(--section-padding);

}


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

}


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

.grid-2{

    display:grid;

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

    gap:30px;

}

.grid-3{

    display:grid;

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

    gap:30px;

}

.grid-4{

    display:grid;

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

    gap:30px;

}


/* ==========================================================
   FORM
========================================================== */

.form-control-homie{

    width:100%;

    min-height:54px;

    padding:0 18px;

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

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

    background:#fff;

    transition:all var(--transition);

}

.form-control-homie:focus{

    border-color:var(--primary);

    box-shadow:

    0 0 0 4px rgba(17,185,90,.10);

}

textarea.form-control-homie{

    min-height:180px;

    padding-top:16px;

}


/* ==========================================================
   DIVIDER
========================================================== */

.divider{

    width:70px;

    height:4px;

    border-radius:999px;

    background:var(--primary);

}


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

@media(max-width:991px){

.grid-4{

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

}

.grid-3{

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

}

}

@media(max-width:576px){

.grid-2,
.grid-3,
.grid-4{

grid-template-columns:1fr;

}

.btn-homie{

width:100%;

}

.py-section{

padding-block:70px;

}

}