/*==============================================================
#
# Blog Landing Page
# File : assets/css/blog-landing.css
# Theme: Astra Child
#
==============================================================*/


/*==============================================================
# Variables
==============================================================*/

:root {

    --blog-max-width: 1382px;

    --container-padding: 24px;

    --section-space: 100px;

    --hero-radius: 28px;

    --card-radius: 22px;

    --category-radius: 18px;

    --transition: .35s ease;

    --primary: #111111;

    --secondary: #666666;

    --border: #ececec;

    --background: #ffffff;

    --light: #f7f7f7;

    --accent: #111111;

    --accent-hover: #2a2a2a;

    --white: #ffffff;

}
/* 
body{
 margin-top: 36px;  
} */

.WordPressIframe-Wrapper html {
     scrollbar-width: none !important;
}
/*==============================================================
# Reset
==============================================================*/

.blog-landing-page {

    background: #fff;

}

.blog-landing-page * {

    box-sizing: border-box;

}

.blog-landing-page img {

    display: block;

    width: 100%;

    height: auto;

}

.blog-landing-page a,
.blog-landing-page a:hover,
.blog-landing-page a:focus,
.blog-landing-page a:focus-visible,
.blog-landing-page a:active,
.blog-card,
.blog-card:hover,
.blog-card:focus,
.blog-card:focus-visible,
.blog-card:active {
    text-decoration: none;
    outline: none !important;
    outline-style: none !important;
    box-shadow: none !important;
    transition: all .3s ease;
}

.blog-landing-page ul {

    margin: 0;

    padding: 0;

    list-style: none;

}


/*==============================================================
# Container
==============================================================*/

.blog-landing-page .container {

    max-width: var(--blog-max-width);

    margin: auto;
    /*    recent */

    margin-top: 40px;

}


/*==============================================================
# Section Spacing
==============================================================*/
.hero-slider-section {
    margin-top: 0;
}
 
.featured-categories { 
    /* padding: var(--section-space) 0; */

}

.latest-posts {

    padding-bottom: var(--section-space);

}


/*==============================================================
# Common Section Heading
==============================================================*/

.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 42px;

}

.section-heading h2 {

    margin: 8px 0 0;

    font-size: 42px;

    font-weight: 700;

    line-height: 1.15;

    color: #111;

}

.section-subtitle {

    display: block;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: 13px;

    font-weight: 700;

    color: #999;

}

.see-more {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 15px;

    font-weight: 600;

    color: #111;

}

.see-more:hover {

    opacity: .75;

}


/*==============================================================
# Hero Slider
==============================================================*/

.hero-slider {

    position: relative;

}

.hero-slide {

    padding: 0 10px;

}

.hero-slide__wrapper {

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    align-items: center;

    background: #f6f4ef;

    /* border-radius:var(--hero-radius); */

    overflow: hidden;

    min-height: 640px;

}


/*==============================================================
# Hero Content
==============================================================*/

