/* CSS TARGETING ALL THE PROPERTIES ON THE HOME PAGE */
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: #ffffff;
}

/* ANIMATION FOR FADE IN SCROLL*/
.animating-container {
	position: relative;
	opacity: 0;
	transition: opacity 800ms ease-out 200ms;
}

.animating-container.appear {
	opacity: 1;
}
/* END OF ANIMATION CSS FOR FADE IN SCROLL */

/* CSS FOR NAVIGATION BAR */
header {
	position: sticky;
	top: 0;
	z-index: 999; /* Ensures the header stays on top of other content */
	background-color: #ffffff;
}

nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
	padding: 0.6rem 3rem;
}

nav img {
	width: 430px;
	height: 60px;
	transform: scale(1.1);
	padding-left: 4rem;
	padding-top: 0.4rem;
}

nav ul {
	list-style: none;
	display: flex;
	margin-right: 2rem;
}

nav ul li a {
	text-decoration: none;
	font-size: 1rem;
	font-weight: 500;
	margin-right: 1.2rem;
	color: #ffffff;

	display: flex;
	padding: 0.6rem 1rem;
	border-radius: 3px;
	background-color: rgba(25, 55, 77, 0.9);
	transition: all 0.5s ease;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	border: none;
}

nav ul li a .icon {
	height: 2rem;

	display: flex;
	justify-content: center;
	align-items: center;
}

nav ul li a .icon span {
	background: #8c9aa9;
	color: rgb(25, 55, 77, 0.9);
	border-radius: 100%;
	padding: 0rem;

	width: 0rem;
	height: 0rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	transform: rotate(-180deg);
	transition: all 0.5s ease;
	opacity: 0;
}

nav ul li a:hover .icon span {
	transform: rotate(0deg);
	font-weight: 800;
	font-size: 1.5rem;
	border-radius: 100%;
	padding: 0.5rem;
	width: 40px;
	height: 40px;
	opacity: 1;
}
/* END OF CSS FOR NAVIGATION BAR */

/* HAMBURGER MENU */

#hamburger-nav {
	display: none;
	justify-content: space-between;
	align-items: center;
	padding: 7px 15px;
	min-height: 80px;
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: #ffffff;
}

#hamburger-nav img {
	margin-left: 0.2rem;
	margin-right: 1.3rem;
	padding-top: 0.2rem;
}

.nav-menu {
	display: flex;
	font-family: 'Montserrat', sans-serif, Helvetica;

	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	gap: 15px;
	flex-direction: column;
	text-align: center;

	position: fixed;
	left: -100%;
	top: 160px;
	width: 100%;
	transition: 0.5s ease;
	padding-top: 2rem;
	padding-bottom: 2rem;
	z-index: 1000;
}

.nav-menu.active {
	left: 0;
}

.nav-menu li {
	list-style: none;
	margin: 6px 0;
	background-color: #ffffff;
}

.nav-menu li a {
	font-size: 1.3rem;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
	color: rgba(25, 55, 77, 0.9);
	background-color: #ffffff;
	border-bottom: 2px solid rgba(25, 55, 77, 0.9);
}

.nav-menu li a:active {
	color: #ffffff;
}

.hamburger-icon {
	/* display: none; */
	cursor: pointer;
}

.hamburger-icon span {
	display: block;
	width: 40px;
	height: 2px;
	padding: 2px 0;
	margin-bottom: 0.5rem;
	margin-right: 1.5rem;

	background-color: rgba(25, 55, 77, 0.9);
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.hamburger-icon.active span:first-child {
	transform: rotate(45deg) translate(10px, 5px);
}

.hamburger-icon.active span:nth-child(2) {
	opacity: 0;
}

.hamburger-icon.active span:last-child {
	transform: rotate(-45deg) translate(10px, -5px);
}

.hamburger-icon span:first-child {
	transform: none;
}
.hamburger-icon span:nth-child(2) {
	opacity: 1;
}
.hamburger-icon span:last-child {
	transform: none;
}

/*END OF HAMBURGER MENU */

/* INTRODUCTION SECTION */
.intro-div {
	position: relative;
}

img#intro-image-slides {
	width: 100%;
	height: 800px;
	object-fit: cover;
	filter: brightness(80%);
}

h2#intro-text,
h2#traditional-text,
h3#gestalt-planning2-text,
h3#gestalt-planning1-text {
	font-size: 3.9rem;
	font-weight: 800;
	line-height: 5rem;
	background-color: rgb(0, 0, 0, 0.2);
	padding: 4rem 4rem;
	border: none;
	border-radius: 4px;

	text-align: start;
	position: absolute;
	top: 26%;
	left: 22%;
	width: 55%;
	color: #ffffff;

	animation: fadeIn 2s;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* END OF INTRODUCTION SECTION */

