.announcement-hero{
    padding:120px 0;
    background:var(--gradient-primary);
    color:var(--white);
}

.hero-tag{
    display:inline-block;
    padding:8px 20px;
    background:rgba(255,255,255,.15);
    border-radius:50px;
    margin-bottom:20px;
}

.announcement-hero h1{
    font-size:58px;
    font-weight:700;
    margin-bottom:20px;
}

.featured-announcement,
.expansion-news,
.announcement-cta{
    padding:100px 0;
}

.launch-section,
.company-updates,
.awards-section,
.event-announcements{
    padding:100px 0;
    background:var(--light);
}

.section-heading{
    margin-bottom:60px;
}

.section-subtitle{
    color:var(--secondary);
    text-transform:uppercase;
    font-weight:600;
    letter-spacing:1px;
}

.section-heading h2,
.featured-announcement h2,
.expansion-news h2{
    color:var(--primary);
    font-weight:700;
}

.image-placeholder,
.card-image{
    height:320px;
    background:var(--light);
    border:2px dashed var(--secondary);
    border-radius:20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:var(--primary);
    font-weight:600;
    box-shadow:var(--shadow);
}

.card-image{
    height:220px;
    margin-bottom:20px;
}

.image-placeholder small,
.card-image small{
    margin-top:10px;
    opacity:.7;
}

.announcement-feature{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:18px;
}

.announcement-feature i{
    font-size:22px;
    color:var(--primary);
}

.announcement-card,
.update-card,
.award-card,
.event-card{
    background:var(--white);
    padding:30px;
    border-radius:20px;
    box-shadow:var(--shadow);
    height:100%;
    transition:.3s;
}

.announcement-card:hover,
.update-card:hover,
.award-card:hover,
.event-card:hover{
    transform:translateY(-8px);
}

.update-card,
.award-card{
    text-align:center;
}

.update-card i,
.award-card i{
    font-size:50px;
    color:var(--primary);
    margin-bottom:20px;
}

.update-card h5,
.award-card h5,
.event-card h5,
.announcement-card h5{
    color:var(--primary);
    margin-bottom:15px;
}

.cta-box{
    background:var(--gradient-primary);
    color:#fff;
    padding:70px;
    border-radius:25px;
}

.cta-box h2{
    margin-bottom:20px;
    font-weight:700;
}

@media(max-width:991px){

    .announcement-hero h1{
        font-size:40px;
    }

    .image-placeholder{
        height:250px;
    }

    .card-image{
        height:180px;
    }

    .cta-box{
        padding:40px 25px;
    }

}