*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;background:#fff;color:#082e78;font-size:15px}
a{text-decoration:none}
.wrap{width:96%;max-width:1500px;margin:0 auto}

/* Header */
.top{height:158px;position:relative;background:linear-gradient(180deg,#fff 0,#f5f8fd 75%,#dce9fa 100%);overflow:hidden}
.top:after{content:"";position:absolute;left:-2%;right:-2%;bottom:-44px;height:80px;background:#fff;transform:rotate(-3deg);z-index:0}
.top-inner{height:158px;display:flex;align-items:center;position:relative;z-index:2}
.logo{width:190px;height:145px;object-fit:contain;margin-left:25px}
.head-center{flex:1;min-width:0}
.school{font-family:Georgia,"Times New Roman",serif;color:#06449b;font-size:50px;line-height:.95;font-weight:bold;white-space:nowrap;text-shadow:1px 1px 0 #fff}
.aff{font-size:21px;font-weight:bold;color:#a40000;margin-top:7px}
.reg{position:absolute;right:380px;top:84px;color:#a00000;font-size:19px;font-weight:bold}
.contactline{font-size:16px;color:#163a7e;font-weight:bold;margin-top:7px;white-space:nowrap}
.contactline span{margin-right:32px}
.portal{width:310px;background:linear-gradient(#c91414,#8d0000);color:white;border-radius:12px;padding:12px 18px;text-align:center;font-size:19px;font-weight:bold;box-shadow:0 2px 5px #777;margin-right:12px}

/* Nav */
.nav{height:56px;background:linear-gradient(180deg,#d80a0a,#8f0000);border-top:2px solid #fff;border-bottom:3px solid #700;color:#fff}
.nav-inner{display:flex;height:53px}
.nav a{flex:1;display:flex;justify-content:center;align-items:center;gap:10px;color:#fff;font-size:17px;font-weight:bold;border-right:1px solid rgba(255,255,255,.22);white-space:nowrap}
.nav a:hover,.nav a.active{background:#ed2424}
.ico{font-size:23px}

/* Admission ribbon */

.ribbon{height:86px;margin:2px 2% 10px;position:relative;display:grid;grid-template-columns:52% 38% 10%;align-items:center;background:linear-gradient(90deg,#a10000 0,#df0909 48%,#fff 49%,#fff 100%);border:2px solid #c60000;overflow:hidden}

.ribbon:before,.ribbon:after{content:"";position:absolute;width:36px;height:36px;background:#fff;transform:rotate(45deg);z-index:3}
.ribbon:before{left:-20px}.ribbon:after{right:-20px}
.r1{font-family:Georgia,serif;color:#fff;font-size:34px;font-weight:bold;padding-left:180px;font-style:italic}
.r1 b{color:#ffd800}
.r2{font-family:Georgia,serif;color:#a60000;font-size:34px;font-weight:bold;text-align:center;font-style:italic}
.r2 b{color:#e00000}
.badge{justify-self:center;background:#ffd324;color:#111;width:120px;height:78px;clip-path:polygon(50% 0,100% 24%,88% 82%,50% 100%,12% 82%,0 24%);font-size:13px;font-weight:bold;text-align:center;padding:17px 7px 0;position:relative;z-index:4}
.badge strong{display:block;font-size:15px}

/* Main */
.main{display:grid;grid-template-columns:minmax(0,2.1fr) 31%;gap:22px;margin:0 2% 0}
.welcome{border:1px solid #e0e7f0;border-radius:8px;padding:0 20px 10px;box-shadow:0 0 4px #ddd}
.welcome h1{font-size:35px;color:#ad0707;margin:0;padding:10px 0 7px;border-bottom:2px solid #e3b800}
.welcome p{font-size:17px;line-height:1.34;color:#082e78;margin:11px 0;text-align:justify}
.commit-title{font-size:31px;color:#0b489d;margin:8px 0;border-bottom:2px solid #e3b800;padding-bottom:3px}
.commit{height:57px;border-radius:12px;margin:4px 0;display:grid;grid-template-columns:115px 1fr;align-items:center}
.commit .icon{width:70px;height:47px;margin-left:13px;border-right:1px solid #a00000;display:flex;align-items:center;justify-content:center;font-size:29px}
.commit b{font-size:22px;display:block}
.commit span{font-size:15px;color:#082e78;display:block}
.c1{background:#f8dede}.c1 b{color:#b10000}
.c2{background:#d8eaff}.c2 b{color:#0750a4}
.c3{background:#fff0ca}.c3 b{color:#b55b00}
.read{display:inline-block;background:linear-gradient(#d20a0a,#970000);border-radius:8px;color:#fff;font-weight:bold;font-size:20px;padding:8px 23px;margin-top:1px}

/* Sidebar */
.sidebox{border-radius:13px;overflow:hidden;margin-bottom:11px;box-shadow:0 0 2px #ddd}
.cal-head{height:45px;background:linear-gradient(90deg,#d00,#920000);color:#fff;font-size:21px;font-weight:bold;display:flex;align-items:center;justify-content:space-between;padding:0 14px}
.cal-head button{border:0;background:none;color:#fff;font-size:30px;cursor:pointer}
.cal{background:#eef6ff;padding:8px}
.cal table{width:100%;border-collapse:collapse;background:#fff}
.cal th{padding:7px;background:#edf2f8;color:#222}
.cal td{text-align:center;padding:7px;border:1px solid #e5e9ee;font-weight:bold;color:#222}
.cal td.today{color:#e00000;background:#ffe2e2}
.news-title{height:43px;background:linear-gradient(90deg,#174fa8,#0d3b86);color:#fff;font-size:21px;font-weight:bold;padding:9px 14px}
.news a{display:block;padding:10px 15px;color:#123fa0;font-weight:bold;border-bottom:1px solid #e2e2e2;background:#f9fbff}
.visitor{background:#e8f3ff;text-align:center;padding:10px}
.visitor label{display:block;font-size:20px;font-weight:bold;color:#153f8d;margin-bottom:4px}
.digits{display:flex;justify-content:center;gap:3px}
.digits i{font-style:normal;background:#16459b;color:#fff;border-radius:3px;font-size:27px;font-weight:bold;padding:3px 9px}

/* Bottom strip */
.bottom{background:#161616;color:#fff;margin-top:0;padding:8px 4% 0;display:grid;grid-template-columns:repeat(4,1fr);gap:35px}
.bottom h3{font-size:18px;margin:0 0 7px}
.bottom img{display:block;width:100%;height:112px;object-fit:cover}
.footer{background:#9c0000;color:#fff;text-align:center;font-size:16px;padding:9px 0 11px;line-height:1.35}
.footer strong{font-size:17px}

/* Inner pages */
.page{min-height:570px;width:92%;max-width:1200px;margin:28px auto 40px}
.page h1{color:#aa0000;font-size:34px;border-bottom:2px solid #e2b600;padding-bottom:7px}
.page h2{color:#0b489d}
.page p,.page li{font-size:17px;line-height:1.55}
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{padding:18px;border:1px solid #d8e0ea;border-radius:10px;background:#f5f9ff}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.gallery img{width:100%;height:210px;object-fit:cover}
.form{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form label{font-weight:bold}.form input,.form textarea,.form select{width:100%;padding:10px;margin-top:4px;border:1px solid #aaa;border-radius:5px;font-size:15px}.form textarea{height:120px}.full{grid-column:1/-1}.btn{background:#a40000;color:#fff;border:0;padding:11px 25px;border-radius:6px;font-weight:bold;font-size:16px}

/* Match the supplied 1536px screenshot while staying responsive */
@media(max-width:1200px){
 .school{font-size:40px}.reg{right:320px}.contactline{font-size:13px}.portal{width:230px}
 .r1{padding-left:100px}.r2{font-size:29px}.main{grid-template-columns:1fr 330px}
}
@media(max-width:850px){
 .top{height:auto}.top-inner{height:auto;min-height:150px;flex-wrap:wrap;padding:8px}.logo{width:100px;height:90px;margin:0}.school{font-size:26px;white-space:normal}.aff{font-size:15px}.reg{position:static;font-size:13px}.contactline{white-space:normal;font-size:12px}.portal{width:100%;margin:5px 0}
 .nav{height:auto}.nav-inner{overflow-x:auto}.nav a{flex:none;padding:11px 15px}
 .ribbon{height:auto;min-height:180px;grid-template-columns:1fr;gap:4px;padding:8px}.r1,.r2{padding:5px;text-align:center;font-size:24px}.badge{width:120px;height:65px}
 .main{display:block}.sidebox{margin-top:12px}.bottom{grid-template-columns:1fr 1fr}.cardgrid,.gallery,.form{grid-template-columns:1fr}.full{grid-column:auto}
}
@media(max-width:520px){.bottom{grid-template-columns:1fr}.welcome h1{font-size:27px}.welcome p{font-size:15px}}

/* LARGE ARROW - MOVE LEFT */
.ribbon .r2 {
    position: relative;
}

.ribbon .r2::before {
    content: "";
    position: absolute;
    left: -58px;
    top: 50%;
    transform: translateY(-50%);

    width: 0;
    height: 0;

    border-top: 43px solid transparent;
    border-bottom: 43px solid transparent;
    border-left: 35px solid #e3b800;

    z-index: 10;
}

/* COMING SOON PAGE */
.coming-soon {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}

.coming-soon .coming-icon {
    font-size: 30px;
    color: #e3b800;
    margin-bottom: 8px;
}

.coming-soon h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    font-style: italic;
    font-weight: bold;
    color: #2f3191;
}

.coming-soon p {
    margin: 12px 0 5px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    color: #a60000;
}

.coming-soon span {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #777;
}