/* Unicode Sinhala webfont (works with text like "පන්ති සදහා") */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Sinhala:wght@400;500;600;700&display=swap');

/*
  Malithi note:
  - Your CSS references malithi_web.eot/woff/ttf, but they are missing in /public/fonts/malithi/ (only .svg exists)
  - Also, "Malithi" is typically a legacy (non‑Unicode) Sinhala font, so it won't style Unicode Sinhala text correctly.
  Keeping it as an optional fallback if you later add proper web font files.
*/
@font-face {
    font-family: 'Malithi_Web';
    src: url('../fonts/malithi/malithi_web.eot');
    src: url('../fonts/malithi/malithi_web.woff') format('woff'), 
    url('../fonts/malithi/malithi_web.ttf') format('truetype'), 
    url('../fonts/malithi/malithi_web.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

:root {
  /* Sinhala-first font stack */
  --app-font-body: "Poppins", 'Malithi_Web', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --app-font-title: "Poppins", 'Malithi_Web', "Aeonik Pro TRIAL",  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Apply Sinhala font across the whole site */
html,
body,
.page-wrapper {
  font-family: var(--app-font-body) !important;
}

/* Template uses these for headings/titles */
h1,
h2,
h3,
h4,
h5,
h6,
.font-title {
  font-family: var(--app-font-title) !important;
}
.bg-colorPurpleRed{
  background-color: #D73B3E !important;
}

/* Section background padding */
.section-bg {
  padding-top: 60px;
}

@media (min-width: 768px) {
  .section-bg {
    padding-top: 80px;
  }
}

@media (min-width: 992px) {
  .section-bg {
    padding-top: 100px;
  }
}

/* Reduce hero/slider H1 size (keep other headings unchanged) */
.section-hero .hero-slider-1 h1 {
  font-size: 1.75rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .section-hero .hero-slider-1 h1 {
    font-size: 2.25rem;
  }
}

@media (min-width: 992px) {
  .section-hero .hero-slider-1 h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1200px) {
  .section-hero .hero-slider-1 h1 {
    font-size: 2.8rem; /* was 80px globally */
    letter-spacing: -1px;
  }
}

/* Make form controls inherit the site font */
button,
input,
textarea,
select,
optgroup {
  font-family: inherit !important;
}

.block-clip-rb {
  clip-path: polygon(0 0, 100% 0%, 100% 80%, 0% 100%);
}

.block-clip-lt{
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0% 100%);
}

.block-clip-lb{
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 100%);
}

.redial-gradient-dark{
  background: rgb(1,28,26);
  background: radial-gradient(circle, rgba(1,28,26,0) 0%, rgba(1,28,26,0.52) 100%);
}

@keyframes animation-left-to-right{
  from {
    transform: translateX(-7px)
  }
  to{
    transform: translateX(7px)
  }
}
@keyframes animation-top-to-bottom{
  from {
    transform: translateY(7px)
  }
  to{
    transform: translateY(-7px)
  }
}

.animation-left-to-right{
  animation: animation-left-to-right 1.5s linear infinite alternate;
}
.animation-top-to-bottom{
  animation: animation-top-to-bottom 1s linear infinite alternate;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}

.scrolling {
  position: fixed;
  width: 100%;
  top:0;
  left: 0;
  z-index: 9999; /* keep header above sections using z-10/z-20 */
  animation: fadeInDown 0.9s 1;
  backdrop-filter: blur(10px);
}
.scrolling.bg-invert{
  background: rgba(255, 255, 255, 0.7)
  
}
.scrolling.bg-dark{
  background: rgba(0, 0, 0, 0.5)
}

/* Preloader styles */
.preloader {
  position: fixed;
  inset: 0;
  background-color: #eaebeb;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: transform 1s ease-in-out;
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(18px);
  color: #0f172a;
}

/* Typing animation */
.typing-animation {
  font-size: clamp(2rem, 4vw, 3rem);
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  animation: typing 2s steps(50, end) infinite, blink 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; opacity:0}
  to { width: 100%; opacity:1}
}