.hero-slide__content {

    padding: 70px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.hero-badge {

    display: inline-flex;

    align-self: flex-start;

    background: #111;

    color: #fff;

    padding: 8px 18px;

    border-radius: 50px;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 700;

    margin-bottom: 2px;

}

.hero-title {

    margin: 0 0 24px;

    font-size: 64px;

    line-height: 1;

    letter-spacing: -1%;
    font-style: "bold";
    font-weight: 700;
    color: #111;

}

.hero-description {

    max-width: 520px;

    margin-bottom: 36px;

    font-weight: 400;
    font-style: normal;
    font-size: 21px;
    line-height: 1.4;
    letter-spacing: 0;
    color: #333333CC;

}

.hero-description p {

    margin: 0;

}

.hero-button {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 170px;

    height: 45px;

    border-radius: 50px;

    background: #111;

    color: #fff;

    font-weight: 600;

    transition: .35s;

}

.hero-button:hover {

    background: #2a2a2a;

}


/*==============================================================
# Hero Image
==============================================================*/

.hero-slide__image {

    position: relative;

    height: 100%;

}

.hero-slide__image img { 
    aspect-ratio: 75 / 74 !important; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

/*==============================================================
# Slick Slider Navigation
==============================================================*/

.hero-slider .slick-list {

    overflow: hidden;

    /* border-radius:var(--hero-radius); */

}

.hero-slider .slick-track {

    display: flex;

    align-items: stretch;

}

.hero-slider .slick-slide {

    height: inherit;

}

.hero-slider .slick-slide>div {

    height: 100%;

}

/*==============================================================
# Slick Slider Navigation
==============================================================*/

.hero-slider {

    position: relative;

    padding-bottom: 48px;

}


/*==============================================================
# Slick Arrows
==============================================================*/

.hero-slider .hero-prev,
.hero-slider .hero-next {

    position: absolute !important;

    top: auto !important;

    bottom: 0 !important;

    width: 40px !important;

    height: 40px !important;

    min-width: 40px !important;

    min-height: 40px !important;

    max-width: 40px !important;

    max-height: 40px !important;

    margin: 0 !important;

    padding: 0 !important;

    border-radius: 50% !important;

    background: #fff !important;

    border: 1px solid rgba(0, 0, 0, .25) !important;

    box-shadow: none !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    z-index: 20;

    transform: none !important;

    font-size: 18px !important;

    line-height: 1 !important;

}


/*==============================================================
# Arrow Position
==============================================================*/

.hero-slider .hero-prev {

    left: calc(50% - 50px) !important;

    right: auto !important;

}


.hero-slider .hero-next {

    left: calc(50% + 10px) !important;

    right: auto !important;

}


/*==============================================================
# Arrow Hover
==============================================================*/

.hero-slider .hero-prev:hover,
.hero-slider .hero-next:hover {

    background: #111 !important;

    border-color: #111 !important;

    color: #fff !important;

}

.hero-slider .slick-prev {

    left: calc(50% - 50px) !important;

}


.hero-slider .slick-next {

    right: calc(50% - 50px) !important;

}

/*==============================================================
# Hero Slider Arrows Below Dots
==============================================================*/

.hero-slider .slick-prev,
.hero-slider .slick-next {

    top: auto !important;

    bottom: 0 !important;

    left: auto !important;

    right: auto !important;

}


.hero-slider .slick-prev {

    left: calc(50% - 50px) !important;

}


.hero-slider .slick-next {

    right: calc(50% - 50px) !important;

}

/*==============================================================
# Arrow Symbols
==============================================================*/

.hero-slider .slick-prev::after {

    content: '←';

    display: block;

    font-size: 18px;

    line-height: 1;

    color: #111;

}


.hero-slider .slick-next::after {

    content: '→';

    display: block;

    font-size: 18px;

    line-height: 1;

    color: #111;

}


/*==============================================================
# Arrow Hover
==============================================================*/

.hero-slider .slick-prev:hover,
.hero-slider .slick-next:hover {

    background: #111 !important;

    border-color: #111 !important;

}


.hero-slider .slick-prev:hover::after,
.hero-slider .slick-next:hover::after {

    color: #fff;

}


/*==============================================================
# Remove Slick Default Arrow
==============================================================*/

.hero-slider .slick-prev:before,
.hero-slider .slick-next:before {

    display: none !important;

    content: none !important;

}

 
.hero-slider .slick-dots {
  position: relative;

  bottom: auto;
  left: auto;

  display: flex !important;

  align-items: center;
  justify-content: center;

  width: 120px;

  height: 4px;

  margin: 52px auto 0;

  padding: 0;

  list-style: none;

  background: #e7dfe1;
}

.hero-slider .slick-dots li {
  position: relative;

  display: block;

  width: 40px;

  height: 4px;

  margin: 0;

  padding: 0;
}

.hero-slider .slick-dots li button {
  display: block;

  width: 100%;

  height: 4px;

  margin: 0;

  padding: 0;

  overflow: hidden;

  font-size: 0;

  line-height: 0;

  border: 0;

  border-radius: 0;

  background: transparent;

  cursor: pointer;
}

.hero-slider .slick-dots li button::before {
  display: none;
}

.hero-slider .slick-dots li.slick-active button {
  background: #994F67;
}
.hero-slider .slick-dots button {
  border: none !important;
}

/*==============================================================
# Featured Categories
==============================================================*/
/* 03-08 */
/* ==============================================================
   DIVE DEEPER / FEATURED CATEGORIES
   Figma desktop:
   Section: 1250px × 766px
   Cards:   406px × 492px
   Image:   390px × 416px
   Gap:     16px
============================================================== */

/* ==============================================================
   SECTION
============================================================== */

.featured-categories {
  width: 100%;
  /* padding: 80px 0; */
  overflow: hidden;
}

.featured-categories .container {
  width: 100%;
  /* max-width: 1250px; */
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

/* ==============================================================
   SECTION HEADING
============================================================== */

.featured-categories .section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  width: 100%;
  height: 82px;

  margin: 0 0 32px;
  padding: 0;
}

.featured-categories .section-heading > div {
  position: relative;

  width: 391px;
  height: 82px;
}

.featured-categories .section-subtitle {
  /* margin-bottom: 8px; */
  color: #994F67;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  font-style: "SemiBold";
  margin-bottom: 5px;
}
.featured-categories__title {
  font-weight: 300;
  font-style: normal;
  font-size: 55px;
  line-height: 100%;
  letter-spacing: -1%;
  margin-bottom: 10px;
}
.featured-categories .section-heading h2 {
  width: 295px;
  height: 55px;

  margin: 8px 0 0;

  font-style: normal;
  font-weight: 300;
  font-size: 55px;
  line-height: 100%;

  letter-spacing: -0.01em;

  color: #333333;
}

/* ==============================================================
   REMOVE OLD SEE MORE BUTTON
============================================================== */

.featured-categories .see-more {
  display: none !important;
}

/* ==============================================================
   SLICK SLIDER WRAPPER
============================================================== */

/*
The category-grid is now the Slick slider.

Do not use:
display: grid;
grid-template-columns: ...;

Slick creates its own track and slide layout.
*/

.featured-categories .category-grid {
  position: relative;

  display: block;

  width: 100%;
  height: 492px;

  margin: 0;
  padding: 0;
}

.featured-categories .category-grid.slick-slider {
  display: block;
}

.featured-categories .category-grid .slick-list {
  width: 100%;
  height: 492px;

  overflow: hidden;
}

.featured-categories .category-grid .slick-track {
  display: flex;
  align-items: flex-start;

  height: 492px;
}

.featured-categories .category-grid .slick-slide {
  height: 492px;

  margin: 0 8px;
}

.featured-categories .category-grid .slick-slide:first-child {
  margin-left: 0;
}

.featured-categories .category-grid .slick-slide > div {
  height: 492px;
}
/* ==============================================================
   SLICK CATEGORY SLIDE SPACING
============================================================== */

.featured-categories .category-grid .slick-slide {
  height: 492px;

  /* 4px left + 4px right = 8px gap between cards */
  margin: 0 4px;
}

.featured-categories .category-grid .slick-slide:first-child {
  margin-left: 0;
}

.featured-categories .category-grid .slick-slide > div {
  height: 492px;
}

/* ==============================================================
   CATEGORY CARD
============================================================== */

/*
Figma:
width: 406px;
height: 492px;
padding: 8px 8px 16px;
gap: 16px;
*/

.featured-categories .category-card,
.featured-categories .category-card:hover,
.featured-categories .category-card:focus,
.featured-categories .category-card:focus-visible,
.featured-categories .category-card:active,
.featured-categories .slick-slide,
.featured-categories .slick-slide:hover,
.featured-categories .slick-slide:focus,
.featured-categories .slick-slide:focus-visible,
.featured-categories .slick-slide:active,
.featured-categories a,
.featured-categories a:hover,
.featured-categories a:focus,
.featured-categories a:focus-visible,
.featured-categories a:active {
  outline: none !important;
  outline-style: none !important;
  box-shadow: none !important;
}

.featured-categories .category-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 406px;
  min-width: 406px;
  height: 492px;
  padding: 8px 0px;
  gap: 16px;
  overflow: hidden;
  background: transparent;
  border-radius: 4px;
  text-decoration: none;
  transition: none;
}

.featured-categories .category-card:hover {
  transform: none;
  box-shadow: none !important;
  outline: none !important;
  outline-style: none !important;
}

/* ==============================================================
   CATEGORY IMAGE
============================================================== */

/*
Figma:
width: 390px;
height: 416px;
border: 1px solid rgba(51, 51, 51, 0.4);
border-radius: 2px;
*/

.featured-categories .category-card__image {
  box-sizing: border-box;

  position: relative;

  flex: 0 0 416px;

  width: 390px;
  min-width: 390px;

  height: 416px;

  overflow: hidden;

  aspect-ratio: auto;

  border: 1px solid rgba(51, 51, 51, 0.4);

  border-radius: 2px;

  background: #f2f2f2;
}

.featured-categories .category-card__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: none;

  transition: none;
}

