/* Royal Blue + Gold theme */
/* IMPORT FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


:root{
  --bg:#F7FAFF;
  --royal:#0B3D91;       /* deep royal blue */
  --royal-2:#1258C4;     /* lighter blue */
  --gold:#D4AF37;        /* gold */
  --muted:#6B7280;       /* gray */
  --card-bg:#FFFFFF;
  --glass: rgba(11,61,145,0.06);
  --radius:14px;
  --container-width:1100px;
  --ease-quick: cubic-bezier(.2,.9,.3,1);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: "Poppins", sans-serif;
  background:var(--bg);
  color:#10203a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  scroll-behavior:smooth;
}

/* Container */
.container{
  width:94%;
  max-width:var(--container-width);
  margin:0 auto;
}

/* Topbar */
.topbar{
  background:linear-gradient(90deg, rgba(11,61,145,0.98), rgba(18,88,196,0.98));
  color:#fff;
  padding:14px 0;
  box-shadow:0 6px 20px rgba(11,61,145,0.12);
  position:relative;
  z-index:50;
}
.topbar .container{display:flex;align-items:center;justify-content:space-between}

/* ⭐ Updated LOGO: Bigger + Animated ⭐ */
.logo{
  font-weight:700;
  font-size:28px; /* bigger size */
  color:var(--gold);
  display:inline-block;
  transform-origin:center;
  will-change:transform,text-shadow;
}

.animated-logo{
  animation: glowPulse 3s ease-in-out infinite;
  letter-spacing:1px;
}

@keyframes glowPulse {
  0% { transform:scale(1); text-shadow:0 0 6px rgba(212,175,55,0.6), 0 0 12px rgba(212,175,55,0.4); }
  50% { transform:scale(1.08) rotate(-0.5deg); text-shadow:0 0 14px rgba(212,175,55,0.95), 0 0 28px rgba(212,175,55,0.6); }
  100% { transform:scale(1); text-shadow:0 0 6px rgba(212,175,55,0.6), 0 0 12px rgba(212,175,55,0.4); }
}

/* Topbar micro interactions */
.topbar .logo:hover { transform: scale(1.06); }
.nav a{color:rgba(255,255,255,0.9);margin-left:18px;text-decoration:none;font-weight:600;position:relative;display:inline-block}
.nav a::after{ content:""; height:3px; width:0; background:var(--gold); position:absolute; left:0; bottom:-6px; transition: width .35s var(--ease-quick); border-radius:3px;}
.nav a:hover::after{ width:100%; }

/* CTA button subtle lift */
.nav a.cta{background:var(--gold);color:#091233;padding:8px 14px;border-radius:8px;margin-left:22px;box-shadow:0 6px 18px rgba(13,34,80,0.12)}
.nav a.cta:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 18px 44px rgba(11,61,145,0.14);}

/* HERO */
.hero{position:relative;min-height:66vh;display:flex;align-items:center;margin-bottom:28px;overflow:hidden}
.hero-slides{position:absolute;inset:0;overflow:hidden;border-bottom-left-radius:20px;border-bottom-right-radius:20px}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease}
.hero-slide.active{opacity:1}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(11,61,145,0.28), rgba(0,0,0,0.22));mix-blend-mode:multiply}
.hero-inner{position:relative;padding:60px 0;color:#fff;text-align:left;z-index:2}

/* HERO PARALLAX LAYER (subtle) */
.hero::before{
  content:"";
  position:absolute;left:-10%;top:-10%;width:120%;height:120%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,0.03), transparent 30%);
  transform:translateZ(0) scale(1.02);
  pointer-events:none;
}

/* ⭐ HERO TEXT ANIMATIONS — premium layered entrance */
.hero-title {
  font-size:42px;line-height:1.05;margin-bottom:10px;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,0.25);
  opacity:0; transform: translateX(-48px) skewX(-2deg) scale(0.98);
  animation: heroReveal 900ms var(--ease-quick) 150ms forwards;
  will-change:transform,opacity;
}
.hero-sub{
  color:rgba(255,255,255,0.9);margin-bottom:20px;
  opacity:0; transform: translateX(-36px);
  animation: heroReveal 900ms var(--ease-quick) 320ms forwards;
}
.hero-actions{
  opacity:0; transform: translateY(10px) scale(.98);
  animation: popIn 700ms var(--ease-quick) 520ms forwards;
  display:flex;gap:12px;
}

/* gentle highlight sweep on title */
.hero-title::after{
  content:"";
  position:absolute;
  left:-40px;
  top:0;
  width:0;
  height:100%;
  background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  transform:skewX(-12deg);
  animation: highlightSweep 2.8s linear 900ms infinite;
  pointer-events:none;
  opacity:.9;
}

