/* ===========================
   Gravengel – Professional Theme (rev12)
   =========================== */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');

:root{
  --maroon:#800000;
  --dark-maroon:#5b0000;
  --white:#ffffff;
  --text-dark:#333333;
  --hero-tint-1: rgba(128, 0, 0, 0.107);
  --hero-tint-2: rgba(91,0,0,.35);
  --hero-lift : rgba(255,255,255,.12);
}

/* Reset / Base */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  background:#fff;
  color:var(--text-dark);
  line-height:1.6;
  overflow-x:hidden;
}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}

/* ================= NAVBAR (Full-width) ================= */
.top-nav{
  background:transparent;
  padding:1rem 0;
  position:fixed; top:0; left:0; width:100%;
  z-index:1000;
  transition:background-color .4s ease, box-shadow .3s ease;
}
.top-nav.scrolled{
  background:linear-gradient(90deg, var(--dark-maroon), var(--maroon));
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.nav-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    max-width:1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.logo-container{display:flex;align-items:center;gap:12px;}
.top-nav .logo{height:50px;}
.site-title-nav{font-size:1.15rem;font-weight:700;color:#fff;white-space:nowrap;letter-spacing:.2px;}
.nav-links{display:flex;align-items:center;gap:28px;margin-right:8px;}
@media (min-width:1024px){ .nav-links{ gap:36px; } }
.top-nav a{color:#fff;text-decoration:none;font-weight:500;line-height:1;}
.top-nav .login-button{
  background:#fff !important;
  color:var(--maroon) !important;
  border:2px solid var(--maroon) !important;
  padding:8px 15px; border-radius:8px; font-weight:700;
  text-decoration:none; margin-left:12px; transition:all .2s ease;
}
.top-nav .login-button:hover{ background:var(--maroon) !important; color:#fff !important; }

/* ============ HAMBURGER + SIDEBAR (MOBILE) ============ */
.menu-toggle{display:none;cursor:pointer;font-size:1.25rem;color:#fff;z-index:2100;}
.sidebar{
  position:fixed; top:0; right:0; height:100vh; width:75vw;
  background: rgba(20,0,0,.45);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-left: 1px solid rgba(255,255,255,.3);
  z-index:2000;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:center;
  transform:translateX(100%);
  transition:transform .4s ease-in-out;
  overflow-y:auto;
  padding:72px 22px 32px;
}
.sidebar.active{ transform:translateX(0); }
.sidebar-header{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-bottom:14px;
}
.sidebar-logo{ width:112px; height:auto; display:block; }
.sidebar-brand{ font-size:1.2rem; font-weight:800; color:#fff; letter-spacing:.3px; opacity:.98; text-align:center; }
.sidebar{ align-items:stretch; }
.sidebar a{
  color:#fff;
  font-size:1.2rem;
  margin:12px 0;
  font-weight:800;
  text-decoration:none;
  display:flex; align-items:center; gap:10px;
  justify-content:flex-start;
  text-align:left;
  padding:12px 10px 12px 16px;
}
.sidebar a ion-icon{ font-size:1.2rem; color:inherit; }
.sidebar .login-button{
  background:#fff !important;
  color:var(--maroon) !important;
  border:2px solid var(--maroon) !important;
  border-radius:12px; font-weight:800;
  display:flex !important; justify-content:center !important; align-items:center !important;
  text-align:center !important;
  width:calc(100% - 32px);
  margin:10px auto 0;
  padding:12px 20px;
}
.sidebar .login-button ion-icon{ display:none; }
.sidebar .login-button:hover{ background:var(--maroon) !important; color:#fff !important; }
.close-sidebar-container{ position:absolute; top:22px; right:22px; }
.close-sidebar{ font-size:2rem; color:#fff; text-decoration:none; cursor:pointer; }
body.no-scroll{ overflow:hidden; }

/* ================= HERO (New Logo) ================= */
.hero-section{
  background:
    linear-gradient(135deg, var(--hero-tint-1), var(--hero-tint-2)),
    linear-gradient(0deg, var(--hero-lift), var(--hero-lift)),
    url('../img/bg.png') center/cover no-repeat;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  padding:20px;
}
.hero-stack{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px;
  width:min(92vw, 900px);
}
.hero-main-logo {
    width: clamp(300px, 50vw, 500px);
    height: auto;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.7)) 
            drop-shadow(0 0 16px rgba(255,255,255,0.5))
            drop-shadow(0 4px 12px rgba(0,0,0,0.4));
    transform: translateX(-15px);
}
.hero-tagline{
  color:#fff; opacity:.97;
  font-weight:600;
  font-size: clamp(16px, 2.2vw, 22px);
  letter-spacing:.2px;
  text-shadow: 0 1px 6px rgba(0,0,0,.28);
}
.cta-button{
  display:inline-block; font-weight:800; letter-spacing:.2px;
  padding:14px 28px; border-radius:10px; text-decoration:none; transition:.25s;
}
.cta-button--light{
  background:#fff; color:var(--maroon); border:2px solid var(--maroon);
}
.cta-button--light:hover{
  background:var(--maroon); color:#fff; transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0,.18);
}

/* ================= SECTIONS (Centered) ================= */
.section{
    min-height:100svh;
    padding:80px 20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.section > .container { width: 100%; }
.section-light{ background:#fff; color:var(--text-dark); }
.section-dark{ background:linear-gradient(45deg, var(--maroon), var(--dark-maroon)); color:#fff; }
.section-title{ text-align:center; margin-bottom:40px; }
.section-title h2{ font-size:2.5rem; font-weight:700; }

/* ========== ABOUT (Floating Logo & Icon List) ========== */
@keyframes float {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-12px); }
	100% { transform: translateY(0px); }
}
.about-grid{ display:grid; grid-template-columns:420px 1fr; gap:36px; align-items:center; }
.about-media {
    background: none;
    box-shadow: none;
    padding: 0;
}
.about-media img{ 
    width:100%; 
    height:auto; 
    display:block; 
    border-radius: 0;
    box-shadow: none;
    animation: float 6s ease-in-out infinite;
}
.about-text p{ font-size:1.05rem; margin-bottom:1.5rem; }
.about-features-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 0 1.5rem;
}
.feature-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.05rem;
}
.feature-item ion-icon {
    font-size: 2rem;
    color: var(--maroon);
    min-width: 32px;
}

/* ========== FEATURES ========== */
.feature-card-container{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.feature-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  padding:30px; max-width:350px; text-align:center; color:#fff;
  transition:.3s;
}
.feature-card:hover{ transform:translateY(-10px); box-shadow:0 10px 20px rgba(0,0,0,.2); }
.feature-card ion-icon{ font-size:3rem; color:#fff; margin-bottom:15px; }

/* ========== CONTACT ========== */
#contact.section-light{ background:#fff; color:var(--text-dark); }
.contact-grid{ display:grid; grid-template-columns:1fr 520px; gap:36px; align-items:start; }
.contact-form{
  background:#fff; border:1px solid #eee; border-radius:14px; padding:24px;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-field{ display:flex; flex-direction:column; margin-bottom:14px; }
.form-field label{ font-size:.9rem; font-weight:600; margin-bottom:6px; color:var(--text-dark); }
.form-field input, .form-field textarea{
  border:1px solid #ddd; border-radius:10px; padding:12px 14px;
  font:inherit; color:var(--text-dark); background:#fff; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-field input:focus, .form-field textarea:focus{ border-color:var(--maroon); box-shadow:0 0 0 3px rgba(128,0,0,.12); }
.contact-map{ border-radius:14px; overflow:hidden; box-shadow:0 8px 18px rgba(0,0,0,.08); height:clamp(380px,55vh,560px); min-height:0; background:#fafafa; }
.contact-map iframe{ display:block; width:100%; height:100%; border:0; }

/* ================= FOOTER ================= */
footer{ background:linear-gradient(45deg, var(--maroon), var(--dark-maroon)); color:#fff; padding:40px 20px; }
.footer-content{ max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; gap:40px; }
.footer-column{ flex:1; min-width:250px; text-align:left; }
.footer-column h3{ font-size:1.2rem; margin-bottom:15px; font-weight:600; }
.footer-column p, .footer-column a{ font-size:.9rem; color:#f0f0f0; text-decoration:none; }
.footer-column a:hover{ color:#fff; }
.social-links{ margin-top:15px; display:flex; gap:12px; align-items:center; justify-content:flex-start; }
.social-links a{ font-size:1.5rem; color:#fff; }
.social-links a:hover{ opacity:.85; }
.copyright{ text-align:center; margin-top:20px; }

/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
  .about-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .top-nav{ padding:.60rem 0; }
  .top-nav .logo{ height:34px; }
  .site-title-nav{ font-size:.9rem; }
  .nav-links, .top-nav .login-button{ display:none; }
  .menu-toggle{ display:block; }

  .hero-tagline{ font-size: clamp(15px, 3.8vw, 18px); }
  .section{ padding:56px 18px; }
  .hero-section{
    background:
      linear-gradient(135deg, rgba(128,0,0,.45), rgba(91,0,0,.28)),
      linear-gradient(0deg, rgba(255,255,255,.14), rgba(255,255,255,.14)),
      url('../img/bg.png') center/cover no-repeat;
  }
  .footer-content{ flex-direction:column; gap:16px; align-items:flex-start; }
  .footer-column, .footer-column h3, .footer-column p, .footer-column a{ text-align:left; }
}

/* ===== SMOOTH PAGE TRANSITION ===== */
@keyframes fadeInPage {
    from { opacity: 0; }
    to   { opacity: 1; }
}
body {
    /* Magsimula nang invisible para sa fade-in effect */
    opacity: 0;
    animation: fadeInPage 0.5s ease-in-out forwards;
}
body.fade-out {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* ==== QR nav button (desktop) ==== */
.nav-links .qr-nav-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .9rem;
  border:1px solid #fff;            /* white outline */
  border-radius:8px;
  color:#fff;                       /* white text (for dark header) */
  background:transparent;
  font-weight:700; text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-links .qr-nav-btn:hover{
  background:#fff;                  /* white hover */
  color:#7b1d1d;                    /* maroon text on hover */
  border-color:#fff;
}
.nav-links .qr-nav-btn ion-icon{ font-size:1.1rem; color:inherit; }

/* ==== QR item (sidebar) ==== */
.sidebar .qr-nav-item{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid #fff;            /* white outline (per request) */
  border-radius:8px;
  padding:.6rem .8rem;
  margin:.25rem .5rem;
  background:transparent;
  color:#fff;                       /* white text default */
  font-weight:700; text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar .qr-nav-item:hover{
  background:#fff;                  /* white hover */
  color:#7b1d1d;                    /* maroon text on hover */
  border-color:#fff;
}
.sidebar .qr-nav-item ion-icon{ color:inherit; }