/*
Theme Name: SJP Theme
Theme URI: https://sinarjayapratama.com
Author: Sinar Jaya Pratama
Description: Custom one-page theme for Sinar Jaya Pratama heavy equipment & mobile crane rental.
Version: 1.0.0
Text Domain: sjp-theme
*/

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Barlow',system-ui,sans-serif;color:#0A2540;background:#F4F7FB;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Barlow Semi Condensed','Barlow',sans-serif;margin:0}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
@keyframes sjpFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sjpMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.sjp-placeholder{display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.sjp-placeholder span{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;padding:9px 14px;border-radius:999px}

.r-svc-card{transition:box-shadow .2s}
.r-svc-card:hover{box-shadow:0 16px 34px rgba(10,37,64,.1)}

@media (max-width:860px){
  .r-grid2{grid-template-columns:1fr !important}
  .r-grid3{grid-template-columns:1fr !important}
  .r-grid2v{grid-template-columns:1fr 1fr !important}
  .r-grid4{grid-template-columns:1fr 1fr !important}
  .r-gridF{grid-template-columns:1fr !important;gap:28px !important}
  .r-splitB{grid-template-columns:1fr !important}
  .r-statwrap{flex-wrap:wrap !important;gap:22px !important}
  .r-h1{font-size:33px !important;line-height:1.08 !important}
  .r-h2{font-size:29px !important}
  .r-heroA{padding:44px 20px 128px !important;gap:32px !important}
  .r-heroC{padding:56px 20px 128px !important}
  .r-panelB{padding:52px 26px 44px !important}
  .r-heroimg{height:220px !important}
  .r-imgB{min-height:240px !important}
  .r-aboutimg{height:230px !important;order:-1}
  .r-nav{gap:12px !important}
  .r-nav .navlink{display:none !important}
  .r-sec{padding-top:56px !important;padding-bottom:56px !important}
  .r-hide-sm{display:none !important}
}
@media (max-width:460px){
  .r-grid4{grid-template-columns:1fr !important}
  .r-grid2v{grid-template-columns:1fr !important}
  .r-h1{font-size:28px !important}
}