.featured-categories .category-card:hover .category-card__image img {
  transform: none;
}

/* Remove the old image overlay */

.featured-categories .category-card__image::after {
  display: none;
}

/* ==============================================================
   CATEGORY TITLE WRAPPER
============================================================== */

/*
Figma:
width: 390px;
height: 36px;
padding: 0 16px 0 0;
gap: 10px;
*/

.featured-categories .category-card__content {
  box-sizing: border-box;

  display: flex;
  flex-direction: row;

  justify-content: space-between;
  align-items: center;

  flex: 0 0 36px;

  width: 390px;

  height: 36px;

  min-height: 36px;

  padding: 0 16px 0 0;

  gap: 10px;

  overflow: visible;

  text-align: left;
}

/* ==============================================================
   CATEGORY TITLE
============================================================== */

/*
Figma:
width: 374px;
height: 36px;
font-size: 32px;
font-weight: 600;
line-height: 112%;
letter-spacing: -0.02em;
*/

.featured-categories .category-card__content h3 {
  display: block;

  flex: 1 1 auto;

  width: 374px;

  height: 36px;

  margin: 0;

  padding: 0;

  overflow: visible;

  white-space: nowrap;


  font-style: normal;

  font-weight: 600;

  font-size: 32px;

  line-height: 112%;

  letter-spacing: -0.02em;

  color: #333333;

  text-align: left;

  transition: none;
}

.featured-categories .category-card:hover .category-card__content h3 {
  color: #333333;
}

/* ==============================================================
   SLICK NAVIGATOR
============================================================== */

.featured-categories .slick-dots {
  position: relative;
  bottom: auto;
  left: auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 4px;
  margin: 32px auto 0;
  padding: 0;
  list-style: none;
  background: #e7dfe1;
  border-radius: 4px;
  overflow: hidden;
}

.featured-categories .slick-dots li {
  position: relative;
  display: block;
  flex: 1 1 0%;
  width: auto;
  height: 4px;
  margin: 0;
  padding: 0;
}

