/* ----------------------------------------------------------------
	SJ CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
:root {
    --sj-primary: #0B4D8F;
	--sj-secondary: #4f46e5;
    --sj-primary-light: #6366f1;
    --sj-primary-dark: #3730a3;
    --color-text: #414242;
}
.container {
	max-width: 1130px;
}

.page-title {
    border:0;
}


html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

#header-wrap {
    border-bottom:0;
    background:transparent;
}


.menu-link {
    color:#fff;
}

.menu-item:hover .menu-link {
    color:#c5c4c4 !important;
}

.sticky-header .menu-link {
    color:#000000;
}

.img-rounded {
  max-width: 530px;        /* adjust as needed */
  border-radius: 27px; /* rounded corners */
  overflow: hidden;    /* IMPORTANT */
}

.card-rounded {
  border-radius: 27px; /* rounded corners */
  overflow: hidden;    /* IMPORTANT */
}


.img-rounded-15 {
  border-radius: 15px; 
  overflow: hidden;    
}


.top-search-form input {
   color:#fff !important;
}

.page-dark .top-search-form input {
   color:#414242 !important;
}

/*---header selected--*/

.header-misc-icon i, .header-misc-icon a {
  color:#fff;
}

#lang-trigger img {
    filter: brightness(0) invert(1);
}

.page-dark .header-misc-icon i, .header-misc-icon a {
  color:#414242;
}

.page-dark #lang-trigger img {
    filter: brightness(0) invert(0);
}

.sticky-header .header-misc-icon i, .header-misc-icon a {
  color:#414242;
}

.sticky-header #lang-trigger img {
    filter: brightness(0) invert(0);
}

/* MENU WARNA HITAM */
.page-home .menu-link,
.page-artikel .menu-link,
.page-dark .menu-link {
    color: #414242 !important;
}

/* LOGO: tampilkan logo putih */
.page-home #logo .logo-default,
.page-artikel #logo .logo-default,
.page-dark #logo .logo-default {
    display: none;
}

.page-home #logo .logo-dark,
.page-artikel #logo .logo-dark,
.page-dark #logo .logo-dark {
    display: block;
}

/* SAAT STICKY → SELALU PAKAI LOGO PUTIH */
.sticky-header #logo .logo-default {
    display: none !important;
}

.sticky-header #logo .logo-dark {
    display: block !important;
}

.m-pt-100 {
  padding-top:100px;
}

.contact-top {
    padding-right: 100px;
}

.contact-bottom {
  padding-top:20px;
}

/* Tampilan Mobile (Biasanya di bawah 991px atau 767px) */
@media (max-width: 991px) {

.artikel-content p {
  padding-bottom:20px;
}

/* .container {
  padding-right:20px;
  padding-left:20px;
} */

.contact-top {
    padding-right: 30px;
}

  .contact-bottom {
  padding-top:0;
}

  .sj-contact-area {
    padding-bottom:30px;
  }

  .m-pt-100 {
  padding-top:0;
}
    .logo-default {
        display: none !important; /* Paksa sembunyi logo putih */
    }
    
    .logo-dark {
        display: block !important; /* Paksa tampilkan logo hitam */
        margin: 0 auto;            /* Opsional: agar logo ke tengah di mobile */
    }

  .menu-link {
    color: #414242;
}
}


.about-grid {
  display: grid;
  grid-template-columns: 4fr 7fr; /* sama seperti col-lg-5 / 7 */
  gap: 24px;
  align-items: stretch;
}

/* Image */
.about-image {
  border-radius: 20px;
  overflow: hidden;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card wrapper */
.about-cards {
  display: grid;
  grid-template-rows: 1fr 1fr; /* 2 card = tinggi seimbang */
  gap: 24px;
}

.card-vision {
  padding: 32px;
  border-radius: 20px;
}

@media (max-width: 991px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-cards {
    grid-template-rows: auto;
  }

  .about-image {
    height: 300px; /* optional untuk mobile */
  }
}

section {
	padding-top:100px;
	padding-bottom:100px;
}

h1,h2,h3,h4,p {
    font-family: "Inter", sans-serif;
	margin-bottom:0;
}

p {
    font-family: "Inter", sans-serif;
	font-size:18px;
}

h1 {
	color:var(--sj-primary);
	
}

/* Padding Top */
.pt-10  { padding-top: 10px; }
.pt-30  { padding-top: 30px; }
.pt-50  { padding-top: 50px; }
.pt-70  { padding-top: 70px; }
.pt-90  { padding-top: 90px; }
.pt-100 { padding-top: 100px; }
.pt-200 { padding-top: 200px; }

/* Padding Bottom */
.pb-10  { padding-bottom: 10px; }
.pb-30  { padding-bottom: 30px; }
.pb-50  { padding-bottom: 50px; }
.pb-70  { padding-bottom: 70px; }
.pb-90  { padding-bottom: 90px; }
.pb-100 { padding-bottom: 100px; }
.pb-150 { padding-bottom: 150px; }
.pb-200 { padding-bottom: 200px; }


/* Padding Right */
.pr-20  { padding-right: 20px; }
.pr-40  { padding-right: 40px; }
.pr-60  { padding-right: 60px; }
.pr-80  { padding-right: 80px; }
.pr-100 { padding-right: 100px; }
.pr-120 { padding-right: 120px; }
.pr-140 { padding-right: 140px; }
.pr-160 { padding-right: 160px; }
.pr-180 { padding-right: 180px; }
.pr-200 { padding-right: 200px; }

/* Padding Left */
.pl-20  { padding-left: 20px; }
.pl-40  { padding-left: 40px; }
.pl-60  { padding-left: 60px; }
.pl-80  { padding-left: 80px; }
.pl-100 { padding-left: 100px; }
.pl-120 { padding-left: 120px; }
.pl-140 { padding-left: 140px; }
.pl-160 { padding-left: 160px; }
.pl-180 { padding-left: 180px; }
.pl-200 { padding-left: 200px; }


.menu-item .menu-link {
	padding:8px !important;
}

.sj-display {
font-size:85px;
}

#header-wrap #logo img {
	padding:20px 0;
    height: auto;
    width: 400px;
}


.is-expanded-menu #header.sticky-header-shrink #header-wrap #logo img {
	height: auto;
}


