/* Wateen Cafe - Luxury Design System */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap');

:root {
  --primary-deep: #3A0A12;
  --primary: #6B1526;
  --primary-light: #8C1F35;
  --primary-accent: #A52B44;
  --primary-glow: rgba(107,21,38,0.12);
  --cream: #FBF8F3;
  --cream-warm: #F6F0E8;
  --cream-card: #FFFFFF;
  --cream-border: #EAE0D0;
  --cream-dark: #D9CBB5;
  --gold: #B8860B;
  --gold-light: #D4A843;
  --gold-shimmer: #E8C96A;
  --gold-glow: rgba(184,134,11,0.15);
  --text-primary: #1A0D10;
  --text-body: #4A3B3E;
  --text-muted: #7A6B6E;
  --text-light: #FBF8F3;
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-sm: 0 4px 16px rgba(58,10,18,0.05);
  --shadow-md: 0 8px 32px rgba(58,10,18,0.08);
  --shadow-lg: 0 20px 48px rgba(58,10,18,0.12);
  --shadow-xl: 0 32px 64px rgba(58,10,18,0.16);
  --glass: rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.35);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 9999px;
  --ease: cubic-bezier(0.25,0.8,0.25,1);
  --spring: cubic-bezier(0.34,1.56,0.64,1);
  --font-en-head: 'Playfair Display', Georgia, serif;
  --font-en-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ar-head: 'Cairo', sans-serif;
  --font-ar-body: 'Tajawal', sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-en-body); background:var(--cream); color:var(--text-body); line-height:1.65; overflow-x:hidden; }
html[lang="ar"] body { font-family:var(--font-ar-body); }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4 { font-family:var(--font-ar-head); }
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4 { font-family:var(--font-en-head); }

.container { width:100%; max-width:1320px; margin:0 auto; padding:0 2rem; }
a { text-decoration:none; color:inherit; transition:all 0.3s var(--ease); }
button { cursor:pointer; border:none; background:none; font-family:inherit; transition:all 0.3s var(--ease); }
img { max-width:100%; height:auto; display:block; }

/* Reveal animation */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* Decorative line */
.section-line { width:48px; height:3px; background:linear-gradient(90deg, var(--gold), var(--gold-shimmer)); border-radius:2px; margin-bottom:1rem; }
.section-line.center { margin-left:auto; margin-right:auto; }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:0.4rem; padding:0.4rem 1rem; border-radius:var(--r-full); font-size:0.75rem; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; backdrop-filter:blur(8px); }
.badge-gold { background:linear-gradient(135deg, rgba(184,134,11,0.12), rgba(212,168,67,0.18)); color:var(--gold); border:1px solid rgba(184,134,11,0.25); }
.badge-red { background:rgba(107,21,38,0.08); color:var(--primary); border:1px solid rgba(107,21,38,0.15); }