.featured-categories .slick-dots li button,
.featured-categories .slick-dots li button:hover,
.featured-categories .slick-dots li button:focus,
.featured-categories .slick-dots li button:focus-visible,
.featured-categories .slick-dots li button:active {
  display: block;
  width: 100%;
  height: 4px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  border: 0 !important;
  border: none !important;
  outline: none !important;
  outline-style: none !important;
  box-shadow: none !important;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s ease;
}

.featured-categories .slick-dots li button::before {
  display: none !important;
}

.featured-categories .slick-dots li.slick-active button {
  background: #994f67 !important;
  border-radius: 4px;
}



/* ==============================================================
   PREVIOUS / NEXT ARROWS
============================================================== */

.featured-categories .category-prev,
.featured-categories .category-next {
  position: absolute;

  top: 50%;

  z-index: 10;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 44px;

  height: 44px;

  padding: 0;

  color: #333333;

  font-size: 24px;

  line-height: 1;

  border: 1px solid rgba(51, 51, 51, 0.3);

  border-radius: 50%;

  background: #ffffff;

  cursor: pointer;

  transform: translateY(-50%);
}

.featured-categories .category-prev {
  left: -22px;
}

.featured-categories .category-next {
  right: -22px;
}

/* ==============================================================
   RTL
============================================================== */

html[dir="rtl"] .featured-categories,
body.rtl .featured-categories {
  direction: rtl;
}

html[dir="rtl"] .featured-categories .section-heading,
body.rtl .featured-categories .section-heading {
  text-align: right;
}

html[dir="rtl"] .featured-categories .section-heading h2,
body.rtl .featured-categories .section-heading h2 {
  text-align: right;
}

html[dir="rtl"] .featured-categories .category-card__content,
body.rtl .featured-categories .category-card__content {
  padding: 0 0 0 16px;

  text-align: right;
}

html[dir="rtl"] .featured-categories .category-card__content h3,
body.rtl .featured-categories .category-card__content h3 {
  text-align: right;
}

html[dir="rtl"] .featured-categories .category-prev,
body.rtl .featured-categories .category-prev {
  right: -22px;
  left: auto;
}

html[dir="rtl"] .featured-categories .category-next,
body.rtl .featured-categories .category-next {
  right: auto;
  left: -22px;
}

/* ==============================================================
   TABLET
============================================================== */

@media screen and (max-width: 1300px) {
  .featured-categories .container {
    max-width: calc(100%);

    padding: 0;
  }

  .featured-categories .category-grid {
    height: auto;
  }

  .featured-categories .category-grid .slick-list,
  .featured-categories .category-grid .slick-track,
  .featured-categories .category-grid .slick-slide,
  .featured-categories .category-grid .slick-slide > div {
    height: 420px;
  }

  .featured-categories .category-card {
    width: 340px !important;

    min-width: 340px;

    height: 420px;

    padding: 6px 6px 12px;

    gap: 12px;
  }

  .featured-categories .category-card__image {
    flex-basis: 356px;

    width: 328px;

    min-width: 328px;

    height: 356px;
  }

  .featured-categories .category-card__content {
    flex-basis: 34px;

    width: 328px;

    height: 34px;

    min-height: 34px;

    padding-right: 12px;
  }

  .featured-categories .category-card__content h3 {
    width: 316px;

    height: 34px;

    font-size: 28px;
  }
}

/*==============================================================
# Latest Posts Section
==============================================================*/

.latest-posts {
    position: relative;
}

.latest-posts-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 32px;

    align-items: stretch;

}


/*==============================================================
# Blog Card
==============================================================*/

.blog-card {
    position: relative !important;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    transition: all .35s ease;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .05);
    height: 100%;
    border: 1px solid #f1f1f1;
}

.blog-card .blog-card__title a::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
    cursor: pointer !important;
}

.blog-card a:not(.blog-card__title a),
.blog-card button,
.blog-card .blog-card__category,
.blog-card .blog-card__tag,
.blog-card .blog-card__meta a {
    position: relative !important;
    z-index: 6 !important;
}

.blog-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 24px 55px rgba(0, 0, 0, .12);

}


/*==============================================================
# Blog Image
==============================================================*/

.blog-card__image {

    display: block;

    overflow: hidden;

    position: relative;

    aspect-ratio: 4/5;

    background: #f7f7f7;

}

.blog-card__image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .65s ease;

}

.blog-card:hover .blog-card__image img {

    transform: scale(1.08);

}


/*==============================================================
# Image Overlay
==============================================================*/

.blog-card__image::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to top,
            rgba(0, 0, 0, .12),
            rgba(0, 0, 0, 0));

    opacity: 0;

    transition: .35s;

}

.blog-card:hover .blog-card__image::after {

    opacity: 1;

}


/*==============================================================
# Card Content
==============================================================*/

.blog-card__content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 28px;

}


/*==============================================================
# Category Badge
==============================================================*/

.blog-card__category {

    display: inline-flex;

    align-self: flex-start;

    margin-bottom: 18px;

    padding: 7px 16px;

    border-radius: 50px;

    background: #111;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .8px;

    text-transform: uppercase;

}


