
  body { font-family: 'Lora', serif; background: #f7fbfe; color: #243746; margin: 0; padding: 0; }
  header { background: #e0f0ff; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; }
  header h1 { margin: 0; font-size: 24px; color: #1a3d6c; }
  nav a { color: #1a3d6c; text-decoration: none; margin-left: 20px; font-weight: 600; }
  nav a:hover { text-decoration: underline; }
  main { padding: 30px; max-width: 900px; margin: 0 auto; }
  .intro-section { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
  .intro-text { font-family: Georgia, serif; color: #506a89; font-weight: 600; font-size: 18px; letter-spacing: 1px; margin-top: 0.5em; }
  .intro-button { margin-left: -64px; }
  .message-inline-button { background-color: #1a3d6c; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 16px; display: inline-block; }
  .message-inline-button:hover { background-color: #3e5c87; }
  .tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 40px; }
  .tile { background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); padding: 30px; width: 260px; text-align: center; transition: transform 0.3s ease; }
  .tile:hover { transform: translateY(-5px); }
  .tile a { text-decoration: none; color: #1a3d6c; font-weight: bold; font-size: 18px; }
  .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
  
.modal-content {
  background-color: #f0f7fc;
  margin: 10% auto;
  padding: 30px;
  border-radius: 10px;
  width: 90%;
  max-width: 450px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
  .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
  .about-section { text-align: center; padding: 40px 20px; }
  .about-block { margin-bottom: 30px; }
  .about-block .bullet { width: 32px; height: 32px; display: block; margin: 0 auto 10px; }
  footer { text-align: center; padding: 20px 10px; background: #f0f0f0; color: #333; font-size: 14px; margin-top:40px; }
  .contact-footer p { margin: 4px 0; font-size: 16px; font-weight: 500; color: #1a3d6c; }

.modal {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4);}

.modal-content {
  background-color: #f0f7fc;
  margin: 10% auto;
  padding: 30px;
  border-radius: 10px;
  width: 90%;
  max-width: 450px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.modal-rose {width:40px; display:block; margin:0 auto 10px;}
.close {position:absolute; top:10px; right:15px; font-size:24px; cursor:pointer;}
.modal-content h2 {text-align:center; color:#1a3d6c;}
.modal-content label {display:block; margin-top:10px;}
.modal-content input, .modal-content textarea {width:100%; padding:8px; margin-top:5px;}
.modal-content button {margin-top:15px; padding:10px 20px; background:#1a3d6c; color:#fff; border:none; border-radius:5px;}


.hero {
  background: url('wintercalm.jpg') no-repeat center center/cover;
  height: 350px;
}