@keyframes blink {
  from, to { border-color: transparent; }
  50% { border-color: white; }
}

/* Hide main content only when a preloader is used */
body.has-preloader .page-wrapper {
  display: none;
}

/* Preloader hide animation */
.preloader.hide {
  transform: translateY(-100%);
}

/* Show main content after preloader is hidden */
body.has-preloader .page-wrapper.show {
  display: block;
}

.element-move,
.element-move-x {
  transition: transform 0.3s ease; /* Adjust duration and easing as needed */
}

/* =========================================================
   Dark theme overrides (template-wide)
   Apply by adding `theme-dark` on <body>
   ========================================================= */
body.theme-dark {
  /* Core palette */
  --td-bg: #111827;
  --td-surface: #111827;
  --td-surface-2: #0f172a;
  --td-border: rgba(255, 255, 255, 0.12);
  --td-text: rgba(255, 255, 255, 0.92);
  --td-muted: rgba(255, 255, 255, 0.7);

  /* Accent (requested) */
  --td-accent: #82387d;
  --td-accent-hover: #6d2f69;
}

body.theme-dark {
  background-color: var(--td-bg);
  color: var(--td-muted);
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6 {
  color: var(--td-text);
}

/* Utility class overrides from `style.css` */
body.theme-dark .bg-white {
  background-color: var(--td-surface) !important;
}
body.theme-dark .bg-\[\#FAF9F6\] {
  background-color: var(--td-bg) !important;
}
body.theme-dark .bg-\[\#F5F5F5\],
body.theme-dark .bg-\[\#f5f5f5\] {
  background-color: var(--td-surface-2) !important;
}

/* Remove green tints used by the template */
body.theme-dark .bg-\[\#6FC081\] {
  background-color: rgba(130, 56, 125, 0.22) !important;
}
body.theme-dark .bg-\[\#6FC081\]\/10 {
  background-color: rgba(130, 56, 125, 0.12) !important;
}

/* Green-ish section overlays -> purple tint */
body.theme-dark .from-\[\#033C37\]\/45 {
  --tw-gradient-from: rgb(130 56 125 / 0.35) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(130 56 125 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

body.theme-dark .text-colorBlackPearl {
  color: var(--td-text) !important;
}
body.theme-dark .text-colorCarbonGrey {
  color: var(--td-muted) !important;
}

body.theme-dark .border-\[\#D7D7D7\] {
  border-color: var(--td-border) !important;
}
body.theme-dark .border-colorBlackPearl {
  border-color: var(--td-border) !important;
}
body.theme-dark .border-colorBlackPearl\/10 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
body.theme-dark .border-colorBlackPearl\/25 {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Replace purple accent utilities everywhere */
body.theme-dark .bg-colorPurpleBlue {
  background-color: var(--td-accent) !important;
}
body.theme-dark .text-colorPurpleBlue {
  color: var(--td-accent) !important;
}
body.theme-dark .border-colorPurpleBlue {
  border-color: var(--td-accent) !important;
}
body.theme-dark .hover\:bg-\[\#4533bb\]:hover,
body.theme-dark .hover\:bg-colorPurpleBlue:hover {
  background-color: var(--td-accent-hover) !important;
}
body.theme-dark .hover\:text-colorPurpleBlue:hover {
  color: var(--td-accent) !important;
}

/* Header glass background (was light “invert”) */
body.theme-dark header.bg-invert,
body.theme-dark .scrolling.bg-invert {
  background: rgba(17, 24, 39, 0.82) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Mobile hamburger should stay visible */
body.theme-dark .hamburger-menu span,
body.theme-dark .hamburger-menu span::before,
body.theme-dark .hamburger-menu span::after {
  background-color: rgba(255, 255, 255, 0.88) !important;
}

/* Forms */
body.theme-dark input,
body.theme-dark textarea,
body.theme-dark select {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--td-text);
  border-color: var(--td-border);
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

/* Overlay */
body.theme-dark .overlay-bg {
  background: rgba(0, 0, 0, 0.65) !important;
}

/* Preloader */
body.theme-dark .preloader {
  background-color: #050a16;
}
body.theme-dark .preloader-content {
  color: var(--td-text);
  border-color: rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
body.theme-dark .typing-animation {
  color: var(--td-text);
}

/* Dark/grey icon assets become invisible on dark bg — invert them */
body.theme-dark img[src*="/img/icons/"][src*="dark"],
body.theme-dark img[src*="/img/icons/"][src*="grey"],
body.theme-dark img[src*="icon-dark-"] {
  filter: invert(1) brightness(1.1);
}

/* Force specific icons to white (used in footer contact block) */
body.theme-dark img.theme-icon-white {
  filter: brightness(0) invert(1) !important;
}

/* =========================================================
   Achievements section (guest-home)
   ========================================================= */
.section-achievements {
  position: relative;
}

.achievement-panel {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: clamp(22px, 3.2vw, 40px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(1200px 520px at 50% 20%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%),
    radial-gradient(700px 420px at 18% 35%, rgba(130, 56, 125, 0.35), rgba(130, 56, 125, 0) 60%),
    radial-gradient(700px 420px at 82% 55%, rgba(245, 158, 11, 0.20), rgba(245, 158, 11, 0) 60%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(11, 16, 32, 0.96));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
}

/* Subtle “spotlight” following the mouse (controlled via JS vars) */
.achievement-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    520px 520px at var(--mx, 50%) var(--my, 40%),
    rgba(130, 56, 125, 0.22),
    rgba(130, 56, 125, 0) 65%
  );
  opacity: 0;
  transition: opacity 280ms ease;
}
.achievement-panel.is-hover::before {
  opacity: 1;
}

.achievement-head {
  text-align: center;
  max-width: 980px;
  margin: 0 auto 26px;
}

.achievement-badge {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  background: radial-gradient(circle at 30% 30%, rgba(245, 158, 11, 0.95), rgba(245, 158, 11, 0.38));
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.20);
}

.achievement-title {
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(1.35rem, 2.2vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}
.achievement-subtitle {
  color: rgba(255, 255, 255, 0.72);
  max-width: 850px;
  margin: 0 auto;
}

.achievement-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 26px;
}
@media (min-width: 992px) {
  .achievement-grid {
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 22px;
    align-items: stretch;
  }
}

.achievement-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 24px 18px;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px);
  transform: translateZ(0);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

/* Animated gradient “edge glow” */
.achievement-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: conic-gradient(
    from 180deg at 50% 50%,
    rgba(130, 56, 125, 0.0),
    rgba(130, 56, 125, 0.55),
    rgba(245, 158, 11, 0.45),
    rgba(130, 56, 125, 0.0)
  );
  filter: blur(10px);
  opacity: 0;
  transition: opacity 240ms ease;
}

.achievement-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
}
.achievement-card:hover::before {
  opacity: 1;
  animation: ach-rotate 2.2s linear infinite;
}

@keyframes ach-rotate {
  to {
    transform: rotate(360deg);
  }
}

.achievement-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.achievement-card:hover .achievement-card__icon {
  animation: ach-pop 900ms ease both;
}
@keyframes ach-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); }
  100% { transform: scale(1.02); }
}

