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

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

// Grid Container Size
@media(min-width: 1200px) {
	.container {
		max-width: 1200px !important;
	}
}

// Add transition to text-color-hover-**
[class*="text-color-hover-"] {
	transition: ease all 300ms;
}

// Add transition to bg-color-hover-**
[class*="bg-color-hover-"] {
	transition: ease background 300ms;
}

// Max Width
@media(min-width: 768px) {
	.custom-max-width-1 {
		max-width: 387px;
	}
}

// Fonts
.custom-font-secondary {
	font-family: 'Roboto Slab', serif !important;
}

// Font Size
.custom-font-size-1 {
	font-size: 1.4em !important;
}

.custom-font-size-2 {
	font-size: 1.35em !important;
}

.custom-font-size-3 {
	font-size: 1.15em !important;
}

.custom-font-size-4 {
	font-size: 50% !important;
}

// Text Color
.custom-text-color-1 {
	color: #93bae4 !important;
}

// Box Shadow
.box-shadow-1 {
	.card-body {
		z-index: 1;
	}
}

.custom-box-shadow-1 {
	box-shadow: 0 0px 90px -55px rgba(0, 0, 0, 0.25) !important;
}

// Border Radius
.custom-border-radius-1 {
	border-radius: 0.5rem !important;
}

// Custom Line
.custom-line {
	display: inline-block;
	width: 50px;
	border-bottom: 3px solid var(--grey-500);
}

// Custom Card Style
.custom-card-style-1 {
	border: 2px solid transparent;
	transition: ease border 300ms;
	.custom-card-style-1-image-wrapper {
		img {
			transform: translate3d(5px, -5px, 0);
			transition: ease transform 300ms;
		}
	}
	.custom-card-style-1-title,
	.custom-card-style-1-link {
		transition: ease color 300ms;
	}
	&:hover {
		.custom-card-style-1-image-wrapper {
			img {
				transform: translate3d(0, 0, 0);
			}
		}
	}
}

// Carousel
.owl-carousel {
	display: block;
	opacity: 0;
	&.owl-loaded {
		opacity: 1;
	}
}

@media(min-width: 1200px) {
	.custom-carousel-box-shadow-1 {
		position: relative;
		&:before {
		    content: '';
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    width: 65%;
		    height: 0px;
		    box-shadow: 0 0 110px 180px rgba(0,0,0,0.07);
		    transform: translate3d(-50%, -50%, 0);
		    z-index: 0;
		}
	}

	.custom-carousel-box-shadow-2 {
		position: relative;
		&:before {
		    content: '';
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    width: 57%;
		    height: 0px;
		    box-shadow: 0 0 160px 240px rgba(0, 0, 0, 0.07);
		    transform: translate3d(-50%, -50%, 0);
		    z-index: 0;
		}
	}
}

// Custom Highlight
@media(min-width: 992px) {
	.custom-highlight-1 {
		position: relative;
		z-index: 1;
		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 0%;
			height: 100%;
			background-color: var(--dark);
			z-index: -1;
		}
	}
}

.customHighlightAnim {
	&:after {
		animation-name: customHighlightAnim;
		animation-duration: 2s;
		animation-fill-mode: forwards;
	}
}

.customHighlightAnimDelay {
	&:after {
		animation-delay: 3s;
	}
}

@keyframes customHighlightAnim {
	0% {
		width: 0;
		opacity: 1;
	}
	100% {
		width: 100%;
		opacity: 1;
	}
}

// Clean Stars Animation
.clean-animation-1 {
	svg {
		g {
			&:nth-child(1) {
				animation: cleanAnimation 3s;
			    animation-iteration-count: infinite;
			}
			&:nth-child(2) {
				animation: cleanAnimation 3s;
			    animation-iteration-count: infinite;
			    animation-delay: 400ms;
			}
			&:nth-child(3) {
				animation: cleanAnimation 3s;
			    animation-iteration-count: infinite;
			    animation-delay: 800ms;
			}
		}
	}
}

@keyframes cleanAnimation {
	0% {
		opacity: 0;
		transform: scale(0.8);
		transform-origin: 50% 50%;
	}
	85% {
		opacity: 1;
		transform: scale(1);
		transform-origin: 50% 50%;
	}
	100% {
		opacity: 0;
		transform: scale(1);
		transform-origin: 50% 50%;
	}
}

