/* ===============================
   GLOBAL PAGE STYLING
   =============================== */



/* ===============================
body{
  margin:0;
  font-family:Arial, sans-serif;
  background:radial-gradient(circle at top,#0a0a12,#050509 70%);
  color:#eaeaf0;
}
   =============================== */

body{
  margin:0;
  font-family:Arial, sans-serif;
  background:radial-gradient(circle at 50% -20%, #303060 0%, #14142a 50%, #050509 90%);
  color:#eaeaf0;
}



/* ===============================  to make it more visible  bg of the body
.section,
.package-section,
.map-section {
  background:
    linear-gradient(rgba(5,5,9,0.55), rgba(5,5,9,0.65)),
    url("magic-grey-bg.png");
  background-size:cover;
  background-attachment:fixed;
  background-position:center;
}
   =============================== */   

   

/* ===============================  to make it way more visible  bg of the body   
.section,
.package-section,
.map-section {
  background:
    linear-gradient(rgba(10,10,15,0.45), rgba(10,10,15,0.55)),
    url("magic-grey-bg.png");
  background-size:cover;
  background-attachment:fixed;
  background-position:center;
}

   =============================== */   
   
/* ===============================
   SUBTLE HEADER SPARKLE LAYER
=============================== */

.sparkle {
  position:absolute;
  width:3px;
  height:3px;
  background:white;
  border-radius:50%;
  opacity:0.4;
  animation:twinkle 4s infinite ease-in-out;
}

@keyframes twinkle {
  0%   { opacity:0.1; transform:scale(1); }
  50%  { opacity:0.6; transform:scale(1.4); }
  100% { opacity:0.1; transform:scale(1); }
}

/* Make header able to hold sparkles */
header{
  position:relative;
  overflow:hidden;
}

   
   
/* ===============================
   HEADER WITH MAGICAL BANNER
   =============================== */

header{
  text-align:center;
  padding:120px 20px;
  background:
    linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.75)),
    url("magic-banner.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

h1{
  font-size:40px;
  margin-bottom:10px;
}

.section{
  padding:40px 20px;
  text-align:center;
}

/* ===============================
   MESSAGE BUTTON
   =============================== */

.message-btn{
  display:inline-block;
  margin-top:20px;
  padding:12px 25px;
  background:#a855f7;
  color:white;
  text-decoration:none;
  border-radius:30px;
  font-weight:bold;
  animation:pulse 2s infinite;
  transition:0.3s ease;
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(168,85,247,0.7);}
  70%{box-shadow:0 0 0 20px rgba(168,85,247,0);}
  100%{box-shadow:0 0 0 0 rgba(168,85,247,0);}
}

.message-btn:hover{
  transform:scale(1.05);
}

/* ===============================
   PRODUCT GRID
   =============================== */

.products{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:35px;
  max-width:1200px;
  margin:auto;
}

/* ===============================
   PRODUCT CARD
   =============================== */

.card{
  position:relative;
  background:rgba(20,20,35,0.85);
  padding:20px;
  border-radius:18px;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.05);
  transition:0.3s ease;
  overflow:hidden;
}

.card:hover{
  transform:translateY(-6px);
}

.badge{
  position:absolute;
  top:10px;
  left:10px;
  background:#ff2e63;
  color:white;
  padding:5px 10px;
  font-size:12px;
  border-radius:20px;
}

.drink-img{
  width:140px;
  height:180px;
  object-fit:cover;
  border-radius:14px;
  transition:0.3s ease;
}

.price{
  font-weight:bold;
  margin-top:8px;
  color:#ffd369;
}

.desc{
  font-size:14px;
  color:#bbb;
  margin-top:6px;
  min-height:40px;
}

/* ===============================
   GLITTER ANIMATION
   =============================== */

.glitter{
  position:absolute;
  width:6px;
  height:6px;
  background:white;
  border-radius:50%;
  animation:floatUp 2s linear forwards;
}

@keyframes floatUp{
  from{transform:translateY(0);opacity:1;}
  to{transform:translateY(-80px);opacity:0;}
}

/* ===============================
   PACKAGE SECTION
   =============================== */

.package-section{
  margin:40px auto;
  max-width:800px;
  text-align:center;
}

.package-card{
  background:#141428;
  padding:20px;
  margin:15px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.05);
  transition:0.4s ease;
}

.package-card:hover{
  transform:scale(1.05);
  box-shadow:0 0 25px rgba(168,85,247,0.6);
}

/* ===============================
   MAP
   =============================== */

.map-section{
  margin:60px 0;
}

iframe{
  width:100%;
  height:350px;
  border:none;
  border-radius:15px;
}

/* ===============================
   FOOTER
   =============================== */

footer{
  text-align:center;
  padding:40px 20px;
  margin-top:60px;
  background:#0f0f1a;
  color:#999;
}

footer a{
  color:#a855f7;
  text-decoration:none;
  font-weight:bold;
}