/* Base styles */
:root {
	--primary-color: #9db200;
	--primary-dark: #8b8b0d;
	--text-color: #213547;
	--bg-color: #000000;
	--gray-100: #d3d6da;
	--gray-700: #374151;
	--gray-750: #2c2c2c;
	--gray-800: #1f2937;
	--gray-900: #111827;
	--green-900: #071e00;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: Inter, system-ui, -apple-system, sans-serif;
	line-height: 1.5;
	/* color: var(--text-color); */
	color: #ffffff;
	background-color: var(--bg-color);
}

.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* Header */
header {
	background-color: var(--green-900);
	padding: 1rem 0;
	position: fixed;
	width: 100%;
	z-index: 10;
}

header h1 {
	color: white;
	/* font-size: 1.5rem; */
	font-weight: bold;
	text-align: center;
}

h2 {
	font-family: "Staatliches";
}

/* Hero Section */
.hero {
	/* background: linear-gradient(to right, var(--primary-color), #737800); */
	padding: 8rem 0 4rem;
	color: rgb(255 255 255);
	height: 100vh; /* Section will be 80% of the viewport height */
	padding: 20px;
	background-image: url('./images/bg1.jpg'); /* Replace with your image path */
	background-size: cover; /* Ensures the background image covers the section */
	background-position: center center; /* Center the image */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	display: flex;
	overflow-y: auto; /* Allow section content to scroll if needed */
	align-items: center; /* Center content vertically */
	scroll-snap-align: start; /* Ensure section snaps into view */
}

.hero-content {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}


.overlay1 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    background: rgb(67 67 67 / 78%);
    display: flex;
    align-items: center;
    justify-content: center;
    /* color: #cdcdcd; */
    padding: 20px;
    flex-direction: column;
  }

  .hero h2 {
	font-size: 2.5rem;
	font-weight: bold;
	margin-bottom: 1rem;
}

@media (min-width: 768px) {
	.hero-content {
		flex-direction: row;
		align-items: center;
	}

	.hero-text,
	.hero-image {
		width: 50%;
	}
	

	.hero h2 {
		font-size: 4rem;
	}
}

.hero p {
	font-size: 1.25rem;
	margin-bottom: 1.5rem;
}

.button-group {
	display: flex;
	gap: 1rem;
}

/* Buttons */
.btn {
	padding: 0.5rem 1rem;
	font-weight: bold;
	border-radius: 0.375rem;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
}

.btn-primary {
	background-color: white;
	color: var(--primary-color);
	border: none;
}

.btn-primary:hover {
	background-color: var(--gray-100);
}

.btn-outline {
	background-color: transparent;
	color: white;
	border: 2px solid white;
}

.btn-outline:hover {
	background-color: white;
	color: var(--primary-color);
}



/* About Section */
.about {
	position: relative;
	height: 100vh; /* Section will be 80% of the viewport height */
	background-image: url('./images/hand.jpg'); /* Replace with your image path */
	background-size: cover; /* Ensures the background image covers the section */
	background-position: center center; /* Center the image */
	background-color: #f3f4f6;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center; /* Vertically align text */
	align-items: center; /* Center content vertically */
	overflow-y: auto; /* Allow section content to scroll if needed */
	scroll-snap-align: start; /* Ensure section snaps into view */
}

.about-content {
	text-align: center;
	font-size: 1.6em;
	line-height: 1.5;
	margin-bottom: 1em;
	font-weight: 700;
}


.overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    background: rgb(0 0 0 / 56%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    padding: 20px;
    flex-direction: column;
  }

/* Industries Section */
.industries {
	padding: 4rem 0;
}

.industries h2,
.pricing h2,
.contact h2 {
	font-size: 1.875rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 3rem;
}

