/*********************************
/*  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-green) !important;
}

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

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

hr {
    margin: 15px 0;
    color: #bbbbbb;
}

/*********************************
/*  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;
}

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

::-webkit-scrollbar-thumb {
	background-color: rgba(var(--color-primary-rgb), 0.8);
	border-radius: 0 8px 8px 0;
}
/*********************************
/*  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: eow-reverse !important;
		}
	}
}

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

.container-fluid {
	padding: 0 72px;

	@include respond (tabport) {
		padding: 0 15px;
	}
}


/*********************************
/*  Heading Typography
*********************************/
h1 {
	font-family: var(--font-default);
	font-size: 69px;
	line-height: 81.25px;
	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: 42px;
	font-weight: var(--font-semibold);
	color: var(--color-heading);
	line-height: 50px;

	@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: 18px;
	font-weight: var(--font-regular);
	line-height: 29px;
	color: var(--color-content);
	margin-bottom: 0;
}



/*********************************
/* Swiper Navigation & Pagination 
*********************************/
.swiper__navigation {
	position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;

	.swiper-button-next,
	.swiper-button-prev {
		color: var(--color-white);
		font-size: 30px;
		height: 48px;
		width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(var(--color-white-rgb), 0.1);
		border-radius: 50%;
		transition: var(--transition);
		position: absolute;
		left: 0;
		right: 0;
		z-index: 999;

		&::after {
			display: none;
		}

		&:hover {
			background: var(--color-primary);
			border-color: var(--color-primary);
			color: var(--color-white);
		}
	}
	.swiper-button-next {
        right: -25px;
        left: auto;
        box-shadow: 0px 0px 16px 0px #00000029;
    }
	.swiper-button-prev {
        left: -25px;
        box-shadow: 0px 0px 16px 0px #00000029;
    }
}


/* Pagination Start */ 

.swiper__pagination {
	.swiper-pagination-bullets {
		bottom: 50px;
        right: 72px;
        left: auto;
        text-align: end;
		z-index: 99;
		pointer-events: none;

		.swiper-pagination-bullet {
			height: 8px;
			width: 8px;
			border-radius: 4px;
			background: var(--color-white);
			transition: var(--transition);
            opacity: 1;

			&-active {
				width: 25px;
				background: var(--color-primary);
			}
		}
	}
}
/*********************************
/* Swiper Navigation & Pagination 
*********************************/


/*********************************
/* Grid Wrapper Start
*********************************/

.grid {
	&-3 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		
		@include respond (tabland) {
			grid-template-columns: repeat(3, 1fr);
		}
		@include respond (tabport) {
			grid-template-columns: repeat(2, 1fr);
		}
		@include respond (phone-sm) {
			grid-template-columns: repeat(1, 1fr);
		}
	}
	&-4 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
		
		@include respond (tabland) {
			grid-template-columns: repeat(3, 1fr);
		}
		@include respond (tabport) {
			grid-template-columns: repeat(2, 1fr);
		}
		@include respond (phone-sm) {
			grid-template-columns: repeat(1, 1fr);
		}
	}
	&-5 {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 16px;

		@include respond (xl) {
			grid-template-columns: repeat(4, 1fr);
		}
		@include respond (medium) {
			grid-template-columns: repeat(3, 1fr);
		}
		@include respond (tabland) {
			grid-template-columns: repeat(2, 1fr);
		}
		@include respond (phone) {
			grid-template-columns: repeat(1, 1fr);
		}
	}
	&-6 {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 16px;

		@include respond (xl) {
			grid-template-columns: repeat(4, 1fr);
		}
		@include respond (medium) {
			grid-template-columns: repeat(3, 1fr);
		}
		@include respond (tabland) {
			grid-template-columns: repeat(2, 1fr);
		}
		@include respond (phone) {
			grid-template-columns: repeat(1, 1fr);
		}
	}
	&-7 {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 12px;
		
		@include respond (xl) {
			grid-template-columns: repeat(5, 1fr);
		}
		@include respond (medium) {
			grid-template-columns: repeat(4, 1fr);
		}
		@include respond (tabland) {
			grid-template-columns: repeat(3, 1fr);
		}
		@include respond (tabport) {
			grid-template-columns: repeat(3, 1fr);
		}
		@include respond (phone-sm) {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}

/*********************************
/* Grid Wrapper End
*********************************/

/*********************************
/* 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;

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

            @include respond (tabport) {
                height: 120px;
                width: 120px;
            }
        }
        .txt__loading {
            font-family: var(--font-default);
            font-size: 80px;
            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-black);
        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
*********************************/