/* Symmex medical-style clean UI */

:root{
  --symmex-blue:#0d6efd;
  --symmex-ink:#0b1b2b;
  --symmex-muted:#5b6b7b;
  --symmex-purple:#6f42c1;
  --symmex-red:#dc3545;
  --symmex-soft:#f3f7ff;
  --symmex-ring:rgba(111,66,193,.18);
}

body{
  color:var(--symmex-ink);
  background:#fff;
}

.symeex-nav{
  border-bottom:1px solid rgba(0,0,0,.03);
}

.symmex-nav{
  border-bottom:1px solid rgba(0,0,0,.03);
}

/* Nav active indicator */
#mainNavbar{position:relative}
.nav-indicator{
  position:absolute;
  bottom:0;
  left:0;
  height:3px;
  width:0;
  background:var(--symmex-blue);
  border-radius:4px;
  z-index:3;
  transition:left .28s cubic-bezier(.22,.9,.3,1), width .28s cubic-bezier(.22,.9,.3,1);
}
.navbar-nav .nav-link.active{ color:var(--symmex-blue) !important }


.symeex-logo i{color:var(--symmex-blue)}

.symmex-hero{
  padding:60px 0 20px;
}

.symmex-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(13,110,253,.08);
  color:#0b3a6a;
  font-weight:600;
}

.symmex-hero-title{
  font-size:clamp(1.6rem, 2.8vw, 2.6rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin-top:14px;
}

.symmex-hero-desc{
  font-size:1.05rem;
  color:var(--symmex-muted);
}

.symmex-btn-primary{
  background:linear-gradient(135deg, #0d6efd 0%, #3b82f6 100%);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:12px 18px;
  font-weight:700;
}

.symmex-btn-primary:hover{filter:brightness(.98)}

.symmex-btn-outline{
  background:#fff;
  color:var(--symmex-blue);
  border:1px solid rgba(13,110,253,.35);
  border-radius:12px;
  padding:12px 18px;
  font-weight:700;
}

.symmex-hero-stats .symmex-stat{
  background:#fff;
  border:1px solid rgba(13,110,253,.12);
  border-radius:14px;
  padding:14px 16px;
  min-width:180px;
}

.symmex-stat-num{font-weight:800}
.symmex-stat-label{font-size:.9rem; color:var(--symmex-muted)}

.symmex-hero-illustration{
  position:relative;
  max-width:520px;
  margin:0 auto;
}

.symmex-illus-card{
  border-radius:24px;
  overflow:hidden;
  background:var(--symmex-soft);
  border:1px solid rgba(0,0,0,.05);
}

.symmex-illus-ring{
  position:absolute;
  inset:auto;
  width:160px;height:160px;
  border-radius:50%;
  border:2px solid var(--symmex-ring);
  filter:blur(.2px);
}

.symmex-illus-ring-1{right:-10px; top:20px;}
.symmex-illus-ring-2{left:-18px; bottom:20px;}

.symmex-section{padding:64px 0;}
.symmex-section-title h2{font-weight:800;}
.symmex-section-kicker{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(13,110,253,.08);
  color:#0b3a6a;
  font-weight:700;
  font-size:.9rem;
}

/* Breadcrumb (lebih rapi untuk halaman kategori produk) */
.symmex-breadcrumb-wrap{
  background:rgba(13,110,253,.05);
  border:1px solid rgba(13,110,253,.12);
  border-radius:16px;
  padding:10px 14px;
}

.symmex-breadcrumb .breadcrumb{
  margin:0;
  background:transparent;
  padding:0;
  font-weight:600;
}

.symmex-breadcrumb .breadcrumb-link{
  color:var(--symmex-blue);
  text-decoration:none;
}

.symmex-breadcrumb .breadcrumb-link:hover{
  text-decoration:underline;
}

.symmex-breadcrumb .breadcrumb-sep{
  color:rgba(11,27,43,.35);
  font-weight:800;
  padding:0 10px;
}

.symmex-breadcrumb .breadcrumb-item.active{
  color:var(--symmex-ink);
}


.symmex-feature{
  background:#fff;
  border:1px solid rgba(0,0,0,.05);
  border-radius:16px;
  padding:16px;
  display:flex;
  gap:14px;
}

.symmex-icon{font-size:1.4rem; color:var(--symmex-blue)}
.symmex-feature-title{font-weight:800; margin-bottom:4px;}
.symmex-feature-desc{color:var(--symmex-muted); font-size:.95rem}

.symmex-bg-soft{
  background:linear-gradient(180deg, rgba(13,110,253,.06) 0%, rgba(111,66,193,.04) 100%);
}

#categories{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(244,248,255,.96) 100%);
}

#categories::before,
#categories::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#categories::before{
  background:
    radial-gradient(circle at 10% 20%, rgba(56, 147, 255, .14), transparent 24%),
    radial-gradient(circle at 85% 25%, rgba(168, 85, 247, .12), transparent 20%),
    radial-gradient(circle at 30% 80%, rgba(255, 205, 65, .10), transparent 18%);
}

