/* Responsive Navigation */
@media (max-width: 768px) {
	
	.nav-menu {
		position: fixed;
		top: 60px;
		right: -100%;
		width: 200px;
		background: #ffd046;
		height: calc(100% - 60px);
		flex-direction: column;
		padding: 20px;
		transition: right 0.3s;
	}

	.nav-menu.active {
		right: 0;
	 }
	 
	.nav-menu li {
		margin: 15px 0;
	}

	.menu-toggle {
		display: flex;
	}

	/* Hero Section */
	
	.hero {
		padding: 0 10px;
	}

	.hero-content {
		width: 90%;
	}
	
	.hero-content h1 {
		font-size: 2rem;
	}

	.hero-content p {
		padding: 0;
	}

	/* Responsive behavior: stack columns vertically on narrower screens */
	
	.about-services {
		padding: 20px 0;
	}
	
	.about-container {
		gap: 20px;
	}

	.about-text h2 {
		font-size: 2rem;
		text-align: left;
	}

	.about-image .btn {
		padding: 10px 2rem;
	}
	
	/* Flexbox grid container */
	
	.custom-grid {
		padding: 0 1px;
		display: flex;
		gap: 10px;
		margin: 0px 0;  /* Adjust vertical spacing as needed */
	}

	/* Left column takes up more space */
	
	.column-left {
		display: block;
		margin: 0 20px;
	}

	/* Right column takes less space and stacks images vertically */
	
	.column-right {
		display: none;
	}

	/* Make images responsive */
	
	.custom-grid img {
		width: 100%;
		height: auto;
	}	

	/*Carousel text-overlay for medium screens */
	
	.slide-text h2 {
		font-size: 1.5rem;
	}
	
	.slide-text p {
		font-size: 1rem;
	}
	
	.carousel-dots .dot {
		width: auto;
	}
}

/* Media Query: For small screens, display text below the image */

@media (max-width: 600px) {
	
	.about-container {
		gap: 0px;
	}
	
	.about-text h2 {
		text-align: center;
		padding: 10px 20px;
	}
	
	.about-image p {
		text-align: center;
	}
	
	.portfolio {
		padding: 40px 10px;
	}
	
	.portfolio h2 {
		font-size: 1.5rem;
	}
	
    .carousel {
		max-width: 800px;
		margin: 40px auto;
		overflow: hidden;
		position: relative;
		border-radius: 8px;
    }
	
	.carousel h2 {
		color: #ffd046;
	}
	
    /* Each slide is a flex container with vertical stacking */
    .carousel-slide {
      display: none;
      flex-direction: column;
      text-align: center;
    }
	
    .carousel-slide.active {
		display: flex;
		animation: fadeIn 1s ease-in-out;
    }
	
    .carousel-slide img {
		width: 100%;
		display: block;
    }

	.slide-text {
		position: relative;
		top: auto;
		left: auto;
		transform: translate(0, 0%);
		z-index: 0;
		padding: 20px 5px 50px 5px;
		color: #000;
		text-align: center;
		background: none;
	}
  	
	.slide-text h2 {
		font-size: 1.5rem;
	}
	
	.slide-text p {
		font-size: 0.9rem;
	}
	
	.carousel-controls button {
		display: none;
	}
	
	.carousel-dots .dot {
		margin: 5px 5px;
	}
}