/* ============================================================
   SEMI-FINISHED PAGE — scoped to .semi_finished_page
   ============================================================ */

/* Only the active slider instance is visible */
.semi_finished_page .semi-slider-instance {
	display: none;
}
.semi_finished_page .semi-slider-instance.active {
	display: block;
}

/* Tab list reset & active state */
.semi_finished_page .main_tab ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.semi_finished_page .main_tab li {
	cursor: pointer;
	transition: color 0.25s, padding-left 0.25s;
}
.semi_finished_page .main_tab li.active {
	color: #FFF;
	font-weight: 700;
}

/* Tab content panes: only active shown */
.semi_finished_page .tab-content {
	display: none;
}
.semi_finished_page .tab-content.active {
	display: block;
}


/* ============================================================
   RECYCLABLES PAGE — scoped to .recyclables_section
   ============================================================ */

.recyclables_section .colw-33 {
	padding: 0;
}

.recyclables_section .products_box {

	overflow: hidden;
	cursor: pointer;
}

.recyclables_section .tti-fixed-height {

	width: 100%;
}

.recyclables_section .tti-fixed-height figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.recyclables_section .tti-fixed-height img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.recyclables_section .products_box:hover .tti-fixed-height img {
	transform: scale(1.05);
}


@media all and (max-width: 868px) {
	.recyclables_section .colw-33 {
		width: 50%;
	}

}

@media all and (max-width: 576px) {
	.recyclables_section .colw-33 {
		width: 100%;
	}

}


/* ============================================================
   ABOUT US PAGE — scoped to .about_page
   ============================================================ */

/* Recycling icon green */
.about_page .about_green_icon {
	color: #4CAF50;
}

/* Intro two-column row */
.about_page .about_intro_row {
	align-items: flex-start;
}

/* Highlight box */
.about_page .about_highlight_box {
	background: #F0F0F0;
	padding: 1.5rem 1.875rem;
}

/* ---- Hero image ---- */
.about_page .about_hero {
	height: 420px;
}
.about_page .about_hero_figure {
	width: 100%;
	height: 100%;
	margin: 0;
}
.about_page .about_hero_img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ---- Mission cards ---- */
.about_page .about_mission_card {
	padding: 2.5rem;
	gap: 1.5rem;
	align-items: stretch;
}
.about_page .about_mission_blue  { background: #D6EAF8; }
.about_page .about_mission_yellow { background: #EEF3DC; }
.about_page .about_mission_pink { background: #FAD7E0; }

.about_page .about_mission_text {
	flex: 1;
}
.about_page .about_mission_img {
    width: 215px;
    flex: 0 0 215px;
}
.about_page .about_mission_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Watermark + Admin ---- */
.about_page .about_watermark_wrap {
	display: flex;
	align-items: center;
	overflow: hidden;
}
.about_page .about_watermark {
	font-size: 10.5rem;
	color: #E6E6E6;
	line-height: 1;
	letter-spacing: -3px;
	user-select: none;
	position:absolute;
	bottom:0;
	left:0;
	z-index:5;
}
.text_style_1 {
    color: #FFF;
    text-shadow: 4px 0 0 #E6E6E6, -4px 0 0 #E6E6E6, 0 4px 0 #E6E6E6, 0 -4px 0 #E6E6E6, 4px 4px 0 #E6E6E6, -4px -4px 0 #E6E6E6, 4px -4px 0 #E6E6E6, -4px 4px 0 #E6E6E6;
}

.about_page .about_admin_right {
	min-height: 400px;
}
.about_page .about_admin_img {
	flex: 1;
	min-height: 180px;
}
.about_page .about_admin_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.about_page .about_admin_box {
	background: #FAD7E0;
	padding: 1.875rem;
}

/* ---- We recycle banner ---- */
.about_page .about_recycle {
	height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.about_page .about_recycle_figure {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	margin: 0;
	z-index: 1;
}
.about_page .about_recycle_figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.about_page .about_recycle_overlay {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.45);
	z-index: 2;
}
.about_page .about_recycle_content {
	z-index: 10;
}

/* ---- Responsive ---- */
@media all and (max-width: 868px) {
	.about_page .about_intro_row { flex-direction: column; }
	.about_page .about_intro_col { width: 100%; }

	.about_page .about_mission_row { flex-direction: column; }
	.about_page .about_mission_card { width: 100%; }

	.about_page .about_admin_row { flex-direction: column; }
	.about_page .about_admin_row .colw-60,
	.about_page .about_admin_row .colw-40 { width: 100%; }

	.about_page .about_watermark { font-size: 5rem; }
	.about_page .about_hero { height: 300px; }
}

@media all and (max-width: 576px) {
	.about_page .about_watermark { font-size: 3.25rem; }
	.about_page .about_hero { height: 220px; }
	.about_page .about_recycle { height: 260px; }
}


/* ============================================================
   WORLD MAP SECTION — scoped to .world_map_section
   ============================================================ */

.world_map_section .world_map_content {
	align-items: center;
	flex-wrap: nowrap;
}
.world_map_section .world_legend {
	flex-shrink: 0;
}
.world_map_section .world_map_wrap svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Each coloured country path fades out and back in, staggered */
.world_map_section .world_map_wrap path[fill="#FFCE2E"] { animation: mapFade 3s ease-in-out 0.0s infinite; }
.world_map_section .world_map_wrap path[fill="#FB2226"] { animation: mapFade 3s ease-in-out 0.6s infinite; }
.world_map_section .world_map_wrap path[fill="#7922FB"] { animation: mapFade 3s ease-in-out 1.2s infinite; }
.world_map_section .world_map_wrap path[fill="#FF9293"] { animation: mapFade 3s ease-in-out 1.8s infinite; }
.world_map_section .world_map_wrap path[fill="#58EAF7"] { animation: mapFade 3s ease-in-out 2.4s infinite; }

@keyframes mapFade {
	0%,  40% { opacity: 1;   }
	60%,  80% { opacity: 0.5;   }
	100%      { opacity: 1;   }
}

/* Make the fixed-width legend SVG scale down */
.world_map_section .world_legend svg {
	max-width: 100%;
	height: auto;
	display: block;
}

@media all and (max-width: 868px) {
	.world_map_section .world_map_content  { flex-wrap: wrap; justify-content: center; }
	.world_map_section .world_legend       { width: 100%; margin-bottom: 1.5rem; display: flex; justify-content: center; }
	.world_map_section .world_map_wrap     { width: 100%; }

	/* Shrink headings a bit on tablet */
	.world_map_section .font-50 { font-size: 2rem !important; }
	.world_map_section .font-20 { font-size: 1rem !important; }
}

@media all and (max-width: 576px) {
	.world_map_section .world_legend svg   { max-width: 280px; }

	/* Even smaller text on phones */
	.world_map_section .font-50 { font-size: 1.5rem !important; }
	.world_map_section .font-20 { font-size: 0.9rem !important; }
}