@charset "utf-8";

/* CSS Document */

html {
	scroll-behavior: smooth;
}

* body {
    margin: 0;
    box-sizing: border-box;
    text-align: justify;
    background-color: #FCEFE8;
}

/* Fonts */
@font-face {
    font-family: Andreas;
    src: url("Font/Andreas.ttf");
}

@font-face {
    font-family: Manrope;
    src: url("Font/Manrope-Regular.ttf");
}

/* Navigation Bar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
	z-index: 2;
}

/* Hamburger Menu */
.menu-toggle {
    display: block;
    cursor: pointer;
    color: #44321B;
    font-size: 2em;
	margin: 20px 50px;
}

.logo {
    margin: 20px 50px;
	z-index: 2;
	width: 100px;
}

.menu-toggle .close-btn {
	display: none;
}

.menu-toggle:hover{
    color: #829C71;
}

/* Overlay Menu */
.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-color: #FCEFE8;
	display: none;
	opacity: 0;
    transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
	overflow: hidden;
	z-index: 1;
}

.overlay-menu.open {
  	transform: translateY(0);
	opacity: 1;
	display: block;
}

/* Menu Content for Overlay Menu */
.menu-content {
    position: relative;
    top: 0;
    width: 100%;
	height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 600px;
    box-sizing: border-box;
}

.mobile-logo {
	display: none;
}

.menu-content a {
    text-decoration: none;
    color: #44321B;
    font-size: 3em;
    font-family: Andreas, serif;
    padding: 20px 50px;
    font-weight: 500;
	opacity: 0.8;
  	transition: opacity 0.3s ease-in-out;
	transition: color 0.3s ease-in-out;
}

.menu-content a:hover {
	opacity: 1;
    color: #829C71;
	text-decoration: underline;
}

/* Hover content in overlay menu */
.hover-content {
    display: none;
    position: absolute;
    top: -45%;
    left: 50%;
	width: 100%;
	height: 100%;
    transform: translateX(-50%);
	text-align: center;
	color: #44321B;
}

.menu-content a:hover .hover-content {
	display: block;
}

/* Scroll Reveal */
.reveal {
	position: relative;
	transform: translateY(100px);
	opacity: 0;
	transition: all 1.3s ease;
}

.reveal.reveal-active {
	transform: translateY(0px);
	opacity: 1;
	width: 100%;
}

/* Hero Section in Home Page*/
.hero-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-top: -90px;
}

.hero-image .navbg {
    content: "";
    position: sticky;
    top: 0;
    width: 100%;
    height: 90px;
    background-color: rgba(255,255,255,0.35);
	backdrop-filter: blur(10px);
	border-bottom: 2px solid rgba(255, 255, 255, .4);
}

.hero-text h1 {
  	position: absolute;
  	top: 40%;
  	left: 40%;
  	transform: translate(-50%, -50%);
  	color: #FFFFFF;
	font-family: Andreas, serif;
	font-size: 5.5vw;
	font-weight: 100;
}

.hero-text p{
  	position: absolute;
  	top: 65%;
  	left: 40%;
  	transform: translate(-50%, -50%);
  	color: #FFFFFF;
	font-family: Manrope, "sans-serif";
	font-size: 1.5em;
}

.hero-text button {
  	border: none;
  	outline: 0;
  	display: inline-block;
  	padding: 10px 25px;
  	color: #FFFFFF;
  	background-color: #829C71;
  	text-align: center;
  	cursor: pointer;
	font-size: 1.7vw;
	position: absolute;
  	top: 80%;
  	left: 17%;
  	transform: translate(-50%, -50%);
}

.hero-text button:hover {
  	opacity: 0.7;
}

/* Scroll Down text in Hero section */
.scroll-down p {
	position: absolute;
	top: 70%;
  	right: 0%;
  	transform: translate(-60%, -50%);
	font-family: Andreas, serif;
	font-size: 2em;
	color: #FFFFFF;
	writing-mode: vertical-lr;
}

/* Body Content in Home Page */
/* Content 1 in Home Page */
.title1 {
	font-family: Andreas, serif;
	font-size: 5.5em;
	margin: 50px 0 0 400px;
	color: #44321B;
}

.container1 {
	width: 100%;
	height: 570px;
	margin: 10px auto;
	position: relative;
}

.left1 {
	position: absolute;
}

.left1 img {
	object-fit: cover; 
	width: 1000px; 
	height: 380px;
}

.right1 p {
    width: 25%;
    height: auto;
    background-color: #495B3C;
    padding: 30px 50px;
    margin-top: 90px;
    font-size: 1.25em;
    color: #FFFFFF;
    font-family: Manrope, "sans-serif";
    text-align: left;
	position: absolute;
	top: 0;
	left: 50%;
}

