/*=========================================
  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-wrap{
    flex-wrap:wrap;
}

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

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

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

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

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

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

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

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

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

.flex-1{
    flex:1;
}

.gap-1{gap:5px;}
.gap-2{gap:10px;}
.gap-3{gap:15px;}
.gap-4{gap:20px;}
.gap-5{gap:30px;}

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

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.grid-auto{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

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

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

/*=========================================
  HEIGHT
=========================================*/

.h-100{
    height:100%;
}

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

.m-0{margin:0;}

.mt-1{margin-top:5px;}
.mt-2{margin-top:10px;}
.mt-3{margin-top:15px;}
.mt-4{margin-top:20px;}
.mt-5{margin-top:30px;}
.mt-6{margin-top:40px;}

.mb-1{margin-bottom:5px;}
.mb-2{margin-bottom:10px;}
.mb-3{margin-bottom:15px;}
.mb-4{margin-bottom:20px;}
.mb-5{margin-bottom:30px;}
.mb-6{margin-bottom:40px;}

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

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

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

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

.p-1{padding:5px;}
.p-2{padding:10px;}
.p-3{padding:15px;}
.p-4{padding:20px;}
.p-5{padding:30px;}
.p-6{padding:40px;}

.pt-5{padding-top:30px;}
.pb-5{padding-bottom:30px;}

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

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

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

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

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

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

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

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

.text-muted{
    color:var(--gray);
}

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

/*=========================================
  FONT WEIGHT
=========================================*/

.fw-light{
    font-weight:300;
}

.fw-normal{
    font-weight:400;
}

.fw-medium{
    font-weight:500;
}

.fw-semibold{
    font-weight:600;
}

.fw-bold{
    font-weight:700;
}

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

.bg-white{
    background:#fff;
}

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

.bg-primary{
    background:var(--primary);
    color:#fff;
}

.bg-success{
    background:var(--success);
    color:#fff;
}

.bg-danger{
    background:var(--danger);
    color:#fff;
}

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

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

.rounded-lg{
    border-radius:20px;
}

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

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

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

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

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

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

.position-relative{
    position:relative;
}

.position-absolute{
    position:absolute;
}

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

.overflow-hidden{
    overflow:hidden;
}

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

.pointer{
    cursor:pointer;
}

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

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

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

.hover-lift{
    transition:var(--transition);
}

.hover-lift:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
}

.hover-scale{
    transition:var(--transition);
}

.hover-scale:hover{
    transform:scale(1.05);
}

/*=========================================
  ANIMATIONS
=========================================*/

.fade-in{
    animation:fadeIn .5s ease;
}

.slide-up{
    animation:slideUp .6s ease;
}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes slideUp{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}