/*=========================================
            PAGE BANNER
=========================================*/

.page-banner{

    position:relative;

    height:380px;

    background:url("../images/about/banner.jpg") center/cover no-repeat;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.page-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(15,76,129,.72);

}

.page-banner-content{

    position:relative;

    z-index:2;

    color:#fff;

}

.page-banner-content h1{

    font-size:3rem;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:12px;

}

.page-banner-content p{

    font-size:1rem;

}

.page-banner-content a{

    color:#D4AF37;

    transition:.3s;

}

.page-banner-content a:hover{

    color:#fff;

}

/*=========================================
            COMMON SECTION
=========================================*/

.about-section,
.vision-mission,
.principal-section,
.management-section,
.glance-section,
.choose-section{

    padding:90px 0;

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    font-size:2.3rem;

    color:#0F4C81;

    margin-bottom:12px;

    position:relative;

}

.section-title h2::after{

    content:"";

    width:80px;

    height:4px;

    background:#D4AF37;

    display:block;

    margin:15px auto 0;

    border-radius:20px;

}

.section-title p{

    color:#64748B;

    font-size:1rem;

    max-width:700px;

    margin:auto;

    line-height:1.8;

}

/*=========================================
            ABOUT COLLEGE
=========================================*/

.about-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.about-image{

    overflow:hidden;

    border-radius:18px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.about-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.about-image:hover img{

    transform:scale(1.08);

}

.about-content h3{

    font-size:2rem;

    color:#0F4C81;

    margin-bottom:25px;

}

.about-content p{

    color:#555;

    line-height:1.9;

    margin-bottom:18px;

    text-align:justify;

}

/*=========================================
            FEATURES
=========================================*/

.about-features{

    display:grid;

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

    gap:18px;

    margin-top:35px;

}

.feature{

    display:flex;

    align-items:center;

    gap:14px;

    background:#fff;

    padding:16px;

    border-radius:12px;

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

    transition:.3s;

}

.feature:hover{

    transform:translateY(-6px);

}

.feature i{

    width:50px;

    height:50px;

    border-radius:50%;

    background:#0F4C81;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

}

.feature span{

    font-weight:600;

    color:#1E293B;

}

/*=========================================
        VISION & MISSION
=========================================*/

.vision-wrapper{

    display:grid;

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

    gap:35px;

}

.vision-card{

    background:#fff;

    padding:45px 35px;

    text-align:center;

    border-radius:18px;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.4s;

}

.vision-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.vision-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    background:#0F4C81;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    transition:.4s;

}

.vision-card:hover .vision-icon{

    background:#D4AF37;

    color:#0F4C81;

}

.vision-card h3{

    font-size:1.7rem;

    color:#0F4C81;

    margin-bottom:18px;

}

.vision-card p{

    line-height:1.9;

    color:#555;

}


/*=========================================
        PRINCIPAL'S MESSAGE
=========================================*/

.principal-wrapper{

    display:grid;

    grid-template-columns:340px 1fr;

    gap:55px;

    align-items:center;

}

.principal-image{

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.principal-image img{

    width:100%;

    display:block;

    transition:.4s;

}

.principal-image:hover img{

    transform:scale(1.05);

}

.principal-content h3{

    font-size:2rem;

    color:#0F4C81;

    margin-bottom:25px;

}

.principal-content p{

    color:#555;

    line-height:1.9;

    margin-bottom:18px;

    text-align:justify;

}

.principal-sign{

    margin-top:35px;

    padding-top:20px;

    border-top:2px solid #D4AF37;

}

.principal-sign h4{

    color:#0F4C81;

    font-size:1.25rem;

}

.principal-sign span{

    color:#64748B;

}

/*=====================================
        MANAGEMENT SECTION
======================================*/

.management-section{

    padding:90px 8%;

    background:#F8FAFC;

}


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

.management-container{

    max-width:1250px;

    margin:60px auto 0;

    display:grid;

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

    gap:45px;

    align-items:start;

}


/*=====================================
        MANAGEMENT CARD
======================================*/

.management-card{

    text-align:center;

    position:relative;

    transition:.35s;

}

.management-card:hover{

    transform:translateY(-8px);

}


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

.management-image{

    width:240px;

    height:240px;

    margin:auto;

    border-radius:50%;

    padding:8px;

    border:2px solid #D4AF37;

    position:relative;

    background:#fff;

    transition:.4s;

}

.management-image::before{

    content:"";

    position:absolute;

    inset:-10px;

    border:1px solid #DCE5EF;

    border-radius:50%;

    z-index:0;

}

.management-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:50%;

    position:relative;

    z-index:1;

    transition:.4s;

}


/*=====================================
        GOLD ACCENT
======================================*/

.management-image::after{

    content:"";

    position:absolute;

    width:14px;

    height:14px;

    background:#D4AF37;

    border-radius:50%;

    right:5px;

    top:25px;

    z-index:3;

    box-shadow:0 0 0 5px #F8FAFC;

}


/*=====================================
        DECORATIVE LINE
======================================*/

.management-line{

    width:90px;

    height:3px;

    background:#D4AF37;

    margin:30px auto 18px;

    border-radius:10px;

    position:relative;

}

.management-line::after{

    content:"";

    position:absolute;

    width:9px;

    height:9px;

    background:#0F4C81;

    border-radius:50%;

    right:-5px;

    top:50%;

    transform:translateY(-50%);

}


/*=====================================
        NAME
======================================*/

.management-card h3{

    font-size:21px;

    color:#0F2D4A;

    margin:0 0 8px;

    font-weight:700;

    line-height:1.4;

}


/*=====================================
        DESIGNATION
======================================*/

.management-card p{

    margin:0;

    color:#0F4C81;

    font-size:16px;

    font-weight:600;

}


/*=====================================
        HOVER
======================================*/

.management-card:hover .management-image{

    border-color:#0F4C81;

    box-shadow:0 15px 35px rgba(15,76,129,.18);

}

.management-card:hover .management-image img{

    transform:scale(1.04);

}

.management-card:hover .management-line{

    width:120px;

}


/*=========================================
        COLLEGE AT A GLANCE
=========================================*/

.glance-section{

    background:#F8FAFC;

}

.glance-wrapper{

    display:grid;

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

    gap:30px;

}

.glance-card{

    background:#fff;

    text-align:center;

    padding:40px 25px;

    border-radius:18px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.glance-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.glance-card i{

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:#0F4C81;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    transition:.35s;

}

.glance-card:hover i{

    background:#D4AF37;

    color:#0F4C81;

}

.glance-card h3{

    font-size:2rem;

    color:#0F4C81;

    margin-bottom:10px;

}

.glance-card p{

    color:#64748B;

    font-weight:500;

}


/*=========================================
            WHY CHOOSE US
=========================================*/

.choose-wrapper{

    display:grid;

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

    gap:30px;

}

.choose-card{

    background:#fff;

    padding:35px 28px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.choose-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.choose-card i{

    width:75px;

    height:75px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:#0F4C81;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    transition:.35s;

}

.choose-card:hover i{

    background:#D4AF37;

    color:#0F4C81;

}

.choose-card h3{

    font-size:1.35rem;

    color:#0F4C81;

    margin-bottom:15px;

}

.choose-card p{

    color:#64748B;

    line-height:1.8;

}