// ICON BOXES
.icon-bx-xl{
	display: inline-block;
    text-align: center;
	border-radius: 3px;
    width: 150px;
    height: 150px;
    line-height: 150px;
	&.radius {
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
	}
	i {
		font-size: 80px;
		vertical-align: middle;
	}
	img {
		vertical-align: middle;
		max-width: 100%;
		width: auto;
		height: 80px;
	}
}
.icon-bx-lg{
	display: inline-block;
    text-align: center;
	border-radius: 3px;
    width: 120px;
    height: 120px;
    line-height: 120px;
	&.radius {
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
	}
	i {
		font-size: 50px;
		vertical-align: middle;
	}
	img {
		vertical-align: middle;
		max-width: 100%;
		width: auto;
		height: 55px;
	}
}
.icon-bx-md{
	display: inline-block;
    text-align: center;
	border-radius: 3px;
    width: 100px;
    height: 100px;
    line-height: 100px;
	&.radius {
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
	}
	i {
		font-size: 35px;
		vertical-align: middle;
	}
	img {
		vertical-align: middle;
		max-width: 100%;
		width: auto;
		height: 40px;
	}
}
.icon-bx-sm{
	display: inline-block;
    text-align: center;
	border-radius: 3px;
    width: 60px;
    height: 60px;
	min-width: 60px;
	line-height: 60px;
	&.radius {
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
	}
	i {
		font-size: 26px;
		vertical-align: middle;
	}
	img {
		vertical-align: middle;
		max-width: 100%;
		width: auto;
		height: 26px;
	}
}
.icon-bx-xs{
	display: inline-block;
    text-align: center;
	border-radius: 3px;
	width: 60px;
    height: 60px;
    line-height: 60px;
	&.radius {
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
	}
	i {
		font-size: 30px;
		vertical-align: middle;
	}
	img {
		vertical-align: middle;
		max-width: 100%;
		width: auto;
		height: 20px;
	}
}

// ICON SIZE
.icon-xl{
	display: inline-block;
    text-align: center;
	width: 100px;
	i {
		vertical-align: middle;
		font-size: 80px;
	}
	img {
		vertical-align: middle;
		max-width: 100%;
		width: auto;
		height: 80px;
	}
}
.icon-lg{
	display: inline-block;
    text-align: center;
	line-height: 1;
		
	i {
		vertical-align: middle;
		font-size: 60px;
	}
	img {
		vertical-align: middle;
		max-width: 100%;
		min-width: 65px;
		width: 65px;
	}
}
.icon-md{
	display: inline-block;
    text-align: center;
	i {
		vertical-align: middle;
		font-size: 45px;
	}
	img {
		vertical-align: middle;
		max-width: 100%;
		min-width: 45px;
		width: 45px;
	}
}
.icon-sm{
	display: inline-block;
    text-align: center;
	width: 40px;
	i {
		vertical-align: middle;
		font-size: 30px;
	}
	img {
		vertical-align: middle;
		max-width: 100%;
		min-width: 30px;
		width: 30px;
	}
}
.icon-xs{
	display: inline-block;
    text-align: center;
	width: 30px;
	i {
		vertical-align: middle;
		font-size: 20px;
	}
	img {
		vertical-align: middle;
		max-width: 100%;
		width: auto;
		height: 20px;
	}
}

// PLACE ICON WITH BOX
.icon-bx-wraper {
    position: relative;
	
	.dz-title {
		margin-top: 0;
	}
	.after-titile-line {
		margin-bottom: 10px;
	}
	p:last-child {
		margin: 0;
	}
	&.center{
		text-align: center;
	}
	&.left{
		.icon-bx-xl,
		.icon-bx-lg,
		.icon-bx-md,
		.icon-bx-sm,
		.icon-bx-xs{
			float: $dz-pos-left;
			margin-#{$dz-pos-right}: 20px;
		}
		.icon-xl,
		.icon-lg,
		.icon-md,
		.icon-sm,
		.icon-xs{
			float: $dz-pos-left;
			margin-#{$dz-pos-right}: 10px;
		}
	}
	&.right{
		text-align: $dz-pos-right;
		.icon-bx-xl,
		.icon-bx-lg,
		.icon-bx-md,
		.icon-bx-sm,
		.icon-bx-xs{
			float: $dz-pos-right;
			margin-#{$dz-pos-left}: 20px;
		}
		.icon-xl,
		.icon-lg,
		.icon-md,
		.icon-sm,
		.icon-xs{
			float: $dz-pos-right;
			margin-#{$dz-pos-left}: 10px;
		}
	}

	
}
.icon-content{
    overflow: hidden;
}

