body {  
  font-family: 'Segoe UI', Arial, sans-serif;  
  background: #FFF8E8;           
  color: #422616;                
  margin: 0;  
  padding: 0;  
}  
   
header {  
  background: #84994F;       
  color: #fff;  
  padding: 1.3em 1em 1em 1em;  
  border-bottom: 3px solid #FCB53B;  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
}  
  
header h1 {  
  color: #7d4220; 
  text-shadow: 0 2px 2px #51671b;               
  margin: 0;  
  font-size: 2.3em;  
  font-weight: 900;  
  letter-spacing: 0.03em;    
}  
  
nav {  
  background: none;  
  text-align: right;  
  padding: 0.3em 0;  
  box-shadow: none;  
}  
  
nav a {  
  color: #7d4220;  
  margin: 0 1em;  
  text-decoration: none;  
  border-radius: 6px;  
  padding: 0.25em 0.75em;  
  font-weight: 600;  
  letter-spacing: 0.03em;  
  background: transparent;  
  transition: background .22s, color .21s, box-shadow .2s;  
}  
  
nav a.active,  
nav a:hover {  
  background: #FCB53B;  
  color: #cc7906;  
  box-shadow: 0 2px 8px #f08b5120;  
  text-decoration: underline;  
}  
  
 
main {  
  max-width: 900px;  
  margin: 2em auto;  
  background: #DEE8CE;            
  padding: 2.4em 2.6em;  
  border-radius: 14px;  
  border: 2px solid #FCB53B;  
  box-shadow: 0 4px 24px #f08b5120;  
  min-height: 60vh;  
  transition: box-shadow .3s;  
}  
  
main:hover {  
  box-shadow: 0 8px 36px #bb665340;  
}  
  

  
h2 {  
  color: #7d4220;
    text-shadow: 0 2px 3px #51671b98;                
  border-bottom: 2px solid #FCB53B;  
  padding-bottom: 0.15em;  
  font-size: 1.5em;  
  margin-top: 0.5em;  
  margin-bottom: 0.7em;  
  letter-spacing: 0.05em;  
}  
  
section {  
  margin-bottom: 2.5em;  
  border-bottom: 1px solid #FCB53B;  
  padding-bottom: 1.2em;  
}  
  
 
.img-placeholder, .calendar-embed {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  width: 100%;  
  min-height: 160px;  
  background: #fff;  
  border: 2px dashed #FCB53B;  
  margin: 1em 0;  
  text-align: center;  
  color: #BB6653;  
  font-size: 1.15em;  
  border-radius: 14px;  
  box-shadow: 0 2px 8px #f08b5120;  
  transition: background .18s;  
}  
  
.img-placeholder:hover, .calendar-embed:hover {  
  background: #FFE2C7;  
  color: #F08B51;  
}  
  
 
.gallery {  
  display: flex;  
  gap: 1em;  
  flex-wrap: wrap;  
}  
  
.gallery .img-placeholder, .gallery img, .gallery > div {  
  flex: 1 1 200px;  
  min-width: 150px;  
  max-width: 250px;  
  border-radius: 14px;  
}  
  
  
footer {  
  text-align: center;  
  font-size: 1em;  
  margin-top: 2em;  
  background: #84994F;  
  color: #7d4220;  
  border-top: 2px solid #FCB53B;  
  letter-spacing: 0.04em;  
  padding-bottom: 1.2em;  
}  
  

@keyframes fadeInUp {  
  from { opacity: 0; transform: translateY(24px);}  
  to { opacity: 1; transform: translateY(0);}  
}  
main, section, .img-placeholder, .calendar-embed {  
  animation: fadeInUp 0.7s cubic-bezier(.61,1.43,.54,.97) 1;  
}  
  
 
@media (max-width: 700px) {  
  main {  
    padding: 1.2em 1em;  
  }  
  .gallery {  
    flex-direction: column;  
    gap: 0.7em;  
  }  
}  

.center-img {  
  content:center;
}  











img {  
  border-radius: 8px;  
  box-shadow: 0 2px 12px #c7602a22;  
  transition: transform 0.3s, box-shadow 0.3s;  
}  
img:hover {  
  transform: scale(1.04) rotate(-1.5deg);  
  box-shadow: 0 8px 28px #c7602a66;  
}  


section {  
  opacity: 0;  
  transform: translateY(30px);  
  animation: fadein-section 0.7s ease-in forwards;  
  animation-delay: 0.2s;  
}  
@keyframes fadein-section {  
  to { opacity: 1; transform: none; }  
}