.top-search-open #top-search a img:nth-child(1), #top-search a i:nth-child(2) {
	display:none;
}


.img-banner-top {
   
}

.img-banner-top img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* supaya full seperti background */
}

.content-slide {
   position: absolute;
   width:60%;
   top: 50%;
   transform: translateY(-50%);
}

.w-40 {
	width:40%
}

.w-60 {
	width:65%
}

.w-70 {
	width:70%
}

.w-35 {
	width:34%
}

.rounded-xxl {
border-radius:30px;
}

.title-hero  {
	color: #fff;
}

.title-hero .my-4{
	opacity:1;
	border-top: 1px solid #fff;
}


.title-hero h2   {
	line-height:normal;
	color: #fff;
	font-size:50px;
	margin-bottom:0;
}

.title-hero p  {
	color: #fff;
	font-size:18px;
}


/*----video carousel----*/

.video-carousel .video-thumb {
    position: relative;
    width: 730px;
    height: 100%;
    border-radius: 34px;
    overflow: hidden;
}

.video-carousel .video-rounded {
   position: relative;
    width: 730px;
    height: 100%;
    border-radius: 34px;
    overflow: hidden;
}


/* iframe cover penuh */
.video-carousel .video-thumb iframe {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) !important;
    border: 0;
}

.video-carousel .owl-item {
    width: 730px !important;
}

.video-carousel {
    padding: 0 40px; /* ruang sisi */
}



/* slide aktif (tengah) */
.video-carousel .owl-item.center .video-thumb {
    transform: scale(1);
}

.video-thumb img,
.video-thumb iframe {
    margin:0;
    /* height: 400px; */
    object-fit: cover;
}

/* play btn */
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(0,0,0,.6);
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .video-carousel .owl-item,
    .video-thumb {
        width: 85vw !important;
    }
}

.sj-contact-area a {
font-size:18px;
color: var(--color-text);
}

.font-normal {
	font-size:18px;
	line-height:normal;
	margin:0;
}

.font-28 {
	font-size:28px;
	line-height:normal;
	margin:0;
}

.font-46 {
	font-size:46px;
	font-weight:600;
	line-height:normal;
	margin:0;
}

.font-53 {
	font-size:53px;
	font-weight:600;
	line-height:normal;
	margin:0;
}

.font-40 {
	font-size:46px;
	font-weight:600;
	line-height:normal;
	margin:0;
}


.fw-400 {
	font-weight:400;
}

.fw-500 {
	font-weight:500;
}

.fw-600 {
	font-weight:600;
}



.overlay-blue {
   background: #002851;
background: linear-gradient(180deg,rgba(0, 40, 81, 0.12) 40%, rgba(0, 40, 81, 1) 100%);
}

.color-gd-1 {
	 background: linear-gradient(
        90deg,
        rgba(1, 51, 102, 1) 0%,
        rgba(10, 76, 142, 1) 28%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.rotate-45-up {
    display: inline-block;      /* wajib biar transform jalan */
    transform: rotate(-45deg);  /* ke arah atas */
}

.top-texture-benang {
    position: absolute;
    left:0;
    top: 0;
}


.z-99 {
	z-index:99;
}

.side-p-benang {
	z-index:1;
    position: absolute;
    right: 0;
    bottom: 0;
}

.side-p-benang img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ini yang melakukan fungsi 'crop' secara otomatis */
    object-position: right center; /* Fokus crop pada bagian kanan gambar */
}


.top-line {
	z-index:1;
    position: absolute;
    left: 0;
    top: 30%;
    width:80%;
}

.bottom-line {
	z-index:1;
    position: absolute;
    right: 0;
    bottom: 0;
    width:90%;
}



.absolute-footer {
  position: absolute;      /* parent harus relative */
  width:100vw;
  top:0;
  height: 100%;  
  z-index:1;          /* atau tentukan tinggi tertentu */
}

.absolute-footer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* agar gambar proporsional & penuh */
}


.p-oeko-tex {
    position: relative;
}

.p-oeko-tex img {
    width: 100%;
    display: block;
}

/* teks di atas image */
.text-on-image {
    max-width:50%;
     position: absolute;
    top: 50%;
    left: 20px; /* atau sesuai kebutuhan */
    transform: translateY(-50%);
    z-index: 2;
}


.side-p-benang img {
max-height:950px;
}

.bg-grey1 {
	background: #F4F4F4;
}

.bg-grey2 {
	background: #DEDEDE;
background: linear-gradient(0deg, rgba(222, 222, 222, 1) 0%, rgba(255, 255, 255, 1) 28%);
}

