/* =========================================================
WHO WE ARE PAGE
HYM Investments
Short Hero • Logo Always Visible • Clean Typography
========================================================= */


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

.about-hero {
    height: 420px;               /* Shorter hero */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.about-hero-overlay h1 {
    color: #ffffff;
    font-size: 48px;
    font-weight: 600;
    letter-spacing: 1px;
}



/* ================= ABOUT COMPANY ================= */

.about-company {
    padding: 100px 0;
    background: #ffffff;
}

.about-content {
    max-width: 750px;
}

.about-content h2 {
    font-size: 36px;
    margin-bottom: 25px;
    color: var(--primary-gray);
}

.about-content p {
    line-height: 1.9;
    font-size: 17px;
    color: var(--text-muted);
    margin-bottom: 40px;
}



/* ================= DOWNLOAD BUTTON ================= */

.btn-primary {
    display: inline-block;
    padding: 16px 40px;
    border-radius: 40px;
    background: #5f666b;
    color: #ffffff;
    font-weight: 600;
    font-size: 17px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: #444;
    transform: translateY(-2px);
}



/* ================= CEO SECTION ================= */

.ceo-section {
    padding: 100px 0;
    background: #f6f6f6;
}

.ceo-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 70px;
    align-items: center;
}

.ceo-image img {
    width: 100%;
    border-radius: 16px;
}

.ceo-message h3 {
    font-size: 30px;
    margin-bottom: 25px;
    color: var(--primary-gray);
}

.ceo-message p {
    line-height: 1.9;
    margin-bottom: 35px;
    font-size: 17px;
    color: var(--text-muted);
}


/* CEO Name — Clean Corporate (NOT script font) */

.ceo-info strong {
    display: block;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;  /* Back to clean font */
    font-weight: 600;
    margin-bottom: 6px;
    color: #222;
}

.ceo-info span {
    font-size: 15px;
    color: #777;
}



/* ================= LANDMARK IMAGE ================= */

.about-image-section {
    width: 100%;
    margin-top: 80px;
    line-height: 0;
}

.about-image-section img {
    width: 100%;
    height: auto;
    display: block;
}



/* ================= RESPONSIVE ================= */

@media (max-width: 980px) {

    .ceo-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

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

}

@media (max-width: 640px) {

    .about-hero {
        height: 320px;
    }

    .about-hero-overlay h1 {
        font-size: 32px;
    }

}

/* =========================================================
LEADERSHIP TEAM SECTION
========================================================= */

.leadership-section{
    padding:100px 0;
    background:#ffffff;
}

.leadership-title{
    text-align:center;
    font-size:36px;
    margin-bottom:60px;
    color:var(--primary-gray);
}


/* GRID */

.leadership-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}


/* CARD */

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


/* IMAGE */

.leader-image{
    width:100%;
    height:320px;
    overflow:hidden;
    border-radius:14px;
    margin-bottom:18px;
}

.leader-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.4s ease;
}


/* HOVER ZOOM */

.leader-card:hover img{
    transform:scale(1.08);
}


/* TEXT */

.leader-info h4{
    font-size:18px;
    margin-bottom:6px;
    color:#222;
    font-weight:600;
}

.leader-info p{
    font-size:14px;
    color:#777;
}



/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width:1100px){

.leadership-grid{
    grid-template-columns:repeat(3,1fr);
}

}

@media (max-width:800px){

.leadership-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:500px){

.leadership-grid{
    grid-template-columns:1fr;
}

.leader-image{
    height:300px;
}

}