:root { --pastel-red:#FFB3BA; --pastel-green:#BAFFC9; --pastel-blue:#259f89; --text-primary:#333; --text-light:#f4f4f4; }
@font-face {
    font-family:'MasonRegular'; /* This is the logical name */
    src:url('masonregular.ttf') format('truetype'); 
    font-weight:normal;
    font-style:normal;
}
/* Apply the font to your site */
body, html { margin:0; padding:0; font-family:'Helvetica Neue', Arial, sans-serif; color:var(--text-primary); overflow-x:hidden; }
.background-image { position:fixed; top:0; left:0; width:100%; height:100%; background-image:url('backgroundimage.webp'); background-size:cover; background-position:center; background-repeat:no-repeat; z-index:-2; }
/* .modal { position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.7); display:flex; justify-content:center; align-items:center; } */
/* .modal-content { background-color:white; padding:20px; border-radius:10px; text-align:center; } */
/* nav a { text-decoration:none; color:#333; padding:10px 15px; font-weight:bold; transition:color 0.3s ease, text-decoration 0.3s ease; } */
/* nav a:hover { color:#555; text-decoration:underline; } */
body,html { position:fixed; top:0; left:0; width:100%; height:100%; background-image:url('backgroundimage.webp'); background-size:cover; background-position:center; background-repeat:no-repeat; z-index:-2; }
.modal { position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7); display:none; justify-content:center; align-items:center; }
.modal-content { background-color:white; padding:20px; border-radius:10px; text-align:center; }


header { position:relative; top:0; width:100%; background:none; /* rgba(255,255,255,0.1); */ z-index:100; /* backdrop-filter:blur(5px); */ }
#hero { position:relative; height:100vh; display:block; align-items:top; justify-content:top; /*overflow:hidden; */ }
.hero-content { position:relative; z-index:10; text-align:center; width:100%; }
.logo { font-family:'MasonRegular', serif; text-align:center; font-size:3.5rem; color:rgba(30, 112, 98, 0.85);  display:block; }
.logo span { font-family:'MasonRegular', serif; text-align:center; font-size:3.5rem; color:rgba(30, 112, 98, 0.85); 
    /* Enhanced ghostly shadow */
    text-shadow:0 0 20px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 0.95), 0 0 5px rgba(255, 255, 255, 0.8), 2px 2px 3px rgba(255,0,64,1); 
    opacity:0.95;
    display:inline-block;
}
.ethereal-tagline { font-family:'Cormorant Garamond', serif; color:white; font-size:2.5rem; font-weight:300; text-shadow:0 0 15px rgba(0,0,0,0.5); opacity:0.9; letter-spacing:1px; max-width:800px; margin:0 auto 0 auto; padding:0 20px; }
.lifeisshort { font-family:'MasonRegular', serif; text-align:center; font-size:1.5rem; /* Adjust font size */ color:rgba(255, 255, 255, 0.85); opacity:0; /* Initially hidden for animation */ }

.misty-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient( rgba(255,255,255,0.1), rgba(200,200,255,0.05)); backdrop-filter:blur(3px); z-index:1; }



section { /* padding:5px 10%; */ text-align:center; position:relative; width:100%; margin:0px auto; /*background:rgba(255,255,255,0.7); backdrop-filter:blur(5px); */ }
.gallery { display:flex; flex-wrap:wrap; justify-content:space-around; align-items:flex-start; padding:20px 0; /* border:3px solid darkgreen; */ }
.gallery-item { display:flex; flex-direction:column; align-items:center; margin:15px; text-align:center; position:relative; margin-bottom:50px; /* border:3px solid magenta; */ }
.image-wrapper { flex:1; position:relative; border-radius:8px; /*overflow:hidden; */ text-align:center; /* border:5px solid blue; */ }
.image-wrapper img { display:block; width:100%; height:auto; border-radius:8px; box-shadow:0 4px 8px rgba(0, 0, 0, 0.2); }
.cta-button { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); background-color:var(--pastel-blue);
    color:white; text-decoration:none; padding:10px 20px; border-radius:5px; font-weight:bold; box-shadow:0 4px 6px rgba(0, 0, 0, 0.1);
    transition:transform 0.3s ease, box-shadow 0.3s ease; font-family:'MasonRegular', serif;
}
.cta-button:hover { transform:translateX(-50%) scale(1.1); box-shadow:0 6px 10px rgba(0, 0, 0, 0.2); }
.supportive-text { margin-top:10px; font-size:0.88rem; color:#FFFFFF; background-color:#FFFFFF11; border-radius:9px; padding:8px; line-height:1.4; text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
footer { position:fixed; bottom:0; background-color:rgba(255, 255, 255, 0.7); padding:20px; text-align:center; backdrop-filter:blur(5px); width:100vw; overflow:none; }
@media (max-width:768px) {
    .logo { font-size:1.8rem; text-align:center; word-break:break-word; }
    /* .gallery-item { flex:1 0 100%; max-width:100%; } */
    .gallery-item { flex:1 0 100%; max-width:100%; margin:0px; }
    .image-wrapper img { margin:10px auto; max-width:100%; height:auto; display:block;  }
    .cta-button { position:static; margin:10px auto; transform:none; }
    .supportive-text { position:static; margin:10px auto; text-align:center; }
    .image-wrapper img {
        max-width:min(418px, 90vw)!important;
        max-height:min(279px, 90vh)!important;
        width:auto!important; /* Maintains aspect ratio */
        height:auto!important; /* Ensures proportional scaling */
        display:block!important;
        margin:0 auto;
    }
    footer { padding:8px 2px; }

}
@media (max-width:480px) {
    .logo { font-size:1.5rem; }
    .supportive-text { font-size:0.85rem; padding:6px 8px; }
}