/*----------------------------------------*/
/*  01. Template default CSS
/*----------------------------------------*/

@mixin placeholder {
    &::-webkit-input-placeholder {
        @content;
    }
    &:-moz-placeholder {
        @content;
    }
    &::-moz-placeholder {
        @content;
    }
    &:-ms-input-placeholder {
        @content;
    }
}

/*-- Google Font --*/
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/*-- Common Style --*/
html {
	scroll-behavior: smooth;
}
html,
body {
    height: 100%;
}
body{
    color: $secondary;
}
a{
    color: $secondary;
    text-decoration: none;
    &:hover {
        color: $primary;
    }
}
a, 
button, 
.btn,
img, 
input {
    transition: $baseTransition;
}
a,
a:hover,
a:focus,
a:active,
button,
button:focus,
.btn,
.btn:focus,
input,
input:focus,
select,
textarea,
.swiper-pagination-bullet,
.swiper-slide,
.swiper-button-next,
.swiper-button-prev,
.product-button-next,
.product-button-prev,
.special-deals-button-next,
.special-deals-button-prev{
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}
.special-deals-button-next,
.special-deals-button-prev{
    &:focus{
        text-decoration: none;
        outline: 0;
        box-shadow: none;
    }
}
i{
    &:focus{
        outline: none;
        border: 0;
    }
}
.btn{
    &:active:focus{
        box-shadow: none;
    }
    &-primary{
        &:focus{
            border-color: $primary;
            color: $white;
        }
    }
}
.accordion-button:focus{
    box-shadow: none;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
img {
	max-width: 100%;
}
.img-full {
	width: 100%;
	overflow: hidden;
	object-fit: cover;
	object-position: center center;
}
::selection{
    background-color: $primary;
    color: $white;
}

/* ---Custom Container--- */
.container{
    @include media-breakpoint-up(xxl){
        max-width: 1310px;
    }
}

/* ---Section Space--- */
.section-space{
    &-top{
        &-100{
            padding-top: 100px;
            @include media-breakpoint-down(lg){
                padding-top: 80px;
            }
            @include media-breakpoint-down(md){
                padding-top: 60px;
            }
            @include media-breakpoint-down(sm){
                padding-top: 50px;
            }
        }
        &-95{
            padding-top: 95px;
            @include media-breakpoint-down(lg){
                padding-top: 75px;
            }
            @include media-breakpoint-down(md){
                padding-top: 55px;
            }
            @include media-breakpoint-down(sm){
                padding-top: 45px;
            }
        }
        &-90{
            padding-top: 90px;
            @include media-breakpoint-down(lg){
                padding-top: 70px;
            }
            @include media-breakpoint-down(md){
                padding-top: 50px;
            }
            @include media-breakpoint-down(sm){
                padding-top: 40px;
            }
        }
        &-85{
            padding-top: 85px;
            @include media-breakpoint-down(lg){
                padding-top: 65px;
            }
            @include media-breakpoint-down(md){
                padding-top: 45px;
            }
            @include media-breakpoint-down(sm){
                padding-top: 35px;
            }
        }
        &-80{
            padding-top: 80px;
            @include media-breakpoint-down(lg){
                padding-top: 60px;
            }
            @include media-breakpoint-down(md){
                padding-top: 35px;
            }
            @include media-breakpoint-down(sm){
                padding-top: 30px;
            }
        }
        &-75{
            padding-top: 75px;
            @include media-breakpoint-down(lg){
                padding-top: 55px;
            }
            @include media-breakpoint-down(md){
                padding-top: 30px;
            }
            @include media-breakpoint-down(sm){
                padding-top: 25px;
            }
        }
    }
    &-y-axis{
        &-100{
            padding-top: 100px;
            padding-bottom: 100px;
            @include media-breakpoint-down(lg){
                padding-top: 80px;
                padding-bottom: 80px;
            }
            @include media-breakpoint-down(md){
                padding-top: 60px;
                padding-bottom: 60px;
            }
            @include media-breakpoint-down(sm){
                padding-top: 50px;
                padding-bottom: 50px;
            }
        }
    }
    &-bottom{
        &-115{
            padding-bottom: 115px;
            @include media-breakpoint-down(lg){
                padding-bottom: 95px;
            }
            @include media-breakpoint-down(md){
                padding-bottom: 75px;
            }
            @include media-breakpoint-down(sm){
                padding-bottom: 55px;
            }
        }
        &-100{
            padding-bottom: 100px;
            @include media-breakpoint-down(lg){
                padding-bottom: 80px;
            }
            @include media-breakpoint-down(md){
                padding-bottom: 60px;
            }
            @include media-breakpoint-down(sm){
                padding-bottom: 50px;
            }
        }
        &-95{
            padding-bottom: 95px;
            @include media-breakpoint-down(lg){
                padding-bottom: 75px;
            }
            @include media-breakpoint-down(md){
                padding-bottom: 55px;
            }
            @include media-breakpoint-down(sm){
                padding-bottom: 45px;
            }
        }
    }
}

/* --End Here-- */

/* --------------------------------------
    Additional Space for specific section
----------------------------------------- */
.pt{
    &-55{
        padding-top: 55px;
    }
}
.pb{
    &-55{
        padding-bottom: 55px;
    }
}
.pb{
    &-175{
        padding-bottom: 175px;
    }
}
.mt{
    &-75{
        margin-top: 75px;
    }
}

/* ---Data Background Image--- */
[data-bg-image]:not(.bg-pattern) {
    background-color: $white;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* ---Text Color--- */
.text-white{
    *{
        color: $white;
    }
}
.text-primary{
    *{
        color: $primary;
    }
}
.text-secondary{
    *{
        color: $secondary;
    }
}
.text-heading{
    *{
        color: $heading;
    }
}
.text-hawkes-blue{
    *{
        color: #cfe1ff;
    }
}
.text-manatee{
    *{
        color: #8b8b99;
    }
}
.text-matterhorn{
    *{
        color: #555252;
    }
}
.text-charcoal{
    *{
        color: #444444;
    }
}
.text-lavender{
    *{
        color: #dee2f7;
    }
}
.text-ship-cove{
    *{
        color: #8690a1;
    }
}
.text-silver{
    *{
        color: #c0c0c0;
    }
}
.text-night-rider{
    *{
        color: #2c2c2c;
    }
}
.text-paynes-grey{
    *{
        color: #3e3e3f;
    }
}

/* ---Background Color--- */
.bg-midnight-express{
    background-color: #1a2332;
}
.bg-white-smoke{
    background-color: #f4f4f4;
}

/* ---Section Title--- */
.section{
    &-title{
        .title{
            text-transform: uppercase;
            font-size: 36px;
            font-weight: 700;
            @media (max-width: 479px) {
                font-size: 30px;
            }
        }
        &.style{
            &-2{
                .title{
                    position: relative;
                    padding-left: 50px;
                    font-size: 36px;
                    text-transform: uppercase;
                    font-weight: 700;
                    @media (max-width: 479px) {
                        font-size: 30px;
                    }
                    &:before{
                        background-color: $primary;
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 0;
                        transform: translateY(-50%);
                        height: 2px;
                        width: 30px;
                    }
                }
            }
        }
    }
}

/* ---Custom Font Size--- */
.font-size{
    &-60{
        font-size: 60px;
        @include media-breakpoint-down(sm){
            font-size: 40px;
        }
    }
    &-50{
        font-size: 50px;
        @include media-breakpoint-down(sm){
            font-size: 30px;
        }
    }
    &-20{
        font-size: 20px;
    }
    &-25{
        font-size: 25px;
        line-height: 25px;
    }
    &-16{
        font-size: 16px;
    }
}

/* ---Preloader--- */
.preloader{
    &-active{
        position: fixed;
        top: 0;
        left: 0;
        overflow: hidden;
        height: 100vh;
        width: 100vw;
        z-index: 99999;
        .preloader{
            &-area{
                &-wrap{
                    background-color: $white;
                    position: absolute;
                    left: 0;
                    display: block;
                    top: 0;
                    height: 100%;
                    width: 100%;
                    z-index: 999999;
                    .spinner{
                        div{
                            background-color: $primary;
                            border-radius: 50%;
                            width: 20px;
                            height: 20px;
                            margin-right: 15px;
                            animation: sk-bouncedelay 1.4s infinite ease-in-out both;
                        }
                        div.bounce1{
                            animation-delay: -0.32s;
                        }
                        div.bounce2{
                            animation-delay: -0.16s;
                        }
                    }
                }
            }
        }
    }
    &-area{
        &-wrap{
            display: none;
        }
    }
}
  

@-webkit-keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    40% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
}
  
@keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    40% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
}
  