/* Top Bar */
.top-bar { background:linear-gradient(135deg, var(--primary-deep) 0%, #2A0810 100%); color:var(--cream); padding:0.6rem 0; font-size:0.8rem; font-weight:500; letter-spacing:0.3px; }
.top-bar .container { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.top-bar-info { display:flex; align-items:center; gap:2rem; }
.top-bar-item { display:flex; align-items:center; gap:0.5rem; opacity:0.85; }
.top-bar-item svg { color:var(--gold-light); width:14px; height:14px; }

/* Navbar */
.navbar { position:sticky; top:0; z-index:1000; background:var(--glass); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid var(--glass-border); transition:all 0.4s var(--ease); }
.navbar.scrolled { background:rgba(251,248,243,0.96); box-shadow:var(--shadow-md); border-color:transparent; }
.nav-container { display:flex; align-items:center; justify-content:space-between; padding:0.85rem 2rem; }
.brand-logo { display:flex; align-items:center; gap:0.75rem; }
.brand-logo img { height:44px; width:auto; object-fit:contain; }
.brand-title { display:flex; flex-direction:column; }
.brand-name { font-size:1.35rem; font-weight:800; color:var(--primary-deep); line-height:1.1; }
.brand-tagline { font-size:0.65rem; color:var(--gold); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.heartbeat-icon { color:var(--primary); display:inline-block; animation:pulse 2s infinite var(--ease); }
@keyframes pulse { 0%{transform:scale(1)} 14%{transform:scale(1.2)} 28%{transform:scale(1)} 42%{transform:scale(1.15)} 70%{transform:scale(1)} }

.nav-menu { display:flex; align-items:center; gap:0.25rem; list-style:none; }
.nav-link { font-weight:600; font-size:0.9rem; color:var(--text-body); padding:0.6rem 1rem; border-radius:var(--r-sm); position:relative; }
.nav-link:hover { color:var(--primary); background:rgba(107,21,38,0.04); }
.nav-actions { display:flex; align-items:center; gap:0.75rem; }

.btn-lang { display:flex; align-items:center; gap:0.4rem; padding:0.5rem 1rem; border-radius:var(--r-full); border:1.5px solid var(--cream-border); background:var(--cream); color:var(--primary-deep); font-weight:700; font-size:0.825rem; }
.btn-lang:hover { background:var(--primary-deep); color:var(--cream); border-color:var(--primary-deep); transform:scale(1.03); }

.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:0.6rem; padding:0.8rem 1.6rem; border-radius:var(--r-full); background:linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%); color:var(--text-light); font-weight:700; font-size:0.9rem; box-shadow:0 4px 20px rgba(107,21,38,0.25); position:relative; overflow:hidden; }
.btn-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, var(--primary-accent), var(--primary)); opacity:0; transition:opacity 0.3s; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(107,21,38,0.35); }
.btn-primary:hover::after { opacity:1; }
.btn-primary span, .btn-primary svg { position:relative; z-index:1; }

.btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:0.6rem; padding:0.8rem 1.6rem; border-radius:var(--r-full); background:var(--cream); color:var(--primary-deep); border:1.5px solid var(--cream-border); font-weight:700; font-size:0.9rem; }
.btn-secondary:hover { background:var(--primary-deep); color:var(--text-light); border-color:var(--primary-deep); transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* Hero */
.hero { position:relative; padding:6rem 0 7rem; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-200px; right:-200px; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(184,134,11,0.06) 0%, transparent 70%); pointer-events:none; }
.hero::after { content:''; position:absolute; bottom:-150px; left:-150px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(107,21,38,0.05) 0%, transparent 70%); pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:1.15fr 0.85fr; gap:4rem; align-items:center; position:relative; z-index:1; }
.hero-content { display:flex; flex-direction:column; align-items:flex-start; }
.hero-tag { margin-bottom:1.5rem; }
.hero-title { font-size:3.6rem; line-height:1.12; font-weight:800; color:var(--primary-deep); margin-bottom:1.5rem; letter-spacing:-1.5px; }
html[lang="ar"] .hero-title { letter-spacing:0; font-size:3.2rem; }
.hero-subtitle { font-size:1.1rem; color:var(--text-muted); margin-bottom:2.5rem; max-width:540px; line-height:1.8; }
.hero-cta { display:flex; flex-wrap:wrap; gap:0.75rem; margin-bottom:3.5rem; }
.hero-stats { display:flex; align-items:center; gap:3rem; padding-top:2rem; border-top:1px solid var(--cream-border); width:100%; }
.stat-item { display:flex; flex-direction:column; }
.stat-number { font-size:1.6rem; font-weight:800; color:var(--primary); line-height:1.2; }
.stat-label { font-size:0.8rem; color:var(--text-muted); font-weight:600; margin-top:0.15rem; }

.hero-image-wrapper { position:relative; }
.hero-img-card { position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-xl); }
.hero-img-card::after { content:''; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(255,255,255,0.2); pointer-events:none; }
.hero-img-card img { width:100%; height:540px; object-fit:cover; transition:transform 1.2s var(--ease); }
.hero-img-card:hover img { transform:scale(1.04); }

