*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Arial,Helvetica,sans-serif;color:#222;background:#fff;line-height:1.6}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
.navbar{height:75px;padding:0 7%;display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:1000;box-shadow:0 2px 15px rgba(0,0,0,.08)}.logo{display:flex;align-items:center;gap:10px;font-size:28px;font-weight:800;white-space:nowrap;text-decoration:none}.logo img{width:58px!important;height:58px!important;max-width:58px!important;object-fit:contain;display:block;flex:0 0 58px}.logo span{color:#222}.logo span b{color:#ff5a00}.navbar nav{display:flex;align-items:center;gap:28px}.navbar nav a{font-size:15px;font-weight:600}.navbar nav a:hover{color:#ff5a00}.nav-btn{padding:11px 22px;background:#ff5a00;color:#fff;border-radius:25px;font-weight:700}.menu-toggle{display:none;border:0;background:transparent;font-size:28px;cursor:pointer}
.hero{min-height:650px;display:flex;align-items:center;padding:80px 8%;background:#111}.hero-content{max-width:700px;color:#fff}.hero-small{color:#ff9a5c;font-size:14px;font-weight:700;letter-spacing:2px;margin-bottom:15px}.hero h1{font-size:clamp(42px,6vw,76px);line-height:1.05;margin-bottom:25px}.hero h1 span{color:#ff7a32}.hero-content>p:not(.hero-small){font-size:20px;max-width:600px;margin-bottom:30px}.hero-buttons{display:flex;gap:15px;flex-wrap:wrap}.primary-btn,.secondary-btn{display:inline-block;padding:14px 25px;border-radius:30px;font-weight:700}.primary-btn{background:#ff5a00;color:#fff}.secondary-btn{border:2px solid #fff;color:#fff}
.section,.packages-section,.contact-section{padding:85px 8%}.packages-section{background:#f7f7f7}.section-title{text-align:center;max-width:700px;margin:0 auto 45px}.section-title p,.section-label{color:#ff5a00;font-size:13px;font-weight:800;letter-spacing:2px;margin-bottom:8px}.section-title h1,.section-title h2{font-size:clamp(30px,4vw,45px);line-height:1.2}
.service-container,.package-container{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.service-card{background:#fff;padding:30px;border-radius:15px;box-shadow:0 7px 25px rgba(0,0,0,.07)}.service-icon{font-size:42px;margin-bottom:15px}.service-card h3{font-size:22px;margin-bottom:10px}.service-card p{color:#666;margin-bottom:18px}.service-card a{color:#ff5a00;font-weight:700}
.package-card{overflow:hidden;background:#fff;border-radius:15px;box-shadow:0 7px 25px rgba(0,0,0,.08)}.package-image,.package-placeholder{width:100%;height:230px}.package-image{object-fit:cover}.package-placeholder,.vehicle-placeholder{display:flex;align-items:center;justify-content:center;background:#eee;font-size:55px}.package-content{padding:25px}.package-content h3{font-size:22px;margin-bottom:10px}.package-content p{color:#666;min-height:70px}.package-bottom{margin-top:20px;padding-top:18px;border-top:1px solid #eee;display:flex;align-items:center;justify-content:space-between}.package-bottom strong{font-size:22px;color:#ff5a00}.package-bottom a{padding:9px 16px;background:#ff5a00;color:#fff;border-radius:20px;font-weight:700}.vehicle-image,.vehicle-placeholder{width:100%;height:200px;border-radius:10px;margin-bottom:20px}.vehicle-image{object-fit:cover}
.gallery-grid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.gallery-card{overflow:hidden;border-radius:12px;aspect-ratio:1;background:#eee}.gallery-card img{width:100%;height:100%;object-fit:cover}.about-section{padding:100px 8%;background:#222;color:#fff}.about-content{max-width:850px;margin:auto}.about-content h2{font-size:clamp(35px,5vw,60px);line-height:1.1;margin:15px 0 25px}.about-content>p:not(.section-label){color:#ddd;max-width:700px;margin-bottom:18px}.contact-container{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.contact-card{text-align:center;padding:30px;background:#f7f7f7;border-radius:12px}.contact-card>div{font-size:38px}.contact-card p{color:#777}.contact-button{text-align:center;margin-top:35px}
.booking-page,.contact-page{min-height:80vh;padding:80px 6%;background:#f7f7f7}.booking-wrapper{max-width:950px;margin:auto}.booking-form,.contact-form{max-width:900px;margin:auto;padding:35px;background:#fff;border-radius:15px;box-shadow:0 7px 25px rgba(0,0,0,.07)}.booking-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-group{display:flex;flex-direction:column}.form-group.full{grid-column:1/-1}.form-group label,.contact-form label{margin-bottom:7px;font-weight:700}.form-group input,.form-group select,.form-group textarea,.contact-form input,.contact-form textarea,.login-box input,.admin-form input,.admin-form select,.admin-form textarea{width:100%;padding:13px;border:1px solid #ddd;border-radius:8px;font:inherit;margin-bottom:15px}.submit-btn,.admin-form button{padding:14px;border:0;border-radius:8px;background:#ff5a00;color:#fff;font-size:16px;font-weight:700;cursor:pointer}.success-box,.success-message{padding:15px;background:#d4edda;color:#155724;border-radius:8px;margin-bottom:20px}.error-box,.error-message{padding:15px;background:#f8d7da;color:#721c24;border-radius:8px;margin-bottom:20px}.whatsapp-btn{display:inline-block;margin-top:10px;padding:10px 18px;background:#25D366;color:#fff;border-radius:20px;font-weight:bold}.whatsapp{position:fixed;right:25px;bottom:25px;width:58px;height:58px;display:flex;align-items:center;justify-content:center;background:#25D366;color:#fff;border-radius:50%;font-size:27px;z-index:999}.footer{padding:35px 8%;background:#111;color:#fff;text-align:center}.footer p{color:#aaa}.empty-message{grid-column:1/-1;text-align:center;padding:30px;color:#777}
.admin-header{min-height:70px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;background:#222;color:#fff}.admin-container{display:flex;min-height:calc(100vh - 70px);background:#f5f5f5}.admin-sidebar{width:230px;flex-shrink:0;background:#181818;padding:25px 15px}.admin-sidebar a{display:block;padding:13px 15px;margin-bottom:5px;color:#ddd;border-radius:7px}.admin-sidebar a:hover{background:#ff5a00;color:#fff}.admin-main{flex:1;padding:40px;overflow-x:auto}.logout-btn{display:inline-block;margin-left:15px;padding:8px 15px;background:#ff5a00;color:#fff;border-radius:20px}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:25px 0 40px}.stat-card{background:#fff;padding:25px;border-radius:12px;box-shadow:0 5px 20px rgba(0,0,0,.06)}.stat-card strong{display:block;font-size:32px;color:#ff5a00}.stat-card span{color:#666}.admin-form{max-width:800px;background:#fff;padding:30px;border-radius:14px;margin:25px 0}.package-admin-grid,.vehicle-admin-grid,.gallery-admin-grid,.message-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.package-admin-card,.vehicle-admin-card,.gallery-admin-card,.message-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,.06)}.package-admin-card img,.vehicle-admin-card img,.gallery-admin-card img{width:100%;height:190px;object-fit:cover}.package-admin-content,.vehicle-content,.gallery-content,.message-card{padding:20px}.package-price,.vehicle-price{color:#ff5a00;font-size:20px;font-weight:bold;margin:12px 0}.action-row{display:flex;gap:8px}.edit-btn{padding:8px 14px;background:#333;color:#fff;border-radius:5px}.delete-btn{padding:8px 14px;background:#dc3545;color:#fff;border:0;border-radius:5px;cursor:pointer}.table-wrap{overflow:auto;background:#fff;border-radius:10px;margin-top:20px}table{width:100%;border-collapse:collapse;min-width:800px}th,td{padding:12px;border-bottom:1px solid #eee;text-align:left}th{background:#fafafa}.inline-form{display:flex;gap:5px}.inline-form select,.inline-form button{padding:7px}.gallery-title{font-weight:bold;margin-bottom:12px}.message-text{padding:15px;background:#f7f7f7;border-radius:8px;margin:15px 0;white-space:pre-wrap}.message-meta{color:#777;font-size:14px}.edit-wrapper{max-width:800px;background:#fff;padding:35px;border-radius:15px}.edit-wrapper label{display:block;font-weight:bold;margin-bottom:7px}.current-image{width:260px;height:170px;object-fit:cover;border-radius:10px;margin:10px 0 20px}.back-btn{display:inline-block;margin-left:10px;padding:12px 22px;background:#333;color:#fff;border-radius:7px}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f7f7f7;padding:20px}.login-box{width:100%;max-width:430px;background:#fff;padding:35px;border-radius:15px;box-shadow:0 7px 25px rgba(0,0,0,.08)}.login-box h1{margin:20px 0}
@media(max-width:1000px){.navbar{padding:0 5%}.navbar nav{display:none}.navbar nav.mobile-menu{display:flex;position:absolute;top:75px;left:0;width:100%;padding:20px;background:#fff;flex-direction:column;align-items:flex-start;gap:15px}.menu-toggle{display:block}.service-container,.package-container,.package-admin-grid,.vehicle-admin-grid,.message-grid{grid-template-columns:repeat(2,1fr)}.gallery-grid,.gallery-admin-grid{grid-template-columns:repeat(3,1fr)}.contact-container{grid-template-columns:1fr;max-width:600px}.stats-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){.navbar{height:65px}.nav-btn{display:none}.navbar nav.mobile-menu{top:65px}.hero{min-height:580px;padding:60px 6%}.hero h1{font-size:44px}.section,.packages-section,.contact-section,.booking-page{padding:65px 6%}.service-container,.package-container,.package-admin-grid,.vehicle-admin-grid,.gallery-admin-grid,.message-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:repeat(2,1fr)}.booking-form{grid-template-columns:1fr;padding:25px}.form-group.full{grid-column:auto}.admin-header{padding:10px 15px;flex-wrap:wrap;gap:10px}.admin-container{flex-direction:column}.admin-sidebar{width:100%;display:flex;overflow-x:auto;gap:5px;padding:10px}.admin-sidebar a{white-space:nowrap;margin:0}.admin-main{padding:20px 15px}.stats-grid{grid-template-columns:repeat(2,1fr)}}

@media(max-width:650px){.logo img{width:48px;height:48px}.logo{font-size:23px;gap:7px}.footer .logo img{width:48px;height:48px}}

/* FINAL VJ TRAVELS LOGO FIX */
.navbar .logo img,
.footer .logo img {
  width: 58px !important;
  height: 58px !important;
  max-width: 58px !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 58px;
}
.navbar .logo,
.footer .logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.footer .logo {
  justify-content: center;
}
@media(max-width:650px){
  .navbar .logo img,
  .footer .logo img {
    width:48px !important;
    height:48px !important;
    max-width:48px !important;
    flex-basis:48px;
  }
  .navbar .logo,
  .footer .logo {
    font-size:23px;
    gap:7px !important;
  }
}

/* Prevent logo from appearing as a giant hero image */
.hero img{display:none !important;}

/* VJ TRAVELS - HEADER LOGO FINAL */
header.navbar a.logo > img {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  object-fit: contain !important;
  display: block !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}
header.navbar a.logo {
  width: auto !important;
  height: 60px !important;
  max-width: 240px !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}
header.navbar a.logo span {
  display: inline-block !important;
  white-space: nowrap !important;
}

/* Never allow the VJ logo image to become a page-sized image */
.hero .logo,
.hero img[src*="vj-logo"],
.packages-section .logo,
.section .logo {
  display: none !important;
}

@media (max-width:650px) {
  header.navbar a.logo > img {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
  header.navbar a.logo {
    height: 52px !important;
    max-width: 210px !important;
  }
}

/* ==========================================
   VJ TRAVELS - MOVING BUS HERO
   Ready-to-use hero replacement
========================================== */
.hero-bus{
  position:relative;
  min-height:650px;
  overflow:hidden;
  isolation:isolate;
  padding:0 8%;
  display:flex;
  align-items:center;
  background:#111;
}
.hero-bus .hero-image{
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:url("../images/vj-hero-bus.jpg");
  background-size:cover;
  background-position:center right;
  animation:heroBusDrive 12s ease-in-out infinite alternate;
  transform:scale(1.06);
}
.hero-bus .hero-shade{
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.68) 30%,rgba(0,0,0,.18) 65%,rgba(0,0,0,.05) 100%);
}
.hero-bus .hero-road-glow{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:110px;
  z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.32));
  pointer-events:none;
}
.hero-bus .hero-content{position:relative;z-index:5;max-width:650px;color:#fff}
.hero-bus .hero-small{color:#ff8a45;font-size:14px;font-weight:800;letter-spacing:2px;margin-bottom:16px}
.hero-bus h1{font-size:clamp(44px,6vw,76px);line-height:1.03;margin-bottom:25px;text-shadow:0 3px 20px rgba(0,0,0,.3)}
.hero-bus h1 span{color:#ff7a32}
.hero-bus .hero-content>p:not(.hero-small){font-size:20px;max-width:600px;margin-bottom:30px;color:#fff}
.hero-bus .primary-btn,.hero-bus .secondary-btn{transition:transform .25s ease,background .25s ease}
.hero-bus .primary-btn:hover,.hero-bus .secondary-btn:hover{transform:translateY(-3px)}
.hero-slider-arrow{position:absolute;top:52%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.94);color:#222;display:flex;align-items:center;justify-content:center;font-size:36px;line-height:1;z-index:6;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.15)}
.hero-slider-arrow.left{left:24px}.hero-slider-arrow.right{right:24px}
.hero-dots{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:12px;z-index:6}
.hero-dots span{width:11px;height:11px;border-radius:50%;background:#fff;display:block;box-shadow:0 2px 7px rgba(0,0,0,.25)}
.hero-dots span.active{background:#ff5a00;transform:scale(1.25)}
@keyframes heroBusDrive{
  0%{background-position:52% center;transform:scale(1.06) translateX(0)}
  50%{background-position:57% center;transform:scale(1.08) translateX(-10px)}
  100%{background-position:52% center;transform:scale(1.06) translateX(0)}
}
@media(max-width:1000px){
 .hero-bus{min-height:620px;padding:0 6%}
 .hero-bus .hero-image{background-position:64% center}
 .hero-slider-arrow{width:42px;height:42px;font-size:30px}
}
@media(max-width:650px){
 .hero-bus{min-height:620px;padding:60px 6%;align-items:flex-start}
 .hero-bus .hero-image{background-position:70% center;animation-duration:9s}
 .hero-bus .hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.58) 58%,rgba(0,0,0,.2) 100%)}
 .hero-bus .hero-content{padding-top:20px}
 .hero-bus h1{font-size:44px}
 .hero-bus .hero-content>p:not(.hero-small){font-size:17px}
 .hero-slider-arrow{display:none}
}


/* =========================================================
   FINAL MOBILE LOGO / HERO FIX
   ========================================================= */
html, body { overflow-x:hidden; }

header.navbar {
  position:sticky !important;
  top:0 !important;
  width:100% !important;
  height:75px !important;
  z-index:10000 !important;
}

header.navbar > .logo {
  position:relative !important;
  width:auto !important;
  height:60px !important;
  max-width:240px !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  overflow:hidden !important;
}

header.navbar > .logo > img {
  position:relative !important;
  inset:auto !important;
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  min-height:52px !important;
  max-width:52px !important;
  max-height:52px !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
}

header.navbar > .logo > span {
  position:relative !important;
  display:inline-block !important;
  width:auto !important;
  height:auto !important;
  white-space:nowrap !important;
  transform:none !important;
}

/* Keep hero artwork inside hero */
.hero-bus {
  position:relative !important;
  overflow:hidden !important;
}

.hero-bus .hero-image {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  z-index:0 !important;
  pointer-events:none !important;
}

.hero-bus .hero-shade { z-index:1 !important; }
.hero-bus .hero-road-glow { z-index:2 !important; }
.hero-bus .hero-content,
.hero-bus .hero-slider-arrow,
.hero-bus .hero-dots { z-index:3 !important; }

@media (max-width:650px) {
  header.navbar {
    height:65px !important;
    min-height:65px !important;
    padding:0 16px !important;
  }

  header.navbar > .logo {
    height:52px !important;
    max-width:205px !important;
  }

  header.navbar > .logo > img {
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
  }

  header.navbar > .logo > span {
    font-size:23px !important;
    line-height:1 !important;
  }

  .menu-toggle {
    position:relative !important;
    z-index:10001 !important;
    font-size:30px !important;
  }

  .hero-bus {
    min-height:580px !important;
    overflow:hidden !important;
  }

  .hero-bus .hero-image {
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    background-size:cover !important;
    background-position:center !important;
    transform:none !important;
    animation:heroBusMobile 9s ease-in-out infinite alternate !important;
  }

  @keyframes heroBusMobile {
    0% { background-position:45% center; }
    100% { background-position:60% center; }
  }

  /* Stop any accidental logo from appearing over content */
  .section .logo,
  .packages-section .logo,
  .contact-section .logo,
  .about-section .logo,
  .hero-bus .logo {
    display:none !important;
  }

  .service-card img,
  .package-card img,
  .contact-card img {
    position:static !important;
    transform:none !important;
  }
}