/*==============================================================
# Blog Title
==============================================================*/

.blog-card__title {

    margin: 0 0 18px;

    font-size: 28px;

    font-weight: 700;

    line-height: 1.25;

}

.blog-card__title a {

    color: #111;

    transition: .3s;
    word-break: break-word;

}

.blog-card:hover .blog-card__title a {

    color: #444;

}


/*==============================================================
# Excerpt
==============================================================*/

.blog-card__excerpt {

    margin: 0;

    color: #666;

    font-size: 16px;

    line-height: 1.8;

}


/*==============================================================
# Meta
==============================================================*/

.blog-card__meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: nowrap;

    gap: 10px;

    margin-top: 24px;

    color: #888;

    font-size: 14px;

    line-height: 1.4;

}

.blog-card__meta span {

    display: inline-flex;

    align-items: center;

}


/*==============================================================
# Read More
==============================================================*/

.blog-card__link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: auto;

    padding-top: 28px;

    font-weight: 700;

    color: #111;

    transition: .3s;

}

.blog-card__link::after {

    content: "→";

    transition: .3s;

}

.blog-card:hover .blog-card__link {

    color: #000;

}

.blog-card:hover .blog-card__link::after {

    transform: translateX(6px);

}


/*==============================================================
# Keyboard Accessibility
==============================================================*/

.blog-card:focus-within {

    outline: 2px solid #111;

    outline-offset: 4px;

}


/*==============================================================
# Loading Optimisation
==============================================================*/

.blog-card img {

    backface-visibility: hidden;

    transform: translateZ(0);

}

/*==============================================================
# Buttons
==============================================================*/

.hero-button,
.blog-card__link,
.see-more {

    transition: all .35s ease;

}

.hero-button:focus,
.blog-card__link:focus,
.see-more:focus {

    outline: none;

    box-shadow: 0 0 0 3px rgba(17, 17, 17, .15);

}


/*==============================================================
# Image Rendering
==============================================================*/

.hero-slide__image img,
.category-card__image img,
.blog-card__image img {

    image-rendering: auto;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    transform: translateZ(0);

}


/*==============================================================
# Hover Effects
==============================================================*/

.hero-slide__image {

    overflow: hidden;

}

.hero-slide__image img {

    /* transition: transform .7s ease; */

}

.hero-slide:hover .hero-slide__image img {

    /* transform: scale(1.04); */

}

.hero-slide:hover .hero-title {

    color: #000;

}


/*==============================================================
# Card Animation
==============================================================*/

.category-card,
.blog-card {

    will-change: transform;

}

.category-card:hover {

    transition: transform .35s ease,
        box-shadow .35s ease;

}

.blog-card:hover {

    transition: transform .35s ease,
        box-shadow .35s ease;

}


/*==============================================================
# Empty States
==============================================================*/

.category-grid:empty,
.latest-posts-grid:empty {

    display: block;

    text-align: center;

    padding: 80px 0;

}

.category-grid:empty::before {

    content: "No Categories Found";

    color: #777;

    font-size: 16px;

}

.latest-posts-grid:empty::before {

    content: "No Posts Found";

    color: #777;

    font-size: 16px;

}


/*==============================================================
# Slick Loading
==============================================================*/

.hero-slider:not(.slick-initialized) {

    visibility: hidden;

    opacity: 0;

}

.hero-slider.slick-initialized {

    visibility: visible;

    opacity: 1;

    transition: opacity .4s ease;

}


/*==============================================================
# Selection
==============================================================*/

.blog-landing-page ::selection {

    background: #111;

    color: #fff;

}


/*==============================================================
# Utilities
==============================================================*/

.mb-0 {

    margin-bottom: 0 !important;

}

.mt-0 {

    margin-top: 0 !important;

}

.text-center {

    text-align: center;

}

.text-left {

    text-align: left;

}

.text-right {

    text-align: right;

}


/*==============================================================
# Accessibility
==============================================================*/

.hero-button,
.see-more,
.blog-card__link,
.category-card {

    -webkit-tap-highlight-color: transparent;

}

.hero-button:focus-visible,
.see-more:focus-visible,
.blog-card__link:focus-visible,
.category-card:focus-visible {

    outline: 2px solid #111;

    outline-offset: 4px;

}


/*==============================================================
# Print
==============================================================*/

@media print {
    .hero-slider .slick-arrow,
    .hero-slider .slick-dots {
        display: none !important;
    }

    .hero-slide__wrapper {
        min-height: auto;
    }

    .hero-button {
        border: 1px solid #111;
        color: #111;
        background: transparent;
    }
}

