@font-face {
  font-family: 'Picket Font';
  src:  url('../fonts/Gotham_Rounded_Bold.otf') format('truetype');
}


@font-face {
  font-family: 'Picket Body Font';
  src:  url('../fonts/Gotham_Rounded_Light.otf') format('truetype');
}

.d-flex{
	display: flex !important;
}

.justify-content-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

body{
	font-family: 'Picket Body Font';
}

.yellow-bg-pf{
	background-color:#0061a1;
	border-radius: 20px;
	padding: 12px;
	margin-top: 0px;
	margin-right: 20px;
	margin-left: 20px;
	border: 5px solid #fff;
}

.font-30{
	font-size: 30px !important;
}

.text-brown-pf{
	color: #67421c !important;
}

.text-white-pf{
	color: #ffffff !important;
}

.nav-list a{
	font-family: 'Picket Font' !important;
	font-size: 16px;
	color: #85cbf9;
	letter-spacing: 0.5px;
}

.picket-cabang a{
	font-family: 'Picket Font' !important;
	font-size: 17px;
	color: #85cbf9;

}

.picket-font{
	font-family: 'Picket Font' !important;
	color: #0061a1;
}

/* ABOUT SECTION HOME */
.picket-about-bg{
	background-color: #ffffff;
	padding: 15px;
	border-radius: 10px;
	z-index: 9;
	top: -150px;
	position: absolute;
}

.picket-about-bg img{
	border-radius: 5px;
}

/*Contact Section*/

.contact-bg{
	background-image: url(../img/wave.svg);
	background-repeat: no-repeat;
	background-size: cover;
}

.contact-bg-bottom{
	background-image: url(../img/wave-bottom.svg);
	background-repeat: no-repeat;
	background-size: cover;
}

.grid-contact{
	background-color: #fff;
	border-radius: 10px;
	padding: 10px 15px;
	text-align: center;
	box-shadow: 10px 10px 15px rgba(0,0,0,0.2);
	margin-bottom: 30px;
}

.grid-contact h3{
	margin-top: 2px;
	margin-bottom: 2px;
	font-family: 'Picket Font';
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0px;

	line-height: 1em;
}

.grid-contact img{
	width: 100px;
	margin-bottom: 20px;
	margin-top: 20px;
}

/* CURRICULUM SECTION*/
.left-image-bg{
	background-color: rgba(255,255,255,0.5);;
	padding: 30px;
	border-radius: 15px;
	backdrop-filter: blur(5px);
}

.left-image-bg img{
	border-radius: 15px 50px;
	background-color: #f99d1c;
	padding: 15px;
	box-shadow: 12px 12px 11px #ccc;
}

.left-image-bg h1{
	color: #f99d1c;
	font-family: 'Picket Font' !important;
	font-size: 2.2em;
}

.left-image-bg h1: before{
	content: "";
	display: block;
	background: #F0F0F0;
	width: 200px;
	height: 50px;
}

.right-image-bg{
	background-color: rgba(240,240,240,0.5);
	padding: 30px;
	border-radius: 15px;
	backdrop-filter: blur(5px);
}

.right-image-bg img{
	border-radius: 15px 50px;
	background-color: #0061a1;
	padding: 15px;
	box-shadow: 15px 15px 10px #ccc;
}

.right-image-bg h1{
	color: #0061a1;
	font-family: 'Picket Font' !important;
	font-size: 2.2em;
}

/* section gallery */
.section-gallery-wave{
	background-image: url(../img/wave.svg);
	background-repeat: no-repeat;
	background-size: cover;
}

.section-gallery{
	background-color:#0061a1;
}

.section-gallery h1{
	font-family: 'Picket Font';
	color: #fff;
	letter-spacing: 0px;
	font-size: 2.5em;
}

.grid-gallery{
	background-color: #f99d1c;
	padding: 12px;
	border-radius: 10px 30px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
	margin-top: 20px;
	min-height: 200px;
}

.grid-gallery h2{
	font-family: 'Picket Font' !important;
	font-size: 16px;
	text-align: center;
	color: #fff;
	letter-spacing: 0.3px;
}

.grid-gallery img{
	border-radius: 5px 15px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}


.footer-bg{
	background-color: #f99d1c !important;
}

.footer-bg p{
	color:#fff !important;
}

.footer-bg ul li a{
	color: #fff !important;
	font-size: 16px;

}

/* PAGE OPTION*/

