.blog-loading-message{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
  font-size:1.5rem;
  color:#444;
  text-align:center;
  font-weight:500;
}
:root{
  --primary-color:#001f3f;
  --primary-color-light:#0047ab;
  --primary-color-dark:#001429;
  --primary-color-rgb:0, 31, 63;
  --secondary-color:#ffffff;
  --accent-color:#f8f8f8;
  --text-color:#333333;
  --text-color-light:#777777;
  --card-shadow:0 4px 8px rgba(0, 0, 0, 0.1);
  --transition-speed:0.3s;
}
.blog-hero{
  position:relative;
  height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-color:var(--primary-color);
  color:var(--secondary-color);
  margin:0;
  padding:0;
  overflow:visible;
  pointer-events:none;
}
.blog-hero .hero-content,
.blog-hero .language-selector,
.blog-hero .hamburger-menu,
.blog-hero .hamburger-lines,
.blog-hero .menu-items,
.blog-hero .hamburger-menu *,
.blog-hero .hamburger-lines *,
.blog-hero .menu-items *{
  pointer-events:auto !important;
}

.blog-hero .hero-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1200px;
  padding:0 2rem;
}

.blog-title{
  font-size:3.5rem;
  font-family:'Playfair Display', serif;
  margin-bottom:0.5rem;
  text-transform:capitalize;
  letter-spacing:1px;
}

.blog-subtitle{
  font-size:1.2rem;
  opacity:0.9;
  margin-bottom:2rem;
}

.home-link{
  margin-top:2rem;
  position:relative;
  z-index:5;
}
.action-container{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  margin-top:2rem;
  position:relative;
  z-index:5;
}
.action-container .home-link{
  margin-top:0;
}
.scroll-indicator{
  width:30px;
  height:50px;
  border:2px solid var(--secondary-color);
  border-radius:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  opacity:0.7;
  cursor:pointer;
  transition:all 0.3s;
}

.scroll-indicator::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background-color:var(--secondary-color);
  position:absolute;
  left:50%;
  top:16px;
  transform:translateX(-50%);
  animation:scrollDown 2s infinite;
}

@keyframes scrollDown{
  0%{
    opacity:1;
    transform:translateY(0);
  }
  100%{
    opacity:0;
    transform:translateY(20px);
  }
}
.action-container .scroll-indicator{
  position:relative;
  bottom:auto;
  left:auto;
  transform:none;
  margin-top:5px;
  box-shadow:0 0 15px rgba(255, 255, 255, 0.2);
}
.action-container .scroll-indicator:hover{
  opacity:1;
  transform:translateY(3px);
  border-color:white;
  box-shadow:0 0 20px rgba(255, 255, 255, 0.3);
}
.blog-filter-section{
  padding:3rem 0;
  background-color:var(--accent-color);
  border-bottom:1px solid rgba(0, 0, 0, 0.05);
  margin-top:0;
}

.filter-container{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.search-container{
  position:relative;
  max-width:600px;
  margin:0 auto;
}

.search-input{
  width:100%;
  padding:0.8rem 1.2rem 0.8rem 2.8rem;
  border-radius:8px;
  border:1px solid #e0e0e0;
  font-family:inherit;
  font-size:1rem;
  transition:all 0.3s ease;
  background-color:white;
}

.search-input:focus{
  outline:none;
  border-color:var(--primary-color);
  box-shadow:0 0 0 3px rgba(var(--primary-color-rgb), 0.2);
}

.search-icon{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-color-light);
  font-size:16px;
  pointer-events:none;
}

.tag-filters{
  display:flex;
  flex-wrap:wrap;
  gap:0.7rem;
  justify-content:center;
  margin-top:1rem;
}

.filter-label{
  display:inline-block;
  margin-right:0.5rem;
  color:var(--text-color-light);
  align-self:center;
}

.tag-btn{
  background:#f0f0f0;
  border:none;
  padding:0.5rem 1rem;
  border-radius:20px;
  cursor:pointer;
  font-family:inherit;
  font-size:0.9rem;
  transition:all 0.2s;
}

.tag-btn:hover{
  background:#e0e0e0;
}

.tag-btn.active{
  background-color:var(--primary-color);
  color:white;
}
.blog-posts-section{
  padding:3rem 0;
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
  gap:2rem;
}
.blog-card{
  background-color:white;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 4px 15px rgba(0, 0, 0, 0.08);
  transition:transform 0.3s, box-shadow 0.3s;
}

.blog-card:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(0, 0, 0, 0.12);
}

.blog-image{
  height:200px;
  overflow:hidden;
}

.blog-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.5s;
}

.blog-card:hover .blog-image img{
  transform:scale(1.05);
}

.blog-content{
  padding:1.5rem;
}

.blog-tags{
  display:flex;
  gap:0.5rem;
  margin-bottom:0.8rem;
}

