/*==================================================
    KETAN HYUNDAI
    utilities.css
    Part 1/2
==================================================*/


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

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

.flex{display:flex!important;}
.inline-flex{display:inline-flex!important;}

.grid{display:grid!important;}

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

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

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

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

.gap-5{gap:5px;}
.gap-10{gap:10px;}
.gap-15{gap:15px;}
.gap-20{gap:20px;}
.gap-25{gap:25px;}
.gap-30{gap:30px;}
.gap-40{gap:40px;}


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

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

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

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

.min-vh-100{
min-height:100vh;
}


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

.m-auto{margin:auto;}

.m-0{margin:0!important;}
.m-5{margin:5px!important;}
.m-10{margin:10px!important;}
.m-15{margin:15px!important;}
.m-20{margin:20px!important;}
.m-30{margin:30px!important;}
.m-40{margin:40px!important;}

.mt-0{margin-top:0!important;}
.mt-5{margin-top:5px!important;}
.mt-10{margin-top:10px!important;}
.mt-15{margin-top:15px!important;}
.mt-20{margin-top:20px!important;}
.mt-30{margin-top:30px!important;}
.mt-40{margin-top:40px!important;}
.mt-50{margin-top:50px!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-5{margin-bottom:5px!important;}
.mb-10{margin-bottom:10px!important;}
.mb-15{margin-bottom:15px!important;}
.mb-20{margin-bottom:20px!important;}
.mb-30{margin-bottom:30px!important;}
.mb-40{margin-bottom:40px!important;}
.mb-50{margin-bottom:50px!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;
}


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

.p-0{padding:0!important;}
.p-5{padding:5px!important;}
.p-10{padding:10px!important;}
.p-15{padding:15px!important;}
.p-20{padding:20px!important;}
.p-25{padding:25px!important;}
.p-30{padding:30px!important;}
.p-40{padding:40px!important;}
.p-50{padding:50px!important;}

.pt-10{padding-top:10px!important;}
.pt-20{padding-top:20px!important;}
.pt-30{padding-top:30px!important;}
.pt-40{padding-top:40px!important;}
.pt-50{padding-top:50px!important;}
.pt-80{padding-top:80px!important;}
.pt-100{padding-top:100px!important;}

.pb-10{padding-bottom:10px!important;}
.pb-20{padding-bottom:20px!important;}
.pb-30{padding-bottom:30px!important;}
.pb-40{padding-bottom:40px!important;}
.pb-50{padding-bottom:50px!important;}
.pb-80{padding-bottom:80px!important;}
.pb-100{padding-bottom:100px!important;}


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

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

.text-uppercase{text-transform:uppercase;}
.text-lowercase{text-transform:lowercase;}
.text-capitalize{text-transform:capitalize;}

.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;}
.fw-black{font-weight:800;}

.fs-12{font-size:12px;}
.fs-14{font-size:14px;}
.fs-16{font-size:16px;}
.fs-18{font-size:18px;}
.fs-20{font-size:20px;}
.fs-24{font-size:24px;}
.fs-30{font-size:30px;}
.fs-36{font-size:36px;}
.fs-48{font-size:48px;}
.fs-64{font-size:64px;}

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

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

.text-white{
color:#fff;
}

.text-dark{
color:#222;
}

.text-muted{
color:#777;
}


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

.bg-white{
background:#fff;
}

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

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

.bg-dark{
background:#111827;
}

.bg-light{
background:#f8fafc;
}

.bg-transparent{
background:transparent;
}


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

.rounded-sm{
border-radius:6px;
}

.rounded{
border-radius:10px;
}

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

.rounded-xl{
border-radius:30px;
}

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

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


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

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

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

.shadow-lg{

box-shadow:0 25px 60px rgba(0,0,0,.2);
}

.shadow-none{
box-shadow:none!important;
}
/*==================================================
    KETAN HYUNDAI
    utilities.css
    Part 2/2
==================================================*/


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

.position-relative{position:relative!important;}
.position-absolute{position:absolute!important;}
.position-fixed{position:fixed!important;}
.position-sticky{position:sticky!important;}

