/*********************************
/*  Common Css Start
*********************************/
.border-none {
	border: none !important;
}

.btn-round {
	border-radius: 4px !important;
}

.bg-white {
	background-color: var(--color-white) !important;
}
.bg-color {
	background: var(--color-secondary) !important;
}
.text-primary {
	color: var(--color-primary) !important;
}
.text-content {
	color: var(--color-content)!important;
}
.text-green {
	color: var(--color-primary) !important;
}

hr {
	border-color: var(--color-border);
	opacity: 1;
	margin: 0;
}

.bg-primary {
	background: var(--color-primary) !important;
	color: var(--color-white) !important;
	border-color: var(--color-primary) !important;
}

button {
	&:hover,
	&:focus {
		outline: 0px;
	}
}

/*********************************
/*  Input Apperance Start
*********************************/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

input[type="number"] {
	-moz-appearance: textfield !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	border-radius: 4px;
	margin-right: 2px;
	// -webkit-filter: invert(1);
	// filter: invert(1);
}
/*********************************
/*  Input Apperance End
*********************************/

/*********************************
/*  Custom Scroll Bar Css
*********************************/
::-webkit-scrollbar {
	width: 4px;
	height: 4px;
	border-radius: var(--radius-8);
}

::-webkit-scrollbar-track {
	background-color: #ddd;
	// border-radius: $radius;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(var(--color-primary-rgb), 0.8);
}
/*********************************
/*  Custom Scroll Bar Css
*********************************/

/*********************************
/*  row Custom
*********************************/

.row > * {
	max-width: 100%;
	padding-right: calc(var(--bs-gutter-x) * 1);
	padding-left: calc(var(--bs-gutter-x) * 1);
	margin-top: var(--bs-gutter-y);
}

.column-reverse {
	&-lg {
		@include respond (tabland) {
			flex-direction: column-reverse !important;
		}
	}
	&-md {
		@include respond (tabport) {
			flex-direction: column-reverse !important;
		}
	}
}
.row-reverse {
	flex-direction: row-reverse !important;
	&-lg {
		@include respond (tabland) {
			flex-direction: row-reverse !important;
		}
	}
	&-md {
		@include respond (tabport) {
			flex-direction: row-reverse !important;
		}
	}
}

@media (min-width: 479px) and (max-width: 575px) {
	.col-xs-6 {
		flex: 0 0 auto;
		width: 50%;
	}
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1140px;
    }
}

/*********************************
/*  Heading Typography
*********************************/
h1 {
	font-family: var(--font-default);
	font-size: 54px;
	line-height: 64px;
	font-weight: var(--font-bold);
	color: var(--color-heading);

	@include respond(xl) {
		font-size: 50px;
		line-height: 60px;
	}
	@include respond(tabport) {
		font-size: 38px;
		line-height: 50px;
	}
	@include respond(phone) {
		font-size: 36px;
		line-height: 50px;
	}
	@include respond(phone-xm) {
		font-size: 28px;
		line-height: 36px;
	}
}
h2 {
	font-family: var(--font-default);
	font-size: 36px;
	line-height: 44px;
	font-weight: var(--font-medium);
	color: var(--color-heading);

	@include respond(tabport) {
		font-size: 34px;
		line-height: 42px;
	}

	@include respond(phone-mid) {
		font-size: 28px;
		line-height: 34px;
	}
}
h3 {
	font-family: var(--font-default);
	font-size: 32px;
	line-height: 40px;
	font-weight: var(--font-semibold);
	color: var(--color-heading);
}
h4 {
	font-family: var(--font-default);
	font-size: 24px;
	line-height: 32px;
	font-weight: var(--font-bold);
	color: var(--color-heading);
}

/*********************************
/*  Content Typography
*********************************/
p {
	font-family: var(--font-default);
	font-size: 16px;
	font-weight: var(--font-regular);
	line-height: 24px;
	color: var(--color-content);
}

/*********************************
/* Preloader Start
*********************************/
.preloader {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 99999999999999999999;

    .animation__preloader {
        position: absolute;
        z-index: 100;

		.box {
			position: relative;

			 img {
				width: 40px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

        .spinner {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            animation: spinner 1s infinite linear;
            border: 3px solid rgba(255, 255, 255, 0.2);
            border-top-color: var(--color-primary);
            margin: 0 auto 40px;

            @include respond (tabport) {
                height: 120px;
                width: 120px;
            }
        }
        .txt__loading {
            font-family: var(--font-default);
            font-size: 50px;
            font-weight: var(--font-semibold);
            text-align: center;
            user-select: none;
            text-transform: uppercase;

            @include respond (tabport) {
                font-size: 50px;
            }

            .letters__loading {
                color: rgba(255, 255, 255, 0.2);
                position: relative;

                &::before {
                    content: attr(data-text-preloader);
                    position: absolute;
                    left: 0;
                    opacity: 0;
                    color: var(--color-white);
                    transform: rotateY(-90deg);
                    animation: letters-loading 4s infinite;
                }
                &:nth-child(2):before {
                    animation-delay: 0.2s;
                }
                &:nth-child(3):before {
                    animation-delay: 0.4s;
                }  
                &:nth-child(4):before {
                    animation-delay: 0.6s;
                }    
                &:nth-child(5):before {
                    animation-delay: 0.8s;
                }     
                &:nth-child(6):before {
                    animation-delay: 1s;
                }    
                &:nth-child(7):before {
                    animation-delay: 1.2s;
                }     
            }
        }
    
    }
    .loader__section {
        background-color: var(--color-heading);
        height: 100%;
        position: fixed;
        top: 0;
        width: calc(50% + 1px);

        &.section {
            &_left {
                left: 0;
            }
            &_right {
                right: 0;
            }
        }
    }
    &.loaded {
        .animation__preloader {
            opacity: 0;
            transition: 0.3s ease-out;
        }
        .loader__section {
            &.section {
                &_left {
                    transform: translateX(-101%);
                    transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
                    }
                    &_right {
                        transform: translateX(101%);
                        transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
                }
            }
        }
    }
}

@keyframes spinner {
    to {
        transform: rotateZ(360deg);
    }
}

@keyframes letters-loading {
    0%,
    75%,
    100% {
        opacity: 0;
        transform: rotateY(-90deg);
    }

    25%,
    50% {
        opacity: 1;
        transform: rotateY(0deg);
    }
}

/*********************************
/* Preloader Start
*********************************/

/*********************************
/* Scroll Up Css Start
*********************************/

#toTop {
	position: fixed;
	bottom: -20px;
	right: 15px;
	width: 50px;
	height: 50px;
	background: var(--color-heading);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	// font-size: 15px;
	font-size: 25px;
	text-align: center;
	cursor: pointer;
	text-transform: capitalize;
	transition: var(--transition);
	z-index: 9999999;
	opacity: 0;
	visibility: hidden;
	
	i {
		
		animation: mover 1s linear infinite alternate;
	}
	
	&:hover {
		background: var(--color-primary);
	}
	
	&.active {
		// transition-delay: 500ms;
		bottom: 15px;
		opacity: 1;
		visibility: visible;
	}
}

@keyframes mover {
    0% { 
		transform: translateY(0); 
	}
    100% { 
		transform: translateY(-5px); 
	}
}

/*********************************
/* Scroll Up Css End
*********************************/