// Custom Line Animation
.customLineAnimation {
	animation-name: customLineAnimation;
}

@keyframes customLineAnimation {
	0% {
		width: 0px;
		opacity: 1;
	}
	100% {
		width: 50px;
		opacity: 1;
	}
}

// Shape Dividers
@media(min-width: 2000px) {
	.shape-divider {
		svg {
			width: 100%;
		}
	}
}

// Custom Half Section
.custom-col-half-section {
	&.col-half-section {
		max-width: 727px;
	}
}

// Custom Fluid Col
.fluid-col-lg-5 {
	.fluid-col {
	    left: 50%;
		width: 100vw;
	    transform: translate3d(-50%, 0, 0);
	}
}

@media (min-width: 992px) {
	.fluid-col-lg-5 {
		min-height: 0; 
		.fluid-col {
			width: calc(44.2vw - 15px);
			#{$left}: 15px;
			transform: none;
		}
	}
}

@media (max-width: 991px) {
	.fluid-col-lg-5 {
		min-height: 400px !important;
	}
}

/*
* Header
*/
.custom-header-top-btn-style-1 {
	position: relative;
	&:after {
	    content: '';
	    position: absolute;
	    top: 100%;
	    #{$right}: 0;
	    width: calc( 100% + 20px);
	    height: 10px;
	    z-index: 1;
	    background: var(--light);
	}
}

html {
	&.sticky-header-active {
		#header {
			.header-top {
				padding: 0 !important;
			}
		}
	}
}

@media(min-width: 992px) {
	#header {
		.header-nav-main {
			nav {
				> ul {
					> li {
						> a {
							font-size: 15px;
							font-weight: 600;
							padding: 0 0.8rem !important;
						}
					}
				}
			}
		}
	}
}

@media(min-width: 1200px) {
	#header {
		.header-nav-main {
			nav {
				> ul {
					> li {
						> a {
							padding: 0 1.3rem !important;
						}
					}
				}
			}
		}
	}
}