/* Services: cards staggered zoom + float on hover */
@keyframes heroReveal {
  to { opacity:1; transform: translateX(0) skewX(0) scale(1); }
}
@keyframes popIn {
  to { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes highlightSweep {
  0% { left:-40px; width:0; opacity:0; }
  10% { opacity:0.9; }
  50% { left:120%; width:60%; opacity:0.06; }
  100% { left:120%; width:0; opacity:0; }
}

/* Buttons */
.btn{display:inline-block;padding:12px 20px;border-radius:10px;font-weight:700;text-decoration:none;cursor:pointer;transition:all .25s ease;will-change:transform,box-shadow}
.btn-primary{background:linear-gradient(90deg,var(--royal-2),var(--royal));color:#fff;box-shadow:0 8px 24px rgba(11,61,145,0.18)}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 22px 48px rgba(11,61,145,0.22)}
.btn-outline{background:transparent;border:2px solid rgba(255,255,255,0.14);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,0.06)}

/* Sections */
.section{padding:48px 0;position:relative;overflow:visible}
.section-title{font-size:28px;color:var(--royal);text-align:center;margin-bottom:22px;opacity:0; transform: translateY(12px); animation: sectionTitleIn .7s var(--ease-quick) forwards;}
@keyframes sectionTitleIn { to { opacity:1; transform:translateY(0); } }

/* About card — soft fade-up + reveal with faux 3D tilt on hover */
.about-card{
  background:linear-gradient(180deg, #fff, #fbfdff);
  padding:28px;border-radius:12px;box-shadow:0 8px 30px rgba(10,30,80,0.04);
  transform: translateY(18px);
  opacity:0;
  animation: fadeUp 700ms var(--ease-quick) 120ms forwards;
  transition: transform .45s var(--ease-quick), box-shadow .35s var(--ease-quick);
  will-change:transform,opacity;
}
.about-card:hover{ transform: translateY(8px) rotateX(1.2deg); box-shadow:0 22px 60px rgba(10,30,80,0.07); }

/* Grid & cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards .card{
  background:var(--card-bg);padding:20px;border-radius:12px;box-shadow:0 10px 30px rgba(16,32,58,0.06);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  transition:transform .45s cubic-bezier(.16,.9,.3,1), box-shadow .35s ease, filter .35s ease;
  transform-origin:center;
  opacity:0;
  will-change:transform,opacity,filter;
}

/* stagger the entrance of service cards */
.cards .card:nth-child(1){ animation: cardEnter .6s var(--ease-quick) 120ms forwards; }
.cards .card:nth-child(2){ animation: cardEnter .6s var(--ease-quick) 180ms forwards; }
.cards .card:nth-child(3){ animation: cardEnter .6s var(--ease-quick) 240ms forwards; }
.cards .card:nth-child(4){ animation: cardEnter .6s var(--ease-quick) 300ms forwards; }
.cards .card:nth-child(5){ animation: cardEnter .6s var(--ease-quick) 360ms forwards; }
.cards .card:nth-child(6){ animation: cardEnter .6s var(--ease-quick) 420ms forwards; }
.cards .card:nth-child(7){ animation: cardEnter .6s var(--ease-quick) 480ms forwards; }

@keyframes cardEnter {
  from { opacity:0; transform: translateY(18px) scale(.98); filter: blur(2px); }
  to   { opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* card hover float */
.cards .card:hover{
  transform: translateY(-12px) scale(1.02);
  box-shadow:0 28px 70px rgba(16,32,58,0.12);
  z-index:5;
}

/* service icon subtle bounce */
.service-img{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--glass);font-size:26px;transition:transform .5s var(--ease-quick)}
.cards .card:hover .service-img{ transform: translateY(-6px) scale(1.04); }

/* Steps — alternating slide + float and overlap reveal */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.steps .step{
  background:linear-gradient(180deg,#fff,#fbfdff);padding:18px;border-radius:10px;
  display:flex;gap:14px;align-items:flex-start;box-shadow:0 6px 20px rgba(16,32,58,0.04);
  opacity:0; transform: translateY(22px) rotateX(0deg);
  animation: stepLift .7s var(--ease-quick) forwards;
  transition: transform .45s var(--ease-quick), box-shadow .35s ease;
  will-change:transform,opacity;
}

/* stagger steps */
.steps .step:nth-child(1){ animation-delay: 140ms; }
.steps .step:nth-child(2){ animation-delay: 240ms; transform-origin:left; }
.steps .step:nth-child(3){ animation-delay: 340ms; }
.steps .step:nth-child(4){ animation-delay: 420ms; }
.steps .step:nth-child(5){ animation-delay: 520ms; }
.steps .step:nth-child(6){ animation-delay: 620ms; }

@keyframes stepLift {
  to { opacity:1; transform: translateY(0) rotateX(0deg); }
}

.steps .step:hover { transform: translateY(-8px); box-shadow:0 18px 48px rgba(16,32,58,0.08); }

/* step number pop */
.num{font-weight:700;background:var(--royal);color:#fff;width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;
  transform-origin:center; transition: transform .35s var(--ease-quick);
}
.steps .step:hover .num { transform: scale(1.08) translateY(-2px); }

/* Reviews — carousel-like stagger + rotate in */
.review-card{background:linear-gradient(180deg,#fff,#fbfdff);padding:20px;border-radius:12px;box-shadow:0 8px 30px rgba(16,32,58,0.04);font-style:italic;
  opacity:0; transform: translateY(12px) rotate(-1.2deg); animation: reviewIn .75s var(--ease-quick) forwards;
}

/* stagger reviews */
.review-list .review-card:nth-child(1){ animation-delay:160ms; }
.review-list .review-card:nth-child(2){ animation-delay:260ms; }
.review-list .review-card:nth-child(3){ animation-delay:360ms; }
.review-list .review-card:nth-child(4){ animation-delay:460ms; }

@keyframes reviewIn {
  to { opacity:1; transform: translateY(0) rotate(0deg); }
}

/* Reviews cite micro transform on hover */
.review-card:hover { transform: translateY(-6px); box-shadow:0 20px 56px rgba(16,32,58,0.08); }

/* Booking card — card pop + form fields slide */
.booking-card{
  background:linear-gradient(180deg,#fff,#fcfdff);padding:22px;border-radius:12px;box-shadow:0 12px 40px rgba(16,32,58,0.06);max-width:920px;margin:0 auto;
  opacity:0; transform: translateY(24px) scale(.995);
  animation: bookingPop .7s var(--ease-quick) 180ms forwards;
  will-change:transform,opacity;
}
@keyframes bookingPop {
  to { opacity:1; transform: translateY(0) scale(1); }
}

/* form inputs micro slide */
.form-grid input{
  padding:12px;border-radius:8px;border:1px solid #e6eefc;background:transparent;font-weight:600;
  transform: translateY(8px); opacity:0;
  transition: transform .45s var(--ease-quick), opacity .45s var(--ease-quick);
}

/* stagger inputs */
.form-grid input:nth-child(1){ transition-delay:.12s; transform:translateY(0); opacity:1; }
.form-grid input:nth-child(2){ transition-delay:.18s; transform:translateY(0); opacity:1; }
.form-grid input:nth-child(3){ transition-delay:.24s; transform:translateY(0); opacity:1; }
.form-grid input:nth-child(4){ transition-delay:.30s; transform:translateY(0); opacity:1; }

/* Selected list entrance */
.selected-list{list-style:none;padding:0;margin:8px 0 18px;display:flex;flex-direction:column;gap:8px; opacity:0; transform: translateY(10px); animation: fadeUp .6s var(--ease-quick) 380ms forwards;}
.selected-list li{background:#f7f9ff;padding:10px;border-radius:8px;border-left:4px solid var(--royal);font-weight:600;color:var(--royal)}

/* Booking actions micro-hover */
.booking-actions .btn{transition: transform .28s var(--ease-quick), box-shadow .28s var(--ease-quick); }
.booking-actions .btn:hover{ transform: translateY(-6px); }

/* Footer — slide up and glow */
.footer{
  background:linear-gradient(90deg,var(--royal),var(--royal-2));color:#fff;padding:24px 0;margin-top:32px;
  transform: translateY(18px); opacity:0; animation: footerUp .7s var(--ease-quick) 260ms forwards;
}
.small{
  a{
    color: white;
    text-decoration: none;
  }
}
.footer-inner{display:flex;gap:12px;align-items:center;justify-content:space-between}
@keyframes footerUp { to { transform:translateY(0); opacity:1; } }

/* small utility fade for many elements */
@keyframes fadeUp {
  from { opacity:0; transform: translateY(18px); }
  to   { opacity:1; transform: translateY(0); }
}

/* Utility: reveal-on-scroll (for progressive content) */
/* Developer note: these classes animate automatically on load; if you later add JS intersection observer apply .reveal to elements when scrolled into view */
.reveal { opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease-quick), transform .6s var(--ease-quick); }
.reveal.visible { opacity:1; transform: translateY(0); }

/* Responsive */
@media (max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .hero-title{font-size:34px}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .nav{display:none}
  .grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .hero{min-height:52vh}
  .hero-title{font-size:28px}
  .steps{grid-template-columns:1fr}
}

/* END of animation-rich stylesheet */