@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&display=swap');

/* Basic Resets & Container */
body { font-family:"Sora", "Inter", sans-serif;}
.blog-bg-cream { background-color: rgb(245 241 232); }
.blog-text-navy { color: #0c1727; }
.blog-text-gold { color: #d4a853; }
.blog-text-slate { color: #64748b; }
.blog-container { max-width: 1280px; margin: 0 auto; padding: 0 16px ; }
.relative { position: relative; }
.z-10 { z-index: 10; }
.section-padding{padding: 72px 0;}
/* 1. Page Hero */
.page-hero { position: relative; background-color: #0c1727; overflow: hidden; padding: 160px 0 96px; }
.hero-bg-overlay { position: absolute; inset: 0; opacity: 0.2; }
.hero-bg-img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12,23,39,0.8), rgba(12,23,39,0.7), #0c1727); }
.hero-glow { position: absolute; top: -96px; right: -96px; width: 384px; height: 384px; background-color: rgba(212,168,83,0.1); border-radius: 50%; filter: blur(64px); }
.hero-content { display: flex; flex-direction: column; align-items: flex-start; text-align: left; max-width: 896px; }
.hero-eyebrow { color: #d4a853; font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 20px; display: block;}
.hero-title { font-family: 'Sora', sans-serif; font-size: 48px; font-weight: 700; color: #fff; line-height: 1.08; margin: 0 0 24px 0; }
@media (max-width: 768px) { .hero-title { font-size: 30px; } }
.hero-intro { font-size: 18px; color: rgba(255,255,255,0.75); line-height: 1.75; max-width: 672px; margin: 0;}

/* 2. Filter Buttons */
.blog-filter-section {  position: sticky; top: 0; background-color: #fff; z-index: 30; }
.blog-filter-inner { padding: 16px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.blog-filter-btn { padding: 8px 16px; border-radius: 9999px; font-size: 14px; line-height: 20px; font-weight: 500; font-family: inherit; transition: all 0.3s; display: inline-flex; align-items: center; border: none; text-decoration: none; cursor: pointer; }
.blog-filter-active { background-color: #0c1727; color: #fff; }
.blog-filter-normal { background-color: rgb(245 241 232); color: #0c1727; }
.blog-filter-normal:hover { background-color: #0a16281a; }

/* 3. Featured Card */
.featured-card { display: grid; grid-template-columns: 1fr; gap: 0; width: 100%; background-color: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: all 0.3s; text-decoration: none; align-items: stretch; margin-bottom: 64px; }

.featured-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.featured-image-wrapper { position: relative; height: 240px; min-height: 240px; overflow: hidden; background: #fff; }
.featured-image-wrapper img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center;  transition: transform 0.7s; }
.featured-card:hover .featured-image-wrapper img { transform: scale(1.03); }
.featured-badge { position: absolute; top: 16px; left: 16px; background-color: #d4a853; color: #0c1727; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 12px; border-radius: 9999px; z-index: 2;}
.featured-content { padding: 28px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%; }
@media (min-width: 1024px) {
  .featured-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 380px; align-items: stretch; }
  .featured-image-wrapper { height: 100%; min-height: 380px; }
  .featured-content { min-height: 380px; padding: 40px 56px 40px 32px; justify-content: center; align-items: flex-start; text-align: left; }
  .featured-title { font-size: 36px !important; }
}
.featured-meta { display: flex; gap: 12px; font-size: 12px; margin-bottom: 10px; color: #64748b; align-items: center;}
.featured-title { font-size: 24px; font-weight: 700; color: #0c1727; margin: 0 0 10px 0; font-family: 'Sora', sans-serif; transition: color 0.3s; line-height: 1.2;}
.featured-meta .cat{text-transform: uppercase; font-weight: 700;}
.featured-title { font-size: 28px !important; color: #0c1727 !important; }
.featured-card .grid-excerpt { margin-bottom: 16px; flex-grow: 0; }
.featured-read { margin-top: 0; }
.featured-card:hover .featured-title { color: #d4a853; }
.featured-read { font-weight: 600; color: #d4a853; display: flex; align-items: center; gap: 4px; transition: all 0.3s ease; font-size: 16px;}
.featured-card:hover .featured-read { gap: 10px; } /* Hover Spacing */

/* 4. Grid Cards */
.blog-grid { display: grid; width: 100%; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.grid-card { display: flex; flex-direction: column; background-color: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: all 0.3s; text-decoration: none; height: 100%; }
.grid-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.grid-image-wrapper { position: relative; height: 192px; overflow: hidden; background: #f3efe6; }
.grid-image-wrapper img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform 0.7s; }
.grid-card:hover .grid-image-wrapper img { transform: scale(1.05); }
.grid-content { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }
.grid-meta { font-size: 12px; color: #64748b; margin-bottom: 12px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.grid-meta span:last-child { text-transform: none; }
.grid-title { font-size: 18px; font-weight: 600; color: #0c1727; margin: 8px 0; font-family: 'Sora', sans-serif; transition: color 0.3s; line-height: 1.375;}
.grid-card:hover .grid-title { color: #d4a853; }
.grid-excerpt { font-size: 14px; color: #64748b; line-height: 1.625; margin-bottom: 20px; flex-grow: 1; }
.grid-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid rgba(12,23,39,0.1); font-size: 12px; color: #64748b; }
.grid-footer .blog-text-gold svg { transition: transform 0.3s ease; }
.grid-card:hover .grid-footer .blog-text-gold svg { transform: translate(4px, -4px); } /* Hover Animation */

/* 5. CTA Band */
.cta-band { background-color: #0c1727; padding: 56px 0; }
@media (min-width: 1024px) { .cta-band { padding: 64px 0; } }
.cta-eyebrow { color: #d4a853; font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 12px; display: block; }
.cta-title { font-size: 36px; color: #fff; line-height: 1.25; font-family: 'Sora', sans-serif; margin: 0; }
@media (max-width: 768px) { .cta-title { font-size: 24px; } }

.btn-primary { background-color: #d4a853; color: #0c1727; padding: 16px 20px; border-radius: 10px!important; font-size: 16px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background-color 0.3s; align-self: flex-start; }
.btn-primary svg { transition: transform 0.3s ease; }
.btn-primary:hover { background-color: #e5b964; color: #0c1727; }
 /* Hover Animation */

.cta-inner{display:flex !important; align-items: center; justify-content: space-between;}
@media (min-width: 768px) {
    .btn-primary { align-self: center; flex-shrink: 0; }
}
@media (max-width: 768px) {
    .btn-primary { width: 100%; justify-content: center;}
}

/* 6. Explore Next */
.explore-next { background-color: #fdfbf7; border-top: 1px solid rgba(12,23,39,0.1); padding: 56px 0; }
@media (min-width: 1024px) { .explore-next { padding: 64px 0; } }
.explore-eyebrow { color: #d4a853; font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 24px; display: block; }
.explore-grid { display: grid; grid-template-columns: 1fr; gap: 16px; grid-template-columns: repeat(4, 1fr);  }
@media (max-width: 768px) { .explore-grid { grid-template-columns: repeat(1, 1fr); } }
.explore-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; background-color: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); text-decoration: none; transition: all 0.3s; height: 100%; }
.explore-link span:first-child { font-family: 'Sora', sans-serif; font-weight: 600; color: #0c1727; font-size: 14px; line-height: 1.375;}
@media (min-width: 768px) { .explore-link span:first-child { font-size: 16px; } }
.explore-arrow { color: #d4a853; transition: transform 0.3s; display: flex; align-items: center; flex-shrink: 0; }
.explore-link:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
.explore-link:hover .explore-arrow { transform: translate(3px, -3px); } /* Hover Animation */

@media (max-width: 767px) {
    .section-padding {padding: 40px 0 !important;}
	.featured-image-wrapper {height: 220px !important; min-height: 220px !important;}
	.page-hero {padding: 128px 0 64px !important}
	.blog-container{padding: 0 16px}
	.cta-inner { flex-direction: column; align-items: self-start; }
}

footer .elementor-icon-list-text {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.blog-pagination { margin-top: 48px; display: flex; gap: 8px; flex-wrap: wrap; }
.blog-pagination a,
.blog-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 9999px; text-decoration: none; color: #0c1727; background: #fff; }
.blog-pagination .current { background: #0c1727; color: #fff; }