/* ========== GENERAL STYLES ========== */
@font-face {
    font-family: "MyFont";
    src: url("../assets/fonts/Cinzel-Regular.woff2") format("woff2"),
         url("../assets/fonts/Cinzel-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%; 
}

.title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #efefef;
    text-align: center;
}

body {
    font-family: "Source Sans Pro", sans-serif;

    /* leave your background stuff here if you had it */
       background: rgba(13, 10, 10, 1.0);

    /* 🔹 space for the fixed welcome title */
    /* padding-bottom: clamp(38px, 2.4vh, 46px); */

    /* 🔹 space for the fixed social bar at the bottom */
    padding-bottom: 160px; /* adjust if your social bar is taller/shorter */
    box-sizing: border-box;
}

.eq-footnote {
    font-size: 13px;
    color: #bfbfbf;
    margin-top: 6px;
    font-style: italic;
}

/* ========== PAGE TITLE + INLINE LOGO ========== */
.welcome-title {
    position: fixed;      /* 🔹 make it stay at the top */
    top: 0;               /* 🔹 flush to the top of the window */

    z-index: 9998;        /* below social-bar but above content */

    color: #F2F2F2;
font-family: "Cinzel", Georgia, "Times New Roman", serif;
font-weight: 600;
letter-spacing: 0.0em;
text-transform: uppercase;
    text-transform: uppercase;   /* 🔹 ALL CAPS */

    /* background: rgba(13, 10, 10, 1.0); */

    background: linear-gradient(
        to bottom,
        rgba(13, 10, 10, 1.0) 0%,
        rgba(13, 10, 10, 1.0) 80%,
        rgba(13, 10, 10, 0.0) 100%
    );
    /* responsive font size */
    font-size: clamp(12px, 3.5vw, 30px);

    /* layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;

    /* responsive spacing from top */
    margin: 0;
    padding-top: clamp(8px, 8vh, 12px);
    padding-left: clamp(8px, 8vh, 12px);
    padding-right: clamp(8px, 8vh, 12px);
    padding-bottom: clamp(18px, 8vh, 22px);
    width: 100%;
}

.inline-logo {
    width: 1.8em;          /* scales with text size */
    height: auto;
    margin-right: 0.6em;
}

.title-text {
    transform: scaleX(1.00); /* tiny visual compress */
    display: inline-block;
     transform-origin: left;
}

/* ========== SOCIAL BAR ========== */
/* Social bar frame */
.social-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
        background: linear-gradient(
        to top,
        rgba(13, 10, 10, 1.0) 0%,
        rgba(13, 10, 10, 1.0) 70%,
        rgba(13, 10, 10, 0.0) 100%
    );
    display: flex;
    flex-direction: column;     /* tabs row on top, icons row below */
    gap: 4px;
    padding: 6px 8px;
    box-sizing: border-box;
    z-index: 9999;

    padding-left: clamp(8px, 8vh, 12px);
    padding-right: clamp(8px, 8vh, 12px);
    padding-top: clamp(18px, 8vh, 22px);
    padding-bottom: calc(clamp(8px, 8vh, 12px) + env(safe-area-inset-bottom));
}

.social-bar a {
    color: #ffffff;
    font-size: clamp(18px, 2.4vw, 26px);
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.social-bar a:hover {
    transform: translateY(-3px);
    color: #00FFFF;
}


/* Icons row */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    
}

/* Make the QR page match your dark theme */
.qr-body {
  margin: 0;
  padding: 0;
  background: #0d0a0a;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* QR content container */
.qr-box {
  text-align: center;
}

/* QR image styling */
.qr-img {
  width: 60vw;         /* responsive, scales on mobile */
  max-width: 320px;    /* avoid giant QR on desktop */
  border-radius: 12px;
}

/* Caption text */
.qr-caption {
  margin-top: 12px;
  color: #e0e0e0;
  font-size: 16px;
}

.social-label {
    font-size: 13px;
    font-weight: 700;       /* 🔹 bold text */
    color: #f2f2f2;
    opacity: 0.9;
    display: flex;          /* 🔹 helps align text nicely in flex row */
    align-items: center;
    margin-right: 4px;      /* small gap before first icon */
    font-family: "Cinzel", Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: 0.0em;
    /* text-transform: uppercase; */
}

/* ========== CONTAINER & BOXES ========== */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;

    padding: 6px;
    margin: 0 auto 70px;  /* 👈 bottom margin keeps content above bar */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

        /* 🔹 make the row of boxes at least fill the viewport between header & footer */
    min-height: 100vh;

    /* make boxes stretch vertically across that height */
    align-items: stretch;
}   