/* ABOUT SECTION */
/* targeting scroll highlight animation */
.about-div1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	height: 100vh;
	margin-left: 8rem;
	margin-right: 13rem;
	margin-bottom: 2rem;
}

.text {
	font-size: 7vw;
	letter-spacing: 0.15em;
	line-height: 7rem;
	margin: 0;

	width: 100%;
	color: rgb(35, 31, 32, 0.3);
	background: linear-gradient(to right, #b6b6b6, #231f20) no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	background-size: 0%;
	transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1) 0.5s;

	border-bottom: 1px solid #2f2b28;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	position: relative;
}

.about-div1 span {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #003d60;
	color: #d9d9d9;

	clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
	transform-origin: center;
	transition: all cubic-bezier(0.1, 0.5, 0.5, 1) 0.4s;

	display: flex;
	flex-direction: column;
	justify-content: center;
}

.text:hover > span {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
/* end of scroll highlight animation */
/* end of about div 1 */

/* Beginning of about div 2 */
.about-div2 {
	background-color: rgb(25, 55, 77, 0.2);
	height: 85vh;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
	padding-top: 2rem;
}

.about-div2-image {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-content: center;
	align-items: center;
	padding-left: 3rem;
}

.about-div2-image img {
	width: 680px;
	height: 460px;
	object-fit: cover;
	margin-top: 3rem;
	border-radius: 4px;
	transition: transform 0.9s ease-in-out; /* Smooth transition */
	transform-origin: center center; /* Ensures the zoom effect is centered */
}

.about-div2-image img:hover {
	transform: scale(1.04); /* Zoom out by 20% */
}

.about-first-principle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: start;
	/* font-family: 'Be Vietnam Pro', sans-serif; */
	margin-top: 1rem;
	margin-right: 3rem;
}

/* End of about div 2 */

/* Beginning of about-div3 */
.about-div3 {
	height: 140vh;
	/* font-family: 'Montserrat', sans-serif; */
}

.text2 {
	font-size: 6.8vw;
	letter-spacing: 0.15em;
	line-height: 7rem;
	margin: 0;
}

/* End of about-div3 */

/* END OF ABOUT SECTION */

/* POLARIZATION SECTION */
.polarize-main-div {
	background-color: rgb(25, 55, 77, 0.2);
	box-shadow: 4px 1px 4px 0 rgba(0, 0, 0, 0.4);
	height: 85vh;
	padding-top: 2rem;
	padding-bottom: 2rem;
	margin-bottom: 6rem;
}

/* END OF POLARIZATION SECTION */

/* BEGINNING OF TRADITIONAL FINANCIAL PLANNING SECTION */
.traditional-div {
	position: relative;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
}

.traditional-div img {
	width: 100%;
	height: 100%;
	filter: brightness(95%);
	opacity: 0.85;
}

h2#traditional-text {
	font-size: 3rem;
	line-height: 5rem;
	background-color: rgb(0, 0, 0, 0.3);
	padding: 3rem 4rem;

	top: 25%;
	left: 12%;
	width: 75%;
}

/* END OF TRADITIONAL FINANCIAL PLANNING SECTION */

/* BEGINNING OF GESTALT PLANNING PROCESS SECTION  */
.gestalt-planning-div {
	padding-top: 4rem;
	margin-top: 4rem;

	background-color: rgb(25, 55, 77, 0.2);
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
}

.gestalt-planning-div h2 {
	/* font-family: 'Montserrat', sans-serif; */
	font-size: 2.7rem;
	font-weight: 700;
	color: #fff;
	background-color: rgb(25, 55, 77, 0.8);

	margin-left: auto;
	margin-right: auto;
	width: 85%;

	padding: 1.5rem 1.5rem;
	text-align: center;
	transition: transform 0.9s ease-in-out; /* Smooth transition */
	transform-origin: center center; /* Ensures the zoom effect is centered */
}

.gestalt-planning-div h2:hover {
	transform: scale(1.02); /* Zoom out by 20% */
}

/* gestalt planning div1 */
.gestalt-planning-inner-div1 {
	display: flex;
	flex-direction: column;
	column-gap: 2rem;
	justify-content: center;
	align-items: center;
	margin-bottom: 2rem;
	margin-top: 4rem;
	padding-bottom: 3rem;
	padding-top: 2rem;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);

	position: relative;
}

.gestalt-planning-inner-div1 h3 {
	font-size: 4rem;
	line-height: 5rem;
	background-color: rgb(0, 0, 0, 0.2);
	padding: 3rem 4rem;

	position: absolute;
	top: 24%;
	left: 23%;
	width: 55%;
	color: #fff;
}