.tag{
  font-size:0.75rem;
  padding:0.2rem 0.6rem;
  border-radius:12px;
  font-weight:500;
}

.tag.buying-guide{
  background-color:#e3f2fd;
  color:#0d47a1;
}

.tag.maintenance{
  background-color:#e8f5e9;
  color:#1b5e20;
}

.tag.industry-news{
  background-color:#fff3e0;
  color:#e65100;
}

.tag.tips{
  background-color:#f3e5f5;
  color:#7b1fa2;
}

.blog-card-title{
  font-size:1.3rem;
  margin-bottom:0.8rem;
  line-height:1.4;
  font-weight:600;
  color:var(--text-color);
}

.blog-excerpt{
  font-size:0.95rem;
  line-height:1.6;
  color:var(--text-color-light);
  margin-bottom:1.5rem;
}

.blog-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #f0f0f0;
  padding-top:1rem;
}

.date{
  font-size:0.85rem;
  color:var(--text-color-light);
}

.read-more{
  font-size:0.9rem;
  color:var(--primary-color);
  font-weight:500;
  position:relative;
}

.read-more::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:2px;
  background-color:var(--primary-color);
  transition:width 0.3s;
}

.read-more:hover::after{
  width:100%;
}
.pagination{
  display:flex;
  justify-content:center;
  gap:0.5rem;
  margin-top:3rem;
}

.pagination-btn{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e0e0e0;
  border-radius:8px;
  background:white;
  cursor:pointer;
  font-family:inherit;
  transition:all 0.2s;
}

.pagination-btn:hover{
  background-color:#f5f5f5;
}

.pagination-btn.active{
  background-color:var(--primary-color);
  color:white;
  border-color:var(--primary-color);
}

.pagination-btn.next,
.pagination-btn.prev{
  width:auto;
  padding:0 15px;
  min-width:80px;
}
.language-selector{
  position:absolute;
  top:2rem;
  right:2rem;
  display:flex;
  align-items:center;
  background-color:rgba(255, 255, 255, 0.15);
  padding:0.4rem;
  border-radius:30px;
  backdrop-filter:blur(8px);
  z-index:1000;
  box-shadow:0 4px 15px rgba(0, 0, 0, 0.15);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  overflow:hidden;
}

.language-selector .lang-btn{
  position:relative;
  background:none;
  border:none;
  color:var(--secondary-color);
  font-weight:600;
  padding:0.4rem 0.9rem;
  cursor:pointer;
  transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius:20px;
  font-family:inherit;
  font-size:0.9rem;
  opacity:0.7;
  z-index:2;
}

.language-selector .lang-btn:hover{
  opacity:1;
}

.lang-btn.active{
  background-color:var(--secondary-color);
  color:var(--primary-color);
  opacity:1;
  transform:scale(1.05);
}

.language-selector .lang-divider{
  color:var(--secondary-color);
  opacity:0.5;
  margin:0 2px;
}

.language-selector:hover{
  transform:translateY(2px);
  box-shadow:0 6px 20px rgba(0, 0, 0, 0.2);
}
.blog-logo{
  margin-bottom:2rem;
}

.blog-logo img{
  width:200px;
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  filter:drop-shadow(0 5px 15px rgba(0, 31, 63, 0.12));
  transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.blog-logo img:hover{
  transform:scale(1.08);
  filter:drop-shadow(0 8px 20px rgba(0, 31, 63, 0.2));
}
.site-footer{
  background-color:var(--primary-color);
  color:var(--secondary-color);
  padding:3rem 0 1.5rem;
}

.footer-content{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  padding:0 2rem;
}

.footer-section{
  margin-bottom:2rem;
  min-width:250px;
  text-align:center;
}

.footer-section h3{
  font-size:1.2rem;
  margin-bottom:1rem;
  font-weight:600;
  letter-spacing:1px;
}

.footer-section p{
  margin-bottom:0.5rem;
  font-size:0.9rem;
  opacity:0.8;
}

.copyright{
  text-align:center;
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255, 255, 255, 0.1);
  font-size:0.8rem;
  opacity:0.7;
}
@media screen and (max-width: 768px){
  .footer-content{
    flex-direction:column;
    align-items:center;
  }

  .footer-section{
    text-align:center;
    margin-bottom:1.5rem;
  }
}
.blog-hero{
  position:relative;
  overflow:visible;
}
@media screen and (max-width: 768px){
  .blog-grid{
    grid-template-columns:1fr;
  }

  .blog-title{
    font-size:2.5rem;
  }

  .filter-container{
    flex-direction:column;
  }

  .tag-filters{
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:0.5rem;
    flex-wrap:nowrap;
    width:100%;
  }
  .language-selector{
    top:10px;
    right:10px;
    padding:5px 10px;
    font-size:0.9rem;
  }
  .action-container{
    flex-direction:column;
    gap:1rem;
  }
  .action-container .scroll-indicator{
    margin:0 auto;
  }
}