@charset "UTF-8";
html[data-theme="light"],
:root {



	--header-fg: #ad723f;
	--header-bg: #f1d1b3;
	--header-hover: #995e2b;

/*	#f0ad73 Good */
/*	--primary: #ad723f;*/
/*	--primary: #ebcbad;*/
/*	--secondary: #f1d1b3;*/
/*	--accent: #ad723f;*/
/*	--light: #fffef7;*/
	
	--title-fg: var(--header-fg);
	--body-fg: #8C8C8C;
    --body-bg: #fff8f1;

    --container-bg: #fffef7;
    --border-color: #ebcbad;


    --orenge-fg: #ff9800;
    --green-fg: #00b300;
    --blue-fg: #00a1b3;
    --red-fg: #f44336;
    


/*    .fg-f{color: #ffffff}*/
/*	.fg-a4{color: #a4a4a4}*/
/*	.fg-g{color: #00b300}*/
	/* #04AA6D  #4caf50 */
/*	.fg-r{color: #f44336}*/
	/* red */
/*	.fg-b{color: #00a1b3}*/
/*	.fg-o{color: #ff9800}*/
	/* orenge */



/*    --link-fg: #00a1b3;*/

/*    --header-color: #ffc;*/
/*    --header-branding-color: var(--accent);*/
	
/* 	--header-fg: var(--accent);*/
/*    --header-bg: var(--secondary);*/

/*    --container-bg: var(--light);*/
/*    --border: var(--secondary);*/

/*    --btn-bg: var(--primary);*/

/*    --icon-fg: var(--accent);*/

/*    --title-highlight-fg: var(--accent);*/
/*    --header-link-color: var(--primary-fg);*/

	--font-family-primary: 'Roboto', Arial, sans-serif;
	--font-family-roman: "Times New Roman", Times, serif;
/*	--font-family-roman: "Times New Roman", Times, serif;*/

	/*--hairline-color: #e8e8e8;
    --border-color: #ccc;
    --border-highlight-color: var(--primary);*/
}



*{
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.ff-r{font-family: var(--font-family-roman);}

/*html{font-size: 62.5%; scroll-behavior: smooth;}*/
html{scroll-behavior: smooth;}

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
	/*    font-size: 0.875rem;*/
/*	font-size: 100%;*/
/*font-size: 1.1rem;*/
/*font-size: 1.05rem;*/
	font-size: 18px;
	line-height: 1.8rem;
    font-family: var(--font-family-primary);
    color: var(--body-fg);
    background: var(--body-bg);
    display: flex;
    flex-direction: column;
}

/*header {background-color: var(--secondary);}*/

a{color: var(--blue-fg)}
nav{
	color: var(--header-fg);
	background-color: var(--header-bg);
/*	font-family: var(--font-family-roman);*/
}.navbar a{color: var(--header-fg);}

footer{
	color: var(--header-fg);
	background-color: var(--header-bg);
/*	font-family: var(--font-family-roman);*/
}.footer a{color: var(--header-fg);}



/* //-- Defult Style   */
/* Navebar */

.navbar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .5rem 1rem 0.5rem 0.5rem;
}
.navbar-logo{
	display: flex;
	align-items: center;
}
.navbar-logo img{
	width: 3rem;
	height: 3rem;
	margin-right: .5rem;
}
.navbar-logo span{
	font-size: 2rem;
	font-weight: bold;
	font-family: var(--font-family-roman);
	padding-top: .4rem;
}

/* Toggle Button */
.toggle-btn {
  display: none;
  font-size: 24px;
  cursor: pointer;
}


.navbar-links{
	display: flex;
	gap: 1.5rem;
}
.navbar-links a{
	text-decoration: none;
	font-size: 1.4rem;
	transition: color 0.3s;
}
.navbar-links a:hover{
	color: var(--header-hover);
}

/* Body */
.main-content {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 1rem 5%;
}

/* footer */
.footer {
	text-align: center;
	/*padding: 10px 20px;
	font-size: 20px;*/
	font-size: 1.1rem;
	padding: .5rem 1rem;
}

img { width:100%; height:100% }

/* Text Size*/
p{
/*	font-size: 1.14rem; */
	text-align: justify;word-break: break-word;}

ul { padding-left: 3rem; padding-bottom: .5rem;}
li{
/*	font-size: 1.14rem;*/
}


h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5 {font-weight: 300; word-break: break-word; padding-bottom: .5rem;}
.h1,.h2,.h3,.h4,.h5 {font-weight: 300}

h1 {
	/*    font-size: 1.25rem;*/
/*	line-height: 46px;*/
/*	font-size: 36px;*/
	font-size: 2.5rem;
    font-weight: bold;
    color: var(--title-fg);
    font-family: var(--font-family-roman);
}

h2 {
	/*    font-size: 1rem;*/
	/*	font-size: 2.2rem;*/
/*	line-height: 2.5rem;*/
/*	font-size: 1.8rem;*/
	font-weight: bold;
	font-family: var(--font-family-roman);
}
.h2 {
	font-weight: normal;
	font-family: inherit;
	font-size: 1.5rem;
}

h3 {
/*	line-height: 2.2rem;*/
	/*    font-size: 0.875rem;*/
	/*	font-size: 1.50rem;*/
/*	font-size: 24px;*/
/*	line-height: 36px;*/
}

h4 {
	/*    font-size: 0.75rem;*/
	/*	font-size: 1.25rem;*/
	/*    padding-bottom: 3px;*/
	font-weight: bold;
/*	padding-top: 12px;*/
}

