@use '../../utils/' as * ;

/*============= OTHERS CSS AREA STARTS ===============*/

// PRELOADER STARTS //
.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999999999;
	background-color: var(--ztc-text-text-1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.preloader2{
    background: var(--ztc-bg-bg-1) !important;
}
.preloader3{
    background: var(--ztc-text-text-5) !important;
}
.preloader4{
    background: var(--ztc-bg-bg-7) !important;
}
.loading-container,
.loading{
	height: 100px;
	position: relative;
	width: 100px;
	border-radius: 100%;
}

.loading-container{
	margin: 40px auto
}

.loading{
	border: 1px solid transparent;
	border-color: transparent var(--ztc-text-text-2) transparent var(--ztc-text-text-2);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}
.preloader2 {
    .loading {
        border-color: transparent var(--ztc-bg-bg-7) transparent var(--ztc-bg-bg-7) !important;
        border: 1px solid transparent;
        animation: rotate-loading 1.5s linear 0s infinite normal;
        transform-origin: 50% 50%;
    }
    #loading-icon{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 50px;
        width: 50px;
        animation: inherit !important;
    }
}

.loading-container:hover .loading,
.loading-container .loading{
	transition: all 0.5s ease-in-out;
}

#loading-icon{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
    height: 80px;
    width: 80px;
    animation: move 2s linear 0s infinite normal;
    @media #{$xs} {
        left: 0;
    }
    @media #{$md} {
        left: 0;
    }
}

@keyframes rotate-loading{
	0%{
		transform: rotate(0deg);
	}

	100%{
		transform: rotate(360deg);
	}
}
/* Moving animation */
@keyframes move {
    0% {
        transform: translateX(-20px) rotate(-15deg);
    }
    50% {
        transform: translateX(20px) rotate(15deg);
    }
    100% {
        transform: translateX(-20px) rotate(-15deg);
    }
}

.ctn-preloader {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	cursor: default;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 100%;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 99999;
}
.ctn-preloader .animation-preloader {
	z-index: 1000;
}
.ctn-preloader .animation-preloader .txt-loading {
	font: bold 5em var(--ztc-family-font1);
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
    position: relative;
    top: 70px;
    left: 50px;
    @media #{$xs} {
        left: 0;
    }
    @media #{$md} {
        left: 0;
    }
}
.ctn-preloader .animation-preloader .txt-loading .letters-loading {
	color: rgba(0, 0, 0, 0.2);
	position: relative;
}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
	-webkit-animation: letters-loading 4s infinite;
	animation: letters-loading 4s infinite;
	color: #000000;
	content: attr(data-text-preloader);
	left: 0;
	opacity: 0;
	font-family: var(--ztc-family-font1);
	position: absolute;
	top: -3px;
	-webkit-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
}
.ctn-preloader
	.animation-preloader
	.txt-loading
	.letters-loading:nth-child(2):before {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}
.ctn-preloader
	.animation-preloader
	.txt-loading
	.letters-loading:nth-child(3):before {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}
