//COMMON IMPORTS
@import "../config/imports";

body {
	font-family: 'Poppins', sans-serif;
}

.custom-font-primary {
	font-family: 'Poppins', sans-serif !important;
}

.custom-font-secondary {
	font-family: 'Montserrat', sans-serif !important;
}

.custom-negative-margin-top {
	margin-top: -150px;
}

.custom-box-shadow-1 {
	box-shadow: 0px 0px 100px -27px rgba(0,0,0,0.2);
}

.custom-btn-pos-1 {
	transform: translate3d(0, 100%, 0);
    margin-top: -37px;
}

.custom-text-size-1 {
	font-size: 6.4em;
}

.custom-text-color-grey-1 {
	color: var(--default) !important;
}

.custom-border-color-grey {
	border-color: #43474A !important;
}

.custom-transition-1 {
	rect {
		transition: ease all 3s !important;
	}
}

// Custom Responsive Text Size
@media (min-width: 1200px) and (max-width: 1530px) {
	.custom-responsive-text-size-1 {
		font-size: 0.8rem !important;
	    line-height: 1.5 !important;
	}
}

// Custom Responsive Margin and Padding Horizontal
@media(min-width: 1440px) {
	.custom-responsive-m-p-x {
		margin-right: 3rem !important;
		margin-left: 3rem !important;
		padding-right: 3rem !important;
		padding-left: 3rem !important;
	}
}

// Custom Plus
.custom-plus {
	position: relative;
	&:before {
	    content: '+';
	    position: absolute;
	    top: 30px;
	    right: -23px;
	    font-size: 0.4em;
	    font-weight: 400;
	}
}

// Custom Square Style
.custom-square-1 {
	position: absolute;
	top: -10px;
	left: -10px;
	rect {
		fill-opacity: 0;
		stroke-dasharray: 1550;
		stroke-dashoffset: 1550;
		transition: ease all 2000ms;
		&.appear-animation-visible {
			stroke-dashoffset: 0;
		}
	}
	&.custom-square-top-right {
		right: -10px;
		left: auto;
	}
	&.custom-square-1-no-pos {
		top: 0;
		left: 0;
		rect {
			&.appear-animation-visible {
				fill-opacity: 1;
			}
		}
	}
}

@media(max-width: 575px) {
	.custom-mobile-square-thickness {
		rect {
			stroke-width: 15px;
		}
	}
}

.lineProgressFrom {
	stroke-dashoffset: 1550 !important;
    transition: ease stroke-dashoffset 8s !important;
}

.lineProgressTo {
	stroke-dashoffset: 0 !important;
}

.lineProgressAndFillFrom {
	stroke-dashoffset: 1550;
	fill-opacity: 0;
	transition: ease stroke-dashoffset 3s, ease fill-opacity 1s 2s !important;
}

.lineProgressAndFillTo {
	stroke-dashoffset: 300;
	fill-opacity: 1;
}

// Custom Button
.custom-btn-color-1 {
	border-color: #43474A !important;
	&:hover {
		border-color: var(--dark) !important;
	}
}

.custom-btn-style-1.btn-dark {
	background: #FFF !important;
	&:hover {
		background: var(--dark) !important;
	}
}

// Rev Slider
.active-revslide {
	.custom-square-1 {
		rect {
			stroke-dashoffset: 0;
		}
	}
}

// Custom Featured Boxes Style
.custom-featured-boxes-style-1 {
	.featured-box {
		.box-content {
		    padding: 3.8rem 1.8rem;
			border: 7px solid #43474A;
			transition: ease border-color 300ms;
			svg {
				width: 88px;
				height: auto;
				fill: #FFF;
				transition: ease fill 300ms;
			}
		}
	}
}

// Custom Thumb Info Style
.custom-thumb-info-style-1 {
	&.thumb-info-bottom-info-dark-linear .thumb-info-title {
		background: transparent;
	}
	&.thumb-info-bottom-info .thumb-info-title {
		padding: 2.3rem;
	}
}

// Owl Carousel
.owl-carousel {
	&.custom-nav-size-1 {
		.owl-nav {
			.owl-prev, .owl-next {
				font-size: 1.4rem;
			}
		}
	}
}

// Card
.card {
	&:hover {
		.custom-square-1 {
			rect {
				stroke-dashoffset: 0;
			}
		}
	}

	&.custom-card-style-1 {
		background: transparent;
		border: 7px solid #43474A;
	}
}

// Inner Page
.inner-page {
	.main {
		padding-top: 100px;
	}
}

// Scrollable Plugin
#header {
	&.side-header-hide {
		[data-plugin-scrollable] {
			display: none;
		}
	}
}

/* Skin */
// Custom Square Style
.custom-square-1 {
	rect {
		stroke: var(--primary);
		fill: var(--primary);
	}
}

// Custom Featured Boxes Style
.custom-featured-boxes-style-1 {
	.featured-box {
		&:hover {
			.box-content {
				border: 7px solid var(--primary);
				svg {
					fill: var(--primary);
				}
			}
		}
	}
}

// Custom Thumb Info Style
.custom-thumb-info-style-1 {
	.thumb-info-wrapper:after {
		background: var(--primary);
	}
}

// Testimonial Colored Quote
.custom-testimonial-colored-quotes {
	&.testimonial-with-quotes {
		blockquote {
			&:before, &:after {
				color: var(--primary) !important;
			}
		}
	}
}

// Animations
@keyframes customTextColored {
	from {
	    color: var(--light);
	}

	to {
	    color: var(--primary);
	}
}

.customTextColored {
	animation-name: customTextColored;
}

@keyframes customBorderColored {
	from {
	    border-color: #43474A;
	}

	to {
	    border-color: var(--primary);
	}
}

.customBorderColored {
	animation-name: customBorderColored;
}