@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
	margin: 0;
	font-family: "Roboto", sans-serif;
	/* background-color: #251e1e; */
	overflow-x: hidden;
}

p {
	margin: 0;
}

.topsectionmaincontainer {
	scroll-margin-top: 135px;
	display: flex;
	align-items: center;
	gap: 50px;
	padding: 0 0 0 116px;
	overflow: hidden;
}

.topsectextsection {
	display: flex;
	flex-direction: column;
	gap: 30px;
	max-width: 236px;
}

.lineandtitletext {
	display: flex;
	align-items: center;
}

.lineandtitletext p {
	padding: 8px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	font-family: Roboto;
}

.whiteline {
	width: 40px;
	height: 2px;
	background-color: #FFFFFF;
	border-radius: 100px;
}

.topsecmaintitle {
	color: #AE943F;
	font-size: 40px;
	font-weight: 600;
	font-family: Roboto;
}

.topsecviewmorebtn {
	border: 1.5px solid #AE943F;
	display: flex;
	width: fit-content;
	padding: 10px 15px;
	color: #AE943F;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: 0.3s ease;
}

.btnbgcolorslide {
	width: 100%;
	height: 100%;
	background-color: #AE943F;
	position: absolute;
	top: 0;
	left: -100%;
	z-index: 1;
	transition: 0.3s ease;
}

.topsecviewmorebtn p {
	z-index: 2;
}

.topsecviewmorebtn:hover .btnbgcolorslide {
	left: 0;
}

.topsecviewmorebtn:hover {
	color: #822222;
}

.topsecbannersection {
	height: 483px;
	width: 100%;
	display: flex;
	overflow: hidden;
	margin-right: -150px;
	padding-left: 100px;
	transition: 0.3s ease;
}

.bannerimg {
	position: relative;
	flex: 1;
	overflow: hidden;
	margin-left: -230px;
	transition: clip-path 0.4s ease;
	clip-path: polygon(50% 0%, 100% 0, 50% 100%, 0% 100%);
	z-index: 1;
}

.bannerimg img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
	/* border: 1px solid #FFF; */
}

/* Hover: turn all banner slices into rectangle */
.bannerimg.hoverbannerimage {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	z-index: 2;
}

/* Default angled shape for first-child */
.bannerimg:first-child {
	clip-path: polygon(0% 0%, 100% 0, 50% 100%, 0% 100%);
	/* padding-left: 150px; */
}

/* Hover rectangle for first-child */
.bannerimg:first-child.hoverbannerimage {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.topsecbannersection:has(.bannerimg:first-child.hoverbannerimage) {
	padding-left: 250px;
	min-width: 421px;
}

/* Default angled shape for last-child */
.bannerimg:last-child {
	clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0% 100%);
}

.topsecbannersection:has(.bannerimg:last-child.hoverbannerimage) {
	margin-right: 0px;
}

/* Hover rectangle for last-child */
.bannerimg:last-child.hoverbannerimage {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}


.hoverinfobox {
	position: absolute;
	top: 483px;
	/* below .topsecbannersection */
	left: 0;
	background: #A79758;
	color: #fff;
	padding: 20px;
	white-space: nowrap;
	display: none;
	/* display: flex; */
	flex-direction: column;
	gap: 10px;
	min-width: 325px;
	/* max-width: 421.47px; */
	transition: left 0.3s ease;
	z-index: 10;
}


.hoverinfobox p:first-child {
	font-size: 18px;
	font-weight: 600;
	color: #752924;
}

.hoverinfobox p:nth-child(2) {
	font-size: 12px;
	font-weight: 400;
	color: #000000;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.hoverinfobox p:last-child {
	font-size: 14px;
	font-weight: 500;
	color: #752924;

	display: flex;
	gap: 3px;
	align-items: center;
	transition: 0.3s ease;
	cursor: pointer;
	width: fit-content;
}

.hoverinfobox p:last-child:hover {
	gap: 8px;
}