.ctn-preloader
	.animation-preloader
	.txt-loading
	.letters-loading:nth-child(4):before {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
.ctn-preloader
	.animation-preloader
	.txt-loading
	.letters-loading:nth-child(5):before {
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}
.ctn-preloader
	.animation-preloader
	.txt-loading
	.letters-loading:nth-child(6):before {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.ctn-preloader
	.animation-preloader
	.txt-loading
	.letters-loading:nth-child(7):before {
	-webkit-animation-delay: 1.2s;
	animation-delay: 1.2s;
}
.ctn-preloader
	.animation-preloader
	.txt-loading
	.letters-loading:nth-child(8):before {
	-webkit-animation-delay: 1.4s;
	animation-delay: 1.4s;
}
.ctn-preloader.dark .animation-preloader .spinner {
	border-color: rgba(255, 255, 255, 0.2);
	border-top-color: #fff;
}
.ctn-preloader.dark .animation-preloader .txt-loading .letters-loading {
	color: rgba(255, 255, 255, 0.2);
}
.ctn-preloader.dark .animation-preloader .txt-loading .letters-loading:before {
	color: #fff;
}
.ctn-preloader p {
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 8px;
	color: #3b3b3b;
}
.ctn-preloader .loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	z-index: 1;
	pointer-events: none;
}
.ctn-preloader .loader .row {
	height: 100%;
}
.ctn-preloader .loader .loader-section {
	padding: 0px;
}
.ctn-preloader .loader .loader-section .bg {
	background-color: #ffffff;
	height: 100%;
	left: 0;
	width: 100%;
	-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
	-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
	transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.ctn-preloader .loader.dark_bg .loader-section .bg {
	background: #111339;
}
.ctn-preloader.loaded .animation-preloader {
	opacity: 0;
	-webkit-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
}
.ctn-preloader.loaded .loader-section .bg {
	width: 0;
	-webkit-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
	-o-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
	transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
}
@-webkit-keyframes spinner {
	to {
		-webkit-transform: rotateZ(360deg);
		transform: rotateZ(360deg);
	}
}
@keyframes spinner {
	to {
		-webkit-transform: rotateZ(360deg);
		transform: rotateZ(360deg);
	}
}
@-webkit-keyframes letters-loading {
	0%,
	75%,
	100% {
		opacity: 0;
		-webkit-transform: rotateY(-90deg);
		transform: rotateY(-90deg);
	}
	25%,
	50% {
		opacity: 1;
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
}
@keyframes letters-loading {
	0%,
	75%,
	100% {
		opacity: 0;
		-webkit-transform: rotateY(-90deg);
		transform: rotateY(-90deg);
	}
	25%,
	50% {
		opacity: 1;
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
}
@media screen and (max-width: 767px) {
	.ctn-preloader .animation-preloader .spinner {
		height: 8em;
		width: 8em;
	}
	.ctn-preloader .animation-preloader .txt-loading {
		font: bold 3.5em "Roboto", sans-serif;
	}
}
@media screen and (max-width: 500px) {
	.ctn-preloader .animation-preloader .spinner {
		height: 7em;
		width: 7em;
	}
	.ctn-preloader .animation-preloader .txt-loading {
		font: bold 2em "Roboto", sans-serif;
	}
}
// PRELOADER ENDS //
.others4-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-bg-bg-15);
    .elements28 {
        position: absolute;
    }
    .others-header {
        margin-bottom: 60px;
        @media #{$xs} {
            margin-bottom: 30px;
        }
        @media #{$md} {
            margin-bottom: 30px;
        }
    }
    .shop-auhtor-area {
        position: relative;
        overflow: hidden;
        transition: all .4s;
        border-radius: 4px;
        margin-bottom: 30px;
        &:hover {
            .img1 {
                &::after {
                    visibility: visible;
                    opacity: 0.7;
                    transition: all .4s;
                    transform: scale(1);
                }
                img {
                    transform: scale(1.1) rotate(4deg);
                    transition: all .4s;
                }
            }
            .content-area {
                visibility: visible;
                opacity: 1;
                top: 46%;
                transition: all .6s;
            }
        }
        .img1 {
            position: relative;
            z-index: 1;
            overflow: hidden;
            border-radius: 4px;
            transition: all .4s;
            &::after {
                position: absolute;
                content: "";
                height: 100%;
                width: 100%;
                left: 0;
                top: 0;
                border-radius: 4px;
                transition: all .4s;
                background: var(--ztc-text-text-11);
                transform: scale(0.8);
                visibility: hidden;
                opacity: 0;
            }
            img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                border-radius: 4px;
                transition: all .4s;
            }
        }
        .content-area {
            text-align: center;
            position: absolute;
            top: 30%;
            z-index: 2;
            margin: 0 auto;
            transition: all .6s;
            left: 25%;
            right: 25%;
            visibility: hidden;
            opacity: 0;
            ul {
                li {
                    display: inline-block;
                    a {
                        height: 50px;
                        width: 50px;
                        text-align: center;
                        line-height: 50px;
                        display: inline-block;
                        border-radius: 50%;
                        background: var(--ztc-bg-bg-1);
                        transition: all .4s;
                        img {
                            transition: all .4s;
                        }
                        &:hover {
                            background: var(--ztc-text-text-13);
                            transition: all .4s;
                            img {
                                filter: brightness(0) invert(1);
                                transition: all .4s;
                            }
                        }
                    }
                }
            }
        }
    }
}
/*============= COUNTER CSS AREA STARTS ===============*/
.counter-section-area {
    position: relative;
    z-index: 1;
    padding: 60px 0 30px;
    background: var(--ztc-bg-bg-6);
    .counter-boxarea {
        text-align: center;
        background: var(--ztc-bg-bg-1);
        padding: 48px;
        border-radius: 4px;
        transition: all .4s;
        margin-bottom: 30px;
        &:hover {
            background: var(--ztc-bg-bg-2);
            transition: all .4s;
            transform: translateY(-5px);
            h2 {
                color: var(--ztc-bg-bg-1);
                transition: all .4s;
            }
            p {
                color: var(--ztc-bg-bg-1);
                transition: all .4s;
            }
        }
        h2 {
            margin-bottom: 10px !important;
            transition: all .4s;
        }
        p {
            transition: all .4s;
        }
    }
}

  // progress //
  .progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
    &:hover{
        background: var(--ztc-text-text-2);
        transform: translateY(-5px);
        box-shadow: 0 0 15px 0 var(--ztc-text-text-16);
        transition: $trans;
        color: var(--ztc-text-text-1);
    }
   }
   .progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
   }
   .progress-wrap::after {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    color: var(--ztc-text-text-2);
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
    border-radius: 50%;
   }
   .progress-wrap:hover::after {
    opacity: 0;
   }
   .progress-wrap::before {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    opacity: 0;
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 2;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
   }
  
   .progress-wrap:hover::before {
    opacity: 1;
   }
   .progress-wrap svg path {
    fill: none;
   }
   .progress-wrap svg.progress-circle path {
    stroke: var(--ztc-text-text-2);
    stroke-width: 4;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
   }
   .progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
   }
  

