/* Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Arima';
    src: url('../Content/fonts/ArimaMadurai-Black.woff') format('woff'), url('../Content/fonts/ArimaMadurai-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Nunito', sans-serif;
    color: #4a1c1c;
    background-color: #ffffff;
    line-height: 1.6;
}

/* Hero */
.hero-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Sections */
.section {
    padding: 80px 7%;
}

/* Section Headings */
.section-heading {
    position: relative;
    margin-bottom: 60px;
    padding-left: 100px;
    /*    padding-top: 30px;*/
}

    .section-heading h2 {
        font-family: 'Arima', serif;
        font-size: 3rem;
        color: #6b1a1a;
        position: relative;
        z-index: 2;
    }

.heading-ornament {
    position: absolute;
    top: -30px;
    left: -10px;
    width: 250px;
    opacity: 0.20;
    pointer-events: none;
}


/* Events */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

    .events-grid img {
        width: 100%;
        border-radius: 6px;
    }

.events-link {
    margin-top: 30px;
    text-align: center;
}

    .events-link a {
        color: #6b1a1a;
        text-decoration: none;
        font-weight: 500;
    }


* Grid layout (keep or adjust as needed) */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

/* Event container */
.event-card {
    position: relative;
    overflow: hidden;
}

    /* Image styling */
    .event-card img {
        width: 100%;
        height: auto;
        display: block;
        /* Gentle toning */
        filter: saturate(50%);
        transition: filter 0.3s ease;
    }

    /* Overlay */
    .event-card .overlay {
        position: absolute;
        inset: 0;
        /* Warm saffron / rose tone */
        background: rgba(196, 95, 57, 0.18);
        pointer-events: none;
        transition: background 0.3s ease;
    }

    /* Interaction: restore colour */
    .event-card:hover img {
        filter: saturate(100%);
    }

    .event-card:hover .overlay {
        background: rgba(196, 95, 57, 0);
    }


/* Connect Section */
.connect-section {
    background-color: #faf7f4;
}

.connect-intro {
    max-width: 700px;
    margin-bottom: 50px;
}

.connect-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-details h3 {
    font-family: 'Playfair Display', serif;
    margin-top: 20px;
    margin-bottom: 10px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    font-family: inherit;
}
.btn-siva {
    background: linear-gradient( 180deg, #6e0f12 0%, #8b1a1a 100% );
    color: #ffffff;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 0.6rem 1.6rem;
    border-radius: 999px;
    border: none;
    /* Neutral soft grey shadow (not maroon) */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, font-weight 0.2s ease;
}


.btn-siva:hover,
    .btn-siva:focus {
        background: linear-gradient( 180deg, #7a1416 0%, #9b2222 100% );
        color: #ffffff;
        font-weight: 600; /* bolder, not darker */

        box-shadow: 0 9px 18px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.18);
        transform: translateY(-1px);
        outline: none;
    }


btn-siva:active {
    transform: translateY(0);
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28), inset 0 3px 6px rgba(0, 0, 0, 0.35);
}


.contact-form button {
    background-color: #6b1a1a;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    cursor: pointer;
    font-family: inherit;
}

/* Footer */
.footer {
    padding: 30px 7%;
    text-align: center;
    font-size: 0.9rem;
    background-color: #f2ede8;
}

/* Responsive */
@media (max-width: 768px) {
    .connect-grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 60px 6%;
    }

    .section-heading h2 {
        font-size: 1.7rem;
    }
}