/* Home Page Specific Styles */

/* Hero Section */
.hero {
	position: relative;
	background-color: var(--dark-bg);
	/* Placeholder background since we don't have the real image */
	background-image: url('../../assets/images/home-1.webp');
	background-size: cover;
	background-position: center;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	padding-top: 100px;
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(34, 34, 34, 0.9) 0%, rgba(34, 34, 34, 0.4) 100%);
}

.hero .container {
	position: relative;
	z-index: 2;
}

.hero-content {
	max-width: 650px;
}

.hero-subtitle {
	color: var(--primary-color);
	font-family: 'Nunito Sans', sans-serif;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 15px;
	text-transform: none;
}

.hero-title {
	color: var(--white);
	font-size: 64px;
	margin-bottom: 25px;
}

.hero-text {
	color: var(--light-gray);
	margin-bottom: 35px;
}

.hero-buttons {
	display: flex;
	gap: 15px;
}

/* About Section */
.about {
	padding: 120px 0;
}

.about .container {
	display: flex;
	align-items: center;
	gap: 80px;
}

.about-images {
	flex: 1;
	position: relative;
	padding: 30px;
	width: 100%;
}

.about-shape {
	position: absolute;
	top: 0;
	left: 0;
	width: 120px;
	height: 120px;
	background-color: var(--primary-color);
	border-radius: 4px;
	z-index: 0;
}

.img-large-placeholder {
	width: 100%;
	height: 500px;
	background-image: url('../../assets/images/home-2.webp');
	background-size: cover;
	background-position: center;
	position: relative;
	z-index: 1;
	border-radius: 4px;
}

.experience-badge {
	position: absolute;
	bottom: 0;
	border-radius: 4px;
	right: 0;
	background-color: var(--primary-color);
	color: var(--white);
	padding: 30px 25px;
	width: 270px; /* Reduced width */
	max-width: 75%;
	z-index: 2;
	box-shadow: 0 10px 30px rgba(244, 125, 53, 0.2);
}