.box {
    background: rgba(137, 18, 18, 0.7);
    color: #F2F2F2;

    padding: 16px;

    /* let height adapt, but allow scroll if very tall */
    min-height: 10px;
    /* max-height: 100vh; */
    overflow-y: auto;
    overflow-x: hidden;  
    /* flex layout: grows, shrinks, base width ~320px */
    flex: 1 1 320px;
    box-sizing: border-box;

    padding-top: clamp(45px, 30vh, 80px);
    padding-bottom: clamp(45px, 30vh, 80px);
}

/* Column 1 — Definition */
/* Only style the 3-column homepage */
.home-cols .box:nth-child(1) {
  background: rgba(255,255,255,0.04);
  border: 5px solid rgb(176, 57, 57);
}

.home-cols .box:nth-child(2) {
  background: rgba(255,255,255,0.04);
  border: 5px solid rgb(35, 164, 98);
}

.home-cols .box:nth-child(3) {
  background: rgba(255,255,255,0.04);
  border: 5px solid rgb(45, 130, 234);
}
/* ============================= */
/* Submission / confirmation box */
/* ============================= */
/* ============================================================
   JOIN THEME (reusable)
   ============================================================ */

.theme-join {
  --accent: rgb(45, 130, 234);
  --accent-soft: rgba(75, 160, 254, 0.6);
  --accent-border: rgba(45, 130, 234, 0.55);
}

/* Button – available */
.theme-join .nav-btn.available {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: #f5f5f5;
}

.theme-join .nav-btn.available:hover,
.theme-join .nav-btn.available:focus-visible,
.theme-join .nav-btn.available:active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}

/* Strong text */
.theme-join strong {
  color: var(--accent);
}

.box-submission {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical centering */
  align-items: center;       /* horizontal centering */
  text-align: center;
  background: rgba(255,255,255,0.04);
  border: 5px solid rgb(45, 130, 234); /* vibrant blue-violet */

  min-height: 60vh;          /* gives breathing room */
}

/* Optional: tighten text width for readability */
.box-submission p {
  max-width: 520px;
}

/* ========== RESPONSIVE TWEAKS ========== */

/* Small phones */
@media (max-width: 700px) {

    /* .container {
        padding: 8px;
        
    } */

    .box {
        flex: 1 1 100%;      /* one per row */
        max-height: none;    /* let them grow, less scrolling */
    }
}

/* Medium screens (tablets, small laptops) */
@media (min-width: 701px) and (max-width: 1024px) {
    .box {
        flex: 1 1 calc(50% - 24px);  /* two columns */
        max-height: none;
    }
}

/* Large screens (desktops) */
@media (min-width: 1025px) {
    .box {
        flex: 1 1 calc(33.333% - 24px); /* up to three columns */
    }
}


/* Tabs row inside social bar */
.mobile-tabs {
    display: flex;
    width: 100%;
    gap: 6px;
}

/* Each tab fills part of the row */
.mobile-tabs .tab-btn {
    flex: 1;                    /* 🔹 distribute evenly across the row */
    text-align: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.6);
    color: #f2f2f2;
    padding: 6px 4px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 400;           /* normal by default */
}

/* Tabs for boxes that are currently visible */

/* First column active */
.mobile-tabs .tab-btn[data-index="0"].active {
    background: rgb(176, 57, 57);
    color: #fff;
    font-weight: 700;
}

/* Second column active */
.mobile-tabs .tab-btn[data-index="1"].active {
    background: rgb(35, 164, 98);
    color: #fff;
    font-weight: 700;
}

/* Third column active */
.mobile-tabs .tab-btn[data-index="2"].active {
    background: rgb(45, 130, 234);
    color: #fff;
    font-weight: 700;
}

/* Desktop: normal multi-column boxes, no tabs */
@media (min-width: 1025px) {
    .box {
        display: block !important; /* ensure all visible on desktop */
    }
}

/* Tablet / mobile: tab mode enabled */
@media (max-width: 1024px) {
    .mobile-tabs {
        display: flex;
        flex-wrap: wrap;
    }
}

