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

.about-hero{
    width:100%;
    height:115px;
    background:  
    linear-gradient(rgba(6,36,92,.75),
    rgba(6,36,92,.75)),
    url("../images/about-banner.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    align-items:center;
}

.hero-overlay{
    width:90%;
    max-width:1400px;
    margin:0 auto;
}

.hero-overlay h1{
    position:relative;
    display:inline-block;
    color:#fff;
    font-size:48px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    padding-bottom:15px;
}

/* Red line under About LIPA */
.hero-overlay h1::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100px;        /* Length of the line */
    height:5px;         /* Thickness */
    background:#d60000; /* Red color */
    border-radius:5px;}

/* =========================
   HERO MAINTAIN FROM ABOUT PAGE
========================= */
.heading {
    text-align: center;
    margin-bottom: 50px;
}

.heading h2 {
    color: #07347d;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}


 

.certificate-section {
    padding: 80px 8%;
    background: #f4f4f4;
}

   .certificate-grid {
    display: grid;
    grid-template-columns: repeat(3, 320px);
    justify-content: center;
    gap: 35px;
}


.certificate-card {
    position: relative;
    background: #79c3e6;
    border-radius: 35px;
    padding: 10px;
    transition: all 0.4s ease;
    overflow: hidden;
}


.certificate-card img {
    width: 70px;
    display: block;
    margin: 0 auto 25px;
}

.card-content {
    text-align: center;
}

.card-content h3 {
    color: #162a8a;
    font-size: 1.6rem;
    margin-bottom: 19px;
}

.card-content p {
    color: #111;
    font-size: 1.1rem;
    line-height: 1.1;
    margin-bottom: 8px;
    transition: color 0.4s ease;
}

.card-content p span {
    color: #162a8a;
    font-weight: 700;
}

.apply-btn {
    display: inline-block;
    margin-top: 25px;
    padding: 16px 35px;
    background: #1b2087;
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
}

.exclusive-badge {
    position: absolute;
    top: 18px;
    left: -35px;
    width: 140px;
    height: 40px;

    background: #e5007d;
    color: #fff;

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

    font-size: 0.8rem;
    font-weight: 600;

    transform: rotate(-45deg);
    z-index: 10;
}

/* HOVER EFFECT */

.certificate-card:hover {
    background: #0b8a4b;
}

.certificate-card:hover p {
    color: #fff;
}

.certificate-card:hover .apply-btn {
    background: #162a8a;
}

/* Keep these colors unchanged */

.certificate-card:hover h3,
.certificate-card:hover p span {
    color: #162a8a;
}
/* =========================
   flaship Section
========================= */
.Flagship-card-tall{
    position: relative;
    background: #ffa808e2;
    border-radius: 35px;
    padding: 10px;
    transition: all 0.4s ease;
    overflow: hidden;
}

.Flagship-card-tall img {
    width: 70px;
    display: block;
    margin: 0 auto 25px;
}
/* HOVER EFFECT */

.Flagship-card-tall:hover {
    background:  #c67b01;
}

.Flagship-card-tall:hover p {
    color: #ffffff;
}

.certificate-card:hover .apply-btn {
    background: #162a8a;
}

/* Keep these colors unchanged */

.certificate-card:hover h3,
.certificate-card:hover p span {
    color: #162a8a;
}

/* =========================
   Public Section
========================= */

.Public-sector-orientation{
    position: relative;
    background: #46c601;
    border-radius: 35px;
    padding: 10px;
    transition: all 0.4s ease;
    overflow: hidden;}

.Public-sector-orientation img {
    width: 70px;
    display: block;
    margin: 0 auto 25px;
}
/* HOVER EFFECT */

.Public-sector-orientation:hover {
    background:  #47fc06e2;
}

.Public-sector-orientation:hover p {
    color: #ffffff;
}

.certificate-card:hover .apply-btn {
    background: #162a8a;
}

/* News & Events CSS Code*/
.news-hero {
    font-family: Arial, sans-serif;
}

/* HEADER */
.news-header {
    background: url('images/news-banner.jpg') center/cover no-repeat;
    padding: 80px 8%;
    position: relative;
}

.news-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

.news-header h1 {
    position: relative;
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    margin: 0;
}

/* MAIN CONTENT */
.news-content {
    display: flex;
    gap: 40px;
    padding: 60px 8%;
    background: #0b0f2a;
    align-items: stretch;
}

/* IMAGE SIDE */
.news-image {
    flex: 1;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* TEXT SIDE */
.news-text {
    flex: 1.2;
    color: #fff;
}

.news-text h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #ffffff;
    font-weight: 700;
}

.news-text p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 15px;
    color: #dcdcdc;
}