.experience-badge .badge-number {
	font-family: 'GR Norch', sans-serif;
	font-size: 64px;
	line-height: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.experience-badge .badge-years {
	background-color: var(--white);
	color: var(--dark-gray);
	font-size: 20px;
	padding: 5px 10px;
	border-radius: 4px;
}

.experience-badge .badge-text {
	font-family: 'GR Norch', sans-serif;
	font-size: 32px;
	line-height: 1;
	margin-bottom: 15px;
}

.experience-badge p {
	font-size: 12px;
	opacity: 0.9;
	line-height: 1.4;
}

.about-text {
	flex: 1;
}

.about-description {
	margin-bottom: 40px;
}

.about-features {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.feature-item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.feature-icon {
	width: 60px;
	height: 60px;
	background-color: var(--white);
	border: 1px solid var(--text-gray);
	border-radius: 4px;
	flex-shrink: 0;
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.feature-icon svg.lucide {
	width: 35px;
	height: 35px;
}

.feature-info h4 {
	font-family: 'Nunito Sans', sans-serif;
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 10px;
	text-transform: none;
}

/* CTA Section */
.cta-section {
	background-color: var(--dark-bg);
	padding: 0;
}

.cta-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cta-text {
	flex: 1;
	padding: 100px 5% 100px 0;
}

.cta-text .section-title {
	color: var(--white);
}

.cta-text p {
	color: #bbb;
	margin-bottom: 40px;
}

.cta-image-placeholder {
	flex: 1;
	min-height: 400px;
	align-self: stretch;
	background-image: url('../../assets/images/cta-image.webp');
	background-size: cover;
	background-position: center;
}

/* Services Section */
.services {
	padding: 120px 0;
	background-color: var(--white);
}

.services .container {
	display: flex;
	gap: 60px;
}

.services-grid {
	flex: 1.2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.service-card {
	background-color: #f9f9f9;
	padding: 40px 30px;
	border-radius: 4px;
	position: relative;
	transition: all 0.3s ease;
}

.service-card.active,
.service-card:hover {
	background-color: var(--primary-color);
	color: var(--white);
}

.service-icon {
	width: 50px;
	height: 50px;
	background-color: var(--white);
	margin-bottom: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-icon svg.lucide {
	stroke: var(--primary-color);
	width: 35px;
	height: 35px;
}

.service-card.active .service-icon,
.service-card:hover .service-icon {
	background-color: rgba(255, 255, 255, 0.2);
}

.service-number {
	position: absolute;
	top: 20px;
	right: 20px;
	font-family: 'GR Norch', sans-serif;
	font-size: 48px;
	color: var(--border-color);
	line-height: 1;
}

.service-card.active .service-number,
.service-card:hover .service-number {
	color: var(--white);
}

.service-title {
	font-family: 'Nunito Sans', sans-serif;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 15px;
	text-transform: none;
}

.service-card.active .service-title,
.service-card:hover .service-title {
	color: var(--white);
}

.service-card.active .service-icon svg.lucide,
.service-card:hover .service-icon svg.lucide {
	stroke: var(--white);
}

.services-info {
	flex: 1;
}

.services-description {
	margin-bottom: 40px;
}

.progress-item {
	margin-bottom: 25px;
}

.progress-header {
	margin-bottom: 15px;
	font-weight: bold;
	color: var(--dark-gray);
}

.progress-bar {
	width: 100%;
	height: 8px;
	background-color: #f0f0f0;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	overflow: visible;
}

.progress-fill {
	height: 100%;
	background-color: var(--primary-color);
	position: relative;
}

.progress-percent {
	position: absolute;
	top: -25px;
	right: 0;
	transform: translateX(50%);
	font-weight: bold;
	color: var(--primary-color);
	font-size: 14px;
}

/* Portfolio Section */
.portfolio {
	padding: 120px 0;
	background-color: var(--dark-bg);
	background-image: radial-gradient(#333 1px, transparent 1px);
	background-size: 20px 20px;
}

.portfolio-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 50px;
}

.portfolio-title-area {
	width: 100%;
}

.portfolio-title-area .section-title {
	color: var(--white);
	margin-bottom: 0;
}

.portfolio-desc-area {
	max-width: 500px;
	color: #bbb;
}

.portfolio-grid-layout {
	display: grid;
	grid-template-columns: repeat(24, 1fr);
	gap: 30px;
}

.portfolio-item {
	background-color: #555;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

.portfolio-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: inherit;
	transition: transform 0.4s ease;
	z-index: 1;
}

.portfolio-item:hover::before {
	transform: scale(1.05);
}

.portfolio-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30px 25px 25px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
	color: var(--white);
	z-index: 2;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
}

.portfolio-caption strong {
	font-size: 18px;
	display: block;
	margin-bottom: 10px;
}

.portfolio-item.img-1 {
	grid-column: span 14;
	height: 450px;
	background-image: url('../../assets/images/portfolio-1.jpg');
	background-size: cover;
	background-position: center;
}

.portfolio-cta-box {
	grid-column: span 10;
	height: 450px;
	background-color: var(--primary-color);
	padding: 50px;
	border-radius: 4px;
	color: var(--white);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.portfolio-item.img-2 {
	grid-column: span 10;
	height: 350px;
	background-image: url('../../assets/images/portfolio-2.webp');
	background-size: cover;
	background-position: center;
}

.portfolio-item.img-3 {
	grid-column: span 14;
	height: 350px;
	background-image: url('../../assets/images/portfolio-3.jpeg');
	background-size: cover;
	background-position: center;
}

.portfolio-item.img-4 {
	grid-column: span 12;
	height: 350px;
	background-image: url('../../assets/images/portfolio-4.jpeg');
	background-size: cover;
	background-position: center;
}

.portfolio-item.img-5 {
	grid-column: span 12;
	height: 350px;
	background-image: url('../../assets/images/portfolio-5.jpeg');
	background-size: cover;
	background-position: center;
}

.portfolio-cta-box h3 {
	color: var(--white);
	font-size: 32px;
	margin-bottom: 20px;
}

.portfolio-cta-box p {
	margin-bottom: 30px;
}

/* Achievements Section */
.clients {
	padding: 100px 0;
}

.text-center {
	text-align: center;
}

.text-center .section-title {
	margin-bottom: 50px;
}

.marquee-container {
	padding: 40px 0;
}

.marquee-container-inner {
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
	position: relative;
	cursor: pointer;
	user-select: none;
}

.marquee-track {
	display: flex;
	width: max-content;
	animation: scrollMarquee 30s linear infinite;
}

.marquee-content {
	display: flex;
	align-items: center;
	gap: 100px;
	padding-right: 100px; /* Must equal gap to make seamless loop */
}

.marquee-content img {
	height: 100px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: all 0.3s ease;
	user-select: none;
	-webkit-user-drag: none;
}

.marquee-content img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

@keyframes scrollMarquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.stat-box.dark {
	background-color: var(--dark-bg);
	color: var(--white);
}

.stat-box.dark h2 {
	color: var(--white);
}

.stat-box.primary {
	background-color: var(--primary-color);
	color: var(--white);
}

.stat-box.primary h2 {
	color: var(--white);
}

/* Contact Section */
.contact-section {
	padding: 0;
	background-color: var(--dark-bg);
}

.contact-section .container {
	display: flex;
	padding: 0;
	width: 100%;
	max-width: none;
}

.contact-image-placeholder {
	flex: 1;
	background-color: #444;
	min-height: 600px;
	background-image: url('../../assets/images/faq.webp');
	background-size: cover;
	background-position: center;
}

.contact-content {
	flex: 1;
	padding: 100px 5%;
}

.contact-content .section-title {
	color: var(--white);
}

.contact-content p {
	color: #bbb;
	margin-bottom: 40px;
}

/* Form Styles */
.contact-form {
	width: 100%;
}

.contact-form .form-group {
	margin-bottom: 20px;
	position: relative;
}

.contact-form .form-row {
	display: flex;
	gap: 20px;
}

.contact-form .form-row .form-group {
	flex: 1;
}

.contact-form .form-group textarea {
	resize: none;
	height: 200px;
}

.contact-form .form-control {
	width: 100%;
	padding: 15px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--white);
	font-family: 'Nunito Sans', sans-serif;
	font-size: 16px;
	border-radius: 4px;
	transition: all 0.3s ease;
	outline: none;
}

.contact-form .form-control::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.contact-form .form-control:focus {
	border-color: var(--primary-color);
	background-color: rgba(255, 255, 255, 0.1);
}

.contact-form .form-control.error {
	border-color: #ff4d4d;
	background-color: rgba(255, 77, 77, 0.05);
}

.error-msg {
	color: #ff4d4d;
	font-size: 13px;
	position: absolute;
	bottom: -20px;
	left: 0;
	display: none;
}

.form-group.has-error .error-msg {
	display: block;
}
.form-group.has-error {
	margin-bottom: 25px; /* Give room for error text */
}

.form-response {
	margin-top: 20px;
	font-weight: bold;
}

.form-response.success {
	color: #4caf50;
}
.form-response.error {
	color: #ff4d4d;
}

.btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Responsive Overrides */
@media (max-width: 1024px) {
	.hero-title {
		font-size: 52px;
	}

	.about .container,
	.services .container {
		flex-direction: column;
	}

	.portfolio-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.about-images {
		padding: 15px 15px 30px 15px;
	}

	.img-large-placeholder {
		height: 400px;
	}

	.experience-badge {
		position: absolute;
		bottom: -15px;
		right: 5px;
		margin: 0;
		padding: 20px 20px;
		width: 240px;
	}

	.experience-badge .badge-number {
		font-size: 48px;
	}

	.experience-badge .badge-text {
		font-size: 24px;
	}

	.cta-wrapper {
		flex-direction: column;
	}

	.cta-text {
		padding: 60px 0 30px 0;
	}

	.cta-image-placeholder {
		width: 100%;
		height: 350px;
		min-height: 400px;
	}

	.contact-section .container {
		flex-direction: column;
	}

	.portfolio-grid-layout {
		grid-template-columns: 1fr;
	}
	.portfolio-cta-box {
		height: auto;
		padding: 60px 30px;
	}

	.portfolio-item,
	.portfolio-cta-box {
		grid-column: 1 / -1 !important;
	}
}

@media (max-width: 768px) {
	.hero-title {
		font-size: 40px;
	}

	.hero-title,
	.hero-subtitle,
	.hero-text {
		text-align: center;
	}

	.hero-subtitle {
		display: block;
	}

	.hero-buttons {
		justify-content: center;
	}

	.btn-container {
		text-align: center;
	}

	.form-response {
		text-align: center;
	}

	.stats-grid {
		grid-template-columns: 1fr;
	}

	.contact-form .form-row {
		flex-direction: column;
		gap: 0;
	}

	.services .container {
		flex-flow: column-reverse;
	}

	.services-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 500px) {
	.hero-buttons {
		flex-direction: column;
	}
}

@media (max-width: 414px) {
	.portfolio-cta-box {
		height: auto;
	}
}