.achievement-card__count {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  color: rgb(255 105 110);
  letter-spacing: 0.5px;
}
.achievement-card__year {
  margin-top: 6px;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}
.achievement-card__label {
  margin-top: 2px;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.75);
}

.achievement-card.is-featured {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(130, 56, 125, 0.45);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
.achievement-card.is-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(520px 320px at 50% 30%, rgba(130, 56, 125, 0.35), rgba(130, 56, 125, 0) 60%);
  opacity: 1;
}
.achievement-card__pin {
  position: absolute;
  display: none;
  left: 50%;
  top: 10px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgb(255 105 110);
  box-shadow: 0 0 0 10px rgba(255, 105, 110, 0.14);
}

.achievement-bg-glow {
  position: absolute;
  inset: auto 0 -120px 0;
  height: 280px;
  background: radial-gradient(closest-side, rgba(130, 56, 125, 0.35), rgba(130, 56, 125, 0));
  filter: blur(40px);
  pointer-events: none;
}

/* =========================================================
   Class Roadmap section (guest-home)
   ========================================================= */
:root {
  --step-accent: rgb(215 59 62); /* Jasper */
  --step-card-radius: 22px;
  --step-card-border: rgba(15, 23, 42, 0.10);
  --step-card-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
  --step-card-shadow-hover: 0 26px 70px rgba(15, 23, 42, 0.18);
  --step-text: rgba(15, 23, 42, 0.92);
  --step-muted: rgba(15, 23, 42, 0.65);
  --step-track: rgba(15, 23, 42, 0.12);
}

