@use '../utils' as *;

/*---------------------------------
	1.2 Theme SCSS
---------------------------------*/

/*-----------------------------------------------------------------------------------

    Template Name: Industrie - Construction and Factory HTML Template
    Author: rs-theme
    Support: https://rstheme.com/support
    Description: Construction and Factory HTML Template
    Version: 1.0.3
	Developer: Nayeem Ahmed

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

	-----------------
    01. THEME SCSS
	-----------------
		1.1 spacing
		1.2 theme
		1.3 typography
		1.4 index

	-----------------
    01. utils SCSS
	-----------------
		1.1 breakpoints
		1.2 extends
		1.3 mixins
		1.4 root
		1.5 index
		1.6 main
		
	-----------------
    02. COMPONENTS SCSS
	-----------------
		2.1 accordion
		2.2 animation
		2.3 background
		2.4 backtotop
		2.5 brand
		2.6 breadcrumb
		2.7 buttons
		2.8 color
		2.9 counter
		2.10 cursor
		2.12 forms
		2.13 lenis
		2.14 navigation
		2.15 offcanvas
		2.16 pagination
		2.17 preloader
		2.18 progress-bar
		2.19 scrollbar
		2.20 section-title
		2.21 settings
		2.22 shortcodes
		2.23 smooth-scroll
		2.24 social
		2.25 index

	-----------------
    03. layout
	-----------------
		-----------------
		3.1.1 banner SCSS
		-----------------
			3.1.1 banner-1
			3.1.2 banner-2
			3.1.3 banner-3
			3.1.4 banner-4
			3.1.5 banner-5
			3.1.6 banner-6
			3.1.7 banner-7
			3.1.8 banner-8
			3.1.9 banner-9
			3.1.10 banner-10
			3.1.11 banner-11
			3.1.12 banner-12
			3.1.13 index

		-----------------
		3.1.2 blog SCSS
		-----------------
			3.2.1 blog-tag
			3.2.2 blog
			3.2.3 postbox
			3.2.4 sidebar-tag
			3.2.5 sidebar
			3.2.6 index

		-----------------
		3.1.3 ecommerce SCSS
		-----------------
			3.3.1 checkout
			3.3.2 shop
			3.3.3 index

		-----------------
		3.1.4 footer SCSS
		-----------------
			3.4.1 footer
			3.4.2 copyright
			3.4.3 index

		-----------------
		3.1.5 header SCSS
		-----------------
			3.5.1 header-1
			3.5.2 header-2
			3.5.3 header-3
			3.5.4 header-4
			3.5.5 header-5
			3.5.6 header-6
			3.5.7 header-7
			3.5.8 header-common
			3.5.9 header-top
			3.5.10 index
		-----------------
		3.1.6 menu SCSS
		-----------------
			3.6.1 memu
			3.6.2 mobile-menu
			3.6.3 index

	-----------------
    04. Page SCSS
	-----------------
		4.1 about
		4.2 award
		4.3 cart
		4.4 category
		4.5 contact
		4.6 cta
		4.7 experience
		4.8 faq
		4.9 feature
		4.10 gallery
		4.11 gsap
		4.12 history
		4.13 portfolio
		4.14 pricing-range
		4.15 pricing
		4.16 progress
		4.17 quantity
		4.18 resume
		4.19 services
		4.20 skill
		4.21 slide-text
		4.22 team
		4.23 testimonial
		4.24 video
		4.25 why-choose
		4.26 work-step
		4.27 index
		4.28 line
		4.29 index

/*----------------------------------------*/
/*  1.1 Theme Default
/*----------------------------------------*/

// Google Fonts
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Space+Grotesk:wght@300..700&display=swap');



/*----------------------------------------
   Icomoon customize
-----------------------------------------*/
i[class^="icon-"] {
	line-height: 1;
	position: relative;
}

/*----------------------------------------
   Bootstrap customize
-----------------------------------------*/
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
	--bs-gutter-x: 3rem;
}

@media (min-width: 1441px) {

	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 1390px;
	}
}

.row {
	--bs-gutter-x: 3rem;
}

.g-0,
.gx-0 {
	--bs-gutter-x: 0;
}
.g-10,
.gx-10 {
	--bs-gutter-x: 10px;
}

.g-20,
.gx-20 {
	--bs-gutter-x: 20px;
}

.g-30,
.gx-30 {
	--bs-gutter-x: 30px;
}

.g-30,
.gy-30 {
	--bs-gutter-y: 30px;
}

.g-40,
.gx-40 {
	--bs-gutter-x: 40px;
}

.g-40,
.gy-40 {
	--bs-gutter-y: 40px;
}

.g-50,
.gx-50 {
	--bs-gutter-x: 50px;
}

.g-50,
.gy-50 {
	--bs-gutter-y: 50px;
}

.g-60,
.gy-60 {
	--bs-gutter-y: 60px;
}

/*---------------------------------
    1.2 Common Classes
---------------------------------*/
.w-img {
	& img {
		width: 100%;
	}
}

