/*==========================================================
    Binarylogin
    utilities.css
==========================================================*/

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

.d-block{display:block!important;}
.d-inline{display:inline!important;}
.d-inline-block{display:inline-block!important;}
.d-flex{display:flex!important;}
.d-grid{display:grid!important;}
.d-none{display:none!important;}

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

.flex-row{flex-direction:row!important;}
.flex-column{flex-direction:column!important;}

.justify-start{justify-content:flex-start!important;}
.justify-center{justify-content:center!important;}
.justify-end{justify-content:flex-end!important;}
.justify-between{justify-content:space-between!important;}
.justify-around{justify-content:space-around!important;}

.align-start{align-items:flex-start!important;}
.align-center{align-items:center!important;}
.align-end{align-items:flex-end!important;}

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

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

.w-25{width:25%!important;}
.w-50{width:50%!important;}
.w-75{width:75%!important;}
.w-100{width:100%!important;}

.h-100{height:100%!important;}

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

.m-0{margin:0!important;}

.mt-1{margin-top:10px!important;}
.mt-2{margin-top:20px!important;}
.mt-3{margin-top:30px!important;}
.mt-4{margin-top:40px!important;}
.mt-5{margin-top:50px!important;}

.mb-1{margin-bottom:10px!important;}
.mb-2{margin-bottom:20px!important;}
.mb-3{margin-bottom:30px!important;}
.mb-4{margin-bottom:40px!important;}
.mb-5{margin-bottom:50px!important;}

.ms-auto{margin-left:auto!important;}
.me-auto{margin-right:auto!important;}

.mx-auto{
    margin-left:auto!important;
    margin-right:auto!important;
}

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

.p-0{padding:0!important;}

.p-1{padding:10px!important;}
.p-2{padding:20px!important;}
.p-3{padding:30px!important;}
.p-4{padding:40px!important;}
.p-5{padding:50px!important;}

.py-1{
    padding-top:10px!important;
    padding-bottom:10px!important;
}

.py-2{
    padding-top:20px!important;
    padding-bottom:20px!important;
}

.py-3{
    padding-top:30px!important;
    padding-bottom:30px!important;
}

.py-4{
    padding-top:40px!important;
    padding-bottom:40px!important;
}

.py-5{
    padding-top:50px!important;
    padding-bottom:50px!important;
}

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

.text-left{text-align:left!important;}
.text-center{text-align:center!important;}
.text-right{text-align:right!important;}

.text-white{color:#fff!important;}
.text-dark{color:#081423!important;}
.text-primary{color:var(--primary)!important;}
.text-secondary{color:var(--secondary)!important;}
.text-muted{color:#6c757d!important;}

/*=========================================
Background
=========================================*/

.bg-white{background:#fff!important;}
.bg-light{background:#f8f9fa!important;}
.bg-dark{background:#081423!important;}
.bg-primary{background:var(--primary)!important;}
.bg-gradient{background:var(--gradient-primary)!important;}

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

.rounded{
    border-radius:8px!important;
}

.rounded-lg{
    border-radius:15px!important;
}

.rounded-xl{
    border-radius:25px!important;
}

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

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

/*=========================================
Shadow
=========================================*/

.shadow-sm{
    box-shadow:0 5px 15px rgba(0,0,0,.08)!important;
}

.shadow{
    box-shadow:0 10px 30px rgba(0,0,0,.12)!important;
}

.shadow-lg{
    box-shadow:0 20px 50px rgba(0,0,0,.18)!important;
}

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

.border{
    border:1px solid #E5E7EB!important;
}

.border-0{
    border:none!important;
}

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

.overflow-hidden{
    overflow:hidden!important;
}

.position-relative{
    position:relative!important;
}

.position-absolute{
    position:absolute!important;
}

/*=========================================
Cursor
=========================================*/

.cursor-pointer{
    cursor:pointer!important;
}

/*=========================================
Opacity
=========================================*/

.opacity-0{opacity:0!important;}
.opacity-25{opacity:.25!important;}
.opacity-50{opacity:.5!important;}
.opacity-75{opacity:.75!important;}
.opacity-100{opacity:1!important;}

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

.glass{

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

    backdrop-filter:blur(15px);

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

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

}

/*=========================================
Image Helpers
=========================================*/

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.img-contain{

    width:100%;

    height:100%;

    object-fit:contain;

}

/*=========================================
Hover
=========================================*/

.hover-up:hover{

    transform:translateY(-8px);

}

.hover-scale:hover{

    transform:scale(1.05);

}

.hover-shadow:hover{

    box-shadow:0 20px 40px rgba(0,0,0,.20);

}

/*=========================================
Transition
=========================================*/

.transition{

    transition:all .35s ease;

}

/*=========================================
Z-index
=========================================*/

.z-1{z-index:1;}
.z-10{z-index:10;}
.z-100{z-index:100;}
.z-1000{z-index:1000;}

/*=========================================
Visibility
=========================================*/

.visible{
    visibility:visible!important;
}

.invisible{
    visibility:hidden!important;
}

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

.fw-light{font-weight:300!important;}
.fw-normal{font-weight:400!important;}
.fw-medium{font-weight:500!important;}
.fw-semibold{font-weight:600!important;}
.fw-bold{font-weight:700!important;}
.fw-extrabold{font-weight:800!important;}