.industries-content {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

@media (min-width: 768px) {
	.industries-content {
		flex-direction: row;
	}

	.industries-list,
	.industries-image {
		width: 50%;
	}
}

.industries-list li {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	font-size: 1.125rem;
}

.icon {
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 0.5rem;
	fill: none;
	stroke: var(--primary-color);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Pricing Section */
.pricing {
	padding: 4rem 0;
	background-color: var(--gray-750);
}

.pricing-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.pricing-card {
	background-color: var(--bg-color);
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.pricing-card.featured {
	border: 2px solid var(--primary-color);
}

.card-content {
	padding: 2rem;
}

.pricing-card h3 {
	font-size: 1.25rem;
	font-weight: bold;
	margin-bottom: 1rem;
}

.pricing-card img {
	width: 100%;
	height: 10rem;
	object-fit: cover;
	border-radius: 0.5rem;
	margin-bottom: 1rem;
}

.price {
	font-size: 1.875rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
}

.unit {
	color: var(--gray-100);
	margin-bottom: 1.5rem;
}

.pricing-card ul {
	margin-bottom: 1.5rem;
	list-style: none;
}

.pricing-card li {
	display: flex;
	align-items: center;
	margin-bottom: 0.5rem;
}

/* Contact Section */
.contact {
	padding: 4rem 0;
	background-color: var(--gray-900);
	color: white;
}

.contact-content {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

@media (min-width: 768px) {
	.contact-content {
		flex-direction: row;
	}

	.contact-info,
	.contact-form {
		width: 50%;
	}
}

.contact-info h3 {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 1rem;
}

.contact-info p {
	margin-bottom: 0.5rem;
}

.social-links {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
}

.social-link {
	color: white;
	transition: color 0.3s ease;
}

.social-link:hover {
	color: var(--primary-color);
}

.contact-form {
	background-color: white;
	padding: 2rem;
	border-radius: 0.5rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-group {
	margin-bottom: 1rem;
}

.form-group label {
	display: block;
	color: var(--gray-700);
	font-weight: bold;
	margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
	width: 100%;
	padding: 0.5rem;
	border: 1px solid #d1d5db;
	border-radius: 0.375rem;
	transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.2);
}

/* Footer */
footer {
	background-color: var(--gray-800);
	color: white;
	padding: 2rem 0;
	text-align: center;
}

/* Animations */
.fade-in {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsive images */
img {
	max-width: 100%;
	height: auto;
	border-radius: 0.5rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Button styles */
.btn {
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 1rem;
	letter-spacing: 0.025em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
}

.btn-primary {
	background-color: var(--primary-color);
	color: white;
	transition: all 0.3s ease;
}

.btn-primary:hover {
	background-color: var(--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(100, 108, 255, 0.3);
}

.btn-outline {
	background-color: transparent;
	color: white;
	border: 2px solid white;
}

.btn-outline:hover {
	background-color: white;
	color: var(--primary-color);
	transform: translateY(-1px);
}

/* Card button specific styles */
.pricing-card .btn-primary {
	background-color: var(--primary-color);
	color: white;
	width: 100%;
	transition: all 0.3s ease;
}

.pricing-card .btn-primary:hover {
	background-color: var(--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(100, 108, 255, 0.3);
}

/* Form submit button specific styles */
.contact-form .btn-primary {
	background-color: var(--primary-color);
	color: white;
	width: 100%;
	margin-top: 1rem;
}

.contact-form .btn-primary:hover {
	background-color: var(--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(100, 108, 255, 0.3);
}

/* Social media icons */
.social-links {
	display: flex;
	gap: 2rem;
	margin-top: 2rem;
}

.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(4px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 2px solid rgba(255, 255, 255, 0.1);
}

.social-link:hover {
	transform: translateY(-4px);
	background: var(--primary-color);
	border-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(100, 108, 255, 0.15);
}

.social-link img.icon {
	width: 24px;
	height: 24px;
	transition: all 0.3s ease;
	filter: brightness(0) invert(1);
	opacity: 0.9;
	margin-left: 8px;
}

.social-link:hover img.icon {
	opacity: 1;
	transform: scale(1.1);
}

/* Floating WhatsApp Icon */
#whatsapp-icon {
	position: fixed;
	bottom: 20px;      /* Adjust position from bottom */
	right: 20px;       /* Adjust position from right */
	z-index: 9999;     /* Ensure the icon is on top of other elements */
	border-radius: 50%;
	padding: 10px;
	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
  }
  
  #whatsapp-icon img {
	width: 60px;    /* Adjust size of icon */
	height: 60px;   /* Adjust size of icon */
	border-radius: 50%;  /* Make icon round */
  }
  
  /* Optional hover effect */
  #whatsapp-icon:hover {
  }
  
  
  #whatsapp-icon img:hover {
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
  }