Server : Apache System : Linux server1.cgrithy.com 3.10.0-1160.95.1.el7.x86_64 #1 SMP Mon Jul 24 13:59:37 UTC 2023 x86_64 User : nobody ( 99) PHP Version : 8.1.23 Disable Function : NONE Directory :  /home/dnlcambodia/public_html/Khmer/assets/scss/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

.ft-service-section {
	overflow: hidden;
	padding: 110px 0px 90px;
	background-color: #f6f6f6;
}
.ft-service-text-area {
	.ft-btn {
		margin-top: 30px;
		a {
			background-color: $color-2;
		}
	}
}
.ft-service-slider-area {
	margin: 0 -50px;
	padding-left: 50px;
	padding-right: 50px;
	overflow: hidden;
}
.ft-service-slider-item {
	overflow: hidden;
	border-radius: 5px;
	background-color: #fff;
	transition: 500ms all ease;
	.ft-service-inner-img {
		overflow: hidden;
		img {
			transition: 500ms all ease;
		}
	}
	.ft-service-inner-text {
		padding: 30px 25px 20px;
		h3 {
			color: $color-2;
			font-size: 22px;
			font-weight: 700;
			padding-bottom: 18px;
		}
		p {
			padding-bottom: 20px;
		}
		.service-more {
			color: $color-2;
			font-size: 15px;
			font-weight: 600;
			font-family: $heading;
			span {
				display: inline-block;
				transition: .3s all ease;
			}
			&:hover {
				color: $base-color;
				span {
					margin-left: 5px;
					transform: rotate(360deg);
				}
			}
		}
		.ft-service-serial {
			right: -35px;
			bottom: -45px;
			height: 100px;
			width: 100px;
			color: $color-2;
			font-size: 22px;
			font-weight: 700;
			border-radius: 100%;
			font-family: $heading;
			background-color: #e5e5ed;
			transition: 300ms all ease;
			padding: 15px 10px 10px 32px;
		}
	}
	&:hover {
		box-shadow: 1.882px 17.901px 80px 0px rgba(68, 68, 68, 0.15);
		.ft-service-inner-text {
			.ft-service-serial {
				background-color: #fde8e5;
			}
		}
		.ft-service-inner-img {
			img {
				transform: scale(1.2);
			}
		}
	}
}
.ft-service-slider-wrapper {
	margin: 0px -15px;
	.slick-list {
		overflow: visible;
	}
	.slick-slide {
		-webkit-transition: .3s cubic-bezier(.24,.74,.58,1);
		-khtml-transition: .3s cubic-bezier(.24,.74,.58,1);
		-moz-transition: .3s cubic-bezier(.24,.74,.58,1);
		-ms-transition: .3s cubic-bezier(.24,.74,.58,1);
		-o-transition: .3s cubic-bezier(.24,.74,.58,1);
		transition: .3s cubic-bezier(.24,.74,.58,1);
		opacity: 0;
	}
	.slick-slide.slick-active {
		opacity: 1;
	}
	.slick-dots {
		@extend%slider-dot;
	}
}
.ft-service-section-2 {
	z-index: 1;
	overflow: hidden;
	padding: 105px 0px;
	background-color: rgb(0 37 49);
	.ft-service-bg {
		left: 0;
		right: 0;
		top: -100px;
		z-index: -1;
	}
	.ft-section-title-2 {
		span {
			color: #fff;
		}
		h2 {
			color: #fff;
		}
	}
}
.ft-service-content-2 {
	overflow: hidden;
	margin: 0px -15px;
	padding-top: 45px;
}
.ft-service-innerbox-2 {
	padding: 8px;
	max-width: 270px;
	overflow: hidden;
	margin: 0 auto;
	border-radius: 6px;
	background-color: #004150;
	transition: 500ms all ease;
	.ft-service-img {
		overflow: hidden;
		border-radius: 6px
	}
	.ft-service-icon {
		top: -35px;
		right: 15px;
		width: 50px;
		height: 50px;
		border-radius: 5px;
		background-color: #fff;
		transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
		transition-delay: 0.3s;
		i {
			font-size: 30px;
			line-height: .75;
			color: $base-color;
		}
	}
	h3 {
		color: #fff;
		font-size: 22px;
		font-weight: 700;
		padding-bottom: 25px;
	}
	.ft-service-text {
		padding: 30px 12px 20px;
		.ft-btn-2 {
			a {
				&:before {
					border: 2px solid #fff;
				}
				i {
					color: #fff;
				}
				&:hover {
					i {
						color: #002a34;
					}
				}
			}
		}
	}
	.ft-service-serial {
		right: -35px;
		bottom: -45px;
		height: 100px;
		width: 100px;
		color: #fff;
		font-size: 22px;
		font-weight: 700;
		border-radius: 100%;
		font-family: $heading;
		background-color: #002e39;
		transition: 500ms all ease;
		padding: 15px 10px 10px 32px;
	}
	&:hover {
		background-color: $base-color;
		.ft-service-serial {
			background-color: #c20001;
		}
		.ft-service-icon {
			transform: rotateY(360deg);
		}
	}
}
.ft-service-slider-2 {
	.slick-prev, .slick-next {
		display: none !important;
	}
	.slick-dots {
		@extend%slider-dot;
		li {
			background-color: #fff;
		}
	}
}
.ft-service-page-items {
	padding-top: 30px;
	.ft-service-innerbox-2 {
		margin-bottom: 30px;
	}
}
.ft-service-sidebar-widget {
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 40px;
	.widget-title {
		font-size: 24px;
		font-weight: 700;
	}
	.service-category-widget {
		padding: 40px 30px;
		background-color: #f4f4f4;
		.widget-title {
			color: #004150;
			padding-bottom: 25px;
		}
		li {
			margin-bottom: 15px;
			&:last-child {
				margin-bottom: 0;
			}
			a {
				width: 100%;
				color: #004150;
				font-weight: 700;
				position: relative;
				padding: 15px 20px;
				display: inline-block;
				border: 1px solid #d2d2d2;
				&:after {
					top: 15px;
					right: 20px;
					content: '\f061';
					font-weight: 900;
					position: absolute;
					font-family: 'Font Awesome 5 Pro';
				}
				&:hover {
					border: 1px solid #fff;
					background-color: rgb(255, 255, 255);
					box-shadow: 0.698px 9.976px 10px 0px rgba(104, 104, 104, 0.1);
				}
			}
		}
	}
	.service-form-widget {
		padding: 30px 20px;
		background-color: $base-color;
		.widget-title,p  {
			color: #fff;
			padding-bottom: 10px;
		}
		input,textarea {
			width: 100%;
			color: #fff;
			height: 55px;
			padding-left: 15px;
			margin-bottom: 15px;
			border: 1px solid #fff;
			background-color: transparent;
			&::placeholder {
				color: #fff;
			}
		}
		textarea {
			height: 130px;
			padding-top: 10px;
		}
		button {
			height: 55px;
			width: 170px;
			color: #004150;
			border:  none;
			margin-top: 10px;
			font-weight: 600;
			border-radius: 5px;
			background-color: #fff;
			font-family: $heading;
		}
	}
	.service-download-widget {
		padding: 40px 20px;
		background-color: #f4f4f4;
		.widget-title {
			color: #004150;
			padding-bottom: 25px;
		}
		li {
			margin-bottom: 20px;
			&:last-child {
				margin-bottom: 0;
			}
			a {
				width: 100%;
				display: flex;
				font-weight: 500;
				padding: 10px 20px;
				border-radius: 7px;
				align-items: center;
				justify-content: space-between;
				background-color: rgb(255, 255, 255);
				box-shadow: 0.698px 9.976px 10px 0px rgba(104, 104, 104, 0.1);
				i {
					width: 38px;
					height: 10px;
					height: 38px;
					font-size: 25px;
					line-height: 38px;
					text-align: center;
					color: $base-color;
					transition: .1s all ease;
					background-color: #fff0f0;
				}
				&:hover {
					color: #fff;
					background-color: $base-color;
					i {
						color: #fff;
						background-color: #ff6c6c;
					}
				}
			}
		}
	}
}
.ft-service-details-img-wrapper {
	.ft-service-details-img {
		margin-bottom: 30px;
	}
	
}
.ft-service-details-text-wrapper {
	h3 {
		color: #004150;
		font-size: 24px;
		font-weight: 700;
		padding-bottom: 30px;
	}
	p {
		padding-bottom: 30px;
	}
}
.ft-service-details-counter-item {
	padding: 25px 30px;
	margin-bottom: 30px;
	background-color: rgb(255, 255, 255);
	box-shadow: 0.698px 9.976px 50px 0px rgba(72, 72, 72, 0.15);
	.ft-service-details-count-icon {
		width: 70px;
		height: 100px;
		margin-right: 30px;
		i {
			font-size: 70px;
			color: $base-color;
		}
	}
	.ft-service-details-count-text {
		.title {
			color: #043440;
			font-size: 24px;
			font-weight: 700;
			padding-bottom: 10px;
		}
		.count-number {
			font-size: 48px;
			font-weight: 700;
			color: $base-color;
		}
	}
}
.ft-service-section-3 {
	padding-bottom: 120px;
	background-color: #f6f7f9;
}
.ft-service-content-3 {
	padding-top: 40px;
}
.ft-service-content-items-3 {
	overflow: hidden;
	margin-bottom: -10px;
	padding-bottom: 10px;
}
.ft-service-innerbox-3 {
	.ft-service-img {
		overflow: hidden;
		&:before {
			left: -15px;
			width: 110%;
			content: "";
			height: 100px;
			bottom: -57px;
			position: absolute;
			background-color: #f2f3f5;
			transform: rotate(-13deg);
		}
	}
	.ft-service-icon {
		right: 30px;
		top: -100px;
		z-index: 1;
		width: 95px;
		height: 95px;
		border-radius: 100%;
		background-color: #fff;
		border: 10px solid #008cfb;
		transition: 500ms all ease;
		i {
			color: #141415;
			font-size: 40px;
			line-height: .75;
		}
	}
	.ft-service-text-icon {
		top: -70px;
		max-width: 90%;
		margin:  0 auto;
		margin-bottom: -70px;
		padding: 35px 30px 75px;
		transition: 500ms all ease;
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 29px 0px rgba(12, 12, 12, 0.07);
		&:before {
			left: 0;
			top: -70px;
			content: '';
			position: absolute;
			transition: 500ms all ease;
			border-bottom: 70px solid #fff; 
			border-left: 339px solid rgba(255, 255, 255, 0);
		}
		&:after {
			top: -36px;
			left: -4px;
			width: 103%;
			content: "";
			height: 15px;
			position: absolute;
			background-color: #008eff;
			transform: rotate(-12deg) skew(-15deg);
		}
	}
	.ft-service-text {
		h3 {
			color: #121213;
			font-size: 22px;
			font-weight: 700;
			padding-bottom: 15px;
		}
		p {
			color: #121213;
			transition: 500ms all ease;
		}
	}
	.more-btn {
		right: 19px;
		bottom: 70px;
		a {
			color: #fff;
			font-size: 14px;
			font-weight: 700;
			position: relative;
			padding: 14px 26px;
			background-color: #008eff;
			&:before {
				top: 0;
				width: 0;
				height: 0;
				content: "";
				left: -16px;
				position: absolute;
				transition: 500ms all ease;
				border-bottom: 49px solid #008eff;
				border-left: 16px solid transparent;
			}
			i {
				margin-left: 8px;
				transition: 500ms all ease;
			}
			&:hover {
				background-color: #fa4318;
				&:before {
					border-bottom: 49px solid #fa4318;
				}
				i {
					margin-left: 12px;
				}
			}
		}
	}
	&:hover {
		.ft-service-icon {
			border: 10px solid #fa4318;
		}
		.ft-service-text-icon {
			background-color: #01011c;
			&:before {
				border-bottom: 70px solid #01011c;
			}
		}
		.ft-service-text {
			h3,p {
				color: #fff;
			}
		}
	}
}
.ft-service-more-btn {
	margin-top: 40px;
	a {
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		margin-left: 20px;
		padding: 10px 30px;
		background-color: #008eff;
		&:hover {
			background-color: #fa4318;
		}
	}
}
.pr-cor-service-section {
	z-index: 1;
	padding-bottom: 75px;
	.map-bg {
		left: 0;
		right: 0;
		z-index: -1;
		text-align: center;
	}
}
.pr-cor-service-content {
	padding-top: 35px;
	.ft-thx-btn {
		margin-top: 30px;
	}
}
.pr-cor-service-innerbox {
	padding: 15px;
	border-radius: 7px;
	margin-bottom: 30px;
	background-color: #fff;
	transition: 500ms all ease;
	box-shadow: 0px 0px 45px 0px rgba(87, 87, 87, 0.2);
	.pr-cor-service-inner-img {
		overflow: hidden;
		border-radius: 6px;
		overflow: hidden;
		img {
			transition: 500ms all ease;
		}
	}
	.pr-cor-service-inner-text {
		padding: 50px 0px 30px;
		.pr-cor-service-icon {
			left: 20px;
			top: -30px;
			width: 55px;  
			height: 55px;
			border-radius: 5px;
			background-color: #fff;
			transition: .3s cubic-bezier(.24,.74,.58,1);
			box-shadow: 0px 15px 30px 0px rgba(255, 72, 78, 0.2);
			transition-delay: .3s;
			i {
				font-size: 35px;
				line-height: .7;
				color: $base-color;
			}
		}
		h3 {
			font-size: 20px;
			font-weight: 700;
			color: $base-color-2;
			padding-bottom: 15px;
		}
		.pr-cor-service-btn {
			left: 0;
			right: 0;
			opacity: 0;
			bottom: 0px;
			width: 160px;
			margin: 0 auto;
			visibility: hidden;
			transition: 500ms all ease;
			a {
				width: 160px;
				height: 40px;
				font-size: 15px;
				font-weight: 600;
				overflow: hidden;
				border-radius: 5px;
				padding-left: 15px;
				color: $base-color-2;
				font-family: $heading;
				background-color: #fff;
				border: 2px solid #cfcfcf;
				i {
					top: 0;
					right: 0;
					color: #fff;
					width: 40px;
					height: 40px;
					display: flex;
					font-size: 10px;
					position: absolute;
					align-items: center;
					border-radius: 5px;
					justify-content: center;
					transition: .3s all ease;
					background-color: $base-color;
					box-shadow: 0px 0px 20px 0px rgba(255, 72, 78, 0.3);
				}
			}
			&:hover {
				a {
					color: #fff;
					border: 2px solid $base-color;
					background-color: $base-color;
					i {
						background-color: $base-color-2;
					}
				}
			}
		}
	}
	&:hover {
		box-shadow: 0px 0px 45px 0px rgba(87, 87, 87, 0.2);
		.pr-cor-service-btn {
			opacity: 1;
			bottom: -30px;
			visibility: visible;
		}
		.pr-cor-service-icon {
			transform: rotateY(360deg);
		}
		.pr-cor-service-inner-img  {
			img {
				transform: scale(1.1);
			}
		}
	}
}
// Home two
.pr-sv-service-section {
	padding: 95px 0px 65px;
	background-color: #edf4ff;
}
.pr-sv-service-content {
	padding-top: 50px;
}
.pr-sv-service-innerbox {
	padding: 40px 20px;
	margin-bottom: 30px;
	background-color: #fff;
	box-shadow: 0px 15px 30px 0px rgba(144, 144, 144, 0.05);
	.pr-sv-service-inner-icon {
		width: 60px;
		height: 60px;
		border-radius: 8px;
		background-color: #ff484e54;
		transition: 500ms all ease;
		i {
			font-size: 40px;
			line-height: .75;
			color: $base-color;
			transition: 500ms all ease;
		}
	}
	.pr-sv-service-inner-text {
		h3 {
			font-size: 18px;
			font-weight: 700;
			color: $base-color-2;
			padding: 25px 0px 15px;
			text-transform: uppercase;
		}
		p {
			padding-bottom: 20px;
		}
		.service-more {
			font-weight: 600;
			color: $base-color-2;
			font-family: $heading;
			i {
				font-size: 12px;
				transition: .3s all ease-in-out;
			}
			&:hover {
				color: $base-color;
				i {
					margin-left: 5px;
				}
			}
		}
	}
	&:hover {
		.pr-sv-service-inner-icon {
			background-color: $base-color;
			box-shadow: 0px 14px 40px 0px rgba(89, 198, 138, 0.3);
			i {
				color: #fff;
			}
		}
	}
}
.ft-thx-service-section-3 {
	z-index: 1;
	padding: 0px 0px 70px;
	background-color: #f9fdfd;
	.ft-thx-service-shape {
		top: 0;
		right: 0;
		z-index: -1;
	}
	.ft-thx-section-title-3 {
		margin: 0 auto;
		max-width: 780px;
		p {
			margin: 0 auto;
			max-width: 550px;
		}
	}
	.pr-sx-service-content {
		padding-top: 100px;
	}
	.ft-thx-btn-2 {
		margin-top: 30px;
	}
}
.pr-sx-service-innerbox {
	z-index: 1;
	border-radius: 10px;
	margin-bottom: 30px;
	background-color: #fff;
	border: 1px solid #e6e6e6;
	transition: 500ms all ease;
	padding: 80px 25px 30px 25px;
	border-bottom: 5px solid $base-color-2;
	.pr-sx-service-icon-bg {
		left: 0;
		right: 0;
		top: 60px;
		z-index: -1;
		opacity: 0;
		transition: 500ms all ease;
		i {
			color: #ffffff42;
			font-size: 155px;
		}
	}
	.pr-sx-service-item-icon {
		left: 0;
		right: 0;
		top: -60px;
		width: 105px;
		height: 105px;
		margin: 0 auto;
		position: absolute;
		border-radius: 100%;
		transition: 500ms all ease;
		background-color: $base-color-2;
		i {
			color: #fff;
			line-height: .7;
			font-size: 48px;
			transition: 500ms all ease;
		}
	}
	.pr-sx-service-item-text {
		h3 {
			font-size: 22px;
			font-weight: 700;
			color: $base-color-2;
			line-height: 1.636;
			padding-bottom: 20px;
		}
		p {
			color: $base-color-2;
			transition: 500ms all ease;
		}
	}
	&:hover {
		background-color: $base-color-3;
		border: 1px solid $base-color-3;
		border-bottom: 5px solid $base-color-3;
		box-shadow: 1.883px 26.934px 50px 0px rgba(60, 60, 60, 0.15);
		.pr-sx-service-item-icon {
			background-color: #fff;
			box-shadow: -5.176px 19.319px 50px 0px rgba(60, 60, 60, 0.2);
			i {
				color: $base-color-3;
			}
		}
		.pr-sx-service-item-text {
			h3 {
				color: #fff;
			}
			p {
				color: #fff;
			}
		}
		.pr-sx-service-icon-bg {
			opacity: 1;
			top: 40px;
		}
	}
}
.ft-thx-help-section {
	overflow: hidden;
	padding: 110px 0px;
	.background_overlay {
		z-index: 1;
		height: 405px;
		background-color: rgba(0, 0, 0, .80);
	}
	.ft-thx-help-bg {
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 405px;
		overflow: hidden;
	}
}
.ft-thx-help-content {
	z-index: 4;
	.ft-thx-section-title-3 {
		margin: 0 auto;
		max-width: 670px;
		padding-bottom: 40px;
		h2 {
			color: #fff;
		}
	}
}
.ft-thx-help-item {
	overflow: hidden;
	border-radius: 5px;
	padding: 30px 30px;
	background-color: #ffffff;
	box-shadow: 0px 0px 25px rgb(0 0 0 / 10%);
	.ft-thx-help-text {
		width: 270px;
		h3 {
			color: #000;
			font-size: 22px;
			line-height: 1.4;
			font-weight: 700;
			padding-bottom: 15px;
		}
		.ft-thx-btn-2 {
			a {
				height: 50px;
				width: 150px;
			}
		}
	}
	.ft-thx-help-img {
		z-index: 1;
		width: 210px;
		position: relative;
		&:before {
			top: 8px;
			right: -8px;
			bottom: -8px;
			left: 8px;
			z-index: -1;
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			transition: 500ms all ease;
			background-color: $base-color-3;
		}
	}
	&:hover {
		.ft-thx-help-img {
			&:before {
				left: -8px;
				right: 8px;
				top: -8px;
				bottom: 8px;
			}
		}
	}
}