芝麻web文件管理V1.00

编辑当前文件:/home/digitalh/tricomgroupbd.com/assets/sass/component/_why.scss

/*-------------------------------------------------------
29. Why css 
---------------------------------------------------------*/

.circle-plus {
	position: absolute;
    z-index: -1;
    bottom: -10rem;
    right: 0;
}

.why-right {
	.heading-1 {
		line-height: 5.3rem;
		font-weight: 500;
	}
}

.why-text {
	margin-bottom: 20px;
}

.why-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; 
	li {
		font-size: 18px;
		line-height: 20px;
		font-weight: 500;
		 i {
			  height: 2.3rem;
			  width: 2.3rem;
			  line-height: 2.3rem;
			  border-radius: 50%;
			  text-align: center;
			  border: 1px solid var(--clr-def);
			  color: var(--clr-def);
			  font-size: 1.3rem;
			  display: inline-block;
			  margin-right: 1.5rem; 
		}
	}
}

.why-h3 {
	text-decoration: underline;
	font-weight: 500;
	text-transform: capitalize;
	color: var(--clr-body);
	margin-bottom: 3rem;
}

//Why Section 2

.why-left-up-2 {
	margin-bottom: 6rem;
	.heading-1 {
		margin-bottom: 2rem;
	}
	p {
		line-height: 3.4rem;
		padding-right: 10rem;
	}
}

.why-option-single-2 {
	display: flex;
	flex-direction: column;
	gap: 15rem;
	background-color: var(--clr-white);
    padding: 30px 30px 30px 30px;
	box-shadow: rgba(149, 157, 165,.2) 0px 8px 24px;
	position: relative;
	z-index: 1;
	.why-wavy-line {
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
	}
	.why-circle-2 {
		@include pos-abs(var(--clr-def),10px,10px,1);
		top: 45%;
		left: 34%;
		translate: -50% -50%;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		&::before {
			@include pos-abs(var(--clr-def),20px,20px,.4);
			top: 50%;
			left: 50%;
			translate: -50% -50%;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			animation: smBg 3s linear infinite;
		}
	}
	.why-option-up-2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		h5 {
			text-transform: capitalize;
		}
		i {
			font-size: 4rem;
			color: var(--clr-def);
		}
	}
	.why-option-bottom-2 {
		p {
			
		}
	}
}

@keyframes smBg {
	0% {
		scale: 0;
	}
	50% {
		scale: 1.3;
	}
	100% {
		scale: 0;
	}
}

.why-right-pic-2 {
	.why-pic-4,
	.why-pic-3,
	.why-pic-2 {
		position: absolute;
		filter: brightness(100%) contrast(100%) saturate(30%) blur(0) hue-rotate(0deg);
		border-radius: 1rem;
		box-shadow: 0 5px 15px 0 rgba(2, 6 ,38,.12);
	}
	.why-pic-2 {
		bottom: 25px;
		right: 90px;
		z-index: -1;
		width: 120px;
	}
	
	.why-pic-3 {
		top: 0;
		left: 0;
		z-index: -1;
		width: 170px;
	}
	
	.why-pic-4 {
		width: 100px;
		top: 0;
		right: 0;
		z-index: -1;
	}
}

Page is not found

404 image

Oops! Page not found.

Sorry, an error has occured, Requested page not found!

Back To Homepage

leaf image

leaf image