@font-face{font-family:Onest-Black;src:url(../fonts/Onest-Black.ttf)}
@font-face{font-family:Onest-Bold;src:url(../fonts/Onest-Bold.ttf)}
@font-face{font-family:Onest-ExtraBold;src:url(../fonts/Onest-ExtraBold.ttf)}
@font-face{font-family:Onest-Light;src:url(../fonts/Onest-Light.ttf)}
@font-face{font-family:Onest-Medium;src:url(../fonts/Onest-Medium.ttf)}
@font-face{font-family:Onest-Regular;src:url(../fonts/Onest-Regular.ttf); font-display:swap;}
@font-face{font-family:Onest-SemiBold;src:url(../fonts/Onest-SemiBold.ttf)}
@font-face{font-family:Onest-Thin;src:url(../fonts/Onest-Thin.ttf)}

:root{
  --maroon:#b72c2f;
  --white:#fff;
  --black:#000;
  --blue:#204571;
  --beidge:#f4d4b2;
  --skyBlue:#d0e2f5;
  --pink:#ffd9da;
}
:focus{outline:none;}

/* Utility */
.desktop{display:block}.mobile{display:none}
body{margin:0;padding:0;overflow-x:hidden}
ul{margin:0;padding:0;list-style:none}

/* Header */
.navbar{background:var(--maroon);height:80px;padding:0}
.navbar .container-fluid{display:flex;align-items:center;justify-content:space-between}
.navbar-brand{margin:0;padding:0}
.navbar-brand img{width:180px;height:auto;transform:translateY(20px)}
.navbar-nav{align-items:center}
.navbar-nav .nav-link{color:var(--white)!important;font-size:18px;font-family:Onest-Regular;padding:12px 15px!important;position:relative}
.navbar-nav .nav-link::after{content:"";position:absolute;left:50%;bottom:4px;width:80%;height:2px;background:var(--white);transform:translateX(-50%) scaleX(0);transition:.35s}
.navbar-nav .nav-link::before{content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%) scale(0);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:8px solid var(--white);transition:.35s}
.navbar-nav .nav-link:hover::after{transform:translateX(-50%) scaleX(1)}
.navbar-nav .nav-link:hover::before{transform:translateX(-50%) scale(1)}
.navbar-collapse{justify-content:flex-end}
.register{display:inline-block;padding:8px 22px;border-radius:25px;background:var(--white);color:var(--black) !important;text-decoration:none !important;font-family:Onest-Regular;animation:blinki 2s infinite; margin-left:10px;}
@keyframes blinki{0%{box-shadow:0 0 1px 8px rgba(255,255,255,.5)}50%{box-shadow:0 0 1px 0 transparent}100%{box-shadow:0 0 1px 8px rgba(255,255,255,.5)}}

/* Navbar swipe effect */
#navbarNav li.swipe a:before,#navbarNav li.swipe a:after{position:absolute;width:0;height:100%;top:0;content:"";background:var(--white);opacity:.3;transition:all .3s}
#navbarNav li.swipe a:before{left:0}#navbarNav li.swipe a:after{right:0}
#navbarNav li.swipe a:hover:before{width:100%}#navbarNav li.swipe a:hover:after{width:5px;opacity:1}

.navbar-toggler{border:none;outline:none;box-shadow:none!important;position:relative;width:40px;height:40px}
.navbar-toggler-icon{background-image:none!important;position:relative;width:30px;height:2px;background:var(--white);display:block;transition:.3s}
.navbar-toggler-icon::before,.navbar-toggler-icon::after{content:"";position:absolute;left:0;width:30px;height:2px;background:var(--white);transition:.3s}
.navbar-toggler-icon::before{top:-8px}.navbar-toggler-icon::after{top:8px}
.navbar-toggler.active .navbar-toggler-icon{background:transparent}
.navbar-toggler.active .navbar-toggler-icon::before{transform:rotate(45deg);top:0}
.navbar-toggler.active .navbar-toggler-icon::after{transform:rotate(-45deg);top:0}

/* Banner */
/* Banner */
.banner{ position:relative;margin-top:80px;line-height:0;}
.banner,.banner img{width:100%}

.banner video{width:100%;height:auto;}
.desktop{display:block;line-height:0;}
.mobile{display:none}

/* Content */
.content{width:100%;padding:50px 20px;background:var(--skyBlue);}
.content h1{font-family:Onest-Bold;font-size:clamp(28px,4vw,40px);background:linear-gradient(to right, rgba(239,246,255,1) 0%, rgba(239,246,255,.99) 1%, rgba(255,255,255,.58) 42%, rgba(255,255,255,0) 100%);color:var(--blue);text-align:center;padding:7px 60px;border-radius:40px;width: fit-content;
max-width: 100%; margin: 0 auto 20px;transition:all .4s}
.content h1:hover{transform:translateY(-8px);box-shadow:10px 10px 20px rgba(0,0,0,.25);border-bottom:5px solid var(--blue);border-radius:40px}
.content p{font-family:Onest-Regular;font-size:18px;color:var(--black);line-height:28px;text-align:justify}
.content p strong{color:var(--blue)}

