/* ==========================================
CHAIRMAN PAGE
========================================== */

.chairman-wrapper{
    padding:100px 7%;

    background:
    linear-gradient(
        to bottom,
        #f8fbff,
        #ffffff
    );

    position:relative;

    overflow:hidden;
}

/* GLOW EFFECTS */

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

    position:absolute;

    width:350px;
    height:350px;

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

    border-radius:50%;

    top:-120px;
    left:-120px;

    filter:blur(100px);
}

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

    position:absolute;

    width:280px;
    height:280px;

    background:
    rgba(255,87,34,.10);

    border-radius:50%;

    bottom:-100px;
    right:-100px;

    filter:blur(100px);
}

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

.chairman-container{
    display:flex;

    align-items:center;

    gap:70px;

    position:relative;
    z-index:2;
}

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

.chairman-left{
    flex:1;
}

.chairman-image-box{
    position:relative;

    max-width:420px;

    margin:auto;

    background:#fff;

    padding:12px;

    border-radius:35px;

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

    transition:.5s;
}

.chairman-image-box:hover{
    transform:
    translateY(-12px);
}

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

    height:520px;

    object-fit:cover;

    border-radius:25px;

    display:block;

    transition:.7s;
}

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

/* ORANGE BORDER GLOW */

.chairman-image-box::before{
    content:'';

    position:absolute;

    inset:-8px;

    border-radius:40px;

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

    z-index:-1;

    opacity:.18;
}

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

.chairman-right{
    flex:1.2;
}

/* TAG */

.chairman-tag{
    display:inline-block;

    padding:10px 22px;

    background:#fff1df;

    color:#ff6b00;

    border-radius:50px;

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

    margin-bottom:20px;
}

/* TITLE */

.chairman-right h1{
    font-size:58px;

    font-weight:800;

    color:#0b1f3a;

    line-height:1.15;

    margin-bottom:25px;
}

/* QUOTE */

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

    padding:30px;

    border-radius:28px;

    margin-bottom:30px;

    color:#fff;

    box-shadow:
    0 18px 40px rgba(255,115,0,.20);
}

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

    margin-bottom:15px;
}

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

    line-height:1.8;

    font-weight:600;
}

/* PARAGRAPH */

.chairman-right p{
    font-size:16px;

    line-height:2;

    color:#555;

    margin-bottom:18px;
}

/* SIGNATURE */

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

    padding-top:25px;

    border-top:
    2px dashed rgba(0,0,0,.08);
}

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

    color:#0b1f3a;

    margin-bottom:8px;
}

.chairman-signature span{
    color:#ff6b00;

    font-weight:600;
}

/* ==========================================
HIGHLIGHTS
========================================== */

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

    display:grid;

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

    gap:30px;
}

.highlight-card{
    background:#fff;

    text-align:center;

    padding:45px 30px;

    border-radius:30px;

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

    transition:.5s;
}

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

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

    border-radius:22px;

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

    margin:auto auto 20px;

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

    color:#fff;

    font-size:30px;
}

.highlight-card h3{
    font-size:36px;

    color:#0b1f3a;

    margin-bottom:10px;
}

.highlight-card p{
    color:#666;
}

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

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

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

    border-radius:35px;

    padding:80px;

    text-align:center;
}

.quote-section h2{
    color:#fff;

    font-size:42px;

    font-weight:700;

    line-height:1.7;

    max-width:900px;

    margin:auto;
}

/* ==========================================
TABLET
========================================== */

@media(max-width:992px){

    .chairman-container{
        flex-direction:column;
    }

    .chairman-right{
        text-align:center;
    }

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

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

}

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

@media(max-width:576px){

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

    .chairman-container{
        gap:40px;
    }

    .chairman-image-box{
        max-width:280px;
    }

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

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

        line-height:1.3;
    }

    .chairman-quote{
        padding:20px;
    }

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

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

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

    .quote-section{
        margin:0 4% 60px;

        padding:40px 25px;
    }

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

}