.hero-floating-badge { position:absolute; bottom:2.5rem; left:-1.5rem; background:var(--glass); backdrop-filter:blur(16px); padding:1rem 1.5rem; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:1rem; border:1px solid var(--glass-border); max-width:260px; animation:float 5s ease-in-out infinite; }
html[lang="ar"] .hero-floating-badge { left:auto; right:-1.5rem; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.hero-badge-icon { width:44px; height:44px; border-radius:var(--r-sm); background:linear-gradient(135deg, var(--primary-deep), var(--primary)); color:var(--gold-shimmer); display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0; }
.hero-badge-text h4 { font-size:0.875rem; font-weight:700; color:var(--primary-deep); }
.hero-badge-text p { font-size:0.75rem; color:var(--text-muted); }

/* Story */
.story-section { padding:7rem 0; background:var(--cream-warm); position:relative; }
.story-section::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--cream-border), transparent); }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.story-image-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start; }
.story-img-box { height:260px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.story-img-box img { width:100%; height:100%; object-fit:cover; transition:transform 0.8s var(--ease); }
.story-img-box img.zoom-30 { transform:scale(1.3); }
.story-img-box:hover img { transform:scale(1.06); }
.story-img-box:hover img.zoom-30 { transform:scale(1.38); }
.story-img-box:nth-child(2) { margin-top:2.5rem; }

.section-header { margin-bottom:2rem; }
.section-subtitle { color:var(--gold); font-weight:700; font-size:0.8rem; text-transform:uppercase; letter-spacing:2.5px; margin-bottom:0.75rem; display:block; }
.section-title { font-size:2.6rem; font-weight:800; color:var(--primary-deep); line-height:1.15; letter-spacing:-0.5px; }
html[lang="ar"] .section-title { letter-spacing:0; font-size:2.4rem; }

.story-text { font-size:1.05rem; color:var(--text-body); line-height:1.85; margin-bottom:1.25rem; }
.meaning-card { background:var(--cream-card); padding:1.75rem; border-radius:var(--r-lg); border-left:3px solid var(--gold); box-shadow:var(--shadow-sm); margin-top:1.5rem; }
html[lang="ar"] .meaning-card { border-left:none; border-right:3px solid var(--gold); }
.meaning-card h4 { font-size:1.05rem; color:var(--primary-deep); margin-bottom:0.4rem; font-weight:700; }
.meaning-card p { font-size:0.925rem; color:var(--text-muted); line-height:1.7; }

/* Featured */
.featured-section { padding:7rem 0; background:var(--cream); position:relative; }
.featured-header { text-align:center; max-width:600px; margin:0 auto 4rem; }
.featured-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.featured-card { background:var(--cream-card); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--cream-border); display:grid; grid-template-columns:1fr 1fr; transition:all 0.5s var(--ease); }
.featured-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--gold-light); }
.featured-img-wrap { position:relative; overflow:hidden; height:100%; min-height:300px; }
.featured-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.8s var(--ease); }
.featured-card:hover .featured-img-wrap img { transform:scale(1.06); }
.featured-content { padding:2.25rem; display:flex; flex-direction:column; justify-content:space-between; }
.featured-badge { align-self:flex-start; margin-bottom:1rem; }
.featured-title { font-size:1.5rem; font-weight:800; color:var(--primary-deep); margin-bottom:0.35rem; }
.featured-title-ar { font-size:1rem; color:var(--gold); font-weight:600; margin-bottom:1rem; }
.featured-desc { font-size:0.9rem; color:var(--text-muted); line-height:1.7; margin-bottom:1.5rem; }
.featured-footer { display:flex; align-items:center; padding-top:1.25rem; border-top:1px solid var(--cream-warm); }
.price-tag { font-size:1.5rem; font-weight:800; color:var(--primary); }
.price-unit { font-size:0.85rem; font-weight:600; color:var(--text-muted); margin-inline-start:0.25rem; }