.container1 a {
	text-decoration: none;
    color: #44321B;
    font-size: 1.5em;
    font-family: Manrope, "sans-serif";
	position: absolute;
	top: 92%;
	left: 70%;
	display: flex;
}

/* Content 2 in Home Page */
.title2 {
	font-family: Andreas, serif;
	font-size: 5.5em;
	margin: 50px 0 0 600px;
	color: #44321B;
}

.container2 {
	width: 100%;
	height: 545px;
	margin: 10px auto;
	position: relative;
}

.left2 p {
    width: 25%;
    height: auto;
    background-color: #495B3C;
    padding: 30px 50px;
    font-size: 1.25em;
    color: #FFFFFF;
    font-family: Manrope, "sans-serif";
    text-align: left;
	position: absolute;
	top: 0;
	left: 20%;
}

.right2 {
	position: absolute;
	top: 10%;
	left: 47%;
	z-index: -1;
}

.right2 img {
	object-fit: cover; 
	width: 800px; 
	height: 500px;
}

.container2 a {
	text-decoration: none;
    color: #44321B;
    font-size: 1.5em;
    font-family: Manrope, "sans-serif";
	position: absolute;
	top: 62%;
	left: 20%;
	display: flex;
}

/* Hover Button in Home Page*/
.button {
  	cursor: pointer;
  	position: relative;
  	border: none;
  	background: none;
  	transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  	transition-duration: 400ms;
  	transition-property: color;
}

.button:focus,
.button:hover {
  	color: #44321B;
}

.button:focus:after,
.button:hover:after {
  	width: 100%;
  	left: 0%;
}

.button:after {
  	content: "";
  	pointer-events: none;
  	bottom: 5px;
  	left: 50%;
  	position: absolute;
  	width: 0%;
  	height: 2px;
  	background-color: #44321B;
  	transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  	transition-duration: 400ms;
  	transition-property: width, left;
}

/* Arrow button in Home Page */
.arrow-button {
  	border: 1px solid #44321B;
  	border-radius: 50%;
  	cursor: pointer;
  	display: inline-block;
	padding: 5px;
  	position: relative;
	margin-right: 10px;
}

/* Consistent contact section */
.contact-section {
	margin: 0;
	border-top: 1px solid #44321B;
	align-content: center;
	padding: 40px 0 20px 80px;
	position: relative;
}

.contact-section h2 {
	font-family: Andreas, "serif";
	font-weight: 100;
	font-size: 10em;
	color: #44321B;
	margin: 0;
}

.contact-section p {
	font-family: Manrope, "sans-serif";
	font-size: 1.4em;
	margin-top: -20px;
	padding-left: 10px;
}

/* Button for Consistent contact section */
.button-link {
	border: 1px solid #829C71;
  	border-radius: 50%;
  	padding: 80px;
  	cursor: pointer;
  	display: inline-block;
  	position: absolute;
	top: 50%;
	right: 90px;
	transform: translateY(-50%);
	background-color: #FCEFE8;
	transition: background-color 0.3s ease;
	overflow: hidden;
}

.button-link:hover {
	background-color: #829C71;
}

.stick {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px; 
    height: 70px;
    background-color: #829C71;
    transform: translate(-50%, -50%) rotate(90deg);
    transition: background-color 0.3s ease;
}

.button-link:hover .stick {
    background-color: #FCEFE8;
}

.button-link-arrow {
	display: block;
	color: #829C71;
	position: relative;
}

.button-link-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
	width: 50px;
	height: 50px;
    border: 3px solid #829C71;
	border-left: none;
	border-top: none;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: border-color 0.3s ease;
}

.button-link:hover .button-link-arrow::before {
    border-color: #FCEFE8;
}

/* Heading */
.heading p {
	font-family: Andreas, serif;
	font-size: 12.5em;
	color: #44321B;
	text-align: center;
	padding: 50px;
	margin: 0;
	border-bottom: 1px solid #44321B;
}

/* Two Column in About Page */
.row {
	content: "";
  	display: table;
  	clear: both;
}

.name {
	display: none;
}

.column .logoname {
	display: inline-block;
	width: 300px;
	height: auto;
	margin-bottom: -40px;
}

.column {
	float: left;
  	width: 50%;
}

.column img {
	object-fit: cover; 
	width: 100%; 
	height: 1080px;
}

.column-text {
	position: sticky; 
	top: 0;
}

.column h3 {
	font-family: Andreas, serif;
	font-weight: 100;
	font-size: 3em;
	color: #829C71;
	padding: 80px 80px 0 80px;
	margin: 0;
}

.column p {
	font-family: Manrope, "sans-serif";
	font-size: 1.3em;
	padding: 15px 80px;
	margin: 0;
	text-align: left;
}

hr {
	border: 1px solid #495B3C;
  	width: 63%;
  	float: right;
}

/* Image for mobile view in About Page */
.mobileimg {
	display: none;
}