body.theme-dark {
  --step-card-border: rgba(255, 255, 255, 0.10);
  --step-card-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  --step-card-shadow-hover: 0 30px 90px rgba(0, 0, 0, 0.55);
  --step-text: rgba(255, 255, 255, 0.92);
  --step-muted: rgba(255, 255, 255, 0.70);
  --step-track: rgba(255, 255, 255, 0.12);
}

.guest-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 18px;
  border-radius: var(--step-card-radius);
  border: 1px solid var(--step-card-border);
  box-shadow: var(--step-card-shadow);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  overflow: hidden;
}

.guest-step-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(520px 260px at 20% 10%, rgba(215, 59, 62, 0.12), rgba(215, 59, 62, 0) 60%);
  opacity: 0;
  transition: opacity 220ms ease;
}

.guest-step-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--step-card-shadow-hover);
  border-color: rgba(215, 59, 62, 0.28);
}
.guest-step-card:hover::before {
  opacity: 1;
}

.guest-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.guest-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.guest-step-no {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1;
  color: var(--step-accent);
  background: rgba(15, 23, 42, 0.94);
}
body.theme-dark .guest-step-no {
  background: rgba(0, 0, 0, 0.45);
}

.guest-step-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: rgba(15, 23, 42, 0.9);
  background: rgba(215, 59, 62, 0.10);
  border: 1px solid rgba(215, 59, 62, 0.18);
}
body.theme-dark .guest-step-icon {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(215, 59, 62, 0.14);
  border-color: rgba(215, 59, 62, 0.22);
}

.guest-step-cta {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--step-accent);
  color: #fff;
  box-shadow: 0 14px 34px rgba(215, 59, 62, 0.30);
  flex: 0 0 auto;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.guest-step-card:hover .guest-step-cta {
  transform: translateX(2px);
  box-shadow: 0 18px 42px rgba(215, 59, 62, 0.36);
}

.guest-step-title {
  margin-top: 4px;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--step-text);
}

.guest-step-text {
  margin-top: -2px;
  color: var(--step-muted);
}

.guest-step-progress {
  margin-top: auto;
  height: 6px;
  border-radius: 999px;
  background: var(--step-track);
  overflow: hidden;
}

.guest-step-progress .progress-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, var(--step-accent) 100%);
  transition: width 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.theme-dark .guest-step-progress .progress-bar {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0%, var(--step-accent) 100%);
}

/* =========================================================
   Gallery section (guest-home)
   ========================================================= */
.section-gallery {
  /* Offset for fixed/sticky header so content doesn't hide under menu */
  scroll-margin-top: 90px;
  padding-top: 90px;
  margin-top: -90px;
}

