/* LEADERSHIP PAGE */

.leadership-hero{
    position:relative;
    background:url('https://letsgrowsmarter.com/skygrow/images/slide1.webp') top/cover;
    padding:220px 0 140px;
    text-align:center;
    overflow:hidden;
}

.leadership-overlay{
    position:absolute;
    inset:0;
    background:rgba(2,27,87,.72);
}

.leadership-hero-content{
    position:relative;
    z-index:2;
    max-width:900px;
    color:#fff;
}

.leadership-hero span{
    color:#4dafa7;
    letter-spacing:3px;
    font-weight:700;
}

.leadership-hero h1{
    font-size:72px;
    line-height:1.1;
    margin:20px 0;
    font-weight:800;
}

.leadership-hero p{
    font-size:20px;
    line-height:1.9;
    color:rgba(255,255,255,.92);
}

/* INTRO */

.leadership-intro{
    background:#ffffff;
}

.leadership-intro-text{
    max-width:950px;
    margin:auto;
    font-size:19px;
    line-height:1.9;
    color:#475569;
}

/* LEADER SECTION */

.leader-section{
    background:#021b57;
    padding:90px 0;
}

.alternate-bg{
    background:#03246f;
}

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

.leader-grid.reverse{
    grid-template-columns:.8fr 1.2fr;
}

.leader-content span{
    color:#4dafa7;
    font-size:14px;
    letter-spacing:4px;
    font-weight:700;
}

.leader-content h2{
    color:#ffffff;
    font-size:72px;
    line-height:1;
    margin:18px 0;
    font-weight:800;
}

.leader-content h3{
    color:#4dafa7;
    font-size:44px;
    font-weight:500;
}

.leader-line{
    width:220px;
    height:5px;
    background:#4dafa7;
    margin:25px 0 35px;
}

.leader-content h4{
    color:#ffffff;
    font-size:24px;
    margin-bottom:35px;
    font-weight:400;
}

.leader-content p{
    color:rgba(255,255,255,.92);
    font-size:20px;
    line-height:2;
    margin-bottom:24px;
}

/* DESKTOP IMAGE */

.mobile-image{
    display:none;
}

/* MOBILE */

@media(max-width:991px){

    .leader-grid > .leader-image{
        display:none;
    }

    .mobile-image{
        display:block;
        margin:30px 0;
    }

    .mobile-image img{
        width:100%;
        border-radius:14px;
        box-shadow:0 20px 60px rgba(0,0,0,.25);
    }

}

.highlights h5{
    color:#4dafa7;
    font-size:30px;
    margin-bottom:18px;
}

.highlights ul{
    padding-left:22px;
}

.highlights li{
    color:#ffffff;
    font-size:20px;
    margin-bottom:12px;
    line-height:1.8;
}

/* TEAM IMAGES */
.leader-image{
    display:flex;
    justify-content:center;
    align-items:flex-start;
}

.leader-image img{
    width:100%;
    max-width:480px;
    height:620px;
    object-fit:cover;
    object-position:top;
    border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}

/* MOBILE */

@media(max-width:991px){

    .leader-grid,
    .leader-grid.reverse{
        grid-template-columns:1fr;
    }

    .leader-content h2{
        font-size:52px;
    }

    .leader-content h3{
        font-size:34px;
    }

}

@media(max-width:767px){

    .leadership-hero{
        padding:180px 0 100px;
    }

    .leadership-hero h1{
        font-size:42px;
    }

    .leadership-hero p{
        font-size:17px;
        line-height:1.8;
    }

    .leader-section{
        padding:55px 0;
    }

    .leader-content h2{
        font-size:40px;
    }

    .leader-content h3{
        font-size:28px;
    }

    .leader-content h4{
        font-size:20px;
        line-height:1.7;
    }

    .leader-content p{
        font-size:17px;
        line-height:1.9;
    }

    .highlights h5{
        font-size:24px;
    }

    .highlights li{
        font-size:17px;
    }

    .leader-line{
        width:160px;
        margin:20px 0 25px;
    }
	
	 .leader-image img,
    .mobile-image img{

        height:auto;
        max-width:100%;

    }

}

/* DESKTOP / MOBILE IMAGE CONTROL */

.mobile-image{
    display:none;
}

.desktop-image{
    display:block;
}

/* MOBILE */

@media(max-width:991px){

    .leader-grid,
    .leader-grid.reverse{
        grid-template-columns:1fr;
        gap:40px;
    }

    .desktop-image{
        display:none;
    }

    .mobile-image{
        display:block;
        margin:25px 0 30px;
    }

    .mobile-image img{
        width:100%;
        border-radius:14px;
        box-shadow:0 20px 60px rgba(0,0,0,.25);
    }

}