/*==============================================================
# Responsive: Hero + Latest Posts (Tablet / Mobile Baseline)
==============================================================*/
@media (max-width: 1024px) {
    .hero-slide__wrapper {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .hero-slide__image {
        order: 1 !important;
        width: 100% !important;
    }

    .hero-slide__content {
        order: 2 !important;
        padding: 36px 0 !important;
        align-items: flex-start !important;
    }

    .hero-slide__image img {
        height: 380px;
        aspect-ratio: 75 / 74 !important;
        object-fit: cover;
    }
}


/*==============================================================
# End of File
==============================================================*/


/*==============================================================
# Reference Overrides (exact visual matching)
# These rules intentionally override earlier styles to match the
# provided design spec for hero and latest-posts sections.
==============================================================*/

/* Hero: typography, badge and button */
.hero-slide__wrapper {
    background: transparent !important;
}

.hero-badge {
    background: transparent !important;
    color: #994F67 !important;
    padding: 0 !important;
    margin-bottom: 2px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

.hero-title,
.hero-title h1,
.hero-title h2,
.hero-title h3,
.hero-title p {
    margin-top: 0 !important;
    padding-top: 0 !important;
    font-weight: 300 !important;
    font-size: 55px !important;
    line-height: 1 !important;
    color: #333333 !important;
    margin-bottom: 4px !important;
}

.hero-description {
    color: #555 !important
}

.hero-button {
    background: transparent !important;
    border: 1px solid rgba(51, 51, 51, 0.4) !important;
    border-radius: 100px !important;
    padding: 8px 24px !important;
    font-size: 16px !important;
    color: #333333 !important;
    font-weight: 400 !important
}

.hero-button:hover {
    background: rgba(0, 0, 0, 0.03) !important
}

/*==============================================================
# Trending Posts – Figma Design
==============================================================*/

.latest-posts {

    padding-top: 28px !important;

    padding-bottom: 48px !important;

    /* background:#f4f4f4; */
    background: #fff;

}


/*==============================================================
# Section Heading
==============================================================*/

.latest-posts .section-heading {

    align-items: center;

    margin-bottom: 30px;

}


.latest-posts .section-subtitle {

    margin-bottom: 8px;

     color: #994F67;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  font-style: "SemiBold";
  

}


.latest-posts .section-heading h2 {

    max-width: 550px;

    margin: 0;

   font-style: normal;
  font-weight: 300;
  font-size: 55px;
  line-height: 100%;

  letter-spacing: -0.01em;

  color: #333333;
}


/*==============================================================
# See More Button
==============================================================*/

.latest-posts .see-more,
.featured-categories .see-more {

    min-width: 82px;

    min-height: 32px;

    justify-content: center;

    padding: 7px 20px;

    border: 1px solid #555;

    border-radius: 50px;

    color: #3d3d3d;


    font-size: 12px;

    font-weight: 400;

}


.latest-posts .see-more:hover {

    background: #333;

    border-color: #333;

    color: #fff;

    opacity: 1;

}


/*==============================================================
# Trending Posts Grid
==============================================================*/

.latest-posts-grid {

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 38px 12px !important;

    align-items: stretch;

}


/*==============================================================
# Trending Blog Card
==============================================================*/

.latest-posts-grid .blog-card {

    display: flex;

    flex: initial !important;

    flex-direction: column;

    max-width: none !important;

    min-width: 0;

    padding: 0 !important;

    overflow: visible;

    background: transparent !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    opacity: 1;

    transform: none;

}


.latest-posts-grid .blog-card:hover {

    box-shadow: none !important;

    transform: none;

}


/*==============================================================
# Trending Image
==============================================================*/

.latest-posts-grid .blog-card__image {

    display: block;

    width: 100%;

    /* aspect-ratio: 389 / 240 !important; */
   aspect-ratio: 27 / 16 !important;  
    overflow: hidden;

    border: 1px solid rgba(50, 50, 50, .35) !important;

    border-radius: 2px !important;

    background: #ddd;

}


.latest-posts-grid .blog-card__image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;

}


.latest-posts-grid .blog-card:hover .blog-card__image img {

    transform: scale(1.03);

}


/*==============================================================
# Trending Card Content
==============================================================*/

.latest-posts-grid .blog-card__content {

    display: flex;

    flex: 1;

    flex-direction: column;

    padding: 9px 6px 0 !important;

}


/* Hide category because it is not visible in Figma */

.latest-posts-grid .blog-card__category {

    display: none !important;

}


/*==============================================================
# Trending Title
==============================================================*/

.latest-posts-grid .blog-card__title {

    margin: 0 0 10px !important;

    color: #383838;


    font-size: 24px !important;

    font-weight: 400 !important;

    line-height: 1.05 !important;

}


.latest-posts-grid .blog-card__title a {

    color: inherit;

}


.latest-posts-grid .blog-card__title a:hover {

    color: #a65d64;

}


/*==============================================================
# Hide Excerpt
==============================================================*/

.latest-posts-grid .blog-card__excerpt {

    display: none !important;

}


/*==============================================================
# Post Meta & Card Arrow (Mobile vs Desktop Rules)
==============================================================*/

/* Mobile (screen <= 767px): Read time on left, SVG arrow on far right, space-between */
@media screen and (max-width: 767px) {
    .blog-card__meta,
    .latest-posts-grid .blog-card__meta {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        border-top: 1px solid rgba(50, 50, 50, .18) !important;
        padding-top: 10px !important;
        margin-top: auto !important;
        color: #333333 !important;
    }

    .blog-card__date,
    .blog-card__meta-separator,
    .latest-posts-grid .blog-card__meta span:nth-child(1),
    .latest-posts-grid .blog-card__meta span:nth-child(2) {
        display: none !important;
    }

    .blog-card__read-time {
        font-size: 12px !important;
        color: #333333 !important;
        font-weight: 400 !important;
    }

    .blog-card__arrow,
    .blog-card__meta .blog-card__arrow,
    span.blog-card__arrow {
        display: inline-flex !important;
        align-items: center !important;
        margin-left: auto !important;
        color: #333333 !important;
    }

    .blog-card__link,
    .latest-posts-grid .blog-card__link {
        display: none !important;
    }
}

/* Desktop (screen >= 768px): Read time on left, SVG arrow on far right on same line */
@media screen and (min-width: 768px) {
    .blog-card__meta,
    .latest-posts-grid .blog-card__meta {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        margin-top: auto !important;
        padding-top: 10px !important;
        border-top: 1px solid rgba(50, 50, 50, .18) !important;
        color: #333333 !important;
        font-size: 14px;
        line-height: 1.2;
    }

    .blog-card__date,
    .blog-card__meta-separator,
    .latest-posts-grid .blog-card__meta span:nth-child(1),
    .latest-posts-grid .blog-card__meta span:nth-child(2) {
        display: none !important;
    }

    .blog-card__arrow,
    .blog-card__meta .blog-card__arrow,
    span.blog-card__arrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        color: #333333 !important;
    }

    .blog-card__link,
    .latest-posts-grid .blog-card__link {
        display: none !important;
    }
}