/* Extra (hidden) boxes when shown via tab: full width */
.box.extra-visible {
    flex: 1 1 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* ========== PAPERS LIST ========== */
.papers a {
    color: #0066FF;
    font-weight: 600;
    text-decoration: none;
}

.papers a:hover {
    text-decoration: underline;
}

.bottom-indicator {
    position: fixed;
    bottom: clamp(85px, 6.5vw, 95px);                    /* sits above social bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    transition: opacity 0.3s ease;   /* smooth fade */
}

.bottom-indicator.hidden {
    opacity: 0;                      /* fade out when hidden */
}

.bottom-indicator i {
    font-size: 30px;
    color: rgba(142, 5, 5, 0.85);
    animation: bounceFade 1.6s infinite ease-in-out;
}

/* blinking + gentle downward movement */
@keyframes bounceFade {
    0%   { opacity: 0.2; transform: translateY(0); }
    50%  { opacity: 1;   transform: translateY(6px); }
    100% { opacity: 0.2; transform: translateY(0); }
}

/* Top indicator (scroll up) */
.top-indicator {
    position: fixed;
    top: clamp(60px, 6vh, 95px);  /* adjust based on your welcome-title height */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    transition: opacity 0.3s ease;
    opacity: 0;                  /* hidden initially */
    pointer-events: none;
}

.top-indicator.visible {
    opacity: 1;
}

.top-indicator i {
    font-size: 30px;
    color: rgba(142, 5, 5, 0.85);
    animation: bounceUp 1.6s infinite ease-in-out;
}

/* upward gentle blinking */
@keyframes bounceUp {
    0%   { opacity: 0.2; transform: translateY(0); }
    50%  { opacity: 1;   transform: translateY(-6px); }
    100% { opacity: 0.2; transform: translateY(0); }
}



/* ============================================================
   BASE BUTTON STYLE
   ============================================================ */
.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 14px;
    border-radius: 6px;
    margin-top: 12px;
    margin-bottom: 12px;

    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.18);
    color: #e5e5e5;

    font-size: 14px;
    font-weight: 500;
    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.12s ease,
        opacity 0.18s ease;
}

.nav-btn i {
    font-size: 12px;
}

.nav-btn.coming-soon {
    position: relative;
    overflow: hidden;               /* keeps everything inside */
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Both labels behave identically */
.nav-btn.coming-soon .btn-label {
    transition: opacity 0.18s ease;
    display: inline-block;
}

/* DEFAULT label is part of layout */
.nav-btn.coming-soon .btn-label-default {
    opacity: 1;
    visibility: visible;
}

/* HOVER label is NOT part of layout — fully overlayed */
.nav-btn.coming-soon .btn-label-hover {
    position: absolute;
    left: 14px;              /* match button padding */
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;     /* avoids wrapping → prevents overflow */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Swap visibility */
.nav-btn.coming-soon:hover .btn-label-default {
    opacity: 0;
    visibility: hidden;
}

.nav-btn.coming-soon:hover .btn-label-hover {
    opacity: 1;
    visibility: visible;
}

/* Optional softer disabled hover tint */
.nav-btn.coming-soon:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.24);
    cursor: default;
}
/* ============================================================
   COLUMN 1 — DEFINITION (burgundy)
   ============================================================ */

/* AVAILABLE (normal) */
.home-cols .box:nth-child(1) .nav-btn.available {
    background: rgb(206, 87, 87,0.6);
    border-color: rgba(176, 57, 57, 0.55);
    color: #f5f5f5;
}

/* AVAILABLE (hover) */
.home-cols .box:nth-child(1) .nav-btn.available:hover,
.home-cols .box:nth-child(1) .nav-btn.available:focus-visible,
.home-cols .box:nth-child(1) .nav-btn.available:active {
    background: rgb(176, 57, 57);
    border-color: rgb(176, 57, 57);
    color: #fff;
    transform: translateY(-1px);
}

/* COMING SOON */
.home-cols .box:nth-child(1) .nav-btn.coming-soon {
    background:  rgb(206, 87, 87,0.6);
    border-color: rgba(176, 57, 57, 0.55);
    color: #f0f0f0;
    cursor: default;
}

/* COMING SOON (hover) */
.home-cols .box:nth-child(1) .nav-btn.coming-soon:hover,
.home-cols .box:nth-child(1) .nav-btn.coming-soon:focus {
    background:  rgb(106, 87, 87);
    border-color: rgba(140, 140, 140, 0.6);
    color: #bdbdbd;
    transform: none;
}


/* ============================================================
   COLUMN 2 — DOCS (forest green)
   ============================================================ */