.gestalt-planning-inner-div1 img {
	width: 950px;
	height: 450px;
	filter: brightness(90%);
	object-fit: cover;
	border-radius: 3px;
	transition: transform 0.9s ease-in-out; /* Smooth transition */
	transform-origin: center center; /* Ensures the zoom effect is centered */
}

.gestalt-planning-inner-div1 img:hover {
	transform: scale(1.02); /* Zoom out by 20% */
}

/* end gestalt planning div1 */

/* gestalt planning div2 */

.gestalt-planning-inner-div2 {
	position: relative;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
	background-color: #ffffff;
	margin-bottom: 0;
}

.gestalt-planning-inner-div2 img {
	width: 100%;
	height: 800px;
	object-fit: cover;
	filter: brightness(80%);
}

.gestalt-planning-inner-div2 h3#gestalt-planning2-text {
	font-size: 4rem;
	line-height: 5rem;
	background-color: rgb(0, 0, 0, 0.2);
	padding: 3rem 4rem;

	top: 28%;
	left: 17%;
	width: 65%;
	color: #fff;
}
/*end of gestalt planning div2 */

/* END OF GESTALT PLANNING PROCESS SECTION  */

/* BEGINNING OF DISCOVER BUTTON SECTION */
.discover-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 2rem;
	padding-top: 1rem;
	padding-bottom: 3rem;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
}

.discover-button h2 {
	/* font-family: 'Montserrat', sans-serif; */
	font-size: 1.8rem;
	font-weight: 700;
	color: #000000;

	margin-left: auto;
	margin-right: auto;
	width: 50%;

	padding: 1.5rem 1.5rem;
	text-align: center;
}

.discover-button a {
	text-decoration: none;
	font-size: 1.2rem;
	/* font-family: 'Be Vietnam Pro', sans-serif; */
	font-weight: 500;
	color: #ffffff;

	display: flex;
	padding: 0.6rem 1rem;
	border-radius: 3px;
	background-color: rgb(25, 55, 77, 0.9);
	transition: all 0.5s ease;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	border: none;
}

.discover-button a .icon {
	height: 2rem;

	display: flex;
	justify-content: center;
	align-items: center;
}

.discover-button a .icon span {
	background: #8c9aa9;
	color: rgb(25, 55, 77, 0.9);
	border-radius: 100%;
	padding: 0rem;

	width: 0rem;
	height: 0rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	transform: rotate(-180deg);
	transition: all 0.5s ease;
	opacity: 0;
}

.discover-button a:hover .icon span {
	transform: rotate(0deg);
	font-weight: 800;
	font-size: 1.5rem;

	border-radius: 100%;
	padding: 0.5rem;
	width: 2rem;
	height: 2rem;
	opacity: 1;
}

/* END OF DISCOVER BUTTON SECTION */

/* BEGINNING OF ACHIEVE TOGETHER SECTION */
.conquer-together-main-div {
	background-color: rgb(25, 55, 77, 0.2);
	/* font-family: 'Montserrat', sans-serif; */

	padding-top: 5rem;
	padding-bottom: 3rem;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
}

.conquer-together-inner-div {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	margin-top: 3rem;
}

.conquer-header,
.what-is-included-header {
	font-size: 1.8rem;
	font-weight: 700;
	color: #fff;
	background-color: rgb(25, 55, 77, 0.8);

	margin-left: auto;
	margin-right: auto;
	width: 80%;

	padding: 1.5rem 1.5rem;
	text-align: center;
}

.conquer-together-inner-div img {
	width: 600px;
	height: 420px;
	object-fit: cover;
	filter: brightness(90%);
	margin-left: 7rem;
	border-radius: 3px;
	transition: transform 0.6s ease-in-out; /* Smooth transition */
	transform-origin: center center; /* Ensures the zoom effect is centered */
}

.conquer-together-inner-div img:hover {
	transform: scale(1.04); /* Zoom out by 20% */
}

.conquer-together-main-div ol {
	padding: 2rem 1.3rem;
	list-style-type: none; /* Hide default list markers */
	counter-reset: item; /* Initialize a counter */
}

.conquer-together-main-div ol li {
	font-size: 1.2rem;
	font-weight: 600;
	padding: 10px;
	counter-increment: item; /* Increment the counter for each list item */
	position: relative; /* Positioning context for pseudo-element */
	padding-left: 40px; /* Space for the custom marker */
	margin-bottom: 1rem;
}