.bg-texture {
    background-image: url("../images/sj-bg-section.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    width: 100%;
    min-height: 100vh;
}

.bg-gradient-blue {
  color:#fff;
  font-size:18px;
  font-weight:300;
	background: #0B4D8F;
background: linear-gradient(180deg, rgba(11, 77, 143, 1) 0%, rgba(0, 64, 128, 1) 100%);
}

.button-circle {
  border-radius:21px;
}

.bg-gradient-blue-light {
background: #5592CF;
background: linear-gradient(45deg, rgba(85, 146, 207, 1) 0%, rgba(42, 108, 174, 1) 100%);
}

.bg-gradient-radial {
  background: #044586;
background: radial-gradient(circle at top, rgba(4, 69, 134, 1) 0%, rgba(1, 6, 36, 1) 100%);
}



.card-content {
	padding:35px;
}

.card-h-300 {
	height:300px;
}

.card-h-400 {
	height:400px;
}

.footer-logo {
    max-width:390px;
}

.widget i {
font-size:18px;
 color:#687B89 !important;
}

.widget a {
 color:#687B89 !important;
}

.widget p, .widget h4 {
    font-size:13px ;
    color:#687B89 ;
    text-transform:capitalize ;
    letter-spacing:normal ;
}

.sj-phone {
    padding-right:20px;
}

.social-icon-link {
   
}

.widget li a , .copyrights p {
font-size:13px;
color:#687B89 !important;
}

.copyrights {
    margin-top:50px;
    padding:20px;
    border-top:1px solid #687B89;
}


.sj-page-title h1 {
    line-height:normal;
    font-size:53px !important;
    color:#fff !important;
    font-weight:500;
}

.sj-page-title span {
    font-weight:400;
    font-size:40;
    color:#fff !important;
}

.text-right {
    text-align:right;
}

.container-center {
  justify-content: space-between;
    display: flex;
  margin:auto;
  padding-top:150px;
  height:500px;
  max-width: 900px;
}

.img-absolute-center {
    position: absolute;
    max-width:800px;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
}

.bg-page-about {
    background-image:url("../images/bg-page.jpg");
}

.bg-page-industri {
    background-image:url("../images/bg-page-industri.jpg");
    background-repeat:no-repeat;
    background-size:cover;
}

.bg-page-product {
    background-image:url("../images/bg-page-product.jpg");
    background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 16 / 9; /* sesuaikan rasio gambar */
}

.bg-page-product-detail {
    background-image:url("../images/bg-page-product-detail.jpg");
    background-repeat: no-repeat;
  background-size: cover;
}

.h-page {
  min-height:600px;
}

.card-apparel {
  height:196px;
}

.card-p-apparel {
  padding:20px;
}

.side-p-left {
    position: absolute;
    left: -200px;
    bottom: 60px;
    z-index: 1;
    overflow: hidden;      /* INI KUNCI CROP */
}

/* .side-p-left img {
    object-fit: cover;
    object-position: 70% 30%; 
} */

.side-p-left-full {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 55%; /* Letakkan titik atas elemen di tengah container */
    transform: translateY(-50%); /* Geser naik sebesar setengah dari tinggi dirinya sendiri */
    /* bottom: 80px; <-- Hapus ini agar tidak bentrok dengan top */
}

.side-p-right {
	z-index:1;
  max-width:550px;
    position: absolute;
    right: 0;
    bottom:40px;
}

.bg-bag {
  background-image:url("../images/img-bg-bag.jpg");
  background-size:cover;
  height:100%;
}

.content-side {
    padding-right:30px;
}

.card-rounded {
    border-radius:27px;
}

.card-vision {
    min-height:225px;
    padding:30px;
    display: flex;
    flex-direction: column;
}
.g-6 {
    gab:40px;
}

.list-misi {
    padding:0 20px;
}

.bg-tex {
    background-image:url("../images/img-tex.jpg");
      background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height:100vh;
}


.button-text {
  background:transparent;
  color:#000;
  padding:0;
  font-size:18px;
}

.date {
  color: #B5B5B5;
}

.artikel-img {
  border-radius:15px;
  min-width:300px;
}

.artikel-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.artikel-content {
  padding:30px 25px;
}

.full-content h4, .full-content p {
font-size:18px;
color: #414242;
}

.full-content p {
margin-bottom:20px;
}

.list-artikel {
  padding-left:20px;
}

.card-artikel {
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-radius:15px;
}

.img-full {
  height:400px;
}

.img-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%; /* center vertical & horizontal */
}

.sj-contact-area h4 {
  margin-bottom:10px;
}

/*---table---*/

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

th, td {
  height:130px;
  padding: 15px;
  border-bottom: 1px solid #ddd;
}

.table-product th {
  font-size:25px;
  font-weight:500;
}

th:first-child,
td:first-child {
  text-align: left;
}


/* img {
  margin: 0 5px;
} */

/*---form---*/

.form-control {
  margin-bottom:30px;
  border-radius:0;
  background:transparent;
  border-top:0;
  border-left:0;
  border-right:0;
  border-bottom:1px solid #CACACA;
}

.form-control::placeholder {
  color: #848484;
  opacity: 1;
}

.border-radius-35 {
  border:0;
  border-radius:35px;
}

.card-form {
  padding:50px 30px;
}

.form-control.message {
  height: 200px;
  resize: vertical; /* bisa diubah ukuran vertikal, opsional */
}

.list-phone {
  list-style: none; /* hilangkan bullet */
  padding: 0;       /* hilangkan padding default */
  margin: 0;        /* hilangkan margin default */
}

.list-icon {
  list-style: none; /* hilangkan bullet */
  padding: 0;
  margin: 0;
  display: flex;    /* bikin horizontal */
  gap: 20px;        /* jarak antar item, bisa disesuaikan */
}

.list-icon li {
  display: inline;  /* opsional, karena flex sudah cukup */
}

.list-icon a {
  text-decoration: none; /* hilangkan garis bawah */
  color: #000;           /* warna teks, bisa disesuaikan */
}

a {
  text-decoration: none;
}

/* Judul */

.card-item-product {
  height:282px; 
  background-color:#f7f7f7;

}

.benang-item  {
    padding: 0 25px;
  text-align:center;
  max-width:120px;
}

.benang-item a {
  color: #414242;
  font-size:18px;
  text-decoration: none !important;
}