#categories::after{
  background:
    radial-gradient(circle at 20% 60%, rgba(38, 198, 218, .08), transparent 20%),
    radial-gradient(circle at 78% 75%, rgba(220, 53, 69, .06), transparent 18%),
    radial-gradient(circle at 65% 35%, rgba(102, 126, 234, .08), transparent 16%);
  mix-blend-mode: screen;
}

#categories .container{
  position: relative;
  z-index: 1;
}

#categories .symmex-cat{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255, .22), rgba(255,255,255, .14));
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 28px 70px rgba(13,110,253,.08);
  border-radius: 26px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  overflow: hidden;
}

#categories .symmex-cat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(255,255,255,.35), transparent 35%),
              radial-gradient(circle at bottom right, rgba(255,255,255,.18), transparent 26%);
  pointer-events: none;
}

#categories .symmex-cat:hover{
  transform: translateY(-4px);
  box-shadow: 0 32px 80px rgba(13,110,253,.15);
  background: linear-gradient(180deg, rgba(255,255,255, .30), rgba(255,255,255, .18));
  border-color: rgba(255,255,255,.40);
}

#categories .symmex-cat-icon{
  background: rgba(13,110,253,.10);
  box-shadow: inset 0 0 0 1px rgba(13,110,253,.12);
}

#categories .symmex-cat-title,
#categories .symmex-cat-desc{
  color: rgba(11,27,43,.92);
}

#categories .symmex-cat-btn{
  margin-top: 16px;
  font-weight: 800;
  color: var(--symmex-blue);
}

#productsPage {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(244,248,255,.96) 100%);
}

#productsPage::before,
#productsPage::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

#productsPage::before {
  width: 320px;
  height: 320px;
  top: -80px;
  right: -20px;
  background: rgba(13,110,253,.04);
}

#productsPage::after {
  width: 220px;
  height: 220px;
  bottom: 20px;
  left: -40px;
  background: rgba(168,85,247,.06);
}

#productsPage .container {
  position: relative;
  z-index: 1;
}

#productsPage .row.g-4 {
  position: relative;
  z-index: 1;
}

#productsPage .row.g-4::before,
#productsPage .row.g-4::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
}

#productsPage .row.g-4::before {
  width: 240px;
  height: 240px;
  top: 20px;
  left: -40px;
  background: rgba(13,110,253,.05);
}

#productsPage .row.g-4::after {
  width: 180px;
  height: 180px;
  top: 200px;
  right: -30px;
  background: rgba(168,85,247,.04);
}

#productsPage .symmex-cat {
  position: relative;
  background: rgba(255,255,255,.05);
  border: 1px solid #fafafa;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 28px 60px rgba(13,110,253,.06);
  border-radius: 24px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

#productsPage .symmex-cat::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 30%);
  pointer-events: none;
}

#productsPage .symmex-cat:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 72px rgba(13,110,253,.14);
  background: rgba(255,255,255,.08);
}

#productsPage .product-custom-card {
  position: relative;
  background: rgba(255,255,255,.05);
  border: 1px solid #fafafa;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 28px 65px rgba(13,110,253,.08);
  border-radius: 28px;
  overflow: hidden;
}

#productsPage .product-custom-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  pointer-events: none;
}

#productsPage .product-custom-card::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -40px;
  bottom: -30px;
  background: rgba(13,110,253,.06);
  border-radius: 50%;
  pointer-events: none;
}

#productsPage .product-custom-card > .col-lg-8,
#productsPage .product-custom-card > .col-lg-4 {
  position: relative;
  z-index: 1;
}

#productsPage .product-custom-card > .col-lg-8,
#productsPage .product-custom-card > .col-lg-4 {
  position: relative;
  z-index: 1;
}

#productsPage .symmex-cat-btn {
  color: var(--symmex-blue);
}

#productShowAll {
  color: var(--symmex-blue);
  background: transparent;
  border-color: var(--symmex-blue);
}

a#productShowAll:hover,
a#productShowAll:focus {
  color: #0b1b2b !important;
  background: rgba(13,110,253,.18);
  border-color: var(--symmex-blue) !important;
}