.conquer-together-main-div ol li span,
.what-is-included-main-div ol li span {
	font-size: 1.3rem;
	font-weight: 800;
	/* font-family: 'Be Vietnam Pro', sans-serif; */
}

.conquer-together-main-div ol li::before,
.what-is-included-main-div ol li::before {
	content: counter(item); /* Display the counter as the marker */
	position: absolute;
	left: 0;
	top: 6px;
	width: 25px; /* Width of the marker */
	height: 25px; /* Height of the marker */
	background-color: rgb(25, 55, 77, 0.8);
	border-radius: 50%;
	color: #fff; /* Text color for the marker */
	text-align: center;
	transform: translateX(-50%);
	padding-top: 5px; /* Adjust the position to ensure it's centered */
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 3px;
}

/* ENDING OF ACHIEVE TOGETHER SECTION */

/* WHAT IS INCLUDED SECTION */
.what-is-included-main-div {
	background-color: #ffffff;
	margin-top: 5rem;
	padding-top: 2rem;
	margin-bottom: 2rem;
	font-family: 'Montserrat', sans-serif;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
}

.what-is-included-header {
	background-color: rgb(25, 55, 77, 0.8);
}

.what-is-included-main-div ol {
	padding: 2rem 1.3rem;
	list-style-type: none; /* Hide default list markers */
	counter-reset: item; /* Initialize a counter */
}

.what-is-included-main-div ol li {
	font-size: 1.2rem;
	font-weight: 600;
	padding: 10px;
	counter-increment: item; /* Increment the counter for each list item */
	position: relative; /* Positioning context for pseudo-element */
	padding-left: 40px; /* Space for the custom marker */
	margin-bottom: 0.5rem;
}

.what-is-included-inner-div {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	margin-top: 1rem;
}

.what-is-included-inner-div img {
	width: 600px;
	height: 420px;
	object-fit: cover;
	filter: brightness(90%);
	margin-left: 7rem;
	border-radius: 3px;
	transition: transform 0.6s ease-in-out; /* Smooth transition */
	transform-origin: center center; /* Ensures the zoom effect is centered */
}

.what-is-included-inner-div img:hover {
	transform: scale(1.04); /* Zoom out by 20% */
}

.what-is-included-main-div ol li::before {
	background-color: rgb(25, 55, 77, 0.8);
}
/* ENDING OF WHAT IS INCLUDED SECTION */

/* HISTORY SECTION */

#gestalt-method-history {
	background-color: rgb(25, 55, 77, 0.2);

	padding-top: 5rem;
	padding-bottom: 3rem;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
}

#gestalt-method-history h2 {
	font-size: 1.8rem;
	font-weight: 700;
	color: #fff;
	background-color: rgb(25, 55, 77, 0.8);

	margin-left: auto;
	margin-right: auto;
	width: 80%;

	padding: 1.5rem 1.5rem;
	text-align: center;
	margin-bottom: 2rem;
}

.history-main-div {
	display: flex;
	flex-direction: column;
	padding-left: 6rem;
	padding-right: 6rem;
}

.first-history-section,
.second-history-section {
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 2rem;
	text-align: start;
}

.first-history-section {
	padding-right: 3rem;
}

.first-history-section p {
	margin-bottom: 1.5rem;
}

.second-history-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	align-items: top;
	margin-top: 2rem;
}

.second-history-section img {
	width: 600px;
	height: 450px;
	object-fit: cover;
	filter: brightness(90%);
	border-radius: 3px;
	transition: transform 0.6s ease-in-out; /* Smooth transition */
	transform-origin: center center; /* Ensures the zoom effect is centered */
}

.second-history-section img:hover {
	transform: scale(1.04); /* Zoom out by 20% */
}

.second-history-section p {
	margin-bottom: 1.5rem;
	padding-left: 2rem;
}

.history-emphasis span {
	font-style: italic;
}

/* END OF HISTORY SECTION */

/* FOOTER */
footer {
	height: 25vh;
	background-color: rgb(25, 55, 77, 0.8);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.footer-address-div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	font-size: 1rem;
	/* font-family: 'Montserrat', sans-serif; */
	font-weight: 600;
	color: #abbecd;
	line-height: 1.7rem;
	margin-bottom: 1rem;
}

.footer-title {
	font-weight: 800;
}

.footer-detail {
	margin: 0 auto;
	width: 80%;

	font-size: 1rem;
	/* font-family: 'Montserrat', sans-serif; */
	font-weight: 600;
	color: #abbecd;
	line-height: 1.7rem;
}

.footer-detail span {
	text-decoration: none;
}

.footer-detail span a {
	font-weight: 700;
	color: #abbecd;
}

.footer-detail span a:hover {
	color: #fff;
}

/* END OF FOOTER */