@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root{
  --bg:#070811;
  --text:#f4f6ff;
  --muted:#a9b1d6;

  /* Unique palette */
  --p1:#7c3aed;  /* violet */
  --p2:#06b6d4;  /* cyan  */
  --p3:#22c55e;  /* green */
  --p4:#ff2d55;  /* pink/red */

  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.14);

  --radius: 20px;
  --radius2: 16px;

  --shadow: 0 22px 60px rgba(0,0,0,.55);
  --shadow2: 0 14px 30px rgba(0,0,0,.35);

  --max: 560px;
}

/* ---------- Global reset ---------- */
*{box-sizing:border-box}
html{overflow-x:hidden; scroll-behavior:smooth;}
body{
  margin:0;
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background: var(--bg);
  min-height:100vh;
  overflow-x:hidden;
}

/* ---------- Animated background (unique) ---------- */
body::before{
  content:"";
  position: fixed;
  inset:-20%;
  background:
    radial-gradient(45% 35% at 10% 10%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(40% 35% at 90% 15%, rgba(6,182,212,.30), transparent 60%),
    radial-gradient(45% 40% at 55% 95%, rgba(34,197,94,.26), transparent 60%),
    radial-gradient(35% 35% at 60% 40%, rgba(255,45,85,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  filter: blur(28px);
  animation: floatBG 12s ease-in-out infinite alternate;
  z-index:-2;
}
@keyframes floatBG{
  from{ transform: translate3d(-2%, -1%, 0) scale(1.02); }
  to  { transform: translate3d( 2%,  1%, 0) scale(1.06); }
}

/* subtle noise */
body::after{
  content:"";
  position: fixed;
  inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 3px);
  opacity:.08;
  pointer-events:none;
  z-index:-1;
}

/* links */
a{color:inherit;text-decoration:none}

/* ---------- Width system ---------- */
.card, .card2{
  width: calc(100% - 24px);
  max-width: var(--max);
  margin: 14px auto;
}

/* ---------- Card base: glass + 3D hover ---------- */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  transform: translateZ(0);
  animation: popIn .55s ease both;
}
@keyframes popIn{
  from{ opacity:0; transform: translateY(14px) scale(.98); }
  to  { opacity:1; transform: translateY(0) scale(1); }
}

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

/* animated border glow */
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--radius) + 2px);
  background: conic-gradient(from 180deg, var(--p1), var(--p2), var(--p3), var(--p4), var(--p1));
  opacity:.25;
  filter: blur(14px);
  animation: spin 5.5s linear infinite;
  z-index:0;
}
@keyframes spin{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}

/* mask for content */
.card > *{ position:relative; z-index:1; }

/* ---------- Hero strip ---------- */
.card_content{
  text-align:center;
  padding: 18px 14px 10px;
  background:
    linear-gradient(90deg, rgba(124,58,237,.18), rgba(6,182,212,.16));
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Logo */
.card_content img{
  height: 82px;
  max-width: 240px;
  border-radius: 18px;
  background:#fff;
  padding: 8px;
  box-shadow: 0 16px 30px rgba(0,0,0,.25);
  transition: .25s;
}
.card:hover .card_content img{
  transform: translateY(-2px) scale(1.01);
}

/* Title */
.card_content2{
  text-align:center;
  padding: 10px 14px 8px;
}
.card_content2 h2{
  margin:0;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.6px;
  text-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.card_content2 p{
  margin: 6px 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- CTA area ---------- */
.dis_flex{
  text-align:center;
  padding: 10px 12px 14px;
}

/* small action pills */
.link_btn{
  display:inline-block;
  padding: 10px 14px;
  margin: 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #0a0a0a;
  background: linear-gradient(90deg, var(--p2), #a7f3d0);
  box-shadow: var(--shadow2);
  border: 1px solid rgba(255,255,255,.25);
  transition: .22s;
}
.link_btn:hover{
  transform: translateY(-2px);
}

/* big CTAs (neon buttons) */
.big_btns{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  width: 48%;
  padding: 12px 10px;
  margin: 6px 4px;
  border-radius: var(--radius2);
  font-size: 13px;
  font-weight: 900;
  color:#fff;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(90deg, var(--p1), var(--p4));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transition: transform .18s ease, filter .18s ease;
  position:relative;
  overflow:hidden;
}
.big_btns::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.28), transparent 60%);
  transform: translateX(-120%);
  transition: .35s;
}
.big_btns:hover{
  transform: translateY(-3px) scale(1.01);
  filter: brightness(1.06);
}
.big_btns:hover::after{
  transform: translateX(120%);
}

/* alternate button gradient */
.big_btns:nth-of-type(2n){
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(90deg, var(--p2), var(--p3));
}

/* ---------- Contact list: glass rows ---------- */
.contact_details{
  padding: 10px 14px 12px;
}
.contact_details .contact_d{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 12px 12px;
  margin: 10px 0;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  transition: .2s;
}
.contact_details .contact_d:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
}
.contact_details .contact_d i{
  width: 40px;
  height: 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  color:#fff;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  box-shadow: 0 12px 24px rgba(0,0,0,.22);
  flex: 0 0 40px;
}
.contact_details .contact_d p{
  margin:0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--text);
  word-break: break-word;
}

