body {
	--default-home-page-color: #F78E1D;
	--default-products-linked-color: var(--default-font-color);
	--default-category-name-font-color: var(--default-font-color);
	--default: var(--default-home-page-color);
	background-color: #f8fafc;
	color: #1e293b;
}

/* Premium Floating Containers */
.modern-container {
	border-radius: 24px !important;
	border: 1px solid rgba(226, 232, 240, 0.8) !important;
	background: #ffffff;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
	transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	overflow: hidden;
}

.modern-container:hover {
	box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08) !important;
	border-color: rgba(226, 232, 240, 1) !important;
}

/* Intro styling */
.intro-key {
	color: var(--default-home-page-color);
	font-weight: 600;
	background: linear-gradient(120deg, rgba(247, 142, 29, 0.1) 0%, rgba(247, 142, 29, 0.02) 100%);
	padding: 0.15rem 0.4rem;
	border-radius: 6px;
}

/* Float Animation for Image */
@keyframes floatImage {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(-6px) rotate(0.5deg);
	}
	100% {
		transform: translateY(0px) rotate(0deg);
	}
}

.floating-image-wrapper {
	position: relative;
	display: inline-block;
	animation: floatImage 6s ease-in-out infinite;
	width: 100%;
	max-width: 420px;
}

.floating-image-wrapper::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 15px;
	right: -15px;
	bottom: -15px;
	background: linear-gradient(135deg, rgba(247, 142, 29, 0.15), rgba(247, 142, 29, 0.03));
	border-radius: 24px;
	z-index: -1;
	transition: all 0.4s ease;
}

.floating-image-wrapper:hover::before {
	transform: scale(1.02);
	right: -20px;
	bottom: -20px;
}

.presentation-img {
	border-radius: 24px !important;
	border: 4px solid #ffffff !important;
	box-shadow: 0 15px 30px rgba(15, 23, 42, 0.08) !important;
}

/* Services Timeline (No rigid cards, floating graphic timeline) */
.services-timeline {
	position: relative;
	padding-left: 50px;
}

.services-timeline::before {
	content: '';
	position: absolute;
	left: 21px; /* Center of the line is exactly at 22px */
	top: 10px;
	bottom: 10px;
	width: 2px;
	background: linear-gradient(180deg, var(--default-home-page-color) 0%, rgba(247, 142, 29, 0.3) 50%, #e2e8f0 100%);
}

.timeline-item {
	position: relative;
	margin-bottom: 3rem;
}

.timeline-item:last-child {
	margin-bottom: 0;
}

.timeline-icon {
	position: absolute;
	left: -50px; /* Moves left edge of icon to 0px of the parent */
	margin-left: 1px; /* Align center of the 42px icon box exactly on the 2px line center (22px) */
	top: 6px; /* Align vertically with title text */
	width: 42px;
	height: 42px;
	background: #ffffff;
	border: 2px solid #e2e8f0;
	color: #64748b;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	z-index: 2;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.02);
}

.timeline-item:hover .timeline-icon {
	border-color: var(--default-home-page-color);
	background: var(--default-home-page-color);
	color: #ffffff;
	transform: scale(1.18);
	box-shadow: 0 0 20px rgba(247, 142, 29, 0.35);
}

.timeline-content {
	padding: 0.5rem 1rem 0.5rem 1.25rem;
	transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	border-left: 3px solid transparent;
	border-radius: 0 16px 16px 0;
}

.timeline-item:hover .timeline-content {
	transform: translateX(8px);
	background-color: rgba(247, 142, 29, 0.03);
	border-left-color: var(--default-home-page-color);
}

.timeline-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 0.75rem;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.timeline-desc {
	color: #475569;
	font-size: 0.95rem;
	line-height: 1.65;
	margin-bottom: 0.75rem;
}

.timeline-link {
	color: var(--default-home-page-color);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	transition: color 0.2s ease;
	width: fit-content;
}

.timeline-link i {
	transition: transform 0.2s ease;
}

.timeline-link:hover {
	color: #d87610;
}

.timeline-link:hover i {
	transform: translateX(4px);
}

/* Brands & Badges */
.brand-badge {
	transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	font-weight: 600;
	font-size: 0.825rem;
	border: 1px solid #e2e8f0 !important;
	color: #475569 !important;
	background-color: #ffffff !important;
	padding: 0.6rem 1.2rem !important;
	box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.brand-badge:hover {
	background: linear-gradient(135deg, var(--default-home-page-color) 0%, #ffb259 100%) !important;
	border-color: transparent !important;
	color: #ffffff !important;
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 8px 16px rgba(247, 142, 29, 0.2);
}

/* Contact Section & Map styling */
.contact-icon-box {
	width: 44px;
	height: 44px;
	background-color: #f1f5f9;
	color: var(--default-home-page-color);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.contact-item:hover .contact-icon-box {
	background-color: rgba(247, 142, 29, 0.1);
	color: var(--default-home-page-color);
	transform: scale(1.05);
}

.google-maps {
	width: 100%;
	height: 100%;
	min-height: 380px;
	border: 0;
	border-radius: 20px;
	box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
	transition: all 0.4s ease;
}

.google-maps:hover {
	box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.12);
}

/* SEO Villes */
.city-badge {
	font-size: 0.775rem;
	background-color: #f8fafc;
	color: #64748b;
	border: 1px solid #e2e8f0;
	transition: all 0.2s;
	font-weight: 500;
}

.city-badge:hover {
	background-color: var(--default-home-page-color);
	border-color: var(--default-home-page-color);
	color: #ffffff;
	transform: translateY(-1px);
}