/* #region init */
@font-face {
    font-family: 'playfairdisplay';
    src: url('/fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}
 
@font-face {
    font-family: 'playfairdisplay';
    src: url('/fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
}
:root { 
    --bg-footer: #1e293b;
    --text: #ffffff;
}

html, body { 
    height: 100%; 
    overflow-x: hidden;
    scrollbar-width: none;
}

body {
    display: flex;
    flex-direction: column; 
    margin: 0; 
}

main {
    flex: 1;
    text-align: center; 
} 
/* #endregion */

/* #region general */
.bannerImg {
    display: block;
    max-width: 100%;
    max-height: 100vh;
    margin: 0 auto;
}
.aboutGallery{
    display: grid;
    grid-template-columns: auto auto auto;
    overflow-x:scroll;
}
.aboutGallery img{
    max-width: 290px;

}
.box {   
    border-radius: 8px;

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); 

    margin: 0 auto;
    margin-bottom: 2rem;
}
.box.contact{
    width: 800px;   
    max-width: 95%;
}
.box iframe {
    display: block; 
    width: 100%;
}
/* #endregion */

/* #region header */
header{
    display: flex;
    flex-direction: column; 
    
    width: 100%;
    max-height: 100vh;
 
    align-items: center;

    font-family: playfairdisplay;
    margin: 16px auto;
}
header h1{
    color: #336633; 
    font-weight: 500; 
    font-size: clamp(1.25rem, 4vw, 2.5rem);
}
header img{ 
    aspect-ratio: auto;
    max-height: 40vh;
    max-width: 90%;
    margin: 0 auto;
} 
.banner{
    display: flex;
    flex-direction: column;
    gap:12px;
    align-items: center; 
} 
.banner img{
    width: clamp(1.75rem, 5vw, 3rem);
    aspect-ratio: 1/1; 
} 
.banner p{
    margin: 0;    
    font-size: clamp(1.25rem, 4vw, 2rem);
    font-weight:450;
}

.row{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap; 
    gap: 15px;
} 
/* #endregion */
/* #region button */
.share-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #2e5938; /* Matches your brand green */
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  margin: 15px auto;
}

.share-card-btn:hover {
  background-color: #23452b; /* Darker green on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.share-card-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.share-icon {
  width: 18px;
  height: 18px;
}
/* #endregion */
/* #region footer */
footer { 
    text-align: center;  
    padding: 1rem;
    background-color: var(--bg-footer);
    color: var(--text);
}

footer a {
    overflow-wrap: anywhere;
}

footer a:visited {
    color: #c084fc; /* Lightened purple for accessible contrast on dark background */
}
/* #endregion */