/* AVAILABLE (normal) */
.home-cols .box:nth-child(2) .nav-btn.available {
    background: rgba(65, 194, 128,0.6);
    border-color: rgba(35, 164, 98, 0.55);
    color: #f5f5f5;
}

/* AVAILABLE (hover) */
.home-cols .box:nth-child(2) .nav-btn.available:hover,
.home-cols .box:nth-child(2) .nav-btn.available:focus-visible,
.home-cols .box:nth-child(2) .nav-btn.available:active {
    background: rgb(35, 164, 98);
    border-color: rgb(35, 164, 98);
    color: #fff;
    transform: translateY(-1px);
}

/* COMING SOON */
.home-cols .box:nth-child(2) .nav-btn.coming-soon {
    background: rgba(65, 194, 128,0.6);
    border-color: rgba(35, 164, 98, 0.55);
    color: #f0f0f0;
    cursor: default;
}

/* COMING SOON (hover) */
.home-cols .box:nth-child(2) .nav-btn.coming-soon:hover,
.home-cols .box:nth-child(2) .nav-btn.coming-soon:focus {
    background:rgba(65, 104, 128);
    border-color: rgba(140, 155, 150, 0.6);
    color: #bdbdbd;
    transform: none;
}



/* ============================================================
   COLUMN 3 — JOIN (bright indigo / blue)
   ============================================================ */

/* AVAILABLE (normal) */
.home-cols .box:nth-child(3) .nav-btn.available {
    background: rgba(75, 160, 254,0.6);
    border-color: rgba(45, 130, 234, 0.55);
    color: #f5f5f5;
}

/* AVAILABLE (hover) */
.home-cols .box:nth-child(3) .nav-btn.available:hover,
.home-cols .box:nth-child(3) .nav-btn.available:focus-visible,
.home-cols .box:nth-child(3) .nav-btn.available:active {
    background: rgb(45, 130, 234);
    border-color: rgb(45, 130, 234);
    color: #fff;
    transform: translateY(-1px);
}

/* COMING SOON */
.home-cols .box:nth-child(3) .nav-btn.coming-soon {
    background: rgba(75, 160, 254,0.6);
    border-color: rgba(45, 130, 234, 0.55);
    color: #f0f0f0;
    cursor: default;
}

/* COMING SOON (hover) */
.home-cols .box:nth-child(3) .nav-btn.coming-soon:hover,
.home-cols .box:nth-child(3) .nav-btn.coming-soon:focus {
    background: rgba(75, 130, 154);
    border-color: rgba(140, 150, 165, 0.6);
    color: #bdbdbd;
    transform: none;
}

/* Column 1 strong color (burgundy) */
.home-cols .box:nth-child(1) strong {
    color: rgb(176, 57, 57);
    padding: auto;
}

/* Column 2 strong color (green) */
.home-cols .box:nth-child(2) strong {
    color: rgb(35, 164, 98);
    padding: auto;
}

/* Column 3 strong color (blue) */
.home-cols .box:nth-child(3) strong {
    color: rgb(45, 130, 234);
    padding: auto;
}

/* ==== Core Equations slider ==== */

/* Container for the whole equation section */
.core-equations {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    width: 100%;          /* important so the rect width is useful */
}

/* Scroll viewport */
.eq-scroll {
    max-width: 100vw;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;

    padding: 0 0px 16px;      /* horizontal padding */
    /* scroll-padding-left: 300px; */
    /* scroll-padding-right: 300px; */
    box-sizing: border-box;
}

/* Track: we will set its width from JS */
.eq-track {
    position: relative;
    height: 320px;             /* enough to fit one card */
}

/* Cards: absolutely positioned inside the track */
.eq-card {
    position: absolute;
    top: 0;

    width: 260px;              /* base width */
    height: 300px; 
    max-width: 260px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(15,15,15,1.0);
    border: 1px solid rgba(255,255,255,0.15);
    color: #f2f2f2;
    box-sizing: border-box;

    opacity: 0.8;
    transform-origin: center center;
    transition:
        transform 0.2s ease-out,
        opacity 0.2s ease-out,
        box-shadow 0.2s ease-out,
        border-color 0.2s ease-out,
        background 0.2s ease-out;
}

.eq-card .eq-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
    color: #e0e0e0;
}

.eq-card .eq-body {
    font-size: 14px;
    line-height: 1.5;
    color:#e0e0e0;
}