/*==============================================================
# AJAX Show More Area
==============================================================*/

.trending-posts__load-more {

    display: flex;

    justify-content: center;

    width: 100%;

    padding: 36px 0 0;

}


.trending-posts__button {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 140px;

    min-height: 42px;

    padding: 10px 28px;

    border: 1px solid #444;

    border-radius: 50px;

    background: transparent;

    color: #363636;

    cursor: pointer;


    font-size: 13px;

    font-weight: 500;

    line-height: 1;

    transition:

        background .25s ease,

        color .25s ease,

        border-color .25s ease;

}


.trending-posts__button:hover {

    background: #333;

    border-color: #333;

    color: #fff;

}


.trending-posts__button:disabled {

    cursor: wait;

}


/*==============================================================
# AJAX Loader
==============================================================*/

.trending-posts__loader {

    display: none;

    width: 16px;

    height: 16px;

    margin-left: 10px;

    border: 2px solid currentColor;

    border-right-color: transparent;

    border-radius: 50%;

    animation:

        trending-posts-spin .7s linear infinite;

}


.trending-posts__button.is-loading .trending-posts__loader {

    display: block;

}


.trending-posts__button.is-loading .trending-posts__button-text {

    opacity: .65;

}


@keyframes trending-posts-spin {

    to {

        transform: rotate(360deg);

    }

}


/*==============================================================
# AJAX Newly Loaded Cards
==============================================================*/

.latest-posts-grid .blog-card {

    animation:

        trending-post-card-in .45s ease both;

}


