@font-face {
  font-family: 'CircularStd';
  /* src: url('fonts/CustomFont.otf') format('opentype'); */
  /* or for .ttf: */
  src: url('/Assets/font/circular-std-font-family/CircularStd-Black.woff2') format('woff2');
    font-display: swap;
}

@font-face {
  font-family: 'CircularStd-bold';
  src: url('/Assets/font/circular-std-font-family/CircularStd-Bold.woff2') format('woff2');
    font-display: swap;
}

@font-face {
  font-family: 'CircularStd-book';
  src: url('/Assets/font/circular-std-font-family/CircularStd-Book.woff2') format('woff2');
    font-display: swap;
}

@font-face {
  font-family: 'CircularStd-medium';
  src: url('/Assets/font/circular-std-font-family/CircularStd-Medium.woff2') format('woff2');
    font-display: swap;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-book);
}

a {
  text-decoration: none;
}

:root {
  --bg-color: #051c2c;
  --primary-color: #073044;
  --secondary-color: #094663;
  --tertiary-color: #036686;
  --dark-color: #051c2c;
  --font-color: #fff;
  --btn-bg-color: #02D1A6;
  --text-color-fade: #FFFFFFB2;
  --blog-color: #0f2f4e;
  --font-book: 'CircularStd-book';
  --font-bold: 'CircularStd-bold';
  --font-medium: 'CircularStd-medium';
}