@media (min-width: 992px) {
  .section-gallery {
    scroll-margin-top: 110px;
    padding-top: 110px;
    margin-top: -110px;
  }
}

.guest-gallery-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 28px;
}

.guest-gallery-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: rgb(215 59 62);
  background: rgba(215, 59, 62, 0.10);
  border: 1px solid rgba(215, 59, 62, 0.18);
}

.guest-gallery-title {
  margin-top: 14px;
  font-weight: 900;
  letter-spacing: 0.2px;
  margin-bottom: 70px;
}

.guest-gallery-subtitle {
  margin-top: 14px;
  color: rgba(15, 23, 42, 0.65);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

body.theme-dark .guest-gallery-subtitle {
  color: rgba(255, 255, 255, 0.72);
}

.guest-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 768px) {
  .guest-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .guest-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

.guest-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: #0b1220;
  min-height: 210px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
  transform: translateZ(0);
}

@media (min-width: 1024px) {
  .guest-gallery-item {
    min-height: 240px;
  }
}

.guest-gallery-item.is-wide {
  grid-column: auto;
}

.guest-gallery-item.is-tall {
  grid-column: auto;
}

@media (min-width: 1024px) {
  .guest-gallery-item.is-wide {
    grid-column: span 2;
    height: 320px;
    max-height: 320px; /* ~560x320 look */
    min-height: 0;
  }
  .guest-gallery-item.is-tall {
    grid-row: span 2;
    min-height: 300px;
  }
}

.guest-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 28px;
  transform: scale(1.02);
  transition: transform 320ms ease;
  opacity: 0.95;
}

/* Theme-tinted overlay like screenshot */
.guest-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(520px 320px at 25% 25%, rgba(215, 59, 62, 0.30), rgba(215, 59, 62, 0) 60%);
  opacity: 0.75;
  transition: opacity 320ms ease;
}

.guest-gallery-item:hover img {
  transform: scale(1.06);
}

.guest-gallery-item:hover::after {
  opacity: 0.60;
}

/* Gallery More Button */
.guest-gallery-more-btn {
  border-radius: 52px !important;
  overflow: hidden;
  position: relative;
  transform: translateY(0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.guest-gallery-more-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(84, 62, 232, 0.4) !important;
}

.guest-gallery-more-btn:active {
  transform: translateY(0);
  box-shadow: 0 5px 15px rgba(84, 62, 232, 0.3) !important;
}

.guest-gallery-more-btn svg {
  transition: transform 0.3s ease;
}

.guest-gallery-more-btn:hover svg {
  transform: translateX(4px);
}

/* =========================================================
   Guest Home Popup Styles
   ========================================================= */
.tw-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.65);
  overflow-y: auto;
}

.tw-popup-overlay[hidden] {
  display: none !important;
}

.tw-popup-modal {
  position: relative;
  width: fit-content;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
}

.tw-popup-modal::-webkit-scrollbar {
  width: 8px;
}

.tw-popup-modal::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.tw-popup-modal::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}

.tw-popup-modal::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.7);
}

.tw-popup-content-wrapper {
  position: relative;
  display: block;
  padding-top: 0;
}

.tw-popup-img {
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  display: block;
  border-radius: 14px;
  object-fit: contain;
  object-position: top;
}

.tw-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  color: #111;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  z-index: 10;
  transition: background 0.2s ease;
}

.tw-popup-close:hover {
  background: #fff;
}

@media (max-width: 768px) {
  .tw-popup-modal {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
  .tw-popup-img {
    max-height: 75vh;
  }
}

@media (max-width: 480px) {
  .tw-popup-overlay {
    padding: 8px;
  }
  .tw-popup-modal {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 12px;
  }
  .tw-popup-img {
    max-height: 80vh;
    border-radius: 12px;
  }
  .tw-popup-close {
    width: 32px;
    height: 32px;
    font-size: 20px;
    line-height: 32px;
    margin-right: 8px;
    top: 8px;
  }
}