/*
	CSS DOCUMENT
	Author: New Generation Technology
	Website: www.ngtechja.com
	Template: School
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;0,700;1,300;1,400&display=swap');

body{
	margin: 0px;
	padding: 0px;
	font-family: 'Poppins', sans-serif, arial, tahoma;
	font-size: 16px;
	color:#272727;
}

p, span, strong{font-size:inherit; font-style: inherit; font-family:inherit; line-height:inherit;}
h1, h2, h3, h4{}
a{text-decoration:none;}

input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea, select{
	display: block;
    font-family: inherit;
    font-size: 1rem;
    border: 1px solid #e6e6e6;
    border-radius: 0;
    box-sizing: border-box;
    margin: 0;
    /*-webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-color: transparent;*/
    color: #666;
    padding: 1rem;
}

input[type="checkbox"]{height:16px; width:16px; display:inline;}

/*======== IDs =======*/
#wrapper{width:100%; overflow:hidden;}

#contents{}

#logo{width:100%; display:flex; flex-direction:row; align-items:center;}
#logo img{height:72px; padding:4px 0px; border:none; transition:0.35s;}

#navbar{width:100%; z-index:99999; transition:0.75s;}
#nav{}
#nav ul{list-style:none; width:100%;}
#nav li{display:inline-block; padding:12px 8px; transition:0.24s;}
#nav li a{text-decoration:none; color:#555; font-size:16px; font-family:'Poppins', sans-serif; text-transform:normal; border-bottom:transparent; transition:0.25s;}
#nav li a:hover{color:#4f7b26; border-bottom:1px solid #4f7b26;}
#nav li li{padding:8px;}
#nav li ul{position:absolute; z-index:9999999; padding:0px; margin-top:12px; width:170px; overflow:hidden; background:#fff; border:1px solid #ddd; box-shadow:0px 0px 4px #ddd; border-radius:4px; display:none; transition:0.25s;}
#nav ul ul li{display:block; border:none; padding:0px; transition:0.25s;} #nav ul ul li:hover{background:#4f7b26; border:none !important;}
#nav li li a{display:block; border-bottom:1px solid #ddd; color:#555; padding:8px !important; text-align:left; font-size:16px; transition:0.25s;} #nav li li a:hover{padding-left:12px !important; color:#ffcf00; border:none !important;}
#nav li:hover ul{display:block;}

/*=========== MOBILE =========== */
#mbmenu{width:80%; height:100%; overflow-y:auto; background:#fff;/*282828*/ z-index:999999; position:fixed; top: 0px; left:-100%; display:block;}
#mbmenu ul{list-style:none; margin:0px; padding:0px;} 
#mbmenu li{display:block; padding:21px 14px; border-bottom:1px solid #d5dbdb;}
#mbmenu li a{text-decoration:none; padding:21px 0px; color:#555; font-family:'Poppins', sans-serif, tahoma; text-align:left; font-size:18px; transition:0.32s;}
#mbmenu li a:hover{}
#mbmenu li ul{display:none; background:#333; margin-top:16px; padding:12px 0px; transition:0.32s;}
#mbmenu li li{border:none; padding:12px 0px; text-align:center;} #mbmenu li li a{color:#eee;}
#closemb{display: none; position:absolute; z-index:999999; right:0%; top: 0px; width:10%; height:100%; padding:24px; cursor:pointer;}

/*#mobilelink{padding-right:20px;}
#mobilelink ul{list-style:none;}
#mobilelink li{display:inline-block;}
#mobilelink div{background:#000; width:35px; height:5px; margin:6px 0px;}*/

#menudrop{background:#fff; position:absolute; width:80%; left: 0px; height:100vh; z-index: 4000; display: none; transition:1s;}
#menudrop ul{list-style: none; padding: 0px;	margin: 0px;}
#menudrop ul li{display: block; padding: 12px 32px; text-align: center; border-bottom: 1px solid #eee;}
#menudrop ul li a{color: #282828; text-decoration: none; padding: 0px 12px; font-family: 'Poppins', sans-serif, century_gothic, arial;}	