// OTHERS_INNER //
.others-inner-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-text-text-3);
    .others-boxarea {
        position: relative;
        background: var(--ztc-bg-bg-1);
        border-radius: 4px;
        padding: 24px 24px 24px 40px;
        transition: all .4s;
        &:hover {
            background: var(--ztc-bg-bg-2);
            transition: all .4s;
            transform: translateY(-5px);
            .icons {
                background: var(--ztc-bg-bg-1);
                transition: all .4s;
                &::after {
                    background: var(--ztc-bg-bg-1);
                    opacity: 0.1;
                }
                span {
                    color: var(--ztc-bg-bg-2);
                    transition: all .4s;
                }
            }
            .content {
                a {
                    color: var(--ztc-bg-bg-1);
                    transition: all .4s;
                }
                p {
                    color: var(--ztc-bg-bg-1);
                    transition: all .4s;
                    opacity: 0.8;
                }
            }
        }
        .icons {
            height: 30px;
            width: 30px;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
            display: inline-block;
            transition: all .4s;
            background: var(--ztc-bg-bg-2);
            position: absolute;
            top: 35px;
            z-index: 1;
            &::after {
                position: absolute;
                content: "";
                height: 60px;
                width: 60px;
                text-align: center;
                display: inline-block;
                background: var(--ztc-bg-bg-2);
                opacity: 0.2;
                transition: all .4s;
                border-radius: 50%;
                top: -15px;
                left: -15px;
                z-index: -1;
            }
            span {
                color: var(--ztc-text-text-1);
                transition: all .4s;
            }
        }
        .content {
            padding-left: 60px;
            a {
                color: var(--ztc-text-text-3);
                font-family: var(--ztc-family-font1);
                font-size: var(--ztc-font-size-font-s24);
                font-style: normal;
                font-weight: var(--ztc-weight-semibold);
                display: inline-block;
                transition: all .4s;
                margin-bottom: 12px;
                line-height: 24px;               
            }
            p {
                color: var(--ztc-text-text-4);
                font-family: var(--ztc-family-font1);
                font-size: var(--ztc-font-size-font-s18);
                font-style: normal;
                font-weight: var(--ztc-weight-regular);
                line-height: 24px; 
                transition: all .4s;          
            }
        }
    }

    .other-content-area {
        padding: 0 0 0 70px;
        @media #{$xs} {
            padding: 0;
            margin-top: 30px;
        }
        @media #{$md} {
            padding: 0;
            margin-top: 30px;
        }
        h5 {
            color: var(--ztc-bg-bg-1);
            transition: all .4s;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.10);
        }
        h2 {
            color: var(--ztc-bg-bg-1);
        }
        p {
            color: var(--ztc-text-text-1);
            opacity: 80%;
        }
    }
}

// HISTORY //
.history-inner-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-bg-bg-6);
    overflow: hidden;
    .history-header {
        margin-bottom: 60px;
        @media #{$xs} {
            margin-bottom: 30px;
        }
        @media #{$md} {
            margin-bottom: 30px;
        }
    }
    .history-tabs-area {
        ul {
            justify-content: center;
            margin-bottom: 60px;
            @media #{$xs} {
                margin-bottom: 30px;
            }
            @media #{$md} {
                margin-bottom: 30px;
            }
            li {
                @media #{$xs} {
                    width: 100%;
                }
                @media #{$md} {
                    margin-bottom: 10px;
                }
                button {
                    color: var(--ztc-text-text-3);
                    text-align: center;
                    font-family: var(--ztc-family-font1);
                    font-size: var(--ztc-font-size-font-s18);
                    font-style: normal;
                    font-weight: var(--ztc-weight-semibold);
                    line-height: 18px;  
                    display: inline-block;
                    padding: 15px 40px;
                    border-radius: 4px; 
                    transition: all .4s;
                    background: var(--ztc-bg-bg-1);
                    margin: 0 20px 0 0; 
                    &.active {
                        background: var(--ztc-bg-bg-2);
                        color: var(--ztc-bg-bg-1);
                    }
                    @media #{$xs} {
                    display: block;
                    width: 100%;
                    margin-bottom: 10px;
                    }              
                }

            }
        }
        .tab-content {
           .tab-pane {
            position: relative;
            top: 200px;
            transition: all .4s;
                .images {
                    img {
                        height:420px;
                        width: 100%;
                        border-radius: 4px;
                        object-fit: cover;
                        @media #{$xs} {
                            height: 100%;
                            width: 100%;
                        }
                        @media #{$md} {
                            height: 100%;
                        }
                    }
                }
               .tabs-content-area {
                background: var(--ztc-bg-bg-1);
                padding: 60px 40px;
                border-radius: 4px;
                @media #{$xs} {
                    padding: 30px;
                    width: 100%;
                }
                p {
                    span {
                        font-weight: var(--ztc-weight-semibold);
                        color: var(--ztc-text-text-3);
                        display: inline-block;
                    }
                }
               } 
               &.fade.show {
                top: 0;
                transition: all .4s;
               }
           } 
        }

    }
}
/*============= OTHERS CSS AREA ENDS ===============*/