/* =====================================================
   SOUTH NEWINGTON
   ===================================================== */

:root {

    --primary: #1e3a5f;
    --secondary: #5c7a5d;
    --light: #f7f8fa;
    --dark: #2e2e2e;
    --white: #ffffff;

}

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

body {

    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--light);
    color: var(--dark);
    line-height: 1.6;

}


/* =====================================================
   HERO
   ===================================================== */

.hero {

    position: relative;

    height: 45vh;
    min-height: 350px;

    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;

    color: white;
    text-align: center;

}

.hero-content {

    position: relative;
    z-index: 10;

}

.hero-content h1 {

    font-size: 4rem;
    margin-bottom: 10px;

}

.hero-content p {

    font-size: 1.4rem;

}

/* =====================================================
   SLIDESHOW
   ===================================================== */

.slideshow {

    position: absolute;
    inset: 0;

}

.slide {

    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center;

    opacity: 0;

    animation: fadeShow 24s infinite;

}

/* Dark overlay */

.slide::after {

    content: "";

    position: absolute;
    inset: 0;

    background: rgba(0,0,0,0.35);

}

.slide:nth-child(1) {

    background-image: url("../images/hero1.jpg");

    animation-delay: 0s;

}

.slide:nth-child(2) {

    background-image: url("../images/hero2.jpg");

    animation-delay: 6s;

}

.slide:nth-child(3) {

    background-image: url("../images/hero3.png");

    animation-delay: 12s;

}

.slide:nth-child(4) {

    background-image: url("../images/hero4.jpg");

    animation-delay: 18s;

}


@keyframes fadeShow {

    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    25% {
        opacity: 1;
    }

    33% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }

}

/* =====================================================
   NAVIGATION
   ===================================================== */

nav {

    background: white;

    display: flex;
    justify-content: center;
    gap: 30px;

    padding: 20px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.08);

}

nav a {

    text-decoration: none;
    color: var(--primary);
    font-weight: 600;

}

nav a:hover {

    color: #4285f4;

}


/* =====================================================
   CONTENT
   ===================================================== */

main {

    max-width: 1200px;
    margin: auto;
    padding: 60px 20px;

}

.intro {

    text-align: center;
    margin-bottom: 60px;

}

.intro h2 {

    margin-bottom: 20px;
    font-size: 2rem;

}


/* =====================================================
   CARDS
   ===================================================== */

.cards {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px, 1fr)
        );

    gap: 25px;

    margin-bottom: 60px;
}

.card {

    background: white;

    border-radius: 14px;

    padding: 30px;

    text-decoration: none;
    color: inherit;

    box-shadow:
        0 4px 20px rgba(0,0,0,0.08);

    transition: 0.3s;

}

.card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.12);

}

.card h3 {

    margin-bottom: 10px;
    color: var(--primary);

}


/* =====================================================
   HIGHLIGHT
   ===================================================== */

.highlight {

    background: white;

    padding: 40px;

    border-radius: 14px;

    box-shadow:
        0 4px 20px rgba(0,0,0,0.08);

}

.highlight h2 {

    margin-bottom: 15px;

}


/* =====================================================
   FOOTER
   ===================================================== */

footer {

    text-align: center;

    padding: 40px;

    color: #777;

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 768px) {

    .hero-content h1 {

        font-size: 2.5rem;

    }

    nav {

        flex-wrap: wrap;
        gap: 15px;

    }

}