/*==================== SLIDESHOW  ====================*/
#banner{display:block; width:100%; height:100vh; margin:auto;}
#bannerContainer{display:block; width:100%; height:100%;}
#prev{background-image: url('../images/left.png'); background-size:50%; background-repeat: no-repeat; background-position: center center; left:0px; height:100%; width:100px; position:absolute; z-index: 9999; cursor: pointer; opacity:.9; transition:0.64s;}
#next{background-image: url('../images/right.png'); background-size:50%; background-repeat: no-repeat; background-position: center center; right:0px; height:100%; width:100px; position:absolute; z-index: 9999; cursor: pointer; opacity:.9; transition:0.64s;}
#slider{display:block; height:100vh; width:100%; position:absolute; overflow:hidden;}
#slider .slides{background-size:cover; height:100vh; width:100%;}
#bannerContainer section{position:absolute; margin-left:15%; margin-top:10%; padding:0px; z-index:999;}
#bannerContainer section p, #bannerContainer strong, #bannerContainer span, #bannerContainer span span{font-size:inherit; line-height:auto;}
#slider section{position:absolute; width:350px; left:3%; top:8%; background:rgba(0,0,0,0.5); padding:24px; color:#fff; font-weight:bold; font-family:'Poppins', sans-serif, arial; z-index:99999;}

/*=================== */

#banner-hm{
	background-image:linear-gradient(to bottom,rgba(0, 0, 0,0.30), rgba(0, 0, 0,0.30)),url('../images/je-main.jpg');
	background-repeat: no-repeat;
	background-size:cover;
	background-attachment:fixed;
	background-position: center center;
	height: 100vh;
	width: 100%;
}
#banner-hm section{animation:fadein 2s; padding:12px; color:#fff; font-size:32px; position:absolute; right:150px; top:180px; text-align:center; text-shadow:2px 2px 4px #000;}
@keyframes fadein {from { opacity: 0} to   { opacity: 1}}
#banner-hm a{text-decoration:none; padding:12px 32px; border-radius:4px; background:#fff; color:#272727; font-size:18px; text-shadow:none; border:2px solid #fff; transition:1s;}
#banner-hm a:hover{background:none; color:#fff;}

#banner-pg{background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65)),url('../images/banner.jpg'); background-repeat: no-repeat; background-size:cover; height:300px;}
#banner-pg div{text-transform:capitalize; font-size:42px; color:#fff; position:relative; top:50%; left:2%;}

