/* ==========================================
PAGE BACKGROUND
========================================== */

body{

}

/* ==========================================
MAIN WRAPPER
========================================== */

.chairman-wrapper{
    padding:90px 7%;
    position:relative;
}

.chairman-wrapper::before{
    content:"";

    position:absolute;

    width:400px;
    height:400px;

    background:
    radial-gradient(
        rgba(255,152,0,.15),
        transparent
    );

    top:-150px;
    left:-150px;

    border-radius:50%;
}

.chairman-wrapper::after{
    content:"";

    position:absolute;

    width:350px;
    height:350px;

    background:
    radial-gradient(
        rgba(18,45,82,.10),
        transparent
    );

    bottom:-120px;
    right:-120px;

    border-radius:50%;
}

/* ==========================================
CONTAINER
========================================== */

.chairman-container{
    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:450px 1fr;

    gap:60px;

    align-items:start;
}

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

.chairman-image-box{
    position:sticky;
    top:120px;

    background:#fff;

    padding:15px;

    border-radius:30px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.08);
}

.chairman-image-box img{
    width:100%;
    height:600px;

    object-fit:cover;

    border-radius:20px;

    transition:.5s;
}

.chairman-image-box:hover img{
    transform:scale(1.04);
}

/* ==========================================
CONTENT
========================================== */

.chairman-right{
    background:#fff;

    padding:50px;

    border-radius:30px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.06);
}

/* TAG */

.chairman-tag{
    display:inline-block;

    background:#fff4e5;

    color:#ff7a00;

    padding:10px 22px;

    border-radius:50px;

    font-size:13px;
    font-weight:700;

    margin-bottom:20px;
}

/* TITLE */

.chairman-right h1{
    font-size:55px;
    font-weight:800;

    line-height:1.2;

    color:#0b1f3a;

    margin-bottom:25px;
}

/* ==========================================
QUOTE
========================================== */

.chairman-quote{
    background:
    linear-gradient(
        135deg,
        #ff9800,
        #ff6b00
    );

    color:#fff;

    padding:35px;

    border-radius:25px;

    margin-bottom:30px;

    position:relative;

    overflow:hidden;
}

.chairman-quote::before{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    background:
    rgba(255,255,255,.12);

    border-radius:50%;

    top:-70px;
    right:-70px;
}

.chairman-quote i{
    font-size:32px;

    margin-bottom:15px;
}

.chairman-quote h3{
    font-size:24px;

    line-height:1.7;

    font-weight:600;
}

/* ==========================================
PARAGRAPH
========================================== */

.chairman-right p{
    color:#555;

    font-size:16px;

    line-height:2;

    margin-bottom:18px;
}

/* ==========================================
SIGNATURE
========================================== */

.chairman-signature{
    margin-top:35px;

    padding-top:25px;

    border-top:
    1px solid #e8e8e8;
}

.chairman-signature h4{
    font-size:30px;

    color:#0b1f3a;

    margin-bottom:6px;
}

.chairman-signature span{
    color:#ff7a00;

    font-weight:600;
}

/* ==========================================
HIGHLIGHT SECTION
========================================== */

.school-highlights{
    padding:0 7% 100px;

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;
}

.highlight-card{
    background:#fff;

    padding:40px;

    border-radius:25px;

    text-align:center;

    box-shadow:
    0 15px 50px rgba(0,0,0,.06);

    transition:.4s;
}

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

.highlight-card i{
    width:80px;
    height:80px;

    display:flex;

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

    margin:auto auto 20px;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #ff9800,
        #ff6b00
    );

    color:#fff;

    font-size:30px;
}

.highlight-card h3{
    color:#0b1f3a;

    font-size:28px;

    margin-bottom:10px;
}

/* ==========================================
QUOTE SECTION
========================================== */

.quote-section{
    margin:0 7% 80px;

    padding:70px;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        #08162d,
        #122d52
    );

    text-align:center;
}

.quote-section h2{
    color:#fff;

    font-size:38px;

    line-height:1.7;

    max-width:900px;

    margin:auto;
}

/* ==========================================
MOBILE
========================================== */

@media(max-width:991px){

    .chairman-container{
        grid-template-columns:1fr;
    }

    .chairman-image-box{
        position:static;
        max-width:450px;
        margin:auto;
    }

    .chairman-right h1{
        font-size:40px;
    }

    .school-highlights{
        grid-template-columns:1fr;
    }
}

@media(max-width:576px){

    .chairman-wrapper{
        padding:60px 4%;
    }

    .chairman-right{
        padding:25px;
    }

    .chairman-right h1{
        font-size:30px;
    }

    .chairman-quote{
        padding:22px;
    }

    .chairman-quote h3{
        font-size:18px;
    }

    .chairman-right p{
        font-size:14px;
    }

    .chairman-image-box img{
        height:380px;
    }

    .quote-section{
        margin:0 4% 50px;
        padding:40px 20px;
    }

    .quote-section h2{
        font-size:22px;
    }

    .school-highlights{
        padding:0 4% 60px;
    }
}