.card-product {
  height:382px; 
  background-color:#f7f7f7;
}
.card-product h4 {
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

/* Tombol */
.card-product .btn-hover {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s ease;
    pointer-events: none;
}

/* Hover effect */
.card-product:hover h4 {
    transform: translateY(0);
}

.card-product:hover .btn-hover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* optional overlay */

.card-product:hover::after {
    opacity: 1;
}


/* Text */
.brand-text {
  max-width: 420px;
}


.logo-sj-carousel .item {
  width: 220px;
  min-height: 200px;
  margin: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-sj-carousel .item img {
  height: 120px;
  transition: transform .45s ease, opacity .45s ease;
  transform: scale(1);
  opacity: 0.4;
}

/* SLIDE 4 (CENTER) */
.logo-sj-carousel .owl-item.center img {
  transform: scale(2);
  opacity: 1;
  z-index: 5;
}


.area-text-hero {
  width:65%;
padding:0 50px;
}

/*-----sj----*/



.card-h-center {
  height:100%;
}

.object-cover {
  margin:0;
}


.home-textile {
  padding:100px 0;
}

.side-sofa {
  left:-100px;
}

.side-apparel-img {
  margin:15px;
}

.title-about-bottom  {
  text-align:right;
}

/*---gallery---*/

.gallery-section {
    padding: 80px 0;
}

.gallery-item {
    padding: 0 10px; /* Memberikan sedikit celah antar gambar */
    transition: transform 0.5s ease;
}

.img-wrapper {
    margin:10px;
    overflow: hidden;
    border-radius: 15px; /* Membuat sudut tumpul sesuai gambar */
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.gallery-item img {
    width: 100%;
    height: 400px; /* Atur tinggi sesuai kebutuhan */
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Efek Hover Zoom */
.gallery-item:hover {
    transform: scale(1.2);
    z-index:99;
}

/* Styling Gambar Utama (Featured) - Membuatnya lebih besar/tinggi */
.gallery-item.featured {
    z-index: 2;
}

.gallery-item.featured img {
    height: 550px; /* Gambar kedua dibuat lebih tinggi agar menonjol */
    border: 5px solid #fff; /* Tambahan border putih seperti pada gambar */
}

.benang-item .active {
  font-weight:600;
}

.benang-item:hover {
  font-weight:600;
}


.text-sec-right {
  text-align:right;
}

.owl-carousel .owl-nav [class*=owl-] { 
  opacity:1;
}
/* Pastikan wrapper relatif */
.video-carousel {
  position: relative;
}

/* Wrapper nav */
.video-carousel .owl-nav {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  width:1200px;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 100px; /* atur ruang kiri/kanan */
}

/* Style untuk prev & next button */
.video-carousel .owl-nav .owl-prev,
.video-carousel .owl-nav .owl-next {
  pointer-events: auto; /* biar bisa diklik */
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
}


.video-carousel .owl-nav .owl-prev {
  position: absolute;
  left: 10px;
}

.video-carousel .owl-nav .owl-next {
  position: absolute;
  right: 10px;
}


.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
  color:var(--sj-primary) !important;
  font-size:35px !important;
  font-weight:400 !important;
  background: #fff !important;
}


/* Icon di dalam button (khusus next, karena ada span) */
.video-carousel .owl-nav .owl-next .owl-next-btn {
  background:#ffffffc9;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}



/* Hover effect */
.video-carousel .owl-nav .owl-prev:hover,
.video-carousel .owl-nav .owl-next:hover {
  background: red;
}

.owl-carousel .owl-nav [class*=owl-] {
  left;0 !important;
}

.owl-carousel .owl-nav [class*=owl-]:hover {
    background-color: #fff !important;
      max-width:1700px;
    color:#000 !important;
}


.sj-left-pd {
  padding-left:40px;
}


/* Responsive Mobile */
@media (max-width: 767px) {

.area-text-hero {
    width: 90%;
    padding: 0 30px;
}

.sj-left-pd {
  padding-left:0;
}

.pr-20 {
  padding-right:0;
}

  .text-sec-right,  .title-sejati {
  text-align:center;
}

.text-sec-left {
  text-align:center;
  margin-bottom:20px;
}
    .gallery-item {
        padding: 10px 20px;
    }
    .gallery-item img, 
    .gallery-item.featured img {
        height: 200px; /* Tinggi disamakan saat di mobile agar rapi */
    }
}

.hero-img {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (width: 1920pxpx) {
.side-p-benang {
    z-index: 1;
    position: absolute;
    right: -320px;
    bottom: 0;
}

}


/* Laptop Standar (1366px) ke atas */
@media (min-width: 1366px) {
    
    
.side-p-left {
  position: absolute;
  left: -302px;}
.bg-bag {
  background-image: url("../images/img-bg-bag.jpg");
  background-size: auto 100%;
  height: auto;
  background-position: right;
  background-repeat: no-repeat;
}

.area-text-hero {
    width: 80%;
    padding: 0 80px;
}

  .content-slide {
    position: absolute;
    width: 60%;
    top: 50%;
    transform: translateY(-50%);
}


.hero-img {
        width: 90% !important;
         left: 50%;
    transform: translateX(-50%);
  }

   .banner-text-area {
  width:65%;
}

.bg-page-product, .bg-page-industri, .bg-page-about, .bg-page-product-detail {
    max-height: 800px;}

.center-absolute {
    z-index: 1;
    position: absolute;
    left:50px;
    top: 50%;
    transform: translateY(-50%);
}

/*#oc-clients-full .oc-item {*/
/*    padding: 0 60px; !important}*/

}

/* Khusus Layar Besar / Full HD (1920px) */
@media (min-width: 1920px) {


  
.bg-bag {
  background-image: url("../images/img-bg-bag.jpg");
  background-size: auto 100%;
  height: 100vh;
  background-position: right;
  background-repeat: no-repeat;
}

.content-slide {
    position: absolute;
    width: 60%;
    top: 50%;
    transform: translateY(-50%);
}

.card-item-product {
    height: 380px;
    background-color: #f7f7f7;
}

.text-item-product p {
    text-transform: capitalize !important;
}
.container {
    max-width: 1400px;
}
   .banner-text-area {
  width:65%;
}

.center-absolute {
    z-index: 1;
    position: absolute;
    left: 200px;
    top: 50%;
    transform: translateY(-50%);
}

}

@media only screen and (max-width: 767px) {

#top-search {
  display:none;
}

.container-center {
  padding-top:0;
  display: block;
  justify-content:between;
  text-align:center;
  height:500px;
  max-width: 900px;
}

.title-about-bottom  {
  text-align:center;
}
.img-absolute-center {
    position: absolute;
    width: 420px;
    top: 330px;
}

.table-product th {
  line-height:normal;
    font-size: 18px;
    font-weight: 500;
}

.card-item-product {
  height:200px;
}

  .home-textile {
  padding:0;
}

.side-card-sj {
  padding:12px;
}
.m-pt-50 {
    padding-top:50px;
  }

  .content-slide {
   position: absolute;
   width:75%;
   bottom: 0;
   transform: none;
}

/* .card-h-center {
  height:400px;
} */


.title-hero h2   {
	line-height:normal;
	color: #fff;
	font-size:20px;
	margin-bottom:0;
}

.w-35 {
	width:70%
}

.title-hero p  {
	color: #fff;
	font-size:12px;
}

.title-hero .my-4{
	margin-top:5px !important;
	margin-bottom:5px !important;
}

}

#footer {
    border-top: 1px solid transparent;
}

.center-absolute {
  	z-index:1;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
   
}

.tex-shadow {
 position: absolute;
    top: 140%;
    left: 38%; /* Move the top-left corner to the center */
    transform: translate(-50%, -50%); /* Offset the element by half its own width/height */
    z-index: 1;
}


.center-tex {
    position: absolute;
    top: 50%;
    width:300px;
    left: 50%; /* Move the top-left corner to the center */
    transform: translate(-50%, -50%); /* Offset the element by half its own width/height */
    z-index: 2;
}

.sec-area {
  height:60vh;
}

.brand-sj {
  margin-bottom:50px;
}

@media only screen and (max-width: 767px) {

.center-tex {
   display:none;
}

.list-misi {
    padding-left:20px;
}

.center-absolute {
    display:none;
    /* position:absolute;
  	z-index:1;
    left: 40px;
    top:150%;
    transform: translateY(-50%); */
}

.sec-area {
  height:50vh;
}


#oc-clients-full .oc-item {
    padding: 0 20px;}

.bg-tex {
    background-image: url("../images/img-tex.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    /* Nilai pertama: Horizontal (center), Nilai kedua: Vertikal (top 50%) */
    background-position: center top 90%; 
    height: 100vh;
}

.footer-logo {
    max-width: 390px;
    width: 100%;
}

.card-product {
    height: 282px;
    background-color: #f7f7f7;
}

.row {
  margin-left:0;
  margin-right:0;
}

.bg-page-product {
    background-image:url("../images/bg-page-product.jpg");
    background-repeat: no-repeat;
  background-size: cover;
  background-position:50% center;
  aspect-ratio: 16 / 9; /* sesuaikan rasio gambar */
}

.pr-40 {
  padding-right:0;
}

.artikel-title h3 {
  font-size:35px;
}

section {
    padding-top: 50px;
    padding-bottom: 50px;
}

.side-p-left {
	z-index:1;
  max-width:140px;
    position: absolute;
    left: 0;
    bottom:0px;
}

.side-p-left-full {
    display:none;
   
}

.side-p-right {
	z-index:1;
  max-width:140px;
    position: absolute;
    right: 0;
    bottom:0px;
}


#header-wrap #logo img {
    padding: 20px 0;
    height: auto;
    width: auto;
    max-width: 230px;
}
.sj-display {
    font-size: 40px;
}

.side-p-benang {
        width: 250px;
        right: -30px; /* opsional: biar tidak terlalu keluar */
        overflow: hidden;
    }

    .side-p-benang img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.p-oeko-tex img {
    right:60px;;
    z-index: 1;
    position: relative;
    top: 50px;
    width: 100%;
    display: block;
}

.text-on-image {
    
    position: relative;
    top: 0;
    left: 20px;
    z-index: 99;
}

.w-60 {
  width:100%;
}

}

@media (min-width: 768px) and (max-width: 1024px) {

.row-pd {
  padding:0 25px;
}

.side-p-left-full {
    z-index: 1;
    position: absolute;
    left: -300px;
    width:600px;
    top: 60%; /* Letakkan titik atas elemen di tengah container */
    transform: translateY(-50%); /* Geser naik sebesar setengah dari tinggi dirinya sendiri */
    /* bottom: 80px; <-- Hapus ini agar tidak bentrok dengan top */
}

.side-p-left {
    position: absolute;
    left: -500px;
    bottom: 60px;
    z-index: 1;
    overflow: hidden;
}

.side-p-right {
    z-index: 1;
    max-width: 550px;
    position: absolute;
    right: -150px;
    bottom: 40px;
}

.home-textile {
    padding: 100px 20px;
}

}


/* Styles for tablets (portrait orientation) */
@media (min-width: 768px) and (max-width: 1020px) {


.tex-shadow {
        position: absolute;
        top: 120%;
        left: 33%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

.video-carousel .owl-nav .owl-prev {
  position: absolute;
  left: 100px;
}

.video-carousel .owl-nav .owl-next {
  position: absolute;
  right: 100px;
}

.area-text-hero {
    width: 80%;
    padding: 0 60px;
}


.img-absolute-center {
    position: absolute;
    max-width:800px;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
}

  .center-absolute {
    position:absolute;
  	z-index:1;
    width:500px;
    left: 100px;
    top:50%;
    transform: translateY(-50%);
}

.sec-area {
  height:40vh;
}

#oc-clients-full .oc-item {
    padding: 0 30px;}

.bg-tex {
    height: 50vh;
}

.text-on-image {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    z-index: 2;
}


.bg-page-product {
    background-image:url("../images/bg-page-product.jpg");
    background-repeat: no-repeat;
  background-size: cover;
  background-position:50% center;
  aspect-ratio: 16 / 9; /* sesuaikan rasio gambar */
}


/* .side-apparel-img {
  margin-top:100px;
} */

/* .container {
  padding-left:20px;
  padding-right:20px;
} */

.artikel-content p {
  padding-bottom:20px;
}

.side-p-left {
	z-index:1;
    position: absolute;
    left: -500px;
    bottom:0px;
}

.home-textile {
  padding:0 20px;
}

.side-p-left-full {
    z-index: 1;
    position: absolute;
    left: 0;
    width:600px;
    top: 60%; /* Letakkan titik atas elemen di tengah container */
    transform: translateY(-50%); /* Geser naik sebesar setengah dari tinggi dirinya sendiri */
    /* bottom: 80px; <-- Hapus ini agar tidak bentrok dengan top */
}

.side-p-right {
	z-index:1;
    position: absolute;
    right: -120px;
    bottom:0px;
}

.side-p-right {
padding:30px;
}

.bg-bag {
  background-image:url("../images/img-bg-bag.jpg");
  background-size:cover;
  background-position: 30% center;
  height:100%;
}


#header-wrap #logo img {
    padding: 20px 0;
    height: auto;
    width: 325px;
}

 .sj-phone {
   padding-right:0;
    width:100% !important;
  }

}

.menu-item:hover .menu-link {
  box-shadow:none;
  color: var(--color-1);
}


/* Styles for tablets (portrait ipad small) */
@media (min-width: 768px) and (max-width: 1000px) {

.center-tex {
    position: absolute;
    top: 50%;
    width: 250px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.tex-shadow {
    position: absolute;
    top: 105%;
    left: 23%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.img-absolute-center {
  position: absolute;
    max-width: 900px;
    bottom: 2-100px;
    left: 50%;
    transform: translateX(-50%);
}

.side-p-benang {
    z-index: 1;
    position: static;
    right: -200px;
    bottom: 0;
}

.video-carousel .owl-nav .owl-prev {
  position: absolute;
  left: 250px;
}

.video-carousel .owl-nav .owl-next {
  position: absolute;
  right: 250px;
}

.list-misi {
    padding-left:20px;
}

.area-text-hero {
    width: 100%;
    padding: 0 60px;
}


.container-center {
  justify-content: space-between;
    display: flex;
  margin:auto;
  padding-top:150px;
  height:400px;
  max-width: 800px;
}



}

/* iPad Landscape (1024px width) */
@media only screen and (min-width: 1024px) and (max-width: 1369px) and (orientation: landscape) {
    
#header-wrap #logo img {
    width: 300px;
}

  .center-absolute {
    position:absolute;
  	z-index:1;
    left: 80px;
    top:50%;
    transform: translateY(-50%);
}

.text-on-image {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    z-index: 2;
}

.artikel-content p {
  padding-bottom:20px;
}
.p-m-area-30 {
  padding: 50px !important;
}


.side-p-left {
	z-index:1;
    position: absolute;
    left: -500px;
    bottom:20px;
}

/* .side-p-left-full {
    z-index: 1;
    position: absolute;
    left: 0;
    width:700px;
    top: 50%; 
    transform: translateY(-50%); 
} */

.side-p-right {
	z-index:1;
  max-width:440px;
    position: absolute;
    right: 0;
    bottom:20px;
}

  .side-p-left-full {
    z-index: 1;
    position: absolute;
    left: 0;
    width:700px;
    top: 56%; 
    transform: translateY(-50%); 
    
}

}

.history-bottom {
  margin-top:0;
}



/*----update css---*/

.cta-padding {
  padding:35px;
}

.cta-bg {
background: url('../images/img-cta.jpg'); 
background-position: center center; 
background-size: cover;
}

.contact-top {
  margin-top:0;
}

.gallery-section .img-wrapper img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	border-radius: 16px;
}

@media only screen and (max-width: 767px) {

.card-form {
    padding: 50px 10px;
}

.sj-contact-area a {
    font-size: 12px;
    color: var(--color-text);
}

.sj-contact-area {
  padding-right:30px;
}

  .contact-top {
        padding: 10px;
  }

.history-bottom {
  padding-top:20px !important;
  margin-top:0;
}

.history-img {
  margin-top:20px
}

p {
    font-family: "Inter", sans-serif;
    font-size: 12px;
}

.card-apparel {
  height:auto;
}

.sj-page-title {
  padding:0 30px;
}

.side-apparel-img {
    margin: 0;
}

.img-rounded {
    max-width: 530px;
    border-radius: 15px; }

.bg-page-industri {
    background-image: url(../images/bg-page-industri-mobile.jpg);
        background-position: top center; 
        background-size: cover; 
}

.cta-padding {
  padding:25px;
}

.cta-bg {
height: 400px;
background: url('../images/img-cta-mobile.jpg'); 
background-position: center center; 
background-size: cover;
}


.cta-relative {
   display: flex;
    flex-direction: column; /* penting kalau ingin vertikal */
    justify-content: flex-end; /* taruh konten di bawah */
  }

 .cta-content {
    position: absolute;  /* absolute supaya bisa bottom */
    bottom: 0;           /* posisinya di bawah parent */
    left: 0;             /* optional, supaya rapi ke kiri */
    right: 0;            /* optional, supaya full width */
    padding: 20px;       /* beri jarak dari bawah */
  }

.font-40 {
  font-size:25px;
}

.side-p-benang {
  width:100%;
    z-index: 1;
    position: relative;
    right: -30px;
    bottom: 0;
}

.why-sj-area {
  padding-bottom:0;
}

.font-46 {
font-size:35px;
}

.p-oeko-tex {
    position: relative; /* parent harus relative */
    height: 300px;      /* atau sesuai tinggi container */
  }


  .text-on-image {  
     position: absolute;      /* ubah ke absolute */
    top: 50%;                /* geser ke tengah vertikal */
    transform: translateY(-50%);  /* offset setengah tinggi */
    width: 100%;
    right: 0;

  }   

  .p-oeko-tex img {
    position: absolute;      /* ubah ke absolute */
    top: 50%;                /* geser ke tengah vertikal */
    transform: translateY(-50%);  /* offset setengah tinggi */
    width: 100%;
    right: 0;
  }

}

.video-carousel {
  padding: 0;
}

.side-apparel-img {
  width: 100%;
  height: 100%;
}

/* MOBILE ONLY */
@media (max-width: 991px) {

.side-apparel-img {
  position: relative;
  overflow: hidden;
}

.side-apparel-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

  img {
  max-width: 100%;
}
  .side-apparel-img {
    height: 100%;
  }

  .right-apparel {
    height: 100%;
  }

   .right-apparel > div {
    display: flex;
  }

  .card-apparel {
    height:100%;
  }
}

.footware-content {
  padding: 50px 0 100px 0;
}

@media (max-width: 767px) {

.bg-page-product-detail {
    background-image: url(../images/bg-page-product-detail.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 60%;
}

.footware-content {
  padding: 0 25px;
}

.side-p-left {
        z-index: 1;
        max-width: 250px;
        position: static;
        margin:auto;
        left: 0;
        bottom: 0px;
}
.side-p-right {
    display:none;
  }
   .video-carousel {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 25px;
    }

    /* Item pertama full */
    .video-carousel .video-rounded:first-child {
        grid-column: 1 / -1;
    }

    .video-carousel .video-rounded {
        width: 100% !important;
    }
  .video-cover-img {
    width:100%;
    height:100%;
  }
  .video-carousel .video-rounded {
    height:200px;
    border-radius:20px;
  }
}

/*---carousel grid 1 Home---*/
@media (max-width: 768px) {
.carousel-grid-1 {

        width: 100%;
        margin: 0 auto;
    }

.carousel-grid-1 .owl-stage-outer {
padding-right:0 !important;
padding-left:0 !important; }
  

.carousel-grid-1 .col-xl-4 {
        width: 100% !important;
        flex: 0 0 100%;
    }

.carousel-grid-1 .d-flex.position-relative {
        width: 100%;
    }

.card-h-300 {
	height:200px;
}

.card-h-400 {
	height:300px;
}

.card-h-center {
  height: 525px;
}

}


/*-----carousel abot history---*/

.gallery-item {
  padding: 0;
}

.img-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* reset owl style */
.mobile-carousel.owl-carousel .gallery-item {
  width: 100%;
}

/* mobile spacing */
@media (max-width: 767px) {
  .mobile-carousel .gallery-item {
    padding: 0 8px;
  }
.gallery-section .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.gallery-section {
    padding:0 ;
}

.gallery-section .owl-stage-outer {
  padding:0 20px;
}

.area-m {
  padding:12px;
}

.img-wrapper {
  margin:0;
}

.center-tex-m {
  margin: auto;
    max-width: 200px;
    padding:20px;
}

.tex-shadow {
  display:none;
}

.sec-area {
        height: auto;
    }
  
}

.sj-text-pb {
margin-bottom:50px;
}

.sj-text-pt {
  padding-top:50px;
}

/*----carousel bag---*/

.margin-item-card {
  margin-bottom:20px;
}

/* ketika jadi carousel, reset kolom */
.apparel-mobile-carousel.owl-carousel .col-lg-6 {
  width: 100%;
}

/*---update---*/
.article-content ol, .article-content ul  {
    padding-left:20px;
}


/* spacing mobile */
@media (max-width: 767px) {
  .apparel-mobile-carousel .item-card {
    padding: 0 10px;
  }
  
.sj-page-title h1 {
    font-size:40px !important;
}

.pb-200 {
padding-bottom: 100px;
}

.mb-5{
margin-bottom: 1rem !important;
}


.sj-text-pb {
margin-bottom:0;
}

.sj-text-pt {
  padding-top:0;
}
.color-gd-1 {
    display: inline-block;}
  
.dekstop-view {
  display:none !important;
}

.side-card-sj {
  padding:0;
}

.card-p-0 {
  padding-right:0;
}
}

/* Desktop 1366px dan lebih besar */
@media (min-width: 1366px) {
 
 .card-product .object-cover {
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}
  
    
}


@media only screen and (max-width: 767px) {
.button-text {

    font-size: 14px;
}

}



/*----wp lang---*/
/* ================================
   WPGlobus Language Switcher
   Style: EN / ID only
   ================================ */

/* Hapus title */
.footer-language h4 {
	display: none !important;
}

/* Reset list */
.footer-language .dropdown-styled ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Parent hover */
.footer-language .dropdown-styled > ul > li {
	position: relative !important;
	display: inline-block !important;
}

/* Sembunyikan teks asli (English / Indonesia) */
.footer-language .wpglobus-selector-link {
	font-size: 0 !important;
	white-space: nowrap !important;
	text-decoration: none !important;
}

/* Style label EN / ID */
.footer-language .wpglobus-selector-link::after {
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #fff !important;
}

.page-dark .footer-language .wpglobus-selector-link::after {
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #414242 !important;
}

.sticky-header .footer-language .wpglobus-selector-link::after {
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #414242 !important;
}

/* LOGIKA BAHASA */
.footer-language a[href*="/en/"]::after {
	content: "EN" !important;
}

.footer-language a.wpglobus-selector-link:not([href*="/en/"])::after {
	content: "ID" !important;
}

/* Icon globe */
.footer-language .wpglobus-selector-link::before {
   content: "\f0ac" !important;          /* unicode globe */
    font-family: "Font Awesome 6 Free" !important;  /* sesuaikan dengan versi FA */
    font-weight: 900 !important;          /* penting untuk solid style */
    font-size: 15px !important;
    color: #fff !important;            /* hitam */
    margin-right: 6px !important;
}

.page-dark .footer-language .wpglobus-selector-link::before {
   content: "\f0ac" !important;          /* unicode globe */
    font-family: "Font Awesome 6 Free" !important;  /* sesuaikan dengan versi FA */
    font-weight: 900 !important;          /* penting untuk solid style */
    font-size: 15px !important;
    color: #414242 !important;            /* hitam */
    margin-right: 6px !important;
}

.sticky-header .footer-language .wpglobus-selector-link::before {
   content: "\f0ac" !important;          /* unicode globe */
    font-family: "Font Awesome 6 Free" !important;  /* sesuaikan dengan versi FA */
    font-weight: 900 !important;          /* penting untuk solid style */
    font-size: 15px !important;
    color: #414242 !important;            /* hitam */
    margin-right: 6px !important;
}


/* Dropdown */
.footer-language .dropdown-styled ul ul {
	display: none !important;
	position: absolute !important;
	top: 100% !important;
	left: -10px !important;
	padding: 0 !important;
	min-width: 80px !important;
	z-index: 999 !important;
	pointer-events: auto !important;
}

/* Show dropdown on hover */
.footer-language .dropdown-styled > ul > li:hover > ul,
.footer-language .dropdown-styled ul ul:hover {
	display: block !important;
}

/* Dropdown item */
.footer-language .dropdown-styled ul ul li a {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 8px 12px !important;
	color: #fff !important;
	font-size: 14px !important;
	border-radius: 8px !important;
	background: transparent !important;
	pointer-events: auto !important;
}

.page-dark .footer-language .dropdown-styled ul ul li a {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 8px 12px !important;
	color: #414242 !important;
	font-size: 14px !important;
	border-radius: 8px !important;
	background: transparent !important;
	pointer-events: auto !important;
}

.sticky-header .footer-language .dropdown-styled ul ul li a {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 8px 12px !important;
	color: #414242 !important;
	font-size: 14px !important;
	border-radius: 8px !important;
	background: transparent !important;
	pointer-events: auto !important;
}

/* Hover dropdown */
.footer-language .dropdown-styled ul ul li a:hover {
	background: rgba(65,66,66,0.08) !important;
}


.text-padding-5 {
    padding-top:30px;
}

.logo-brands {
    padding: 2px;
    max-height: 50px;
}

.table-product td {
    max-width: 250px;
}

/* Container pembungkus */
.video-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Menjaga rasio video modern */
    background-color: #000; /* Background hitam jika loading */
    overflow: hidden;
    cursor: pointer;
}

/* Iframe agar memenuhi seluruh area container */
.video-iframe-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Memastikan gambar thumbnail juga penuh */
.video-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



@media only screen and (max-width: 767px) {
.pt-5 {
    padding-top:1rem !important;
}

.benang-item {
    text-align: center;
    max-width: 100px;
     padding: 0 10px;
}


#oc-clients-full img {
    width: 60px;
}

/*.owl-carousel .owl-dots {*/
/*    display: none;*/
/*}*/


.owl-carousel .owl-dots .owl-dot {
    background: #074889;
}

.sj-maps {
    height: 400px;
}

.sj-maps  .fluid-width-video-wrapper iframe {
    height: 400px !important;
}

.table-overflow {
    overflow: auto !important;
}
}