/* Core value for mobile view in About Page */
.mobilevalue {
	display: none;
}

/* Our Team */
.teams {
	width: 100%;
	margin: auto;
	align-items: center;
	text-align: center;
}

.teams h3 {
	font-family: Andreas, serif;
	font-size: 4em;
	font-weight: 100;
	text-align: center;
	margin: 150px 0 50px 0;
	color: #495B3C;
}

.three-column {
	display: inline-flex;;
	padding: 5px;
	position: relative;
}

.three-column img {
	width: 460px;
	height: 550px;
	object-fit: cover;
	padding-bottom: 100px;
}

.three-column p {
	font-family: Andreas, serif;
	font-size: 3em;
	position: absolute;
	top: 65%;
	left: 5%;
	color: #FFFFFF;
}

/* Horizontal Accordion in Services Page */
.accordion {
    width: 100%;
	margin-top: -18px;
	margin-bottom: -17px;
	padding: 0;
}

.accordion-item {
	width: 100%;
	display: flex;
	overflow: hidden;
	padding: 0;
}

.accordion-header {
	list-style-type: none;
    height: 700px;
    overflow: hidden;
    width: 8%;
	transition: all 500ms linear;
	border-right: 1px solid #44321B;
	
}

.accordion-header a.action {
	display: block;
	height: 100%;
	position: relative;
}

.accordion-header a.action span {
	font-family: Andreas, serif;
	font-size: 2.5em;
	color: #829C71;
	writing-mode: vertical-lr;
	padding: 150px 25px 25px 25px;
}

.accordion-content {
	padding: 60px 60px 60px 150px;
	width: 600px;
	display: block;
}

.accordion-content h1 {
	font-family: Andreas, serif;
	color: #44321B;
	font-size: 3em;
	font-weight: 100;
}

.accordion-content p {
	font-family: Manrope, "sans-serif";
	font-size: 1.2em;
}

.accordion-content img {
	object-fit: cover; 
	width: 600px; 
	height: 350px;
}

.active {
	width: 80%;
}

.active a.action {
	display: none;
}

/* Projects list in Projects Page*/
.projects {
	margin: 30px 0 100px 0;
}

