@font-face {
  font-display: swap;
}

/* ===============================
   NEW YEAR POPUP – FINAL CSS
================================ */

/* Overlay */
.newyear-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.65);
  display: none;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 9999;
}

/* Popup Box */
.newyear-popup {
  background: #ffffff;
  width: 90%;
  max-width: 420px;
  padding: 32px 26px;
  border-radius: 12px;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
  animation: popupFade 0.4s ease;
  z-index: 10000;
}

/* Close Button */
.popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: none;
  font-size: 28px;
  cursor: pointer;
  color: #444;
  z-index: 10001;
}

/* Logo */
.popup-logo {
  max-width: 85px;
  margin-bottom: 15px;
}

/* Heading */
.newyear-popup h3 {
  font-size: 22px;
  color: #1d3557;
  margin-bottom: 14px;
}

/* Text */
.newyear-popup p {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Highlight */
.popup-wish strong {
  color: #b11226;
}

/* Button */
.newyear-popup .btn.crose-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 24px;
  background: #1d3557;
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-size: 14px;
}

/* Animation */
@keyframes popupFade {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Mobile */
@media (max-width: 480px) {
  .newyear-popup {
    padding: 26px 20px;
  }

  .newyear-popup h3 {
    font-size: 20px;
  }

  .newyear-popup p {
    font-size: 14px;
  }

  .popup-logo {
    max-width: 70px;
  }
}




    .website-counter {
  background-color: #ff4957;
  height: 50px;
  width: 80px;
  color: white;
  border-radius: 30px;
  font-weight: 700;
  font-size: 25px;
  margin-top: 10px;
}

/* Styles for reset button */
#reset {
  margin-top: 20px;
  background-color: #008cba;
  cursor: pointer;
  font-size: 18px;
  padding: 8px 20px;
  color: white;
  border: 0;
}
    
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #c92f2f;
  color: white;
}
#theme {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#theme td, #theme th {
  border: 1px solid #ddd;
  padding: 8px;
}

#theme tr:nth-child(even){background-color: #f2f2f2;}

#theme tr:hover {background-color: #ddd;}

#theme th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #9D9D98;
  color: #000;
}

.marquee {
    width: 100%; /* Adjust width as needed */
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    background-color: #db0808; /* Background color for the marquee */
    color: #FFD700; /* Text color (golden yellow) */
   
    padding: 1px; /* Adjust padding as needed */
}


.marquee p {
    color: #fff;
    font-weight:bold;
    display: inline-block;
    padding: 1px; /* Adjust padding as needed */
    animation: marquee 15s linear infinite; /* Adjust speed and direction as needed */
    font-size: 30px;
}

@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.single-hero-slide {
  background-image: image-set(
    url('img/bg-img/church-2022.webp') type('image/webp'),
    url('img/bg-img/church-2022.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center;
}



.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* ensures content stays above */
}

.bg-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4); /* dark overlay effect */
  z-index: -1;
}

.call-to-action-area {
  position: relative;
  width: 100%;
  min-height: 400px; /* adjust based on design */
  overflow: hidden;
}
.cta-content {
  position: relative;
  z-index: 1; /* keep content above overlay */
  color: #fff;
}