/* Menu */
.menu-section { padding:7rem 0; background:linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%); position:relative; }
.menu-section::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--cream-border), transparent); }
.menu-controls { margin-bottom:3rem; }
.search-bar-wrap { max-width:480px; margin:0 auto 2rem; position:relative; }
.search-input { width:100%; padding:0.9rem 1.25rem 0.9rem 3rem; border-radius:var(--r-full); border:1.5px solid var(--cream-border); background:var(--cream-card); font-size:0.95rem; font-family:inherit; color:var(--text-primary); box-shadow:var(--shadow-xs); outline:none; transition:all 0.3s var(--ease); }
html[lang="ar"] .search-input { padding:0.9rem 3rem 0.9rem 1.25rem; }
.search-input:focus { border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-glow); }
.search-icon { position:absolute; top:50%; left:1.1rem; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }
html[lang="ar"] .search-icon { left:auto; right:1.1rem; }

.category-tabs { display:flex; align-items:center; justify-content:center; gap:0.5rem; flex-wrap:wrap; }
.tab-btn { padding:0.65rem 1.25rem; border-radius:var(--r-full); background:var(--cream-card); border:1.5px solid var(--cream-border); color:var(--text-body); font-weight:700; font-size:0.875rem; display:flex; align-items:center; gap:0.4rem; }
.tab-btn:hover { border-color:var(--gold); color:var(--primary); background:rgba(184,134,11,0.04); }
.tab-btn.active { background:linear-gradient(135deg, var(--primary), var(--primary-deep)); color:var(--text-light); border-color:transparent; box-shadow:0 4px 16px rgba(107,21,38,0.2); }

/* Menu Grid */
.menu-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:1.5rem; }
.menu-item-card-visual { background:var(--cream-card); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--cream-border); box-shadow:var(--shadow-xs); display:flex; flex-direction:column; transition:all 0.4s var(--ease); }
.menu-item-card-visual:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(184,134,11,0.3); }
.item-img-box { position:relative; width:100%; aspect-ratio: 1 / 1; overflow:hidden; background:var(--cream-warm); }
.item-img-box img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s var(--ease); }
.menu-item-card-visual:hover .item-img-box img { transform:scale(1.08); }
.item-img-badge { position:absolute; top:10px; right:10px; background:rgba(58,10,18,0.82); backdrop-filter:blur(12px); color:var(--gold-shimmer); font-size:0.675rem; font-weight:800; padding:0.3rem 0.7rem; border-radius:var(--r-full); letter-spacing:0.5px; text-transform:uppercase; }
html[lang="ar"] .item-img-badge { right:auto; left:10px; }
.item-card-body { padding:1.25rem 1.5rem 1.5rem; display:flex; flex-direction:column; flex:1; justify-content:space-between; }
.item-names { margin-bottom:0.5rem; }
.item-name-en { font-size:1.1rem; font-weight:800; color:var(--primary-deep); line-height:1.3; }
.item-name-ar { font-size:0.85rem; font-weight:600; color:var(--gold); display:block; margin-top:0.15rem; }
.item-desc { font-size:0.825rem; color:var(--text-muted); line-height:1.65; margin-bottom:1rem; }
.item-card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:0.85rem; border-top:1px solid var(--cream-warm); }
.item-price { font-size:1.3rem; font-weight:800; color:var(--primary); }

/* Location */
.location-section { padding:7rem 0; background:var(--cream); }
.location-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.location-info { display:flex; flex-direction:column; }
.contact-cards-list { display:flex; flex-direction:column; gap:1rem; margin-top:2rem; }
.contact-card { display:flex; align-items:center; gap:1.25rem; padding:1.25rem 1.5rem; background:var(--cream-card); border-radius:var(--r-lg); border:1px solid var(--cream-border); box-shadow:var(--shadow-xs); transition:all 0.4s var(--ease); }
.contact-card:hover { transform:translateX(4px); border-color:var(--gold); box-shadow:var(--shadow-sm); }
html[lang="ar"] .contact-card:hover { transform:translateX(-4px); }
.contact-icon-box { width:48px; height:48px; border-radius:var(--r-sm); background:linear-gradient(135deg, var(--primary-deep), var(--primary)); color:var(--gold-shimmer); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.contact-details h4 { font-size:0.95rem; font-weight:700; color:var(--primary-deep); }
.contact-details p { font-size:0.85rem; color:var(--text-muted); margin-top:0.15rem; }
.map-card-wrap { border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--cream-card); position:relative; }
.map-card-wrap iframe { width:100%; height:420px; border:none; }
.map-overlay-btn { position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); white-space:nowrap; }

