body {
    margin: 0;
    font-family: Segoe UI
}

/* HERO */
.research-hero {
    height: 70vh;
    background: url('/Content/Images/Paddy reaserch.jpg') center/cover;
    position: relative;
}

.hero-overlay {
    background: rgba(0,0,0,0.6);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    text-align: center;
    color: #fff
}

    .hero-content h1 {
        font-size: 60px;
        margin: 0
    }

    .hero-content h2 {
        color: #90ffb6;
        margin: 10px 0
    }

/* INTRO */
.intro-section {
    text-align: center;
    padding: 70px 20px
}

    .intro-section h2 {
        color: #1c3c2e;
        font-size: 38px
    }

/* CARDS */
.research-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 30px;
    padding: 60px 8%;
}

.card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: .4s;
}

    .card img {
        width: 100%;
        height: 230px;
        object-fit: cover
    }

.card-body {
    padding: 25px
}

.card:hover {
    transform: translateY(-10px)
}

.colorful {
    background: linear-gradient(135deg,#e6fff3,#ffffff)
}

/* DATA SECTION */
.data-section {
    background: #f7faf9;
    padding: 70px 20px;
    text-align: center
}

.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 25px;
    margin: 40px 0;
}

.data-box {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

    .data-box h3 {
        font-size: 40px;
        color: #1c7c54;
        margin: 0
    }

/* VISION */
.vision-section {
    padding: 70px 20px;
    text-align: center
}

.vision-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: 30px;
    margin-top: 40px;
}

.vcard {
    background: #1c7c54;
    color: #fff;
    padding: 35px;
    border-radius: 18px;
}