/* Certifications & Features Section Styles */
.common{
    padding-top: 0px; 
    padding-bottom: 0px; 
    background-color: #F9F9F9; 
    color: #121212; 
    overflow: hidden;
}
.common-container {
	max-width: 1420px;
	margin: auto;
	text-align: center;
}

.relative {
	position: relative;
}

.filter-background::after,
.filter-background::before {
	content: '';
	position: absolute;
	width: 150px;
	height: 100%;
	background: linear-gradient(90deg, #F9F9F9 50%, #F9F9F900);
	left: 0;
	right: auto;
	top: 0;
	bottom: 0;
	z-index: 1;
}

.filter-background::before {
	right: 0;
	left: auto;
	background: linear-gradient(270deg, #F9F9F9 50%, #F9F9F900);
}

.icon-rwr {
	display: flex;
	width: 48px;
	height: 48px;
	background: #F8F8F8;
	border-radius: 100%;
	align-items: center;
	justify-content: center;
}

img.icons {
	width: 26px;
	height: 26px;
}

.icon-line {
	font-size: 15px;
	color: #f9f9f9;
	letter-spacing: 1px;
	line-height: 140%;
	font-weight: 600;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: start;
	width: auto;
	padding-left: 14px;
	text-align: left;
}

.block-wrap {
	display: flex;
	flex: none;
	background-color: #856e3d;
	border-radius: 30px;
	padding: 15px 25px 15px 15px;
}

.taglinwwrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
}

.taglinwwrap.mobile-version {
	animation: scroll2 60s linear infinite;
	flex: none;
	will-change: transform;
	transition: transform 0.1s ease-out;
}

.taglinwwrap.mobile-version.backword {
	animation: scroll2 60s linear infinite reverse;
}

@keyframes scroll2 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-100% - 0.7rem));
	}
}

.mobile-version-wrap {
	display: flex;
	gap: 0.7rem;
	width: 100%;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-behavior: smooth;
	cursor: grab;
	user-select: none;
}

.mobile-version-wrap::-webkit-scrollbar {
	display: none;
}

.mobile-version-wrap:active {
	cursor: grabbing;
}

.mobile-version-wrap:hover .taglinwwrap.mobile-version {
	animation-play-state: paused;
}

.taglinwwrap.mobile-version.backword {
	margin-top: 0;
	margin-bottom: 40px;
}

.taglinwwrap.mobile-version {
	display: flex;
}

.taglinwwrap.mobile-version.forward {
	margin-top: 30px;
	margin-bottom: 16px;
}

/* Mobile Responsive Styles */
@media only screen and (max-width: 767px) {
	.taglinwwrap {
		display: none;
	}

	img.icons {
		width: 30px;
		height: 30px;
	}

	.icon-line {
		font-size: 16px;
	}

	.filter-background::after, 
	.filter-background::before {
		content: '';
		display: none;
	}

	.block-wrap {
		padding: 10px 25px 10px 15px;
	}
}

/* Benefits Section Styles - Premium & Impressive */
.benefits-section {
	padding: 60px 0;
	background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 50%, #ffffff 100%);
	position: relative;
	overflow: hidden;
	margin-top: 80px;
}

.benefits-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(133, 110, 61, 0.3), transparent);
}

.benefits-section::after {
	content: '';
	position: absolute;
	top: -50%;
	right: -10%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(133, 110, 61, 0.08) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
	animation: float 8s ease-in-out infinite;
}

@keyframes float {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(30px); }
}

.benefits-container {
	max-width: 1420px;
	margin: auto;
	padding: 0 15px;
	position: relative;
	z-index: 1;
}

.benefits-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 35px;
	text-align: center;
}

.benefit-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 0;
	position: relative;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	cursor: pointer;
	animation: slideUp 0.7s ease-out backwards;
}

.benefit-item:nth-child(1) { animation-delay: 0.1s; }
.benefit-item:nth-child(2) { animation-delay: 0.2s; }
.benefit-item:nth-child(3) { animation-delay: 0.3s; }
.benefit-item:nth-child(4) { animation-delay: 0.4s; }

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.benefit-item:hover {
	transform: translateY(-20px);
}

.benefit-card-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 45px 30px;
	width: 100%;
	background: white;
	border-radius: 20px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	position: relative;
	overflow: visible;
	border: 1px solid rgba(255, 255, 255, 0.7);
}

.benefit-card-wrapper::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, currentColor, transparent);
	transition: width 0.5s ease;
	border-radius: 2px;
}

.benefit-item:hover .benefit-card-wrapper {
	box-shadow: 0 20px 50px rgba(133, 110, 61, 0.25);
	transform: translateY(-8px);
	border-color: rgba(133, 110, 61, 0.2);
}

.benefit-item:hover .benefit-card-wrapper::after {
	width: 80%;
}

.benefit-icon {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
	position: relative;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	color: white;
	font-size: 50px;
}

.benefit-icon::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(135deg, #856e3d, #c9a961);
	z-index: 0;
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: 0 8px 20px rgba(133, 110, 61, 0.3);
}

.benefit-icon::after {
	content: '';
	position: absolute;
	width: 110%;
	height: 110%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
	z-index: 0;
	animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.1); opacity: 0.8; }
}