/* ---------- Premium Glass UI + Polished Layout ---------- */
:root{ --maroon:#800000; --gold:#d4af37; }

/* floating icon */
#hctc-bot-icon{ position:fixed; bottom:24px; right:24px; width:92px; height:92px; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:linear-gradient(180deg,var(--maroon),#a00000); color:#fff; border-radius:18px; border:3px solid var(--gold); box-shadow:0 14px 34px rgba(0,0,0,0.35), 0 0 28px rgba(212,175,55,0.08); font-weight:700; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; text-align:center; }
#hctc-bot-icon:hover{ transform:scale(1.06); }

/* preview */
#hctc-preview{ position:fixed; bottom:122px; right:120px; z-index:9998; background:#fff8f2; color:var(--maroon); padding:8px 12px; border-radius:18px; border:1px solid rgba(212,175,55,0.9); box-shadow:0 6px 18px rgba(0,0,0,0.14); cursor:pointer; }

/* chatbox (glass) */
#hctc-chatbox{ position:fixed; bottom:96px; right:24px; width:380px; height:540px; z-index:9999; display:none; flex-direction:column; border-radius:18px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.32)); backdrop-filter: blur(14px) saturate(140%); border:1px solid rgba(212,175,55,0.22); box-shadow:0 18px 48px rgba(0,0,0,0.32); }
#hctc-chatbox.show{ animation:chatOpen .28s cubic-bezier(.2,.9,.25,1) both; }
@keyframes chatOpen{ from{ transform:translateY(8px) scale(.995); opacity:0 } to{ transform:none; opacity:1 } }

/* header */
#hctc-header{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:linear-gradient(135deg,var(--maroon),#a00000); color:#fff; border-bottom:1px solid rgba(255,255,255,0.06); }
.hctc-logo{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); background:#fff; }
.hctc-title h4{ margin:0; font-size:16px; }
.hctc-title p{ margin:0; font-size:12px; color:rgba(255,255,255,0.9); }
#hctc-close{ margin-left:auto; background:transparent; border:0; color:#fff; font-size:18px; cursor:pointer; }

/* menu */
#hctc-menu{ padding:10px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); }
.menu-btn{ background:linear-gradient(180deg,var(--maroon), #9c0000); color:#fff; border-radius:24px; padding:6px 12px; border:1px solid rgba(212,175,55,0.14); cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,0.08); font-size:13px; }
.menu-btn:active{ transform:translateY(1px); }

/* body */
#hctc-body{ flex:1; padding:14px; overflow-y:auto; scroll-behavior:smooth; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); }

/* messages */
.msg{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; margin:10px 0; border-radius:14px; max-width:85%; line-height:1.35; box-shadow:0 6px 18px rgba(0,0,0,0.06); }
.user{ margin-left:auto; background:linear-gradient(180deg,var(--maroon), #a00000); color:#fff; border:1px solid rgba(0,0,0,0.08); }

/* bot bubble uses inline logo element */
.bot{ background:rgba(255,255,255,0.95); color:#111; border-left:4px solid var(--gold); }
.bot .bot-logo{ width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); flex-shrink:0; }
.bot .bot-text{ display:block; }

/* typing */
.typing{ background:rgba(255,255,255,0.95); padding:10px 12px; border-radius:12px; display:inline-flex; gap:6px; align-items:center; }
.typing span{ width:6px; height:6px; border-radius:50%; background:#666; opacity:.28; animation:blink 1.4s infinite; }
.typing span:nth-child(2){ animation-delay:.18s } .typing span:nth-child(3){ animation-delay:.36s }
@keyframes blink{0%,80%,100%{opacity:.28}40%{opacity:1}}

/* input */
#hctc-input{ display:flex; gap:8px; padding:10px; border-top:1px solid rgba(0,0,0,0.04); background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.85)); }
#hctc-input input{ flex:1; padding:10px 12px; border-radius:20px; border:1px solid rgba(0,0,0,0.06); outline:none; }
#mic-btn{ width:46px; border-radius:12px; background:var(--maroon); color:#fff; border:0; cursor:pointer; }
#mic-btn.listening{ background:var(--gold); color:#000; box-shadow:0 6px 18px rgba(212,175,55,0.24); }
#bot-send{ width:46px; border-radius:12px; background:linear-gradient(180deg,var(--gold), #ffd966); color:#2b1b00; border:0; cursor:pointer; font-weight:700; }

/* responsive */
@media (max-width:600px){ #hctc-chatbox{ width:94%; right:3%; height:72vh; bottom:88px; } #hctc-preview{ right:90px; } }