/* Mirror Phone Icon in Arabic only */
html[lang="ar"] .phone-icon-mirror {
  transform: scaleX(-1);
}

/* WhatsApp Float */
.whatsapp-float { position:fixed; bottom:2rem; right:2rem; z-index:999; width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg, #25D366, #128C7E); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(37,211,102,0.35); font-size:1.6rem; transition:all 0.3s var(--spring); }
html[lang="ar"] .whatsapp-float { right:auto; left:2rem; }
.whatsapp-float:hover { transform:scale(1.12); box-shadow:0 10px 32px rgba(37,211,102,0.45); }

/* Footer */
.footer { background:linear-gradient(180deg, var(--primary-deep) 0%, #1E0509 100%); color:var(--cream); padding:5rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; margin-bottom:3rem; }
.footer-brand { display:flex; flex-direction:column; }
.footer-logo { height:44px; width:auto; object-fit:contain; margin-bottom:1rem; align-self:flex-start; }
.footer-brand-tagline { color:var(--gold-light); font-size:0.8rem; margin-bottom:1rem; letter-spacing:1px; }
.footer-brand-desc { font-size:0.875rem; color:var(--cream-dark); line-height:1.75; }
.footer-col-title { font-size:1rem; font-weight:700; color:var(--gold-shimmer); margin-bottom:1.25rem; letter-spacing:0.5px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:0.7rem; }
.footer-link { font-size:0.875rem; color:var(--cream-dark); transition:all 0.3s var(--ease); }
.footer-link:hover { color:#fff; padding-inline-start:6px; }
.footer-bottom { padding-top:2rem; border-top:1px solid rgba(255,255,255,0.08); text-align:center; font-size:0.8rem; color:rgba(217,203,181,0.6); }
.footer-bottom .footer-heart { display:inline-flex; align-items:center; gap:0.35rem; }
.footer-bottom .footer-heart svg { width:14px; height:14px; color:var(--primary-accent); }

/* Responsive */
@media (max-width:1024px) {
  .hero-grid,.story-grid,.location-grid,.featured-grid { grid-template-columns:1fr; gap:2.5rem; }
  .featured-card { grid-template-columns:1fr; }
  .featured-img-wrap { height:250px; }
  .hero-title { font-size:2.8rem; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .nav-menu { display:none; }
  .hero-title { font-size:2.2rem; }
  html[lang="ar"] .hero-title { font-size:2rem; }
  .section-title { font-size:2rem; }
  .story-image-grid { grid-template-columns:1fr; }
  .story-img-box:nth-child(2) { margin-top:0; }
  .footer-grid { grid-template-columns:1fr; }
  .hero-stats { gap:1.5rem; flex-wrap:wrap; }
  .container { padding:0 1.25rem; }
  .hero { padding:3.5rem 0 4rem; }
  .hero-floating-badge { display:none; }
  .top-bar-info { gap:1rem; }
  .menu-grid { grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:1rem; }
}

/* Scroll To Top Button */
.scroll-top-btn {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: all 0.3s var(--ease);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.scroll-top-btn:hover {
  background: var(--primary-deep);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  color: var(--gold-shimmer);
}

/* Symmetrical positioning relative to WhatsApp float */
html[lang="ar"] .scroll-top-btn {
  left: auto;
  right: 2rem;
}

.scroll-top-btn.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}