.benefit-icon-1::before {
	background: linear-gradient(135deg, #3B82F6, #1E40AF);
}

.benefit-icon-1::after {
	background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
}

.benefit-icon-2::before {
	background: linear-gradient(135deg, #10B981, #059669);
}

.benefit-icon-2::after {
	background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%);
}

.benefit-icon-3::before {
	background: linear-gradient(135deg, #F59E0B, #D97706);
}

.benefit-icon-3::after {
	background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, transparent 70%);
}

.benefit-icon-4::before {
	background: linear-gradient(135deg, #8B5CF6, #6D28D9);
}

.benefit-icon-4::after {
	background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, transparent 70%);
}

.benefit-item:hover .benefit-icon {
	transform: scale(1.2) rotate(8deg);
}

.benefit-item:hover .benefit-icon::before {
	transform: scale(1.15);
	filter: brightness(1.15);
}

.benefit-item-1:hover .benefit-icon::before {
	box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
}

.benefit-item-2:hover .benefit-icon::before {
	box-shadow: 0 0 40px rgba(16, 185, 129, 0.8);
}

.benefit-item-3:hover .benefit-icon::before {
	box-shadow: 0 0 40px rgba(245, 158, 11, 0.8);
}

.benefit-item-4:hover .benefit-icon::before {
	box-shadow: 0 0 40px rgba(139, 92, 246, 0.8);
}

.benefit-icon svg {
	width: 30px;
	height: 30px;
	z-index: 1;
	position: relative;
	stroke: white;
	fill: white;
	color: white;
	stroke-width: 1.8;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
	transition: transform 0.5s ease;
}

.benefit-item:hover .benefit-icon svg {
	transform: scale(1.1);
}

.benefit-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	z-index: 1;
}

.benefit-title {
	font-size: 20px;
	font-weight: 600;
	color: #121212;
	letter-spacing: 1px;
	margin: 0;
	line-height: 1.3;
	transition: all 0.3s ease;
}

.benefit-item:hover .benefit-title {
	color: #333;
	letter-spacing: 0;
}

.benefit-description {
	font-size: 15px;
	color: #777;
	line-height: 1.6;
	margin: 0;
	letter-spacing: 1px;
	font-weight: 500;
	transition: color 0.3s ease;
}

.benefit-item:hover .benefit-description {
	color: #555;
}

.benefit-hover-line {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 4px;
	background: linear-gradient(90deg, #856e3d, #c9a961);
	transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	border-radius: 2px;
}

.benefit-item-1:hover .benefit-hover-line {
	background: linear-gradient(90deg, #3B82F6, #1E40AF);
	width: 60%;
}

.benefit-item-2:hover .benefit-hover-line {
	background: linear-gradient(90deg, #10B981, #059669);
	width: 60%;
}

.benefit-item-3:hover .benefit-hover-line {
	background: linear-gradient(90deg, #F59E0B, #D97706);
	width: 60%;
}

.benefit-item-4:hover .benefit-hover-line {
	background: linear-gradient(90deg, #8B5CF6, #6D28D9);
	width: 60%;
}

/* Responsive Design */
@media only screen and (max-width: 1024px) {
	.benefits-section {
		padding: 60px 0;
	}

	.benefits-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}

	.benefits-main-title {
		font-size: 38px;
	}

	.benefit-icon {
		width: 85px;
		height: 85px;
	}

	.benefit-icon svg {
		width: 45px;
		height: 45px;
	}

	.benefit-card-wrapper {
		padding: 35px 25px;
	}
}

@media only screen and (max-width: 768px) {
	.benefits-section {
		padding: 50px 0;
	}

	.benefits-row {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.benefits-main-title {
		font-size: 28px;
	}

	.benefits-subtitle {
		font-size: 16px;
	}

	.benefit-card-wrapper {
		padding: 30px 20px;
	}

	.benefit-icon {
		width: 75px;
		height: 75px;
		margin-bottom: 20px;
	}

	.benefit-icon svg {
		width: 40px;
		height: 40px;
	}

	.benefit-title {
		font-size: 18px;
	}

	.benefit-description {
		font-size: 14px;
	}

	.benefit-item:hover {
		transform: translateY(-12px);
	}
}

/* About Us Section Styles */
.about-image-wrapper {
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
}

.about-image-wrapper img {
	height: 500px;
	object-fit: cover;
}

.about-image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(133, 110, 61, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
}

.about-content h2 {
	font-weight: 800;
	color: #121212;
	margin-bottom: 1rem;
}

.about-underline {
	width: 80px;
	height: 5px;
	background: linear-gradient(90deg, #856e3d 0%, #c9a961 50%, #856e3d 100%);
	border-radius: 3px;
	margin-bottom: 1.5rem;
}

.about-content p {
	color: #555;
	font-weight: 500;
	line-height: 1.75;
}

.about-btn-primary {
	background: linear-gradient(135deg, #856e3d, #c9a961);
	border: none;
	color: white;
	font-weight: 600;
	border-radius: 8px;
	padding: 12px 20px;
	transition: all 0.3s ease;
	cursor: pointer;
	letter-spacing: 1px;
}

.about-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(133, 110, 61, 0.3);
}

.about-btn-secondary {
	border: 2px solid #856e3d;
	color: #856e3d;
	font-weight: 600;
	border-radius: 8px;
	background: transparent;
	padding: 12px 20px;
	transition: all 0.3s ease;
	cursor: pointer;
}

.about-btn-secondary:hover {
	background: #856e3d;
	color: white;
	transform: translateY(-2px);
}

@media only screen and (max-width: 768px) {
	.about-image-wrapper img {
		height: 350px;
	}

	.about-content h2 {
		font-size: 28px;
	}

	.about-underline {
		margin-bottom: 1rem;
	}

	.about-content p {
		font-size: 15px;
	}
}