.open_tm_preloader{
    position: fixed;
    background-color: transparent;
    z-index: 9999;
    height: 100%;
    width: 100%;
    transition: .2s all ease;
    transition-delay: .5s;
    &.loaded{
        opacity: 0;
        visibility: hidden;
        &:before,
        &:after{
            width: 0%;
        }
    }
    &:before,
    &:after {
        content: "";
        position: absolute;
        height: 100%;
        width: 50%;
        background-color: $white;
        transition: all 0.5s ease-in-out;
    }
    &:before{
        top: 0;
        left: 0;
    }
    &:after{
        bottom: 0;
        right: 0;
    }
}

/* ---Background Image--- */
.background-img{
    position: relative;
    .inner{
        &-bg{
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: -1;
        }
    }
}

/* ---Countdown--- */
.countdown{
    &-wrap{
        &.with-dark-border{
            .countdown__item{
                border-color: #787878;
                *{
                    color: #464646;
                }
            }
            .countdown__time{
                &:before{
                    content: url('../images/shape/2.png');
                }
            }
        }
        &.with-secondary-border{
            .countdown__item{
                border-color: #505050;
                *{
                    color: #505050;
                }
            }
            .countdown__time{
                &:before{
                    content: url('../images/shape/2.png');
                }
            }
        }
    }
}
.countdown__item {
	display: inline-block;
	border: 2px solid #ebebeb;
    border-radius: 4px;
	padding: 10px;
	text-align: center;
    width: 65px;
    @include media-breakpoint-down(sm){
        width: auto;
    }
}
.countdown__text {
    text-transform: capitalize;
    color: #404040;
    padding-top: 5px;
    margin-top: 10px;
    font-size: 13px;
    display: block;
}
.countdown__time{
    position: relative;
    color: #242424;
    font-size: 18px;
    font-weight: 500;
    &:before{
        content: url('../images/shape/1.png');
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ---Tab Content & Pane Fix--- */
.tab-content {
	width: 100%;
	.tab-pane {
		display: block;
		height: 0;
		max-width: 100%;
		visibility: hidden;
		overflow: hidden;
		opacity: 0;
		&.active {
			height: auto;
			visibility: visible;
			opacity: 1;
			overflow: visible;
			transition: $baseTransition;
		}
	}
}

/* ---Social Link--- */
.social-link{
    display: flex;
    .title{
        font-size: 16px;
        display: block;
    }
    ul{
        li{
            display: inline-block;
            &:not(:last-child){
                padding-right: 25px;
            }
            a{
                font-size: 14px;
                display: block;
            }
        }
    }
    &.with-border{
        ul{
            li{
                &:not(:last-child){
                    padding-right: 15px;
                }
                a{
                    border: 1px solid #434343;
                    border-radius: 100%;
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    &:hover{
                        background-color: $primary;
                        border-color: $primary;
                        i{
                            color: $white;
                        }
                    }
                }
            }
        }
    }
}

/* ---Custom Button--- */
.btn{
    &-custom-size{
        padding: 0;
        width: 105px;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        text-transform: uppercase;
        overflow: hidden;
        border-radius: 0;
        position: relative;
        z-index: 1;
        &:before {
            width: 200px;
            height: 200px;
            position: absolute;
            content: '';
            top: 50%;
            left: 50%;
            z-index: -1;
            transform: translate(-50%, -50%) scale(0);
            transition: all 0.3s linear;
            border-radius: 50%;
        }
        &:hover{
            border-color: #071c35;
            color: $white;
            &:before {
                transform: translate(-50%, -50%) scale(1);
                background-color: #071c35;
            }
        }
        &.lg-size{
            width: 165px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
        }
        &.xl-size{
            width: 220px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
        }
    }
    &-primary{
        color: $white;
    }
    &-white{
        background-color: $white;
        color: $primary;
        &:hover{
            background-color: $primary;
            border-color: $primary;
            color: $white;
            &:before{
                background-color: $primary;
            }
        }
    }
    &-matterhorn{
        background-color: #4f4f4f;
        font-size: 13px;
        color: $white;
        &:hover{
            background-color: $primary;
            border-color: $primary;
            color: $white;
            &:before{
                background-color: $primary;
            }
        }
    }
    &-primary-hover{
        &:hover{
            background-color: $primary;
            border-color: $primary;
            color: $white;
            i{
                color: $white;
            }
        }
    }
    &-secondary-hover{
        &:hover{
            background-color: $secondary;
            border-color: $secondary;
            color: $white;
        }
    }
    &-link{
        &.with-underline{
            text-decoration: underline;
        }
    }
    &-white-hover{
        color: $white;
        &:hover{
            background-color: $white;
            border-color: $white;
            color: $white;
        }
    }
    &-pearl-hover{
        color: $white;
        &:hover{
            background-color: #071c35;
            border-color: #071c35;
            color: $white;
        }
    }
    &-dark-hover{
        &:hover{
            background-color: $secondary;
            border-color: $secondary;
            color: $white;
        }
    }
}
/* ---Button Position--- */
.button-position{
    &-center{
        display: flex;
        justify-content: center;
    }
}

/* ---Section Border--- */
.section{
    &-border{
        &-top{
            border-top: 1px solid #e9e9e9;
        }
        &-bottom{
            border-bottom: 1px solid #e9e9e9;
        }
        &-y-axis{
            border-top: 1px solid #e9e9e9;
            border-bottom: 1px solid #e9e9e9;
        }
    }
}

/* ---Pagination--- */
.pagination{
    .page{
        &-item{
            &:not(:last-child){
                padding-right: 10px;
            }
        }
        &-link{
            border: 1px solid $border-color;
            color: #3f3f3f;
            text-align: center;
            padding: 0;
            width: 45px;
            height: 45px;
            line-height: 45px;
            &:focus{
                box-shadow: none;
            }
            span{
                font-size: 12px;
            }
            &:hover{
                background-color: $primary;
                border-color: $primary;
                color: $white;
            }
        }
    }
}

/* ---Image Zoom Effect--- */
.img{
    &-gradient-effect{
        &:before{
            background: rgb(238, 50, 49);
            background: linear-gradient(0deg, rgba(238, 50, 49, 1) 0%, rgba(254, 239, 240, 1) 80%, rgba(255, 255, 255, 1) 100%);
            position: absolute;
            width: 100%;
            height: 100%;
            content: "";
            top: 0;
            left: 0;
            opacity: 0;
            visibility: hidden;
            transition: $baseTransition;
            pointer-events: none;
            z-index: 1;
        }
        &:hover{
            &:before{
                opacity: 0.7;
                visibility: visible;
            }
        }
    }
    &-zoom-effect{
        position: relative;
        overflow: hidden;
        cursor: pointer;
        display: block;
        img{
            transition: all 0.5s ease-in-out;
            transform: scale(1);
        }
        &:hover{
            img{
                transform: scale(1.06) rotate(1deg);
            }
        }
    }
    &-hover-effect{
        position: relative;
        &:before{
            background: rgba(255, 255, 255, 0.41);
            content: "";
            height: 0;
            left: 0;
            margin: auto;
            opacity: 1;
            position: absolute;
            top: 0;
            width: 0;
            pointer-events: none;
            z-index: 1;
        }
        &:after{
            background: rgba(255, 255, 255, 0.41);
            bottom: 0;
            content: "";
            height: 0;
            opacity: 1;
            position: absolute;
            right: 0;
            width: 0;
            pointer-events: none;
            z-index: 1;
        }
        &:hover{
            &:before{
                height: 100%;
                opacity: 0;
                transition-duration: 1.3s;
                width: 100%;
            }
            &:after {
                height: 100%;
                opacity: 0;
                transition-duration: 1.3s;
                width: 100%;
            }
        }
    }
}

/* ---Blockquote--- */
blockquote{
    background-color: #f9f9f9;
    position: relative;
    overflow: hidden;
    padding: 25px;
    &:before{
        content: url('../images/blog/blockquote/quotation.png');
        position: absolute;
        bottom: -10px;
        right: -2px;
    }
    p{
        color: #6c788c;
        font-style: italic;
        font-size: 18px;
        line-height: 33px;
    }
    .user-name{
        color: #6c788c;
        font-size: 20px;
        line-height: 33px;
        position: relative;
        display: inline-block;
        padding-left: 35px;
        font-weight: 600;
        &:before{
            background-color: $primary;
            content: "";
            height: 2px;
            width: 20px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
    }
}

/* ---Global Overlay--- */
.global-overlay {
	background-color: rgba(0,0,0,.5);
	transition: $baseTransition;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 99;
	visibility: hidden;
	&.overlay-open {
		visibility: visible;
		cursor: pointer;
	}
}

/* ---Range Slider--- */
.price-filter {
	.irs{
        &-min,
        &-max{
            display: none;
        }
    }
    .irs--flat{
        .irs-bar,
        .irs-line{
            height: 4px;
        }
        .irs-from,
        .irs-to{
            top: -5px;
        }
        .irs-handle{
            background-color: #f9f9f9;
            border: 3px solid $primary;
            border-radius: 100%;
            cursor: pointer;
            top: 18px;
            width: 18px;
            height: 18px;
            i{
                display: none;
            }
        }
    }
}

/* ---Swiper Slider Border Issues--- */
.swiper-container{
    &.border-issue{
        padding-bottom: 15px;
        margin-bottom: -15px;
    }
}

/* ---Quantity--- */
.quantity{
    .cart-plus-minus{
		position: relative;
		width: 76px;
		text-align: left;
		.cart-plus-minus-box{
            background-color: #505050;
            border: 1px solid #505050;
            color: $white;
			text-align: center;
			width: 75px;
			height: 50px;
            border-radius: 25px;
		}
		.qtybutton{
			cursor: pointer;
			position: absolute;
			transition: $baseTransition;
			font-size: 10px;
            color: inherit;
            top: 50%;
            transform: translateY(-50%);
            color: $white;
            &.dec{
				left: 15px;
			}
			&.inc{
                left: auto;
				right: 15px;
			}
		}
	}
}

/* ---Price Box--- */
.price-box{
    span{
        font-size: 20px;
        &.old-price{
            margin-left: 5px;
            color: #8d8f92;
            text-decoration: line-through;
        }
    }
}

/* ---Rating Box--- */
.rating-box{
    display: flex;
    align-items: center;
    ul{
        display: flex;
        li{
            &:not(:last-child){
                padding-right: 15px;
            }
            i{
                color: #ffe24d;
                font-size: 14px;
                cursor: pointer;
                &:focus{
                    outline: none;
                }
            }
        }
    }
    .title{
        margin-left: 15px;
    }
}

/*-- Scroll To Top --*/
.scroll-to-top{
    background-color: #000000;
    color: $white;
    position: fixed;
    right: 50px;
    bottom: 90px;
    z-index: 999;
    overflow: hidden;
    display: block;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	animation:  fadeOutRight 1s normal;
    @include transition(all 300ms ease);
    &:hover{
        background-color: $primary;
    }
	&.show{
		opacity: 1;
		visibility: visible;
		animation: fadeInRight 1s normal;
	}
	i{
        width: 40px;
        height: 40px;
        line-height: 40px;
		transition: $baseTransition;
		color: $white;
		display: inline-block;
	}
}