/* assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;500;700&display=swap');

:root {
    --h-purple: #673de6;
    --h-dark: #2f2f2f;
    --h-gray: #546681;
    --h-bg: #fff;
    --h-light-bg: #f4f5f7;
}

body {
    font-family: 'DM Sans', sans-serif;
    color: var(--h-dark);
    background-color: var(--h-bg);
    line-height: 1.6;
}

/* Navbar */
.navbar { padding: 20px 0; background: #fff; border-bottom: 1px solid #eaeaea; }
.navbar-brand { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.5px; }
.nav-link { color: var(--h-dark); font-weight: 500; padding: 0 15px !important; }
.nav-link:hover { color: var(--h-purple); }
.btn-hostinger { background-color: var(--h-purple); color: #fff; font-weight: 700; border-radius: 4px; padding: 10px 25px; transition: 0.3s; }
.btn-hostinger:hover { background-color: #5025d1; color: #fff; }

/* Hero Section */
.hero-section { padding: 60px 0; text-align: center; max-width: 800px; margin: 0 auto; }
.hero-title { font-weight: 700; font-size: 3rem; margin-bottom: 20px; line-height: 1.1; }
.hero-subtitle { color: var(--h-gray); font-size: 1.15rem; }

/* Blog Cards */
.post-card { border: none; transition: transform 0.3s ease; margin-bottom: 40px; }
.post-card:hover { transform: translateY(-5px); }
.post-card img { border-radius: 8px; width: 100%; height: 240px; object-fit: cover; margin-bottom: 20px; }
.post-meta { font-size: 0.85rem; color: var(--h-gray); font-weight: 500; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.post-title { font-weight: 700; font-size: 1.5rem; line-height: 1.3; margin-bottom: 10px; }
.post-title a { text-decoration: none; color: var(--h-dark); transition: color 0.2s; }
.post-title a:hover { color: var(--h-purple); }
.post-excerpt { color: var(--h-gray); font-size: 1rem; margin-bottom: 0; }

/* Search Bar */
.search-wrapper { position: relative; max-width: 500px; margin: 30px auto 0; }
.search-input { border: 1px solid #d5d5d5; padding: 15px 20px; border-radius: 50px; width: 100%; font-size: 1rem; }
.search-btn { position: absolute; right: 5px; top: 5px; background: var(--h-purple); color: #fff; border: none; border-radius: 50px; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; }

/* Pagination */
.page-link { color: var(--h-dark); border: none; font-weight: 700; margin: 0 5px; }
.page-item.active .page-link { background-color: transparent; color: var(--h-purple); }