@import url('https://rsms.me/inter/inter-ui.css');

body {
	margin: 0;
	
	font-family: sans-serif;
}

  /* Evenly Distribute Navbar Components */
  .navbar-brand {
    margin-right: auto; /* Pushes the main logo to the left */
}
  .navbar {
	background: #E0DED1;
  }
     #mobilenavbar {
		background: #0000;
	}

  .navbar-nav > li{
    padding-left:125px;
    padding-right:125px;
    margin-right: 0;
    margin-left: 0;

  }

  .navbar-nav .nav-link {
    color: #283B28 !important; /* Change to any color you prefer */
 
}

.navbar-nav .nav-link:hover {
    color: #a68d41 !important; /* Change color on hover */
}

  .navbar {
    text-align: center;
    margin-right: 0;
    margin-left: 0;
  }
  
.wrapper {
	width: 900px;
	min-height: auto;
	margin: 20px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* Center the content horizontally */

}

.wrapper ul {
	list-style: none;
	padding: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* Center the list items */
}

.wrapper ul li {
	width: calc(30% - 10px);
	margin: 15px;
	height: 350px;
	background-size: cover;
	background-position: center center;
	box-shadow: 0 15px 10px 1px rgba(0, 0, 0, 0.5);
}

.wrapper {
	width: 900px;
	min-height: auto;
	margin: 20px auto;
	align-content: center;
}
.wrapper ul {
	list-style: none;
	padding: 0;
}
.wrapper ul:after {
	content: '';
	display: table;
	clear: both;
}

.wrapper ul li:nth-child(1n + 4) {
	max-height: 0;
	opacity: 0;
	transition: 0.2s ease-in;
}
.wrapper .btn-area {
	display: block;
	background: #a68d41;
	color: #fff;
	cursor: pointer;
	text-align: center;
	font-weight: 900;
	width: 180px;
	line-height: 50px;
	/* margin: 10px auto 0; */
	border-radius: 50px;
	
}
.wrapper .btn-area .btn2 {
	display: none;
}
.wrapper #btnBox {
	
	display: none;
}
.wrapper #btnBox:checked~ul li:nth-child(1n + 4) {
	max-height: 1000px;
	opacity: 1;
	transition: 0.2s ease-in;
}
.wrapper #btnBox:checked~.btn-area .btn2 {
	display: block;
}
.wrapper #btnBox:checked~.btn-area .btn1 {
	display: none;
}

@media (max-width: 768px) {
	.wrapper {
		width: 100%;
		padding: 0 10px; /* Add some padding on mobile */
	}
	.wrapper ul li {
		flex-basis: calc(50% - 20px); /* Increase size on mobile */
		margin: 10px;
		height: 400px; /* Adjust height if necessary */
		
	}
	.wrapper ul li:nth-child(1n + 3) {
		max-height: 0;
		opacity: 0;
		transition: 0.2s ease-in;
	}
	
}

@media (max-width: 480px) {
	.wrapper ul li {
		flex-basis: calc(100% - 20px); /* Make each image full-width */
		margin: 10px 0;
		height: 400px; /* Adjust height if necessary */
	}
}

@media (max-width: 480px) {
	.wrapper .btn-area {
		padding-top: -10px;
	}
}

#about {

	text-align: center;	
}

#gallery {

	background: #283B28;

}


#gallery2 ul li {
    width: 500px; /* Adjust width as needed */
    height: 200px; /* Adjust height as needed */
    background-size: cover;
    background-position: center;
    display: inline-block;
    margin: 10px; /* Adjust margin for spacing between images */
}


	#about-text{

		background:  #a68d41;
		color: #ffffff;
		
	}
	#about-text{

		padding: 50px;

	}

	#photo{
		background:#F6DAAF;
		padding: 50px;
		
	}
	
    
	#quote {
		background: #283B28;
		color: #ffffff;
	}

	#quote {
		padding: 100px;
		
	}
/* Cursor */
.cursor{
    position: relative;
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 30px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
}
/* Animation */
.typewriter-animation {
  animation: 
    typewriter 5s steps(50) 1s 1 normal both, 
    blinkingCursor 500ms steps(50) infinite normal;
}
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blinkingCursor{
  from { border-right-color: rgba(255,255,255,.75); }
  to { border-right-color: transparent; }
}

    #subscribe {
background: #E0DED1;

	}
	
	#subscribe {
		
padding: 50px;
		
			}

	.subscribe-container {
		background-color: #a68d41;
		padding: 2rem;
		/* border-radius: 0.5rem; */
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		
	}
	.subscribe-title {
		font-size: 1.5rem;
		margin-bottom: 1rem;
	}

	
	.subscribe-button {
		width: 100%;
		background-color: #283B28;
		color: white; /* Ensures text is visible */
		border: none; /* Removes any border */
		outline: none; /* Removes focus outline */
	}