.main {
  height: 100%;
  width: 100%;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


/* ======= Hero Section ======= */

.blogExploreHeroSection {
  height: fit-content;
  width: 100%;
  padding-top: 100px;
}

.blogExploreHeroSectionContainer {
  height: 100%;
  width: 90%;
  margin: 0 auto;
  padding: 4rem 0;
  /* display: flex;
    flex-direction: column */
}

.blogExploreHeroSectionContainer h1 {
  color: #333;
  /* font-weight: 400; */
  font-size: 64px;

}

.blogExploreHeroSectionContainer p {
  width: 30%;
  color: #333;
  font-size: 18px;
  line-height: 26px;
}


/* ============ blogs Container======== */

.blogsDisplay {
  height: 100%;
  width: 100%;
  padding: 4rem 0;
  padding-top: 0;
}

.blogDisplayContainer {
  height: 100%;
  width: 90%;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  transition: opacity 0.4s ease-in-out;

  /* grid-template-columns: repeat(5,1fr); */
}


.blogCategoryTabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.categoryBtn {
  padding: 8px 16px;
  border: 1px solid var(--blog-color);
  background-color: transparent;
  color: var(--blog-color);
  font-size: 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.categoryBtn:hover {
  background-color: var(--blog-color);
  color: #fff
}

.categoryBtn.active {
  background-color: var(--blog-color);
  color: white;
}

.blogCard {
  flex: 1 1 444px;
  max-width: 444px;
  background-color: white;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  position: relative;
  transition: 0.2s ease-in-out;
}

.blogCard .blogCardHead .blogTitle {
  position: relative;
  z-index: 11;
  color: #000;
  font-size: 20px;
  font-weight: 200;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.blogCard .blogCardHead .blogTitle:hover {
  text-decoration: underline;
  color: #2251FF;
}


.blogCard .blogCardBtn {
  display: flex;
  margin: 0 24px 24px 24px;
}

.blogCard .blogCardBtn a {
  color: #000;
  border: none;
  padding: 0px;
}

.blogCard .blogCardBtn:hover a {
  text-decoration: underline;
  color: #2251FF;
}


.blogCardImg {
  /* Same shape as the blog's featured images (444x274), so the box shrinks
     with the card instead of staying 274px tall and leaving empty bands
     above and below the image on phones. */
  width: 100%;
  aspect-ratio: 444 / 274;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.blogCard:hover {
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, .3);
}


.blogCard:hover h1 {
  /* transform: scale(1.05); */
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}


.blogCardHead {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blogCardHead .blogPubDate {
  color: #000;
  font-size: 18px;
  line-height: 26px;
}

.blogCardHead .blogDescription {
  color: #000;
  font-size: 16px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fade-in/out animations */
.fade-in {
  animation: fadeIn 0.4s ease-in;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 70px;
  padding-bottom: 70px;
  transition: all 0.3s ease-in-out;
}

.paginationContainer {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}

.pageBtn {
  font-size: 16px;
  padding: 6px 15px;
  border: 1px solid #0f2f4e;
  background-color: transparent;
  color: #0f2f4e;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.pageBtn:hover {
  background-color: #0f2f4e;
  color: white;
}

.pageBtn.active {
  background-color: #0f2f4e;
  color: white;
}

.dots {
  padding: 6px 10px;
  color: #888;
}

/* Phones: keep the page numbers and Next on one centred row. */
@media (max-width: 480px) {
  .pagination {
    margin-top: 40px;
    padding: 0 12px 56px;
  }

  .paginationContainer {
    gap: 4px;
  }

  .pageBtn {
    font-size: 14px;
    padding: 5px 11px;
  }

  .dots {
    padding: 5px 4px;
  }
}

@media (max-width: 767px) {
  .blogExploreHeroSectionContainer {
    padding: 2rem 0;
  }

  .blogsDisplay {
    padding: 0;
  }

  .blogExploreHeroSectionContainer h1 {
    font-size: 32px;
  }

  .blogExploreHeroSectionContainer p {
    width: 100%;
  }

  .blogCard {
    width: 90%;
    margin: 0 auto;
  }

  .blogDisplayContainer {
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    justify-content: center;
  }

  /* .blogCard .blogCardBtn a{
        opacity: 1;
        top: 0;
    } */
  .blogCard:hover .blogCardImg {
    transform: scale(1) translateX(0%) translateY(0);
    filter: blur(0px);
    transition: all 0.3s ease-in-out;
  }
}


@media (max-width: 1399px) {
  .blogDisplayContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 1199px) {
  .blogDisplayContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}


@media (max-width: 767px) {
  .blogExploreHeroSectionContainer {
    padding: 2rem 0;
  }

  .blogsDisplay {
    padding: 0;
  }

  .blogExploreHeroSectionContainer h1 {
    font-size: 32px;
  }

  .blogExploreHeroSectionContainer p {
    width: 100%;
  }

  .blogCard {
    width: 90%;
    margin: 0 auto;
  }

  .blogDisplayContainer {
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    justify-content: center;
  }

  .blogCard:hover .blogCardImg {
    transform: scale(1) translateX(0%) translateY(0);
    filter: blur(0px);
    transition: all 0.3s ease-in-out;
  }
}

.whatsapp-float {
  position: fixed;
  bottom: 4rem;
  right: 4rem;
  z-index: 9999;
  border-radius: 50%;
  /* background-color: var(--bg-color); */
}

.whatsapp-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
  object-fit: cover;
}

.whatsapp-icon:hover {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .whatsapp-icon {
    width: 50px;
    height: 50px;
    padding: 6px;
  }

  .whatsapp-float {
    bottom: 2rem;
    right: 2rem;
  }
}

@media (max-width: 480px) {
  .whatsapp-icon {
    width: 45px;
    height: 45px;
    padding: 4px;
  }

  .whatsapp-float {
    bottom: 1rem;
    right: 1rem;
  }
}
/* ---------------------------------------------------------------------------
   Breadcrumb

   Posts open on blog.finstein.ai (a separate WordPress site) in a new tab, so
   this orients the reader within cyber.finstein.ai rather than acting as a
   "back" control.

   Colours are set literally, NOT from --font-color / --text-color-fade: those
   tokens are #fff and #FFFFFFB2, sized for the dark header and footer. This
   page renders its heading and body at #333 on a light background, so the
   tokens would make the breadcrumb white-on-white. Values below match the
   page's own text colour and clear WCAG AA.
--------------------------------------------------------------------------- */
.breadcrumb {
    margin-bottom: 1rem;
}

.breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    font-weight: 400;
    color: #333;
}

/* Separator drawn in CSS so screen readers do not announce it. */
.breadcrumb li + li::before {
    content: "/";
    color: #6b757d;
}

.breadcrumb a {
    color: #55636e;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: #0f7f68;
    text-decoration: underline;
}

.breadcrumb li[aria-current="page"] {
    color: #333;
    font-weight: 500;
}

@media (max-width: 767px) {
    .breadcrumb li {
        font-size: 13px;
    }
}