// ICON BOX CENTER ALIGH 
[class*="icon-bx-"][class*="bg-"]{
	a,
	span{
		color: $white;
	}
}
[class*="icon-bx-"].bg-white a {
    color: inherit;
}
[class*="icon-bx-"][class*="border-"] {
    display: table;
    line-height: normal;
    margin-#{$dz-pos-left}: auto;
    margin-#{$dz-pos-right}: auto;
}
[class*="icon-bx-"][class*="border-"] .icon-cell {
    display: table-cell;
    vertical-align: middle;
}

/// MEDIA WITH CONTENT BOX CSS
.dz-box,
.dz-info,
.dz-title,
.dz-title-inner {
    position: relative;
}
.dz-title-inner {
    display: inline-block;
}
.dz-box[class*="border-"],
.dz-info[class*="border-"] {
    border-color: #eee;
}

// BEFORE & AFTER FOR LINE CSS
.left-border,
.right-border {
    position: relative;
	&:before {
		content: "";
		position: absolute;
		top: 5px;
		width: 1px;
		height: 90%;
		background: #CCC;
	}
}
.right-border:before {
    #{$dz-pos-right}: 0;
}

// FOR IMAGES
.dz-media,
.dz-post-media {
    position: relative;
	overflow: hidden;
	img {
		max-width: 100%;
		height: auto;
		width:100%;
	}
}