.tour-banner{height:400px; width:100%; background-attachment:fixed; background-repeat:no-repeat; background-size:100%; background-position:top;}
.tour-banner div{position:absolute; left:0px; width:100%; margin-top:300px; padding:12px 0px; text-align:left; font-family:'Poppins', sans-serif, century_gothic; font-size:30px; color:#fff; background:rgba(0,0,0,0.7);}
.tour-banner div section{margin:auto; width:90%;}

#footer{background:#2a2a29; color:#fff;}

/* ======== CLASS ============ */
.content{margin-right:auto; margin-left:auto; width:80%; line-height:24px; font-size:18px; letter-spacing:1px;}
.center{text-align:center; padding:12px 0px;}
.desktop{}
.mobile{display:none;}

.logo{height:84px;}
.excurimage{vertical-align:middle; height:450px;}
.boldupper{font-weight:bold; text-transform:uppercase;}

.content-1{width:100%; margin:auto;}
.content-2{margin:auto; width:80%;}
.content-3{margin:auto; width:70%;}
.content-4{width:90%; margin:auto;}

/*============ ALIGNMENT ===========*/
.align-left{text-align:left;}
.align-right{text-align:right;}
.align-center{text-align:center;}
.align-justify{text-align:justify;}
.block{display:block;}
.inline{display:inline-block;}

/*============ WEIGHT ===========*/
.bold{font-weight:bold;}
.normal{font-weight:normal !important;}
.italic{font-weight:italic;}

/*============ FLOATERS ===========*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;}

.perma-left{float:left;}
.perma-right{float:right;}
/*============ COLOR ===============*/
.color-white{color:#fff !important;}
.color-black{color:#000;}
.color-grey{color:grey;}
.color-dark-grey{color:#555;}
.color-blue{color:#16bacf;}
.color-red{color:#f7665f;}
.color-theme{color:#00b0f0;}
.color-theme1{color:#1f2d30;}
.color-theme-text{color:#454545;}
.coolgrey{background:#f5f5f3;}

/*============ FONT SIZE ===========*/
.font12{font-size:12px;}
.font14{font-size:14px;}
.font16{font-size:16px;}
.font18{font-size:18px;}
.font21{font-size:21px;}
.font28{font-size:28px;}
.font32{font-size:32px;}
.font42{font-size:42px;}
.font72{font-size:72px;}
.font92{font-size:92px;}
.font112{font-size:112px;}

/*============ WIDTH ===========*/
.half{width:50%;}
.quart{width:33%;}
.percent5{width:5%;}
.percent10{width:10%;}
.percent15{width:15%;}
.percent20{width:20%;}
.percent25{width:25%;}
.percent30{width:30%;}
.percent35{width:35%;}
.percent40{width:40%;}
.percent45{width:45%;}
.percent50{width:50%;}
.percent55{width:55%;}
.percent60{width:60%;}
.percent65{width:65%;}
.percent70{width:70%;}
.percent75{width:75%;}
.percent80{width:80%;}
.percent85{width:85%;}
.percent90{width:90%;}
.percent95{width:95%;}
.percent100{width:100%;}

.perma-percent5{width:5%;}
.perma-percent10{width:10%;}
.perma-percent20{width:20%;}
.perma-percent25{width:25%;}
.perma-percent30{width:30%;}
.perma-percent35{width:35%;}
.perma-percent40{width:40%;}
.perma-percent45{width:45%;}
.perma-percent50{width:50%;}
.perma-percent60{width:60%;}
.perma-percent65{width:65%;}
.perma-percent70{width:70%;}
.perma-percent80{width:80%;}
.perma-percent90{width:90%;}
.perma-percent95{width:95%;}


/*=========== BORDERS ================*/
.border-left{border-left:1px solid #bbb;}
.border-right{border-right:1px solid #bbb;}
.border-top{border-top:1px solid #bbb;}
.border-bottom{border-bottom:1px solid #bbb;}
.border-full{border:1px solid #bbb;}

.list-type1{width:100%; margin:auto;}
.list-type1 ul{list-style:none;}
.list-type1 li{display:inline-block; width:33%; height:233px;}
.list-type1 li a{text-decoration:none; color:#272727;}
.itemimg, .iteminfo{position:absolute; transition:0.32s; cursor:pointer;}
.itemimg{z-index:10;}
.list-type1 li a:hover>.itemimg{margin-top:-80px; opacity:.45;}
.iteminfo{padding-top:170px; width:348px; height:231px; text-align:left; font-weight:bold;}

.list-type2{width:90%; margin-right:auto; margin-left:auto; padding:42px 0px;}
.list-type2 ul{list-style:none;}
.list-type2 li{display: inline-block; width:30%; height:320px; text-align:center;}
.list-type2 li a{text-decoration:none; color:#272727;}
.item2img, .item2info{position:absolute; transition:0.42s; cursor:pointer;}
.item2img{z-index:10; border:1px solid #ddd;}
.item2info{background:#ddd; padding-right:4px;}
.list-type2 li a:hover>.item2img{margin-left:-210px; opacity:.9;}
.item2info{width:348px; height:231px; text-align:right; font-weight:bold;}

.list-type3 ul{padding: 12px;}
.list-type3 li{display: inline-block; padding:12px;}
.list-type3 div{width: 300px; height:500px; overflow:hidden; background:#fff; box-shadow:0px 0px 4px #ddd; transition:0.32s;}
.list-type3 section{width:100%;} .list-type3 section section{width:90%; margin:auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.list-type3 li img{width: 300px; height: 250px;}
.list-type3 h3{color: #000;	border-bottom: none !important;}
.list-type3 p{padding: 7px; font-size: 14px; line-height:16px;}
.list-type3 div:hover{box-shadow:0px 0px 12px #aaa; transform: scale(1.1);}
/*.list-type3 div:hover > li img{}*/

.list{}
.list ul{list-style:none; padding:0px; margin:0px; width:100%;}

.list-1 li{float:left; width:33.33%; height:380px; text-align:center; padding:0px;}
.list-1 li div{width:100%; height:380px; overflow:hidden; padding:0px;} .list-1 li section{background:#0c3b89; color:#fff; font-weight:bold; font-size:18px; text-transform:uppercase; padding:24px 0px; transition:0.32s;}
.list-1 i{color:#0f1b1c;}
.list-1 li img{width:100%; height:100%; transition:0.34s;}
.list-1 li:hover img{transform:scale(1.5);} .list-1 li:hover section{letter-spacing:2px;}

.list-3 li{display:inline-block; width:350px; height:350px; overflow:hidden;}
.list-3 li div{width:98%; height:100%; overflow:hidden;}
.list-3 li div img{width:80%; height:80%; border-radius:50%; transition:0.32s;}
.list-3 li div section{height:20%;}
.list-3 li div section a:hover li div div img{transform:scale(1.05); opacity:0.7;}

.list-4 li{display:inline-block; width:33%; height:450px;}
.list-4 li div{width:90%; height:90%; border-radius:4px; border:1px solid #ddd; background:#fff; overflow:hidden;}
.list-4 li div img{width:100%; height:50%; transition:0.24s;}
.list-4 li div section{margin:auto; width:90%; padding:4px 0px;}
.list-4 li div a:hover img{transform:scale(1.05); opacity:0.7;}

.list-5{width:100%;}
.list-5 li{width:100%; padding:10px 0px;}
.list-5 li div{width:100%; height:120px; overflow:hidden; background:#fff; padding:0px; border:solid 1px #ddd; border-radius:12px;}
.list-5 li img{width:100%; height:auto;}

.list-9{width:100%;}
.list-9 ul{list-style:none; margin:0px; padding:0px; text-align:center;}
.list-9 li{display:inline-block; width:30%; text-align:center; vertical-align:top; padding:12px 0px;}
.list-9 li div{width:90%; margin:auto; background:#fff; padding:24px 0px; border-radius:12px; box-shadow:0px 0px 8px #aaa;}
.list-9 li div section{padding:10px;}
.list-9 li img{height:250px; width:90%; border-radius:7px; border:1px solid #ddd;}

.list-10{width:100%;}
.list-10 ul{list-style:none; margin:0px; padding:0px; text-align:center;}
.list-10 li{display:inline-block; width:10%; height:380px;}
.list-10 li div{width:90%; height:90%; margin:auto; border:1px solid #bbb; border-radius:7px; overflow:hidden; transition:0.32s;}
.list-10 li .title{margin:auto; width:90%; white-space:nowrap; overflow: hidden; text-overflow: ellipsis;}
.list-10 li .img{height:240px; overflow:hidden;}
.list-10 li section img{width: 100%;}
.list-10 li div:hover{box-shadow:0px 2px 12px #ccc; transform:scale(1.1);}

/*========= SHADOW ===============*/
.shadow{display:none; position:fixed; top:0; left:0px; width:100%; height:100%; z-index:99999; background:rgba(0,0,0,0.75); transition:0.32s;}
.shadow-content{position:relative; top:5%; width:75%; height:90%; margin:auto; background:#fff; padding:24px;}
.panel-closer{float:right; padding:24px; color:#fff; font-size:42px; cursor:pointer;}

/*==== FORMS ==========*/
.form-field{width:100%; padding:1rem 0rem;} .form-field div{padding:6px 0px; line-height:32px;} .form-field input, .form-field select, .form-field textarea{width:100%; max-width:100%; min-width:100%; border-radius:4px;}
.form-field-2{border:1px solid #ddd; background:#f5f5f5; font-family:'Poppins', sans-serif, arial;} .form-field-2 div{padding:12px 0px; width:80%; margin:auto;}
.form-field-2 input, .form-field-2 select{width:100%; border:1px solid #ddd; border-radius:4px; padding:4px; font-size:16px; height:42px;}
.form-field-2 textarea{min-width:80%; max-width:80%; border:1px solid #ddd; border-radius:4px; padding:4px; font-size:16px; font-family:'Poppins', sans-serif, arial; min-height:140px; max-height:140px;}
.robot{
    background:#F9F9F9;
    border:solid 1px #D3D3D3;
    border-radius:4px;
    width:260px;
    overflow:hidden;
    margin-left:auto; margin-right:auto;
    text-align:left;
    padding:12px 0px;
    background-image: url('../images/robot.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 20%;
}
.robot input[type=checkbox]{width:40px; float:left;}
.robot input[type=text]{width:200px; background: transparent; border:none;}

/* ===== Header Text =====*/
.head1{font-weight:bold; font-size:42px; line-height:normal; padding:10px 0px; font-family:'Poppins', sans-serif, arial; color:#77DD77; font-weight:bold; text-transform: uppercase;}
.head2{font-weight:bold; font-size:24px; line-height:normal; padding:10px 0px; font-family:'Poppins', sans-serif, arial; color:#B60202; text-transform: uppercase;}

/* ==== DIV HALF =====*/
/*.half{display:inline-block; width:48%;}
.left{float:left width:48%;}
.right{float:right width:48%;}*/

/*==== Padding ====*/
.padd4{padding:4px 0px;}
.padd7{padding:7px 0px;}
.padd12{padding:12px 0px;}
.padd14{padding:14px 0px;}
.padd18{padding:18px 0px;}
.padd24{padding:24px 0px;}
.padd30{padding:30px 0px;}
.padd42{padding:42px 0px;}
.padd64{padding:64px 0px;}
.padd72{padding:72px 0px;}
.padd92{padding:92px 0px;}
.pdtopbttm24{padding:24px 0px;}
.pdtopbttm42{padding:42px 0px;}

.space12{padding:0px 12px;}
.space24{padding:0px 24px;}
.space42{padding:0px 42px;}
.space64{padding:0px 64px;}

.padding7{padding:7px;}
.padding12{padding:12px;}
.padding14{padding:14px;}
.padding24{padding:24px;}

/* ===== Background =====*/
.teal{background:teal; color:#fff;}
.dark{background:#272727; color:#fff;}
.white{background:#fff; color:#272727;}

/*===== Bottons =====*/
.btn1{background:#ffcc23; padding:7px 12px; text-decoration:none; color:#000;}
.btn2{border:2px solid #fff; padding:12px 24px; color:#fff; text-decoration:none;}
.btn3{border:#ffcc23 2px solid; padding:12px 24px; text-decoration:none; color:#000; transition:1s;}
.btn3:hover{background:#ffcc23;}

/*============ BUTTONS ===========*/
.btn{padding:12px 24px; text-decoration:none; border:none; text-transform:normal; transition:0.75s;} .btn:hover{background:#222222; color:#fff;}
.btn-error{background:#fc4438; color:#fff;}
.btn-info{background:#009ddc; color:#fff;}
.btn-orange{background:#ee8031; color:#fff;}
.btn-yellow{background:#f7cd01; color:#fff;}
.btn-green{background:#22975e; color:#fff;}
.btn-white{background:#fff; color:#000;}
.btn-olive-green{background:#4f7b26; color:#fff;}

.btn-theme-1{background:#fd0100; color:#fff;}
.btn-theme-2{background:#00adef; color:#fff;}

.btn-theme{padding:12px 24px !important; background:#093a89; color:#fff !important;}
.btn-round{border-radius:4px;}

/*==== Link color ====*/
.link1{color:#fff; text-decoration:none;}

/*============ COLOR ===============*/
.color-white{color:#fff !important;}
.color-black{color:#000;}
.color-grey{color:grey;}
.color-dark-grey{color:#555;}
.color-blue{color:#16bacf;}
.color-red{color:#f7665f;}
.color-olive-green{color:#4f7b26;}
.color-theme{color:#0c3b89;}
.color-theme1{color:#1f2d30;}
.color-theme-text{color:#454545;}

/*=========== BACKGROUND ===========*/
.teal{background:teal;}
.blue{background:#009ddc;}
.orange{background:#ed9849;}
.yellow{background:#ffc700;}
.gray{background:#222222;}
.lightgrey{background:#e9eaec;}
.white{background:#fff;}
.red{background:#f7665f;}
.green{background:#22975e;}
.grey{background:#555;}

.theme-gbcolor{background:#093a89;}
.theme-1{background:#fd0100;}
.theme-2{background:#00adef;}

.coolgrey{background:#f5f5f3;}

@media only screen and (max-width: 800px){	
	.desktop{display:none;}
	.mobile{display:block;}
	.content, .list-type1, .list-type2, .list-type3{width:100%;}
	.list-type1 ul, .list-type2 ul, .list-type3 ul{width:100%; padding:0px;}
	
    .list-5 li div{height:auto;}

	.left, .right, .half{width:100%; display:block;}
	.excurimage{height:200px;}
	
	#navbar{background:rgba(255, 255, 255, 0.5);}

	#logo{display:block; width:100%; padding:10px 0px; text-align:center !important;}
	/*#nav{width:30%;}*/
	#logo img{height:72px; vertical-align:super; padding:0px 4px;}

	#bannerContainer section{margin-top:35%; margin-left:20%;}
	#bannerContainer section span{font-size:38px !important; font-weight:bold !important;}
	
	#banner-hm{background-image:url('../images/img_bg_2-mb.jpg'); background-size:cover; height:550px !important;}
	#banner-hm section{right:0px; left:0px;}
	#banner-pg{background-repeat: no-repeat; background-size:100% 200px; height:200px;}
	
	.percent20, .percent25, .percent30, .percent40, .percent50, .percent60, .percent70, .percent80, .percent90, .percent95{width:100%; clear:both !important;}
}