h5 {
	/*    font-size: 0.625rem;*/
	/*	font-size: 1rem;*/
    text-transform: uppercase;
	/*    letter-spacing: 1px;*/
}


b, .b{font-weight: bold;}

.ul-n {text-decoration: none;}

.mr-auto{margin: auto 0;}

.fg-b {color: var(--blue-fg)}
.fg-g {color: var(--green-fg)}
.fg-o {color: var(--orenge-fg)}
.fg-r {color: var(--red-fg)}


.ta-c{text-align: center;}

.pl-2_5{padding-left: 2.5rem;}

.pt-0{padding-top: 0rem;}
.pt-1{padding-top: 1rem}


.pb-05{padding-bottom: .5rem;}
.pb-1{padding-bottom: 1rem;}




.dis-center{
	display: grid;
	place-items: center;
}
/*.dis-flx-row-space-e{
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-evenly;
}*/
.dis-flx-row{
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}
.flx-se{justify-content: space-evenly}
.flx-sb{justify-content: space-between}

/*	.dis-grid{display: grid;}*/


.bg-image, #loadQRimg{
	/*width: 18rem;
	height: 18rem;*/
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.center-content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.center-content p{
	padding: 10px 16px;
	font-size: 1.1rem;
	border: none;
	border-radius: .5rem;
	cursor: pointer;

	color: var(--header-fg);
	background-color: var(--header-bg);
}

/* Defult Style --//   */




section{padding: 1rem}

/* change */
.content { width: 75%; padding: 1rem;}
.sidebar { width: 25%; padding: 1rem;}

/*.content-0 {padding: 10px 20px;}*/
.content-0 {width: 100%; padding: 1rem;}
.content-1 {width: 62%; padding: 1.5rem;}
.sidebar-1 {width: 36%;}

/*.content-2 { width: 50%;}
.sidebar-2 {width: 50%;}

.content-3 { width: 25%;}
.sidebar-3 {width: 25%;}*/

.content-4 { width: 60%; padding: 1.5rem;}
.sidebar-4 {width: 40%;}









/* Extra Small Devices (phones, less than 480px) */
@media only screen and (max-width: 480px) {
	/*  	body {font-size: 14px;background: #fbe8e8;}*/
	body {font-size: 14px;}
	h1{line-height: 2.2rem; font-size: 1.8rem;}

	pre{font-size: .7rem !important}

	#contact div{padding: .2rem 0 !important;}

	.p-lang div li, .p-lang div a{font-size: 1rem !important}

	.navbar-logo img{
		width: 2.5rem;
		height: 2.5rem;
		margin-right: .2rem;
	}
	.navbar-logo span{font-size: 1.5rem;}
	.navbar-links {
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: var(--border-color);
        padding: 1rem;
		z-index: 1;
        display: none;
    }
    .navbar-links.show {display: flex;}
    .toggle-btn {display: block;}

    .navbar-links a {
	  	font-size: 1.2rem;
	  	line-height: 0rem;
	  	padding: .5rem;
	}


	.main-content {padding: 30px 0%;}
	.sidebar, .content,
	.sidebar-1, .content-1,
	.sidebar-2, .content-2,
	.sidebar-3, .content-3,
	.sidebar-4, .content-4 {
		width: 100%;
	    margin-bottom: 20px;
	    padding: .5rem 1rem;
	}

}

/* Small Devices (phones landscape, 481px to 768px) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
	/*  	body {font-size: 15px;background: #e8f5fb;}*/

	body {font-size: 15px;}


	.navbar-logo img{
		width: 2.8rem;
		height: 2.8rem;
		margin-right: .3rem;
	}
	.navbar-logo span{font-size: 1.8rem;}
	.navbar-links {
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: var(--border-color);
        padding: 1rem;
		z-index: 1;
        display: none;
    }
    .navbar-links.show {display: flex;}
    .toggle-btn {display: block;}




	h1{line-height: 2.2rem; font-size: 2rem;}


	.main-content {padding: 30px 2%;}
	.sidebar, .content,
	.sidebar-1, .content-1,
	.sidebar-2, .content-2,
	.sidebar-3, .content-3,
	.sidebar-4, .content-4 {
		width: 100%;
	    margin-bottom: 20px;
	    padding: .5rem 10%;
	}


}

/* Medium Devices (Tablets, 769px to 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	/*  	body {font-size: 16px;background: #e8fbeb;}*/
	
	body {font-size: 16px;}


	.navbar-logo span{font-size: 1.7rem;}
	.navbar-links a {font-size: 1.2rem;}


  	.main-content {padding: 1rem 1%;}
	h1{line-height: 2.5rem; font-size: 2rem;}
	h2{line-height: 2.2rem;}
	h3{line-height: 1.8rem;}


	.sidebar{width: 35%;}
	.content{width: 65%;}
}

/* Large Devices (Laptops, 1025px to 1440px) */
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
	/*  	body {font-size: 17px;background: #f4f4e8;}*/
	body {font-size: 17px;}
  	h1{line-height: 2.5rem; font-size: 2.2rem;}
	h2{line-height: 2.2rem;}
	h3{line-height: 1.8rem;}



}

/* Extra Large Devices (Desktops, TVs, 1441px and more) */
@media only screen and (min-width: 1441px) {
	/*  	body {font-size: 20px;background: #f0f0f0;}*/
	body {font-size: 18px}

	h1{line-height: 2.5rem;}
	h2{line-height: 2.2rem;}
	h3{line-height: 1.8rem;}


}