.icon-bx-wraper{
	
	.icon-bx{
		position: relative;
		@include transitionMedium;
	}
	
		// Style 1
	&.style-1{
	    display: flex;
		gap: 15px;
		text-align: left;
	
		.icon-bx{
			width: 60px;
			min-width: 60px;
			height: 60px;
			display: flex;
			align-items: center;
			color: var(--bs-primary);
			font-size: 24px;
			justify-content: center;
			background-color: var(--bs-light);
			border-radius: 50%;
			
			i{
				display: flex;
			}
			&[class*="bg-"]{
				color: #fff;				
			}
		}
		p{
			font-size: 15px;
			font-weight: 300;
			color: var(--bs-body);
		}
		.dz-title{
			font-size: 18px;
			font-weight: 500;
			margin-bottom: 5px;
		}
		
		.bg-primary &,
		.bg-dark &,
		.bg-secondary &{
			.icon-bx{
				background-color: rgba(255, 255, 255, 0.1);
				color: #fff;
			}
			.dz-title{
				color: #fff;
			}
			a,
			p{
				color: #fff;
				opacity: 0.7;
			}
		}
		&.bg-white{
			.icon-bx{
				background-color: rgba(255, 255, 255, 0.1);
				color: #fff;

				.icon-cell{
					color: var(--bs-primary);
				}
			}
		}
		
		&:hover{
			.icon-bx{
				color: #fff;
				background-color: var(--bs-primary);
				
				i{
					animation: shake 1s;
				}
			}
			.bg-primary &,
			.bg-dark &,
			.bg-secondary &{
				.icon-bx{
					color: #fff;
					background-color: var(--bs-primary);
				}
			}
		}

		@include respond('tab-port'){
			.dz-title{
				font-size: 16px;
			}
			.icon-bx{
				width: 50px;
				min-width: 50px;
				height: 50px;
				font-size: 18px;
			}
		}
	}

	// Style-2
	&.style-2{
		border-radius: 10px;
		z-index: 1;
		filter: drop-shadow(0 10px 30px rgba(var(--bs-primary-rgb), 0.1));
		min-height: 200px;
		height: 100%;
		display: flex;
		flex-direction: column;
	
		*{
			@include transitionMedium;
		}
		&:after {
			content: "";
			background: #fff;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: -1;
			mask-image: url(../images/bg03.svg);
			mask-position: top right;
			border-radius: 15px 0 15px 15px;
			@include transitionMedium;
		}
		.icon-bx{
			width: 70px;
			height: 70px;
			display: block;
			position: absolute;
			right: 0;
			top: 0;
			border-radius: 10px;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			
			i{
				font-size: 38px;
				color: var(--bs-primary);
			}
			svg{
				width: 100%;
				height: 100%;
			}
		}
		p{
			font-size: 15px;
		}
		.dz-title{
			font-size: 20px;
			font-weight: 600;
			margin-bottom: 25px;
			position: relative;
			padding-bottom: 25px;
			margin-right: 55px;
			
			&:after{
				content: "";
				width: 100%;
				height: 1px;
				background: linear-gradient(to right, var(--bs-secondary) 0, rgba(0, 0, 0, 0) 100%);
				position: absolute;
				opacity: 0.3;
				left: 0;
				bottom: 0;
				@include transitionMedium;
			}
		}
		.icon-content{
			position: relative;
			z-index: 1;
			padding: 30px;
		}
		.bg{
			mask-image: url(../images/bg03.svg);
			-webkit-mask-image: url(../images/bg03.svg);
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			mask-position: top right;
			z-index: 0;
			border-radius: 15px;
			background-size: cover;
			background-position: center;
			opacity: 0;
			background-blend-mode: color-burn;
			background: var(--bs-secondary);
		}
		.dz-media{
			height: 210px;
			margin-top: auto;
			
			img{
				height: 100%;
				object-fit: cover;
				@include transitionMedium;
			}
		}
		.icon-footer{
			padding: 15px 30px;
			text-align: center;
			position: relative;
			z-index: 1;
		}
		@include respond('tab-port'){
			.dz-title{
				font-size: 18px;
			}
			p{
				font-size: 14px;
			}
		}
		@include respond('phone'){
			.icon-content{
				padding: 25px;
			}
		}
		&.active,
		&:hover{
			&:after {
				background: var(--bs-secondary);
			}
			.bg{
				opacity: 1;
			}
			.dz-title:after{
				background: linear-gradient(to right, #fff 0, rgba(0, 0, 0, 0) 100%);
			}
			.dz-title,
			p,
			a{
				color: #fff;
			}
			.icon-bx{
				background: var(--bs-primary);
				
				i{
					color: #fff;
				}
				svg{
					--bs-primary: #fff;
				}
			}
			.dz-media img{
				transform: scale(1.15);
			}
		}
	}

	// Style 3
	&.style-3{
		border-radius: 20px;
		padding: 30px 120px 25px 30px;
		z-index: 1;
		filter: drop-shadow(0 10px 30px rgba(var(--bs-primary-rgb), 0.1));
		min-height: 200px;
		height: 100%;
		
		*{
			@include transitionMedium;
		}
		&::before{
			font-size: 80px;
			line-height: 1.2;
			font-weight: 600;
			color: var(--bs-secondary);
			opacity: 0.1;
			position: absolute;
			right: 25px;
			top: 20px;
			z-index: 2;
			@include transitionMedium;
		}
		&:after {
			content: "";
			background: #fff;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: -1;
			mask-image: url(../images/bg01.svg);
			mask-position: right bottom;
			border-radius: 20px 20px 0 20px;
			@include transitionMedium;
		}
		.icon-bx{
			width: 90px;
			height: 90px;
			display: block;
			position: absolute;
			right: 0;
			bottom: 0;
			border-radius: 20px;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			
			i{
				font-size: 60px;
				color: var(--bs-primary);
			}
			svg{
				width: 100%;
				height: 100%;
			}
		}
		p{
			font-size: 16px;
		}
		.dz-title{
			font-size: 24px;
			font-weight: 600;
			margin-bottom: 20px;
			position: relative;
			padding-bottom: 20px;
			
			&:after{
				content: "";
				width: 100%;
				height: 1px;
				background: linear-gradient(to right, var(--bs-secondary) 0, rgba(0, 0, 0, 0) 100%);
				position: absolute;
				opacity: 0.3;
				left: 0;
				bottom: 0;
				@include transitionMedium;
			}
		}
		.icon-content{
			position: relative;
			z-index: 1;
		}
		.bg{
			mask-image: url(../images/bg01.svg);
			-webkit-mask-image: url(../images/bg01.svg);
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			mask-position: right bottom;
			z-index: 0;
			border-radius: 20px;
			opacity: 0;
			background: var(--bs-secondary);
			background-blend-mode: color-burn;
			background-position: center;
			background-size: cover;
		}
		@include respond('laptop'){
			&::before {
				font-size: 65px;
			}
		}
		@include respond('tab-port'){
			padding: 25px 105px 20px 25px;
			
			.dz-title{
				font-size: 18px;
				margin-bottom: 12px;
				padding-bottom: 12px;
			}
			p{
				font-size: 14px;
			}
			&::before{
				font-size: 50px;
			}
		}
		&.active,
		&:hover{
			&:after {
				background: var(--bs-secondary);
			}
			&::before{
				color: #fff;				
			}
			.bg{
				opacity: 1;
			}
			.dz-title:after{
				background: linear-gradient(to right, #fff 0, rgba(0, 0, 0, 0) 100%);
			}
			.dz-title,
			p,
			a{
				color: #fff;
			}
			.icon-bx{
				background: var(--bs-secondary);
				
				i{
					color: #fff;
				}
			}
		}
		&.primary-hover{
			.bg{
				background-color: var(--bs-primary);
			}

			&::before{
				color: var(--bs-primary);	
			}

			&.active:after, 
			&:hover:after{
				background-color: var(--bs-primary);
			}
			&.active,
			&:hover{
				.icon-bx{
					background-color: var(--bs-primary);
				}
				&::before{
					color: #fff;	
				}
			}
		}
		&.gradient-hover{
			.bg{
				background: var(--gradient-primary);
				opacity: 0.2;
			}
			
			&::before{
				color: var(--bs-secondary);
			}

			&::after{
				background: var(--bs-light);	
			}
			&.icon-bx{
				background: var(--bs-light);
			}

			

			&.active:after, 
			&:hover:after{
				background: var(--gradient-primary);
			}
			&.active,
			&:hover{
				.icon-bx{
					background: var(--gradient-primary);
				}
				&::before{
					color: #fff;	
				}
			}
		}
	}
	&.style-4{
		background-color: rgba(var(--bs-primary-rgb), 0.05);
		border-radius: var(--radius-md);
		padding: 0 25px 25px;
		position: relative;
		margin-top: 40px;
		height: calc(100% - 40px);
		@include transitionFast;
		
		&:after{
			content: "";
			width: 5px;
			height: calc(100% - 50px);
			position: absolute;
			background-color: var(--bs-primary);
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			border-radius: 10px 0 0 10px;
			opacity: 0.3;
			@include transitionFast;
		}
		.icon-bx{
			height: 80px;
			width: 80px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32px;
			color: #fff;
			transform: translateY(-40px);
			margin-bottom: -20px;
			@include transitionFast;
		}
		&:hover,
		&.active{
			&:after{
				opacity: 1;
			}
			.icon-bx{
				background-color: var(--bs-primary) !important;
			}
		}
	}
}

@keyframes shake {
	0% {
		transform: translate(1px, 1px) rotate(0deg);
	}
	10% {
		transform: translate(-1px, -2px) rotate(-1deg);
	}
	20% {
		transform: translate(-3px, 0px) rotate(1deg);
	}
	30% {
		transform: translate(3px, 2px) rotate(0deg);
	}
	40% {
		transform: translate(1px, -1px) rotate(1deg);
	}
	50% {
		transform: translate(-1px, 2px) rotate(-1deg);
	}
	60% {
		transform: translate(-3px, 1px) rotate(0deg);
	}
	70% {
		transform: translate(3px, 1px) rotate(-1deg);
	}
	80% {
		transform: translate(-1px, -1px) rotate(1deg);
	}
	90% {
		transform: translate(1px, 2px) rotate(0deg);
	}
	100% {
		transform: translate(1px, -2px) rotate(-1deg);
	}
}