/* Optional: give eq-body a fixed vertical rhythm so ALL cards match */
.eq-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;   /* tweak until the deck looks balanced */
  color:#e0e0e0;
  padding: 0;
}

.eq-img {
  transform: scale(1.2);   /* enlarge 40% */
  transform-origin: center; /* keep centered */
}


/* Small screens tweak */
/* @media (max-width: 700px) {
    .eq-scroll {
        max-width: 100%;
    }

    .eq-card {
        flex: 0 0 230px;
        max-width: 230px;
        font-size: 12px;
    }
} */


/* .contrib-form */

.contrib-form {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contrib-label {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #d9dbd9;
}

.contrib-label input,
.contrib-label select,
.contrib-label textarea {
    margin-top: 4px;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(10, 10, 10, 0.8);
    color: #f2f2f2;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}

.contrib-label textarea {
    resize: vertical;
}

.contrib-label input:focus,
.contrib-label select:focus,
.contrib-label textarea:focus {
    outline: none;
    border-color: rgba(80, 150, 255, 0.8);
}

/* consent checkbox line */
.contrib-consent {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: #bcbcbc;
    margin-top: 4px;
}

.contrib-consent input[type="checkbox"] {
    margin-top: 2px;
}

/* small footnote text */
.contrib-footnote {
    margin-top: 4px;
    font-size: 11px;
    color: #8f8f8f;
    font-style: italic;
}

.word-count {
  font-size: 12px;
  color: #8f8f8f;
  margin-top: 4px;
  text-align: right;
}


/* Expandable download panels under advanced-learning buttons */
.download-list {

    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 14px;
   transition:
        max-height 0.75s ease,
        opacity 0.75s ease,
        padding 0.75s ease;
}

.download-list.open {
    display: block;
     max-height: 500px; /* high enough for multiple items */
     opacity: 1;
    margin: 12px  0 18px  0; /* visual spacing from button & next component */

}

.download-list ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.download-list li + li {
    margin-top: 6px;
}

.download-list a {
    color: #cfe4ff;
    text-decoration: none;
}

.download-list a:hover {
    text-decoration: underline;
}

/* optional: rotate arrow when open */
.nav-btn .fa-chevron-right {
    transition: transform 0.18s ease;
}
.nav-btn.is-open .fa-chevron-right {
    transform: rotate(90deg);
}


/* default language: English */
body[data-lang="en"] .lang-en { display: inline; }
body[data-lang="en"] .lang-zh { display: none; }

body[data-lang="zh"] .lang-en { display: none; }
body[data-lang="zh"] .lang-zh { display: inline; }

/* if not set yet, default to English */
body:not([data-lang]) .lang-en { display: inline; }
body:not([data-lang]) .lang-zh { display: none; }

/* Language toggle styling */
.lang-toggle {
    display: flex;
    gap: 0px;
    align-items: center;
    margin-right: 12px;   /* if inside social-bar */
}

.lang-btn {
    padding: 4px 8px;
    /* margin-left: 8px; */
    margin-right: 4px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.4);
    color: #f2f2f2;
    font-size: 12px;
    cursor: pointer;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.12s ease;
}

.lang-btn:hover {
    background: rgba(255,255,255,0.12);
}

.lang-btn.active {
    background: #f2f2f2;
    color: #111;
    border-color: #f2f2f2;
    transform: translateY(-1px);
}

h1 .lang-zh, 
h2 .lang-zh, 
.title-text .lang-zh {
    letter-spacing: 0.12em;
}

.lang-zh {
    font-size: 1.1em;   /* 25% larger */
}

.book-cover {
  text-align: center;
  margin: 20px 0;
}

.book-cover img {
  max-width: 100vw;   /* adjust as needed */
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(0,0,0,0.4);
}

.greek-mu {
  font-family: "STIX Two Math", "Times New Roman", "Noto Serif", serif;
  text-transform: none;   /* protect this character */
  letter-spacing: 0;      /* don’t stretch the single glyph */
}



.icon-xhs-img {
  position: relative;
  width:  clamp(24px, 2.4vw, 32px);
  height: clamp(24px, 2.4vw, 32px);
  display: inline-block;
}

.icon-xhs-img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  transition: opacity 0.2s ease;
}

.icon-xhs-img img.hover {
  opacity: 0;
}

.icon-xhs-img:hover img.hover {
  opacity: 1;
transform: scale(1.2); 
}

.icon-xhs-img:hover img.normal {
  opacity: 0;
}