/* 
  Explorely - Comprehensive Stylesheet 
  Matching reference visual layout, typography, colors, and responsive design.
*/

:root {
  --primary-navy: #071B33;
  --secondary-navy: #0F2A4A;
  --accent-blue: #0D73D5;
  --accent-blue-hover: #0a5eb1;
  --accent-orange: #FF6B00;
  --accent-orange-hover: #e05e00;
  --bg-light: #F5F7FA;
  --text-dark: #172033;
  --text-muted: #6C757D;
  --border-color: #E2E8F0;
  --card-shadow: 0 4px 12px rgba(7, 27, 51, 0.06);
  --card-shadow-hover: 0 10px 25px rgba(7, 27, 51, 0.12);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--bg-light);
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: var(--accent-blue);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

a:hover {
  color: var(--accent-orange);
  text-decoration: none;
}

/* TOP TRENDING BAR */
.top-trending-bar {
  background-color: var(--primary-navy);
  color: #CBD5E1;
  font-size: 0.825rem;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-trending-bar a {
  color: #E2E8F0;
}

.top-trending-bar a:hover {
  color: var(--accent-orange);
}

.trending-tag {
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFF;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.top-social-icon {
  color: #94A3B8;
  margin-left: 12px;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.top-social-icon:hover {
  color: #FFF;
}

/* MAIN HEADER */
.main-header {
  background-color: #FFFFFF;
  padding: 16px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.brand-logo {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-navy);
  letter-spacing: -0.5px;
  line-height: 1;
}

.brand-logo span {
  color: var(--accent-blue);
}

.brand-tagline {
  font-size: 0.725rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-top: 3px;
}

/* HEADER SEARCH BOX */
.header-search-form .input-group {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.header-search-form .form-control {
  border: 1px solid var(--border-color);
  border-right: none;
  padding: 10px 16px;
  font-size: 0.9rem;
  background-color: #F8FAFC;
}

.header-search-form .form-control:focus {
  background-color: #FFF;
  box-shadow: none;
  border-color: var(--accent-blue);
}

.header-search-form .btn-search {
  background-color: var(--accent-blue);
  color: #FFF;
  border: none;
  padding: 0 20px;
  font-size: 1.1rem;
}

.header-search-form .btn-search:hover {
  background-color: var(--accent-blue-hover);
}

/* HEADER CTA BUTTONS */
.btn-list-business {
  border: 1.5px solid var(--accent-blue);
  color: var(--accent-blue);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.btn-list-business:hover {
  background-color: var(--accent-blue);
  color: #FFF;
}

.btn-advertise {
  background-color: var(--accent-orange);
  color: #FFF;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  border: none;
}

.btn-advertise:hover {
  background-color: var(--accent-orange-hover);
  color: #FFF;
}

/* NAVIGATION */
.main-navbar {
  background-color: #FFFFFF;
  border-top: 1px solid #F1F5F9;
  border-bottom: 1px solid var(--border-color);
  padding: 0;
}

.main-navbar .nav-link {
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.925rem;
  padding: 12px 16px !important;
  transition: all 0.2s ease;
}

.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
  color: var(--accent-blue);
  background-color: #F8FAFC;
}

.main-navbar .dropdown-menu {
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  padding: 8px 0;
}

.main-navbar .dropdown-item {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 18px;
}

.main-navbar .dropdown-item:hover {
  background-color: #F1F5F9;
  color: var(--accent-blue);
}

/* HERO SECTION */
.hero-section {
  padding: 24px 0 10px 0;
}

.hero-slider-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  height: 400px;
}

.hero-slider-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(7, 27, 51, 0.2) 0%, rgba(7, 27, 51, 0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  color: #FFFFFF;
}

.badge-category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.badge-category.travel { background-color: var(--accent-orange); color: #FFF; }
.badge-category.astrology { background-color: #8E44AD; color: #FFF; }
.badge-category.education { background-color: var(--accent-blue); color: #FFF; }
.badge-category.business { background-color: #D35400; color: #FFF; }
.badge-category.technology { background-color: #C0392B; color: #FFF; }
.badge-category.lifestyle { background-color: #E84393; color: #FFF; }

.hero-title {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 10px;
}

.hero-excerpt {
  font-size: 0.95rem;
  color: #E2E8F0;
  margin-bottom: 16px;
  max-width: 90%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btn-hero-action {
  background-color: #FFFFFF;
  color: var(--primary-navy);
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-hero-action:hover {
  background-color: var(--accent-orange);
  color: #FFF;
}

/* HERO SIDEBAR WIDGETS */
.hero-side-card {
  background: #FFF;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  display: flex;
  margin-bottom: 15px;
  height: 120px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.hero-side-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

.hero-side-card img {
  width: 120px;
  height: 100%;
  object-fit: cover;
}

.hero-side-content {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.hero-side-title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-side-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* CATEGORY CARDS SECTION */
.category-cards-section {
  padding: 20px 0;
}

.category-card {
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

.category-icon-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 12px;
  background-color: #FFFFFF;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

.category-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.category-card-desc {
  font-size: 0.775rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* SECTION TITLES */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #E2E8F0;
  position: relative;
}

.section-header::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background-color: var(--accent-blue);
}

.section-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-navy);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-all-link {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent-blue);
}

.view-all-link:hover {
  color: var(--accent-orange);
}

/* ARTICLE CARDS */
.article-card {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

.article-img-wrapper {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.article-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.article-card:hover .article-img-wrapper img {
  transform: scale(1.05);
}

.article-badge-abs {
  position: absolute;
  top: 12px;
  left: 12px;
}

.article-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.article-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 8px;
  color: var(--text-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-excerpt {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.article-meta {
  font-size: 0.775rem;
  color: #94A3B8;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #F1F5F9;
  padding-top: 10px;
  margin-top: auto;
}

/* BANNER CTA */
.grow-business-banner {
  background: linear-gradient(90deg, var(--primary-navy) 0%, var(--secondary-navy) 100%);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  color: #FFF;
  margin: 30px 0;
  box-shadow: 0 8px 20px rgba(7, 27, 51, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.grow-banner-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.grow-banner-desc {
  font-size: 0.9rem;
  color: #CBD5E1;
  margin-bottom: 0;
  max-width: 600px;
}

/* FEATURED BUSINESS LISTINGS */
.business-card {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.business-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

.business-img-wrapper {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.business-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

.business-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.business-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.business-rating {
  font-size: 0.825rem;
  color: #F59E0B;
  font-weight: 700;
  margin-bottom: 8px;
}

.business-rating span {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
}

.business-location {
  font-size: 0.825rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.business-category-pill {
  display: inline-block;
  background-color: #F1F5F9;
  color: var(--text-dark);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 14px;
}

.btn-view-business {
  background-color: var(--accent-blue);
  color: #FFF;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px;
  border-radius: var(--radius-sm);
  text-align: center;
  width: 100%;
  display: block;
  margin-top: auto;
}

.btn-view-business:hover {
  background-color: var(--accent-blue-hover);
  color: #FFF;
}

/* EXPLORE BY CATEGORY GRID */
.explore-cat-card {
  position: relative;
  height: 140px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  display: block;
  transition: transform 0.2s ease;
}

.explore-cat-card:hover {
  transform: scale(1.02);
}

.explore-cat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.explore-cat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 27, 51, 0.2) 0%, rgba(7, 27, 51, 0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  color: #FFFFFF;
}

.explore-cat-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 2px;
}

.explore-cat-sub {
  font-size: 0.775rem;
  color: #E2E8F0;
}

/* SIDEBAR WIDGETS */
.sidebar-widget {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-color);
}

.widget-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary-navy);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* NEWSLETTER WIDGET */
.newsletter-widget {
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
}

.newsletter-form .form-control {
  font-size: 0.875rem;
  padding: 10px 14px;
  margin-bottom: 10px;
}

.newsletter-form .btn {
  width: 100%;
  font-weight: 700;
}

/* POPULAR ARTICLES SIDEBAR */
.sidebar-post-item {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #F1F5F9;
}

.sidebar-post-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.sidebar-post-thumb {
  width: 65px;
  height: 65px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.sidebar-post-title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidebar-post-date {
  font-size: 0.725rem;
  color: var(--text-muted);
}

/* SIDEBAR AD BANNER */
.sidebar-ad-widget {
  background: linear-gradient(135deg, #FFF5F0 0%, #FFEBE0 100%);
  border: 1px solid #FFD8C2;
}

.sidebar-ad-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent-orange);
  margin-bottom: 8px;
}

.sidebar-ad-text {
  font-size: 0.85rem;
  color: #475569;
  margin-bottom: 14px;
}

/* TOP CITIES PILLS */
.city-pill-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.city-pill {
  background-color: #F1F5F9;
  color: var(--text-dark);
  font-size: 0.825rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #E2E8F0;
  transition: all 0.2s;
}

.city-pill:hover {
  background-color: var(--accent-blue);
  color: #FFF;
  border-color: var(--accent-blue);
}

/* FOOTER */
.site-footer {
  background-color: var(--primary-navy);
  color: #94A3B8;
  font-size: 0.875rem;
  padding-top: 50px;
  padding-bottom: 20px;
  margin-top: 40px;
}

.footer-brand-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #FFF;
  margin-bottom: 4px;
}

.footer-brand-tagline {
  font-size: 0.775rem;
  color: #CBD5E1;
  margin-bottom: 16px;
}

.footer-widget-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFF;
  margin-bottom: 18px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: #CBD5E1;
}

.footer-links a:hover {
  color: var(--accent-orange);
  padding-left: 4px;
}

.footer-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.08);
  color: #FFF;
  border-radius: 50%;
  margin-right: 8px;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.footer-social-links a:hover {
  background-color: var(--accent-orange);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 40px;
  padding-top: 20px;
}

.footer-bottom-links a {
  color: #94A3B8;
  margin-left: 16px;
  font-size: 0.825rem;
}

.footer-bottom-links a:hover {
  color: #FFF;
}

/* BACK TO TOP BUTTON */
#back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background-color: var(--accent-orange);
  color: #FFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
}

#back-to-top:hover {
  background-color: var(--accent-orange-hover);
  transform: translateY(-3px);
}

/* RESPONSIVE DESIGN ADJUSTMENTS */
@media (max-width: 991.98px) {
  .hero-slider-card {
    height: 320px;
  }
  .hero-title {
    font-size: 1.4rem;
  }
  .header-search-form {
    margin: 12px 0;
  }
}

@media (max-width: 767.98px) {
  .hero-slider-card {
    height: 280px;
  }
  .hero-overlay {
    padding: 18px;
  }
  .hero-title {
    font-size: 1.2rem;
  }
  .hero-excerpt {
    display: none;
  }
  .grow-business-banner {
    padding: 20px;
    text-align: center;
    justify-content: center;
  }
  .grow-banner-desc {
    margin-bottom: 12px;
  }
  .site-footer {
    text-align: center;
  }
  .footer-bottom-links {
    margin-top: 10px;
    text-align: center;
  }
  .footer-bottom-links a {
    margin: 0 8px;
  }
}


/* =========================================================
   GLOBAL TYPOGRAPHY & REUSABLE SITE SHELL
   ========================================================= */
body, button, input, textarea, select, .nav-link, .dropdown-item {
  font-family: "Inter", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.brand-logo, .section-title, .article-title, .business-name,
.footer-widget-title, .hero-title {
  font-family: "Roboto", sans-serif;
}

p { font-family: "Inter", sans-serif; }

.header-main-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.85fr) minmax(320px, 1.6fr) auto;
  align-items: center;
  gap: 20px;
}
.brand-block { min-width: 0; }
.header-search-wrap { min-width: 0; position: relative; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: nowrap; }
.header-actions .btn { white-space: nowrap; }
.header-search-form { position: relative; }
.header-search-form .input-group { border-radius: 10px; }
.search-suggestions {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 2000;
  background: #fff; border: 1px solid var(--border-color); border-radius: 10px;
  box-shadow: 0 14px 35px rgba(7,27,51,.16); overflow: hidden; display: none;
  max-height: 420px; overflow-y: auto;
}
.search-suggestions.show { display: block; }
.search-suggestion-item { display:flex; align-items:center; gap:12px; padding:11px 14px; color:var(--text-dark); border-bottom:1px solid #f1f5f9; }
.search-suggestion-item:last-child { border-bottom:0; }
.search-suggestion-item:hover { background:#f8fafc; color:var(--accent-blue); }
.search-suggestion-item > i { width:24px; text-align:center; color:var(--accent-blue); }
.search-suggestion-item span { display:flex; flex-direction:column; min-width:0; }
.search-suggestion-item strong { font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-suggestion-item small { color:var(--text-muted); font-size:.72rem; margin-top:2px; }
.search-no-result { padding:14px; color:var(--text-muted); font-size:.9rem; }
.header-mini-links a { margin-left:18px; color:#e2e8f0; }
.trending-divider { margin:0 10px; color:#64748b; }

.site-footer { background: var(--primary-navy); color:#cbd5e1; padding:50px 0 0; margin-top:50px; }
.footer-brand-title { font:800 2rem "Roboto",sans-serif; color:#fff; }
.footer-brand-title::first-letter { color:#fff; }
.footer-logo-link{display:inline-flex;align-items:center;text-decoration:none;}
.footer-logo{display:block;width:250px;max-width:100%;height:auto;max-height:58px;object-fit:contain;object-position:left center;}
.footer-brand-title span { color:var(--accent-blue); }
.footer-brand-tagline { font-size:.78rem; color:#94a3b8; margin-top:3px; }
.footer-description { color:#94a3b8; max-width:360px; margin-top:16px; }
.footer-widget-title { color:#fff; font-size:1rem; font-weight:700; margin-bottom:16px; }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:9px; }
.footer-links a, .footer-contact-list a { color:#cbd5e1; }
.footer-links a:hover, .footer-contact-list a:hover { color:#fff; }
.footer-contact-list { list-style:none; padding:0; margin:0; }
.footer-contact-list li { display:flex; gap:10px; margin-bottom:11px; font-size:.9rem; }
.footer-contact-list i { color:#60a5fa; margin-top:3px; }
.footer-socials { display:flex; gap:9px; margin-top:18px; }
.footer-socials a { width:34px; height:34px; border:1px solid rgba(255,255,255,.15); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#cbd5e1; }
.footer-socials a:hover { background:#fff; color:var(--primary-navy); }
.footer-bottom { margin-top:35px; padding:18px 0; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:20px; align-items:center; font-size:.82rem; color:#94a3b8; }
.footer-legal { display:flex; gap:18px; flex-wrap:wrap; }
.footer-legal a { color:#94a3b8; }
.footer-legal a:hover { color:#fff; }

@media (min-width: 992px) {
  .main-navbar .dropdown-menu { display:block; opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none; transition:opacity .2s ease,transform .2s ease,visibility .2s ease; margin-top:0; }
  .main-navbar .dropdown:hover > .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
  .main-navbar .dropdown:hover > .dropdown-toggle::after { transform:rotate(180deg); }
  .main-navbar .dropdown-toggle::after { transition:transform .2s ease; }
}

@media (max-width: 1199.98px) {
  .header-main-row { grid-template-columns: 1fr 1.5fr; }
  .header-actions { grid-column: 1 / -1; justify-content:flex-start; }
}
@media (max-width: 767.98px) {
  .main-header { padding:14px 0; }
  .header-main-row { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  .brand-block { text-align:center; }
  .header-actions { justify-content:center; flex-wrap:wrap; }
  .header-actions .btn { flex:1 1 190px; }
  .trending-left { white-space:nowrap; overflow:hidden; }
  .header-mini-links { display:none; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .footer-legal { justify-content:center; }
}


/* Explorely v2 blog/category polish */
.image-brand{display:flex;align-items:center;height:58px;max-width:250px;}
.image-brand img{display:block;width:240px;max-width:100%;height:auto;max-height:58px;object-fit:contain;object-position:left center;}
.brand-block .brand-tagline{margin-top:2px;}
.blog-hero{background:#071a32;}
.blog-hero-slide{height:500px;position:relative;overflow:hidden;}
.blog-hero-slide>img{width:100%;height:100%;object-fit:cover;}
.blog-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,18,38,.88) 0%,rgba(3,18,38,.58) 46%,rgba(3,18,38,.12) 100%);}
.blog-hero-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:#fff;padding-top:25px;padding-bottom:45px;}
.blog-hero-content h1{font-size:clamp(2.2rem,4vw,4.2rem);line-height:1.08;max-width:760px;margin:16px 0 12px;font-weight:800;}
.blog-hero-content p{font-size:1.08rem;line-height:1.7;max-width:690px;margin:0 0 18px;color:rgba(255,255,255,.92);}
.blog-hero-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:.9rem;margin-bottom:20px;}
.blog-hero-btn{font-weight:700;border-radius:10px;padding:.7rem 1.1rem;}
.blog-hero .carousel-control-prev,.blog-hero .carousel-control-next{width:7%;}
.blog-hero .carousel-indicators{margin-bottom:18px;}
.blog-hero .carousel-indicators button{width:30px;height:4px;border:0;border-radius:10px;}
.blog-page-intro{padding:48px 0 28px;}
.blog-page-intro h2{font-size:2.2rem;font-weight:800;margin-bottom:8px;}
.blog-page-intro p{max-width:780px;color:#65748b;margin:0;}
.blog-filter-wrap{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 30px;}
.blog-filter{border:1px solid #dce5ef;background:#fff;color:#17304f;border-radius:999px;padding:9px 16px;font-weight:600;transition:.2s;}
.blog-filter:hover,.blog-filter.active{background:#0b78e3;color:#fff;border-color:#0b78e3;}
.category-hero{padding:56px 0;background:linear-gradient(135deg,#081c36,#0d73d5);color:#fff;}
.category-hero .breadcrumb a{color:rgba(255,255,255,.8);}
.category-hero h1{font-size:clamp(2rem,4vw,3.5rem);font-weight:800;margin:14px 0 10px;}
.category-hero p{max-width:850px;color:rgba(255,255,255,.8);font-size:1.05rem;}
.category-hero .category-count{display:inline-flex;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);padding:7px 12px;border-radius:999px;font-size:.85rem;}
.category-article-card .article-img-wrapper{display:block;}
.empty-state{padding:45px;border:1px dashed #cfd9e5;border-radius:16px;text-align:center;color:#718096;background:#fff;}
.article-detail-hero{height:440px;border-radius:22px;overflow:hidden;position:relative;margin-bottom:25px;}
.article-detail-hero img{width:100%;height:100%;object-fit:cover;}
.article-detail-hero .overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,18,35,.82),rgba(4,18,35,.08) 70%);}
.article-detail-hero .hero-copy{position:absolute;left:32px;right:32px;bottom:30px;color:#fff;}
.article-detail-hero h1{font-size:clamp(1.8rem,3vw,2.7rem);font-weight:800;line-height:1.18;max-width:900px;margin:10px 0;}
.article-detail-hero .excerpt{max-width:800px;color:rgba(255,255,255,.9);margin:0;}
.article-meta-row{display:flex;flex-wrap:wrap;gap:16px;color:#607089;font-size:.9rem;padding:15px 0;border-bottom:1px solid #e7edf4;}
.article-share{display:flex;gap:8px;flex-wrap:wrap;padding:14px 0;}
.article-share .btn{border-radius:999px;}
.toc-card{background:linear-gradient(135deg,#f4f9ff,#edf6ff);border:1px solid #d8eaff;border-radius:18px;padding:22px;margin:24px 0;}
.toc-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px;}
.toc-head h2{font-size:1.25rem;font-weight:800;margin:0;color:#102b4a;}
.toc-list{display:grid;grid-template-columns:1fr 1fr;gap:9px 25px;}
.toc-list a{display:flex;align-items:center;gap:10px;text-decoration:none;color:#23415f;padding:8px 5px;border-radius:9px;font-weight:600;}
.toc-list a:hover{background:#fff;color:#0b78e3;}
.toc-list a span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#dcecff;color:#0b78e3;font-size:.75rem;flex:none;}
.article-content{font-size:1.06rem;line-height:1.85;color:#27384d;}
.article-content h2{font-size:1.8rem;color:#102b4a;margin-top:2rem;padding-top:.5rem;}
.article-content h3{font-size:1.35rem;color:#163b61;margin-top:1.6rem;}
.article-content img{max-width:100%;border-radius:14px;margin:12px 0;}
.related-mini{display:flex;gap:10px;align-items:center;text-decoration:none;color:#17304f;border-bottom:1px solid #edf1f5;padding:10px 0;}
.related-mini img{width:72px;height:52px;object-fit:cover;border-radius:8px;flex:none;}
.sidebar-post-item{display:flex;gap:10px;align-items:center;text-decoration:none;color:#17304f;padding:10px 0;border-bottom:1px solid #edf1f5;}
.sidebar-post-item img{width:72px;height:52px;object-fit:cover;border-radius:8px;flex:none;}
@media(max-width:575px){.footer-logo{width:210px;max-height:50px;}}

@media(max-width:991px){.blog-hero-slide{height:470px}.image-brand{height:48px}.image-brand img{width:210px;max-height:48px}.toc-list{grid-template-columns:1fr}.article-detail-hero{height:380px}.blog-hero-content{padding-left:55px;padding-right:55px}}
@media(max-width:575px){.blog-hero-slide{height:500px}.blog-hero-content{padding:25px 45px 45px}.blog-hero-content h1{font-size:2rem}.blog-hero-content p{font-size:.95rem}.article-detail-hero{height:430px}.article-detail-hero .hero-copy{left:20px;right:20px;bottom:20px}.article-detail-hero h1{font-size:2rem}.image-brand img{width:190px}}


/* MOBILE RIGHT-SIDE OFFCANVAS MENU */
.mobile-menu-trigger {
  margin-left: auto;
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--primary-navy);
  border-radius: 8px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: .9rem;
  box-shadow: 0 3px 10px rgba(7,27,51,.06);
}
.mobile-menu-trigger i { font-size: 1.35rem; line-height: 1; }
.mobile-menu-trigger:hover { color: var(--accent-blue); border-color: var(--accent-blue); }

.explorely-offcanvas {
  width: min(88vw, 390px) !important;
  border: 0;
  box-shadow: -12px 0 35px rgba(7,27,51,.16);
}
.explorely-offcanvas .offcanvas-header {
  padding: 22px 20px 18px;
  border-bottom: 1px solid #edf1f5;
  background: #fff;
}
.offcanvas-brand {
  color: var(--primary-navy);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
}
.offcanvas-subtitle {
  color: var(--text-muted);
  font-size: .72rem;
  margin-top: 4px;
}
.explorely-offcanvas .offcanvas-body {
  padding: 18px 16px 24px;
  background: #fff;
}
.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 13px;
  border-radius: 10px;
  color: var(--text-dark);
  font-weight: 650;
  font-size: .94rem;
  transition: all .2s ease;
}
.mobile-nav-link i {
  width: 24px;
  text-align: center;
  font-size: 1.1rem;
  color: var(--accent-blue);
}
.mobile-nav-link:hover,
.mobile-nav-link:focus {
  color: var(--accent-blue);
  background: #f4f8fc;
  transform: translateX(-2px);
}
.mobile-menu-divider {
  height: 1px;
  background: #edf1f5;
  margin: 16px 0;
}
.mobile-menu-actions {
  display: grid;
  gap: 10px;
}
.mobile-menu-actions .btn {
  width: 100%;
  padding: 11px 14px;
  text-align: center;
}
@media (max-width: 991.98px) {
  .main-navbar { min-height: 56px; }
  .main-navbar .container { min-height: 56px; }
}

.error-page { min-height: 62vh; display: flex; align-items: center; }
.error-page-inner { width: 100%; }
.error-page h1 { font-size: clamp(5rem, 13vw, 9rem); line-height: .9; letter-spacing: -4px; }
.error-page h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }