@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*------------------------------------*\
    MAIN
\*------------------------------------*/
/* global box-sizing */
:root{
    --blue:#01236e;
    --blue2:#2fabe9;
}
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:100%;
}

/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}
.clear:after { clear:both;}

img {max-width:100%;	vertical-align:bottom;}

a {	
    color:#444;	
    text-decoration:none;
   -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.img-over{
    overflow: hidden;
    cursor: pointer;
}
.image-content-section .img-over{
    border-radius: 5px 5px 0 0;
}
.img-over img{
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.img-over:hover{
    border-radius: 10px 10px 0 0;
}
.img-over:hover img{
    -webkit-transform: scale(1.3);
	transform: scale(1.3);
}
a:hover {text-decoration:none;}

a:focus {outline:0;text-decoration:none;}

a:hover, a:active {	outline:0;}

input:focus, textarea:focus, button:focus {	outline:0;	border:0;}

ul,li,h1,h2,h3,h4 {list-style-type:none;margin:0;padding:0}

h1      {font-size: 50px;line-height: 58px;}
h2, .fs-38{font-size: 38px;line-height: 48px;}
h3      {font-size: 34px;line-height: 40px;}
.fs-28  {font-size: 28px;line-height: 34px;}
.fs-24  {font-size: 24px;line-height: 30px;}
.fs-22  {font-size: 22px;line-height: 28px;}
.fs-20  {font-size: 20px;line-height: 26px;}
.fs-18  {font-size: 18px;line-height: 24px;}
.fs-15  {font-size: 15px;line-height: 21px;}
.fs-14  {font-size: 14px;line-height: 20px;}
.fs-12  {font-size: 12px;line-height: 20px;}

.light{font-weight: 300;}
.regular{font-weight: 400;}
.medium{font-weight: 500;}
.semibold{font-weight: 600;}
.bold{font-weight: 700;}

.text-blue{color: #14377f;}

.poppins, p{font-family: "Poppins", sans-serif;}

a{display: inline-block;}
a:hover{color:#000}

ul,li,h1,h2,h3,h4,h5 
{
    list-style-type:none;
    margin:0;
    padding:0
}
body {
    font-size: 18px;
    color: #000;
    line-height: 28px;
	font-family: 'NotoSansCJKsc-Regular';
}
@font-face {
    font-family: 'NotoSansCJKsc-Regular';
    src: url('../css/NotoSansCJKsc-Regular.otf');
}
@font-face {
    font-family: 'NotoSansCJKsc-Bold';
    src: url('../css/NotoSansCJKsc-Bold.otf');
}
.container{
    width: 98%;
    max-width: 1250px;
}
.container-large{
    width: 98%;
    margin: 0 auto;
    max-width: 1300px;
}
.theme-btn{
    display: inline-block;
    border: 2px solid var(--blue2);
    border-radius: 15px;
    padding: 5px 20px;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    background: var(--blue2);
    color: #fff;
}
.theme-btn:hover{
    background: #fff;
    color: var(--blue2);
}
/*------------------------------------*\
                HEADER
\*------------------------------------*/

.bottom-header{
    background: #c6eafe;
}

.nav_area > ul > li 
{    
    display: inline-block;
    padding: 0 30px;
    position: relative;
}
.nav_area ul li a {
    color: #14377f;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
}
.nav_area ul li a:hover{
    color:#ffae0e;
}

ul.sub-menu li a {
    color: #3c2313;
    line-height: 20px;
    padding: 10px;
    font-size: 15px;
    display: inline-block;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
}
ul.sub-menu li {
    display: block;
    position: relative;
    padding: 0 6px;
    border-bottom: 1px solid #ffffff;

}

/*---------------footer----------------------*/
.top-footer {
    background: #354db7;
    border-top: 7px solid #ffdc20;
}
.top-footer h4{
    color: #ffdc20;
}
.copyright{
    background: #3d78c4;
}
.footer ul li{
    color: #fff;
    padding-bottom: 10px;
    font-weight: 400;
}

.copyright p{
    font-size: 14px;
    line-height: 26px;
    font-weight: 400;
}

.footer-logo a{
    display: flex;
    align-items: center;
    height: 100%;
}
/*******pagination**********/


.pagination a {
    height: 45px;
    width: 45px;
    min-width: 45px;
    font-size: 14px;
    line-height: 28px;
    margin: 0 6px;
    color: #15457d;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #9d9d9d5c;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination a.active,
.pagination a:hover {
    background: var(--blue2);
    color: #fff;
}
/*------------------------------------*\
            INDEX
\*------------------------------------*/
.banner-slider-section {
    border-bottom: 7px solid #ffdc20;
}
.banner-slider .owl-dots .owl-dot.active span, 
.banner-slider .owl-dots .owl-dot:hover span,
.activiti-slider .owl-dots .owl-dot.active span, 
.activiti-slider .owl-dots .owl-dot:hover span{
    background: transparent;
    border: 3px solid #ffdc20;
}
.banner-slider .owl-dots{
    text-align: right;
    bottom: 22px;
}
.banner-slider .owl-nav {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 43%;
    left: 0;
    width: 100%;
}
.banner-slider .owl-nav button i{
    color: rgb(255 255 255 / 80%);
}
.banner-slider .owl-nav button{
    margin: 0 !important;
}
.inner-main-img{
    background: url('../image/index-main.png') no-repeat bottom;
    background-size: cover;
    z-index: 1;
    position: relative;
}

.news-slider .news-item{
    border-top: 12px solid #ffdc20;
    box-shadow: 0px 2px 8px 0 #00000052;
    border-radius: 10px;
    font-size: 15px;
    line-height: normal;
}
/*.news-item:hover{*/
/*    border-top: 12px solid red;*/
/*}*/
.news-slider .owl-nav button i,
.achievement-slider .owl-nav button i{
    color: #c4c4c4;
}
.news-slider .owl-nav,
.achievement-slider .owl-nav{
    position: absolute;
    width: calc(100% + 110px);
    display: flex;
    justify-content: space-between;
    top: 30%;
    left: -55px;
    z-index: -1;
}
.box-title {
    position: absolute;
    top: 50%;
    z-index: 1;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    text-shadow: 2px 2px 4px #000000;
}
.activiti-slider .owl-dots{
    text-align: center;
    bottom: 0;
    background: rgb(0 0 0 / 38%);
    padding: 12px;
}
.activiti-slider img{
    height: 100%;
    object-fit: cover;
}
.activity-content h4, .date{
    background: var(--blue2);
    width: 70px;
    min-width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-direction: column;
}
.activity-content{
    padding: 12px 50px 12px 35px;
}
.activity-content:nth-child(odd){
    background: #c4e7f9;
}
.activity-content:nth-child(even){
    background: #b0dff7;
}
.news-item img{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.news-item .news-content{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: relative;
}
.news-item .news-content:after{
    content: '';
    position: absolute;
    width: 80%;
    height: 20px;
    bottom: -4px;
    right: 0;
    background: url('../image/shape-bottom.png') no-repeat right;
    background-size: contain;
}
.news-item .news-content:before{
    content: '';
    position: absolute;
    width: 80%;
    height: 9px;
    top:-1px;
    left: 0;
    background: url('../image/shape-top.png') no-repeat right;
    background-size: contain;
}

.news-item:hover .news-content:after{
    content: '';
    position: absolute;
    width: 80%;
    height: 20px;
    bottom: -4px;
    right: 0;
    background: url('../image/shape-bottom-reg.png') no-repeat right;
    background-size: contain;
}
.nopic-news-item:hover{
    border-top:12px solid #ff2020
}
.news-item:hover .news-content:before{
    background: url('../image/shape-top-reg.png') no-repeat right;
}

.news-inner{
    /*height: 1150px;*/
    /*overflow-y: scroll;*/
    /*overflow-x: hidden;*/
}
.news-inner{
    padding-right: 20px;
}
.news-inner::-webkit-scrollbar {
  width: 8px;
}
.news-inner::-webkit-scrollbar-track {
  background:#6096c9;
}
.news-inner::-webkit-scrollbar-thumb {
  background: #12b6f7; 
}
.image-content-section{
    background: url('../image/bottom-bg.png') no-repeat center;
    background-size: cover;
    padding-top: 150px;
    margin-top: -90px;
}
.image-content-section .slider-title{
    left: 0;
    bottom: 0;
    padding: 10px;
    border-left: 10px solid #fcdf23;
}

.image-content-section .slider-title:hover{
    left: 0;
    bottom: 0;
    padding: 10px;
    border-left: 10px solid red;
}
.achievement-slider .news-item{
    border-radius: 5px;
}

.achievement-slider .news-item img{
    height: 250px;
    object-fit: cover;
}
/*------------------------------------*\
        SCHOOL-CALENDAR
\*------------------------------------*/
.calendar-page{
    background: url('../image/calender-bg.png') no-repeat center;
    background-size: cover;
}
.banner-slider-section h1{
 color: #fff;
 padding: 15px 0;
}
.banner-title{
    background: url(../image/banner-title-bg.png) no-repeat left bottom;
    position: absolute;
    bottom: 0;
    z-index: 8;
    width: 100%;
    background-size: 40% 100%;
}
.inner-sec-title{
    color: #441bff;
    border-bottom: 2px solid #399ce0;
    padding-bottom: 15px;
}
h3.event-title {
    font-size: 14px;
    font-weight: 800;
    font-family: 'Montserrat';
}
h3.event-title::before{
    content: '';
    display: inline-block;
    height: 13px;
    width: 13px;
    margin-right: 10px;
}
h3.exam:before {
    background-color: var(--blue2);
}
h3.make-up:before {
    background-color: #8750c9;
}
h3.function:before {
    background-color: #41d3d6;
}
h3.holiday:before {
    background-color: #ae2d29;
}
a.download {
    font-size: 20px;
    display: inline-block;
    color: #ffdc20;
    background: #084079;
    padding: 5px 40px;
    text-decoration: none;
    border-radius: 5px;
}
a.download:hover{
    background: #ffdc20;
    color:#084079;
}
.all-event h2{
    font-size: 36px;
    line-height: 40px;
}
.all-event h2::before{
    content: '';
    background: #ffdc20;
    width: 10px;
    height: 65%;
    position: absolute;
    top: 6px;
    left: 0;
}
.event-left {
    border-right: 2px solid #37619d;
    min-width: 100px;
}
.event-left h3 {
    padding-right: 10px;
    display: inline-block;
    font-size: 25px;
    font-weight: 600;
}
.event-middle img {
    max-width: 150px;
    padding-left: 20px;
}
.event-right {
    padding-left: 20px;
}
.event-right h3 {
    font-size: 19px;
    font-weight: 600;
}
.event-item {
    border: 3px solid #bccee0;
    padding: 15px;
    background: #fff;
}

/*------------------------------------*\
            CMS-DETAILS
\*------------------------------------*/
.inner-sec-title h2:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 84%;
    height: 1px;
    background: var(--blue2);
}
.select-drop {
    border: 1px solid #9d9d9d;
    padding: 8px 50px 8px 40px;
    font-size: 17px;
    line-height: normal;
     -webkit-appearance: none;
        -moz-appearance: none;
        background: #fff url(../image/dropdown.png) no-repeat right 16px center;
        position: relative;
        z-index: 1;
   
}

.sidebar {
    background: url(../image/sidebar-title-bg.png) no-repeat top center / 100% 32px;
    padding-top: 32px;
}
.sidemenu {
    background-color: #fff;
    padding: 15px;
    border-radius: 0 0 15px 15px;
}
h3.sidebar-title {
    padding: 10px 15px;
    background:#fff;
    background-size: 100% 100%;
    color: #084079;
    font-size: 22px;
    position: relative;
}
h3.sidebar-title i{
    position: absolute;
    right: 25px;
}

.sidebar > ul >li > a {
    font-size: 18px;
    line-height: 25px;
    color: #000;
    padding: 10px 0;
    position: relative;
    display: block;
}
.oneMenu:hover{
    color: var(--blue2);
}
.twoMenu:hover{
    color: var(--blue2);
}
.sidebar > ul >li > a i{
    color: var(--blue2);
    position: absolute;
    right: 0;   
}
.sidebar ul.sidemenu > li{
    border-bottom: 1px solid #ccc;
}

ul.side-sub-menu {
    padding: 0px 15px 15px;
    display: none;
}
ul.side-sub-menu li a{
    font-size: 17px;
    color: #01236e;
    line-height: 30px;
}
.cms-detail-title{
    border-bottom: 2px dashed var(--blue2);
}
.thumb-slider .owl-theme .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    width: calc(100% + 80px);
    justify-content: space-between;
    margin: 0;
    left: -40px;
}
.album-slider.owl-theme .owl-nav [class*=owl-] {
    background: var(--blue2);
    height: 35px;
    width: 35px;
    border-radius: 100%;
    color: #fff;
    margin-left: 30px;
    margin-right: 30px;
}
#sync2.owl-theme .owl-nav {
    font-size: 26px;
    color: #999999;
}
.all-album-slider.owl-carousel .owl-nav button.owl-prev, .all-album-slider.owl-carousel .owl-nav button.owl-next {
    background: 0 0;
    color: var(--blue2);
    border: none;
}
.all-album-slider .owl-item.active img {
    border: 4px solid transparent;
}
.all-album-slider .owl-item.current img {
    border: 4px solid var(--blue2) !important;
}
.thumb-slider{
    position: relative;
}
.thumb-slider:after{
    content: '';
    position: absolute;
    background: #effbff;
    width: 100%;
    bottom: 0;
    height: 60%;
    left: 0;
}
/*------------------------------------*\
            CMS-INDEX
\*------------------------------------*/
.select-box {
    position: relative;
}
.activity-box .date{
    width: 60px;
    min-width: 60px;
    height: 60px;
    position: absolute;
    left: 10px;
    top: 10px;
}
.activity-box img{
    border-radius: 15px;
}
body {
    overflow-x: hidden;
}

/****** Tablet Layout ******/
@media only screen and (min-width: 768px) and (max-width: 991px) { 
.footer .row.pb-3 {
    padding-left: 0px !important;
    padding-right: 0px !important; 
}
.footer .row a {
    font-size: 13px !important;
}
}

/****** Medium Layout ******/
@media only screen and (min-width: 992px) and (max-width: 1200px) { 
.footer .row.pb-3 {
    padding-left: 0px !important;
    padding-right: 0px !important; 
}


}