.category-nav-card {
  display: block;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: #f8f9fb;
  color: #0b1b2b;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.category-nav-card:hover {
  transform: translateY(-1px);
}

.category-nav-card.active {
  background: rgba(13,110,253,.10);
  border-color: rgba(13,110,253,.25);
}

.category-nav-card.inactive {
  background: rgba(247,248,250,.95);
  border-color: rgba(0,0,0,.06);
  color: rgba(11,27,43,.76);
}

.category-nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.category-nav-card.active .category-nav-dot {
  background: var(--symmex-blue);
}

.category-nav-card.inactive .category-nav-dot {
  background: rgba(108,117,125,.45);
}

.symeex-cat{text-decoration:none; color:inherit;}

.symmex-cat{
  text-decoration:none;
  display:block;
  height:100%;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.05);
  background:#fff;
  transition:transform .15s ease, box-shadow .15s ease;
}

.symmex-cat:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(13,110,253,.12);
}

.symmex-cat-icon{
  width:56px;height:56px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(13,110,253,.08);
  color:var(--symmex-blue);
  margin-bottom:12px;
}

.symmex-cat-title{font-weight:900; margin-bottom:8px;}
.symmex-cat-desc{color:var(--symmex-muted); min-height:44px;}
.symmex-cat-btn{margin-top:16px; font-weight:800; color:var(--symmex-blue)}

.symmex-product-card{overflow:hidden; border-radius:18px; transition:transform .18s ease, box-shadow .18s ease;}
.symmex-product-card:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(13,110,253,.12);}

/* Make only the View Detail button align across cards */
.symmex-product-card .card-body{min-height: 230px; display:flex; flex-direction:column;}
.symmex-product-card .d-flex.flex-wrap.mt-auto{margin-top:auto !important;}
.symmex-product-card .d-grid.mt-auto{margin-top:auto !important;}

.symmex-product-image-wrap{position:relative; width:100%; aspect-ratio:4 / 3; display:flex; align-items:center; justify-content:center; overflow:hidden; background:rgba(243,247,255,.7);}

.symmex-product-image{max-width:100%; max-height:100%; object-fit:contain; object-position:center center; display:block; transition:transform .3s ease;}
.symmex-product-image:hover{transform:scale(1.02);}

.symmex-product-overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s ease; background:rgba(0,0,0,.35);}
.symmex-product-image-wrap:hover .symmex-product-overlay{opacity:1;}
.symmex-product-overlay .btn{opacity:0.95;}

.symmex-contact-card{
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
  border-radius:18px;
  padding:18px;
}

.symmex-contact-row{
  display:flex;
  gap:12px;
  margin-bottom:14px;
  align-items:flex-start;
}

.symmex-contact-row:last-child{margin-bottom:0}

.symmex-contact-icon{font-size:1.1rem; margin-top:2px;}
.symmex-contact-link{color:var(--symmex-blue); text-decoration:none; font-weight:700;}
.symmex-contact-link:hover{text-decoration:underline}

#productSearchInput {
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.12);
}

.input-group.has-clear #productSearchInput {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#productSearchClear {
  border: 1px solid rgba(0,0,0,.12);
  border-left: 0;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  background: #fff;
  color: var(--symmex-ink);
}