/*Why-EduHonours-Start*/
.why-eduhonours-main{margin:0px auto;padding:35px 40px;border-radius:50px;transition: all .4s ease;}
.why-eduhonours-main h1{display:table;padding:12px 70px;margin:10px auto 20px;font-size:40px;font-family:Onest-Bold;color:var(--maroon);
background:linear-gradient(to right, rgba(245,215,183,1) 0%, rgba(245,215,183,.99) 1%, rgba(255,255,255,.58) 55%, rgba(255,255,255,0) 100%);
border-radius:50px;transition: all .4s ease;}
.why-eduhonours-main h1:hover{transform:translateY(-6px);box-shadow: 0 10px 20px rgba(0,0,0,.25);border-bottom: 5px solid var(--maroon);}
.why-eduhonours-main p {max-width: 1050px;color: var(--black);margin: 20px auto 20px;font: 18px / 24px Onest-Regular;text-align:center;}
.why-eduhonours-main h3 {max-width: 1050px;color: var(--maroon);margin: 0px auto 30px;font: 18px / 24px Onest-Bold;font-style:italic;text-align:center;}
.why-eduhonours-main .card-row{display:flex;justify-content:center;align-items:stretch;gap:20px;margin:0 0 0px;padding:0}
.why-eduhonours-main .card-row li{width:350px;min-height:120px;background:var(--white);border:2px solid var(--maroon);padding:0;
transition:all .4s; border-radius:10px;display:flex; align-items:center;justify-content:center;margin:10px 0px 10px 0px;}
.why-eduhonours-main .card-row li:hover{transform:translateY(-10px) scale(1.02);box-shadow:rgba(0,0,0,.8) 0 5px 20px;border-radius:10px}
.why-eduhonours-main .card-row li p{font-size:18px;line-height:28px;text-align:center;padding:20px 25px;margin:0;color:var(--black);font-family:Onest-Regular}
.why-eduhonours-main .card-row li:hover{background:var(--maroon);color:var(--white)}
.why-eduhonours-main .card-row li:hover p{color:var(--white)}
/*Why-EduHonours-End*/

.why-eduhonours-txt{max-width:900px;margin:10px auto 50px;text-align:center;color:var(--blue);font:20px/30px Onest-Bold;transition: transform .3s ease, color .3s ease, text-shadow .3s ease;}
.why-eduhonours-txt:hover{text-shadow: 0 0 10px rgba(183, 44, 47, .35);transform: translateY(-3px) scale(1.03);color: var(--blue);}
.why-eduhonours-txt .top, .why-eduhonours-txt .bottom{width:500px;height:2px;margin:20px auto;background:var(--skyBlue);position:relative;}
.why-eduhonours-txt .top::before, .why-eduhonours-txt .bottom::before{content:"";width:15px;height:15px;background:var(--skyBlue);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);}

/* Footer */
.footer-bg{position:relative;width:100%;overflow:hidden;background:var(--blue)}
.footer-bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.95) 1px,transparent 1px);background-size:7px 7px;opacity:.8;-webkit-mask-image:linear-gradient(to bottom,transparent 15%,rgba(0,0,0,.15) 25%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.75) 70%,#000 100%);mask-image:linear-gradient(to bottom,transparent 15%,rgba(0,0,0,.15) 25%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.75) 70%,#000 100%)}
.yellow-strip{position:absolute;top:0;right:0;width:400px;height:20px;background:#f4b321;border-radius:0 0 0 40px}
.footer-container{max-width:1100px;width:100%;margin:70px auto 50px;padding:30px 50px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid rgba(199,148,54,.35);box-shadow:18px 18px 35px rgb(0 0 0 / 55%)}
.footer-left{flex:1}
.footer-left h1{font-family:Onest-Bold;font-size:25px;color:var(--blue);text-transform:uppercase;margin-bottom:20px}
.footer-left ul{display:flex;align-items:center;list-style:none;padding:0;margin:0}
.footer-left ul li{border-left:3px solid var(--blue);padding:0 18px;line-height:1}
.footer-left ul li:first-child{border-left:none;padding-left:0}
.footer-left ul li a{display:block;position:relative;font-family:Onest-Medium;font-size:18px;color:var(--blue);text-decoration:none;transition:all .4s}
.footer-left ul li a:hover{color:var(--maroon);transform:translateY(-8px)}
.footer-right{flex:0 0 240px}
.footer-right h1{font-family:Onest-Bold;font-size:25px;color:var(--blue);margin-bottom:20px}
.footer-right ul{display:flex;justify-content:left;align-items:center;gap:12px;list-style:none;padding:0;margin:0}
.footer-right ul li{width:35px;height:35px}
.footer-right ul li img{width:100%;transition:transform .4s}
.footer-right ul li:hover img{transform:translateY(-8px)}

.blink-btn{animation:blink 1s infinite}
@keyframes blink{0%{background:#16379f}30%{background:#16379f}60%{background:#bc0624}100%{background:#bc0624}}