/*==================================================
  OFFICIAL YOGI
  UTILITIES.CSS
==================================================*/


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

.d-none{display:none!important;}
.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;
}



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

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

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

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

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

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

.justify-around{
justify-content:space-around!important;
}

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

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

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

.gap-10{
gap:10px!important;
}

.gap-20{
gap:20px!important;
}

.gap-30{
gap:30px!important;
}

.gap-40{
gap:40px!important;
}



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

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

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

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

.text-white{
color:var(--white)!important;
}

.text-gold{
color:var(--gold)!important;
}

.text-grey{
color:var(--grey)!important;
}

.text-dark{
color:#111!important;
}

.uppercase{
text-transform:uppercase!important;
}

.capitalize{
text-transform:capitalize!important;
}

.bold{
font-weight:700!important;
}

.medium{
font-weight:500!important;
}

.light{
font-weight:300!important;
}



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

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

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

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

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

.max-600{
max-width:600px;
margin:auto;
}

.max-800{
max-width:800px;
margin:auto;
}

.max-1000{
max-width:1000px;
margin:auto;
}

.max-1140{
max-width:1140px;
margin:auto;
}



/*==================================================
  BACKGROUNDS
==================================================*/

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

.bg-section{
background:var(--section)!important;
}

.bg-card{
background:var(--card)!important;
}

.bg-gold{
background:var(--gold)!important;
}

.bg-white{
background:#fff!important;
}



/*==================================================
  SHADOWS
==================================================*/

.shadow{
box-shadow:var(--shadow)!important;
}

.shadow-lg{
box-shadow:var(--shadow-lg)!important;
}



/*==================================================
  BORDERS
==================================================*/

.border{
border:1px solid var(--border)!important;
}

.border-gold{
border:1px solid var(--gold)!important;
}

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

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

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



/*==================================================
  PADDING
==================================================*/

.p-0{padding:0!important;}
.p-10{padding:10px!important;}
.p-20{padding:20px!important;}
.p-30{padding:30px!important;}
.p-40{padding:40px!important;}
.p-50{padding:50px!important;}
.p-60{padding:60px!important;}
.p-80{padding:80px!important;}

.pt-20{padding-top:20px!important;}
.pt-40{padding-top:40px!important;}
.pt-60{padding-top:60px!important;}
.pt-80{padding-top:80px!important;}

.pb-20{padding-bottom:20px!important;}
.pb-40{padding-bottom:40px!important;}
.pb-60{padding-bottom:60px!important;}
.pb-80{padding-bottom:80px!important;}



/*==================================================
  MARGIN
==================================================*/

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

.mt-0{margin-top:0!important;}
.mt-20{margin-top:20px!important;}
.mt-40{margin-top:40px!important;}
.mt-60{margin-top:60px!important;}
.mt-80{margin-top:80px!important;}
.mt-100{margin-top:100px!important;}

.mb-0{margin-bottom:0!important;}
.mb-20{margin-bottom:20px!important;}
.mb-40{margin-bottom:40px!important;}
.mb-60{margin-bottom:60px!important;}
.mb-80{margin-bottom:80px!important;}
.mb-100{margin-bottom:100px!important;}

.ml-auto{
margin-left:auto!important;
}

.mr-auto{
margin-right:auto!important;
}



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

.relative{
position:relative!important;
}

.absolute{
position:absolute!important;
}

.fixed{
position:fixed!important;
}



/*==================================================
  OVERFLOW
==================================================*/

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

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



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

.pointer{
cursor:pointer!important;
}



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

.opacity-0{
opacity:0!important;
}

.opacity-50{
opacity:.5!important;
}

.opacity-75{
opacity:.75!important;
}

.opacity-100{
opacity:1!important;
}



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

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



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

.transition{
transition:var(--transition)!important;
}



/*==================================================
  HOVER EFFECTS
==================================================*/

.hover-scale{

transition:var(--transition);

}

.hover-scale:hover{

transform:scale(1.03);

}

.hover-lift{

transition:var(--transition);

}

.hover-lift:hover{

transform:translateY(-8px);

}

.hover-gold:hover{

color:var(--gold)!important;

}



/*==================================================
  OBJECT FIT
==================================================*/

.object-cover{
object-fit:cover;
}

.object-contain{
object-fit:contain;
}



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

.visible{
visibility:visible;
}

.invisible{
visibility:hidden;
}