@charset "UTF-8";
.title{
	font-family: "Georgia"; 
	color: #bf9b30;	
	text-align: center; 
	margin-top: 10px;
	margin-bottom: 10px;
	 
}
.sub{
	margin-top:1px; 
	margin-bottom: 10px;
	font-family: "Georgia";
	color: #887364;  
	text-align: center; 
}
.column {
    display: flex; 
    justify-content: space-between; 
    gap: 20px; 
}  .column-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.column1 {  
    text-align: center;
    padding: 10px;
    flex-grow: 1; 
}.box2{
    height:600px; 
    width:600px; 
    display: flex;
    justify-content: center; 
    align-items: center; 
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px; 
    margin-bottom:10px; 
    text-align: center; 
    border-style: double;
    border-width: 5px;
    border-color: #bf9b30
    font-family: "Georgia"; 
    color: #887364;
    box-shadow: 5px 5px 5px 2px #d6d6d6; 
    
}.bg{
	background-color: #ffe9ec;
	height: 250px;
    width:100%;
    position: sticky;
    justify-content: center;
    align-items: center;
    border-top:2px solid #bf9b30;
    border-left:2px solid #bf9b30;
    border-right:2px solid #bf9b30;
	}
.circle{
	border-radius: 70%;
	border-style: double;
	border-width: 5px;
    border-color: #bf9b30; 
    object-fit: cover;
    width: 100px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    margin-bottom: 10px;
}
.img-container {
  display: flex;
  justify-content: center;
  gap: 20px; 
  margin-top: 50px;
}
.button-container {
  display: flex;
  justify-content: center;
  gap: 80px; 
  margin-top: 25px;
}

.img-container img {
  width: 200px;
  height: auto;
  border-style: double;
  border-width: 5px;
  border-color: #bf9b30; 
}
.button{
	font-family: "Georgia"; 
    color: #887364; 
	background-color:#ffe9ec;
	cursor: pointer; 
	padding: 10px 20px;
    font-size: 1em ;
    border-radius: 12px; 
    border-style:double;
    border-width: 3px;
    border-color: #bf9b30; 
    box-shadow: 5px 5px 5px 2px #d6d6d6; 
}
.button:hover {
    background-color: #efd5d4;
    color: #8a7023; 
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #efd5d4;
    text-align: center; 
    border-bottom:2px solid #bf9b30;
    border-left:2px solid #bf9b30;
    border-right:2px solid #bf9b30;
    
}

li {
    display: inline-block;
    
}

li a {
    font-family: "Georgia"; 
    display: block; 
    color: #887364;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #bf9b30;
    color:white;
}
.box{
	height:400px; 
	width:500px; 
	display: flex;
    justify-content: center; 
    align-items: center; 
	margin-left: auto;
    margin-right: auto;
    margin-top: 50px; 
    margin-bottom:50px; 
    text-align: center; 
    border-style:double;
    border-width: 5px;
    border-color: #bf9b30;
    font-family: "Georgia"; 
    color: #887364;
    
	
}
.footer{
	font-family: "Georgia";
	color: #887364;
	background-color:#efd5d4;
	height: 150px;
    width:100%;
    display: flex;
    justify-content: center; 
    align-items: center;
    border:2px solid #bf9b30;
    text-align: center;
}
.fa-instagram {
    font-size: 30px;
    color: #c32aa3; 
    padding: 10px; 
    text-decoration: none;
  }
  .fa-instagram:hover {
    opacity: 0.7;
  }
  .box1{
    height:400px; 
    width:600px; 
    display: flex;
    justify-content: center; 
    align-items: center; 
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px; 
    margin-bottom:10px; 
    text-align: center; 
    border-style: double;
    border-width: 5px;
    border-color: #bf9b30
    font-family: "Georgia"; 
    color: #887364;
    box-shadow: 5px 5px 5px 2px #d6d6d6; 
    
}
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
    filter: blur(4px); 
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
.image-grid-container {
    display: grid; /* Defines the element as a grid container */
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */
    gap: 10px; /* Adds space (gutters) between grid items */
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block; 
}