.list p {
	font-family: Andreas, serif;
	font-size: 3em;
	border-bottom: 1px solid #44321B;
	margin: 0;
	padding-left: 80px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.list a {
	text-decoration: none;
	color: #44321B;
}

.year {
	font-family: Manrope, "sans-serif";
	font-size: 1.5vw;
	opacity: 0.7;
}

/* Hover Image for Projetcs list in Projects Page */
.image-preview {
    display: none;
	position: absolute;
    top: 0;
	pointer-events: none;
    z-index: 999;
}

.list a:hover + .image-preview {
    display: block;
}

/* Download Projects in Projects Page*/
.download {
	font-family: Manrope, "sans-serif";
	font-size: 1.5em;
	text-align: center;
	margin: 50px;
}

.download a {
  	border: none;
  	outline: 0;
  	display: inline-block;
  	padding: 10px 25px;
  	color: #FFFFFF;
  	background-color: #829C71;
  	text-align: center;
  	cursor: pointer;
	text-decoration: none;
}

.download a:hover {
  	opacity: 0.7;
}

/*Auto scroll heading in Projects Page */
.auto-heading {
	border-bottom: 1px solid #44321B;
	border-top: 1px solid #44321B;
	padding: 10px 0;
	margin: 60px 0 10px 0;
	display: flex;
	justify-content: flex-start;
	overflow-x: hidden;
}

.auto-heading p {
	font-family: Andreas, serif;
	color: #44321B;
	font-size: 3em;
	margin: 0;
	white-space: nowrap; 
	padding: 0 10px;
	animation: move-rtl 20s linear infinite;
}

@keyframes move-rtl {
    0% { transform: translateX(0); } 
    100% { transform: translateX(-100%); }
}

/* Image SLider in Projects Page */
.slider {
	max-width: 1550px;
	overflow: hidden;
}

.slider-wrapper .image-list {
	display: grid;
	gap: 10px;
	font-size: 0;
	overflow-x: auto;
	padding-left: 10px;
	scrollbar-width: none;
	grid-template-columns: repeat(10, 1fr);
	cursor: grab;
}

.slider-wrapper .image-list:active {
	cursor: grabbing;
}

.slider-wrapper .image-list::-webkit-scrollbar{
	display: none;
}

.slider-wrapper .image-list .image-item {
	width: auto;
	height: 550px;
}

.slide-button {
	border: none;
	background: none;
	margin: 10px 10px 20px 10px;
}

/* Body Content in Contact Page */
.mobile-contact {
	display: flex;
}

.mobile-comp-h {
	display: none;
}

.mobile-comp-p {
	display: none;
}

/* Map in Contact Page */
.map {
	flex: 60%;
	margin: 100px 50px;
}

.map h1 {
	font-family: Andreas, serif;
	font-size: 7em;
	font-weight: normal;
	color: #829C71;
	margin: 20px 0;
}

.map p {
	font-family: Manrope, "sans-serif";
	font-size: 1.5em;
	color: #000000;
	margin: 20px 0;
}

/* Contact info in Contact Page */
.contact {
	flex: 25%;
	font-family: Manrope, "sans-serif";
	font-size: 1.2em;
	color: #000000;
	margin: 100px 0;
	border-left: 1px solid #44321B;
	padding-left: 30px;
}

.contact span {
	font-size: 0.9em; 
	color: #000000; 
	margin-left: 60px; 
	margin-top: 20px;
}

.contact a {
	text-decoration: none;
}

.contact a:hover {
	color: #829C71;
	text-decoration: underline;
}

.info p {
	font-size: 1.2em;
	color: #776751;
	padding: 15px 0 15px 0;
}

.info .fa {
	color: #776751;
	transition: color 0.3s ease-in-out;
	font-size: 35px;
	width: 40px;
	text-align: center;
	display: inline-block;
	border-radius: 50%;
	margin-right: 20px;
}

.info .fa:hover {
	opacity: 0.7;
}

/* Back To Top button */
.bttop {
	position: fixed;
	width: 40px;
	height: 40px;
	bottom: 40px;
	right: 50px;
  	border: 1px solid #829C71;
  	padding: 5px;
  	cursor: pointer;
  	font-size: 2vw;
	text-align: center;
	text-decoration: none;
	color: #829C71;
	transition: bottom 0.3s;
}

.bttop:hover {
  	background-color: #829C71;
	color: #FCEFE8;
}

/* Footer */
footer {
    background-color: #FCEFE8;
    padding: 20px 0px;
	font-family: Manrope, "sans-serif";
	border-top: 1px solid #44321B;
}

.footer-column {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.footer-column img {
	width: 100%;
	height: auto;
}

.footer-col {
	align-items: center;
    color: #44321B;
    float: left;
	display: inline-grid;
	font-family: Manrope, "sans-serif";
	font-size: 1.3em;
}

.footer-col a {
	text-decoration: none;
    color: #44321B;
	transition: color 0.3s ease-in-out;
}

.footer-col a:hover {
    color: #829C71;
	text-decoration: underline;
}

.navlink a {
	text-decoration: none;
    color: #44321B;
	transition: color 0.3s ease-in-out;
}

.navlink a:hover {
    color: #829C71;
	text-decoration: underline;
}

.footer-col .fa {
    color: #776751;
	transition: color 0.3s ease-in-out;
	font-size: 40px;
	width: 40px;
	text-align: center;
	text-decoration: none;
	margin-right: 20px;
}

.footer-col .fa:hover {
    opacity: 0.7;
}

.copyright {
	text-align: center;
	font-size: 15px;
}

.mobile-copyright {
	display: none;
}

/* Adjusting layout for different screen size scaling ratio */
@media (-webkit-device-pixel-ratio: 1.5) {
    body {
        zoom: 0.83;
    }
}

/* Tablet View 1024px */
@media only screen and (max-width: 1024px) {
	.navbar.overlay-menu-open .logo img {
        display: none;
    }

/* Hamburger Menu */	
	.menu-content {
		display: flex;
		flex-direction: column;
		padding: 20px;
		font-size: 2vw;
	}
	
	.mobile-logo {
		display: block;
		width: 300px;
	}
	
	.overlay-menu.open {
		display: flex;
	}
	
	.overlay-menu a:hover .hover-content {
		display: none;
	}
	
/* Hero section in Home Page */
	.hero-text h1 {
		width: 80%;
		top: 35%;
		left: 50%;
		text-align: left;
		font-size: 6vw;
	}
	
	.hero-text p {
		width: 55%;
		top: 65%;
		left: 38%;
		text-align: left;
		font-size: 2vw;
	}
	
	.hero-text button {
		top: 87%;
		left: 20%;
		text-align: left;
		font-size: 2.5vw;
	}

/* Scroll Down text at Hero section */
	.scroll-down p {
		font-size: 2vw;
	}
	
/* Body Content in Home Page */
/* Content 1 in Home Page */
	.title1 {
		font-szie: 5em;
		margin: 50px 0 0 250px;
	}

	.container1 {
		width: 100%;
		height: 600px;
	}

	.left1 img {
		object-fit: cover; 
		width: 800px; 
		height: 380px;
	}

	.right1 p {
		width: 40%;
		height: auto;
		left: 40%;
	}

	.container1 a {
		font-size: 2em;
		top: 85%;
		left: 65%;
	}

/* Content 2 in Home Page */
	.title2 {
		font-size: 5em;
		margin: 50px 0 0 400px;
	}

	.container2 {
		width: 100%;
		height: 600px;
	}

	.left2 p {
		width: 40%;
		height: auto;
		left: 5%;
	}

	.right2 {
		position: absolute;
		top: 10%;
		left: 40%;
		z-index: -1;
	}

	.right2 img {
		object-fit: cover; 
		width: 600px; 
		height: 550px;
	}

	.container2 a {
		top: 62%;
		left: 5%;
		font-size: 2em;
	}
	
/* Consistent contact section */
	.contact-section h2 {
		text-align: left;
		font-size: 6.5em;
	}

	.contact-section p {
		font-size: 1.2em;
		width: 60%;
		text-align: left;
	}

/* Core Value for desktop view in About Page */	
	.desktopvalue {
		display: none;
	}
	
/* Core Value for mobile view in About Page */	
	.mobilevalue {
		display: block;
	}
	
	hr {
  		width: 80%;
	}
	
/* Our Teams */
	.three-column {
		display: flex;
		padding: 0;
		position: relative;
	}

	.three-column img {
		width: 100%;
		height: 300px;
		object-fit: cover;
		padding: 0;
		z-index: -1;
	}
	
	.three-column p {
		position: absolute;
		font-size: 4.5em;
		top: 45%;
		left: 0;
		padding-left: 30px;
		text-align: left;
	}

/* Horizontal Accordion in Services Page */
	.accordion-header a.action span {
		padding: 130px 10px 10px 10px;
	}

	.accordion-content {
		padding: 30px;
	}

	.accordion-content h1 {
		font-size: 2.5em;
	}

	.accordion-content p {
		font-size: 1em;
	}

/* Completed year in Projects Page */
	.year {
		font-size: 2vw;
	}
	
/* Map in Contact Page */
	.map {
		flex: 55%;
	}

	.map h1 {
		font-size: 6em;
		text-align: left;
	}
	
/* Contact info in Contact Page */
	.contact {
		text-align: left;
	}

/* Back To Top button */
	.bttop {
		font-size: 3vw;
	}
}
	
/* Tablet View 768px */
@media only screen and (max-width: 768px) {
	.navbar.overlay-menu-open .logo img {
        display: none;
    }
	
/* Hero section in Home Page */
	.hero-image img {
		width: 100%;
		height: 1024px;
		object-fit: cover;
	} 
	
	.hero-text h1 {
		width: 80%;
		top: 35%;
		left: 50%;
		text-align: left;
		font-size: 10vw;
	}
	
	.hero-text p {
		width: 55%;
		top: 70%;
		left: 38%;
		text-align: left;
		font-size: 3vw;
	}
	.hero-text button {
		top: 87%;
		left: 23%;
		text-align: left;
		font-size: 3vw;
	}
	
/* Hamburger Menu */	
	.menu-content {
		display: flex;
		flex-direction: column;
		padding: 30px;
		font-size: 2.5vw;
	}
	
	.mobile-logo {
		display: block;
		width: 300px;
	}
	
	.overlay-menu.open {
		display: flex;
	}
	
	.overlay-menu a:hover .hover-content {
		display: none;
	}	

/* Hero section in Home Page */
	.hero-image img {
		width: 100%;
		height: 1024px;
		object-fit: cover;
	} 
	
	.hero-text h1 {
		width: 80%;
		top: 35%;
		left: 50%;
		text-align: left;
		font-size: 10vw;
	}
	
	.hero-text p {
		width: 55%;
		top: 70%;
		left: 38%;
		text-align: left;
		font-size: 3vw;
	}
	
	.hero-text button {
		top: 87%;
		left: 23%;
		text-align: left;
		font-size: 3vw;
	}
	
/* Scroll Down text at Hero section */
	.scroll-down p {
		display: none;
	}
	
/* Heading */
	.heading p {
		font-size: 13em;
	}

/* Body Content in Home Page*/
/* Content 1 in Home Page */
	.title1 {
		margin: 50px 0 0 50px;
		font-size: 11vw;
	}

	.container1 {
		height: 800px;
	}
	
	.left1 img {
		width: 90%;
		height: 500px;
	}

	.right1 p {
    	width: 75%;
    	padding: 30px;
    	font-size: 1.4em;
		top: 30%;
		left: 10%
	}

	.container1 a {
		top: 80%;
		left: 65%;
	}
	
/* Content 2 in Home Page */
	.title2 {
		margin: 50px 0 0 60px;
		font-size: 11vw;
	}
	
	.container2 {
		height: 800px;
	}

	.left2 p{
    	width: 80%;
    	padding: 50px 30px;
    	font-size: 1.4em;
		position: absolute;
		top: 40%;
		left: 5%;
	}

	.right2 {
		top: 0%;
		left: 15%;
	}
	
	.right2 img {
		width: 100%;
		height: 500px;
	}

	.container2 a {
		top: 80%;
		left: 5%;
	}
	
/* Consistent contact section */
	.contact-section {
		padding: 140px 0 180px 0;
		align-content: center;
	}

	.contact-section h2 {
		font-size: 5.5em;
		margin-bottom: 80px;
		text-align: center;
	}

	.contact-section p {
		font-size: 1.4em;
		width: 70%;
		margin: auto;
		padding-left: 0;
		padding-bottom: 50px;
		line-height: 1.5;
		text-align: center;
	}

/* Button for Consistent Contact Section */
	.button-link {
		top: 80%;
		left: 45%;
		padding: 40px;
		width: 10%;
		height: auto;
	}

	.stick {
    	height: 30px;
	}

	.button-link-arrow::before {
    	top: 50%;
    	left: 50%;
		width: 20px;
		height: 20px;
		border-left: none;
		border-top: none;
	}
	
/* Heading */
	.heading p {
		font-size: 7em;
		padding: 90px 0 40px 0;
	}

/* Two Column in About Page */
	.name {
		display: inline-block;
	}
	
	.column .logoname {
		display: none;
	}
	
	.column {
		width: 100%;
	}
	
	.column h3 {
		padding: 50px 40px 0 40px;
	}
	
	.column p {
		padding: 15px 40px;
	}
	
	.column img {
		object-fit: cover; 
		width: 100%; 
		height: 600px;
		margin: 30px 0;
	}
	
	.column-text {
		position: relative;
		width: 100%;
	}
	
/* Core Value for desktop view in About Page */	
	.desktopvalue {
		display: block;
	}
	
/* Core Value for mobile view in About Page */	
	.mobilevalue {
		display: none;
	}
	
/* Image for desktop view in About Page */	
	.desktopimg {
		display: none;
	}
	
/* Image for mobile view in About Page */
	.mobileimg {
		display: block;
	}
	
	hr {
  		width: 65%;
	}

/* Our Teams */
	.three-column {
		display: flex;
		padding: 0;
		position: relative;
	}

	.three-column img {
		width: 100%;
		height: auto;
		object-fit: cover;
		padding: 0;
		z-index: -1;
	}
	
	.three-column p {
		position: absolute;
		font-size: 4em;
		top: 65%;
		left: 0;
		padding-left: 30px;
		text-align: left;
	}
	
/* Horizontal Accordion in Services Page */
	.accordion-item {
        display: block;
        overflow: hidden;
        padding: 0;
    }

    .accordion-header {
        width: 100%;
        height: auto;
        overflow: hidden;
		border: none;
		border-top: 1px solid #44321B;
		border-bottom: 1px solid #44321B;
    }

    .accordion-header a.action {
        height: auto;
        text-align: center;
		padding: 30px;
		text-decoration: none;
    }

    .accordion-header a.action span {
        font-size: 3.5em;
		writing-mode: horizontal-tb;
		padding: 0;
    }

    .accordion-content {
        width: 100%; 
        display: none;
		padding: 0;
    }

    .accordion-content h1 {
        font-size: 4em;
		width: 80%;
		padding-top: 60px;
		margin: auto;
    }

    .accordion-content p {
        font-size: 1.5em;
		width: 80%;
		margin: auto;
		padding: 60px 0;
    }
	
	.accordion-content img {
		width: 100%;
		height: 500px;
		object-fit: cover;
	}

    .active {
        width: 100%;
    }

    .active .accordion-content {
        display: block;
    }

/* Projects list in Projects Page */
	.list p {
		font-size: 2.5em;
		padding: 10px 0 10px 10px;
		text-align: left;
	}
	
	.year {
		font-size: 2.5vw;
	}
	
/* Download projects in Projects Page */
	.download {
		font-size: 2em;
		margin: 70px 20px;
	}
	
/* Image Slider in Projects Page */
	.slider-wrapper .image-list {
    	display: flex;
		padding: 0;
		gap: 0;
	}

	.image-item {
    	flex: 0 0 auto;
    	width: 100%;
    	height: 700px;
		object-fit: cover;
	}

/* Body Content in Contact Page */
	.mobile-contact {
		flex-direction: column-reverse;
	}
	
	.mobile-comp-h {
		display: block;
		font-family: Andreas, serif;
		font-size: 5em;
		font-weight: normal;
		color: #829C71;
		margin: 30px 0;
		text-align: center;
	}
	
	.mobile-comp-p {
		display: block;
		font-family: Manrope, "sans-serif";
		font-size: 1.5em;
		color: #000000;
		margin: 60px 40px;
		text-decoration: none;
	}

/* Map in Contact Page */
	.map {
		flex: 100%;
		margin: 0;
	}
	
	.map h1 {
		display: none;
	}

	.map p {
		font-size: 2.3em;
		margin: 20px 80px;
	}
	
	.map iframe {
		margin: 20px 0;
	}

/* Contact info in Contact Page */
	.contact {
		flex: 100%;
		font-size: 1.5em;
		margin: auto;
		padding-left: 30px;
		border-left: none;
	}
	
	.regist-info {
		display: none;
	}

	.info p {
		font-size: 1.5em;
		padding: 15px 0 15px 0;
	}

	.info .fa {
		font-size: 45px;
		width: 40px;
	}
	
/* Back To Top button */
	.bttop {
  		font-size: 3.5vw;
	}

/* Footer */
	.footer-column {
		width: 90%;
		flex-direction: column;
		align-items: center;
		margin: auto;
	}
	
	.footer-column img {
		width: 50%;
		height: auto;
	}
	
	.footer-col {
    	width: 100%;
    	margin: 20px 10px;
		font-size: 2em;
  	}
	
	.footer-col a {
    	text-align: center;
  	}
	
	.navlink a {
		text-align: center;
		padding: 10px 0;
	}
	
	.footer-col p {
		padding: 0 70px;
		margin: 10px;
		text-align: left;
	}
	
	.footer-col .fa {
		font-size: 50px;
		width: 40px;
	}
	
	.mobile-copyright {
		display: block;
		text-align: center;
		font-size: 20px;
		margin: 30px 0;
	}
	
	.copyright {
		display: none;
	}
}

/* Mobile View */
@media only screen and (max-width: 480px) {
  	.navbar.overlay-menu-open .logo img {
        display: none;
    }
	
/* Hamburger Menu */	
	.menu-content {
		display: flex;
		flex-direction: column;
		padding: 30px;
		font-size: 3vw;
	}
	
	.mobile-logo {
		display: block;
		width: 200px;
	}
	
	.overlay-menu.open {
		display: flex;
	}
	
	.overlay-menu a:hover .hover-content {
		display: none;
	}
	
/* Hero section in Home Page */
	.hero-image img {
		width: 100%;
		height: 800px;
		object-fit: cover;
	} 
	
	.hero-text h1 {
		width: 80%;
		top: 35%;
		left: 54%;
		text-align: left;
		font-size: 11vw;
	}
	
	.hero-text p {
		width: 55%;
		top: 65%;
		left: 41%;
		text-align: left;
		font-size: 3.5vw;
	}
	
	.hero-text button {
		top: 80%;
		left: 32%;
		text-align: left;
		font-size: 4vw;
	}
/* Scroll Down text at Hero section */
	.scroll-down p {
		display: none;
	}

/* Body Content in Home Page */
/* Content 1 in Home Page */
	.title1 {
		margin: 50px 0 0 50px;
		font-size: 12vw;
	}

	.container1 {
		height: 1000px;
	}
	
	.left1 img {
		width: 90%;
		height: 500px;
	}

	.right1 p {
    	width: 75%;
    	padding: 30px 30px;
    	margin-top: 200px;
    	font-size: 1.25em;
		top: 20%;
		left: 7%;
	}

	.container1 a {
		top: 95%;
		left: 45%;
		font-size: 1.5em;
	}
	
/* Content 2 in Home Page */
	.title2 {
		margin: 50px 0 0 50px;
		font-size: 12vw;
	}
	
	.container2 {
		height: 1000px;
	}

	.left2 p{
    	width: 80%;
    	padding: 50px 30px;
    	font-size: 1.25em;
		position: absolute;
		top: 40%;
		left: 0;
	}

	.right2 {
		top: 0%;
		left: 13%;
	}
	
	.right2 img {
		width: 100%;
		height: 500px;
	}

	.container2 a {
		top: 85%;
		left: 10%;
		font-size: 1.5em;
	}

/* Consistent contact section */
	.contact-section {
		padding: 160px 0 180px 0;
		align-content: center;
	}

	.contact-section h2 {
		font-size: 3.5em;
		margin-bottom: 80px;
		text-align: center;
	}

	.contact-section p {
		font-size: 1.3em;
		width: 70%;
		margin: auto;
		padding-left: 0;
		padding-bottom: 50px;
		line-height: 1.5;
		text-align: center;
	}

	.button-link {
		top: 75%;
		left: 40%;
		padding: 30px;
		width: 10%;
		height: auto;
	}

	.stick {
    	height: 30px;
	}

	.button-link-arrow::before {
    	top: 50%;
    	left: 50%;
		width: 20px;
		height: 20px;
		border-left: none;
		border-top: none;
	}
	
/* Heading */
	.heading p {
		font-size: 5.3em;
		padding: 90px 0 40px 0;
		letter-spacing: -5px;
	}

/* Two Column in About Page */
	.name {
		display: inline-block;
	}
	
	.column .logoname {
		display: none;
	}
	
	.column {
		width: 100%;
	}
	
	.column h3 {
		padding: 80px 40px 0 40px;
	}
	.column p {
		padding: 15px 40px;
	}
	
	.column img {
		object-fit: cover; 
		width: 100%; 
		height: 600px;
		margin: 30px 0;
	}
	
	.column-text {
		position: relative;
		width: 100%;
	}
	
/* Image for desktop view in About Page */	
	.desktopimg {
		display: none;
	}
	
/* Image for mobile view in About Page */	
	.mobileimg {
		display: block;
	}
	
/* Core Value for desktop view in About Page */	
	.desktopvalue {
		display: none;
	}
	
/* Core Value for mobile view in About Page */	
	.mobilevalue {
		display: block;
	}
	
	hr {
  		width: 75%;
	}

/* Our Teams */
	.three-column {
		display: flex;
		padding: 0;
		position: relative;
	}

	.three-column img {
		width: 100%;
		height: auto;
		object-fit: cover;
		padding: 0;
		z-index: -1;
	}
	
	.three-column p {
		position: absolute;
		font-size: 2.5em;
		top: 60%;
		left: 0;
		padding-left: 10px;
		text-align: left;
	}
	
/* Horizontal Accordion in Services Page  */
	.accordion-item {
        display: block;
        overflow: hidden;
        padding: 0;
    }

    .accordion-header {
        width: 100%;
        height: auto;
        overflow: hidden;
		border: none;
		border-top: 1px solid #44321B;
		border-bottom: 1px solid #44321B;
    }

    .accordion-header a.action {
        height: auto;
        text-align: center;
		padding: 20px;
		text-decoration: none;
    }

    .accordion-header a.action span {
        font-size: 2em;
		writing-mode: horizontal-tb;
		padding: 0;
    }

    .accordion-content {
        width: 100%; 
        display: none;
		padding: 0;
    }

    .accordion-content h1 {
        font-size: 2.5em;
		padding: 25px;
    }

    .accordion-content p {
        font-size: 1em;
		padding: 25px;
    }
	
	.accordion-content img {
		width: 100%;
		height: 400px;
		object-fit: cover;
	}

    .active {
        width: 100%;
    }

    .active .accordion-content {
        display: block;
    }

/* Projects list in Projects Page */
	.list p {
		font-size: 1.3em;
		padding: 10px 0 10px 10px;
		text-align: left;
	}
	
	.year {
		font-size: 2.5vw;
	}
	
/* Download projects in projects Page */
	.download {
		font-size: 1.2em;
		margin: 70px 20px;
	}
	
/* Image Slider in Projects Page */
	.slider-wrapper .image-list {
    	display: flex;
		padding: 0;
		gap: 0;
	}

	.image-item {
    	flex: 0 0 auto;
    	width: 100%;
    	max-width: 100%; 
    	height: 550px;
		object-fit: cover;
	}

/* Body Content in Contact Page*/
	.mobile-contact {
		flex-direction: column-reverse;
	}
	
	.mobile-comp-h {
		display: block;
		font-family: Andreas, serif;
		font-size: 3.5em;
		font-weight: normal;
		color: #829C71;
		margin: 20px 0;
		text-align: center;
	}
	
	.mobile-comp-p {
		display: block;
		font-family: Manrope, "sans-serif";
		font-size: 1.2em;
		color: #000000;
		margin: 60px 40px;
		text-decoration: none;
	}

/* Map in Contact Page */
	.map {
		flex: 100%;
		margin: 0;
	}
	
	.map h1 {
		display: none;
	}

	.map p {
		font-size: 1.2em;
		margin: 20px 40px;
	}
	
	.map iframe {
		margin: 20px 0;
	}

/* Contact info in Contact Page */
	.contact {
		flex: 100%;
		font-size: 1em;
		margin: auto;
		padding-left: 0;
		border-left: none;
	}
	
	.regist-info {
		display: none;
	}

	.info p {
		font-size: 1.2em;
		padding: 15px 0 15px 0;
	}

	.info .fa {
		font-size: 40px;
		width: 40px;
	}
	
/* Back To Top button */
	.bttop {
		width: 30px;
		height: 30px;
		right: 30px;
  		font-size: 6vw;
	}

/* Footer */
	.footer-column {
		width: 90%;
		flex-direction: column;
		align-items: center;
		margin: 0;
	}
	
	.footer-column img {
		width: 50%;
		height: auto;
	}
	
	.footer-col {
    	width: 100%;
    	margin: 20px 10px;
		font-size: 1.3em;
  	}
	
	.footer-col a {
		text-align: center;
		padding: 10px 0;
		font-size: 1em;
	}
	
	.footer-col p {
		padding: 0 5px;
		margin: 10px;
		font-size: 0.8em;
		text-align: left;
	}
	
	.footer-col .fa {
		font-size: 35px;
		width: 40px;
	}
	
	.mobile-copyright {
		display: block;
		text-align: center;
		font-size: 15px;
		margin: 30px 0;
	}
	
	.copyright {
		display: none;
	}
}