/* ==========================================================
   HASHVIX UTILITIES
========================================================== */


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

.hx-flex{display:flex;}
.hx-inline-flex{display:inline-flex;}
.hx-block{display:block;}
.hx-inline{display:inline;}
.hx-grid{display:grid;}
.hx-hidden{display:none;}


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

.hx-center{
display:flex;
align-items:center;
justify-content:center;
}

.hx-between{
display:flex;
align-items:center;
justify-content:space-between;
}

.hx-around{
display:flex;
justify-content:space-around;
align-items:center;
}

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

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

.hx-grow{
flex:1;
}


/* ==========================================================
   ALIGN
========================================================== */

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

.hx-justify-start{justify-content:flex-start;}
.hx-justify-center{justify-content:center;}
.hx-justify-end{justify-content:flex-end;}
.hx-justify-between{justify-content:space-between;}


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

.hx-w-100{width:100%;}
.hx-h-100{height:100%;}

.hx-max-600{max-width:600px;}
.hx-max-800{max-width:800px;}
.hx-max-1200{max-width:1200px;}

.hx-container{

width:min(1320px,92%);

margin:auto;

}


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

.hx-text-center{text-align:center;}
.hx-text-left{text-align:left;}
.hx-text-right{text-align:right;}

.hx-bold{font-weight:700;}
.hx-extra-bold{font-weight:900;}

.hx-muted{color:var(--hx-text-muted);}
.hx-primary{color:var(--hx-primary);}
.hx-success{color:#10B981;}
.hx-danger{color:#EF4444;}
.hx-warning{color:#F59E0B;}
.hx-white{color:white;}


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

.hx-radius-sm{border-radius:12px;}
.hx-radius{border-radius:18px;}
.hx-radius-lg{border-radius:24px;}
.hx-radius-xl{border-radius:32px;}
.hx-round{border-radius:999px;}
.hx-circle{border-radius:50%;}


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

.hx-shadow{

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

}

.hx-shadow-lg{

box-shadow:0 35px 80px rgba(0,0,0,.45);

}

.hx-glow{

box-shadow:0 0 35px rgba(79,140,255,.20);

}


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

.hx-border{

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

}

.hx-border-primary{

border:1px solid rgba(79,140,255,.30);

}


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

.hx-bg{

background:var(--hx-bg);

}

.hx-surface{

background:var(--hx-surface);

}

.hx-surface-2{

background:var(--hx-surface-2);

}

.hx-glass{

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

backdrop-filter:blur(25px);

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

}


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

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

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

.hx-p-20{padding:20px;}
.hx-p-30{padding:30px;}
.hx-p-40{padding:40px;}

.hx-gap-10{gap:10px;}
.hx-gap-20{gap:20px;}
.hx-gap-30{gap:30px;}
.hx-gap-40{gap:40px;}


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

.hx-relative{position:relative;}
.hx-absolute{position:absolute;}
.hx-fixed{position:fixed;}

.hx-overflow-hidden{

overflow:hidden;

}


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

.hx-pointer{

cursor:pointer;

}


/* ==========================================================
   TRANSITIONS
========================================================== */

.hx-transition{

transition:.3s;

}

.hx-hover-up:hover{

transform:translateY(-6px);

}

.hx-scale:hover{

transform:scale(1.04);

}


/* ==========================================================
   OPACITY
========================================================== */

.hx-opacity-50{opacity:.5;}
.hx-opacity-75{opacity:.75;}
.hx-opacity-100{opacity:1;}


/* ==========================================================
   Z INDEX
========================================================== */

.hx-z1{z-index:1;}
.hx-z10{z-index:10;}
.hx-z100{z-index:100;}
.hx-z1000{z-index:1000;}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

.hx-hide-mobile{

display:none!important;

}

.hx-center-mobile{

text-align:center;

}

.hx-column-mobile{

flex-direction:column;

}

.hx-gap-mobile{

gap:20px;

}

}