@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed: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&family=Oswald:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Forum&display=swap');

}

@font-face {
}

*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
}



/* Body */
:root {
  --Blue: #00306A;
  --Grey: #4f4f4f;
  --White: #ffffff;
  --Black: #000000;
  --Orange: #B44F19;
  --Green: #2C6E40;
  --Purple: #6E2C4C;
  --Teak: #216F6F;
}

.fontBlue {
	 color: var(--Blue);
}
.fontGrey {
	 color: var(--Grey);
}
.fontWhite {
	 color: var(--White);
}
.fontBlack {
	 color: var(--Black);
}




.bgBlue {
	 background: var(--Blue);
}
.bgGrey {
	 background: var(--Grey);
}
.bgBlack {
	 background: var(--Black);
}
.bgWhite {
	 background: var(--White);
}





.font100 {
	font-weight: 100 !important;
}

.font200 {
	font-weight: 200 !important;
}

.font300 {
	font-weight: 300 !important;
}

.font400 {
	font-weight: 400 !important;
}

.font500 {
	font-weight: 500 !important;
}

.font600 {
	font-weight: 600 !important;
}

.font700 {
	font-weight: 700 !important;
}


*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
	outline: none;
    overflow-x: hidden;
}
 body {
	margin: 0;
	overflow-x: hidden;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.25rem;
	width: 100%;
	height: 100%;
	outline: none;
	background: var(--White);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: url(../images/bg_01.jpg) repeat-y top center;
	background-size: 100% auto;
}

* {
  margin: 0;
  padding: 0;
}


 a, a:link, a:visited {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    outline: none;
}
 a:hover {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    text-decoration: none;
}

/* .cloudShadow {
	box-shadow: 0px 0px 11px 6px rgba(255,0,0,1);
	-webkit-box-shadow: 0px 0px 11px 6px rgba(255,0,0,1);
	-moz-box-shadow: 0px 0px 11px 6px rgba(255,0,0,1);
} */

.ClassEnglish {
	display: block;
}
.ClassChinese {
	display: none;
}

.fontChinese {
	font-size: 1rem;
	font-weight: 800;
    font-family: "Microsoft JhengHei",  Tahoma , Verdana , Arial , sans-serif;
}

.navbar-nav .btnSchedule {
	background: var(--White) !important;
	color: var(--Blue);
	border-radius: 3rem;
	font-weight: 500;
}

.bg-dark {
	background-color: rgba(0, 48, 106, 0.9) !important;
	color: var(--White);
	min-height: 70px;
}
.navbar-nav a, .navbar-nav .nav-link.active, .navbar-nav .show>.nav-link {
	color: var(--White);
}

.navbar-toggler-icon {
	color: var(--White);
}

.logoContainer {
	max-height: 200px;
}

.bgSlot {
	height: 300px;
}

.bgSlot01 {
	background: url('../images/bg_about.jpg') top center no-repeat;
	background-size: 100vw auto;
}

.sloganContainer {
	max-height: 400px;
	padding-bottom: 50px;
	padding-top: 50px;
}

.sloganContainerChinese {
	max-height: 400px;
}

.bgContainer {
	height: 600px;
	padding-bottom: 50px;
	padding-top: 50px;
}

.card-title {
	color: var(--White);
}

.card-text {
	line-height: 1.25rem;
	color: var(--White);
}

.bgCard_01 {
	background: var(--Blue);
}

.bgCard_02 {
	background: var(--Orange);
}

.bgCard_03 {
	background: var(--Green);
}

.bgCard_04 {
	background: var(--Purple);
}

.bgCard_05 {
	background: var(--Teak);
}

.iconCards .btn-primary {
	--bs-btn-color: rgba(255,255,255,0.8);
    --bs-btn-bg: none;
    --bs-btn-border-color: none;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: none;
    --bs-btn-hover-border-color: none;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: none;
    --bs-btn-active-border-color: none;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: none;
    --bs-btn-disabled-border-color: none;
}

.iconCards .card {
	--bs-card-border-color: none;
}

.iconCards .card-title, .iconCards a {
	font-size: 1.75rem;
	font-weight: 500;
}

.iconCards .card-text {
	font-size: 1rem;
	font-weight: 200;
}

.iconCards .btn {
	padding: 0;
}

.sloganbg p {
	font-size: 1rem;
	color: var(--White);
}

