@charset "UTF-8";
/* CSS Document */
		.h3,h4,h5 {
			color: white;
		}
		.navbar {
            position: sticky;
            top: 0;
            z-index: 1000;
            background-color: #fff;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        }
        .hero {
            background-color: #f4f4f4; /* Change this to your desired hex code */
            padding: 100px 0;
        }
        .hero h1 {
            font-size: 4rem;
            font-weight: 800;
        }
        .hero p {
            font-size: 2rem;
        }
		@media (max-width: 767px) {
			.hero {
				padding-top: 50px; /* Reduce the top padding for mobile */
			}

			.hero h1 {
				font-size: 3rem; /* Dynamic font size for smaller screens */
			}

			.hero p {
				font-size: 2rem; /* Dynamic font size for smaller screens */
			}
		}
		.btn {
            padding-left: 30px;
            padding-right: 30px;
            padding-top: 15px;
            padding-bottom: 15px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            transition: all 0.3s ease-in-out;
        }
		.section-heading {
			text-transform: uppercase;
			text-align: center;
			color: white;
			margin-bottom: 30px;
		}
		.section-subheading{
			text-align: center;
			color: white;
			margin-bottom: 50px;
		}
		.service-section {
            text-align: center;
            padding: 80px 0;
        }
        .service-section .row {
            justify-content: center;
			gap: 40px 0;
        }
        .service-section .col-md-4 {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
		.card {
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		}
		.card-body {
			padding-top: 2rem;
			padding-bottom: 3rem;
		}
		.carousel-control-prev-icon,
		.carousel-control-next-icon {
		  background-color: black;  /* Set background color to white */
		  border-radius: 50%;  /* Make the arrow icon circular */
		  width: 40px;  /* Set a fixed width for the circle */
		  height: 40px;  /* Set a fixed height for the circle */
		}

		.portfolio-img {
		  width: 100%;
		  height: 50vh;
		  object-fit: contain;
		  cursor: pointer;
		}

		#portfolio .card {
		  max-width: 400px;
		  margin: auto;
		}

		#portfolio .card img {
		  max-height: 300px;
		  object-fit: contain;
		}

		.modal-body img {
		  width: 100%;
		  max-height: 80vh;
		  object-fit: contain; /* Keep the aspect ratio of the image */
		}
		.modal-dialog {
		  max-width: 80% !important; /* Set the modal width to 80% of the screen */
		}
		@media (max-width: 1050px) {
		  .category-btn {
			font-size: 0.9rem;  /* Smaller font size */
			padding: 0.5rem 1rem;  /* Adjust padding */
		  }
		}
		footer {
			background-color: #343a40; /* Dark background */
		}

		footer a {
			font-size: 1.2rem; /* Adjust text size */
		}