/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* width */
::-webkit-scrollbar {
    width: 8px;
	border-radius: 5px;
	transition: 0.4s;
}

::-webkit-scrollbar:hover {
	border-radius: 10px;
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #3f3f46;
	border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #3b82f6;
	border-radius: 10px;
}

body {
    font-family: 'Roboto', sans-serif !important;
    overflow: overlay;
}

html {scroll-behavior: smooth !important;}

.dark-nav {
    background-color: #18181b !important;
    color: #fafafa !important;
}
.blue-nav {
    background-color: #1d4ed8 !important;
    color: #fafafa !important;
}

#logo {
    font-size: 3rem !important;
    margin-bottom: 0.50rem;
}

.project-img {
    height: 400px;
    width: 450px;
}

.to-top {
    background-color: #18181b;
    color: #fafafa;
    transition: 0.3s;
}
.to-top:hover {
    background-color: #1d4ed8;
}

.swiper-slide-bg {
    filter: brightness(0.4) !important;
}
.see-more i {transition: 0.4s !important;}
.see-more strong {transition: 0.4s !important;}
.see-more:hover strong {border: none !important;color: #1d4ed8;}
.see-more:hover i {padding-left: 2rem;text-decoration: none !important;color: #1d4ed8;}

/* Images */
.center-img {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.about-image {
    height: 200px;
    width: 250px;
}

/* .button-reveal */
.button.button-reveal i {
    opacity: 0;
    left: auto !important;
    right: 20px !important;
    background-color: transparent;
    transition: all .3s ease !important;
}

.button.text-end.button-reveal i {
    left: 20px !important;
    right: auto !important;
}

.button:not(.text-end).button-reveal i {
    left: auto !important;
    right: 20px !important;
}

.button:hover.button-reveal i {
    opacity: 1;
    right: 0 !important;
    transform: translateX(-10px);
}

.button.button-reveal:not(.text-end):hover span {
    left: -9% !important;
}

.button.button-reveal.text-end:hover span {
    left: 9% !important;
}




/* .btn-underline */

.btn-underline::before,
.btn-strikethrough::before {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background: #111;
    transition: width .3s ease;
}

.btn-strikethrough:hover {
    color: #AAA;
}

.btn-strikethrough::before {
    bottom: 50%;
}

.btn-underline:hover::before,
.btn-strikethrough:hover::before {
    width: 100%;
}


/* .button-change */
.button-change {
    --height: 2.375rem;
    height: var(--height);
    line-height: calc(var(--height) - 2px) !important;
    border-bottom: 1px solid #222 !important;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    display: inline-flex;
    flex-direction: column-reverse;
}

.button-change.btn-sm {
    --height: 2rem;
}

.button-change.btn-lg {
    --height: 3rem;
}

.button-change span {
    position: relative;
    display: block;
    transition: transform .35s ease;
    transform: translate3d(0px, 0%, 0px);
    transform-style: preserve-3d;
}

.button-change:hover span {
    transform: translate3d(0px, 100%, 0px);

}


/* .button-shadow */
.btn-shadow,
.btn-shadow.reverse:hover {
    --bg-color: #FFF;
    --border-color: #666;
    --position: -5px -5px;
    box-shadow: var(--position) 0px 0px var(--bg-color),
        var(--position) 0px 1px var(--border-color);
    transition: all .3s ease-out !important;
}

.btn-shadow:hover,
.btn-shadow.reverse:not(:hover) {
    box-shadow: 0px 0px 0px 0px var(--bg-color),
        0px 0px 0px 1px var(--bg-color);
}

.btn-shadow.top-right {
    --position: 5px -5px !important;
}

.btn-shadow.bottom-right {
    --position: 5px 5px !important;
}

.btn-shadow.bottom-left {
    --position: -5px 5px !important;
}

.btn-scale i {
    --width: 30px;
    position: relative;
    margin-left: 6px;
    transition: padding .3s linear;
}

.btn-scale i::after {
    content: "";
    opacity: 0;
    position: absolute;
    right: 1px;
    top: 50%;
    width: 2px;
    height: 1px;
    background-color: #444;
    transition: all .3s linear;
}

.btn-scale:hover i::after {
    opacity: 1;
    width: var(--width);
}

.btn-scale:hover i {
    padding-left: var(--width);
}

.circular-text {
    position: relative;
}

.side-nav-style {
    width: 500px !important;
}

.shadow {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}



.skeleton {
    --skeleton-avatar-w: 180px;
    --skeleton-avatar-h: var(--skeleton-avatar-w);
    --skeleton-avatar-rounded: 5px;
    --skeleton-avatar-gap: 20px;
    --skeleton-color: #EEE;
    --skeleton-title-height: 20px;
    --skeleton-title-radius: 3px;
    --skeleton-anim-bg: rgba(255, 255, 255, 0.4);
    --skeleton-anim-speed: 1.5s;
    --skeleton-bg: transparent;

    background-color: var(--skeleton-bg);
}

.lazy .skeleton { display: none; }
.lazy.lazy-loaded .skeleton { display: block; }

/*
 * Skeleton for Loading
 */
.skeleton-avatar {
    width: var(--skeleton-avatar-w);
    height: var(--skeleton-avatar-h);
    border-radius: var(--skeleton-avatar-rounded);
    background-color: var(--skeleton-color);
    margin-bottom: var(--skeleton-avatar-gap);
    overflow: hidden;
    position: relative;
}

.skeleton-title,
.skeleton-para li {
    height: var(--skeleton-title-height);
    border-radius: var(--skeleton-title-radius);
    background-color: var(--skeleton-color);
    margin: calc(var(--skeleton-avatar-gap) / 2) 0;
    overflow: hidden;
    position: relative;
}

.skeleton-para li { height: calc(var(--skeleton-title-height) - 7px);overflow: hidden; }

[class*="skeleton-"]::after {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    transform: translateX(-100%);
    background: -webkit-gradient(linear, left top,
        right top, from(transparent),
        color-stop(var(--skeleton-anim-bg)),
        to(transparent));

    background: linear-gradient(90deg, transparent,
        var(--skeleton-anim-bg), transparent);

    /* Adding animation */
    animation: loading var(--skeleton-anim-speed) infinite;
}

/* Loading Animation */
@keyframes loading {
    100% {
        transform: translateX(100%);
    }
}

@-webkit-keyframes loading {
    100% {
        transform: translateX(100%);
    }
}

.skeleton-2 {
    --skeleton-avatar-w: 100%;
    --skeleton-avatar-h: 150px;
    --skeleton-avatar-rounded: 6px;
    --skeleton-color: #EEE;
}

.skeleton.card {
    --skeleton-bg: #EEE;
    --skeleton-color: #FFF;
}

.project-style {border: 1px #18181b solid;border-radius: 5px;width: 100% !important;transition: 0.4s;}
.project-style:hover {border: 1px #1d4ed8 solid;box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);}
.project-style-selected {border: 1px #10b981 solid !important;	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);}
#pr-styles {list-style: none !important;}
.btn-file {background-color: #1d4ed8 !important;}

.btn-style-c {
	transition: 0.4s !important;
}
.btn-style-s {
	transition: 0.4s !important;
}

.btn-style-c:hover {
	background-color: #ef4444 !important;
}
.btn-style-s:hover {
	background-color: #22c55e !important;
}

.sm-font {
    font-size: 18px !important;
}