@media (max-width: 1200px) {
	.topsectionmaincontainer {
		flex-direction: column;
		padding: 0 55px;
		align-items: flex-start;
	}

	.topsecbannersection {
		margin-right: 0px;
		padding-left: 230px;
		/* max-width: calc(100vw - 340px); */
	}

	.topsecbannersection:has(.bannerimg:first-child.hoverbannerimage) {
		padding-left: 230px;
	}

	.topsecbannersection:has(.bannerimg:last-child.hoverbannerimage) {
		margin-right: 0px;
	}
}

@media (max-width: 820px) {
	.topsectionmaincontainer {
		padding: 0px;
		gap: 36px;
	}

	.topsecbannersection {
		/* max-width: calc(100vw - 230px); */
	}

	.topsectextsection {
		padding: 0 55px;
		max-width: 100%;
		gap: 20px;
	}
}

@media (max-width: 720px) {
	.topsectextsection {
		gap: 0px;
	}

	.lineandtitletext p,
	.topsecviewmorebtn {
		display: none;
	}

	.whiteline {
		height: 1px;
		background-color: #AE943F;
	}

	.topsecmaintitle {
		font-size: 32px;
		font-style: italic;
		display: flex;
		flex-direction: column;
	}

	.topsecmaintitle span {
		font-size: 18px;
		color: #BBBBBB;
	}

	.bannerimg {
		clip-path: polygon(44% 0%, 100% 0, 56% 100%, 0% 100%) !important;
	}

	.bannerimg.hoverbannerimage {
		clip-path: polygon(44% 0%, 100% 0, 56% 100%, 0% 100%) !important;
	}

	.topsecbannersection:has(.bannerimg:first-child.hoverbannerimage) {
		padding-left: 60px;
	}

	.topsecbannersection {
		padding-left: 60px;
		margin-right: 0px;
		/* max-width: 100vw; */
	}

	.bannerimg {
		margin-left: -112px;
	}



	.topsecbannersection {
		animation: scrollLeft 5s linear infinite;
		overflow: visible;
	}

	@keyframes scrollLeft {
		0% {
			transform: translateX(-10%);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	.bannerimg {
		flex: 0 0 auto;
		width: 260px;
	}

	.topsecbannersection:hover {
		animation-play-state: paused;
	}

	.topsecpopupsec {
		display: flex !important;
	}

	.hoverinfobox {
		display: none !important;
	}

}


.topsecpopupsec {
	position: fixed;
	width: 100vw;
	height: 0vh;
	overflow: hidden;
	top: 100vh;
	background-color: #111111b3;
	backdrop-filter: blur(8px);
	display: none;
	flex-direction: column;
	justify-content: space-between;
	z-index: 99999;
	transition: 0.3s ease;
}

.topsecpopupsecactive {
	height: 100vh;
	top: 0;
}

.popclosesection {
	margin-top: 30px;
	display: flex;
	justify-content: space-between;
	padding-right: 11px;
}

.popcgoldbar {
	width: 90px;
	height: 14px;
	background-color: #AE943F;
}

.popcgoldbarbottom {
	width: 100%;
	height: 18px;
	background-color: #AE943F;
}

.popmainsection {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
}

.popimgsection {
	width: 350px;
	height: 473px;
	border-radius: 5.78px;
	border: .78px solid #AE943F;
	overflow: hidden;
}

.popimgsection img {
	height: inherit;
	width: inherit;
	object-fit: cover;
}

.poptextsection {
	display: flex;
	flex-direction: column;
	gap: 30px;
	/* gap: 69px; */
	align-items: center;
}

.poptitdiscsec {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}

.popimgtitle {
	font-size: 28px;
	color: #FFFFFF;
	font-weight: 500;
}

.popimgdesc {
	font-size: 20px;
	color: #AE943F;
	font-weight: 400;
	text-align: center;
}

.popimgdatesec {
	font-size: 12px;
	color: #FFFFFF;
	font-weight: 300;
}

.exploresec {
	font-size: 20px;
	color: #FFFFFF;
	font-weight: 600;

	display: flex;
	gap: 3px;
	align-items: center;
	transition: 0.3s ease;
}

.exploresec:hover {
	gap: 12px;
}



@media (max-height: 850px) {
	.popimgsection {
		width: 300px;
		height: 350px;
	}
}