@keyframes popupAnim { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } .kf-modal-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: rgba(0,0,0,0.85); align-items: center; justify-content: center; backdrop-filter: blur(5px); } .kf-modal-popup .popup-content { background: #fff; padding: 40px; border-radius: 20px; max-width: 550px; width: 90%; position: relative; text-align: center; animation: popupAnim 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 30px 100px rgba(0,0,0,0.5); } .kf-modal-popup .close-popup-btn { position: absolute; top: 15px; right: 20px; border: none; background: none; font-size: 32px; color: #999; cursor: pointer; line-height: 1; transition: color 0.3s ease; } .kf-modal-popup .close-popup-btn:hover { color: #c8a876; } .kf-modal-popup .popup-image { width: 100%; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .kf-modal-popup .popup-title { font-family: 'Merienda', cursive; font-size: 1.8rem; color: #222; margin-bottom: 15px; } .kf-modal-popup .popup-text { font-size: 1rem; line-height: 1.7; color: #555; margin-bottom: 25px; } .promo-modal { position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); } .promo-modal-content { background-color: #fff; width: 90%; max-width: 850px; border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); } .promo-close-wrapper { position: absolute; top: 20px; right: 20px; z-index: 10; } .promo-close { font-size: 24px; color: #fff; cursor: pointer; background: rgba(0,0,0,0.2); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; } .promo-close:hover { background: #c8a876; } .promo-split { display: flex; flex-direction: row; } .promo-image-side { flex: 1; overflow: hidden; } .promo-image-side img { width: 100%; height: 100%; object-fit: cover; } .promo-content-side { flex: 1; padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; background: #fdfaf5; } .promo-badge { background: #c8a876; color: #fff; padding: 6px 15px; border-radius: 30px; display: inline-block; align-self: flex-start; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 25px; } .promo-title { font-family: 'Merienda', cursive; font-size: 2.2rem; color: #222; margin-bottom: 20px; line-height: 1.2; } .promo-desc { font-size: 1.05rem; line-height: 1.8; color: #555; margin-bottom: 35px; } @media (max-width: 768px) { .promo-split { flex-direction: column; } .promo-image-side { height: 250px; } .promo-content-side { padding: 40px 30px; } .promo-title { font-size: 1.8rem; } .promo-close { color: #333; background: rgba(0,0,0,0.05); } }