.sui-box {
	border-radius:35px;
}

.sui-2-12-27 .sui-modal .sui-box {
	border-radius:35px;
	background: #f4f4f4
}

.forminator-row-last {
    margin-bottom:0 !important;
}


#forminator-module-179 {
    border-radius: 55px !important;
    padding: 30px !important;
    background: #f4f4f4;
    margin: 0 !important;
}

.forminator-ui#forminator-module-179.forminator-design--default .forminator-input, .forminator-ui#forminator-module-179.forminator-design--default .forminator-input input, .forminator-ui#forminator-module-179.forminator-design--default .forminator-iti-input .iti__selected-dial-code {
	background:transparent;
}

#forminator-module-179 .forminator-textarea {
    border-top:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:1px solid #CACACA !important;
	background:transparent !important;
}

.forminator-ui.forminator-custom-form[data-design=material] .forminator-input {
    padding: 9px !important;
      border-bottom:1px solid #CACACA !important;
}

#forminator-module-179 .forminator-textarea:focus, #forminator-module-179 .forminator-input:focus  {
    border-bottom: 1px solid #3498db !important; /* garis bawah biru saat fokus */
    box-shadow: none !important;
    outline: none !important;
}

.forminator-ui.forminator-custom-form[data-design=material] .forminator-textarea--wrap:after {
    border:0 !important;
}


