/*
Theme Name: Simple Parallax Website
Description: Simple Parallax Scrolling Effect
Author: Samuel Dalusung
*/

/*= GENERAL STYLING
--------------------------------------------------------*/

/*css all page*/
@font-face {
	font-family: 'heavy';
	src: url('../fonts/heavy/FUTURAH.eot');
	src: local(''), url('../fonts/heavy/FUTURAH.woff') format('woff'), url('../fonts/heavy/FUTURAH.ttf') format('truetype'), url('../fonts/heavy/FUTURAH.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'contenttype';
	src: url('../fonts/isi/FUTURAH.eot');
	src: local(''), url('../fonts/isi/FUTURAH.woff') format('woff'), url('../fonts/isi/FUTURAH.ttf') format('truetype'), url('../fonts/isi/FUTURAH.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../font/Montserrat.eot');
	src: local(''), url('../font/Montserrat.woff') format('woff'), url('../font/Montserrat.ttf') format('truetype'), url('../font/Montserrat.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat-Light';
	src: url('../font/Montserrat-Light.eot');
	src: local(''), url('../font/Montserrat-Light.woff') format('woff'), url('../font/Montserrat-Light.ttf') format('truetype'), url('../font/Montserrat-Light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat-Medium';
	src: url('../font/Montserrat-Medium.eot');
	src: local(''), url('../font/Montserrat-Medium.woff') format('woff'), url('../font/Montserrat-Medium.ttf') format('truetype'), url('../font/Montserrat-Medium.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat-Regular';
	src: url('../font/Montserrat-Regular.eot');
	src: local(''), url('../font/Montserrat-Regular.woff') format('woff'), url('../font/Montserrat-Regular.ttf') format('truetype'), url('../font/Montserrat-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat-ExtraLight';
	src: url('../font/Montserrat-ExtraLight.eot');
	src: local(''), url('../font/Montserrat-ExtraLight.woff') format('woff'), url('../font/Montserrat-ExtraLight.ttf') format('truetype'), url('../font/Montserrat-ExtraLight.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat-Black';
	src: url('../font/Montserrat-Black.eot');
	src: local(''), url('../font/Montserrat-Black.woff') format('woff'), url('../font/Montserrat-Black.ttf') format('truetype'), url('../font/Montserrat-Black.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat-Bold';
	src: url('../font/Montserrat-Bold.eot');
	src: local(''), url('../font/Montserrat-Bold.woff') format('woff'), url('../font/Montserrat-Bold.ttf') format('truetype'), url('../font/Montserrat-Bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat-ExtraBold';
	src: url('../font/Montserrat-ExtraBold.eot');
	src: local(''), url('../font/Montserrat-ExtraBold.woff') format('woff'), url('../font/Montserrat-ExtraBold.ttf') format('truetype'), url('../font/Montserrat-ExtraBold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
.text-shadow {
	text-shadow: 2px 2px 5px #000000; 
}
/* Wrapper utama agar konten tidak melebar di layar besar */
.page-wrapper {
  margin: 0 auto;
  /* padding: 0 16px; */
  /* border: 1px solid pink; */
  max-width: 1366px; /* atau sesuai preferensimu */
  position: relative;
  background: #D5AD90;
}
@media (min-width: 480px) {
  
	.title-section-ps { font-family: Montserrat-Bold; font-size: 30px; color: #622E10; text-align: center !important;  }
}
/* Gambar agar responsif */
.page-wrapper img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Untuk section yang punya gambar + teks, gunakan grid */
.special-section {
  margin-bottom: 60px;
}

/* ====== HEADER CONTAINER ====== */
.header-container {
  display: flex;
  align-items: center; /* sejajarkan vertikal */
  justify-content: space-between; /* logo kiri, search kanan */
  /* padding: 10px 20px; */
  position: relative;
}

/* ====== LOGO ====== */
.header-logo img {
  height: 55px; /* ukuran logo */
  width: auto;
}

/* ====== SEARCHBAR ====== */
.header-search {
  display: flex;
  align-items: center;
  position: relative;
}

.header-search input[type="text"] {
	padding: 2px 35px 2px 12px;
    border-radius: 20px;
    border: 2px solid #622E10;
    outline: none;
    width: 200px;
    transition: 0.3s ease;
    background: transparent;
    font-family: Montserrat;  
}

.header-search input[type="text"]::placeholder {
  color: #a16b45;
}

.header-search input[type="text"]:focus {
  width: 300px;
}

/* ====== ICON SEARCH ====== */
.header-search button {
  position: absolute;
  right: 10px;
  border: none;
  background: none;
  color: #6b2b00;
  font-size: 18px;
  cursor: pointer;
  outline: none;
}
.fontsize45 {font-family: Montserrat-Bold; font-size: 45px; color: #FFFFFF; text-shadow: 2px 2px 5px #555555; text-transform: uppercase }
.solution-section-ps { font-family: Montserrat-Bold; font-size: 75px; color: #622E10; margin-top: 120px; margin-bottom: 50px }
.challenge-box {
	flex: 1;
	background: #6b2e00;
	border-radius: 25px;
	color: #D5AD90;
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 100px 35px 35px 35px;
	font-family: Montserrat-Light; font-size: 24px;
	box-shadow: 0px 5px 10px 0px #000000;
}
.team-img {
  display: block;
  margin: 0 auto 15px;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ----------------------------------------------------
   🖥️ 4. Large Devices (desktop)
   Bootstrap 3 default: ≥1200px
---------------------------------------------------- */
@media (min-width: 1200px) {
  /* CSS untuk desktop normal */
  /* body { border: 10px solid pink; } */

	.banner-desktop {
		position: absolute; top: 433px; right: 0;
	}
	.banner-mobile {
		display: none !important;
	}
    .foot1 { padding-left: 150px; padding-top: 180px; position: relative; }
    .foot1a { position: absolute; right: 20px; top: 135px; }
    .foot1b { position: absolute; right: 20px; margin-top: 20px; }
    .ffsize { font-family: Montserrat-Regular; font-size: 17px; color: white }
    .footrite { position: absolute; right: 20px; font-family: Montserrat-Regular; font-size: 18px; color: white }

  /* complaint card */
  .complaint-box{
    background: #622E10;
    color: #F3D9C7;
    padding:18px;
    border-radius:28px;
    max-width:640px;
    box-shadow: 0 18px 30px rgba(0,0,0,0.18);
  }
  .complaint-box ul{
    margin:12px 0 0 20px;
    padding:0;
    line-height:1.6;
    font-size:18px;
    font-weight:600;
    font-family: Montserrat-Bold;
  }	
	.swiper-slide .title { font-family: Montserrat-Bold; font-size : 22px; margin-top: 50px; position: fixed; bottom: 0 }
  	.title-story { font-family: Montserrat-Bold; font-size: 45px; color: #D5AD90; text-align: left !important; }
	.title-story-content { font-family: Montserrat-Bold; font-size: 25px; color: #FFFFFF; text-align: left !important }
	.title-story-effort { font-family: Montserrat-Bold; font-size: 25px; color: #622E10; text-align: center !important }
	.youtube-box-1 { width: 100%; border-radius: 15px; min-height: 350px; margin-bottom: 20px; }
	.btn-home {
		width: auto; float: left; margin-right: 20px; font-family: Montserrat-Medium; font-size: 18px; text-decoration: underline; color: #622E10; padding-top: 3px;
	}
	.banner-box-2page { width: 100%; float: left; padding: 200px 150px 200px 150px; }
	.banner-box-2page .title { text-transform:uppercase; color: #622E10; width: 100%; float: left;font-family: Montserrat-Bold; font-size: 55px; }
	.banner-box-2page .content { margin-bottom: 20px; color: #622E10; width: 100%; float: left; font-family: Montserrat-Bold; font-size: 24px; }
	.boxbanner { border-top: 5px solid #622E10; width: 100%; float: left; padding: 100px 50px 100px 50px; background: #D5AD90 }
	.boxbanner .bgimg { min-height: 500px;
	border-right: none;
	border-left: none;
	position: relative;
	padding: 0;
	background-size: 100%;
	background-position: right;
	background-repeat: no-repeat;
	}
	.small-content { width: 100%; float: left; color:#7a4a33; margin: 12px 0 24px; font-size:18px; font-style: italic}
	.boxstory { width: 100%; float: left; padding: 200px 150px 200px 150px; }
	.padding50 { padding: 50px }
	.boxtechno { width: 100%; float: left; padding: 100px; border-bottom: 5px solid #622E10; } 
	.boxchallenge { width: 100%; float: left; padding: 100px 50px 100px 50px }
	.boxeffort { width: 100%; border-top: 5px solid #622E10; background: #D5AD90; float: left; padding: 50px; text-align: center !important }
	.btn-home:hover {
		color: #622E10;
	}
	.header-unit-ps-2 {
	min-height: 750px;
	border-right: none;
	border-left: none;
	position: relative;
	padding: 0;
	background-size: cover;
	background-position: right;
	background-repeat: no-repeat;
	}
	.center-text {
	display: block;
	align-items: center;
	width: 100%;
	color: white;
	text-align: left;
	}

	.challenge-row {
	display: flex;
	align-items: stretch;
	gap: 20px;
	}

	.challenge-row > [class*="col-"] {
	display: flex;
	}


    body, html {
        /* height: 100%; */
        margin: 0;
        padding: 0;
    }
	/* body{ overflow-x:hidden; background:#fff } */
	/* ====== LOGO ====== */
	.header-logo img {
	height: 55px; /* ukuran logo */
	width: auto;
	position: relative;
	top: 70px;
	left: 70px;
	z-index: 1;
	}

	/* ====== SEARCHBAR ====== */
	.header-search {
	display: flex;
	align-items: center;
	position: relative;
	top: 60px;
	right: 60px;
	z-index: 1;
	}
	.header-unit-ps {
		min-height: 1000px;
		border-right:none;
		border-left: none;
		position: relative;
		top: -15px
	}
	.footer {
	text-align: left; /* bisa center kalau mau ditengah */
	}

	.footer a {
	display: inline-block; /* biar ikon sejajar horizontal */
	margin-right: 10px; /* jarak antar ikon */
	}

	.footer img {
	width: 32px; /* atur ukuran sesuai kebutuhan */
	height: auto;
	vertical-align: middle; /* biar sejajar rapi */
	transition: all 0.3s ease;
	}

	.footer img:hover {
	transform: scale(1.1);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	}

	.box-footer-ps { background:#551C00; float:left; width:100%; padding: 100px 100px 35px 100px; }
	.text-footer-ps { color: white; font-size: 35px; font-family: Montserrat-Bold; }
	.content-footer-ps { color: white; font-size: 17px; text-align: justify; font-family: Montserrat-Regular; padding-right: 100px }
	.box-testimoni-ps { width: 100% !important; margin: 0 auto; margin-top: 150px; text-align: center }
	.testimoni-title { font-family: Montserrat-Bold; font-size: 75px; color: #622E10; line-height: 80px; }
	.testimoni-content { font-family: Montserrat-Regular; font-size: 35px; color: #622E10; padding: 30px 0 70px 15px }
	.boxsection-ps-home { width: 1050px; margin: 0 auto; }
	.boxsection-ps { width: 100%; margin: 0 auto; }
	.title-section-ps { font-family: Montserrat-Bold; font-size: 55px; color: #622E10; padding: 0 0 0 50px; margin-bottom: 50px; margin-top: 100px }
	.unknown-box-1 { height: 300px; position: relative }
	.unknown-box-1a { height: 300px; position: relative }
		.boxsection-ps-text { color: #D5AD90; font-family: Montserrat-Bold; font-size: 22px; font-style: italic; line-height: 25px }
		.boxsection-ps-texta { color: #D5AD90; font-family: Montserrat-Bold; font-size: 22px; font-style: italic; line-height: 25px; bottom: 0; right: 0 }
		.unknown-img-1 { width: auto; position: absolute; bottom: 0; right: -50px; }
		.unknown-img-2 { width: auto; position: absolute; bottom: 0; left: -10px }
		.unknown-text-1b { width: auto; position: absolute; bottom: 30px; right: 0; border-left: 3px solid white; padding: 5px 20px; }
		.unknown-text-1a { width: auto; position: absolute; left: 0; top: 0; border-left: 3px solid white; padding: 5px 20px; }
	.boxsolusi { background: white; border-top: 5px solid #622E10; border-bottom: 5px solid #622E10; padding: 50px 50px 150px 50px; }	
	.solution-box-home { background: #622E10; width: 100%; float: left; border-radius: 30px; padding: 30px; min-height: 370px; max-height: 370px; overflow: hidden; color: white; box-shadow: 0px 5px 10px 0px #222222; position: reltive }
	.unknown-box-3 { width: 100%; float: left; border-left: 3px solid white; padding: 5px 20px 5px 20px; margin-top: 20px }
	.solution-box-content { width: 100%; float: left; min-height: 80px; max-height: 80px; overflow: hidden; font-family: Montserrat-Regular; font-size: 16px; margin-top: 20px }
	.span-rel { position: absolute; right: 30px }
	.team-col {
		flex: 0 0 45%;
		max-width: 45%;
	}
	.box-sp-content { background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; float: left; border-radius: 30px; max-height: 350px; min-height: 350px; box-shadow: 0px 5px 10px 0px #000000 }
	
	.special-care-box { width: 1200px; margin: 0 auto; text-align: center; margin-top: 100px; margin-bottom: 150px; }

	.team-row { 
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	text-align: center;
	}
	.team-col {
	flex: 0 0 22%;
	max-width: 22%;
	margin-bottom: 30px;
	}
	.team-col2 {
	flex: 0 0 calc(33.33% - 20px);
	max-width: calc(33.33% - 20px);
	margin-bottom: 20px;
	}
}

	@media (max-width: 992px) {
	.team-col2 {
		flex: 0 0 calc(50% - 20px);
		max-width: calc(50% - 20px);
	}
	}

	@media (max-width: 576px) {
	.team-col2 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	}

/* ----------------------------------------------------
   📱 1. Extra Small Devices (smartphone potrait)
   Bootstrap 3 default: <768px
---------------------------------------------------- */
@media (max-width: 767px) {
  /* body { border: 10px solid red; } */


    /* .foot1 { padding-left: 150px; padding-top: 180px; position: relative; }
    .foot1a { position: absolute; right: 20px; top: 135px; }
    .foot1b { position: absolute; right: 20px; margin-top: 20px; }
    .ffsize { font-family: Montserrat-Regular; font-size: 17px; color: white }
    .footrite { position: absolute; right: 20px; font-family: Montserrat-Regular; font-size: 18px; color: white } */
    .foot1 { padding-top: 0px; position: relative; min-height: 100px; }
    .foot1a { position: absolute; left: 14px; top: 0px; }
    .foot1b { position: absolute; left: 14px; bottom: 0px; }
    .ffsize { font-family: Montserrat-Regular; font-size: 14px; color: white }
    .footrite { position: absolute; left: 12px; top: 20px; font-family: Montserrat-Regular; font-size: 14px; color: white }


	.fontsize45 {font-family: Montserrat-Bold; font-size: 35px; color: #FFFFFF; text-shadow: 2px 2px 5px #555555; text-transform: uppercase }
	.small-content { width: 100%; float: left; color:#7a4a33; margin:6px 0 24px; font-size:18px; text-align: left; font-style: italic}
	.special-care-box { width: 100%; margin: 0 auto; text-align: center; margin-top: 100px; margin-bottom: 150px; }
  	/* .swiper-slide .title { font-family: Montserrat-Bold; font-size : 22px; margin-top: 50px; position: fixed; bottom: 0 } */
  	.title-story { font-family: Montserrat-Bold; font-size: 28px; color: #D5AD90; text-align: left !important; }
	.title-story-content { font-family: Montserrat-Regular; font-size: 18px; color: #FFFFFF; text-align: left !important; }
	.title-story-effort { font-family: Montserrat-Bold; font-size: 25px; color: #622E10; text-align: center !important }

    .complaint-box{ background: #622E10; padding:20px; border-radius:18px; width: 100%; float: left; text-align: left; margin-bottom: 0 !important;box-shadow: 5px 15px 20px rgba(0, 0, 0, 0.5) !important; }
    .complaint-box ul{ font-size:16px }
	.youtube-box-1 { width: 100%; border-radius: 15px; min-height: 250px; margin-bottom: 20px; }
	.btn-home {
		width: auto; float: left; margin-right: 20px; font-family: Montserrat-Medium; font-size: 18px; text-decoration: underline; color: #622E10; padding-top: 3px;
	}
	.banner-box-2page { width: 100%; float: left; padding: 20px; text-align: left !important }
	.banner-box-2page .title { text-transform:uppercase; color: #622E10; width: 100%; float: left; font-family: Montserrat-Bold; font-size: 35px; text-align: left  }
	.banner-box-2page .content { text-align: left; color: #622E10; width: 100%; float: left; font-family: Montserrat-Bold; font-size: 18px; margin-bottom: 10px; }
	.boxbanner { border-top: 5px solid #622E10; width: 100%; float: left; padding: 5px; background: #D5AD90 }
	.boxbanner .bgimg { min-height: 150px;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;	
	}
	.boxstory { width: 100%; float: left; }
	.padding50 { padding: 30px }
	.boxtechno { width: 100%; float: left; padding: 5px; border-bottom: 5px solid #622E10; } 
	.boxchallenge { width: 100%; float: left; padding-top: 100px }
	.boxeffort { width: 100%; padding-top: 70px; border-top: 5px solid #622E10; background: #D5AD90; float: left; }

	.btn-home:hover {
		color: #622E10;
	}
	.banner-desktop {
		display: none !important;
	}
	.banner-mobile {
		display: block !important; width: 100%; float: left; right: -20px; bottom: -20px; position: relative;
	}

	.header-unit-ps-2 {
	min-height: 215px;
	border-right: none;
	border-left: none;
	position: relative;
	padding: 0;
	background-size: cover;
	background-position: right;
	background-repeat: no-repeat;
	}
	.center-text {
	display: block;
	align-items: center;
	width: 100%;
	color: white;
	text-align: left;
	}
	
	.challenge-row {
		display: block;
	}

	.challenge-row > [class*="col-"] {
		display: block;
		margin-bottom: 20px;
	}

	.challenge-box {
		height: auto;
	}
	
	.btn-home {
		display: none;
	}
	.team-row { 
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	text-align: center;
	}
	.team-col2 {
		flex: 0 0 calc(100% - 10px);
		max-width: calc(100% - 10px);
		margin-bottom: 20px;
	}
	.team-col {
		flex: 0 0 100%;
		max-width: 100%;
	}
	
  /* CSS khusus HP */
  .header-container {
    flex-direction: column; /* logo di atas, search di bawah */
    align-items: center;
    padding: 15px 10px;
  }

  .header-logo img {
    height: 45px;
    margin-bottom: 10px;
  }

  .header-search input[type="text"] {
    width: 200px;
    font-size: 14px;
  }

  .header-search input[type="text"]:focus {
    width: 220px;
  }

  .header-search button {
    font-size: 16px;
    right: 8px;
  }
  .footer {
    text-align: left;
  }

  .footer a {
    margin-right: 8px; display: inline-block; /* biar ikon sejajar horizontal */
    margin-top: 18px;
  }

  .footer img {
    width: 28px;
  }

	.footer img:hover {
	transform: scale(1.1);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	}
	.box-footer-ps { background:#551C00; float:left; width:100%; padding: 70px 30px;}
	.text-footer-ps { color: white; font-size: 20px; font-family: Montserrat-Bold; }
	.content-footer-ps { color: white; font-size: 14px; text-align: justify; font-family: Montserrat-Regular; }
	.box-testimoni-ps { width: 100% !important; margin: 0 auto; margin-top: 150px; text-align: center }
	.testimoni-title { font-family: Montserrat-Bold; font-size: 45px; color: #622E10; line-height: 50px; }
	.testimoni-content { font-family: Montserrat-Regular; font-size: 18px; color: #622E10; padding: 30px 15px 70px 15px }

	.box-sp-content { background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; float: left; border-radius: 30px; max-height: 300px; min-height: 350px; box-shadow: 0px 5px 10px 0px #000000 }
	.boxsection-ps-home { width: 100%; margin: 0 auto; padding: 30px; }
	.boxsection-ps { width: 100%; margin: 0 auto; padding: 50px 20px 50px 20px; }
	.title-section-ps { font-family: Montserrat-Bold; font-size: 45px; color: #622E10; text-align: center !important;  }
	.unknown-box-1 { min-height: 250px; position: relative; }
	.unknown-box-1a { min-height: 350px; position: relative }
		.boxsection-ps-text { color: #D5AD90; font-family: Montserrat-Bold; font-size: 18px; font-style: italic; line-height: 20px }
		.boxsection-ps-texta { color: #D5AD90; font-family: Montserrat-Bold; font-size: 18px; font-style: italic; line-height: 20px; bottom: 0; right: 0 }
		.unknown-img-1 { width: 100%; float: left; justify-content: center; align-items: center; display: flex; } 
			/* width: 100%; position: absolute; bottom: 0; left: 0px } */
		.unknown-img-2 { width: 100%; float: left; justify-content: center; align-items: center; display: flex; } 
			/* width: 100%; position: absolute; top: 0; left: 0px } */
		.unknown-img-1 img {
			max-width: 90%;         /* supaya tidak terlalu besar di layar kecil */
			height: auto;
		}
		.unknown-img-2 img {
			max-width: 90%;         /* supaya tidak terlalu besar di layar kecil */
			height: auto;
		}
		.unknown-text-1a { width: 100%; float: left; border-left: 3px solid white; padding: 10px; }
		.unknown-text-1b { width: 100%; float: left; border-left: 3px solid white; padding: 10px; margin-bottom: 30px; margin-top: 10px }
		.solution-section-ps { font-family: Montserrat-Bold; font-size: 45px; color: #622E10; margin-top: 100px; margin-bottom: 50px; text-align: center !important }
		.boxsolusi { background: white; border-top: 5px solid #622E10; border-bottom: 5px solid #622E10; padding: 20px 20px 150px 20px; }
		.solution-box-home { background: #622E10; width: 100%; float: left; border-radius: 30px; padding: 30px; min-height: auto !important; max-height: 100%; overflow: hidden; color: white; box-shadow: 0px 5px 10px 0px #222222; position: reltive }
		.unknown-box-3 { width: 100%; float: left; border-left: 3px solid white; padding: 5px 20px 5px 20px; margin-top: 20px }
		.solution-box-content { width: 100%; float: left; min-height: 80px; max-height: 100%; overflow: hidden; font-family: Montserrat-Regular; font-size: 16px; margin-top: 20px; margin-bottom: 10px }
		.span-rel { position: absolute; right: 30px }

		.card {
			height: 100% !important;
			width: 90%; /* fokus lebih besar */
			margin: 0 auto;
			background: #652c00;
			color: #fff;
			padding: 40px 20px;
			border-radius: 20px;
			text-align: center;
			box-shadow: 0 6px 20px rgba(0,0,0,0.25);
			font-size: 16px;
			flex-shrink: 0;
		}
		.swiper-slide {
			width: 100% !important;
		}
		.swiper-slide .title { font-family: Montserrat-Bold; font-size : 22px; margin-top: 50px; }
}

/* ----------------------------------------------------
   📱 2. Small Devices (tablet potrait, iPad Mini, dsb)
   Bootstrap 3 default: ≥768px dan <992px
---------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  /* CSS khusus tablet potrait / iPad vertikal */  
  /* body { border: 10px solid green; } */
  
  .equal-row {
    display: block !important;
  }

  .equal-row > [class*='col-'] {
    display: block;
    text-align: center;
    margin-top: 20px;
  }
	.fontsize45 {font-family: Montserrat-Bold; font-size: 35px; color: #FFFFFF; text-shadow: 2px 2px 5px #555555; text-transform: uppercase }
	.small-content { width: 100%; float: left; color:#7a4a33; margin:6px 0 24px; font-size:18px; text-align: left; font-style: italic}
	.special-care-box { width: 100%; margin: 0 auto; text-align: center; margin-top: 100px; margin-bottom: 150px; }
  	/* .swiper-slide .title { font-family: Montserrat-Bold; font-size : 22px; margin-top: 50px; position: fixed; bottom: 0 } */
  	.title-story { font-family: Montserrat-Bold; font-size: 24px; color: #D5AD90; text-align: left !important; }
	.title-story-content { font-family: Montserrat-Bold; font-size: 18px; color: #FFFFFF; text-align: left !important; }
	.title-story-effort { font-family: Montserrat-Bold; font-size: 25px; color: #622E10; text-align: center !important }

    .complaint-box{ padding:20px; border-radius:18px; width: 100%; float: left; text-align: left; margin-bottom: 50px;box-shadow: 5px 15px 20px rgba(0, 0, 0, 0.5) !important; }
    .complaint-box ul{ font-size:16px }
	.youtube-box-1 { width: 100%; border-radius: 15px; min-height: 350px; margin-bottom: 20px; }
	.btn-home {
		width: auto; float: left; margin-right: 20px; font-family: Montserrat-Medium; font-size: 18px; text-decoration: underline; color: #622E10; padding-top: 3px;
	}
	.banner-box-2page { width: 100%; float: left; padding: 20px; text-align: left !important }
	.banner-box-2page .title { text-transform:uppercase; color: #622E10; width: 100%; float: left; font-family: Montserrat-Bold; font-size: 35px; text-align: left  }
	.banner-box-2page .content { text-align: left; color: #622E10; width: 100%; float: left; font-family: Montserrat-Bold; font-size: 18px; margin-bottom: 10px; }
	.boxbanner { border-top: 5px solid #622E10; width: 100%; float: left; padding: 30px 15px 30px 15px; background: #D5AD90 }
	.boxbanner .bgimg { min-height: 300px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;	
	}
	.boxstory { width: 100%; float: left; }
	.padding50 { padding: 20px }
	.boxtechno { width: 100%; float: left; padding: 5px; border-bottom: 5px solid #622E10; } 
	.boxchallenge { width: 100%; float: left; padding-top: 100px }
	.boxeffort { width: 100%; padding-top: 70px; border-top: 5px solid #622E10; background: #D5AD90; float: left; }

	.btn-home:hover {
		color: #622E10;
	}
	.banner-desktop {
		display: none !important;
	}
	
	.banner-mobile {
		display: block !important; width: 100%; float: left; right: -20px; bottom: -20px; position: relative;
	}
	.header-unit-ps-2 {
	min-height: 500px;
	border-right: none;
	border-left: none;
	position: relative;
	padding: 0;
	background-size: cover;
	background-position: right;
	background-repeat: no-repeat;
	}
	.center-text {
	display: block;
	align-items: center;
	width: 100%;
	color: white;
	text-align: left;
	}
	
	.challenge-row {
		display: block;
	}

	.challenge-row > [class*="col-"] {
		display: block;
		margin-bottom: 20px;
	}

	.challenge-box {
		height: auto;
	}
	
	.btn-home {
		display: none;
	}
	.team-row { 
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	text-align: center;
	}
	.team-col2 {
		flex: 0 0 calc(100% - 10px);
		max-width: calc(100% - 10px);
		margin-bottom: 20px;
	}
	.team-col {
		flex: 0 0 45%;
		max-width: 45%;
	}
	
  /* CSS khusus HP */
  .header-container {
    flex-direction: column; /* logo di atas, search di bawah */
    align-items: center;
    padding: 15px 10px;
  }

  .header-logo img {
    height: 45px;
    margin-bottom: 10px;
  }

  .header-search input[type="text"] {
    width: 200px;
    font-size: 14px;
  }

  .header-search input[type="text"]:focus {
    width: 220px;
  }

  .header-search button {
    font-size: 16px;
    right: 8px;
  }
  .footer {
    text-align: left;
  }

  .footer a {
    margin-right: 8px; display: inline-block; /* biar ikon sejajar horizontal */
    margin-top: 18px;
  }

  .footer img {
    width: 28px;
  }

	.footer img:hover {
	transform: scale(1.1);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	}
	.box-footer-ps { background:#551C00; float:left; width:100%; padding: 70px 30px;}
	.text-footer-ps { color: white; font-size: 30px; font-family: Montserrat-Bold; }
	.content-footer-ps { color: white; font-size: 25px; text-align: justify; font-family: Montserrat-Regular; }
	.foot1 { width: 100%; float: left; margin-top: 30px }
    .foot1a { width: 100%; float: left;}
    .foot1b { width: 100%; float: left; }
    .ffsize { font-family: Montserrat-Regular; font-size: 25px; color: white }
    .footrite { position: absolute; left: 12px; top: 20px; font-family: Montserrat-Regular; font-size: 25px; color: white }

	.box-testimoni-ps { width: 100% !important; margin: 0 auto; margin-top: 150px; text-align: center }
	.testimoni-title { font-family: Montserrat-Bold; font-size: 60px; color: #622E10; line-height: 65px; }
	.testimoni-content { font-family: Montserrat-Regular; font-size: 35px; color: #622E10; padding: 10px;}

.testimonial-item q {
	font-size: 35px !important;
}

.testimonial-item .source {
	font-size: 35px !important;
}

.testimonial-controls button {
    width: 32px !important;
    height: 32px !important;
    font-size: 24px !important;
}
.testimonial_ipad-item q {
	font-size: 35px !important;
}

.testimonial_ipad-item .source_ipad {
	font-size: 35px !important; padding-bottom: 30px !important
}
.testimonial_ipad-controls button {
    width: 62px !important;
    height: 62px !important;
    font-size: 24px !important;
}

	.box-sp-content { background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; float: left; border-radius: 30px; max-height: 700px; min-height: 700px; box-shadow: 0px 5px 10px 0px #000000 }
	
.btn-arrowshadow {
  padding: 20px !important;
  border-radius: 30px !important;
  width: 300px !important;
  font-size: 40px !important;
}
	.boxsection-ps-home { width: 100%; margin: 0 auto; padding: 30px; }
	.boxsection-ps { width: 100%; margin: 0 auto; padding: 30px; }
	.title-section-ps { font-family: Montserrat-Bold; font-size: 24px; color: #622E10; text-align: center !important;  }
	.unknown-box-1 { min-height: 250px; position: relative; }
	.unknown-box-1a { min-height: 250px; position: relative; }
		.boxsection-ps-text { color: #D5AD90; font-family: Montserrat-Bold; font-size: 30px; font-style: italic; line-height: 35px }
		.boxsection-ps-texta { color: #D5AD90; font-family: Montserrat-Bold; font-size: 30px; font-style: italic; line-height: 35px }
		.unknown-img-1 { width: 100%; float: left; justify-content: right; align-items: right; display: flex; position: absolute; top: -20px } 
			/* width: 100%; position: absolute; bottom: 0; left: 0px } */
		.unknown-img-2 { width: 100%; float: left; justify-content: left; align-items: left; display: flex; position: absolute; bottom: 30px; left: 10px } 
			/* width: 100%; position: absolute; top: 0; left: 0px } */
		.unknown-img-1 img {
			max-width: 90%;         /* supaya tidak terlalu besar di layar kecil */
			height: auto;
		}
		.unknown-img-2 img {
			max-width: 90%;         /* supaya tidak terlalu besar di layar kecil */
			height: auto;
		}
		.unknown-text-1a { width: 100%; float: left; border-left: 5px solid white; padding: 10px; }
		.unknown-text-1b { border-left: 5px solid white; padding: 10px; position: absolute; right: 0; bottom: 30px }
		.solution-section-ps { font-family: Montserrat-Bold; font-size: 65px; color: #622E10; margin-top: 100px; margin-bottom: 50px; text-align: center !important }
		.boxsolusi { background: white; border-top: 5px solid #622E10; border-bottom: 5px solid #622E10; padding: 20px 20px 150px 20px; }
		.solution-box-home { background: #622E10; width: 100%; float: left; border-radius: 30px; padding: 30px; min-height: auto !important; max-height: 100%; overflow: hidden; color: white; box-shadow: 0px 5px 10px 0px #222222; position: reltive;}
		.unknown-box-3 { width: 100%; float: left; border-left: 3px solid white; padding: 5px 20px 5px 20px; margin-top: 20px }
		.solution-box-content { width: 100%; float: left; min-height: 80px; max-height: 100%; overflow: hidden; font-family: Montserrat-Regular; font-size: 24px; margin-top: 20px; margin-bottom: 10px }
		.solution-text-box {
		font-size: 35px !important;
		min-height: 120px !important;
		max-height: 120px !important;
		}
		.btn-arrow {
	    font-size: 35px !important;
		}
		.span-rel { position: absolute; left: 50px }
		.arrow { display: none; }

		.card {
			height: 100% !important;
			width: 90%; /* fokus lebih besar */
			margin: 0 auto;
			background: #652c00;
			color: #fff;
			padding: 40px 20px;
			border-radius: 20px;
			text-align: center;
			box-shadow: 0 6px 20px rgba(0,0,0,0.25);
			font-size: 16px;
			flex-shrink: 0;
		}
		.swiper-slide {
			width: 100% !important;
		}
		.swiper-slide .title { font-family: Montserrat-Bold; font-size : 22px; margin-top: 50px; }
}

/* ----------------------------------------------------
   💻 3. Medium Devices (tablet landscape, laptop kecil)
   Bootstrap 3 default: ≥992px dan <1200px
---------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
  /* CSS untuk laptop kecil / iPad landscape */
  /* body { border: 10px solid yellow; } */

  .equal-row {
    display: block !important;
  }

  .equal-row > [class*='col-'] {
    display: block;
    text-align: center;
    margin-top: 20px;
  }
    .foot1 { width: 100%; float: left; margin-top: 20px }
    .foot1a { width: 100%; float: left }
    .foot1b { width: 100%; float: left }
    .ffsize { font-family: Montserrat-Regular; font-size: 20px; color: white }
    .footrite { position: absolute; right: 15px; top: 15px; font-family: Montserrat-Regular; font-size: 20px; color: white }

	.fontsize45 {font-family: Montserrat-Bold; font-size: 35px; color: #FFFFFF; text-shadow: 2px 2px 5px #555555; text-transform: uppercase }
	.small-content { width: 100%; float: left; color:#7a4a33; margin:6px 0 24px; font-size:18px; text-align: left; font-style: italic}
	.special-care-box { width: 100%; margin: 0 auto; text-align: center; margin-top: 100px; margin-bottom: 150px; }
  	.title-story { width: 100%; float: left; font-family: Montserrat-Bold; font-size: 35px; color: #D5AD90; text-align: left !important; }
	.title-story-content { width: 100%; float: left; font-family: Montserrat-Bold; font-size: 18px; color: #FFFFFF; text-align: left !important; }
	.title-story-effort { font-family: Montserrat-Bold; font-size: 25px; color: #622E10; text-align: left !important }

    /* .complaint-box{ padding: 20px; border-radius:18px; width: 100%; float: left; text-align: left; margin-bottom: 50px;box-shadow: 5px 15px 20px rgba(0, 0, 0, 0.5) !important; }
    .complaint-box ul{ font-size:16px } */

	
  /* complaint card */
  .complaint-box{
    background: #622E10;
    color: #F3D9C7;
    padding:18px;
    border-radius:28px;
    max-width:100%;
    box-shadow: 0 18px 30px rgba(0,0,0,0.18);
  }
  .complaint-box ul{
    margin:12px 0 0 20px;
    padding:0;
    line-height:1.6;
    font-size:18px;
    font-weight:600;
    font-family: Montserrat-Bold;
  }	



	.youtube-box-1 { width: 100%; border-radius: 15px; min-height: 550px; margin-bottom: 20px; }
	.btn-home {
		width: auto; float: left; margin-right: 20px; font-family: Montserrat-Medium; font-size: 18px; text-decoration: underline; color: #622E10; padding-top: 3px;
	}
	.banner-box-2page { width: 100%; float: left; padding: 20px; text-align: left !important }
	.banner-box-2page .title { text-transform:uppercase; color: #622E10; width: 100%; float: left; font-family: Montserrat-Bold; font-size: 35px; text-align: left  }
	.banner-box-2page .content { text-align: left; color: #622E10; width: 100%; float: left; font-family: Montserrat-Bold; font-size: 18px; margin-bottom: 10px; }
	.boxbanner { border-top: 5px solid #622E10; width: 100%; float: left; padding: 30px 15px 30px 15px; background: #D5AD90 }
	.boxbanner .bgimg { min-height: 500px;
	border-right: none;
	border-left: none;
	position: relative;
	padding: 0;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;	
	}
	.boxstory { width: 100%; float: left; }
	.padding50 { padding: 20px }
	.boxtechno { width: 100%; float: left; padding: 5px; border-bottom: 5px solid #622E10; margin-top: 150px } 
	.boxchallenge { width: 100%; float: left; padding-top: 100px }
	.boxeffort { width: 100%; padding-top: 70px; border-top: 5px solid #622E10; background: #D5AD90; float: left; text-align: center !important }

	.btn-home:hover {
		color: #622E10;
	}
	.banner-desktop {
		display: none !important;
	}
	/* .banner-mobile {
		display: block !important; margin: -20px !important
	} */
	.banner-mobile {
		display: block !important; width: 50%; float: left; right: -20px; bottom: -72px; position: relative; z-index: 99;
	}

	.header-unit-ps-2 {
	min-height: 500px;
	border-right: none;
	border-left: none;
	position: relative;
	padding: 0;
	background-size: cover;
	background-position: right;
	background-repeat: no-repeat;
	}
	.center-text {
	text-align: left !important;
	padding-bottom: 20px;
	}
	
	.challenge-row {
		display: block;
	}

	.challenge-row > [class*="col-"] {
		display: block;
		margin-bottom: 20px;
	}

	.challenge-box {
		height: auto;
	}
	
	.btn-home {
		display: none;
	}
	.team-row { 
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	text-align: center;
	}
	.team-col2 {
		flex: 0 0 calc(33.33% - 20px);
		max-width: calc(33.33% - 20px);
		margin-bottom: 20px;
	}
	.team-col {
		flex: 0 0 calc(33.33% - 20px);
		max-width: calc(33.33% - 20px);
		margin-bottom: 20px;
	}
	
  /* CSS khusus HP */
  .header-container {
    flex-direction: column; /* logo di atas, search di bawah */
    align-items: center;
    padding: 15px 10px;
  }

  .header-logo img {
    height: 45px;
    margin-bottom: 10px;
  }

  .header-search input[type="text"] {
    width: 200px;
    font-size: 14px;
  }

  .header-search input[type="text"]:focus {
    width: 220px;
  }

  .header-search button {
    font-size: 16px;
    right: 8px;
  }
  .footer {
    text-align: left;
  }

  .footer a {
    margin-right: 8px; display: inline-block; /* biar ikon sejajar horizontal */
    margin-top: 18px;
  }

  .footer img {
    width: 28px;
  }

	.footer img:hover {
	transform: scale(1.1);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	}
	.box-footer-ps { background:#551C00; float:left; width:100%; padding: 70px 30px;}
	.text-footer-ps { color: white; font-size: 24px; font-family: Montserrat-Bold; }
	.content-footer-ps { color: white; font-size: 20px; text-align: justify; font-family: Montserrat-Regular; }
	.box-testimoni-ps { width: 100% !important; margin: 0 auto; margin-top: 150px; text-align: center }
	.testimoni-title { font-family: Montserrat-Bold; font-size: 45px; color: #622E10; line-height: 50px; }
	.testimoni-content { font-family: Montserrat-Regular; font-size: 18px; color: #622E10; padding: 15px }

	.box-sp-content { background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; float: left; border-radius: 30px; max-height: 300px; min-height: 300px; box-shadow: 0px 5px 10px 0px #000000 }
	.boxsection-ps-home { width: 100%; margin: 0 auto; padding: 30px; }
	.boxsection-ps { width: 100%; margin: 0 auto; padding: 30px; }
	.boxsection-ps p { text-align: center !important }
	.title-section-ps { font-family: Montserrat-Bold; font-size: 60px; color: #622E10; text-align: left;  }
	.unknown-box-1 { height: 300px; position: relative; }
	.unknown-box-1a { height: 300px; position: relative; }
		.boxsection-ps-text { color: #D5AD90; font-family: Montserrat-Bold; font-size: 22px; font-style: italic; line-height: 22px }
		.boxsection-ps-texta { color: #D5AD90; font-family: Montserrat-Bold; font-size: 22px; font-style: italic; line-height: 22px; bottom: 0; right: 0 }
		.unknown-img-1 { position: absolute; bottom: 0; right: -70px } 
			/* width: 100%; position: absolute; bottom: 0; left: 0px } */
		.unknown-img-2 { position: absolute; bottom: 0; left: -20px } 
			/* width: 100%; position: absolute; top: 0; left: 0px } */
		.unknown-img-1 img {
			max-width: 90%;         /* supaya tidak terlalu besar di layar kecil */
			height: auto;
		}
		.unknown-img-2 img {
			max-width: 90%;         /* supaya tidak terlalu besar di layar kecil */
			height: auto;
		}
		.unknown-text-1a { width: 100%; float: left; border-left: 3px solid white; padding: 10px; }
		.unknown-text-1b { border-left: 3px solid white; padding: 10px; position: absolute; bottom: 20px; right: 0}
		.solution-section-ps { font-family: Montserrat-Bold; font-size: 45px; color: #622E10; margin-top: 100px; margin-bottom: 50px; text-align: center !important }
		.boxsolusi { background: white; border-top: 5px solid #622E10; border-bottom: 5px solid #622E10; padding: 20px 20px 150px 20px; }
		.solution-box-home { background: #622E10; width: 100%; float: left; border-radius: 30px; padding: 30px; min-height: 450px; max-height: 450px; overflow: hidden; color: white; box-shadow: 0px 5px 10px 0px #222222; position: reltive; }
		.solution-text-box {
		font-size: 24px !important;
		min-height: 120px !important;
		max-height: 120px !important;
		}
		.unknown-box-3 { width: 100%; float: left; border-left: 3px solid white; padding: 5px 20px 5px 20px; margin-top: 20px; }
		.solution-box-content { width: 100%; float: left; min-height: 80px; max-height: 100%; overflow: hidden; font-family: Montserrat-Regular; font-size: 16px; margin-top: 20px; margin-bottom: 10px }
		.span-rel { width: 100%; float: left; }
		.arrow { display: none !important;}

		.card {
			height: 100% !important;
			width: 90%; /* fokus lebih besar */
			margin: 0 auto;
			background: #652c00;
			color: #fff;
			padding: 40px 20px;
			border-radius: 20px;
			text-align: center;
			box-shadow: 0 6px 20px rgba(0,0,0,0.25);
			font-size: 16px;
			flex-shrink: 0;
		}
		.swiper-slide {
			width: 100% !important;
		}
		.swiper-slide .title { font-family: Montserrat-Bold; font-size : 22px; margin-top: 50px; }
  
}


/* ----------------------------------------------------
   🖥️📺 5. Extra Large / Full HD Display
   Tambahan custom breakpoint (TV / monitor besar)
---------------------------------------------------- */
@media (min-width: 1600px) {
  /* CSS untuk layar lebar, misal TV 1080p ke atas */
  /* body { border: 110pxpx solid navy; } */
  
    .foot1 { padding-left: 150px; padding-top: 180px; position: relative; }
    .foot1a { position: absolute; right: 20px; top: 135px; }
    .foot1b { position: absolute; right: 20px; margin-top: 20px; }
    .ffsize { font-family: Montserrat-Regular; font-size: 17px; color: white }
    .footrite { position: absolute; right: 20px; font-family: Montserrat-Regular; font-size: 18px; color: white }

  	.swiper-slide .title { font-family: Montserrat-Bold; font-size : 22px; margin-top: 50px; position: fixed; bottom: 0 }
  	.title-story { font-family: Montserrat-Bold; font-size: 45px; color: #D5AD90; text-align: left !important; }
	.title-story-content { font-family: Montserrat-Bold; font-size: 25px; color: #FFFFFF; text-align: left !important }
	.title-story-effort { font-family: Montserrat-Bold; font-size: 25px; color: #622E10; text-align: center !important }
	.youtube-box-1 { width: 100%; border-radius: 15px; min-height: 350px; margin-bottom: 20px; }
	.btn-home {
		width: auto; float: left; margin-right: 20px; font-family: Montserrat-Medium; font-size: 18px; text-decoration: underline; color: #622E10; padding-top: 3px;
	}
	.banner-box-2page { width: 100%; float: left; padding: 200px 150px 200px 150px; }
	.banner-box-2page .title { text-transform:uppercase; color: #622E10; width: 100%; float: left;font-family: Montserrat-Bold; font-size: 55px; }
	.banner-box-2page .content { margin-bottom: 20px; color: #622E10; width: 100%; float: left; font-family: Montserrat-Bold; font-size: 24px; }
	.boxbanner { border-top: 5px solid #622E10; width: 100%; float: left; padding: 100px 50px 100px 50px; background: #D5AD90 }
	.boxbanner .bgimg { min-height: 500px;
	border-right: none;
	border-left: none;
	position: relative;
	padding: 0;
	background-size: 100%;
	background-position: right;
	background-repeat: no-repeat;
	}
	.small-content { width: 100%; float: left; color:#7a4a33; margin: 12px 0 24px; font-size:18px; font-style: italic}
	.boxstory { width: 100%; float: left; padding: 200px 150px 200px 150px; }
	.padding50 { padding: 50px }
	.boxtechno { width: 100%; float: left; padding: 100px; border-bottom: 5px solid #622E10; } 
	.boxchallenge { width: 100%; float: left; padding: 100px 50px 100px 50px }
	.boxeffort { width: 100%; border-top: 5px solid #622E10; background: #D5AD90; float: left; padding: 50px; text-align: center !important }
	.btn-home:hover {
		color: #622E10;
	}
	.header-unit-ps-2 {
	min-height: 750px;
	border-right: none;
	border-left: none;
	position: relative;
	padding: 0;
	background-size: cover;
	background-position: right;
	background-repeat: no-repeat;
	}
	.center-text {
	display: block;
	align-items: center;
	width: 100%;
	color: white;
	text-align: left;
	}

	.challenge-row {
	display: flex;
	align-items: stretch;
	gap: 20px;
	}

	.challenge-row > [class*="col-"] {
	display: flex;
	}


    body, html {
        height: 100%;
        margin: 0;
        padding: 0;
    }
	body{ overflow-x:hidden; background:#fff }
	/* ====== LOGO ====== */
	.header-logo img {
	height: 55px; /* ukuran logo */
	width: auto;
	position: relative;
	top: 70px;
	left: 70px;
	z-index: 1;
	}

	/* ====== SEARCHBAR ====== */
	.header-search {
	display: flex;
	align-items: center;
	position: relative;
	top: 60px;
	right: 60px;
	z-index: 1;
	}
	.header-unit-ps {
		min-height: 1000px;
		border-right:none;
		border-left: none;
		position: relative;
		top: -15px
	}
	.footer {
	text-align: left; /* bisa center kalau mau ditengah */
	}

	.footer a {
	display: inline-block; /* biar ikon sejajar horizontal */
	margin-right: 10px; /* jarak antar ikon */
	}

	.footer img {
	width: 32px; /* atur ukuran sesuai kebutuhan */
	height: auto;
	vertical-align: middle; /* biar sejajar rapi */
	transition: all 0.3s ease;
	}

	.footer img:hover {
	transform: scale(1.1);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	}

	.box-footer-ps { background:#551C00; float:left; width:100%; padding: 100px 100px 35px 100px; }
	.text-footer-ps { color: white; font-size: 35px; font-family: Montserrat-Bold; }
	.content-footer-ps { color: white; font-size: 17px; text-align: justify; font-family: Montserrat-Regular; padding-right: 100px }
	.box-testimoni-ps { width: 100% !important; margin: 0 auto; margin-top: 150px; text-align: center }
	.testimoni-title { font-family: Montserrat-Bold; font-size: 75px; color: #622E10; line-height: 80px; }
	.testimoni-content { font-family: Montserrat-Regular; font-size: 35px; color: #622E10; padding: 30px 0 70px 15px }
	.boxsection-ps-home { width: 1050px; margin: 0 auto; }
	.boxsection-ps { width: 100%; margin: 0 auto; }
	.title-section-ps { font-family: Montserrat-Bold; font-size: 55px; color: #622E10; padding: 0 0 0 50px; margin-bottom: 50px; margin-top: 100px }
	.unknown-box-1 { height: 300px; position: relative }
	.unknown-box-1a { height: 300px; position: relative }
		.boxsection-ps-text { color: #D5AD90; font-family: Montserrat-Bold; font-size: 22px; font-style: italic; line-height: 25px }
		.boxsection-ps-texta { color: #D5AD90; font-family: Montserrat-Bold; font-size: 22px; font-style: italic; line-height: 25px; bottom: 0; right: 0 }
		.unknown-img-1 { width: auto; position: absolute; bottom: 0; right: -50px; }
		.unknown-img-2 { width: auto; position: absolute; bottom: 0; left: -10px }
		.unknown-text-1b { width: auto; position: absolute; bottom: 30px; right: 0; border-left: 3px solid white; padding: 5px 20px; }
		.unknown-text-1a { width: auto; position: absolute; left: 0; top: 0; border-left: 3px solid white; padding: 5px 20px; }
	.boxsolusi { background: white; border-top: 5px solid #622E10; border-bottom: 5px solid #622E10; padding: 50px 50px 150px 50px; }	
	.solution-box-home { background: #622E10; width: 100%; float: left; border-radius: 30px; padding: 30px; min-height: 370px; max-height: 370px; overflow: hidden; color: white; box-shadow: 0px 5px 10px 0px #222222; position: reltive }
	.unknown-box-3 { width: 100%; float: left; border-left: 3px solid white; padding: 5px 20px 5px 20px; margin-top: 20px }
	.solution-box-content { width: 100%; float: left; min-height: 80px; max-height: 80px; overflow: hidden; font-family: Montserrat-Regular; font-size: 16px; margin-top: 20px }
	.span-rel { position: absolute; right: 30px }
	.team-col {
		flex: 0 0 45%;
		max-width: 45%;
	}
	.box-sp-content { background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; float: left; border-radius: 30px; max-height: 350px; min-height: 350px; box-shadow: 0px 5px 10px 0px #000000 }
	
	.special-care-box { width: 1200px; margin: 0 auto; text-align: center; margin-top: 100px; margin-bottom: 150px; }

	.team-row { 
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	text-align: center;
	}
	.team-col {
	flex: 0 0 22%;
	max-width: 22%;
	margin-bottom: 30px;
	}
	.team-col2 {
	flex: 0 0 calc(33.33% - 20px);
	max-width: calc(33.33% - 20px);
	margin-bottom: 20px;
	}
}

/* ----------------------------------------------------
   🖥️📺 6. Ultra Wide / 4K Display
   Custom tambahan lagi (TV besar 2K–4K)
---------------------------------------------------- */
@media (min-width: 1920px) {
  /* CSS untuk layar 2K–4K */
  /* body { border: 10px solid purple; } */
  
    .foot1 { padding-left: 150px; padding-top: 180px; position: relative; }
    .foot1a { position: absolute; right: 20px; top: 135px; }
    .foot1b { position: absolute; right: 20px; margin-top: 20px; }
    .ffsize { font-family: Montserrat-Regular; font-size: 17px; color: white }
    .footrite { position: absolute; right: 20px; font-family: Montserrat-Regular; font-size: 18px; color: white }

  	.swiper-slide .title { font-family: Montserrat-Bold; font-size : 22px; margin-top: 50px; position: fixed; bottom: 0 }
  	.title-story { font-family: Montserrat-Bold; font-size: 45px; color: #D5AD90; text-align: left !important; }
	.title-story-content { font-family: Montserrat-Bold; font-size: 25px; color: #FFFFFF; text-align: left !important }
	.title-story-effort { font-family: Montserrat-Bold; font-size: 25px; color: #622E10; text-align: center !important }
	.youtube-box-1 { width: 100%; border-radius: 15px; min-height: 350px; margin-bottom: 20px; }
	.btn-home {
		width: auto; float: left; margin-right: 20px; font-family: Montserrat-Medium; font-size: 18px; text-decoration: underline; color: #622E10; padding-top: 3px;
	}
	.banner-box-2page { width: 100%; float: left; padding: 200px 150px 200px 150px; }
	.banner-box-2page .title { text-transform:uppercase; color: #622E10; width: 100%; float: left;font-family: Montserrat-Bold; font-size: 55px; }
	.banner-box-2page .content { margin-bottom: 20px; color: #622E10; width: 100%; float: left; font-family: Montserrat-Bold; font-size: 24px; }
	.boxbanner { border-top: 5px solid #622E10; width: 100%; float: left; padding: 100px 50px 100px 50px; background: #D5AD90 }
	.boxbanner .bgimg { min-height: 500px;
	border-right: none;
	border-left: none;
	position: relative;
	padding: 0;
	background-size: 100%;
	background-position: right;
	background-repeat: no-repeat;
	}
	.small-content { width: 100%; float: left; color:#7a4a33; margin: 12px 0 24px; font-size:18px; font-style: italic}
	.boxstory { width: 100%; float: left; padding: 200px 150px 200px 150px; }
	.padding50 { padding: 50px }
	.boxtechno { width: 100%; float: left; padding: 100px; border-bottom: 5px solid #622E10; } 
	.boxchallenge { width: 100%; float: left; padding: 100px 50px 100px 50px }
	.boxeffort { width: 100%; border-top: 5px solid #622E10; background: #D5AD90; float: left; padding: 50px; text-align: center !important }
	.btn-home:hover {
		color: #622E10;
	}
	.header-unit-ps-2 {
	min-height: 750px;
	border-right: none;
	border-left: none;
	position: relative;
	padding: 0;
	background-size: cover;
	background-position: right;
	background-repeat: no-repeat;
	}
	.center-text {
	display: block;
	align-items: center;
	width: 100%;
	color: white;
	text-align: left;
	}

	.challenge-row {
	display: flex;
	align-items: stretch;
	gap: 20px;
	}

	.challenge-row > [class*="col-"] {
	display: flex;
	}


    body, html {
        height: 100%;
        margin: 0;
        padding: 0;
    }
	body{ overflow-x:hidden; background:#fff }
	/* ====== LOGO ====== */
	.header-logo img {
	height: 55px; /* ukuran logo */
	width: auto;
	position: relative;
	top: 70px;
	left: 70px;
	z-index: 1;
	}

	/* ====== SEARCHBAR ====== */
	.header-search {
	display: flex;
	align-items: center;
	position: relative;
	top: 60px;
	right: 60px;
	z-index: 1;
	}
	.header-unit-ps {
		min-height: 1000px;
		border-right:none;
		border-left: none;
		position: relative;
		top: -15px
	}
	.footer {
	text-align: left; /* bisa center kalau mau ditengah */
	}

	.footer a {
	display: inline-block; /* biar ikon sejajar horizontal */
	margin-right: 10px; /* jarak antar ikon */
	}

	.footer img {
	width: 32px; /* atur ukuran sesuai kebutuhan */
	height: auto;
	vertical-align: middle; /* biar sejajar rapi */
	transition: all 0.3s ease;
	}

	.footer img:hover {
	transform: scale(1.1);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	}

	.box-footer-ps { background:#551C00; float:left; width:100%; padding: 100px 100px 35px 100px; }
	.text-footer-ps { color: white; font-size: 35px; font-family: Montserrat-Bold; }
	.content-footer-ps { color: white; font-size: 17px; text-align: justify; font-family: Montserrat-Regular; padding-right: 100px }
	.box-testimoni-ps { width: 100% !important; margin: 0 auto; margin-top: 150px; text-align: center }
	.testimoni-title { font-family: Montserrat-Bold; font-size: 75px; color: #622E10; line-height: 80px; }
	.testimoni-content { font-family: Montserrat-Regular; font-size: 35px; color: #622E10; padding: 30px 0 70px 15px }
	.boxsection-ps-home { width: 1050px; margin: 0 auto; }
	.boxsection-ps { width: 100%; margin: 0 auto; }
	.title-section-ps { font-family: Montserrat-Bold; font-size: 55px; color: #622E10; padding: 0 0 0 50px; margin-bottom: 50px; margin-top: 100px }
	.unknown-box-1 { height: 300px; position: relative }
	.unknown-box-1a { height: 300px; position: relative }
		.boxsection-ps-text { color: #D5AD90; font-family: Montserrat-Bold; font-size: 22px; font-style: italic; line-height: 25px }
		.boxsection-ps-texta { color: #D5AD90; font-family: Montserrat-Bold; font-size: 22px; font-style: italic; line-height: 25px; bottom: 0; right: 0 }
		.unknown-img-1 { width: auto; position: absolute; bottom: 0; right: -50px; }
		.unknown-img-2 { width: auto; position: absolute; bottom: 0; left: -10px }
		.unknown-text-1b { width: auto; position: absolute; bottom: 30px; right: 0; border-left: 3px solid white; padding: 5px 20px; }
		.unknown-text-1a { width: auto; position: absolute; left: 0; top: 0; border-left: 3px solid white; padding: 5px 20px; }
	.boxsolusi { background: white; border-top: 5px solid #622E10; border-bottom: 5px solid #622E10; padding: 50px 50px 150px 50px; }	
	.solution-box-home { background: #622E10; width: 100%; float: left; border-radius: 30px; padding: 30px; min-height: 370px; max-height: 370px; overflow: hidden; color: white; box-shadow: 0px 5px 10px 0px #222222; position: reltive }
	.unknown-box-3 { width: 100%; float: left; border-left: 3px solid white; padding: 5px 20px 5px 20px; margin-top: 20px }
	.solution-box-content { width: 100%; float: left; min-height: 80px; max-height: 80px; overflow: hidden; font-family: Montserrat-Regular; font-size: 16px; margin-top: 20px }
	.span-rel { position: absolute; right: 30px }
	.team-col {
		flex: 0 0 45%;
		max-width: 45%;
	}
	.box-sp-content { background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; float: left; border-radius: 30px; max-height: 350px; min-height: 350px; box-shadow: 0px 5px 10px 0px #000000 }
	
	.special-care-box { width: 1200px; margin: 0 auto; text-align: center; margin-top: 100px; margin-bottom: 150px; }

	.team-row { 
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	text-align: center;
	}
	.team-col {
	flex: 0 0 22%;
	max-width: 22%;
	margin-bottom: 30px;
	}
	.team-col2 {
	flex: 0 0 calc(33.33% - 20px);
	max-width: calc(33.33% - 20px);
	margin-bottom: 20px;
	}
}


.team-row-img { 
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* tetap center meski jumlah item ganjil */
  gap: 20px; /* jarak antar kolom */
  text-align: center;
}

.team-col-img {
  flex: 0 0 calc(33.33% - 20px); /* 3 kolom per row dengan gap */
  max-width: calc(33.33% - 20px);
  margin-bottom: 30px;
}

.team-img-img {
  display: block;
  margin: 0 auto 15px;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  cursor: pointer;
}
@media (max-width: 991px) { /* tablet */
  .team-col-img {
    flex: 0 0 calc(50% - 20px); 
    max-width: calc(50% - 20px); /* jadi 2 kolom */
  }
}

@media (max-width: 575px) { /* HP */
  .team-col-img {
    flex: 0 0 100%;
    max-width: 100%; /* jadi 1 kolom */
  }
}


/*versi desktop*/
#video-container {
    position: absolute;
}
#video-container {
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    overflow: hidden;
}
video {
    position:absolute;
    z-index:0;
}
video.fillWidth {
    width: 100%;
}
.card3 {
  background: #fff;
  border-radius: 10px;
  text-align: center;
  padding: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  margin-bottom: 20px;
}

.card3 img {
  border-radius: 8px;
  margin-bottom: 10px;
}

.card3 .label {
  font-weight: bold;
  color: #552200;
}


.equal-row {
  display: flex;
  align-items: center;
}

.equal-row > [class*='col-'] {
  display: flex;
  align-items: center;
  flex-direction: column;
  color: white;
  text-align: left;
}
@media (max-width: 767px) {
  .equal-row {
    display: block;
  }

  .equal-row > [class*='col-'] {
    display: block;
    text-align: center;
    margin-top: 20px;
  }
}