.top-0{top:0!important;}
.right-0{right:0!important;}
.bottom-0{bottom:0!important;}
.left-0{left:0!important;}

.top-50{top:50%!important;}
.left-50{left:50%!important;}

.translate-middle{
transform:translate(-50%,-50%);
}


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

.overflow-hidden{overflow:hidden!important;}
.overflow-auto{overflow:auto!important;}
.overflow-scroll{overflow:scroll!important;}
.overflow-visible{overflow:visible!important;}


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

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


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

.cursor-pointer{cursor:pointer;}
.cursor-default{cursor:default;}
.cursor-move{cursor:move;}
.cursor-not-allowed{cursor:not-allowed;}


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

.border{
border:1px solid var(--gray-200);
}

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

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

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

.border-white{
border:1px solid #fff;
}


/*=====================================
    GLASS EFFECT
=====================================*/

.glass{

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

backdrop-filter:blur(18px);

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

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

}

.glass-dark{

background:rgba(0,0,0,.25);

backdrop-filter:blur(18px);

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

}


/*=====================================
    GRADIENTS
=====================================*/

.gradient-primary{

background:linear-gradient(
135deg,
#002C6F,
#0057B8
);

color:#fff;

}

.gradient-secondary{

background:linear-gradient(
135deg,
#00AEEF,
#3CC7FF
);

color:#fff;

}

.gradient-dark{

background:linear-gradient(
135deg,
#001B46,
#002C6F
);

color:#fff;

}


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

.hover-up{

transition:.35s;

}

.hover-up:hover{

transform:translateY(-8px);

}

.hover-scale{

transition:.35s;

}

.hover-scale:hover{

transform:scale(1.05);

}

.hover-rotate{

transition:.35s;

}

.hover-rotate:hover{

transform:rotate(2deg);

}

.hover-shadow:hover{

box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.hover-primary:hover{

background:var(--primary);

color:#fff;

}

.hover-secondary:hover{

background:var(--secondary);

color:#fff;

}


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

.transition{

transition:all .35s ease;

}

.transition-fast{

transition:all .2s ease;

}

.transition-slow{

transition:all .6s ease;

}


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

.z-1{z-index:1;}
.z-10{z-index:10;}
.z-50{z-index:50;}
.z-100{z-index:100;}
.z-500{z-index:500;}
.z-999{z-index:999;}
.z-modal{z-index:9999;}


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

.object-cover{

object-fit:cover;

}

.object-contain{

object-fit:contain;

}


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

.img-fluid{

max-width:100%;

height:auto;

display:block;

}

.img-cover{

width:100%;

height:100%;

object-fit:cover;

}


/*=====================================
    LINE CLAMP
=====================================*/

.line-1{

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

.line-2{

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;

}

.line-3{

display:-webkit-box;

-webkit-line-clamp:3;

-webkit-box-orient:vertical;

overflow:hidden;

}


/*=====================================
    LOADER
=====================================*/

.loading{

pointer-events:none;

opacity:.6;

}

.spinner{

width:45px;

height:45px;

border:4px solid rgba(255,255,255,.25);

border-top-color:var(--secondary);

border-radius:50%;

animation:spin 1s linear infinite;

}


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

.fade-in{

animation:fadeIn .8s ease both;

}

.slide-up{

animation:slideUp .8s ease both;

}

.zoom-in{

animation:zoomIn .6s ease both;

}

.bounce{

animation:bounce 2s infinite;

}

.float{

animation:floating 4s ease-in-out infinite;

}


/*=====================================
    KEYFRAMES
=====================================*/

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes slideUp{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes zoomIn{

from{

opacity:0;

transform:scale(.8);

}

to{

opacity:1;

transform:scale(1);

}

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

@keyframes floating{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}


/*=====================================
    SELECTION
=====================================*/

::selection{

background:var(--secondary);

color:#fff;

}


/*=====================================
    CUSTOM SCROLLBAR
=====================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f3f4f6;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--secondary);

}