Zi-facebook Zi-twitter Zi-instagram
Pivoo Footer * { margin:0; padding:0; box-sizing:border-box; } body { font-family: 'Poppins', sans-serif; background:#FBF2E7; } .footer { background:#FBF2E7; padding: 70px 100px 30px; } .footer-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; } /* ---- Column 1: Logo / About / Social ---- */ .footer-brand { max-width:300px; } .footer-logo { display:flex; align-items:center; gap:8px; margin-bottom:20px; } .footer-logo-icon { width:46px; height:46px; } .footer-logo-text { font-family:'Playfair Display', serif; font-weight:700; font-size:32px; color:#3A2313; } .footer-desc { color:#7a6f63; font-size:15px; line-height:1.7; margin-bottom:24px; } .footer-social { display:flex; gap:12px; } .footer-social a { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; transition: opacity .2s ease; } .footer-social a:hover { opacity:0.85; } .footer-social a svg { width:16px; height:16px; } .footer-social .facebook { background:#3B5998; } .footer-social .twitter { background:#1DA1F2; } .footer-social .youtube { background:#FF0000; } .footer-social .instagram{ background:#111111; } /* ---- Column headings ---- */ .footer-col h4 { font-family:'Playfair Display', serif; font-weight:700; font-size:22px; color:#2b1c10; margin-bottom:22px; } /* ---- Column 2: Categories ---- */ .footer-col.categories ul { list-style:none; } .footer-col.categories li { margin-bottom:12px; } .footer-col.categories a { color:#4a3b2c; text-decoration:none; font-size:15px; transition:color .2s ease; } .footer-col.categories a:hover { color:#D97B29; } /* ---- Column 3: Popular Topics (tags) ---- */ .footer-col.topics { max-width:400px; } .tags-wrap { display:flex; flex-wrap:wrap; gap:14px; } .tags-wrap a { display:inline-block; padding:11px 22px; border:1.5px solid #E4D9C8; border-radius:30px; font-size:14px; font-weight:600; color:#2b1c10; text-decoration:none; white-space:nowrap; background:transparent; transition:all .2s ease; } .tags-wrap a:hover { background:#2b1c10; color:#fff; border-color:#2b1c10; } /* ---- Column 4: Recent Post ---- */ .footer-col.recent { max-width:300px; } .recent-item { display:flex; gap:16px; margin-bottom:22px; } .recent-item img { width:62px; height:62px; border-radius:8px; object-fit:cover; flex-shrink:0; } .recent-item h5 { font-family:'Playfair Display', serif; font-weight:600; font-size:16px; line-height:1.35; color:#2b1c10; margin-bottom:6px; } .recent-item h5 a { color:inherit; text-decoration:none; } .recent-item span { font-size:13px; color:#9c8f80; } /* ---- Bottom bar ---- */ .footer-bottom { border-top:1px solid #E4D9C8; margin-top:60px; padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; } .footer-bottom p { color:#3A2313; font-size:14px; } .footer-links { display:flex; gap:28px; } .footer-links a { color:#3A2313; font-size:14px; font-weight:600; text-decoration:none; } .footer-links a:hover { color:#D97B29; } /* ---- Responsive ---- */ @media (max-width: 991px) { .footer { padding:50px 30px 20px; } .footer-top { gap:40px 30px; } } @media (max-width: 600px) { .footer-bottom { flex-direction:column; text-align:center; } .footer-links { justify-content:center; } }