#productSearchClear:hover,
#productSearchClear:focus {
  background: #f8f9fa;
  color: var(--symmex-ink);
}
/* Modal and gallery refinements */
.modal {
  overflow: visible !important;
  padding: 0 !important;
  --bs-gutter-x: 0rem !important;
  --bs-gutter-y: 0rem !important;
}
.modal-dialog {
  margin: 0 auto !important;
}
.modal-dialog.modal-dialog-centered {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.modal-dialog.modal-dialog-centered .modal-content {
  margin: 0 auto;
  border-radius: 1.25rem;
  overflow: visible;
  max-height: calc(100vh - 2rem);
  background-color: #ffffff !important;
}
.modal .modal-row-no-gutter,
.modal.show .modal-dialog .modal-content .modal-body .modal-row-no-gutter,
.modal .row.g-4,
.modal .row.gx-4,
.modal .row.gy-4 {
  --bs-gutter-x: 0rem !important;
  --bs-gutter-y: 0rem !important;
  margin: 0 !important;
}
.modal .modal-row-no-gutter > *,
.modal.show .modal-dialog .modal-content .modal-body .modal-row-no-gutter > *,
.modal .row.g-4 > *,
.modal .row.gx-4 > *,
.modal .row.gy-4 > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.modal-body {
  overflow: visible !important;
  padding: 1.5rem !important;
}
.modal-content.symmex-modal .product-modal-right {
  background: rgba(248,249,250,.9);
  border-radius: 1.25rem;
}
.modal-content.symmex-modal .product-modal-meta {
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.06);
}
.modal-content.symmex-modal .product-modal-meta ul li {
  margin-bottom: .75rem;
}
.modal-content.symmex-modal .product-modal-meta ul li strong {
  display: inline-block;
  min-width: 110px;
  color: #111827;
}
.modal-content.symmex-modal .product-modal-right .btn {
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1rem;
}
.modal-content.symmex-modal .product-modal-right .btn i {
  line-height: 1;
}
.gallery-image-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff !important;
  padding-bottom: 2.4rem;
}
.gallery-image-container .gallery-image {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 1rem;
  background-color: #ffffff !important;
  box-shadow: none !important;
}
.gallery-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(13, 110, 253, .15);
  background: rgba(255, 255, 255, .95);
  color: var(--symmex-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  cursor: pointer;
}
.gallery-control:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .14);
}
.gallery-prev { left: 1rem; }
.gallery-next { right: 1rem; }
.gallery-control:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.gallery-counter {
  position: absolute;
  bottom: -2.2rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--symmex-muted);
  font-size: .95rem;
  background: rgba(255,255,255,.92);
  padding: .35rem .85rem;
  border-radius: 999px;
  box-shadow: 0 12px 24px rgba(0,0,0,.09);
}
@media (max-width: 991.98px) {
  .modal-dialog.modal-dialog-centered {
    min-height: auto;
    align-items: flex-start;
    padding: 1rem 0;
  }
  .modal-content {
    max-height: calc(100vh - 2rem);
    margin: 0 1rem;
  }
  .modal-body {
    padding: 1rem !important;
    max-height: calc(100vh - 10rem);
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .gallery-image-container .gallery-image {
    max-height: 42vh;
  }
}
@media (max-width: 768px) {
  .modal-dialog-centered {
    min-height: calc(100vh - 1rem);
  }
  .gallery-control {
    width: 38px;
    height: 38px;
  }
  .gallery-prev { left: .5rem; }
  .gallery-next { right: .5rem; }
}

.symmex-link-hover-blue{color:#6c757d; text-decoration:none; font-weight:700;}
.symmex-link-hover-blue:hover{color:var(--symmex-blue); text-decoration:underline;}

.symmex-form-card{
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
  border-radius:18px;
  padding:22px;
}

.symmex-footer{background:#071a2a; color:#fff;}
.symmex-footer-link{color:rgba(255,255,255,.85); text-decoration:none;}
.symmex-footer-link:hover{color:#fff; text-decoration:underline;}
.symmex-footer-card{background:rgba(255,255,255,.06); border-radius:16px;}
.symmex-footer-hr{border-color:rgba(255,255,255,.1)}

.symmex-main{min-height:calc(100vh - 200px)}

/* Offset untuk header sticky agar tidak terpotong saat scroll (terutama beranda di smartphone) */
@media (max-width: 434px){
  /* Breadcrumb lebih kecil hanya untuk mobile <= 414px */
  .symmex-breadcrumb-wrap{ padding:6px 10px; border-radius:12px; }
  .symmex-breadcrumb .breadcrumb{ font-size:.72rem; }
  .symmex-breadcrumb .breadcrumb-link{ font-size:.72rem; }
  .symmex-breadcrumb .breadcrumb-sep{ padding:0 6px; }

  /* Home: perkecil padding & tipografi (mobile sangat kecil <= 414px) */
  .symmex-hero{ padding:20px 0 10px; }
  .symmex-hero-badge{ padding:6px 8px; font-size:.82rem; }
  .symmex-hero-title{ font-size:1.28rem; margin-top:8px; }
  .symmex-hero-desc{ font-size:.86rem; }

  .symmex-section{ padding:34px 0; }
  .symmex-section-kicker{ font-size:.76rem; padding:4px 8px; }

  .symmex-feature{ padding:12px; border-radius:13px; }
  .symmex-feature-title{ font-size:.98rem; }
  .symmex-feature-desc{ font-size:.84rem; }

  .symmex-cat{ padding:12px; border-radius:15px; }
  .symmex-cat-icon{ width:44px;height:44px; border-radius:11px; margin-bottom:8px; }
  .symmex-cat-title{ font-size:.98rem; margin-bottom:5px; }
  .symmex-cat-desc{ min-height:28px; font-size:.88rem; }
  .symmex-cat-btn{ margin-top:10px; font-size:.90rem; }

  .symmex-btn-primary{ padding:9px 12px; border-radius:10px; font-weight:800; }
  .symmex-btn-outline{ padding:9px 12px; border-radius:10px; font-weight:800; }

  /* Contact buttons */
  .symmex-btn-contact-outline{ padding:9px 10px; border-radius:12px; }
  .symmex-btn-contact-outline .fw-semibold{ font-size:.86rem !important; }
  .symmex-btn-contact-outline .small{ font-size:.68rem !important; }


  /* Maps */
  .symmex-map-frame{ min-height:260px !important; }
}


@media (max-width: 576px){
  /* khusus mobile: jangan menambah padding global yang berpotensi bikin gap */
  main{padding-top:0;}

  /* hanya untuk offset saat viewport “dipusatkan” ke section kontak */
  #contact{scroll-margin-top:0;}
}






.form-control{border-radius:10px; border:1px solid rgba(0,0,0,.12); padding:10px 14px;}
.form-control:focus{border-color:var(--symmex-blue); box-shadow:0 0 0 .25rem rgba(13,110,253,.25);}
.form-label{font-weight:600; font-size:.95rem; margin-bottom:6px;}

.symmex-accent-purple{color:var(--symmex-purple)}
.symmex-accent-red{color:var(--symmex-red)}

.symmex-dropdown .dropdown-menu{border-radius:14px; border:0; box-shadow:0 12px 30px rgba(0,0,0,.12)}

.navbar-brand .symmex-logo{font-weight:800; font-size:1.2rem; display:flex; align-items:center; gap:8px;}
.navbar-brand .symmex-logo i{color:var(--symmex-blue); font-size:1.4rem;}

/* Contact Buttons - Stroke Style */
.symmex-btn-contact-outline{

  border:2px solid;
  border-radius:14px;
  font-weight:700;
  padding:12px 18px;
  transition:all .3s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.symmex-btn-contact-green{
  border-color:#28a745;
  color:#28a745;
  background:#fff;
}

.symmex-btn-contact-green:hover{
  background:#28a745;
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(40,167,69,.25);
}

.symmex-btn-contact-blue{
  border-color:var(--symmex-blue);
  color:var(--symmex-blue);
  background:#fff;
}

.symmex-btn-contact-blue:hover{
  background:var(--symmex-blue);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(13,110,253,.25);
}

.symmex-btn-contact-red{
  border-color:#D22B50;
  color:#D22B50;
  background:#fff;
}

.symmex-btn-contact-red:hover{
  background:#D22B50;
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(210,43,80,.25);
}

.symmex-btn-contact-outline .small{color:#6c757d;}
.symmex-btn-contact-outline:hover .small{color:#fff !important;}

/* Contact Info Card */
.symmex-contact-info-card{
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
  border-radius:18px;
  padding:22px;
}

.symmex-contact-link{color:var(--symmex-blue); text-decoration:none; font-weight:700;}
.symmex-contact-link:hover{text-decoration:underline}

@media (min-width: 992px){
  /* Hover timing to avoid dropdown flicker */
.symmex-dropdown > .dropdown-menu{
    display:block;
    opacity:0;
    visibility:hidden;
    transform:translateY(4px);

    /* Kurangi gap saat pindah hover agar tidak dianggap mouseout */
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    pointer-events:none;
    margin-top:0;
  }

  .symmex-dropdown:hover > .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);

    transition:opacity .35s ease, transform .35s ease, visibility 0s;
    pointer-events:auto;
  }

  /* Keep open while mouse inside submenu */
.symmex-dropdown > .dropdown-menu:hover{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }

  /* Force dropdown to stay on when hovering trigger or menu (no JS flicker) */
  .symmex-dropdown:hover > .dropdown-menu,
  .symmex-dropdown:focus-within > .dropdown-menu{
    display:block;
  }
}



@media (max-width: 991px){
  .symmex-hero{padding-top:24px}
}

/* Utility classes */
.section-padding { padding: 40px 0; }

/* Responsive text sizing */
@media (max-width: 576px) {
  .symmex-hero-title{font-size:1.4rem}
  .symmex-hero-desc{font-size:0.95rem}
  /* jangan hilangkan jarak antar section secara total; set margin/padding yang lebih aman untuk mobile */
  .symmex-section{padding:30px 0}



  /* Contact buttons (including WhatsApp) - reduce font size on smartphone */
  .symmex-btn-contact-outline .fw-semibold{
    font-size:0.9rem !important;
  }

  .symmex-btn-contact-outline .small{
    font-size:0.72rem !important;
  }

  .symmex-btn-contact-outline i.fab.fa-whatsapp{
    font-size:0.98rem !important;
  }

}