/* ======================================================
   Architecture Website Framework
   Utilities CSS
   Version 1.0
======================================================*/


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

.d-none{
    display:none;
}

.d-block{
    display:block;
}

.d-flex{
    display:flex;
}

.d-grid{
    display:grid;
}


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

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

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

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

.items-start{
    align-items:flex-start;
}

.items-end{
    align-items:flex-end;
}

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

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

.justify-end{
    justify-content:flex-end;
}


/*==========================================
TEXT
==========================================*/

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

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

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

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

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

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

.text-white{
    color:#fff;
}


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

.w-100{
    width:100%;
}

.h-100{
    height:100%;
}

.max-text{
    max-width:var(--max-text-width);
}


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

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

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

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

.bg-dark{
    background:var(--primary);
}


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

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

.rounded-pill{
    border-radius:50px;
}

.rounded-circle{
    border-radius:50%;
}


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

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

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


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

.mt-20{margin-top:20px;}
.mt-40{margin-top:40px;}
.mt-60{margin-top:60px;}

.mb-20{margin-bottom:20px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}

.pt-0{padding-top:0;}
.pb-0{padding-bottom:0;}


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

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.overflow-hidden{

    overflow:hidden;

}


/*==========================================
POSITION
==========================================*/

.position-relative{

    position:relative;

}

.position-absolute{

    position:absolute;

}


/*==========================================
CURSOR
==========================================*/

.cursor-pointer{

    cursor:pointer;

}


/*==========================================
VISIBILITY
==========================================*/

.hidden{

    display:none;

}

.invisible{

    visibility:hidden;

}

.visible{

    visibility:visible;

}