@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
@charset "utf-8";
/* CSS Document */
html { font-size: 100% }
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary, title { display: block }
body { font-family: 'Fira Sans', sans-serif; font-weight: normal; font-style: normal; font-size: 16px; line-height: 15px; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0 }
fieldset, img { border: 0 }
ol, ul { list-style: none }
sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline }
sup { top: -0.5em }
sub { bottom: -0.25em }
* { outline:none !important; }
a:active, a:focus, a:hover, input[type="image"], select:focus, input, input[type="button"]:focus, :focus { outline: 0; text-decoration: none; }
.clearfix { *zoom:1}
.clearfix:before, .clearfix:after { display: block; content: ""; line-height: 0 }
.clearfix:after { clear: both }
.clear { clear: both }
.btn { outline: 0px; }
.lists { list-style: none; margin: 0px; padding: 0px;}
.mainpage{ position:relative;}
.container{ max-width:1200px; margin:0 auto; position:relative;}
a, button{ transition:all 0.5s ease-in-out;}
*, :after, :before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.color1
{ color:#F7494B
}

/*  */
header{ width:100%; position: absolute; left:0; top:25px; right:0;}
.nav-logo{ float:left; width:210px;}
.m-logo{ display:none;}
.d-logo{ display:block;}


.NavRight{ float:right; width:665px; padding:10px 0 0; position:relative;}
.NavRight li{ float:left; margin-left:18px;}
.NavRight li a{ font-size:20px; color:#232323; display:inline-block; font-weight:500; vertical-align:top;}
.NavRight li a img{ margin-right:5px; width:26px; height:auto; vertical-align:middle;}
.NavRight li a span{ font-weight:300;}
.NavRight li a:hover{ color:#F7494B;}
 
/*styling open close button*/
.menu { display:inline; position:fixed; right:20px; top:20px; z-index:999;}
.menu a { text-decoration:none;}
.btn-open:after { content:''; background:url(../images/Menu.svg) center top no-repeat; width:45px; height:45px; background-size:100%; position:absolute; top:0; right:0; transition-property:all .2s linear 0s; -moz-transition:all .2s linear 0s; -webkit-transition:all .2s linear 0s; -o-transition:all .2s linear 0s; }
.btn-close:after {content:''; background:url(../images/close.svg) center top no-repeat; width:45px; height:45px; background-size:100%; position:absolute; top:0; right:0; transition-property:all .2s linear 0s; -moz-transition:all .2s linear 0s; -webkit-transition:all .2s linear 0s; -o-transition:all .2s linear 0s; }

/*overlay*/
.overlay { display:none; position:fixed; top:0; height:100%; width:100%; background:#F7494B; overflow:auto; z-index:99;}
.wrap { color:#e9e9e9; text-align:justify; max-width:90%; margin:0 auto; }
.wrap ul.wrap-nav { 	text-transform:capitalize;	padding:150px 0px 100px;}
.wrap ul.wrap-nav li {
	font-size:20px;
	display:inline-block;
	vertical-align:top;
	margin-right: 15px;
	position:relative;
}
.wrap ul.wrap-nav li a {
	color:rgb(255 255 255 / 85%);
	display:block;
	padding:12px 0;
	font-size:16px;
	text-decoration:none;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s; text-transform:uppercase
}
.wrap ul.wrap-nav li a:hover {
	color:#fff;
}
.wrap ul.wrap-nav ul {
	padding:20px 0;
}
.wrap ul.wrap-nav ul li {
	display:block;
	font-size:13px; 
	width:100%;
	color:rgb(255 255 255 / 85%);
    text-align: justify;

}
.wrap ul.wrap-nav ul li a {
	color:rgb(255 255 255 / 85%);
}
.wrap ul.wrap-nav ul li a:hover {
	color:#fff;
}
 




/* Hero Area Css */
.heroarea{ width:100%; background:url(../images/herobg.png) center 0 no-repeat; height:900px; background-size:cover; padding:100px 0 0;}
.heroarea h1{ color:#F7494B; font-size:60px; font-weight:800; margin: 60px 0 20px; line-height:100px;}
.heroarea p{ font-size:26px; color:#232323; line-height:45px; margin-bottom:25px;}
.heroarea p a{ background:#F7494B; padding:12px 25px; font-size:20px; font-weight:600; text-transform:uppercase; display:inline-block; line-height:26px; color:#fff; position:relative;}
.heroarea p a:hover{ background:#232323;}
.heroarea p a:before { border: 1px solid #F7494B; width: 160px; height: 45px; position: absolute; left: 10px; top: 10px; content: ''; z-index: -1;}
.SlideLeft{ width:40%; float:left; padding:0 20px 0 50px;}
.SlideRight{ width:60%; float:left; position:relative;}
.heroarea .slick-dots{ bottom:-25px;}
.heroarea .slick-dots li{ width:30px;}
.heroarea .slick-dots li button:before{ width:15px; height:15px; color:#4E4E4E; background:#4E4E4E;}
.heroarea .slick-dots li.slick-active button:before { background:#F7494B;}

.d-hide{ display:none;}


.onlineClass{ background:url(../images/onlineClass.png) left top no-repeat; width:283px; height:220px; margin-top:65px; padding:60px 0 0 ; text-align:center;}
.onlineClass h2{ font-size:22px; text-transform:uppercase; margin-bottom:15px;}
.onlineClass h4{ font-size:18px; font-weight:400;}
.onlineClass h4 img{ display:inline-block; margin-right:15px; width:55px; height:auto;}
 
/* Who we are */
.WhoAre{ width:100%; padding:70px 0 0; position:relative; background:url(../images/whobg.png) -50px top no-repeat; background-size:550px;} 
.WhoAre h2{ color:#F7494B; font-size:55px; font-family: 'Sacramento', cursive; line-height:45px; margin-bottom:15px;}
.WhoAre h3{ color:#232323; font-size:30px; font-weight:600; line-height:45px; margin-bottom:45px;}
.WhoAre h4{ font-size:32px; color:#FAB31C; line-height:30px; font-weight:600; margin:5px 0 15px;}
.WhoAre p{ font-size:16px; color:#6D6D6D; line-height:24px;}

.WhoAre .bestplay{ position:absolute; left:-50px; top:-50px; width:400px;}
.WhoAre .bestplay .round{ position:absolute; width:150px; height:150px; border:20px solid rgb(247 73 75 / 85%); right:0; bottom:-20px; border-radius:50%; animation: rotating 10s infinite linear; background:#fff; z-index:1;}

.loader {
  border: 16px solid #F7494B;
  border-radius: 50%;
  border-top: 16px solid rgb(247 73 75 / 75%);
  border-bottom: 16px solid rgb(247 73 75 / 75%);
  width: 120px;
  height: 120px;
  -webkit-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite;
  position:absolute; right:0; bottom:0; z-index:9;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.WhoBx{ width:100%; position:relative; margin-bottom:30px; padding-left:130px;}
.WhoBx span{ width:100px; height:100px; border-radius:5px; position:absolute; left:0; top:0; text-align:center; padding:16px 0 0; background:#FEEFCF; border:2px solid #FEEFCF; transition:all 0.3s ease-in-out;}
.WhoBx span:hover{ background:#fff;}
.WhoBx span img { width:70px; height:auto;}
.WhoBx1{ width:100%; position:relative; margin-bottom:30px; padding-left:130px;}
.WhoBx1 span{ width:100px; height:100px; border-radius:5px; position:absolute; left:0; top:0; text-align:center; padding:16px 0 0; background:#FDD5D5; border:2px solid #FDD5D5; transition:all 0.3s ease-in-out;}
.WhoBx1 span img { width:70px; height:auto;}
.WhoBx1 h4{ color:#F32C2C}
.WhoBx2{ width:100%; position:relative; margin-bottom:30px; padding-left:130px;}
.WhoBx2 span{ width:100px; height:100px; border-radius:5px; position:absolute; left:0; top:0; text-align:center; padding:16px 0 0; background:#F9DDEE;border:2px solid #F9DDEE; transition:all 0.3s ease-in-out;}
.WhoBx2 span img { width:70px; height:auto;}
.WhoBx2 h4{ color:#DF57A8}
.WhoBx3{ width:100%; position:relative; margin-bottom:30px; padding-left:130px;}
.WhoBx3 span{ width:100px; height:100px; border-radius:5px; position:absolute; left:0; top:0; text-align:center; padding:16px 0 0; background:#DCF4FC;border:2px solid #DCF4FC; transition:all 0.3s ease-in-out;}
.WhoBx3 span img { width:70px; height:auto;}
.WhoBx3 h4{ color:#51C9EE}
.WhoBx:hover span, .WhoBx1:hover span, .WhoBx2:hover span, .WhoBx3:hover span{ background:#fff;} 
/* Notice Board */ 
.NoticeBoard { width:100%; padding:60px 0 10px;}
.NoticeBoard .container{ background:#F8F8F8; padding:25px 20px; border-radius:10px;} 
.NoticeBoard h2{ color:#F7494B; font-size:55px; font-family: 'Sacramento', cursive; line-height:45px; margin-bottom:25px;}
.NoticeBoard h2 a.view-btn { font-family: 'Poppins', sans-serif; font-size:16px; float:right; background:#F7494B; padding:7px 20px; border-radius:5px; line-height:26px; color:#fff; text-transform:uppercase;}
.find-txt{ margin-bottom:20px; font-size:22px; color:#232323; line-height:26px;} 
.NoticeBoard .board-slide.slick-initialized.slick-slider{ padding-right:105px;}
.NoticeBoard .slick-slide{ background:#fff; border-radius:8px; padding:10px 10px 10px 65px; position:relative; margin-right:15px;}
.NoticeBoard .count{ width:30px; height:30px; border-radius:0%; text-align:center; line-height:30px; color:#fff; font-size:16px; font-weight:600; position:absolute; left:20px; top:37px; border-radius:50%; background:#F7494B; z-index:1;} 
.NoticeBoard .NoticeLeft{ width:90px; position:relative; float:left; font-size:50px; text-align:center; color:#646464; line-height:45px; font-weight:700;}  
.NoticeBoard .NoticeLeft span{ font-size:14px; display:block; border-bottom:1px solid #D1D1D1; margin-bottom:8px; font-weight:400;}  
.NoticeBoard .Noticeright{ width:calc(100% - 120px); float:right; font-size:18px; color:#646464; line-height:30px; position:relative; font-weight:600; padding:33px 0 0;}
.NoticeBoard .Noticeright span{ background:#F7494B; padding:4px 6px; color:#fff; font-size:12px; font-weight:600; position:absolute; left:0; top:0; line-height:16px; border-radius:3px;} 
.NoticeBoard .Noticeright span:before{ content:''; width:0; height:0; border-left: 7px solid transparent; border-right: 7px solid transparent;  
  border-top: 7px solid #F7494B; position:absolute; left:3px; bottom:-7px;} 
.NoticeBoard .slick-prev.slick-arrow{ background:url(../images/preev.png) left top no-repeat; width:42px; height:80px; background-size:100%; color:transparent; top:auto; right:55px; bottom:20px; cursor:pointer;}
.NoticeBoard .slick-next.slick-arrow{ background:url(../images/next.png) left top no-repeat; width:42px; height:80px; background-size:100%; color:transparent; top:auto; right:0; bottom:20px; cursor:pointer;}

.news_iconimg { display:none}
a.eventH1
{font-size: 18px;
    color: #646464;
}
/* Photogallery & Achievements */
.PhotogalleryAchievements { width:100%; padding:60px 0; position:relative;}
.PhotogalleryAchievements h2{ color:#F7494B; font-size:55px; font-family: 'Sacramento', cursive; line-height:45px; margin-bottom:25px;}
.PhotogalleryAchievements p{ font-size:18px;   line-height:30px; padding-bottom:20px; font-weight:500;} 
.PhotogalleryAchievements li{ float:left; width:32%; margin:5px 0.50%;}
    .PhotogalleryAchievements li a 
    { display:block; height:125px; overflow:hidden; width:100%;
    }
.PhotogalleryAchievements .achiment p{ margin-top:15px;}

#AchievementHome_lblAchievement ul li
{ width:100%; text-align:center; display:block; margin:0
}
  #AchievementHome_lblAchievement a 
    { display:block; height:280px; overflow:hidden; width:100%;
    }
    #AchievementHome_lblAchievement ul li a img
    { max-width:100%;
    }
 
/* From the Desk of Slide */
.FromDeskWrap{ background:#FEF8F1; padding:40px 0 70px;}
.FromDeskWrap h2{ color:#F7494B; font-size:55px; font-family: 'Sacramento', cursive; line-height:45px; margin-bottom:45px; text-align:center;} 
.FromDeskWrap .slider-for{ text-align:center; margin:30px 0 0;}
.FromDeskWrap .slider-for p{ font-size:20px; line-height:42px; color:#232323; padding-bottom:30px;}
.FromDeskWrap .slider-for h3{ color:#F7494B; font-size:25px; font-weight:700; margin-bottom:25px;} 
.FromDeskWrap .slider-for p a{ color:#232323; font-size:40px; margin:0 15px;}  
.FromDeskWrap .slider-for p a:hover{ color:#F7494B;} 
.FromDeskWrap .slider-nav{ width:50%; margin:0 auto;}
.FromDeskWrap .slider-nav.slick-initialized .slick-slide{ opacity:0.5; cursor:pointer;}
.FromDeskWrap .slider-nav.slick-initialized .slick-slide img{ width:90px; height:90px; margin:10px 0 0; border:2px solid #ccc; border-radius:50%;}
.FromDeskWrap .slider-nav .slick-slide.slick-current.slick-center{ opacity:1;}
.FromDeskWrap .slider-nav .slick-slide.slick-current.slick-center img{ width:110px; height:110px; margin:0px;}
 
/* Two Section */ 
.RankBirthday{ width:100%; padding:70px 0;} 
.RankBirthday h2{ color:#F7494B; font-size:55px; font-family: 'Sacramento', cursive; line-height:45px; margin-bottom:20px;} 
.RankBirthday p{ font-size:18px; font-style:italic; color:#1A1A1A; line-height:30px; padding-bottom:20px; font-weight:500;} 
.year-txt{ font-size:16px; color:#F7494B; margin-bottom:25px;} 
.RankBirthday h3{ font-size:17px; color:#646464; line-height:20px; margin-bottom:10px; font-weight:600;}
.RankBirthday h4{ font-size:30px; color:#F7494B; font-weight:200; line-height:35xp;}
.class-txt{ position:absolute; bottom:25px; right:5px; color:#fff; background:url(../images/classbg.svg) center top no-repeat; width:40px; height:45px; background-size:100%; line-height:36px; text-align:center;}
.RankBirthday .slick-initialized .slick-slide{ margin-right:10px; position:relative; margin-bottom:20px; border-radius:5px; border:1px solid rgb(112 112 112 / 20%); padding:5px;}
.RankBirthday .studentBx{ margin-bottom:15px;}
.RankBirthday .slick-list{ padding-bottom:50px;}
.RankBirthday .slick-prev.slick-arrow{ background:url(../images/left-arrow.png) left top no-repeat; width:20px; height:16px; background-size:100%; color:transparent; top:auto; left:0; bottom:39px; cursor:pointer;}
.RankBirthday .slick-next.slick-arrow{ background:url(../images/right-arrow.png) left top no-repeat; width:20px; height:16px; background-size:100%; color:transparent; top:auto; left:30px; bottom:39px; cursor:pointer;} 
 
/* Thought css */
.ThoughtWrap{ width:100%; padding:40px 0; background:#F7494B; text-align:center;} 
.ThoughtWrap h2{ color:#fff; font-size:70px; font-family: 'Sacramento', cursive; line-height:75px; margin-bottom:30px;} 
.ThoughtWrap p{ color:#fff; font-size:24px; line-height:35px; font-weight:500; position:relative;}
.ThoughtWrap p:before{ background:url(../images/icon-day.svg) left top no-repeat; width:118px; height:95px; position:absolute; left:10%; top:-30px; content:''; opacity:0.5;}  
.ThoughtWrap p span{ font-weight:400; display:block; font-size:20px; font-style:italic; margin-top:10px;}
.mster
{ line-height:25px; text-align:justify
}
.mster p
{  margin-bottom:15px; text-align:justify
}
 
/* Footer Css */ 
footer{ width:100%; background: url(../images/footerbg.png) center 230px no-repeat #1c80ff; padding:50px 0 450px; position:relative; background-size:100%;}
footer:after{ width:100%; background:url(../images/building.png) center top no-repeat; content:''; left:0; right:0; bottom:0; z-index:0; height:616px; position:absolute; background-size:100%;}
footer .mobilehand{ position:absolute; right:0; top:-30px; width:400px; z-index:-1;}
footer h2{ color:#F7494B; font-size:55px; font-family: 'Sacramento', cursive; line-height:55px; margin-bottom:15px;} 
footer p{ color:#232323; font-size:20px; line-height:34px; font-weight:400; position:relative; margin-bottom:30px;}
footer p a{ margin-right:10px;}
footer .EnterSchoolCode{ width:100%; padding-left:70px; color:#F7494B; font-size:55px; line-height:50px; font-weight:700; margin-bottom:50px;} 
footer .EnterSchoolCode span{ font-size:22px; color:#3B3735; font-weight:400; display:block; padding-left:15px;} 
.downloadPro{ width:100%;} 
.downloadPro a{ display:inline-block; background:#F7494B; color:#fff; font-size:24px; margin-top:30px; font-weight:400; padding:12px 20px; border-radius:4px;} 
.downloadPro a img{ width:26px; height:auto; margin-right:8px; vertical-align:middle;} 
 
footer .footerView{ width:100%; margin:70px 0 0; text-align:right;} 
.footerView li{ display:inline-block; width:20%; text-align:center;}
.footerView li img{ width:75px; height:auto;} 
.footerView li p{ font-size:26px; color:#fff; padding:15px 0 0;} 
.footerAbout{ width:100%; padding:20px 0 0; margin-bottom:40px;} 
.footLeft { float:left; width:440px;} 
.footRight{ width:calc(100% - 440px); float:left; color:#fff; font-size:17px; line-height:26px;} 
.footerLink{ width:100%; padding:20px 0; border-top:1px solid rgb(255 255 255 / 50%); border-bottom:1px solid rgb(255 255 255 / 50%); text-align:center;} 
.footerLink li{ display:inline-block;} 
.footerLink li a{ color:#fff; font-size:16px; display:inline-block; padding:5px 15px;} 

.FooterLocation{ width:100%; padding:30px 0 0;}
.LocationMap{ width:90px; float:left;}
.mapview{ width:calc(100% - 120px); float:left; padding:13px 0 0 18px;}
.mapview h3{ font-size:18px; color:#fff; font-weight:7000;}
.mapview p{ font-size:13px; color:#fff;}
.website-txt{ text-align:center; font-size:14px; color:rgb(255 255 255 / 70%);}

.FootAddress{ text-align:right; width:100%;}
.FootAddress h4{ font-size:28px; color:#fff; font-weight:700; margin-bottom:10px; line-height:28px;}
.FootAddress p{ font-size:15px; color:#fff; line-height:26px;}



/* Inner banner */
.heroarea.inner-banner{ height:450px; padding:70px 0 0;}

.about-indent{ padding:70px 0; width:100%;}
.about-indent h2{ color:#F7494B; font-size:25px; font-weight:800; margin:0 0 20px; line-height:20px;}
.about-indent p{ font-size:18px; color:#232323; line-height:28px; margin-bottom:25px;}
.about-indent p a{ background:#F7494B; padding:12px 25px; font-size:20px; font-weight:600; text-transform:uppercase; display:inline-block; line-height:26px; color:#fff; position:relative;}
.about-indent ul{ margin-left:20px;}
.about-indent li{ font-size:18px; color:#232323; line-height:28px; margin-bottom:5px; list-style:outside;}