/* ---------- Social icons: floating ---------- */
.dis_flex .social_med{ margin: 10px 0 18px; display:inline-block; }
.social_med i{
  width: 44px; height: 44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 16px;
  margin: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 24px rgba(0,0,0,.20);
  transition:.2s;
}
.social_med i:hover{ transform: translateY(-2px) rotate(-2deg); }

/* ---------- Sections (card2) unique: glass white panel ---------- */
.card2{
  background: rgba(255,255,255,.92);
  color:#111827;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  margin-bottom: 92px;
  animation: popIn .55s ease both;
}

/* section header with animated underline */
.card2 h3{
  margin:0;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 900;
  color:#fff;
  background: linear-gradient(90deg, var(--p1), var(--p2));
  position:relative;
}
.card2 h3::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:0;
  height: 2px;
  background: linear-gradient(90deg, var(--p3), var(--p4));
  opacity:.8;
}

/* About */
#about_us p{
  white-space: pre-line;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.9;
  padding: 12px 14px 14px;
  margin:0;
  color:#111827;
}

/* Forms */
.card2 form input,
.card2 form textarea{
  width: calc(100% - 28px);
  margin: 8px 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  outline:none;
  transition:.18s;
}
.card2 form input:focus,
.card2 form textarea:focus{
  border-color: rgba(124,58,237,.45);
  box-shadow: 0 0 0 4px rgba(124,58,237,.12);
}
.card2 form input[type=submit]{
  background: linear-gradient(90deg, var(--p1), var(--p4));
  color:#fff;
  font-weight: 900;
  border:none;
  cursor:pointer;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.card2 iframe{
  width: calc(100% - 28px);
  height: 220px;
  margin: 10px 14px 14px;
  border:0;
  border-radius: 14px;
}

/* ---------- Gallery/Product as modern tiles (no HTML change) ---------- */
.product_s, .img_gall{
  background:#fff;
  border-radius: 18px;
  margin: 12px 14px;
  padding: 12px;
  border: 1px solid #eee;
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
  overflow:hidden;
}
.product_s p{
  margin: 8px 2px 10px;
  font-weight: 900;
  color:#111827;
}

/* If many images exist inside .img_gall -> grid thumbnails */
.img_gall{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 10px !important;
  padding: 12px !important;
}
@media (min-width: 760px){
  .img_gall{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
.img_gall img,
.product_s img{
  width:100%;
  height: 120px;
  object-fit: cover;
  border-radius: 14px;
  display:block;
  cursor: zoom-in;
  transition:.2s;
}
.img_gall img:hover,
.product_s img:hover{
  transform: translateY(-2px) scale(1.02);
}

/* Payment image */
#payment img{
  width: calc(100% - 28px);
  margin: 10px 14px 14px;
  border-radius: 16px;
  display:block;
}

/* ---------- Shop online grid ---------- */
#shop_online{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 14px 14px;
}
.order_box{
  background:#fff;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid #eee;
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
  transition:.2s;
}
.order_box:hover{ transform: translateY(-3px); }
.order_box img{
  width:100%;
  height:140px;
  object-fit:cover;
  display:block;
}
.order_box h2{ margin:0; padding:10px 10px 4px; font-size:13px; font-weight:900; }
.order_box h4{ margin:0; padding:0 10px 8px; font-size:13px; font-weight:900; color:#22c55e; }
.order_box p{ margin:0; padding:0 10px 10px; font-size:12px; font-weight:700; color:#6b7280; }
.btn_buy{
  display:inline-block;
  margin: 0 auto 12px;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  color:#fff;
  background: linear-gradient(90deg, var(--p2), var(--p3));
}

/* ---------- Bottom menu: glass dock ---------- */
.menu_bottom{
  position:fixed;
  left:0; bottom:0;
  width:100%;
  background: rgba(10,12,20,.55);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.10);
  z-index:9999;
  overflow-x:auto;
}
.menu_container{
  max-width: var(--max);
  margin: 0 auto;
  display:flex;
  justify-content: space-around;
  align-items:center;
}
.menu_item{
  text-align:center;
  font-size: 11px;
  font-weight: 900;
  padding: 10px 10px;
  color:#fff;
  opacity:.95;
  white-space: pre;
  transition:.2s;
}
.menu_item i{
  font-size: 18px;
  display:block;
  margin-bottom: 4px;
  color: var(--p2);
}
.menu_item:hover{
  transform: translateY(-2px);
  opacity:1;
}

/* ---------- Responsive ---------- */
@media (max-width:380px){
  .big_btns{ width: 100%; }
  .img_gall img, .product_s img{ height: 110px; }
}