.background-img{
	background-image: url(../img/bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

.schoool-opt-sec{
	height: 100%;
	width: 100%;
	position: absolute;
	background-color: rgba(255, 255, 255, 0,6);
	backdrop-filter: blur(7px);
}

.school-center{
	display: flex;
  	align-items: center !important;
  	justify-content: center;
  	margin: 0 auto;
}

.col-school-center{

  	position: relative;
  	top: 32vh; /*left: 50%;
  	transform: translate(96%);*/
}

.grid-page-opt{
	background-color: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(5px);
	padding: 15px;
	border-radius: 20px;
	border: 5px solid rgba(255, 255, 255, 0.5);
	box-shadow: 4px 5px 5px rgba(0, 0, 0, 0.2);
	transition: 0.1s;
}

.grid-page-opt:hover{
	background-color: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(5px);
	padding: 15px;
	border-radius: 20px;
	border: 5px solid rgba(0, 97, 161, 0.8);
	box-shadow: 4px 5px 5px rgba(0, 0, 0, 0.2);
}

/* Animation Bounce Product */
.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

/* Header Page Title*/

.curve {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 5.5rem 2rem;
  width: 100%;
  z-index: 2;
}

.curve::before {
    content: '';
    display: block;
    background-image: url(../img/slider1.jpg);
    background-size:;
    background-position: bottom;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 150vw;
    width: 300vw;
    height: 350vw;
    z-index: -1;
 }

  .curve::after {
    content: '';
    display: block;
    background-color: rgba(0, 97, 161, 0.2);
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 150vw;
    width: 300vw;
    height: 350vw;
    z-index: -1;
  }

  .font-page-title{
  	font-family: 'Picket Font';
  	color: #0061a1;
  	text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;

  }

/* About Page Style*/

.heading-title{
	font-family: 'Picket Font';
	color:#0061a1;
	margin-bottom: 12px;
}

.about-heading-section{
	padding: 2rem 0rem;
}

.about-heading-section h2{
	color: #0061a1;
	text-align: center;
	font-size: 20px;
	font-family: 'Picket Font';
	line-height: 24px;
}

.about-story-section{
	padding: 2rem 0rem;
	margin-bottom: 2rem;
}

.about-story-section img{
	box-shadow: 5px 4px 10px rgba(0, 0, 0, 0.4);
	border-radius: 20px;
}

.about-philosophy-section{
	padding: 3rem 0rem;
	background-image: url(../img/early-years.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	z-index: 9;
}

.about-philosophy-section::before{
	background: rgba(255,255,255, 0.7) none repeat scroll 0 0;
	backdrop-filter: blur(5px);
	background-attachment: fixed;
    content: " ";
    height: 100%;
    left: -1;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.about-philosophy-section h2{
	color: #0061a1;
	font-family: 'Picket Font';
	line-height: 24px;
	margin-bottom: 1.5rem;
}

.about-vision-section{
	padding-top: 80px;
	padding-bottom: 70px;
	background-color: #f0f0f0;
}

.about-vision-section h3{
	color: #fff;
	font-family: 'Picket Font';
	font-size: 18px;
	margin-top: 0px;
	display: inline-block;	
	background-color: #f99d1c;
	padding: 5px 15px;
	letter-spacing: 1px;
	border-radius: 10px;

}

.about-vision-section p{
	margin-bottom: 30px;

}

.about-vision-section img{
	box-shadow: 5px 4px 10px rgba(0, 0, 0, 0.4);
	border-radius: 20px;
	margin-bottom: 30px;
}


.about-vision-section ul li{
	list-style-type: disc;
	margin-left: 18px;
}

.about-testi-section{
	background-color: #f99d1c;
	padding: 3rem 0rem;
}

.about-testi-section h1{
	font-family: 'Picket Font';
	color: #fff;
	text-align: center;
	font-size: 2em;
	margin-bottom: 30px;
}

.about-accolades-section{
	background-color: #0061a1;
	padding: 2rem 0rem;
}

.about-accolades-section h2{
	font-family: 'Picket Font';
	color: #fff;
	text-align: center;
	font-size: 2em;
}

.section-accolades-wave{
	background-image: url(../img/wave.svg) !important;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #f99d1c;
	margin-top: -10px;
}

/* Curriculum Page Style */

/* Gallery Page Style */

.gallery-grid-section{
	padding: 4rem 0rem;
}

.bg-grid-gallery{
	background-color: #0061a1;
    padding: 12px;
    border-radius: 10px 10px;
    box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
    margin-top: 20px;
    min-height: 200px;
    transition: 0.5s;
    
}

.bg-grid-gallery:hover{
	margin-top: 12px;
}


.bg-grid-gallery img{
	border-radius: 5px 5px;
    box-shadow: 2px 2px 5px rgb(0 0 0 / 20%);
}

.bg-grid-gallery h4{
	color: #fff;
	text-align: center;
	margin: 12px 0px 0px 0px;
	font-size: 16px;
	letter-spacing: 0.5px;
}

.title-gallery-detail{
	color: #fff;
	font-size: 24px;
	display: inline-block;
	background-color: #0061a1;
	border-radius: 5px;
	padding: 2px 12px;
	margin-bottom: 20px;
}

.gallery-detail img{
	border-radius: 5px;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
	transition: 0.3s;
}

.gallery-detail img:hover{
	border-radius: 5px;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
	margin-top: 12px;
}

/* PORTAL ACCESS STYLE */
.bg-grid-portal{
	background-color: #0061a1;
    padding: 12px;
    border-radius: 10px 10px;
    box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
    margin-top: 20px;
    min-height: 200px;
    transition: 0.2s;
    
}

.bg-grid-portal:hover{
    border-radius: 20px 20px;
    border: 5px solid #f99d1c;
}


.bg-grid-portal img{
	border-radius: 5px 15px;
	margin: 0 auto;
}

.bg-grid-portal h4{
	color: #fff;
	text-align: center;
	margin: 12px 0px 0px 0px;
	font-size: 20px;
	letter-spacing: 0.5px;
}

.justify-content-center{
	display: flex;
	justify-content: center;
}

/* NEWS PAGE STYLE*/
.section-news{
	padding: 3rem 0;
}

.bg-news img{
	border-radius: 10px;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.bg-news h4{
	color: #0061a1;
	margin-top: 15px;
	font-size: 18px;
}

.bg-news h4::after{
	content: "";
	display: block;
	background-color: #f99d1c;
	height: 3px;
	width: 100px;
	margin-top: 10px;
}

.bg-news p{
	font-size: 15px;
	line-height: 25px;
}

.bg-news a{
	display: inline-block;
	background-color: #f99d1c;
	padding: 2px 12px;
	border-radius: 2px;
	color: #fff;
	font-size: 15px;
	font-family: 'Picket Font';
	letter-spacing: 1px;
	transition: 0.2s;
}

.bg-news a:hover{
	display: inline-block;
	background-color: #0061a1;
	padding: 2px 12px;
	border-radius: 2px;
	color: #fff;
	font-size: 15px;
	font-family: 'Picket Font';
	letter-spacing: 1px;
}

.bg-detail-news h4{
	font-size: 14px;
	margin-top: 0px;
}

.bg-detail-news a{
	font-size: 14px;
	margin: 0;
}

.latest-events-title{
	color: #0061a1;
	font-size: 20px;
}

.latest-events-title::after{
	content: '';
	display: inline-block;
	width: 100%;
	height: 3px;
	background-color: #f0f0f0;
}

.enquiry-form-picket h4{
	color: #0061a1;
}

.enquiry-form-picket h4::after{
	content: "";
	display: block;
	height: 2px;
	margin-top: 12px;
	background-color: #f0f0f0;
}

.enquiry-form-picket label{
	color: #0061a1;
	font-family: 'Picket Body Font';
	font-size: 13px;
	letter-spacing: 0.4px;
}

/* CONTACT PAGE STYLE */
.contact-section{
	padding: 4rem 0;
	background: url(../img/curriculum-bg.png);
	background-size: contain;
	background-repeat: repeat;
	background-attachment: fixed;
}

.bg-white-contact{
	background-color: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	padding: 1rem;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
	border-radius: 20px;
	margin-bottom: 30px;
}

.bg-white-contact h4{
	color: #0061a1;
}

.bg-blue-contact{
	background-color: rgba(0, 97, 161, 0.2);
	backdrop-filter: blur(10px);
	padding: 1rem;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
	border-radius: 20px;
	margin-bottom: 30px;
	text-align: right;
}

.bg-blue-contact h4{
	color: #0061a1;
}


/* style page select */

.select-region-section{
	width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: url(../img/chinese-curriculum.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    backdrop-filter: blur(10px);
}

.select-region-section::before{
	content: "";
	display: inline-block;
	position: absolute;
	background-color: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(7px);
	height: 100vh;
	width: 100%;
}

.center-region-section{
    position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -60%);
}

.center-region-section h2{
	font-family: 'Picket Font' !important;
    color: #0061a1;
    font-size: 2.2em;
}

.center-region-section h6{
	font-family: 'Picket Font' !important;
    color:  #0061a1;
    font-size: 24px;
}

.toggle-picket{
	padding: 16px;
    border-radius: 15px;
    border: 1px solid #f99d1c;
    background-color: #f99d1c;
    color: #fff;
    font-family: 'Picket Font';
    letter-spacing: 1px;
}

.center-region-section option{
	padding: 16px;
    border-radius: 15px;
}

.dropdown-pf-bg{
	width: 100%;
    padding: 10px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Picket Font';
}

.dropdown-menu>li>a {
    /* display: block; */
    padding-bottom: 5px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: break-spaces;
}

.grid-page-opt h3{
	color: #0061a1;
}