/* Hero (Lakbay-style: click cards below to change the HERO photo) */
/*
  HERO sizing
  - Fill the screen under the top navbar so there is no large white gap.
  - Keep the thumbnail cards visible without needing to scroll.
*/
:root{ --ru-nav-h: 92px; }

.ru-hero{
position:relative;
isolation:isolate;
/*
  ru-topbar is FIXED (removed from normal flow).
  If we subtract the nav height here, the next section peeks through as a
  visible white strip at the bottom.
*/
height: 100vh;
height: 100svh;
min-height: 560px;
padding:24px 0 120px; /* leave space for thumb rail */
overflow:hidden;
border-radius:0;
background:#081a3a;
}

/* Single background (NO stitching) — we expand to cover the hero */
.ru-hero-bg{
position:absolute; inset:0;
background-color:#07162f;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
transform:scale(1.02);
}

/* Overlay for readability */
.ru-hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 32%, rgba(37,99,235,.30), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.56), rgba(2,6,23,.62));
  z-index:1;

  pointer-events: none;
}

.ru-hero-wrap{
  position: relative;
  z-index:2;
  height:auto;
  min-height: 520px;
  /* account for the fixed topbar since home body has no padding-top */
  padding: calc(var(--ru-nav-h) + 18px) 48px 32px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* HERO text box — more transparent + cleaner */
.ru-hero-main{
max-width:680px;
padding:26px 26px;
background:rgba(10,18,40,.28); /* readable */
border:1px solid rgba(255,255,255,.18);
border-radius:22px;
box-shadow:0 14px 40px rgba(0,0,0,.22);
backdrop-filter:none;

  pointer-events: none;
}

/* Mobile: the hero contains the login card, so it must be clickable */
@media (max-width: 767.98px){
  .ru-hero-main{ pointer-events: auto; }
}

.ru-hero-loc{
  font-weight: 800;
  letter-spacing: .2px;
  opacity: .92;
  margin-bottom: 10px;
  color: rgba(255,255,255,.92);
  font-size: .95rem;
}

/* Portal services preview (cards) */
.portal-service-card{height:100%;}
.portal-service-card .svc-media{display:flex; align-items:flex-start; gap:14px;}
.portal-service-card .svc-thumb{
  width:84px; height:84px; flex:0 0 84px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  background:#f8fafc;
}
.portal-service-card .svc-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.portal-service-card .svc-title{font-weight:800; margin:0; line-height:1.15;}
.portal-service-card .svc-sub{color:#64748b; font-weight:600; font-size:.95rem;}
.portal-service-card .svc-desc{margin:10px 0 0; color:#334155; font-size:.95rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.portal-service-card .svc-meta{margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.portal-service-card .svc-rating{font-weight:800; color:#0f172a;}
.portal-service-card .svc-rating small{font-weight:700; color:#64748b;}
.portal-service-card .svc-feedback{margin-top:10px; padding-top:10px; border-top:1px solid rgba(15,23,42,.08); color:#475569; font-size:.92rem;}
.portal-service-card .svc-feedback ul{margin:0; padding-left:18px;}
.portal-service-card .svc-feedback li{margin:4px 0;}

@media (max-width: 576px){
  .portal-service-card .svc-thumb{width:76px; height:76px; flex-basis:76px;}
}
.ru-hero-title{
  color: #fff;
  font-weight: 900;
  font-size: clamp(1.85rem, 4.1vw, 3.05rem);
  line-height: 1.02;
  margin: 0 0 10px 0;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.ru-hero-desc{
  margin: 0 0 18px 0;
  color: rgba(255,255,255,.92);
  font-size: .98rem;
  line-height: 1.6;
  max-width: 60ch;
}
.ru-hero-actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;

  pointer-events: auto;
}

/* Slightly smaller hero buttons so the background photo is more visible */
.ru-hero-actions .btn{
  padding: .45rem .9rem;
  font-size: .92rem;
}

/* Cards BELOW the hero (like your reference) */
 .ru-hero-thumbs{
  position: absolute;
  right: 0;
  bottom: 18px;
  width: 680px;
  padding-left: 18px;
  overflow: hidden;
  z-index: 8;
  pointer-events: auto;
}

/* inner track (we rotate items in JS to "slide" without blur) */
.ru-thumb-track{
  display: flex;
  gap: 16px;
  align-items: stretch;
  justify-content: flex-start;
  will-change: transform;
}

/* No fade/blur at the end — we only CLIP extra cards (like your reference) */
.ru-thumb{
  flex: 0 0 auto;
  width: 260px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(12, 18, 32, .18);
  overflow: hidden;
  box-shadow: 0 16px 30px rgba(0,0,0,.35);
  color: #fff;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  pointer-events: auto;
}
.ru-thumb:hover{ transform: translateY(-2px); background: rgba(255,255,255,.14); }
.ru-thumb:active{ transform: translateY(0); }
.ru-thumb.is-active{
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.18);
}
.ru-thumb .thumb-img{
width:100%;
height:116px;
border-radius:16px;
overflow:hidden;
border:1px solid rgba(255,255,255,.14);
background:#0b1224;
}
.ru-thumb img{
width:100%;
height:108px;
object-fit:cover;
display:block;
}
.thumb-meta{ min-width:0; }
.thumb-loc{
font-size:.80rem;
font-weight:800;
	color:#fff;
opacity:.92;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.thumb-title{
margin-top:2px;
font-weight:900;
	color:#fff;
line-height:1.15;
font-size:1rem;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}

/* Remove any text stroke */
.ru-hero, .ru-hero *{ -webkit-text-stroke: 0 !important; }

/* Responsive */
@media (max-width: 991px){
  .ru-hero{ min-height: 540px; height:auto; }
  .ru-hero-wrap{ min-height: 540px; height:auto; padding: calc(var(--ru-nav-h) + 18px) 18px 28px; align-items:flex-start; }
  .ru-hero-thumbs{ left: 0; right: 0; width:auto; padding: 0 14px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ru-thumb{ flex-basis: 240px; max-width: 240px; }
  .ru-thumb .thumb-img{ height: 120px; }
}
@media (max-width: 768px){
  .ru-hero{ min-height: 520px; height:auto; }
  .ru-hero-wrap{ min-height: 520px; height:auto; padding: calc(var(--ru-nav-h) + 8px) 14px 24px; align-items:flex-start; }
  .ru-hero-main{ padding: 22px 18px; }
  .ru-thumb{ flex-basis: 230px; max-width: 230px; }
  .ru-thumb .thumb-img{ height: 112px; }
}
/* Feature cards */
.feature-grid .ru-card{
  padding: 18px;
  height: 100%;
}
.feature-grid .title{
  font-weight:800;
  color: var(--ru-blue-dark);
  font-size: 1.02rem;
}
.feature-grid .desc{color:#64748b; font-size:.93rem;}

/* Mobile topbar */
@media (max-width: 768px){
  .ru-topbar-inner{flex-direction:column; align-items:stretch;}
  .ru-actions{width:100%; display:flex; gap:.5rem; flex-wrap:wrap;}
  .ru-actions .btn{flex: 1 1 calc(50% - .5rem);}
  .ru-nav{width:100%; display:flex; gap:.45rem; flex-wrap:wrap;}
  .ru-nav a{flex:1 1 calc(50% - .45rem); text-align:center; border:1px solid var(--ru-border); background:#fff;}
}


/* Extra: make text easier on eyes */
/* Scroll-reveal (visible by default to guarantee contents load) */
.reveal{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
.reveal.is-visible,
.reveal.active{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Baliwag photo scrolly section */
.ru-spots{
  padding: 72px 0;
  background: linear-gradient(180deg, rgba(37,99,235,.06), rgba(15,23,42,0));
  border-top: 1px solid var(--ru-border);
}
.ru-spot-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.ru-spot-card{
  grid-column: span 12;
  display:flex;
  gap: 18px;
  align-items: stretch;
  border: 1px solid var(--ru-border);
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  text-align:left;
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
}
.ru-spot-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(2,6,23,.09);
}
.ru-spot-card:active{ transform: translateY(0); }
.ru-spot-card .img{
  flex: 0 0 42%;
  border-radius: 14px;
  overflow:hidden;
  background:#0f172a;
  min-height: 170px;
}
.ru-spot-card img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.ru-spot-card .meta{ flex: 1 1 auto; padding: 6px 8px; }
.ru-spot-card .kicker{
  display:inline-flex;
  gap:.45rem;
  align-items:center;
  font-weight:800;
  color: var(--ru-blue-dark);
  font-size: .9rem;
}
.ru-spot-card .title{
  font-weight: 900;
  font-size: 1.07rem;
  margin-top: 6px;
  margin-bottom: 6px;
  color:#0f172a;
}
.ru-spot-card .desc{
  color:#64748b;
  margin:0;
  line-height: 1.55;
  font-size: .93rem;
}
.ru-spot-card .hint{
  margin-top: 10px;
  color:#94a3b8;
  font-size: .86rem;
  font-weight: 700;
}
.ru-spot-card.alt{ flex-direction: row-reverse; }

@media (min-width: 768px){
  .ru-spot-card{ padding: 16px; }
  .ru-spot-card .img{ flex-basis: 40%; min-height: 210px; }
}
@media (min-width: 992px){
  .ru-spot-card{ grid-column: span 6; }
}




/* Responsive hero thumbs */
@media (max-width: 992px){
  .ru-hero{ min-height: 760px; height: auto; }
  .ru-hero-wrap{ min-height: 760px; height: auto; padding: 120px 0 44px; }
  .ru-hero-thumbs{
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 16px;
  }
}
@media (max-width: 576px){
  .ru-thumb{ flex-basis: 240px; max-width: 240px; }
  .ru-hero-main{ padding: 22px 18px; }
}

/* Portal services preview (cards) */
.portal-service-card{height:100%;}
.portal-service-card .svc-media{display:flex; align-items:flex-start; gap:14px;}
.portal-service-card .svc-thumb{
  width:84px;
  height:84px;
  flex:0 0 84px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  background:#f8fafc;
}
.portal-service-card .svc-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.portal-service-card .svc-title{font-weight:800; color:#0f172a; line-height:1.2; margin:0;}
.portal-service-card .svc-sub{color:#64748b; margin:2px 0 0; font-size:.92rem;}
.portal-service-card .svc-desc{color:#334155; margin:12px 0 0; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height: 4.65em;}
.portal-service-card .svc-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px;}
.portal-service-card .svc-rating{display:inline-flex; align-items:center; gap:6px; font-weight:800; color:#0f172a;}
.portal-service-card .svc-rating .star{color:#f59e0b;}
.portal-service-card .svc-count{color:#64748b; font-weight:700; font-size:.9rem;}
.portal-service-card .svc-feedback{margin-top:12px; padding-top:12px; border-top:1px solid rgba(15,23,42,.08);}
.portal-service-card .svc-feedback h6{font-size:.85rem; letter-spacing:.02em; text-transform:uppercase; color:#64748b; margin:0 0 8px; font-weight:900;}
.portal-service-card .svc-feedback .fb-item{margin:0 0 8px; color:#334155; font-size:.95rem; line-height:1.45;}
.portal-service-card .svc-feedback .fb-item:last-child{margin-bottom:0;}
@media (max-width: 576px){
  .portal-service-card .svc-thumb{width:72px;height:72px;flex-basis:72px;border-radius:12px;}
  .portal-service-card .svc-desc{-webkit-line-clamp:2; min-height: 3.1em;}
}


/* Mobile hero login card (Portal) */
.ru-hero-login{ width:100%; }
.ru-login-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(15,23,42,.18);
  padding: 18px 16px;
  max-width: 380px;
  margin: 0 auto;
}
.ru-login-logo{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ru-login-logo img{ width: 42px; height: 42px; object-fit: contain; }
.ru-login-brand{
  font-weight: 900;
  letter-spacing: .14em;
  font-size: 18px;
  color: #0f172a;
}
.ru-forgot{
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  color: #2563eb;
}
.ru-forgot:hover{ text-decoration: underline; }
.ru-eye-btn{
  position:absolute;
  top:50%;
  right:10px;
  transform: translateY(-50%);
  border:0;
  background: transparent;
  padding: 6px;
  border-radius: 999px;
  line-height: 1;
}
.ru-eye-btn:active{ transform: translateY(-50%) scale(.98); }

@media (max-width: 768px){
  .ru-hero-wrap{ align-items: center; }
  .ru-hero-main{
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-width: 460px;
  }
}

/* Portal (mobile) – lift and slightly enlarge the login card */
@media (max-width: 576px){
  :root{ --ru-nav-h: 68px; }
  /* Make the hero more compact on phones (reduce huge empty gap below the login card) */
  .ru-hero{
    min-height: 450px;
    padding-bottom: 88px; /* still leaves room for the thumb rail */
  }
  .ru-hero-wrap{
    /* reduce the big empty top space and keep the card higher */
    padding-top: calc(var(--ru-nav-h) - 6px);
    padding-bottom: 14px;
    min-height: 450px;
    justify-content: flex-start;
  }
  .ru-hero-login{ margin-top: 2px; }
  .ru-login-card{
    /* Wider card on mobile (more edge-to-edge) */
    width: calc(100vw - 16px);
    max-width: 520px;
    padding: 26px 20px; /* slightly larger card */
    border-radius: 26px;
  }
  .ru-login-logo{ width: 62px; height: 62px; }
  .ru-login-logo img{ width: 48px; height: 48px; }
  .ru-login-brand{ font-size: 20px; }

  /* pull the thumbnail rail a bit closer so it doesn't feel too far */
  .ru-hero-thumbs{ bottom: 12px; }
}


/* ===== Portal mobile section width cleanup ===== */
@media (max-width: 767.98px){
  .ru-mobile-topbar .container-fluid,
  .ru-desktop-topbar .container-fluid,
  .ru-hero-wrap,
  #services .container,
  #faqs .container,
  #about .container,
  #contact .container,
  #spots .container,
  #features .container,
  #how .container{
    max-width:none !important;
    padding-left:.6rem !important;
    padding-right:.6rem !important;
  }

  #services .row[style*="max-width"],
  #faqs .row[style*="max-width"],
  #about .row[style*="max-width"],
  #contact .row[style*="max-width"]{
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  #services .ru-card,
  #faqs .ru-card,
  #about .ru-card,
  #contact .ru-card{
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

@media (max-width: 575.98px){
  .ru-mobile-topbar .container-fluid,
  .ru-desktop-topbar .container-fluid,
  .ru-hero-wrap,
  #services .container,
  #faqs .container,
  #about .container,
  #contact .container,
  #spots .container,
  #features .container,
  #how .container{
    padding-left:.45rem !important;
    padding-right:.45rem !important;
  }

  #services .row,
  #faqs .row,
  #about .row,
  #contact .row{
    --bs-gutter-x: .85rem;
  }
}

/* ===== Public About / Contact cleanup ===== */
#about,
#contact,
#about *,
#contact *{
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  font-synthesis:none !important;
  letter-spacing:0 !important;
}

#about .ru-section-title,
#contact .ru-section-title{
  color:var(--ru-text-primary, #0f172a) !important;
  font-weight:700 !important;
  font-size:clamp(1.55rem, 2.5vw, 2rem) !important;
  line-height:1.2 !important;
  margin-bottom:.75rem !important;
}

#about .ru-section-sub,
#contact .ru-section-sub{
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  color:var(--ru-text-secondary, #475569) !important;
  font-weight:400 !important;
  font-size:1rem !important;
  line-height:1.65 !important;
}

#about .ru-card,
#contact .ru-card{
  height:100% !important;
  border:1px solid var(--ru-card-border, rgba(226,232,240,.95)) !important;
  border-radius:16px !important;
  background:var(--ru-contact-card, #fff) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.045) !important;
}

#about .ru-card .fw-bold,
#contact .ru-card .fw-bold{
  display:flex !important;
  align-items:center !important;
  gap:.45rem !important;
  color:var(--ru-text-primary, #0f172a) !important;
  font-weight:600 !important;
  font-size:1rem !important;
  line-height:1.35 !important;
}

#about .ru-card .bi,
#contact .ru-card .bi{
  color:#22c55e !important;
}

#about .ru-card .text-muted,
#contact .ru-card .text-muted,
#contact .ru-card ul.text-muted,
#contact footer .text-muted{
  color:var(--ru-text-secondary, #334155) !important;
  font-weight:400 !important;
  font-size:.96rem !important;
  line-height:1.65 !important;
}

#contact .ru-card ul{
  padding-left:1.15rem !important;
}

#contact .ru-card li{
  margin:.28rem 0 !important;
}

#contact .ru-card li::marker{
  color:#22c55e !important;
}

#contact footer .fw-bold{
  color:var(--ru-text-primary, #0f172a) !important;
  font-weight:600 !important;
}

@media (max-width: 767.98px){
  #about,
  #contact{
    background:var(--ru-bg-primary, #ffffff) !important;
  }

  #about .ru-section-sub,
  #contact .ru-section-sub{
    font-size:.94rem !important;
    line-height:1.55 !important;
  }

  #about .ru-card,
  #contact .ru-card{
    border-radius:14px !important;
    box-shadow:none !important;
  }
}