.sloganbg h1 {
	font-size: 2.5rem;
	color: var(--White);
}

.sloganbg .img_01 {
	background: url('../images/img_01.jpg') no-repeat center center;
	background-size: 120% auto;
}

.sloganbg .img_02 {
	background: url('../images/img_02.jpg') no-repeat center center;
	background-size: 120% auto;
}

.sloganbg .img_03 {
	background: url('../images/img_03.jpg') no-repeat center center;
	background-size: 150% auto;
}
.sloganbg .img_04 {
	background: url('../images/img_04.jpg') no-repeat center center;
	background-size: 120% auto;
}
.sloganbg .img_05 {
	background: url('../images/img_05.jpg') no-repeat center center;
	background-size: 120% auto;
}
.sloganbg .img_06 {
	background: url('../images/img_06.jpg') no-repeat center center;
	background-size: 150% auto;
}
.sloganbg .img_07 {
	background: url('../images/img_07.jpg') no-repeat center center;
	background-size: 120% auto;
}



.bgBlueBowl {
	background-color: rgba(0, 48, 106, 0.9) !important;
}
.bgGreyBowl {
	background-color: rgba(69, 69, 69, 0.9) !important;
}

.bgGreyBowl .galley_01, .bgGreyBowl .galley_02, .bgGreyBowl .galley_03 {
	min-height: 708px;
}

.galley_01 {
	background: url('../images/galley_01.jpg') top center no-repeat;
	background-size: auto 100%;
}

.galley_02 {
	background: url('../images/galley_02.jpg') top center no-repeat;
	background-size: auto 100%;
}

.galley_03 {
	background: url('../images/galley_03.jpg') top center no-repeat;
	background-size: auto 100%;
}

.services01 {
	background-color: rgba(0, 48, 106, 0.9) !important;
	min-height: 400px;
}

.services02 {
	background-color: rgba(172, 60, 0, 0.9) !important;
	min-height: 400px;
}

.services03 {
	background-color: rgba(21, 95, 43, 0.9) !important;
	min-height: 400px;
}

.services04 {
	background-color: rgba(95, 21, 56, 0.9) !important;
	min-height: 400px;
}

.services05 {
	background-color: rgba(9, 96, 96, 0.9) !important;
	min-height: 400px;
}

.aboutbg {
	background: url('../images/bg_about.jpg') top center no-repeat;
	background-size: 100vw auto;
}

.servicesbg {
	background: url('../images/bg_services.jpg') top center no-repeat;
	background-size: 100vw auto;
}

.gallerybg {
	background: url('../images/bg_gallery.jpg') top center no-repeat;
	background-size: 100vw auto;
}

.contactbg {
	background: url('../images/bg_contact.jpg') top center no-repeat;
	background-size: 100vw auto;
}

iframe {
	width: 100%;
    height: 500px;
    border: solid var(--Blue) 4px;
}

.footer {
	background: var(--Blue) url('../images/bg_footer.jpg') no-repeat bottom right;
	background-size: auto 100%;
}

.footer p {
	color: var(--White);
	text-decoration: none;
	font-size: 1.25rem;
	line-height: 1rem;
}

.footer .h6 {
	color: var(--White);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 100;
}

.footer a{
	color: rgba(255,255,255,0.8);
	text-decoration: none;
	font-size: 1.25rem;
}

.copyright {
	font-size: 0.75rem;
	color: var(--White);
	line-height: 0.75rem;
	margin-bottom: 0px;
}


@media (max-width: 768px) {
	.history-img-holder {
		width: 100%;
		min-height: 500px;
	}
	.sloganbg .img_01 {
		height: 400px;
		background-size: auto 100%;
	}
	.bgContainer {
		height: 400px;
	}
	.servicesbg, .aboutbg, .gallerybg, .contactbg  {
		background-size: auto 100vw;
	}


	.sloganbg .img_02 {
		background-size: auto 120%;
		min-height: 300px;
	}

	.sloganbg .img_03 {
		background-size: auto 120%;
		min-height: 300px;
	}
	.sloganbg .img_04 {
		background-size: auto 120%;
		min-height: 300px;
	}
	.sloganbg .img_05 {
		background-size: auto 120%;
		min-height: 300px;
	}
	.sloganbg .img_06 {
		background-size: auto 120%;
		min-height: 300px;
	}
	.sloganbg .img_07 {
		background-size: auto 120%;
		min-height: 300px;
	}
}