@keyframes trending-post-card-in {

    from {

        opacity: 0;

        transform: translateY(16px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/*==============================================================
# Responsive
==============================================================*/

@media (max-width:1024px) {

    .latest-posts-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 30px 18px !important;

    }

}

/* Responsiveness to keep reference layout proportions */
@media (max-width: 1024px) {
    .latest-posts-grid .blog-card {
        flex: 0 0 calc((100% - 24px)/2) !important;
        max-width: unset
    }
}



/* ==========================================================
   MOBILE CONTAINER WRAPPER PADDING & HERO IMAGE (screen ≤ 767px)
   ========================================================== */
@media screen and (max-width: 767px) {
    .container,
    .blog-landing-page .container,
    .hero-slider-section .container,
    .featured-categories .container,
    .latest-posts .container {
        padding: 0px 15px !important;
        margin-top: 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .hero-slider {
        padding-bottom: 0 !important;
    }

    /* Mobile Hero Slide Wrapper - Stacked 1 Column */
    .hero-slide__wrapper {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        background: transparent !important;
    }

    .hero-slide__image {
        order: 1 !important;
        width: 100% !important;
        height: auto !important;
    }

    .hero-slide__content {
        order: 2 !important;
        width: 100% !important;
        padding: 24px 0 !important;
        text-align: left !important;
        align-items: flex-start !important;
    }

     .hero-description{

        font-size:13px;
        font-weight:500;

        line-height:1.7;

    }
    

    .hero-slide__image img {
        width: 100% !important;
        height: 334px !important;
        object-fit: cover !important;
        transform: rotate(0deg) !important;
        opacity: 1 !important;
    }

    .hero-slider .slick-dots {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100px !important;
        height: 3px !important;
        margin: 20px auto 0 !important;
        background: #f0e4e7 !important;
        border-radius: 2px !important;
        overflow: hidden !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .hero-slider .slick-dots li {
        flex: 1 !important;
        height: 3px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-slider .slick-dots li button {
        width: 100% !important;
        height: 3px !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .hero-slider .slick-dots li.slick-active button {
        background: #994F67 !important;
    }
    .featured-categories {
    padding: 30px 0;
  }

  .featured-categories .container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 0 !important;
  }

  .featured-categories .featured-categories__heading,
  .featured-categories .section-heading {
    height: auto;
    margin-bottom: 16px;
    padding-right: 16px;
  }

  .featured-categories .section-subtitle {
    background: transparent !important;
    color: #994F67 !important;
    padding: 0 !important;
    margin-bottom: 2px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
  }

  .featured-categories .featured-categories__title,
  .featured-categories .section-heading h2 {
    width: auto;
    height: auto;
    margin-top: 0;
    font-size: 26px !important;
    font-weight: 500 !important;
    color: #222222 !important;
    line-height: 1.15 !important;
    margin-bottom: 0 !important;
  }

  .featured-categories .category-slider .slick-list,
  .featured-categories .category-slider .slick-track,
  .featured-categories .category-slider .slick-slide,
  .featured-categories .category-slider .slick-slide > div {
    height: auto !important;
  }

  .featured-categories .category-slider .slick-slide {
    margin-right: 12px !important;
    margin-left: 0 !important;
  }

  .featured-categories .category-card {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 175px !important;
    height: auto !important;
    padding: 0 !important;
    gap: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .featured-categories .category-card__image {
    flex-basis: auto !important;
    width: 100% !important;
    height: 165px !important;
    aspect-ratio: 1.105 / 1 !important;
    overflow: hidden !important;
    position: relative !important;
    background: #f4f4f4 !important;
  }

  .featured-categories .category-card__image img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1.105 / 1 !important;
    object-fit: cover !important;
    display: block !important;
  }

  .featured-categories .category-card__image::after {
    display: none !important;
  }

  .featured-categories .category-card__content {
    flex-basis: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }

  .featured-categories .category-card__content h3 {
    width: auto;
    height: auto;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #222222 !important;
    text-align: left !important;
    margin: 4px 0 0 0 !important;
    line-height: 1.3 !important;
  }

  .featured-categories .slick-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100px !important;
    height: 3px !important;
    margin: 20px auto 0 !important;
    background: #f0e4e7 !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .featured-categories .slick-dots li {
    flex: 1 !important;
    height: 3px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .featured-categories .slick-dots li button,
  .featured-categories .slick-dots li button:hover,
  .featured-categories .slick-dots li button:focus,
  .featured-categories .slick-dots li button:focus-visible,
  .featured-categories .slick-dots li button:active {
    width: 100% !important;
    height: 3px !important;
    padding: 0 !important;
    border: none !important;
    border: 0 !important;
    outline: none !important;
    outline-style: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .featured-categories .slick-dots li.slick-active button {
    background: #994F67 !important;
  }

  .latest-posts .section-heading h2 {
    max-width: 100%;
    margin: 0;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #333333;
  }

  /* Latest Posts / Trending - 1 card per row for Mobile */
  .latest-posts-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    display: grid !important;
  }

  .latest-posts-grid .blog-card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }

  .latest-posts-grid .blog-card__image {
    width: 100% !important;
    height: auto !important;
        aspect-ratio: 2.13 / 1 !important;
    /* aspect-ratio: 16 / 10 !important; */
    overflow: hidden !important;
    display: block !important;
  }

  .latest-posts-grid .blog-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .latest-posts-grid .blog-card__content {
    padding: 14px 0 0 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .latest-posts-grid .blog-card__category,
  .latest-posts-grid .blog-card__excerpt,
  .latest-posts-grid .blog-card__link {
    display: none !important;
  }

  .latest-posts-grid .blog-card__title {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #333333 !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
  }

  .latest-posts-grid .blog-card__meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding-top: 10px !important;
    border-top: 1px solid #e9e9e9 !important;
    font-size: 13px !important;
    color: #666666 !important;
  }

  .latest-posts-grid .blog-card__date,
  .latest-posts-grid .blog-card__meta-separator {
    display: none !important;
  }

  .latest-posts-grid .blog-card__read-time {
    font-size: 13px !important;
    color: #666666 !important;
    font-weight: 400 !important;
  }

  .latest-posts-grid .blog-card__arrow {
    display: inline-flex !important;
    align-items: center !important;
    color: #666666 !important;
  }

  /* Latest Posts See More Button at End of Cards for Mobile */
  .latest-posts .see-more--desktop {
    display: none !important;
  }

  .latest-posts__see-more-wrapper {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 24px !important;
    padding-top: 8px !important;
  }

  .latest-posts__see-more-wrapper .see-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 120px !important;
    height: 38px !important;
    padding: 8px 24px !important;
    border: 1px solid #444 !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #333 !important;
    text-decoration: none !important;
  }
}

/* Default Desktop rule for latest posts see-more wrapper */
.latest-posts__see-more-wrapper {
  display: none;
}