/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--primary-color: #22D3EE;
	--base-color: #9C9AA2;
}

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

.absolute-footer,
.ss-hp-3 .flickity-button {
	display: none;
}

* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
}

.dark,
.dark p,
.dark td {
	color: var(--base-color);
}

.col-inner:last-child {
	padding-bottom: 0;
}

a {
	transition: all .25s ease;
}

p:last-child {
	margin-bottom: 0;
}

.off-canvas-left .mfp-content,
.off-canvas-right .mfp-content {
	max-width: 500px;
	width: 100%;
}

.off-canvas:not(.off-canvas-center) .nav-vertical li>a {
	font-size: 16px;
	text-transform: math-auto;
	color: #000;
}

.mfp-bg.mfp-ready {
	background-color: rgba(0, 0, 0, 0.4) !important;
	opacity: 1 !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
}

.mfp-wrap.mfp-ready {
	backdrop-filter: none !important;
}

.nav:not(.nav-slide) .active>.children {
	padding-bottom: 0;
}

.icon-box-img img,
.icon-box-img svg {
	padding-top: 0;
}

#logo {
	letter-spacing: 4px;

	a {
		/* Giảm độ rực của màu (Saturation) xuống 50% để nhìn tinh tế và dịu mắt hơn */
		background: linear-gradient(to right, hsl(184, 50%, 50%), hsl(266, 50%, 50%), hsl(184, 50%, 50%));
		background-size: 200% auto;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;

		display: inline-block;
		/* Để hiệu ứng gradient phủ toàn bộ text */

		animation: logoMoveGradient 3s linear infinite;
		/* Animation chạy loop liên tục 3 giây */
	}
}

/* Keyframes cho animation chữ Logo chuyển màu */
@keyframes logoMoveGradient {
	0% {
		background-position: 0% center;
	}

	100% {
		background-position: 200% center;
	}
}

.ss-footer {
	h2 {
		color: var(--primary-color);
	}

	h3 {
		font-size: 16px;
	}

	h3,
	p,
	li,
	a {
		color: #63738A;
	}
}

.header-shadow .header-wrapper,
.header-wrapper.stuck,
.layout-shadow #wrapper {
	box-shadow: 1px 2px 30px #22d3ee2b;
}

.ss-pd {
	padding-top: 100px !important;
	padding-bottom: 70px !important;
}

.ss-hp-1 {
	&:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 200px;
		height: 200px;
		background-color: var(--primary-color);
		border-radius: 50%;
		filter: blur(200px);
	}

	h2 {
		font-size: 16px;
		color: var(--primary-color);
		font-weight: 500;
		letter-spacing: 1px;
	}

	h1 {
		font-size: 60px;
		margin-bottom: 15px;
	}

	.button {
		margin-bottom: 0;
	}
}

.frame-title {
	h2 {
		font-size: 30px;
		position: relative;
		padding-bottom: 15px;
		margin-bottom: 0;

		&:after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 40px;
			height: 3px;
			background-color: var(--primary-color);
			border-radius: 4px;
		}
	}
}

.ss-hp-2 {
	.icon-box-text {
		p {
			margin-bottom: 6px;
		}
	}

	.hover-css {
		.col {
			transition: all .3s ease;
		}

		&:hover {
			.col {
				filter: blur(4px);

				&:hover {
					transform: scale(1.1);
					filter: blur(0);
				}
			}
		}
	}
}

.ss-hp-3 {
	.gallery-box {
		.box-text {
			display: none;
		}
	}

	.item-cta {
		.col-inner {
			position: relative;
			overflow: hidden;

			&:after {
				content: '';
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100px;
				height: 100px;
				background-color: var(--primary-color);
				border-radius: 50%;
				filter: blur(100px);
			}

			&:before {
				content: '';
				position: absolute;
				bottom: 0%;
				right: 0%;
				width: 100px;
				height: 100px;
				background-color: #FF00D6;
				border-radius: 50%;
				filter: blur(100px);
			}
		}

		h2 {
			font-size: 40px;
		}

		.button {
			margin: 0;
		}



	}
}


@media(max-width: 998px) {
	.ss-hp-1 {
		h1 {
			font-size: 50px;
		}
	}
}

@media(max-width: 588px) {
	.ss-hp-2 {
		.hover-css {
			&:hover {
				.col {
					&:hover {
						transform: scale(1);
					}
				}
			}
		}
	}

	.ss-hp-3 {
		& .item-cta {
			h2 {
				font-size: 24px;
			}
		}
	}

	.ss-pd {
		padding-top: 60px !important;
		padding-bottom: 30px !important;
	}

	.ss-hp-1 {
		h1 {
			font-size: 32px;
		}
	}
}