.header-container{width:94%;height:150px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(to bottom,gold 50%,#c8102e 50%);padding:0 40px;position:relative;border-radius:10px}.header-left{height:100%;width:320px;position:relative;display:flex;flex-direction:column}.rr-logo{position:absolute;top:5px;left:0;height:110px;width:auto;cursor:pointer}.rr-tagline{position:absolute;bottom:4px;left:0;font-size:18px;font-weight:700;color:#000}.header-nav{display:flex;gap:40px;font-size:18px;font-weight:600;height:100%;align-items:center;margin-top:-1px}.header-nav a{color:#000!important;text-decoration:none;padding:4px 6px;transition:.2s ease;font-size:18px;font-weight:600;letter-spacing:.5px}.header-nav a:hover{opacity:.7}<<<<<<< HEAD ======= @media (min-width: 601px) and (max-width: 992px){.header-nav{gap:30px}.header-nav a{font-size:16px}}@media(max-width:600px){.header-container{flex-direction:column;height:auto;padding:20px;text-align:center}.header-left{width:100%;align-items:center;margin-bottom:15px}.rr-logo{position:static;height:90px}.rr-tagline{position:static;margin-top:8px;font-size:16px}.header-nav{flex-direction:column;gap:15px}.header-nav a{font-size:14px}}>>>>>>> a64b41c10de14faf8b075bffbf08d84a41332f0d import React,{useState}from "react"; import "./ExploreItem.css"; export default function ExploreItem({icon,title,desc,longInfo}){const [showPopup,setShowPopup] = useState(false);return (<div className="explore-card" onMouseEnter={() => setShowPopup(true)} onMouseLeave={() => setShowPopup(false)} > <div className="explore-icon-wrap"> <span className="explore-icon">{icon}</span> </div> <h3>{title}</h3> <p>{desc}</p> <div className={`explore-popup ${showPopup ? "visible" : ""}`}> <div className="popup-title">{title}</div> <div className="popup-body">{longInfo}</div> </div> </div>)}.home-container{max-width:1400px;margin:0 auto;padding:20px;box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}.hero{margin:10px 0 20px;padding:22px;border-radius:12px;background:linear-gradient(to right,#fff8df,#f3f7fa);display:flex;gap:22px;align-items:center}.hero-image img{max-width:460px;width:100%;border-radius:12px}.hero-title{font-size:32px;margin:0;font-weight:800}.hero-sub{margin:6px 0 0;color:#444}.card-size{width:125px;height:130px;flex:0 0 125px}.card-unified{background:gold;color:#a80000;border-radius:14px;padding:16px;box-shadow:0 6px 20px #0000000f;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.popular-cat{margin-top:18px}.popular-cat h2{margin:0 0 10px;font-size:22px;color:#222}.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}.cat-item{width:125px;height:130px;background:gold;color:#a80000;border-radius:14px;padding:16px;box-shadow:0 6px 20px #0000000f;display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:700;text-align:center}.cat-icon{font-size:75px;margin-bottom:10px}@media(max-width:900px){.cat-grid{grid-template-columns:repeat(3,1fr);justify-items:center}}@media(max-width:700px){.cat-grid{grid-template-columns:repeat(2,1fr)}}.ad-section{margin:30px 0;position:relative;overflow:hidden}.ad-track{display:flex;gap:20px;width:max-content;animation:adsScrollRTL 30s linear infinite;align-items:center}.ad-section:hover .ad-track{animation-play-state:paused}@keyframes adsScrollRTL{0%{transform:translate(0)}to{transform:translate(-50%)}}.ad-card{width:125px;height:130px;background:gold;color:#a80000;border-radius:14px;padding:10px 12px;box-shadow:0 6px 20px #0000000f;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.ad-img{width:100px;height:100px;object-fit:cover;border-radius:10px;margin-bottom:8px}.ad-name{font-weight:700}.explore-section{margin:28px 0}.explore-section h2{margin:0 0 10px;font-size:22px;color:#222}.explore-scroll-wrapper{overflow:visible;position:relative}.explore-scroll-track{display:flex;gap:20px;width:max-content;animation:exploreScrollLTR 35s linear infinite;align-items:center}.explore-scroll-wrapper:hover .explore-scroll-track{animation-play-state:paused}@keyframes exploreScrollLTR{0%{transform:translate(0)}to{transform:translate(50%)}}.explore-card{width:125px;height:130px;background:gold;color:#a80000;border-radius:14px;padding:16px;box-shadow:0 6px 20px #0000000f;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative}.explore-icon-wrap{width:90px;height:90px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px}.explore-icon{font-size:44px;color:#a80000}.explore-card h3{margin:6px 0 4px;font-size:18px;font-weight:700;color:#a80000}.explore-card p{margin:0;color:#7a0000}.explore-popup{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%) translateY(8px);width:320px;max-width:90vw;background:#111111f2;color:#fff;padding:14px;border-radius:10px;box-shadow:0 18px 50px #00000073;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s cubic-bezier(.2,1,.3,1);z-index:99999}.explore-popup.visible{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.popup-title{font-weight:700;margin-bottom:8px}.popup-body{font-size:14px;line-height:1.5;max-height:50vh;overflow-y:auto}@media(max-width:700px){.ad-track,.explore-scroll-track{gap:14px}.ad-img{width:84px;height:84px}.explore-icon{font-size:36px}.card-size,.cat-item,.ad-card,.explore-card{width:160px;height:190px;flex:0 0 160px}.cat-grid{grid-template-columns:repeat(2,1fr);justify-items:center}}:root,html,body,#root{background-color:#e9e9e9;color:#111;margin:0;padding:0;height:100%;min-height:100%;box-sizing:border-box;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif}:is(:root,html,body,#root) \feff:root{--bg: #ffffff;--text: #111827;--accent: #3b82f6}:is(:root,html,body,#root) html,:is(:root,html,body,#root) body,:is(:root,html,body,#root) #root{height:100%;margin:0}:is(:root,html,body,#root) body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:is(:root,html,body,#root) #root>div{display:flex;flex-direction:column;min-height:100vh}:is(:root,html,body,#root) body{margin:0;min-width:320px;background-color:#e9e9e9;overflow-x:hidden}:is(:root,html,body,#root) h1,:is(:root,html,body,#root) h2,:is(:root,html,body,#root) h3,:is(:root,html,body,#root) h4,:is(:root,html,body,#root) h5,:is(:root,html,body,#root) h6{font-weight:600;margin:0}:is(:root,html,body,#root) a{font-weight:500;color:#646cff;text-decoration:none}:is(:root,html,body,#root) a:hover{color:#535bf2}:is(:root,html,body,#root) input,:is(:root,html,body,#root) button,:is(:root,html,body,#root) textarea{font-family:inherit;font-size:1rem}:is(:root,html,body,#root) .container{max-width:1200px;margin:0 auto;padding:1rem;======= a{color:var(--accent)}}