/* General Layout */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: Arial, sans-serif;
		}

		html, body {
			background-color: #f4f4f4;
			color: #333;
			
		}

		a {
			text-decoration: none;
		}

		/* Header Styling */
		header {
			display: flex;
			justify-content: space-between;
			padding: 20px 40px 10px 40px;
			background-color: #f7f7f7;
			color: #fff;
		}

		header .logo img {
			height: 70px;
		}

		nav ul {
			list-style: none;
			display: flex;
			margin-top: 16px;
		}

		nav ul li {
			margin-left: 20px;
		}

		nav ul li a {
			color: #1874cd;
			text-decoration: none;
			font-weight: bold;
		}



		/* Flickering Text */

			.flicker {
			  font-size: 2em;
			  color: #fff;
			  background: #000;
			  padding: 20px;
			  text-align: center;
			  animation: flicker 1.5s infinite alternate;
			}

			@keyframes flicker {
			  0%   { opacity: 1; }
			  10%  { opacity: 0.7; }
			  20%  { opacity: 0.5; }
			  30%  { opacity: 1; }
			  40%  { opacity: 0.6; }
			  50%  { opacity: 1; }
			  60%  { opacity: 0.3; }
			  70%  { opacity: 1; }
			  80%  { opacity: 0.4; }
			  90%  { opacity: 0.9; }
			  100% { opacity: 1; }
			}






		/* Utility Container */
		.container { 
		  width: 90%; 
		  max-width: 1200px; 
		  margin: 0 auto; 
		}

		.cta2 {
			background-color: #1f1f1f;
			color: #ababab;
			letter-spacing: 1.2px;
			width: 100%;
			max-width: 100%; 
			padding: 16px 30px;
			text-align: center;
			

		}

		/* Hero Section Styling */
		.hero {
			background-color: #2c3e50;
			background-image: url('./images/banner-65-a.jpg');
			background-size: cover;    /* Ensures the image covers the entire div */
			background-position: center center; /* Centers the image within the div */
			background-repeat: no-repeat; /* Prevents the image from repeating */
			width: 100%; /* Full width */
			max-height: 80%;  Adjust height as needed */
			min-height: 60%;
			
			
			
			color: #fff; /* Text color */
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			color: #fff;
			padding: 80px 20px;
			text-align: center;
		}





			/* Content above the overlay */
			.hero {
			  position: relative;
			  z-index: 2;
			}


			/* Overlay layer */
			.hero::before {
			  content: "";
			  position: absolute;
			  top: 0; left: 0;
			  width: 100%;
			  height: 100%;
			  background: rgba(0, 0, 0, 0.25); /* Semi-transparent black */
			  z-index: 1;
			}




		.hero h1 {
			font-size: 3em;
		}

		.hero p {
			font-size: 1.2em;
			margin: 20px 0;
		}

		.cta-button {
			background-color: #e74c3c;
			padding: 15px 30px;
			text-decoration: none;
			color: #fff;
			font-weight: bold;
			border-radius: 5px;
		}

		.cta-button:hover {
			background-color: #c0392b;
		}



		/* Services Section Styling */


		.services {
			padding: 60px 20px 80px 20px;
			text-align: center;
			background-color: #fff;
		}

		.services h2 {
			font-size: 2.5em;
			margin-bottom: 40px;
		}

		.service-cards {
			display: flex;
			justify-content: space-around;
			gap: 20px;
		}

		.card {
			background-color: #ecf0f1;
			padding: 20px;
			border-radius: 8px;
			width: 30%;
			text-align: center;
		}

		.card img {
			max-width: 100%;
			height: auto;
			border-radius: 5px;
		}

		.card h3 {
			font-size: 1.8em;
			margin-top: 20px;
		}

		.card p {
			font-size: 1em;
			margin-top: 10px;
		}

		.card a {
			text-decoration: none;
			color: #e74c3c;
			font-weight: bold;
			margin-top: 15px;
			display: inline-block;
		}

		.card a:hover {
			text-decoration: underline;
		}




		/* Security Section Styling */
		.sec {
			background-color: #2c3e50;
			background-image: url('./images/security-camera-2.jpg');
			background-size: cover;    /* Ensures the image covers the entire div */
			height: 800px;  /* enable scrolling background */
			background-position: center center; /* Centers the image within the div */
			background-repeat: no-repeat; /* Prevents the image from repeating */
			background-attachment: fixed;
			width: 100%; /* Full width */
			
			
			
			
			
			color: #fff; /* Text color */
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			color: #fff;
			padding: 80px 20px;
			text-align: center;
		}





			/* Content above the overlay */
			.sec {
			  position: relative;
			  z-index: 2;
			}


			/* Overlay layer */
			.sec::before {
			  content: "";
			  position: absolute;
			  top: 0; left: 0;
			  width: 100%;
			  height: 100%;
			  background: rgba(0, 0, 0, 0.75); /* Semi-transparent black */
			  z-index: 1;
			}




		.sec h1 {
			font-size: 3em;
		}

		.sec p {
			font-size: 1.1em;
			margin: 20px 0;
		}


 


		/* About Section */
		.about { 
		  background: #f4f4f4; 
		  padding: 4rem 0; 
		}

		.about-content { 
		  display: flex; 
		  gap: 3rem; 
		  align-items: center; 
		}

		.about-text { 
		  flex: 1; 
		}

		.about-text h3 { 
		  font-size: 2rem; 
		  margin-bottom: 1rem; 
		}

		.about-text p { 
		  font-size: 1rem; 
		  line-height: 1.3; 
		  color: #222; 
		}

		.about-image { 
		  flex: 1; 
		}

		.about-image img { 
		  width: 100%; 
		  border-radius: 8px; 
		}






		/* Footer Section Styling */
		footer {
			background-color: #333;
			color: #fff;
			text-align: center;
			padding: 10px;
			margin-top: 2rem;
		}

		footer .social-links {
			margin-top: 4px;
		}

		footer .social-links a {
			color: #acacac;
			text-decoration: none;
			margin: 0 4px;
			font-weight: normal;
			font-size: 16px;
		}

		footer .social-links a:hover {
			color: #c4c4c4;
		}



		/* Mobile View (Stack Services on top of each other) */
		@media (max-width: 768px) {
			.service-cards {
				flex-direction: column;
				align-items: center;
			}

			.card {
				width: 80%; /* Make the cards bigger on mobile */
				margin-bottom: 20px; /* Add some spacing between cards */
			}

			.hero h1 {
				font-size: 2em; /* Make hero heading smaller */
			}

			.hero p {
				font-size: 1.1em; /* Adjust text size for mobile */
			}

			.cta-button {
				padding: 12px 24px; /* Make button a little smaller */
			}
		}





		/* Mobile View (Stack About Us text and image) */
		@media (max-width: 768px) {
			.about-content {
				flex-direction: column;
				align-items: center;
			}

			.about-text {
				width: 80%; /* Make the cards bigger on mobile */
				margin-bottom: 20px; /* Add some spacing between cards */
			}

		}