.m-img {
	& img {
		max-width: 100%;
	}
}

.fix {
	overflow: hidden
}

.clear {
	clear: both;
}

.f-left {
	float: left
}

.f-right {
	float: right
}

.z-index-1 {
	z-index: 1;
}

.z-index-11 {
	z-index: 11;
}

.opacity-05 {
	opacity: 0.5;
}

.overflow-y-visible {
	overflow-x: hidden;
	overflow-y: visible;
}

.p-relative {
	position: relative;
}

.position-relative {
	position: relative;
}

.p-absolute {
	position: absolute;
}

.position-absolute {
	position: absolute;
}

.include-bg {
	@include background();
}

.hr-1 {
	border-top: 1px solid rgb(232, 232, 232);
}

.x-clip {
	overflow-x: clip;
}

.o-xs {
	@media #{$xs} {
		overflow-x: hidden;
	}
}

.overflow-visible {
	overflow: visible;
}

/*----------------------------------------
    Body Overlay 
-----------------------------------------*/
.body__overlay {
	background-color: var(--rs-common-heading);
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 9999;
	left: 0;
	opacity: 0;
	visibility: hidden;
	@extend %rs-transition-3;
}

.body__overlay {
	background-color: var(--rs-common-heading);
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 9999;
	left: 0;
	opacity: 0;
	visibility: hidden;
	@extend %rs-transition-3;
}

.body__overlay.opened {
	opacity: 0.7;
	visibility: visible;
}
.image-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.image-overly {
	position: relative;
	z-index: 5;
	&::before {
		position: absolute;
		content: "";
		inset-inline-start: 0;
		inset-block-start: 0;
		width: 100%;
		height: 100%;
		background-color: rgba($color: #000000, $alpha: .50);
		z-index: -1;
	}
}

/*----------------------------------------
   Text Underline
-----------------------------------------*/
.underline {
	& a {
		display: inline;
		background-image: -webkit-gradient(linear, left top, right top, color-stop(0, currentColor), to(currentColor));
		background-image: linear-gradient(to right, currentColor 0, currentColor 100%);
		background-position: 0 90%;
		background-repeat: no-repeat;
		background-size: 0 2px;
		-webkit-transition: all 0.3s, background-size 0.8s;
		transition: all 0.3s, background-size 0.8s;
		&:hover {
			color: var(--rs-theme-orange);
 			 background-size: 100% 2px;
		}
	}
	&.has-theme-red{
		a{
			background-image: linear-gradient(var(--rs-theme-red), var(--rs-theme-red)), linear-gradient(var(--rs-theme-red), var(--rs-theme-red));
			&:hover{
				color: var(--rs-theme-red);
			}
		}
	}
	&.has-theme-blue{
		a{
			background-image: linear-gradient(var(--rs-theme-blue), var(--rs-theme-blue)), linear-gradient(var(--rs-theme-blue), var(--rs-theme-blue));
			&:hover{
				color: var(--rs-theme-blue);
			}
		}
	}
	&.has-white{
		a{
			background-image: linear-gradient(var(--rs-white), var(--rs-white)), linear-gradient(var(--rs-white), var(--rs-white));
			padding: 0 0 1% 0;
			&:hover{
				color: var(--rs-white);
			}
		}
	}
	&.has-theme-green{
		a{
			background-image: linear-gradient(var(--rs-theme-green), var(--rs-theme-green)), linear-gradient(var(--rs-theme-green), var(--rs-theme-green));
			&:hover{
				color: var(--rs-theme-green);
			}
		}
	}
	&.has-theme-yellow{
		a{
			background-image: linear-gradient(var(--rs-theme-yellow), var(--rs-theme-yellow)), linear-gradient(var(--rs-theme-yellow), var(--rs-theme-yellow));
			&:hover{
				color: var(--rs-theme-yellow);
			}
		}
	}
	&.has-black{
		a{
			background-image: linear-gradient(var(--rs-title-primary), var(--rs-title-primary)), linear-gradient(var(--rs-title-primary), var(--rs-title-primary));
			&:hover{
				color: var(--rs-title-primary);
			}
		}
	}
}


/*----------------------------------------
   Mfp customize
-----------------------------------------*/
.mfp-iframe-holder {
	.mfp-content {
		line-height: 0;
		width: 100%;
		max-width: 1280px;

		// @media #{$laptop} {
		// 	max-width: 1000px;
		// }

		@media #{$xl} {
			max-width: 850px;
		}

		@media #{$lg} {
			max-width: 820px;
		}

		@media #{$md} {
			max-width: 750px;
		}
	}
}
.mfp-close {
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);

	&:hover {
		color: var(--rs-white);
	}

	&::after {
		position: absolute;
		content: "\f00d";
		height: 100%;
		width: 100%;
		font-family: var(--rs-ff-fontawesome);
		font-size: 31px;
		font-weight: 200;
		right: -20px;
		margin-top: -25px;

		@media #{$xs,$sm,$md} {
			right: 15px;
			margin-top: -30px;
		}
	}
}