/* ========================================= OFFERS PAGE  —  offers.css ========================================= */ /* ── Variables ── */ :root { --op-cyan:        #29C3D4; --op-yellow:      #F0A500; --op-yellow-dark: #D08C00; --op-dark:        #1a1a1a; --op-text:        #444; --op-border:      #e5e9f0; --op-bg:          #f4f4f4; --op-shadow:      0 4px 20px rgba(0,0,0,.08); } /* ── Page wrapper ── */ .op-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } /* ========================================= 1. HERO BANNER ========================================= */ .op-hero { position: relative; width: 100%; height: 180px; background-size: cover; background-position: center center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; } .op-hero-overlay { position: absolute; inset: 0; } .op-hero-content { position: relative; z-index: 2; } .op-hero-content h1 { color: #fff; font-size: 36px; font-weight: 800; margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,.5); font-family: 'Georgia', serif; letter-spacing: 1px; } /* ========================================= 2. OFFERS SECTION ========================================= */ .op-section { background: var(--op-bg); padding: 50px 0 60px; } /* 2-column grid */ .op-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } /* ── Card ── */ .op-card { background: #fff; border-radius: 4px; overflow: hidden; border: 1px solid var(--op-border); box-shadow: var(--op-shadow); transition: transform .3s ease, box-shadow .3s ease; } .op-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.12); } /* Image area */ .op-card-img { width: 100%; overflow: hidden; background: #eee; line-height: 0; } .op-card-img img { width: 100%; height: auto; display: block; transition: transform .5s ease; } .op-card:hover .op-card-img img { transform: scale(1.03); } /* ========================================= RESPONSIVE ========================================= */ @media (max-width: 768px) { .op-hero { height: 160px; } .op-hero-content h1 { font-size: 26px; } .op-grid { grid-template-columns: 1fr; } .op-section { padding: 36px 0 48px; } } @media (max-width: 480px) { .op-hero-content h1 { font-size: 22px; } }