#forminator-module-179 .forminator-button-submit{
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    background: #0B4D8F !important;
    border-radius: 21px !important;
    background: linear-gradient(180deg, rgba(11, 77, 143, 1) 0%, rgba(0, 64, 128, 1) 100%) !important;
}

@media screen and (min-width: 1440px) {
    /* Laptop HD & Desktop */
}

@media screen and (min-width: 1200px) and (max-width: 1439px) {
    /* Laptop standard */
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    /* Tablet Landscape / Laptop kecil */
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    /* Tablet Portrait */
    
    .table-overflow {
    overflow: auto !important;
}
}

/* Styles for tablets (portrait orientation) */
@media (min-width: 768px) and (max-width: 1000px) {
  .content-slide {
    position: absolute;
    width: 60%;
    top:auto;
    bottom: 0;
    
}
}


/* Styles for iPad Pro (portrait orientation) */
@media (min-width: 1024px) and (max-width: 1366px) {
  #header-wrap #logo img {
    width: 300px;
}
}





@media only screen and (max-width: 767px) {
/* Efek Hover Zoom */
.gallery-item:hover {
    transform: none;
    z-index:99;
}

}



.benang-link {
    justify-content: flex-start;
}


@media (min-width: 992px) {
    .benang-link:has(.benang-item:nth-child(7)) {
        justify-content: space-between;
    }
}