/*
* Contact Form
*/
.custom-form-style-1 {
	.form-control {
	    height: calc(1.8em + 1.85rem + 2px);
	    padding: 0.975rem 1.25rem;
	    background: var(--grey-100);
	    border-color: var(--grey-100);
        line-height: 1.5 !important;
	    &:focus {
	    	border-color: var(--grey-500);
	    }
	    @include placeholder-color(#a9a9a9);
	}
	select {
		color: #495057;
		option {
			color: #a9a9a9;
			&[selected] {
				color: #a9a9a9;
			}
		}
	}
	textarea.form-control {
		height: auto;
	}
}

.custom-svg-stars {
	position: absolute;
    top: 0;
    #{$right}: 100%;
    width: 300px;
    opacity: 0.1;
    z-index: 0;
}

/*
* Home Why Choose Us Section - Custom Accordion Style
*/
.custom-accordion-style-1 {
	> .card {
		border: 1px solid transparent !important;
		transition: ease border-color 300ms;
		.card-header {
			a {
				position: relative;
				padding: 23px 30px;
				background-color: var(--light);
				transition: ease background-color 300ms, ease color 300ms;
				&:after {
					content: '+';
					position: absolute;
					top: 50%;
					#{$right}: 25px;
					font-size: inherit;
					font-weight: inherit;
					transform: translate3d(0, -50%, 0) rotate(45deg);
					transform-origin: 50% 50%;
					transition: ease transform 300ms;
				}

				&.collapsed {
					&:after {
						transform: translate3d(0, -50%, 0) rotate(0deg);
					}
				}
			}
		}

		& + .card {
			margin-top: 20px;
		}
	}
}

/*
* Home Section Our Process - Custom Featured Icon
*/
.custom-featured-icon-wrapper {
	display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    border-radius: 100%;
    .icon-featured {
    	margin: 0 !important;
    }
}

/*
* Home Section Happy Clients - Custom Testimonial
*/
.testimonial.testimonial-style-3 {
	&.custom-testimonial-style-1 {
		blockquote {
			background: #FFF !important;
			padding: 45px 40px 35px 40px;
			&:before {
				content: '\f10d';
				font-family: "Font Awesome 7 Free";
				font-weight: 900;
				font-size: 1.2rem;
				top: 15px;
				#{$left}: 15px;
			}
		}
		.testimonial-author {
			margin: 19px 0 0 0;
			img {
				max-width: 67px;
			}
		}
	}
}

/*
* Portfolio Detail
*/
.custom-list-icons-icon-size {
	li {
		padding-left: 50px !important;
		&, a:first-child {
			> [class*="fa-"]:first-child,
			> .icons:first-child {
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    width: 40px !important;
			    height: 40px !important;
			    font-size: 0.9rem !important;
			    top: 1px !important;
			}
		}
	}
}

/*
* Services Detail
*/
.custom-nav-list-effect-1 {
	> li {
		> a {
			position: relative;
			transition: ease padding 300ms, ease color 300ms;
			&:before {
				content: '';
				position: absolute;
				top: 50%;
				#{$left}: 0;
				width: 0;
				height: 0;
				border-top: 6px solid transparent;
				border-bottom: 6px solid transparent;
				@include if-ltr() {
					border-left: 6px solid var(--grey-500);
				}
				@include if-rtl() {
					border-right: 6px solid var(--grey-500);
				}
				opacity: 0;
				visibility: hidden;
				transform: translate3d(0, -50%, 0);
				transition: ease opacity 300ms;
			}
		}
		&.active,
		&.open,
		&:hover {
			> a {
				padding-#{$left}: 15px;
				&:before {
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}
}

/*
* Blog
*/
.blog-sidebar {
	.form-control.bg-color-grey {
		background-color: var(--light) !important;
	}
}

/*
* Footer
*/
#footer {
	p, a:not(.btn), span, li, .footer-copyright p {
		color: #a3b2c7;
	}
	.social-icons {
		li {
			a {
				color: #a3b2c7 !important;
			}
			&:hover {
				a {
					color: var(--light) !important;
				}
			}
		}
	}
	a:not(.btn):not(.no-footer-css) {
		color: #a3b2c7;
	}
}

/* Skin */
// Custom SVG Fill Color
.custom-svg-fill-color-tertiary {
	fill: var(--tertiary);
}

.custom-svg-fill-color-tertiary-darken {
	fill: var(--tertiary-100);
}

// Custom Highlight
.custom-highlight-1 {
	&.custom-highlight-1-primary {
		&:after {
			background-color: var(--primary);
		}
	}
}

// Custom Line
.custom-line {
	border-bottom-color: var(--primary);
}

// Owl Carousel
.owl-carousel {
	&.nav-arrows-1 {
		.owl-nav {
			.owl-prev, .owl-next {
				color: var(--secondary);
			}
		}
	}
}

// Custom Card Style
.custom-card-style-1 {
	&:hover {
		border-color: var(--primary);
		.custom-card-style-1-title {
			color: var(--primary) !important;
		}
		.custom-card-style-1-link {
			color: var(--secondary) !important;
		}
	}
}

// Custom Accordion Style
.custom-accordion-style-1 {
	> .card {
		.card-header {
			a {
				background-color: var(--primary);
				&:not(.collapsed) {
					color: var(--primary-inverse) !important;
				}
				&.collapsed {
					background-color: var(--primary-inverse);
				}
			}
		}
		&:hover {
			border-color: var(--primary) !important;
			.card-header {
				a.collapsed {
					color: var(--primary) !important;
				}
			}
		}
	}
}

// Custom Social Icons
.custom-social-icons {
	li {
		a {
			background: var(--secondary);
			i {
				color: var(--secondary-inverse);
			}
		}
	}
}

// Custom Testimonial
.testimonial.testimonial-style-3 {
	&.custom-testimonial-style-1 {
		blockquote {
			&:before {
				color: var(--tertiary);
			}
		}
	}
}

// Services Detail
.custom-nav-list-effect-1 {
	> li {
		> a {
			&:before {
				border-left-color: var(--primary);
				border-right-color: var(--primary);
			}
		}
		&.active,
		&.open,
		&:hover {
			> a {
				color: var(--primary) !important;
			}
		}
	}
}

// Blog
.blog-sidebar {
	button.bg-color-grey {
		background-color: var(--primary) !important;
		color: var(--primary-inverse) !important;		
	}
}