*{box-sizing:border-box}
body{margin:0;font-family:"Roboto",Arial,sans-serif;color:#536579;background:#fff}
.page-banner{position:relative;min-height:245px;background:url("/public/assets/img/aboutus.jpg") center/cover no-repeat;display:flex;align-items:flex-end;justify-content:center}
.banner-overlay{position:absolute;inset:0;background:rgba(255,255,255,.05)}
.page-banner .container{position:relative;z-index:1;text-align:center}
.page-banner h1{display:inline-block;margin:0 0 10px;padding:2px 100px 7px;background:rgba(22,54,107,.72);color:#fff;font-size:48px;line-height:1.15;font-weight:700}
.intro-section{padding:78px 20px 55px}
.intro-section h2{margin:0;color:#001c5d;font-size:35px;font-weight:500}
.intro-section p{margin:10px 0 0;color:#444;font-size:20px;font-style:italic}
.about-section{padding:0 0 70px}
.about-card{max-width:1140px;margin:0 auto}
.about-image{width:100%;min-height:450px;display:block;object-fit:cover;border-radius:0 0 0 100px}
.about-content{min-height:450;padding:20px 38px;background:#dce6f5;border-radius:0 100px 0 0}
.yellow-line{display:block;width:67px;height:4px;margin:0 auto 12px;background:#f5c400}

.about-content h2{margin:0 0 5px;color:#001c5d;text-align:center;font-size:40px;line-height:1.25;font-weight:600}

.established{margin-bottom:16px!important;color:#111;text-align:center;font-family:Georgia,serif;font-size:14px;font-style:italic}
.about-content p:not(.established){margin-bottom:15px;font-size:17px;line-height:1.75}
.more-btn{display:inline-block;padding:13px 26px;border-radius:30px;background:#000b52;color:#fff;text-decoration:none;font-size:12px;font-weight:600;transition:.25s}
.more-btn:hover{background:#163f7a;color:#fff;transform:translateY(-2px)}
.vision-mission-section{padding:50px 100px 70px}
/*
.vm-card{position:relative;max-width:1140px;min-height:520px;margin:0 auto;padding:68px 50px 48px;background:#fff;box-shadow:0 7px 28px rgba(0,0,0,.08);overflow:hidden}
.vm-content{position:relative;z-index:2;width:67%} 
.vm-graphic{position:absolute;top:10px;right:50px;width:370px;height:260px;}
.circle{position:absolute;display:flex;align-items:center;justify-content:center;width:165px;height:165px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff 0%,#e7e7e7 72%,#d3d3d3 100%);box-shadow:0 17px 14px rgba(0,0,0,.12);color:#000;font-size:19px;font-weight:700}
.vision-circle{top:0;left:0;border:8px solid #ed2028}
.mission-circle{top:70px;right:0;border:8px solid #07508c}
*/
.vm-card {
    display: flex;
}

/* Desktop */
.vm-content {
    order: 1;
}

.vm-graphic {
    order: 2;
}
.section-heading{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.section-heading span{width:38px;height:2px;display:inline-block;background:#f5c400;}
.section-heading h3{margin:0;color:#111;font-size:20px;font-weight:600}
.vm-content>p{margin:0 0 38px;font-size:16px;line-height:1.65}
.mission-heading{margin-bottom:25px}
.mission-list{padding:0;margin:0;list-style:none}
.mission-list li{position:relative;margin-bottom:5px;padding-left:20px;color:#536579;font-size:16px;line-height:1.5}
.mission-list li::before{content:"◉";position:absolute;left:0;top:0;color:#000066;font-size:15px}


@media(max-width:991.98px){
.page-banner{min-height:210px}
.page-banner h1{padding:4px 70px 8px;font-size:40px}
.intro-section{padding-top:55px}
.about-image,.about-content{height:auto}
.about-image{min-height:350px;border-radius:70px 70px 0 0}
.about-content{border-radius:0 0 70px 70px;padding:35px}
.vm-card{padding:50px 35px}
.vm-content{width:100%}
.vm-graphic{position:relative;top:auto;right:auto;width:350px;height:210px;margin:30px auto 0}
}

@media(max-width:575.98px){
.page-banner{min-height:150px}
.page-banner h1{margin-bottom:8px;padding:4px 30px 7px;font-size:30px}
.intro-section{padding:42px 18px 35px}
.intro-section h2{font-size:28px;line-height:1.35}
.intro-section p{font-size:14px}
.about-section{padding-bottom:45px}
.about-image{min-height:245px;border-radius:45px 45px 0 0}
.about-content{padding:25px 22px 30px;border-radius:0 0 45px 45px}
.about-content h2{font-size:30px}
.established{font-size:18px;line-height:1.5}
.about-content p:not(.established){font-size:16px;line-height:1.65}
/*
.vm-card{min-height:auto;padding:35px 22px 40px}
.vm-content>p{font-size:16px}
.vm-graphic{width:285px;height:190px}
*/
.circle{width:130px;height:130px;font-size:15px}
.vision-circle{border-width:7px}
.mission-circle{top:55px;border-width:7px}
.mission-list li{font-size:16px}
.vision-mission-section{padding:0 0 25px}
 .vm-card {
        flex-direction: column;
    }

    .vm-graphic {
        order: 1;
		text-align:center;
    }

    .vm-content {
        order: 2;
    }
}