.text-item-product p {
    text-transform: capitalize !important;
}

.result-item {
    margin-block: 15px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e3e3e3;
}

.result-item h4 {
  padding-bottom: 10px;
}


.search-box {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 25px;
    overflow: hidden;
    padding: 4px;
    background: #fff;
}

.search-box input {
    border: none;
    outline: none;
    padding: 10px 15px;
    border-radius: 25px;
    min-width: 220px;
    font-size: 14px;
}

.search-box button {
    border: none;
    background: #0B4D8F;
    background: linear-gradient(180deg, rgba(11, 77, 143, 1) 0%, rgba(0, 64, 128, 1) 100%);
    color: #fff;
    padding: 10px 18px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
}

.search-box button:hover {
    background: #333;
}

.logo-sejati {
    padding: 100px 0;
}

/* Reset semua logo default */
#logo-carousel-free-226 .swiper-slide .sp-lc-logo {
    border: 0 !important;
    transition: transform 0.5s ease, opacity 0.5s ease !important;
    opacity: 1 !important;
    transform: scale(0.7) !important;
}

/* Logo tengah (aktif) lebih besar */
#logo-carousel-free-226 .swiper-slide-active .sp-lc-logo {
    transform: scale(1) !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

/* Slide samping sebelum & sesudah */
#logo-carousel-free-226 .swiper-slide-prev .sp-lc-logo,
#logo-carousel-free-226 .swiper-slide-next .sp-lc-logo {
    transform: scale(0.85) !important;
    opacity: 1 !important;
    z-index: 5 !important;
}

/* Slide kedua dari tengah (lebih kecil) */
#logo-carousel-free-226 .swiper-slide-prev-prev .sp-lc-logo,
#logo-carousel-free-226 .swiper-slide-next-next .sp-lc-logo {
    transform: scale(0.75) !important;
    opacity: 1 !important;
    z-index: 1 !important;
}


@media (max-width: 767px) {

    /* container jadi grid */
    .video-carousel {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 20px !important; /* hilangkan padding carousel */
    }
   
}


.pont-sj {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    cursor: pointer;
    overflow: hidden;
    padding: 20px 0;
    transition: all 0.4s cubic-bezier(.4,0,.2,1);
}

/* TITLE */
.pont-sj h4 {
    margin: 0;
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}

/* DESKRIPSI */
.pont-sj p {
    max-height: 0;
    opacity: 0;
    margin: 10px 0 0 0;
    transition: all 0.4s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}

/* HOVER */
.pont-sj:hover h4 {
    transform: translateY(-10px);
}

.pont-sj:hover p {
    opacity: 1;
    max-height: 500px; /* cukup untuk teks panjang */
}