:root {
  /**
  @font family declaration
  */
  --zo-ff-body: 'General Sans', sans-serif;
  --zo-ff-heading: 'General Sans', sans-serif;
  --zo-ff-menu: 'General Sans', sans-serif;
  --zo-ff-button: 'General Sans', sans-serif;
  /**
  @color declaration
  */
  --zo-common-white: #ffffff;
  --zo-common-black: #000000;
  --zo-common-border: #C4C4D0;
  --zo-common-grey: #474747;
  --zo-heading-primary: #000000;
  --zo-grey-1: #6E6E73;
  --zo-grey-2: #575757;
  --zo-text-body: #42414A;
  --zo-theme-primary: #000000;
  --zo-theme-secondary: #161617;
  --zo-border-1: #3A393A;
  --zo-border-2: #5B5A66;
  --zo-bg-1: #FFFBEF;
  --zo-bg-page: #F9FEFF;
  /**
  @font weight declaration
  */
  --zo-fw-normal: normal;
  --zo-fw-regular: 400;
  --zo-fw-medium: 500;
  --zo-fw-sbold: 600;
  --zo-fw-bold: 700;
  --zo-fw-heading: 500;
  --zo-fw-ebold: 800;
  --zo-fw-black: 900;
  /**
  @font size declaration
  */
  --zo-fz-body: 16px;
  --zo-fz-body-2: 14px;
  --zo-fz-h1: 96px;
  --zo-fz-h2: 48px;
  --zo-fz-h3: 40px;
  --zo-fz-h4: 32px;
  --zo-fz-h5: 24px;
  --zo-fz-h6: 20px;
  --zo-fz-button: 14px;
  --zo-fz-mob-h1: 40px;
  --zo-fz-mob-h2: 24px;
  --zo-fz-mob-h3: 20px;
  --zo-fz-mob-h4: 16px;
  --zo-fz-mob-h5: 16px;
  --zo-fz-mob-h6: 14px;
  --zo-fz-tab-h1: 60px;
  --zo-fz-tab-h2: 34px;
  --zo-fz-tab-h3: 24px;
  --zo-fz-tab-h4: 16px;
  --zo-fz-tab-h5: 16px;
  --zo-fz-tab-h6: 16px;
  /**
  @line height declaration
  */
  --zo-lh-body: 1.5em;
  --zo-lh-h1: 1.2;
  --zo-lh-h2: 1.2;
  --zo-lh-h3: 1.2;
  --zo-lh-h4: 1.3;
  --zo-lh-h5: 1.4;
  --zo-lh-h6: 1.4;
  --zo-lh-btn: 1.5em;
}

.pb-32 {
  padding-bottom: 32px;
}

.pt-64 {
  padding-top: 64px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-80 {
  padding-top: 80px;
}

.pb-80 {
  padding-bottom: 80px;
}

.ptb-80 {
  padding: 80px 0;
}

.ptb-160 {
  padding: 160px 0;
}

.pb-160 {
  padding-bottom: 160px;
}

.pt-160 {
  padding-top: 160px;
}

.pt-180 {
  padding-top: 180px;
}

.mt-160 {
  margin-top: 160px;
}

.ptb-120 {
  padding: 120px 0;
}

.pb-120 {
  padding-bottom: 120px;
}

.pt-120 {
  padding-top: 120px;
}

.mt-120 {
  margin-top: 120px;
}

.row-gap {
  row-gap: 64px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .row-gap {
    row-gap: 24px;
  }
}

.row-gap2 {
  row-gap: 24px;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .ptb-80 {
    padding: 50px 0;
  }
  .pt-80 {
    padding-top: 50px;
  }
  .pb-80 {
    padding-bottom: 50px;
  }
  .pb-160 {
    padding-bottom: 50px;
  }
  .pt-160 {
    padding-top: 80px;
  }
  .mt-120 {
    margin-top: 64px;
  }
  .mtb-80 {
    margin: 50px 0;
  }
  .pb-120 {
    padding-bottom: 64px;
  }
  .pt-120 {
    padding-top: 64px;
  }
  .pb-48 {
    padding-bottom: 32px !important;
  }
  .pb-40 {
    padding-bottom: 32px !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .ptb-80 {
    padding: 60px 0;
  }
  .pt-80 {
    padding-top: 80px;
  }
  .pb-80 {
    padding-bottom: 80px;
  }
  .mtb-80 {
    margin: 80px 0;
  }
}
.pt-48 {
  padding-top: 48px;
}

.pb-48 {
  padding-bottom: 48px;
}

.mt-48 {
  margin-top: 48px;
}

.mb-48 {
  margin-bottom: 48px;
}

.pt-40 {
  padding-top: 40px;
}

.pb-40 {
  padding-bottom: 40px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .pt-50 {
    padding-top: 30px;
  }
  .pb-50 {
    padding-bottom: 30px;
  }
  .mt-50 {
    margin-top: 30px;
  }
  .mb-50 {
    margin-bottom: 30px;
  }
}
.mt-40 {
  margin-top: 40px;
}

.mt-36 {
  margin-top: 36px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mb-28 {
  margin-bottom: 28px;
}

.mt-24 {
  margin-top: 24px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mt-18 {
  margin-top: 18px;
}

.mb-18 {
  margin-bottom: 18px;
}

.mt-16 {
  margin-top: 16px;
}

.mb-16 {
  margin-bottom: 16px;
}

.p-24 {
  padding: 24px;
}

.ptb-24 {
  padding: 24px 0;
}

.plr-24 {
  padding: 0 24px;
}

.p-18 {
  padding: 18px;
}

.ptb-18 {
  padding: 18px 0;
}

.plr-18 {
  padding: 0 18px;
}

.p-16 {
  padding: 16px;
}

.mt-60 {
  margin-top: 60px;
}

/* Animation Keyframes */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
  }
}
@keyframes floatLeftRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-20px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(5px);
  }
  90% {
    transform: translateY(-3px);
  }
}
@keyframes pop-rotate {
  0% {
    transform: scale(0.9) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.15) rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
@keyframes morph {
  0% {
    transform: scale(1) skew(0deg, 0deg);
  }
  50% {
    transform: scale(1.1) skew(3deg, 3deg);
  }
  100% {
    transform: scale(1) skew(0deg, 0deg);
  }
}
:root {
  /**
  @font family declaration
  */
  --zo-ff-body: 'General Sans', sans-serif;
  --zo-ff-heading: 'General Sans', sans-serif;
  --zo-ff-menu: 'General Sans', sans-serif;
  --zo-ff-button: 'General Sans', sans-serif;
  /**
  @color declaration
  */
  --zo-common-white: #ffffff;
  --zo-common-black: #000000;
  --zo-common-border: #C4C4D0;
  --zo-common-grey: #474747;
  --zo-heading-primary: #000000;
  --zo-grey-1: #6E6E73;
  --zo-grey-2: #575757;
  --zo-text-body: #42414A;
  --zo-theme-primary: #000000;
  --zo-theme-secondary: #161617;
  --zo-border-1: #3A393A;
  --zo-border-2: #5B5A66;
  --zo-bg-1: #FFFBEF;
  --zo-bg-page: #F9FEFF;
  /**
  @font weight declaration
  */
  --zo-fw-normal: normal;
  --zo-fw-regular: 400;
  --zo-fw-medium: 500;
  --zo-fw-sbold: 600;
  --zo-fw-bold: 700;
  --zo-fw-heading: 500;
  --zo-fw-ebold: 800;
  --zo-fw-black: 900;
  /**
  @font size declaration
  */
  --zo-fz-body: 16px;
  --zo-fz-body-2: 14px;
  --zo-fz-h1: 96px;
  --zo-fz-h2: 48px;
  --zo-fz-h3: 40px;
  --zo-fz-h4: 32px;
  --zo-fz-h5: 24px;
  --zo-fz-h6: 20px;
  --zo-fz-button: 14px;
  --zo-fz-mob-h1: 40px;
  --zo-fz-mob-h2: 24px;
  --zo-fz-mob-h3: 20px;
  --zo-fz-mob-h4: 16px;
  --zo-fz-mob-h5: 16px;
  --zo-fz-mob-h6: 14px;
  --zo-fz-tab-h1: 60px;
  --zo-fz-tab-h2: 34px;
  --zo-fz-tab-h3: 24px;
  --zo-fz-tab-h4: 16px;
  --zo-fz-tab-h5: 16px;
  --zo-fz-tab-h6: 16px;
  /**
  @line height declaration
  */
  --zo-lh-body: 1.5em;
  --zo-lh-h1: 1.2;
  --zo-lh-h2: 1.2;
  --zo-lh-h3: 1.2;
  --zo-lh-h4: 1.3;
  --zo-lh-h5: 1.4;
  --zo-lh-h6: 1.4;
  --zo-lh-btn: 1.5em;
}

.pb-32 {
  padding-bottom: 32px;
}

.pt-64 {
  padding-top: 64px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-80 {
  padding-top: 80px;
}

.pb-80 {
  padding-bottom: 80px;
}

.ptb-80 {
  padding: 80px 0;
}

.ptb-160 {
  padding: 160px 0;
}

.pb-160 {
  padding-bottom: 160px;
}

.pt-160 {
  padding-top: 160px;
}

.pt-180 {
  padding-top: 180px;
}

.mt-160 {
  margin-top: 160px;
}

.ptb-120 {
  padding: 120px 0;
}

.pb-120 {
  padding-bottom: 120px;
}

.pt-120 {
  padding-top: 120px;
}

.mt-120 {
  margin-top: 120px;
}

.row-gap {
  row-gap: 64px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .row-gap {
    row-gap: 24px;
  }
}

.row-gap2 {
  row-gap: 24px;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .ptb-80 {
    padding: 50px 0;
  }
  .pt-80 {
    padding-top: 50px;
  }
  .pb-80 {
    padding-bottom: 50px;
  }
  .pb-160 {
    padding-bottom: 50px;
  }
  .pt-160 {
    padding-top: 80px;
  }
  .mt-120 {
    margin-top: 64px;
  }
  .mtb-80 {
    margin: 50px 0;
  }
  .pb-120 {
    padding-bottom: 64px;
  }
  .pt-120 {
    padding-top: 64px;
  }
  .pb-48 {
    padding-bottom: 32px !important;
  }
  .pb-40 {
    padding-bottom: 32px !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .ptb-80 {
    padding: 60px 0;
  }
  .pt-80 {
    padding-top: 80px;
  }
  .pb-80 {
    padding-bottom: 80px;
  }
  .mtb-80 {
    margin: 80px 0;
  }
}
.pt-48 {
  padding-top: 48px;
}

.pb-48 {
  padding-bottom: 48px;
}

.mt-48 {
  margin-top: 48px;
}

.mb-48 {
  margin-bottom: 48px;
}

.pt-40 {
  padding-top: 40px;
}

.pb-40 {
  padding-bottom: 40px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .pt-50 {
    padding-top: 30px;
  }
  .pb-50 {
    padding-bottom: 30px;
  }
  .mt-50 {
    margin-top: 30px;
  }
  .mb-50 {
    margin-bottom: 30px;
  }
}
.mt-40 {
  margin-top: 40px;
}

.mt-36 {
  margin-top: 36px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mb-28 {
  margin-bottom: 28px;
}

.mt-24 {
  margin-top: 24px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mt-18 {
  margin-top: 18px;
}

.mb-18 {
  margin-bottom: 18px;
}

.mt-16 {
  margin-top: 16px;
}

.mb-16 {
  margin-bottom: 16px;
}

.p-24 {
  padding: 24px;
}

.ptb-24 {
  padding: 24px 0;
}

.plr-24 {
  padding: 0 24px;
}

.p-18 {
  padding: 18px;
}

.ptb-18 {
  padding: 18px 0;
}

.plr-18 {
  padding: 0 18px;
}

.p-16 {
  padding: 16px;
}

.mt-60 {
  margin-top: 60px;
}

/* Animation Keyframes */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
  }
}
@keyframes floatLeftRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-20px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(5px);
  }
  90% {
    transform: translateY(-3px);
  }
}
@keyframes pop-rotate {
  0% {
    transform: scale(0.9) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.15) rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
@keyframes morph {
  0% {
    transform: scale(1) skew(0deg, 0deg);
  }
  50% {
    transform: scale(1.1) skew(3deg, 3deg);
  }
  100% {
    transform: scale(1) skew(0deg, 0deg);
  }
}
/************ TABLE OF CONTENTS ***************

    01. GLOBAL BASE STYLES

**********************************************/
/*----------------------------------------*/
/*  01. GLOBAL BASE STYLES START
/*----------------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--zo-ff-body);
  font-size: var(--zo-fz-body);
  font-weight: var(--zo-fw-regular);
  color: var(--zo-text-body);
  line-height: var(--zo-lh-body);
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: var(--zo-heading-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--zo-ff-heading);
  color: var(--zo-heading-primary);
  margin: 0;
  font-weight: var(--zo-fw-sbold);
  line-height: 1.2;
  transition: all 0.3s ease-out 0s;
}

h1 {
  font-size: var(--zo-fz-h1);
  line-height: var(--zo-lh-h1);
  font-weight: var(--zo-fw-heading);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  h1 {
    font-size: var(--zo-fz-tab-h1);
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  h1 {
    font-size: var(--zo-fz-mob-h1);
  }
}

h2 {
  font-size: var(--zo-fz-h2);
  line-height: var(--zo-lh-h2);
  font-weight: var(--zo-fw-heading);
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  h2 {
    font-size: var(--zo-fz-tab-h2);
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  h2 {
    font-size: var(--zo-fz-mob-h2);
  }
}

h3 {
  font-size: var(--zo-fz-h3);
  line-height: var(--zo-lh-h3);
  font-weight: var(--zo-fw-heading);
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  h3 {
    font-size: var(--zo-fz-mob-h3);
  }
}

h4 {
  font-size: var(--zo-fz-h4);
  font-weight: var(--zo-fw-sbold);
  line-height: var(--zo-lh-h4);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  h4 {
    font-size: var(--zo-fz-tab-h4);
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  h4 {
    font-size: var(--zo-fz-mob-h4);
  }
}

h5 {
  font-size: var(--zo-fz-h5);
  font-weight: var(--zo-fw-heading);
  line-height: var(--zo-lh-h5);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  h5 {
    font-size: var(--zo-fz-tab-h5);
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  h5 {
    font-size: var(--zo-fz-mob-h5);
  }
}

h6 {
  font-size: var(--zo-fz-h6);
  font-weight: var(--zo-fw-heading);
  line-height: var(--zo-lh-h6);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  h6 {
    font-size: var(--zo-fz-tab-h5);
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  h6 {
    font-size: var(--zo-fz-mob-h5);
  }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  h4,
  h5,
  h6 {
    font-size: 18px !important;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  h4,
  h5,
  h6 {
    font-size: 16px !important;
  }
}

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

p {
  font-family: var(--zo-ff-body);
  font-size: var(--zo-fz-body);
  font-weight: var(--zo-fw-normal);
  color: var(--zo-common-black);
  line-height: 1.5em;
  margin: 0;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

figure {
  margin: 0;
  padding: 0;
}

/************ TABLE OF CONTENTS ***************

    01. BUTTONS
    02. PAGE COMPONENTS

**********************************************/
/*----------------------------------------*/
/*  01. BUTTONS START
/*----------------------------------------*/
.primary-btn {
  position: relative;
  display: inline-block;
  padding: 16.5px 71.5px;
  font-size: 14px;
  font-weight: var(--zo-fw-medium);
  border-radius: 6px;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease, border 0.4s ease;
  background: var(--zo-common-black);
  color: var(--zo-common-white);
  border: none;
}
.primary-btn:hover {
  color: var(--zo-common-white);
  opacity: 0.8;
}

.ilyn-shop-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  width: 46px;
  transition: all 0.35s ease;
  white-space: nowrap;
}
.ilyn-shop-btn:hover {
  width: 130px;
}
.ilyn-shop-btn::before {
  content: "Shop Now";
  position: absolute;
  left: 14px;
  opacity: 0;
  transform: translateX(-15px);
  transition: all 0.35s ease;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
}
.ilyn-shop-btn:hover::before {
  opacity: 1;
  transform: translateX(0);
}
.ilyn-shop-btn i {
  transition: all 0.35s ease;
  margin-left: 0;
}
.ilyn-shop-btn:hover i {
  margin-left: 65px;
}

.btn-medium {
  padding: 15px 28.5px;
}

.explore-all {
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
  text-decoration: underline;
  font-size: var(--zo-fz-body);
  font-weight: var(--zo-fw-medium);
  color: #121212;
}
.explore-all i {
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.3s ease;
}
.explore-all:hover {
  text-decoration: none;
  gap: 6px;
  padding: 8px 14px;
}
.explore-all:hover i {
  opacity: 1;
  transform: translateX(0);
}

/*----------------------------------------*/
/*  02. PAGE COMPONENTS START
/*----------------------------------------*/
.single-post .illiyeen-breadcrumb {
  padding-top: 170px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .single-post .illiyeen-breadcrumb {
    padding-top: 115px;
  }
}

/************ TABLE OF CONTENTS ***************

    01. HEADER MAIN & MENU
    02. MEGA MENU
    03. SEARCH OVERLAY
    04. OFFCANVAS MENU
    05. DESKTOP & MOBILE MENU

**********************************************/
/*----------------------------------------*/
/*  01. HEADER MAIN & MENU START
/*----------------------------------------*/
.header-main-area nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  row-gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .header-main-area nav ul {
    gap: 16px;
  }
}
.header-main-area nav ul li {
  list-style: none;
  display: inline-block;
  position: relative;
  transition: all 0.3s ease-out 0s;
}
.header-main-area nav ul li:hover .submenu {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
}
.header-main-area nav ul li:hover .mega-menu {
  transform: scaleY(1);
  visibility: visible;
  opacity: 1;
  top: 100px;
  width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-main-area nav ul li.p-lg-inherit {
    position: inherit;
  }
}
.header-main-area nav ul li .submenu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 218px;
  background: var(--zo-common-white);
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  transform-origin: top center;
  padding: 22px 0 12px;
  transform: scaleY(0);
  box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1);
  transition: all 0.3s ease-out 0s;
  border-radius: 8px;
}
.header-main-area nav ul li .submenu li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  transform: translateY(-10px);
}
.header-main-area nav ul li .submenu li:hover > a {
  color: var(--zo-home-secondary);
  padding-left: 43px;
}
.header-main-area nav ul li .submenu li:hover > a::before {
  width: 12px;
  background: var(--zo-heading-primary);
}
.header-main-area nav ul li .submenu li:hover > .submenu {
  transform: translateY(1);
  visibility: visible;
  opacity: 1;
}
.header-main-area nav ul li .submenu li a {
  position: relative;
  z-index: 11;
  color: var(--zo-common-black);
  padding: 6px 28px;
  width: 100%;
  text-transform: capitalize;
  transition: all 0.3s ease-out 0s;
}
.header-main-area nav ul li .submenu li a::before {
  position: absolute;
  content: "";
  left: 25px;
  top: 50%;
  width: 0;
  height: 1px;
  background-color: var(--zo-heading-primary);
  transition: all 0.3s ease-out 0s;
  transform: translateY(-50%);
}
.header-main-area nav ul li > a {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: var(--zo-fw-regular);
  color: var(--zo-heading-primary);
  font-family: var(--zo-ff-menu);
  line-height: 24px;
  white-space: nowrap;
  transition: all 0.3s ease-out 0s;
}
.header-main-area nav ul li > a span {
  position: relative;
  transition: all 0.4s ease-out 0s;
}
.header-main-area nav ul li > a span::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 1px;
  content: "";
  background-color: var(--zo-theme-primary);
  transition: all 0.4s ease-out 0s;
}
.header-main-area nav ul li > a:hover {
  color: var(--zo-theme-primary);
}
.header-main-area nav ul li > a:hover span::after {
  width: 100%;
  right: auto;
  left: 0;
}
.header-main-area nav ul li > a i {
  margin-left: 4px;
  transition: 0.3s;
  font-size: 24px;
  font-weight: 400;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .header-main-area nav ul li > a i {
    margin-left: 0;
  }
}
@media (max-width: 991px) {
  .header-main-area nav {
    display: none;
  }
}

/*----------------------------------------*/
/*  02. MEGA MENU START
/*----------------------------------------*/
.mega-menu {
  position: relative;
}
.mega-menu:hover > .mega-submenu {
  opacity: 1;
  visibility: visible;
  top: 45px;
  transform: translateY(0);
}
.mega-menu .mega-submenu {
  position: absolute;
  top: 45px;
  left: 0;
  background: var(--zo-common-white);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  padding: 20px;
  display: flex;
  gap: 20px;
  flex-direction: row;
  border-radius: 6px;
  padding: 34px !important;
}
.mega-menu .mega-submenu li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 200px;
  max-height: 200px;
  color: var(--zo-heading-primary);
  text-decoration: none;
  transition: all 0.3s ease-out 0s;
}
.mega-menu .mega-submenu li a .menu-thumbnail {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 6px;
}
.mega-menu .mega-submenu li a .menu-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.3s ease-out 0s;
}
.mega-menu .mega-submenu li a:hover .menu-thumbnail img {
  transform: scale(1.05);
}
.mega-menu .mega-submenu li a:hover .menu-title {
  color: var(--zo-theme-primary);
}

/*----------------------------------------*/
/*  03. SEARCH OVERLAY START
/*----------------------------------------*/
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.search-overlay .search-form-box {
  position: relative;
  background: var(--zo-common-white);
  padding: 30px;
  border-radius: 8px;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.search-overlay .search-form-box .close-search {
  position: absolute;
  top: 3px;
  right: 7px;
  font-size: 28px;
  background: transparent;
  border: none;
  color: var(--zo-theme-primary);
  cursor: pointer;
}
.search-overlay .search-form-box form {
  display: flex;
  gap: 10px;
}
@media (max-width: 374px) {
  .search-overlay .search-form-box form {
    flex-direction: column;
  }
}
.search-overlay .search-form-box form input {
  flex: 1;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid var(--zo-border-1);
  border-radius: 6px;
}
.search-overlay .search-form-box form input:focus {
  border-color: var(--zo-theme-primary);
  outline: none;
}
.search-overlay .search-form-box form button[type=submit] {
  padding: 12px 20px;
  border-radius: 6px;
}

/*----------------------------------------*/
/*  04. OFFCANVAS MENU START
/*----------------------------------------*/
.offcanvas-menu ul {
  list-style: none;
}
.offcanvas-menu ul li {
  position: relative !important;
}
.offcanvas-menu ul li:not(:last-child) > a {
  border-bottom: 1px solid rgba(1, 15, 28, 0.1);
}
.offcanvas-menu ul li a {
  padding: 8px 0;
  display: block;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--zo-ff-menu);
}
.offcanvas-menu ul li a:hover {
  color: var(--zo-theme-primary);
}
.offcanvas-menu ul li.active > a {
  color: var(--zo-theme-primary);
}
.offcanvas-menu ul li.active > .menu-close {
  color: var(--zo-common-white);
  background: var(--zo-theme-primary);
  border-color: var(--zo-theme-primary);
}
.offcanvas-menu ul li .submenu {
  display: none;
  padding-left: 20px;
}
.offcanvas-menu ul li .mega-menu {
  display: none;
  padding-left: 0;
  margin-top: -1px;
}
.offcanvas-menu ul li .megamenu-list ul li a {
  border-bottom: 1px solid rgba(1, 15, 28, 0.1);
}
.offcanvas-menu .homemenu-title {
  margin-bottom: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .offcanvas-menu ul li a i {
    display: none;
  }
}

/*----------------------------------------*/
/*  05. DESKTOP & MOBILE MENU START
/*----------------------------------------*/
.mobile-menu {
  display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .mobile-menu {
    display: block;
  }
}

.desktop-menu {
  display: block;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .desktop-menu {
    display: none;
  }
}

.ri-menu-fill {
  font-size: 24px;
}

/************ TABLE OF CONTENTS ***************

    01. MARQUEE STYLES
    02. RESPONSIVE STYLES
    03. KEYFRAME ANIMATIONS

**********************************************/
/*----------------------------------------*/
/*  01. MARQUEE STYLES START
/*----------------------------------------*/
.marquee {
  background: var(--zo-common-black);
  position: absolute;
  margin-top: 160px;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 0;
}
.marquee .category {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  clear: both;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  line-height: 0;
}
.marquee .category a {
  color: #FFF;
  text-decoration: none;
}

.marquee .scroll {
  width: 100%;
  display: flex;
  padding: 12px 0 8px 0;
}

.marquee .scroll div {
  color: #fff;
  font-size: 14px;
  background: var(--zo-common-black);
  white-space: nowrap;
  font-weight: 500;
  animation: animate-marquee 80s linear infinite;
  animation-delay: -40s;
  padding-top: 5px;
}

.marquee .scroll div:nth-child(2) {
  animation: animate-marquee-2 80s linear infinite;
  animation-delay: -80s;
}

.marquee .scroll div .category {
  padding: 10px;
}

/*----------------------------------------*/
/*  02. RESPONSIVE STYLES START
/*----------------------------------------*/
@media (max-width: 767px) {
  .marquee .scroll div {
    font-size: 25px;
  }
}
/*----------------------------------------*/
/*  03. KEYFRAME ANIMATIONS START
/*----------------------------------------*/
@keyframes animate-marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-marquee-2 {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-200%);
  }
}
/************ TABLE OF CONTENTS ***************

    01. FOOTER

**********************************************/
/*----------------------------------------*/
/*  01. FOOTER START
/*----------------------------------------*/
.site-footer {
  background: var(--zo-common-white);
  padding: 20px 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.site-footer a {
  font-size: 16px;
}
.site-footer a span {
  text-decoration: underline;
}
.site-footer .footer-logo img {
  max-width: 100px;
  height: auto;
}
.site-footer .footer-heading {
  font-size: 14px;
  text-transform: uppercase;
  color: var(--zo-common-grey);
}
.site-footer .menu-list a {
  text-decoration: underline;
  color: var(--zo-common-grey);
}
.site-footer .footer-text h6 {
  color: var(--zo-common-grey);
  font-size: 16px;
}
.site-footer .quick-links ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .site-footer .center-mobile {
    text-align: center;
  }
}
.site-footer .contact-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .site-footer .contact-info {
    align-items: center;
  }
}
.site-footer .contact-info li {
  display: flex;
  align-items: center;
  gap: 2px;
}
.site-footer .form-area {
  float: none;
  padding: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .site-footer .form-area {
    width: 70%;
    margin: 0 auto;
  }
}
.site-footer .footer-text h6 {
  margin-top: 18px;
}
.site-footer .newsletter-form button {
  background: #000000;
  border: 1px solid #fff;
}
.site-footer .social-icons {
  display: flex;
  gap: 15px;
  padding-top: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .site-footer .social-icons {
    justify-content: center;
  }
}
.site-footer h5 {
  margin-bottom: 15px;
}
.site-footer i {
  color: var(--zo-common-black);
  opacity: 0.8;
  font-size: 20px;
}
.site-footer ul li {
  opacity: 0.8;
}
.site-footer ul li:hover {
  opacity: 1;
}
.site-footer ul li a {
  color: var(--zo-common-black);
}
@media only screen and (min-width: 992px) and (max-width: 1290px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .site-footer ul li a {
    word-break: break-all;
  }
}
.site-footer ul li a span {
  text-decoration: underline;
}

/************ TABLE OF CONTENTS ***************

    01. GLOBAL LAYOUT & UTILITIES
    02. COOKIE CONSENT STYLES
    03. ARCHIVE IMAGE
    04. BOOKMARK ICON
    05. IMAGE HOVER EFFECT
    06. BASE STYLES
    07. SORTING OPTIONS
    08. SUBSCRIBE FORM
    09. EMPTY STATE / ERROR PAGES
    10. BLOG EDITOR DEFAULTS
    11. SWIPER PAGINATION & NAVIGATION
    12. OFFCANVAS MENU
    13. FORM ELEMENTS
    14. ARCHIVE PAGE STYLES
    15. SELECT2 STYLES
    16. FOOTER STYLES
    17. HOME PAGE SECTIONS
    18. ANIMATIONS
    19. SCROLL PROGRESS BAR
    20. POPULAR POSTS PAGE

**********************************************/
/*----------------------------------------*/
/*  01. GLOBAL LAYOUT & UTILITIES START
/*----------------------------------------*/
.container {
  max-width: 1336px;
}

.full-card-click {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

/*----------------------------------------*/
/*  02. COOKIE CONSENT STYLES START
/*----------------------------------------*/
.cky-prefrence-btn-wrapper button,
.cky-notice-btn-wrapper button {
  color: #fff !important;
  border-color: #343a40 !important;
  background-color: #343a40 !important;
}

.cky-btn-revisit-wrapper,
.cky-switch input[type=checkbox]:checked {
  background-color: #000000 !important;
}

.cky-show-desc-btn {
  color: #2271b1 !important;
  font-weight: 600;
}

.wdt-dark .cky-preference-center,
.wdt-dark .cky-consent-bar {
  background-color: var(--wdt-card-bg) !important;
  border-color: #565353 !important;
}
.wdt-dark .cky-accordion-btn {
  color: var(--wdt-common-white) !important;
}
.wdt-dark .cky-btn {
  border-color: rgba(75, 81, 87, 0.24) !important;
  background-color: rgba(145, 158, 171, 0.24) !important;
}

/*----------------------------------------*/
/*  03. ARCHIVE IMAGE START
/*----------------------------------------*/
.archive-img-desktop {
  display: block;
}

.archive-img-mobile {
  display: none;
}

@media (max-width: 576px) {
  .archive-img-desktop {
    display: none;
  }
  .archive-img-mobile {
    display: block;
  }
}
/*----------------------------------------*/
/*  04. BOOKMARK ICON START
/*----------------------------------------*/
.bookmark-icon-wrapper .bookmark-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  color: white !important;
  z-index: 999;
}
.bookmark-icon-wrapper .bookmark-icon .srp-bookmark-btn {
  display: flex;
  align-items: center;
}
.bookmark-icon-wrapper .bookmark-icon .srp-bookmark-btn,
.bookmark-icon-wrapper .bookmark-icon .bookmarked {
  padding: 6px;
  background: #fff;
  border-radius: 100px;
  width: 26px;
  height: 26px;
}
.bookmark-icon-wrapper .bookmark-icon .srp-bookmark-btn i,
.bookmark-icon-wrapper .bookmark-icon .bookmarked i {
  font-size: 14px;
}
.bookmark-icon-wrapper .bookmark-icon a span {
  display: none;
}
.bookmark-icon-wrapper .bookmark-icon-right-short .srp-bookmark-btn,
.bookmark-icon-wrapper .bookmark-icon-right-short .bookmarked {
  padding: 6px;
  background: #fff;
  border-radius: 100px;
  width: 26px;
  height: 26px;
}
.bookmark-icon-wrapper .bookmark-icon-right-short .srp-bookmark-btn i,
.bookmark-icon-wrapper .bookmark-icon-right-short .bookmarked i {
  font-size: 14px;
}
.bookmark-icon-wrapper .bookmark-icon-top {
  top: 8px;
  right: 8px;
}

/*----------------------------------------*/
/*  05. IMAGE HOVER EFFECT START
/*----------------------------------------*/
.single-item-hover {
  transition: all 0.3s ease-out 0s;
}
.single-item-hover .single-image-hover {
  position: relative;
  overflow: hidden;
}
.single-item-hover .single-image-hover img {
  transform: scale(1);
  transition: 0.5s ease-in-out;
}
.single-item-hover .single-featured-image-hover img {
  transform: scale(1);
  transition: 0.5s ease-in-out;
}
.single-item-hover:hover img {
  transform: scale(1.2);
}

.card-date-hover a {
  position: relative;
  text-decoration: none;
  color: var(--zo-common-white);
  font-size: 14px;
}
.card-date-hover a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #c3c4c7;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out;
}
.card-date-hover a:hover::after {
  transform: scaleX(1);
}

/*----------------------------------------*/
/*  06. BASE STYLES START
/*----------------------------------------*/
main,
section {
  background: #f5f5f7;
}

h3 a:hover {
  color: #5b5a66;
}

/*----------------------------------------*/
/*  07. SORTING OPTIONS START
/*----------------------------------------*/
.sorting-options form select {
  outline: none;
  padding: 0 16px;
  min-width: 174px;
  height: 36px;
  border: 1px solid rgba(110, 110, 115, 0.2);
  border-radius: 8px;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99846 14.9203C9.80375 14.9207 9.61505 14.8529 9.46513 14.7287L4.46513 10.562C4.11074 10.2674 4.06224 9.74138 4.35679 9.387C4.65134 9.03262 5.17741 8.98411 5.53179 9.27867L9.99846 13.012L14.4651 9.412C14.6373 9.27219 14.8581 9.20678 15.0786 9.23024C15.2991 9.2537 15.5012 9.3641 15.6401 9.537C15.7944 9.71022 15.8695 9.9399 15.8474 10.1708C15.8252 10.4017 15.7078 10.6129 15.5235 10.7537L10.5235 14.7787C10.3692 14.8833 10.1844 14.9331 9.99846 14.9203Z" fill="%23121212"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/*----------------------------------------*/
/*  08. SUBSCRIBE FORM START
/*----------------------------------------*/
.form-area {
  float: right;
  padding: 73px 160px 103px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .form-area {
    padding: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .form-area {
    float: none;
    text-align: center;
  }
}
@media (max-width: 450px) {
  .form-area {
    padding: 50px;
  }
}
.form-area p {
  margin: 24px 0;
  color: var(--zo-common-white);
  opacity: 0.6;
  max-width: 473px;
}
.form-area form {
  position: relative;
}
.form-area form input {
  color: var(--zo-common-black);
  background: transparent;
  border-radius: 12px;
  border: 2px solid #121212;
  padding: 23px 33px;
  width: 100%;
  outline: none;
}
.form-area form input[type=submit] {
  position: absolute;
  right: 7px;
  top: 7px;
  background: #121212;
  border: none;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  max-width: 175px;
  height: 59px;
  line-height: 10px;
}
@media (max-width: 450px) {
  .form-area form input[type=submit] {
    max-width: 130px;
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .form-area form input[type=submit] {
    right: 8px;
  }
}

.widget-subscribe .form-area form input {
  padding: 12px;
}
.widget-subscribe .form-area form input[type=submit] {
  height: 42px;
  top: 5px;
  right: 5px;
  font-size: 14px;
  max-width: 117px;
}

/*----------------------------------------*/
/*  09. EMPTY STATE / ERROR PAGES START
/*----------------------------------------*/
.no-posts-found ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.no-posts-found form input,
.error-404 form input {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  outline: none;
}

/*----------------------------------------*/
/*  10. BLOG EDITOR DEFAULTS START
/*----------------------------------------*/
.illiyeen-blog-details .details-left-area .wp-block-heading {
  margin-bottom: 16px;
  font-weight: 700;
  opacity: 0.6;
}
.illiyeen-blog-details .details-left-area .wp-block-columns {
  margin-bottom: 40px;
}
@media only screen and (min-width: 576px) and (max-width: 781px), (max-width: 576px) {
  .illiyeen-blog-details .details-left-area .wp-block-columns {
    flex-direction: column;
    flex-wrap: nowrap !important;
  }
}
.illiyeen-blog-details .details-left-area .wp-block-columns:last-of-type {
  margin-bottom: 0px;
}
.illiyeen-blog-details .details-left-area .wp-block-columns .wp-block-column .wp-block-image {
  padding: 0;
}
@media only screen and (min-width: 576px) and (max-width: 781px), (max-width: 576px), (max-width: 450px) {
  .illiyeen-blog-details .details-left-area .wp-block-columns .wp-block-column .wp-block-image img {
    display: flex;
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 781px), (max-width: 576px), (max-width: 450px) {
  .illiyeen-blog-details .details-left-area .wp-block-group {
    flex-direction: column-reverse;
  }
}
@media only screen and (min-width: 576px) and (max-width: 781px), (max-width: 576px), (max-width: 450px) {
  .illiyeen-blog-details .details-left-area .wp-block-group .wp-block-image {
    text-align: center;
  }
}
@media only screen and (min-width: 576px) and (max-width: 781px), (max-width: 576px), (max-width: 450px) {
  .illiyeen-blog-details .details-left-area .wp-block-group .wp-block-image img {
    max-width: 250px;
  }
}
.illiyeen-blog-details .wp-block-table {
  margin: 10px 0 40px 0;
}

@media (max-width: 791px) {
  .illiyeen-blog-details .wp-block-columns:has(.wp-block-column:last-child img) {
    flex-direction: column-reverse;
    flex-wrap: nowrap !important;
  }
}
/*----------------------------------------*/
/*  11. SWIPER PAGINATION & NAVIGATION START
/*----------------------------------------*/
.swiper-pagination {
  display: flex;
  justify-content: center;
  position: relative;
  margin: 48px auto 0 auto;
  max-width: 203px;
  border-radius: 100px !important;
  height: 5px !important;
}
.swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: transparent;
  border: 2px solid #121212;
}

.swiper-pagination-progressbar {
  background: transparent !important;
  border: 1px solid rgba(18, 18, 18, 0.6) !important;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--zo-common-black) !important;
}

.wdt-dark .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--zo-common-white) !important;
}

.wdt-dark .swiper-pagination-progressbar {
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.swiper-pagination-bullet-active {
  background: var(--zo-common-black) !important;
}

.swiper-button-prev {
  left: 3px;
}

.swiper-button-next {
  right: 3px;
  top: 130px;
}

.swiper-button-prev,
.swiper-button-next {
  top: 130px;
  background: rgba(0, 0, 0, 0.5);
  border: 1.2px solid rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(4.8px);
          backdrop-filter: blur(4.8px);
  border-radius: 100px;
  width: 48px;
  height: 48px;
}
@media (max-width: 576px), (max-width: 450px) {
  .swiper-button-prev,
  .swiper-button-next {
    top: 90px;
  }
}
@media (max-width: 374px) {
  .swiper-button-prev,
  .swiper-button-next {
    top: 70px;
  }
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.illiyeen-blog-details .bicbCarousel .swiper-button-prev,
.illiyeen-blog-details .bicbCarousel .swiper-button-next {
  top: 50%;
}
/*----------------------------------------*/
/*  12. OFFCANVAS MENU START
/*----------------------------------------*/
.offcanvas-area .offcanvas-main {
  margin-top: 15px;
}
.offcanvas-area .offcanvas-main ul li {
  margin-bottom: 25px;
}
.offcanvas-area .offcanvas-main ul li a {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.offcanvas-area .offcanvas-social {
  position: absolute;
  bottom: 0;
}
.offcanvas-area .offcanvas-logo img {
  max-width: 92px;
  width: 100%;
  height: auto;
  max-height: 32px;
}
.offcanvas-area .offcanvas-shop .offcanvas-shop-btn {
  padding: 11px 21px;
}
.offcanvas-area .offcanvas-shop i {
  margin-left: 6px;
  font-size: 16px;
}

/*----------------------------------------*/
/*  13. FORM ELEMENTS START
/*----------------------------------------*/
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

/*----------------------------------------*/
/*  14. ARCHIVE PAGE STYLES START
/*----------------------------------------*/
.archive-list-layout .single-item {
  display: flex;
  background: #FFFFFF;
  box-shadow: 0px 4px 8px rgba(213, 213, 213, 0.06);
  border-radius: 12px;
  max-height: 210px;
  overflow-y: hidden;
}
@media (max-width: 374px) {
  .archive-list-layout .single-item {
    max-height: 277px !important;
  }
}
@media (max-width: 576px) {
  .archive-list-layout .single-item {
    max-height: 228px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .archive-list-layout .single-item {
    max-height: 100% !important;
  }
}
.archive-list-layout .single-item p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-height: 3.5em;
  color: var(--zo-grey-1);
  margin: 6px 0 12px 0;
}
.archive-list-layout .single-item .single-image {
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 12px;
}
.archive-list-layout .single-item img {
  max-width: 420px;
}
@media (max-width: 576px) {
  .archive-list-layout .single-item img {
    max-width: 220px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 900px) {
  .archive-list-layout .single-item img {
    max-width: 285px;
  }
}
.archive-list-layout .single-item .single-content {
  padding: 8px 16px !important;
  width: 100%;
}
@media (max-width: 576px) {
  .archive-list-layout .single-item .top-meta {
    flex-direction: column;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .archive-list-layout .single-item .top-meta {
    flex-direction: column;
  }
}
@media (max-width: 374px) {
  .archive-list-layout .single-item .bottom-content {
    flex-direction: column;
  }
}

.archive-page {
  padding-top: 60px !important;
}

.category-title {
  font-weight: 400;
  text-transform: uppercase;
}
@media (max-width: 415px) {
  .category-title {
    font-size: 14px;
  }
}

/*----------------------------------------*/
/*  15. SELECT2 STYLES START
/*----------------------------------------*/
.sorting-options label {
  position: absolute;
  z-index: 9999;
  margin-left: 10px;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 500;
  color: #1D1D1F;
}

.select2-container {
  width: 200px !important;
  height: 36px;
  font-size: 16px;
  font-weight: 500;
  color: #6E6E73;
}
@media (max-width: 450px) {
  .select2-container {
    width: 160px !important;
  }
}

.select2-container--default .select2-selection--single {
  background-color: transparent !important;
  border: 1px solid rgba(110, 110, 115, 0.2) !important;
  border-radius: 8px !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center;
  height: 36px !important;
}

.select2-selection__rendered {
  color: #6E6E73 !important;
  padding-left: 0px !important;
  margin-top: -2.5px;
  position: absolute;
  left: 72px;
}

.select2-container--default .select2-selection__arrow {
  width: 20px;
  height: 20px;
  top: 15px !important;
  right: 8px !important;
  transform: translateY(-50%);
  position: absolute;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M9.99846 14.9203C9.80375 14.9207 9.61505 14.8529 9.46513 14.7287L4.46513 10.562C4.11074 10.2674 4.06224 9.74138 4.35679 9.387C4.65134 9.03262 5.17741 8.98411 5.53179 9.27867L9.99846 13.012L14.4651 9.412C14.6373 9.27219 14.8581 9.20678 15.0786 9.23024C15.2991 9.2537 15.5012 9.3641 15.6401 9.537C15.7944 9.71022 15.8695 9.9399 15.8474 10.1708C15.8252 10.4017 15.7078 10.6129 15.5235 10.7537L10.5235 14.7787C10.3692 14.8833 10.1844 14.9331 9.99846 14.9203Z' fill='%23121212'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.select2-selection__arrow b {
  display: none;
}

.select2-container--default .select2-dropdown {
  background-image: url("https://ilyn-blog.bysl.live/wp-content/themes/ilyn-blog/assets/img/select-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px !important;
  border: 1px solid #ddd !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-top: 38px;
  position: relative;
}

.select2-results__option {
  padding: 10px 15px !important;
  color: #333 !important;
  transition: background 0.2s;
  border-bottom: 1px solid #c0bec0;
}
.select2-results__option:last-child {
  border-bottom: none;
}
.select2-results__option:hover {
  background: #f5f5f5 !important;
}
.select2-results__option.select2-results__option--highlighted {
  background: transparent !important;
  color: #000 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  outline: none !important;
}

.select2-option-radio {
  display: flex;
  align-items: center;
}

.select2-option-radio input[type=radio] {
  margin-right: 10px;
  font-size: 20px;
  width: 18px;
  height: 18px;
  accent-color: #000;
}

.select2-container--default .select2-results__option[aria-selected=true] input[type=radio] {
  checked: true;
}

.select2-search__field {
  display: none !important;
}

.wdt-dark .select2-option-radio input[type=radio] {
  accent-color: #fff;
}

/*----------------------------------------*/
/*  16. FOOTER STYLES START
/*----------------------------------------*/
footer .select2-selection {
  position: relative;
}
footer .select2-selection__rendered {
  left: 10px;
}
footer .select2-container--default .select2-dropdown,
footer .select2-container--default .select2-selection--single {
  border-radius: 4px !important;
}

/*----------------------------------------*/
/*  17. HOME PAGE SECTIONS START
/*----------------------------------------*/
.home .subscribe-home {
  margin-top: 120px;
}

/*----------------------------------------*/
/*  18. ANIMATIONS START
/*----------------------------------------*/
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/*----------------------------------------*/
/*  19. SCROLL PROGRESS BAR START
/*----------------------------------------*/
#scroll-progress-bar {
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 0%;
  height: 4px;
  background: linear-gradient(90deg, #C3886C -0.01%, #C3886C 99.99%);
  z-index: 9999;
  transition: width 0.1s ease-out;
}
@media (max-width: 768px) {
  #scroll-progress-bar {
    height: 3px;
  }
}

/*----------------------------------------*/
/*  20. POPULAR POSTS PAGE START
/*----------------------------------------*/
.popular-posts-page {
  padding-top: 160px;
}

/************ TABLE OF CONTENTS ***************

    01. GLOBAL UTILITIES START
    02. HEADER TOP START
    03. MAIN HEADER START
    04. STICKY HEADER START
    05. HEADER SEARCH START
    06. SEARCH RESULTS & TRENDING START
    07. CATEGORIES DROPDOWN START
    08. ANIMATIONS START

**********************************************/
/*----------------------------------------*/
/*  01. GLOBAL UTILITIES START
/*----------------------------------------*/
.highlight-search {
  background: yellow;
  font-weight: 400;
  color: var(--zo-theme-primary);
}
.wdt-dark .highlight-search {
  color: var(--wdt-common-white) !important;
  background-color: #737303;
}

.show-all-wrapper .btn-primary {
  background: #000;
  border: none;
  margin-top: 14px;
}

.clear-search {
  background: none;
  border: none;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  margin-left: 8px;
  transition: color 0.2s ease;
}
.clear-search:hover {
  color: #000;
}

.view-more-btn {
  text-decoration: underline;
}

/*----------------------------------------*/
/*  02. HEADER TOP START
/*----------------------------------------*/
.header-top .header-top-wrapper .top-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 13px;
}
.header-top .header-top-wrapper .top-content .mail-text {
  font-size: 14px;
  font-weight: 500;
  color: #1D1D1F;
  display: flex;
  align-items: center;
}
.header-top .header-top-wrapper .top-content a {
  display: flex;
  align-items: center;
}
.header-top .header-top-wrapper .top-content a i {
  font-size: 16px;
}
.header-top .header-top-wrapper .primary-btn {
  padding: 10px 32px;
}
@media (max-width: 374px) {
  .header-top .header-top-wrapper .primary-btn {
    padding: 5px 10px;
  }
}
.header-top .header-top-wrapper i {
  margin-left: 4px;
}
.header-top .header-top-wrapper .ri-mail-line {
  margin-left: 0;
  margin-right: 4px;
  font-size: 18px;
}

/*----------------------------------------*/
/*  03. MAIN HEADER START
/*----------------------------------------*/
.main-menu-wrapper {
  padding-top: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .main-menu-wrapper {
    padding-top: 10px;
  }
}

.header-main-area {
  padding: 20px 0;
  position: absolute;
  width: 100%;
  z-index: 999999;
  transition: all 0.3s ease;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .header-main-area {
    padding: 16px 0;
  }
}
.header-main-area .logo-area img {
  max-width: 138px;
  width: 100%;
  height: auto;
  max-height: 48px;
}
@media (max-width: 374px) {
  .header-main-area .logo-area img {
    max-width: 110px;
  }
}
.header-main-area .sticky-logo {
  display: none;
}
.header-main-area .right-action-wrapper {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .header-main-area .right-action-wrapper {
    gap: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1224px) {
  .header-main-area .right-action-wrapper {
    gap: 20px;
  }
}
@media (max-width: 450px) {
  .header-main-area .right-action-wrapper {
    justify-content: center;
  }
}
.header-main-area .right-action-wrapper .header-search {
  display: inline;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .header-main-area .right-action-wrapper .header-search {
    padding-right: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1224px) {
  .header-main-area .right-action-wrapper .header-search {
    padding-right: 20px;
  }
}
.header-main-area .right-action-wrapper .header-search a {
  transition: all 0.3s ease-out 0s;
}
.header-main-area .right-action-wrapper .header-search a i {
  font-size: 24px;
  color: var(--zo-common-black);
}
.header-main-area .right-action-wrapper .header-search a:hover {
  color: var(--zo-theme-primary);
}
.header-main-area .right-action-wrapper .header-offcanvas-menu {
  display: inline;
}
.header-main-area .right-action-wrapper .header-offcanvas-menu a {
  transition: all 0.3s ease-out 0s;
}
.header-main-area .right-action-wrapper .header-offcanvas-menu a i {
  font-size: 24px;
}
.header-main-area .right-action-wrapper .header-offcanvas-menu a:hover {
  color: var(--zo-theme-primary);
}
@media (min-width: 992px) {
  .header-main-area .right-action-wrapper .header-offcanvas-menu {
    display: none;
  }
}
.header-main-area .right-action-wrapper .header-btn {
  display: inline;
}
@media (max-width: 767px) {
  .header-main-area .right-action-wrapper .header-btn {
    display: none;
  }
}
.header-main-area .right-action-wrapper .header-btn i {
  font-size: 16px;
  margin-left: 10px;
}
.header-main-area .right-action-wrapper .header-btn .primary-btn {
  padding: 13px 28px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .header-main-area .right-action-wrapper .header-btn .primary-btn {
    font-size: 14px;
    padding: 10px;
  }
}
@media (min-width: 1200px) and (max-width: 1224px) {
  .header-main-area .right-action-wrapper .header-btn .primary-btn {
    font-size: 14px;
  }
}

.main-menu-area {
  align-items: center;
}

/*----------------------------------------*/
/*  04. STICKY HEADER START
/*----------------------------------------*/
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.3) !important;
  -webkit-backdrop-filter: blur(25.95px);
          backdrop-filter: blur(25.95px);
  border-radius: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 96%;
  max-width: 1656px;
  padding: 10px 16px 17px 16px;
  animation: slideDown 0.3s ease forwards;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .sticky-header {
    width: 99%;
  }
}
.sticky-header.desktop-menu .logo-area {
  display: none;
}
.sticky-header.desktop-menu .sticky-logo {
  display: block;
}
.sticky-header.desktop-menu .sticky-logo img {
  margin-top: 19px;
}
.sticky-header.mobile-menu .logo-area {
  display: none;
}
.sticky-header.mobile-menu .sticky-logo {
  display: block;
}
.sticky-header.mobile-menu .sticky-logo img {
  margin-top: 6px;
}
.sticky-header .all-categories-dropdown {
  margin-top: 16px;
}
.sticky-header .right-action-wrapper {
  margin-top: 9px;
}
.sticky-header .categories-dropdown-wrapper {
  position: fixed;
  top: 160px;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
}
.sticky-header .header-offcanvas-menu {
  margin-top: 12px;
}

/*----------------------------------------*/
/*  05. HEADER SEARCH START
/*----------------------------------------*/
.header-search-bar {
  width: 100%;
  height: auto;
  min-height: 1004px;
  padding: 20px 15px 34px 15px;
  z-index: 99999;
  position: absolute;
  top: 0;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(20px);
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .header-search-bar {
    padding: 20px 0 0;
  }
}
.header-search-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #383838, #383838), rgba(199, 199, 199, 0.82);
  background-blend-mode: color-dodge, normal;
  filter: blur(88.4px);
  z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .header-search-bar {
    background-position: left !important;
    min-height: auto !important;
    padding-bottom: 60px;
  }
}
.header-search-bar .container {
  padding-top: 130px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .header-search-bar .container {
    padding-top: 80px;
  }
}
.header-search-bar ::-moz-placeholder {
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0.02em;
  color: #6E6E73;
}
.header-search-bar ::placeholder {
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0.02em;
  color: #6E6E73;
}
.header-search-bar form i {
  font-size: 20px;
  color: #6E6E73;
  opacity: 0.6;
  margin-top: 5px;
  margin-left: 10px;
}
.header-search-bar input[type=search]::-moz-search-clear {
  display: none;
}
.header-search-bar .single-image img {
  -o-object-fit: cover !important;
     object-fit: cover !important;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .header-search-bar .search-overlay-articles .single-item .single-image {
    border-top-left-radius: 12px;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 0 !important;
  }
}
@media (min-width: 1054px) {
  .header-search-bar .search-overlay-articles .single-item .single-content {
    min-height: 228px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .header-search-bar .search-overlay-articles .single-item .single-content {
    border-top-left-radius: 0;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 12px;
  }
}
.header-search-bar.no-blur::after {
  display: none;
}
.header-search-bar .search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  border-bottom: 1px solid #A5A5A5;
  justify-content: space-between;
}
.header-search-bar .search-field {
  flex: 1;
  padding: 12px 0px;
  border: none;
  outline: none;
  background: transparent;
  margin-top: 5px;
  font-size: 20px;
}
.header-search-bar .primary-btn {
  padding: 10px 20px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.header-search-bar .primary-btn i {
  margin-left: 8px;
}
.header-search-bar .close-search {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #999;
}
.single-post .header-search-bar, .archive .header-search-bar, .search .header-search-bar, .search-results .header-search-bar, .page-template-best-year-post .header-search-bar {
  background: rgba(98, 89, 89, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .single-post .header-search-bar, .archive .header-search-bar, .search .header-search-bar, .search-results .header-search-bar, .page-template-best-year-post .header-search-bar {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}
.wdt-dark .header-search-bar {
  background: rgba(15, 15, 15, 0.35);
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
}
.wdt-dark .header-search-bar::before {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
}
.home .header-search-bar::before {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .logged-in .header-search-bar .container {
    padding-top: 120px;
  }
}

/*----------------------------------------*/
/*  06. SEARCH RESULTS & TRENDING START
/*----------------------------------------*/
.trending-searches {
  margin-top: 40px;
  text-align: left;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .trending-searches {
    margin-top: 20px;
  }
}
.trending-searches span {
  font-size: 16px;
  font-weight: 500;
  margin-right: 32px;
  white-space: nowrap;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .trending-searches span {
    margin-right: 8px;
  }
}
.trending-searches ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  row-gap: 8px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .trending-searches ul {
    row-gap: 6px;
  }
}
.trending-searches li {
  margin-top: 2px;
  margin-right: 40px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .trending-searches li {
    margin-right: 14px;
  }
}
.trending-searches li i {
  margin-right: 4px;
  color: #6E6E73;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .trending-searches li i {
    margin-right: 0;
  }
}
.trending-searches li a {
  color: #1D1D1F;
  font-size: 16px;
  text-decoration: none;
}
.trending-searches li a:hover {
  text-decoration: underline;
}

@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .search-overlay-articles {
    padding-top: 34px;
  }
}
.search-overlay-articles .title-area h4 {
  color: #1D1D1F;
  font-weight: 500;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .search-overlay-articles .title-area h4 {
    font-size: 24px !important;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .search-overlay-articles .title-area {
    padding-bottom: 20px;
  }
}

.search-no-results h4 {
  color: #1D1D1F;
  letter-spacing: 0.02em;
}
.search-no-results .trending-searches {
  padding: 0 0 50px 0;
}

/*----------------------------------------*/
/*  07. CATEGORIES DROPDOWN START
/*----------------------------------------*/
.all-categories-dropdown {
  position: relative;
}
.all-categories-dropdown .categories-toggle {
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: #1D1D1F;
  margin-left: 28px;
}
.all-categories-dropdown .categories-toggle i {
  position: absolute;
  left: -3px;
  font-size: 24px;
}

.categories-dropdown-wrapper {
  border-top: 1px solid #E5E5E5;
  position: absolute;
  top: 144px;
  left: 0;
  width: 100vw;
  background: #fff;
  display: none;
  opacity: 0;
  visibility: hidden;
  height: auto;
  min-height: 920px;
  z-index: 999999;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(20px);
}
.categories-dropdown-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #383838, #383838), rgba(199, 199, 199, 0.82);
  background-blend-mode: color-dodge, normal;
  filter: blur(88.4px);
  z-index: -1;
}
.categories-dropdown-wrapper .cat-dropdown-left {
  background: rgba(247, 247, 247, 0.5);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  padding: 30px 26px;
  min-height: 920px;
}
.categories-dropdown-wrapper .cat-dropdown-left li {
  line-height: 54px;
}
.categories-dropdown-wrapper .cat-dropdown-left a {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  position: relative;
}
.categories-dropdown-wrapper .cat-dropdown-left a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out;
}
.categories-dropdown-wrapper .cat-dropdown-left a:hover {
  opacity: 0.8;
}
.categories-dropdown-wrapper .cat-dropdown-left a:hover::after {
  transform: scaleX(1);
}
.categories-dropdown-wrapper .reader-favorites-wrapper {
  padding: 40px 20px;
}
.categories-dropdown-wrapper .reader-favorites-wrapper .top {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(29, 29, 31, 0.16);
  padding-bottom: 12px;
}
.categories-dropdown-wrapper .reader-favorites-wrapper img {
  min-height: auto !important;
}
.categories-dropdown-wrapper .reader-favorites-wrapper .single-content .top-meta span,
.categories-dropdown-wrapper .reader-favorites-wrapper .single-content .top-meta i,
.categories-dropdown-wrapper .reader-favorites-wrapper .single-content .bottom-content span,
.categories-dropdown-wrapper .reader-favorites-wrapper .single-content .bottom-content i {
  font-size: 14px;
}
.home .categories-dropdown-wrapper::before {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
}
.wdt-dark .categories-dropdown-wrapper {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(15, 15, 15, 0.35) !important;
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
}
.wdt-dark .categories-dropdown-wrapper::before {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
}

/*----------------------------------------*/
/*  08. ANIMATIONS START
/*----------------------------------------*/
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
/************ TABLE OF CONTENTS ***************

    01. CATEGORY BREADCRUMB
    02. GENERAL BREADCRUMB

**********************************************/
/*----------------------------------------*/
/*  01. CATEGORY BREADCRUMB START
/*----------------------------------------*/
.illiyeen-category-breadcrumb {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 520px;
  height: auto;
  position: relative;
  z-index: 1;
}
.illiyeen-category-breadcrumb .container-fluid {
  z-index: 2;
  position: relative;
}
.illiyeen-category-breadcrumb ul {
  padding-top: 12px;
  text-align: center;
}
.illiyeen-category-breadcrumb ul li {
  display: inline;
  font-size: 16px;
  color: var(--zo-common-white);
}
.illiyeen-category-breadcrumb ul li a {
  color: var(--zo-common-white);
  opacity: 0.6;
}
.illiyeen-category-breadcrumb .title {
  text-align: center;
  padding-top: 265px;
}
.illiyeen-category-breadcrumb .title h2 {
  color: var(--zo-common-white);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/*----------------------------------------*/
/*  02. GENERAL BREADCRUMB START
/*----------------------------------------*/
.illiyeen-breadcrumb {
  padding: 12px 0;
}
.illiyeen-breadcrumb ul li {
  display: inline;
  font-size: var(--zo-fz-body-2);
  color: var(--zo-common-black);
}
.illiyeen-breadcrumb ul li a {
  color: var(--zo-common-black);
  opacity: 0.6;
}

/************ TABLE OF CONTENTS ***************

    01. WIDGET CONTAINER
    02. LATEST POSTS WIDGET
    03. POPULAR POSTS WIDGET
    04. BLOG DETAILS
    05. CATEGORIES WIDGET
    06. TAGS WIDGET
    07. SUBSCRIBE WIDGET

**********************************************/
/*----------------------------------------*/
/*  01. WIDGET CONTAINER START
/*----------------------------------------*/
.widget-container {
  margin-bottom: 58px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .widget-container {
    margin-bottom: 16px;
  }
}
.widget-container .widget-title {
  text-transform: uppercase;
  text-align: left;
  font-weight: var(--zo-fw-regular);
  letter-spacing: 0.2em;
  position: relative;
  margin-bottom: 24px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .widget-container .widget-title {
    margin-bottom: 36px;
  }
}
.widget-container .widget-title::after {
  content: "";
  background: #A5A5A5;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 26px;
  margin-top: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .widget-container .widget-title::after {
    right: 47%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .widget-container .widget-title::after {
    right: 46%;
  }
}

/*----------------------------------------*/
/*  02. LATEST POSTS WIDGET START
/*----------------------------------------*/
.latest-post-wrapper .latest-post {
  overflow: hidden;
  position: relative;
}
.latest-post-wrapper .latest-post .latest-post-image {
  border-radius: 12px;
  max-height: 164px;
  margin-bottom: 16px;
}
.latest-post-wrapper .latest-post .latest-post-image img {
  max-height: 164px;
  -o-object-fit: fill;
     object-fit: fill;
  margin-bottom: 16px;
  width: 100%;
  display: block;
  transition: 0.5s ease-in-out;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .latest-post-wrapper .latest-post .latest-post-image img {
    max-height: 300px;
  }
}
.latest-post-wrapper .post-date a {
  color: rgba(57, 62, 80, 0.4);
  font-size: var(--zo-fz-body-2);
}
.latest-post-wrapper .post-date i {
  margin-right: 4px;
  color: rgba(57, 62, 80, 0.4);
  font-size: var(--zo-fz-body-2);
}
.latest-post-wrapper h6 a {
  color: #393E50;
  font-size: var(--zo-fz-h6);
  font-weight: var(--zo-fw-regular);
}

/*----------------------------------------*/
/*  03. POPULAR POSTS WIDGET START
/*----------------------------------------*/
.popular-post-wrapper .widget_popular_posts ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  max-height: 330px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 9px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .popular-post-wrapper .widget_popular_posts ul {
    gap: 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .popular-post-wrapper .widget_popular_posts ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
}
.popular-post-wrapper .widget_popular_posts ul li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 4px 8px rgba(213, 213, 213, 0.06);
  border-radius: 12px;
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease, -webkit-backdrop-filter 0.4s ease;
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease, backdrop-filter 0.4s ease;
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease;
}
.popular-post-wrapper .widget_popular_posts ul li:hover {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0px 8px 20px rgba(157, 149, 149, 0.25);
  transform: translateY(-3px);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .popular-post-wrapper .widget_popular_posts ul li {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
.popular-post-wrapper .widget_popular_posts ul li.blur {
  filter: blur(2px);
  opacity: 0.6;
  transition: all 0.3s ease;
}
.popular-post-wrapper .widget_popular_posts .blog-image {
  max-width: 80px;
  max-height: 80px;
  width: 100%;
  height: 100%;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  overflow: hidden;
  margin: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .popular-post-wrapper .widget_popular_posts .blog-image {
    min-width: 100%;
    max-height: 200px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}
.popular-post-wrapper .widget_popular_posts .blog-image a {
  display: block;
  width: 100%;
}
.popular-post-wrapper .widget_popular_posts .blog-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 1;
}
.popular-post-wrapper .widget_popular_posts .blog-content {
  width: calc(100% - 82px);
  display: flex;
  flex-direction: column;
  padding: 5px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .popular-post-wrapper .widget_popular_posts .blog-content {
    gap: 0;
    padding: 0 15px 15px 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .popular-post-wrapper .widget_popular_posts .blog-content {
    width: 100%;
  }
}
.popular-post-wrapper .widget_popular_posts .blog-content h6 {
  font-size: var(--zo-fz-body-2);
  font-weight: var(--zo-fw-regular);
  line-height: 24px;
  color: #393E50;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-height: 3.5em;
}
.popular-post-wrapper .widget_popular_posts .blog-content .publish-date {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  color: rgba(57, 62, 80, 0.4);
  font-size: var(--zo-fz-body-2);
  font-weight: var(--zo-fw-regular);
}
.popular-post-wrapper .widget_popular_posts .blog-content .publish-date i {
  margin-right: 4px;
}
.popular-post-wrapper .post-date a,
.popular-post-wrapper .post-date i {
  color: rgba(57, 62, 80, 0.4);
  font-size: var(--zo-fz-body-2);
}

/*----------------------------------------*/
/*  04. BLOG DETAILS START
/*----------------------------------------*/
.illiyeen-blog-details .top-area .post-date a,
.illiyeen-blog-details .top-area .post-date i {
  color: #6E6E73;
  font-size: 14px;
}

/*----------------------------------------*/
/*  05. CATEGORIES WIDGET START
/*----------------------------------------*/
.categories-wrapper .widget-content {
  height: 100%;
  max-height: 495px;
  overflow-y: auto;
  scrollbar-width: thin;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .categories-wrapper .widget-content {
    height: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .categories-wrapper .all-categories {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
}
.categories-wrapper .all-categories .categories {
  position: relative;
  text-align: center;
  margin-bottom: 24px;
  max-height: 120px;
  transition: all 0.3s ease;
}
.categories-wrapper .all-categories .categories:last-child {
  margin-bottom: 0;
}
.categories-wrapper .all-categories .categories img {
  border-radius: 12px;
  max-height: 120px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .categories-wrapper .all-categories .categories img {
    min-height: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .categories-wrapper .all-categories .categories img {
    max-width: 250px;
    width: 100%;
  }
}
.categories-wrapper .all-categories .categories::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33));
  z-index: 1;
  transition: background 0.3s ease;
}
.categories-wrapper .all-categories .categories .category-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 90%;
  text-align: center;
  padding: 22px 10px;
  border-radius: 12px;
  z-index: 2;
  transition: border 0.3s ease;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .categories-wrapper .all-categories .categories .category-name h5 {
    font-size: 20px;
    padding: 0 4px;
  }
}
.categories-wrapper .all-categories .categories .category-name h5 a {
  color: var(--zo-common-white);
}
.categories-wrapper .all-categories .categories:hover::before {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.categories-wrapper .all-categories .categories:hover .category-name {
  border: 1px solid #fff;
}
.categories-wrapper .all-categories .categories.blur {
  filter: blur(2px);
  opacity: 0.6;
  transition: all 0.3s ease;
}

/*----------------------------------------*/
/*  06. TAGS WIDGET START
/*----------------------------------------*/
.tags-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.tags-wrapper ul li {
  display: inline;
  border: 1px solid rgba(165, 165, 165, 0.4);
  padding: 1px 7px 3px 7px;
  border-radius: 4px;
}
.tags-wrapper ul li:hover {
  background: var(--zo-common-white);
  border: 1px solid var(--zo-common-white);
}
.tags-wrapper ul li a {
  font-size: 13px;
  font-weight: 500;
  color: #6E6E73;
}

/*----------------------------------------*/
/*  07. SUBSCRIBE WIDGET START
/*----------------------------------------*/
.widget-subscribe {
  padding-top: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .widget-subscribe {
    margin-bottom: 0;
  }
}
.widget-subscribe .container {
  padding: 0;
}
.widget-subscribe .subscribe-wrapper {
  border-radius: 10px;
  min-height: auto;
  position: relative;
  z-index: 1;
}
.widget-subscribe .subscribe-illiyeen {
  padding-top: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .widget-subscribe .subscribe-illiyeen {
    padding-bottom: 0;
  }
}
.widget-subscribe .form-area {
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  gap: 6px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .widget-subscribe .form-area {
    max-width: 600px;
    margin: 0 auto;
    float: none;
  }
}
.widget-subscribe .form-area form {
  width: 100%;
  margin-top: 36px;
}
.widget-subscribe .form-area h5 {
  font-size: 28px;
  color: #121212;
}
.widget-subscribe .form-area h6 {
  font-size: 12px;
  color: #121212;
  letter-spacing: 0.24em;
}

/************ TABLE OF CONTENTS ***************

    01. SIDEBAR AREA
    02. WIDGETS

**********************************************/
/*----------------------------------------*/
/*  01. SIDEBAR AREA START
/*----------------------------------------*/
.sidebar-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
}

/*----------------------------------------*/
/*  02. WIDGETS START
/*----------------------------------------*/
.subscribe-widget-area .widget-container {
  background: var(--zo-theme-primary);
}
.subscribe-widget-area .widget-title-wrapper h6 {
  color: var(--zo-common-white);
  text-align: center;
}

/************ TABLE OF CONTENTS ***************

    01. TAGS & META
    02. GENERAL UTILITIES
    03. MAILCHIMP RESPONSE
    04. HERO BANNER
    05. WAVE ANIMATION
    06. LATEST TRENDS SECTION
    07. ELEVATED MENSWEAR SECTION
    08. ARCHIVE & TRENDING LAYOUTS
    09. FASHION OUTLOOK
    10. SUSTAINABLE PRACTICES
    11. LIFE ILLIYEEN
    12. SUBSCRIBE ILLIYEEN
    13. MENSWEAR CATEGORY ITEMS
    14. HOME AD BLOCK
    15. HOMEPAGE PROMOTION
    16. CARD OVERLAY SECTION
    17. SUBSCRIBE HOME SECTION
    18. GLOBAL ANIMATIONS

**********************************************/
/*----------------------------------------*/
/*  01. TAGS & META START
/*----------------------------------------*/
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tags .tag-bg {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(25.95px);
          backdrop-filter: blur(25.95px);
  border-radius: 100px;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.tags .tag-bg:hover {
  box-shadow: 0px 8px 20px rgba(157, 149, 149, 0.25);
  transform: translateY(-3px);
  background: rgba(109, 102, 102, 0.1);
}
.tags .tag-bg a {
  color: var(--zo-common-white);
  font-size: 14px;
}
.tags .tag-bg i {
  color: var(--zo-common-white);
  font-size: 14px;
  margin-right: 4px;
}

.bottom-meta .tag-bg {
  cursor: auto;
}
.bottom-meta .date {
  cursor: auto;
}
.bottom-meta .date i {
  margin-right: 4px;
}

/*----------------------------------------*/
/*  02. GENERAL UTILITIES START
/*----------------------------------------*/
.title-area {
  justify-content: space-between;
  align-items: center;
}

.tag-main {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  overflow-wrap: normal;
}

/*----------------------------------------*/
/*  03. MAILCHIMP RESPONSE START
/*----------------------------------------*/
.mc4wp-response p {
  color: var(--zo-common-black);
}

/*----------------------------------------*/
/*  04. HERO BANNER START
/*----------------------------------------*/
.hero-banner {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .hero-banner {
    min-height: 550px;
  }
}
.hero-banner .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-banner .hero-media picture,
.hero-banner .hero-media .hero-banner-img {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-banner .hero-media .hero-banner-img {
  position: absolute;
  inset: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .hero-banner .hero-banner-wrapper {
    margin-top: 310px;
  }
}
@media (max-width: 576px) {
  .hero-banner .hero-banner-wrapper {
    margin-top: 210px;
  }
}
@media (max-width: 374px) {
  .hero-banner .hero-banner-wrapper {
    margin-top: 250px;
  }
}
.hero-banner .container,
.hero-banner .hero-banner-wrapper {
  position: relative;
  z-index: 1;
}
.hero-banner h2 {
  font-weight: var(--zo-fw-medium);
  padding: 365px 0 0 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .hero-banner h2 {
    padding: 0;
    font-size: 32px !important;
  }
}
.hero-banner .subtitle {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: #474747;
}
.hero-banner .active {
  background: rgba(169, 139, 105, 0.12);
  border: 1px solid #A98B69;
}
.hero-banner .active h6 a {
  color: #A98B69;
}
.hero-banner .blog-swiper {
  padding-top: 215px;
  padding-bottom: 48px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .hero-banner .blog-swiper {
    padding-top: 104px;
  }
}
@media (max-width: 576px) {
  .hero-banner .blog-swiper {
    padding-top: 70px;
  }
}
@media (max-width: 374px) {
  .hero-banner .blog-swiper {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .hero-banner .blog-swiper {
    padding-bottom: 32px;
  }
}
.hero-banner .blog-swiper h4 {
  font-weight: 500;
  padding-bottom: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .hero-banner .blog-swiper h4 {
    font-size: 24px !important;
    padding-bottom: 24px;
  }
}
.hero-banner .blog-swiper .single-blog-post {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(25.95px);
          backdrop-filter: blur(25.95px);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
}
@media (max-width: 450px) {
  .hero-banner .blog-swiper .single-blog-post {
    padding: 8px;
  }
}
.hero-banner .blog-swiper .single-blog-post .post-image img {
  border-radius: 4px;
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
}
.hero-banner .blog-swiper .single-blog-post .post-content {
  padding-left: 24px;
}
@media (max-width: 576px), (max-width: 450px) {
  .hero-banner .blog-swiper .single-blog-post .post-content {
    padding-left: 12px;
  }
}
.hero-banner .blog-swiper .single-blog-post .post-content h6 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-height: 3.5em;
}
.hero-banner .blog-swiper .single-blog-post .bottom-content {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}
@media (max-width: 471px) {
  .hero-banner .blog-swiper .single-blog-post .bottom-content {
    flex-direction: column;
    margin-top: 8px;
  }
}
.hero-banner .blog-swiper .single-blog-post .bottom-content span {
  font-size: 14px;
}
.hero-banner .blog-swiper .single-blog-post .bottom-content span i {
  margin-right: 3px;
}
.hero-banner .blog-swiper .swiper-pagination {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 48px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .hero-banner .blog-swiper .swiper-pagination {
    margin-top: 32px;
  }
}
.hero-banner .blog-swiper .swiper-pagination-bullet-active {
  background: var(--zo-common-black);
}

.hero-banner .container {
  position: relative;
  z-index: 2;
}

/*----------------------------------------*/
/*  05. WAVE ANIMATION START
/*----------------------------------------*/
.wave {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 0;
}

.wave__container {
  position: relative;
  width: 1000px;
  height: 1000px;
  max-width: 100%;
  max-height: 100%;
}

.wave__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px solid rgba(252, 250, 250, 0.788);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  filter: blur(5px);
}

.wdt-dark .wave__circle {
  border: 2px solid #58585d;
}

.wave__container .wave__circle:nth-child(2) {
  animation-delay: -1.5s;
}

.wave__container .wave__circle:nth-child(3) {
  animation-delay: -3s;
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.8;
  }
  100% {
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
/*----------------------------------------*/
/*  06. LATEST TRENDS SECTION START
/*----------------------------------------*/
.latest-trends .latest-trends-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  padding: 68px 32px;
  min-height: 420px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .latest-trends .latest-trends-wrapper {
    min-height: 300px;
  }
}
.latest-trends .latest-trends-wrapper .latest-trends-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 416px;
  -o-object-fit: fill;
     object-fit: fill;
  z-index: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .latest-trends .latest-trends-wrapper .latest-trends-img {
    min-height: 300px;
  }
}
.latest-trends .latest-trends-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33));
  z-index: 1;
}
.latest-trends .latest-trends-wrapper .latest-trends-news {
  position: relative;
}
.latest-trends .latest-trends-wrapper .main-content {
  margin-top: 40px;
  max-width: 706px;
  width: 100%;
  z-index: 3;
  position: relative;
}
.latest-trends .latest-trends-wrapper .main-content span,
.latest-trends .latest-trends-wrapper .main-content p {
  color: var(--zo-common-white);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-height: 3.5em;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .latest-trends .latest-trends-wrapper .main-content span,
  .latest-trends .latest-trends-wrapper .main-content p {
    font-size: 14px;
  }
}
.latest-trends .latest-trends-wrapper .main-content .date {
  font-size: 14px;
}
.latest-trends .latest-trends-wrapper .main-content .date a {
  color: var(--zo-common-white);
}
.latest-trends .latest-trends-wrapper .main-content .date i {
  margin-right: 6px;
}
.latest-trends .latest-trends-wrapper .main-content h4 {
  margin-bottom: 10px;
}
.latest-trends .latest-trends-wrapper .main-content h4 a {
  color: var(--zo-common-white);
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .latest-trends .latest-trends-wrapper {
    padding: 12px;
  }
}

/*----------------------------------------*/
/*  07. ELEVATED MENSWEAR SECTION START
/*----------------------------------------*/
.elevated-menswear .title-area {
  justify-content: space-between;
}
.elevated-menswear .single-item .single-content {
  background: var(--zo-common-white);
  box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.05);
  padding: 16px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  min-height: 217px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .elevated-menswear .single-item .single-content {
    min-height: auto !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .elevated-menswear .single-item .single-content {
    min-height: 206px !important;
  }
}
.elevated-menswear .single-item .single-content p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-height: 3.5em;
  color: var(--zo-grey-1);
  margin: 6px 0 12px 0;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .elevated-menswear .single-item .single-content p {
    font-size: 14px;
  }
}
.elevated-menswear .single-item .single-content h5,
.elevated-menswear .single-item .single-content h6 {
  margin-top: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-height: 3.5em;
}
.elevated-menswear .single-item .single-content h5:hover,
.elevated-menswear .single-item .single-content h6:hover {
  opacity: 0.8;
}
.elevated-menswear .single-item .single-content .top-meta {
  display: flex;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) and (max-width: 1215px) {
  .elevated-menswear .single-item .single-content .top-meta span {
    font-size: 14px;
  }
}
.elevated-menswear .single-item .single-content .bottom-content {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}
@media (max-width: 374px) {
  .elevated-menswear .single-item .single-content .bottom-content {
    gap: 3px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1215px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .elevated-menswear .single-item .single-content .bottom-content span {
    font-size: 12px;
  }
}
@media (max-width: 471px) {
  .elevated-menswear .single-item .single-content .bottom-content span {
    font-size: 14px;
  }
}
@media (max-width: 374px) {
  .elevated-menswear .single-item .single-content .bottom-content span {
    font-size: 12px;
  }
}
@media (max-width: 374px) {
  .elevated-menswear .single-item .single-content .bottom-content span i {
    font-size: 12px;
  }
}
.elevated-menswear .single-item .single-content .tag {
  display: block;
}
.elevated-menswear .single-item .single-content .tag a {
  position: relative;
  text-decoration: none;
  color: #6E6E73;
}
.elevated-menswear .single-item .single-content .tag a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #c3c4c7;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out;
}
.elevated-menswear .single-item .single-content .tag a:hover::after {
  transform: scaleX(1);
}
@media (max-width: 374px) {
  .elevated-menswear .single-item .single-content .tag a {
    font-size: 11px;
  }
}
.elevated-menswear .single-item .single-content i {
  color: var(--zo-grey-1);
  font-size: 16px;
  margin-right: 4px;
}
.elevated-menswear .single-item .single-content .views-icon {
  margin-right: 3px;
}
.elevated-menswear .single-item .content-height {
  min-height: 228px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .elevated-menswear .single-item .content-height {
    min-height: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .elevated-menswear .single-item .content-height {
    min-height: 203px;
  }
}
.elevated-menswear .single-item .single-image {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  max-height: 276px;
  height: 100%;
}
.elevated-menswear .single-item .single-image img {
  width: 100%;
  height: auto;
  -o-object-fit: fill !important;
     object-fit: fill !important;
  aspect-ratio: 230/138;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .elevated-menswear .single-item .single-image img {
    aspect-ratio: 300/150;
    -o-object-position: center !important;
       object-position: center !important;
    -o-object-fit: fill !important;
       object-fit: fill !important;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .elevated-menswear .single-item .single-image img {
    -o-object-fit: fill !important;
       object-fit: fill !important;
  }
}
.elevated-menswear .single-item .grid-single-image img {
  min-height: 230px;
}
.elevated-menswear .two-column .tag-main {
  max-width: 440px;
  width: 100%;
}
@media only screen and (min-width: 1068px) and (max-width: 1290px) {
  .elevated-menswear .two-column .tag-main {
    max-width: 370px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1068px) {
  .elevated-menswear .two-column .tag-main {
    max-width: 160px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .elevated-menswear .two-column .tag-main {
    max-width: 400px;
  }
}
@media (max-width: 576px) {
  .elevated-menswear .two-column .tag-main {
    max-width: 280px;
  }
}
@media (max-width: 450px) {
  .elevated-menswear .two-column .tag-main {
    max-width: 180px;
  }
}
.elevated-menswear .three-column .tag-main {
  max-width: 250px;
  width: 100%;
}
@media only screen and (min-width: 1068px) and (max-width: 1290px) {
  .elevated-menswear .three-column .tag-main {
    max-width: 184px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1067px) {
  .elevated-menswear .three-column .tag-main {
    max-width: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .elevated-menswear .three-column .tag-main {
    max-width: 160px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .elevated-menswear .three-column .tag-main {
    max-width: 400px;
  }
}
@media (max-width: 576px) {
  .elevated-menswear .three-column .tag-main {
    max-width: 280px;
  }
}
@media (max-width: 450px) {
  .elevated-menswear .three-column .tag-main {
    max-width: 180px;
  }
}
.elevated-menswear .three-column .single-image img {
  -o-object-fit: cover;
     object-fit: cover;
}
.elevated-menswear .header-tag-main {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  overflow-wrap: normal;
  max-width: 150px;
}
@media only screen and (min-width: 1200px) and (max-width: 1260px) {
  .elevated-menswear .header-tag-main {
    max-width: 130px;
  }
}

/*----------------------------------------*/
/*  08. ARCHIVE & TRENDING LAYOUTS START
/*----------------------------------------*/
.archive-ilyn .single-content {
  min-height: 227px !important;
}

.archive-grid-layout .single-item .single-image img,
.trending-section .single-item .single-image img {
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .trending-section .section-header {
    margin-bottom: 24px;
  }
}

@media (max-width: 576px) {
  .archive-grid-layout .single-item {
    display: flex;
  }
}
@media (max-width: 576px) {
  .archive-grid-layout .single-item .single-image {
    border-top-left-radius: 12px;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 0 !important;
  }
}
@media (max-width: 576px) {
  .archive-grid-layout .single-item .single-image {
    max-width: 168px !important;
    width: 100%;
  }
}
@media (max-width: 576px) {
  .archive-grid-layout .single-item .single-image img {
    aspect-ratio: 1/1;
    min-height: 175px;
  }
}
@media (max-width: 415px) {
  .archive-grid-layout .single-item .single-image img {
    min-height: 165px !important;
  }
}
@media (max-width: 576px) {
  .archive-grid-layout .single-item .single-content {
    min-width: 200px !important;
    width: 100%;
    max-height: 175px;
    min-height: auto !important;
    border-top-left-radius: 0;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 12px;
  }
}
@media (max-width: 450px) {
  .archive-grid-layout .single-item .single-content {
    padding: 6px 10px;
  }
}
@media (max-width: 374px) {
  .archive-grid-layout .single-item .single-content {
    max-height: 215px !important;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .archive-grid-layout .single-item .single-content {
    padding: 10px;
    min-height: 164px !important;
  }
}
@media (max-width: 415px) {
  .archive-grid-layout .single-item .single-content {
    min-width: 220px !important;
  }
}
@media (max-width: 496px) {
  .archive-grid-layout .single-item .single-content i {
    margin-right: 1px;
  }
}
@media (max-width: 576px) {
  .archive-grid-layout .single-item .single-content .top-meta span,
  .archive-grid-layout .single-item .single-content .bottom-content span {
    font-size: 12px;
  }
}
@media (max-width: 576px) {
  .archive-grid-layout .single-item .single-content .top-meta span i,
  .archive-grid-layout .single-item .single-content .bottom-content span i {
    font-size: 12px;
  }
}
@media (max-width: 450px) {
  .archive-grid-layout .single-item .single-content .top-meta span,
  .archive-grid-layout .single-item .single-content .bottom-content span {
    font-size: 10px;
  }
}
@media (max-width: 450px) {
  .archive-grid-layout .single-item .single-content .top-meta span i,
  .archive-grid-layout .single-item .single-content .bottom-content span i {
    font-size: 10px;
  }
}
@media (max-width: 496px) {
  .archive-grid-layout .single-item .single-content .bottom-content {
    gap: 2px;
  }
}
@media (max-width: 496px) {
  .archive-grid-layout .single-item .single-content .bottom-content span {
    font-size: 11px;
  }
}
@media sm, (max-width: 576px) {
  .archive-grid-layout .single-item .single-content h5 {
    font-size: 14px;
    margin-top: 6px;
  }
}
@media (max-width: 450px) {
  .archive-grid-layout .single-item .single-content h5 {
    margin-top: 0;
  }
}
@media (max-width: 576px) {
  .archive-grid-layout .single-item .single-content p {
    font-size: 12px;
    margin: 6px 0;
  }
}
@media (max-width: 576px) {
  .archive-grid-layout .tag-main {
    max-width: 140px !important;
  }
}
@media (max-width: 450px) {
  .archive-grid-layout .tag-main {
    max-width: 120px !important;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .archive-grid-layout .single-item {
    display: flex;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .archive-grid-layout .single-item .single-image {
    max-width: 260px;
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .archive-grid-layout .single-item .single-image {
    border-top-left-radius: 12px;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 0 !important;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .archive-grid-layout .single-item .single-image img {
    min-height: 195px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .archive-grid-layout .single-item .single-content {
    border-top-left-radius: 0;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 12px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .archive-grid-layout .single-item .single-content {
    min-width: 350px;
    width: 100%;
    max-height: 195px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .archive-grid-layout .single-item .single-content .tag-main {
    max-width: 200px;
  }
}

.archive-list-layout .single-item .single-image img {
  min-height: 210px;
}

.best-year-post .single-content {
  min-height: 228px !important;
}

/*----------------------------------------*/
/*  09. FASHION OUTLOOK START
/*----------------------------------------*/
.fashion-outlook img {
  height: auto;
  max-height: 276px;
  -o-object-fit: cover;
     object-fit: cover;
}

/*----------------------------------------*/
/*  10. SUSTAINABLE PRACTICES START
/*----------------------------------------*/
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .subtainable-practices .swiper-slide {
    padding: 8px;
  }
}
.subtainable-practices .swiper-slide.swiper-slide-active {
  width: 100%;
  max-width: 525px;
}
.subtainable-practices .swiper-slide.swiper-slide-active .card {
  border-top-left-radius: 0;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 0;
}
@media (max-width: 576px) {
  .subtainable-practices .swiper-slide.swiper-slide-active .card {
    border-radius: 12px;
  }
}
.subtainable-practices .swiper-slide.swiper-slide-next {
  min-width: 856px !important;
  width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .subtainable-practices .swiper-slide.swiper-slide-next {
    min-width: auto !important;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .subtainable-practices .slider-column {
    padding: 0 10px;
  }
}
.subtainable-practices .swiper-wrapper {
  height: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .subtainable-practices .swiper-wrapper {
    margin-left: 400px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .subtainable-practices .swiper-wrapper {
    margin-left: 0;
  }
}
.subtainable-practices .card {
  border: none;
  max-height: 376px;
  border-radius: 12px;
}
@media (max-width: 576px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .subtainable-practices .card {
    max-height: 300px;
  }
}
@media (max-width: 374px) {
  .subtainable-practices .card {
    max-height: 350px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1290px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .subtainable-practices .card {
    max-height: 340px;
  }
}
.subtainable-practices .card img {
  min-height: 430px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1290px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .subtainable-practices .card img {
    -o-object-fit: fill;
       object-fit: fill;
    min-height: 340px;
  }
}
@media (max-width: 576px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .subtainable-practices .card img {
    min-height: 300px;
  }
}
@media (max-width: 374px) {
  .subtainable-practices .card img {
    min-height: 350px;
  }
}
@media (max-width: 576px) {
  .subtainable-practices .card img {
    -o-object-fit: fill;
       object-fit: fill;
  }
}
.subtainable-practices .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33));
  z-index: 1;
}
.subtainable-practices .card .card-img-overlay {
  bottom: 50px;
  left: 30px;
  z-index: 2;
}
@media only screen and (min-width: 992px) and (max-width: 1290px) {
  .subtainable-practices .card .card-img-overlay {
    bottom: 6px;
  }
}
@media (max-width: 576px) {
  .subtainable-practices .card .card-img-overlay {
    bottom: 0;
  }
}
.subtainable-practices .card .date-read-time {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.subtainable-practices .card .date {
  margin-top: 16px;
  margin-bottom: 6px;
  font-size: 14px;
}
.subtainable-practices .card .date i {
  margin-right: 4px;
}
.subtainable-practices .swiper-button-next,
.subtainable-practices .swiper-button-prev {
  top: auto;
  bottom: 10px;
  transform: translateY(0);
}
.subtainable-practices .swiper-button-prev {
  left: 50%;
  transform: translateX(0px);
}
.subtainable-practices .swiper-button-next {
  right: 50%;
  transform: translateX(0px);
}
.subtainable-practices .swiper-nav-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}
.subtainable-practices .swiper-button-next,
.subtainable-practices .swiper-button-prev {
  position: static;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  color: #000;
}
.subtainable-practices .swiper-button-next::after,
.subtainable-practices .swiper-button-prev::after {
  font-size: 18px;
}

/*----------------------------------------*/
/*  11. LIFE ILLIYEEN START
/*----------------------------------------*/
.life-illiyeen .single-item {
  margin-bottom: 64px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 450px) {
  .life-illiyeen .single-item {
    margin-bottom: 24px;
  }
}

/*----------------------------------------*/
/*  12. SUBSCRIBE ILLIYEEN START
/*----------------------------------------*/
.subscribe-illiyeen .subscribe-wrapper {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/*----------------------------------------*/
/*  13. MENSWEAR CATEGORY ITEMS START
/*----------------------------------------*/
.menswear-item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: none;
}

.menswear-item.show {
  opacity: 1;
  transform: translateY(0);
}

/*----------------------------------------*/
/*  14. HOME AD BLOCK START
/*----------------------------------------*/
.home-ad-block .single-column {
  margin-bottom: 24px;
}
.home-ad-block .single-column:last-child {
  margin-bottom: 0;
}
.home-ad-block .ad-block img {
  width: 100%;
  min-height: 411px;
}

/*----------------------------------------*/
/*  15. HOMEPAGE PROMOTION START
/*----------------------------------------*/
.homepage-promotion {
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 600px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .homepage-promotion {
    min-height: 350px;
  }
}
.homepage-promotion .promotion-overlay {
  background: rgba(0, 0, 0, 0.35);
  width: 100%;
  height: 100%;
  min-height: 600px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .homepage-promotion .promotion-overlay {
    min-height: 350px;
  }
}
.homepage-promotion .promotion-overlay .promotion-content {
  max-width: 900px;
  margin: 0 auto;
  color: #fff;
  padding-top: 20%;
}
.homepage-promotion .promotion-overlay .promotion-content .promotion-title {
  margin-bottom: 10px;
}
.homepage-promotion .promotion-overlay .promotion-content .promotion-subtitle {
  margin-bottom: 16px;
  opacity: 0.95;
}
.homepage-promotion .promotion-overlay .promotion-content .promotion-btn:hover {
  opacity: 0.8;
}
.homepage-promotion .promotion-overlay .promotion-content p {
  color: var(--zo-common-white);
  margin-bottom: 24px;
  opacity: 0.6;
}

/*----------------------------------------*/
/*  16. CARD OVERLAY SECTION START
/*----------------------------------------*/
.card-overlay-section .row {
  margin-top: 0;
}
.card-overlay-section .card-tile {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .card-overlay-section .card-tile {
    max-height: 300px !important;
  }
}
@media (max-width: 576px) {
  .card-overlay-section .card-tile {
    max-height: 250px !important;
  }
}
.card-overlay-section .card-tile .card-img {
  width: 100%;
  height: auto;
  min-height: 200px;
  display: block;
  border-radius: 20px;
  -o-object-fit: fill;
     object-fit: fill;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .card-overlay-section .card-tile .card-img {
    min-height: 250px !important;
    aspect-ratio: 429/196;
  }
}
@media (max-width: 576px) {
  .card-overlay-section .card-tile .card-img {
    min-height: 250px !important;
    aspect-ratio: 429/196;
  }
}
.card-overlay-section .card-tile .card-img img {
  width: 100%;
  min-height: 196px;
  -o-object-fit: fill;
     object-fit: fill;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .card-overlay-section .card-tile .card-img img {
    min-height: 250px !important;
    aspect-ratio: 429/196;
    -o-object-fit: fill;
       object-fit: fill;
  }
}
@media (max-width: 576px) {
  .card-overlay-section .card-tile .card-img img {
    min-height: 250px !important;
    aspect-ratio: 429/196;
    -o-object-fit: fill;
       object-fit: fill;
  }
}
.card-overlay-section .card-tile .card-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  border-radius: 20px;
  transition: background 0.28s ease;
  z-index: 1;
}
.card-overlay-section .card-tile .card-inner {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 3;
  color: #ffffff;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}
.card-overlay-section .card-tile .card-inner h5,
.card-overlay-section .card-tile .card-inner h6 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.4;
  max-height: 3.2em;
  margin-top: 4px;
}
.card-overlay-section .card-tile .card-inner .card-date {
  display: block;
  margin-top: 24px;
  margin-bottom: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
}
.card-overlay-section .card-tile .card-inner .card-date i {
  margin-right: 6px;
}
.card-overlay-section .card-tall {
  max-height: 416px;
}
.card-overlay-section .card-tall .card-inner {
  bottom: 100px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .card-overlay-section .card-tall .card-inner {
    bottom: 50px;
  }
}
.card-overlay-section .card-tall img {
  min-height: 416px !important;
}
.card-overlay-section .card-short {
  max-height: 196px;
  margin-bottom: 24px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .card-overlay-section .card-short .card-inner {
    bottom: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .card-overlay-section .card-short .card-inner {
    bottom: 2px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .card-overlay-section .card-short .card-inner h6 {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .card-overlay-section .card-short .card-inner .tags {
    margin-bottom: 8px;
  }
}
.card-overlay-section .card-short .card-inner .tag-bg {
  padding: 2px 8px;
}
.card-overlay-section .card-short .card-inner .card-date {
  margin-top: 16px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .card-overlay-section .card-short .bottom-meta {
    margin-top: 8px;
  }
}
.card-overlay-section .card-short .cat-pill {
  top: 16px;
  padding: 2px 12px;
  font-size: 12px;
  text-transform: uppercase;
}
.card-overlay-section .card-short .card-img {
  aspect-ratio: 429/196;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .card-overlay-section .last-column {
    display: flex;
    width: 100%;
    gap: 24px;
    margin-top: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .card-overlay-section .last-column {
    margin-top: 0;
  }
}
@media (max-width: 575.98px) {
  .card-overlay-section .card-tile {
    border-radius: 14px;
  }
  .card-overlay-section .card-tile .card-img,
  .card-overlay-section .card-tile .card-overlay {
    border-radius: 14px;
  }
  .card-overlay-section .card-tile .cat-pill {
    top: 12px;
    left: 12px;
    padding: 5px 8px;
    font-size: 11px;
  }
  .card-overlay-section .card-tile .card-inner {
    left: 12px;
    right: 12px;
    bottom: 30px;
  }
}

/*----------------------------------------*/
/*  17. SUBSCRIBE HOME SECTION START
/*----------------------------------------*/
.subscribe-home {
  border-top: 1px solid rgba(165, 165, 165, 0.6);
}
.subscribe-home .form-area {
  text-align: center;
  max-width: 1066px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 0;
  float: none;
}
.subscribe-home form {
  max-width: 621px;
  width: 100%;
  margin: 80px auto 0 auto;
}
.subscribe-home input,
.subscribe-home input[type=submit] {
  border-radius: 100px !important;
}

/*----------------------------------------*/
/*  18. GLOBAL ANIMATIONS START
/*----------------------------------------*/
@keyframes shine {
  100% {
    left: 125%;
  }
}
/************ TABLE OF CONTENTS ***************

    01. SINGLE POST HEADER
    02. ILLIYEEN BLOG DETAILS
    03. ILLIYEEN ADS
    04. RECOMMENDED BLOG
    05. PAGINATION
    06. COMMENTS
    07. RELATED BLOG
    08. MOBILE WIDGETS AND RESPONSIVE ADJUSTMENTS

**********************************************/
/*----------------------------------------*/
/*  01. SINGLE POST HEADER START
/*----------------------------------------*/
/*----------------------------------------*/
/*  02. ILLIYEEN BLOG DETAILS START
/*----------------------------------------*/
.illiyeen-blog-details .wp-block-image {
  padding-bottom: 30px;
}
.illiyeen-blog-details .wp-block-gallery {
  padding: 20px 0 30px 0;
}
.illiyeen-blog-details .wp-block-gallery .wp-block-image {
  padding: 0;
}
.illiyeen-blog-details .details-wrapper {
  padding: 44px 0;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .illiyeen-blog-details .details-wrapper {
    padding: 28px 0 0 0;
  }
}
.illiyeen-blog-details .details-wrapper .details-left-area .thumbnail-image {
  overflow: hidden;
}
.illiyeen-blog-details .details-wrapper .details-left-area .thumbnail-image img {
  border-radius: 12px;
  margin-bottom: 40px;
  max-height: 380px;
  height: auto;
  -o-object-fit: fill;
     object-fit: fill;
  transform: scale(1);
  transition: 0.5s ease-in-out;
}
.illiyeen-blog-details .details-wrapper .details-left-area .post-details p {
  margin-bottom: 16px;
  opacity: 0.6;
}
.illiyeen-blog-details .details-wrapper .details-left-area .post-details p:last-child {
  margin-bottom: 0;
}
.illiyeen-blog-details .details-wrapper .details-left-area .post-details a {
  color: #2271b1;
  text-decoration: underline;
  font-weight: 500;
}
.illiyeen-blog-details .details-wrapper .details-left-area .post-details ul li {
  margin-bottom: 16px;
  color: var(--zo-common-black);
  opacity: 0.6;
  font-weight: 400;
}
.illiyeen-blog-details .details-wrapper .details-left-area .post-details .wp-block-embed {
  padding: 10px 0 30px 0;
}
.illiyeen-blog-details .details-wrapper .details-left-area .post-details .wp-block-embed iframe {
  width: 100%;
}
.illiyeen-blog-details .details-wrapper .details-left-area .wp-block-list li {
  margin-left: 30px;
  list-style: inside;
}
.illiyeen-blog-details .details-wrapper .details-left-area .share-wrapper {
  display: flex;
  margin-top: 40px;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 576px), (max-width: 450px) {
  .illiyeen-blog-details .details-wrapper .details-left-area .share-wrapper {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
}
.illiyeen-blog-details .details-wrapper .details-left-area .share-wrapper .social-icon-wrapper {
  display: flex;
  align-items: center;
}
.illiyeen-blog-details .details-wrapper .details-left-area .share-wrapper .social-icon-wrapper ul {
  display: flex;
  gap: 14px;
  margin-left: 10px;
}
.illiyeen-blog-details .details-wrapper .details-left-area .share-wrapper .social-icon-wrapper ul li a i {
  font-size: 22px;
  color: #6E6E73;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .illiyeen-blog-details .details-wrapper .details-left-area .share-wrapper .reaction-btn {
    padding: 2px 6px;
  }
}
.illiyeen-blog-details .details-right-area {
  margin-top: -5px;
  position: sticky;
  top: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px), (max-width: 450px) {
  .illiyeen-blog-details .details-right-area {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .illiyeen-blog-details .details-right-area .widget-title {
    font-size: 22px;
  }
}
.illiyeen-blog-details img {
  width: 100%;
  height: auto;
}
.illiyeen-blog-details .prev-next-wrapper-container {
  border-top: 1px solid #A5A5A5;
  padding-top: 48px;
}
.illiyeen-blog-details .prev-next-wrapper {
  display: flex;
  gap: 23px;
  align-items: center;
  width: 100%;
  max-width: 453px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .illiyeen-blog-details .prev-next-wrapper {
    display: block;
  }
}
.illiyeen-blog-details .prev-next-wrapper:hover {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 5px 5px 15px rgba(179, 163, 163, 0.2), -5px -5px 15px rgba(239, 225, 225, 0.1);
  transition: all 0.3s ease;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.illiyeen-blog-details .prev-next-wrapper:hover img {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.illiyeen-blog-details .prev-next-wrapper img {
  max-height: 100px;
  max-width: 100px;
  width: auto;
  border-radius: 8px;
}
.illiyeen-blog-details .prev-next-wrapper h6 {
  font-size: 16px;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-height: 3.5em;
}
.illiyeen-blog-details .prev-next-wrapper span {
  color: #6E6E73;
  font-size: 14px;
}
.illiyeen-blog-details .prev-next-wrapper .previous-text,
.illiyeen-blog-details .prev-next-wrapper .next-text {
  margin-left: 3.5px;
}
.illiyeen-blog-details .prev-next-wrapper .content {
  padding-right: 9px;
}
.illiyeen-blog-details .next-wrapper {
  float: right;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .illiyeen-blog-details .next-wrapper {
    text-align: right;
  }
}
.illiyeen-blog-details .top-area {
  max-width: 856px;
  width: 100%;
}
.illiyeen-blog-details .top-area h3 {
  margin-top: 4px;
}
.illiyeen-blog-details .top-area h2 {
  padding: 24px 0;
}
.illiyeen-blog-details .top-area .post-date {
  color: #6E6E73;
  font-size: 14px;
}
.illiyeen-blog-details .top-area .meta {
  gap: 24px;
  display: flex;
  justify-content: left;
  align-items: center;
  margin-top: 16px;
}
@media (max-width: 415px) {
  .illiyeen-blog-details .top-area .meta {
    flex-wrap: wrap;
    gap: 5px;
  }
  .illiyeen-blog-details .top-area .meta > * {
    flex: 0 0 calc(50% - 50px);
  }
}
@media (max-width: 471px) {
  .illiyeen-blog-details .top-area .meta {
    gap: 8px;
  }
}
.illiyeen-blog-details .top-area .meta i {
  margin-right: 6px;
}
@media (max-width: 471px) {
  .illiyeen-blog-details .top-area .meta i {
    margin-right: 2px;
  }
}
.illiyeen-blog-details .top-area .meta span {
  color: var(--zo-common-black);
  opacity: 0.6;
  font-size: var(--zo-fz-body-2);
}
@media (max-width: 496px) {
  .illiyeen-blog-details .top-area .meta span {
    font-size: 12px;
    text-transform: uppercase;
  }
}
@media (max-width: 471px) {
  .illiyeen-blog-details .top-area .meta span .srp-bookmark-btn {
    font-size: 12px;
    text-transform: uppercase;
  }
}
.illiyeen-blog-details .top-area .meta .author-comment-meta,
.illiyeen-blog-details .top-area .meta .date-time-meta {
  display: flex;
}
@media (max-width: 450px) {
  .illiyeen-blog-details .top-area .meta .author-comment-meta,
  .illiyeen-blog-details .top-area .meta .date-time-meta {
    gap: 10px;
  }
}

/*----------------------------------------*/
/*  03. ILLIYEEN ADS START
/*----------------------------------------*/
.illiyeen-ads-wrapper {
  position: relative;
  min-height: 411px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px) {
  .illiyeen-ads-wrapper {
    display: flex;
    justify-content: center;
    gap: 24px;
  }
}
.illiyeen-ads-wrapper .ad-block {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
  overflow: hidden;
  margin-bottom: 24px;
  min-height: 411px;
  width: 100%;
  border-radius: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .illiyeen-ads-wrapper .ad-block {
    max-height: 300px;
  }
}
.illiyeen-ads-wrapper .ad-block:last-child {
  margin-bottom: 0;
}
.illiyeen-ads-wrapper .ad-block::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33));
}
.illiyeen-ads-wrapper .ad-block img {
  border-radius: 20px;
  min-height: 411px;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .illiyeen-ads-wrapper .ad-block img {
    min-height: 300px;
  }
}
.illiyeen-ads-wrapper .ad-block .ad-meta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  z-index: 2;
}
.illiyeen-ads-wrapper .ad-block .ad-meta h3 {
  color: var(--zo-common-white);
  padding: 0 7px;
}
.illiyeen-ads-wrapper .ad-block .ad-meta .ad-btn {
  background: var(--zo-common-white);
  color: var(--zo-common-black);
  padding: 12px 50px;
  border-radius: 10px;
  margin: 25px auto 0 auto;
  width: 100%;
  max-width: 180px;
}
.illiyeen-ads-wrapper .ad-block .ad-meta .ad-btn:hover {
  background: var(--zo-common-black);
  color: var(--zo-common-white);
}
.illiyeen-ads-wrapper .ad-block.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/*----------------------------------------*/
/*  04. RECOMMENDED BLOG START
/*----------------------------------------*/
.recommended-blog .single-content {
  min-height: 225px !important;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .recommended-blog .single-content {
    min-height: 205px !important;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .recommended-blog .single-content {
    min-height: 190px !important;
  }
}

.recommended-blog .single-image img {
  -o-object-fit: cover !important;
     object-fit: cover !important;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .recommended-blog .single-image img {
    aspect-ratio: 300/150 !important;
  }
}

/*----------------------------------------*/
/*  05. PAGINATION START
/*----------------------------------------*/
.page-numbers li {
  background: var(--zo-common-black);
  color: #666;
  padding: 5px 10px;
  display: inline;
}
.page-numbers li a {
  color: var(--zo-common-white);
}

/*----------------------------------------*/
/*  06. COMMENTS START
/*----------------------------------------*/
.comment-respond {
  margin-bottom: 30px;
}
.comment-respond .comment-form-cookies-consent {
  display: flex;
  align-items: center;
}
.comment-respond .comment-form-cookies-consent input {
  width: 18px;
  height: 18px;
  border: 2px solid #919EAB;
}
.comment-respond .consent-text {
  margin-left: 8px;
  font-size: 14px;
  color: #1D1D1F;
}
.comment-respond ::-moz-placeholder {
  font-weight: 400;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.4);
}
.comment-respond ::placeholder {
  font-weight: 400;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.4);
}
.comment-respond textarea,
.comment-respond input {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.comment-respond textarea:focus,
.comment-respond input:focus {
  background: transparent;
  outline: none;
  box-shadow: none;
  color: #212B36;
  border-color: #212B36;
}
.comment-respond .form-submit {
  margin-top: 32px;
}
.comment-respond .form-submit input {
  background: rgba(145, 158, 171, 0.24);
  border-radius: 8px;
  display: inline-block;
  padding: 11px 22px;
  color: rgba(145, 158, 171, 0.8);
  font-size: 14px;
  font-weight: var(--zo-fw-medium);
  border: 1px solid transparent;
}
.comment-respond .form-submit input:hover {
  background: transparent;
  border: 1px solid black;
  color: var(--zo-common-black);
}
.comment-respond .comment-notes,
.comment-respond .logged-in-as {
  margin: 10px 0 40px 0;
  font-size: 14px;
  color: #6E6E73;
}
.comment-respond .comment-reply-title {
  font-size: 16px;
}

.comment-list ol.children {
  list-style-type: none;
}

.comments-title {
  padding-bottom: 21px;
  margin-bottom: 48px;
  border-bottom: 1px solid #A5A5A5;
  font-size: 32px;
}

.comment-content-wrapper {
  width: 100%;
}

.comment-content {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 12px;
  margin-left: 16px;
  padding: 16px;
  transition: all 0.3s ease;
}
.comment-content:hover {
  box-shadow: 0px 8px 20px rgba(157, 149, 149, 0.25);
  transform: translateY(-3px);
}
.comment-content a {
  font-size: 16px;
  opacity: 0.6;
}
.comment-content p {
  color: #474747;
  font-size: 16px;
  margin-top: 8px;
}
.comment-content p a {
  color: #2271b1 !important;
}
.comment-content .url {
  font-weight: 500;
}

.comment-reply-link {
  margin-left: 16px;
  font-size: 14px;
  color: #474747;
  margin-top: 8px;
}

.comment-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.comment-list .reply {
  text-align: right;
}
.comment-list li.comment {
  position: relative;
}
.comment-list li.comment.children {
  margin-left: 2rem;
  border-left: 2px solid #ccc;
  padding-left: 1rem;
  list-style-type: none;
}
.comment-list li.comment ul.children {
  margin-left: 1.5rem;
  border-left: 2px solid #ddd;
  padding-left: 1rem;
}
.comment-list li.comment .comment-meta {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.comment-body {
  display: flex;
  margin-bottom: 32px;
}

.comment-author {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.comment-author img {
  width: 48px;
  height: 48px;
  border-radius: 100px;
}

.comments-count-wrapper {
  text-align: center;
}
.comments-count-wrapper p {
  font-size: 14px;
  font-weight: 500;
  color: #6E6E73;
}
.comments-count-wrapper button {
  padding: 17px 130px;
  margin-top: 15px;
  text-transform: uppercase;
  font-size: 16px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .comments-count-wrapper button {
    padding: 17px 60px;
  }
}
@media (max-width: 450px) {
  .comments-count-wrapper button {
    padding: 10px 24px;
  }
}

#cancel-comment-reply-link {
  float: right;
}

/*----------------------------------------*/
/*  07. RELATED BLOG START
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .related-blog {
    padding-top: 60px;
  }
}
.related-blog .single-content {
  min-height: 225px !important;
}

/*----------------------------------------*/
/*  08. MOBILE WIDGETS AND RESPONSIVE ADJUSTMENTS START
/*----------------------------------------*/
.mobile-prev-next-wrapper {
  display: none;
}

@media (max-width: 991px) {
  .widget-container {
    background: var(--zo-common-white);
    border-radius: 12px;
    padding: 14px 10px;
  }
  .widget-subscribe,
  .illiyeen-ads-wrapper {
    background: transparent;
    padding-bottom: 0;
  }
  .widget-subscribe .form-area {
    text-align: left;
  }
  .widget-container .widget-title {
    margin-bottom: 0;
  }
  .widget-container .widget-title::after {
    background: transparent;
  }
  .widget-content {
    display: none;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .widget-title.toggle-widget {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .popular-post-wrapper .widget_popular_posts ul li {
    background: rgba(243, 243, 243, 0.7);
    box-shadow: 0px 4px 8px rgba(213, 213, 213, 0.06);
  }
  .widget-title.toggle-widget i {
    font-size: 20px;
    transition: transform 0.3s ease;
    color: #6E6E73;
    font-weight: 600;
  }
  .widget-title.toggle-widget.active {
    margin-bottom: 16px;
  }
  .widget-title.toggle-widget.active i {
    transform: rotate(180deg);
  }
  .mobile-prev-next-wrapper {
    display: block;
  }
  .desktop-prev-next-wrapper {
    display: none;
  }
  .illiyeen-blog-details .prev-next-wrapper-container {
    padding-top: 24px;
  }
}
@media (max-width: 767px) {
  .mobile-prev-next-wrapper img {
    display: none;
  }
  .mobile-prev-next-wrapper .width-50 {
    width: 50%;
  }
  .illiyeen-blog-details .prev-next-wrapper {
    gap: 0;
  }
}
/************ TABLE OF CONTENTS ***************

    01. SEARCH RESULTS MAIN PAGE
    02. SEARCH RESULTS INFO
    03. SEARCH RESULTS COMPONENTS
    04. NO SEARCH RESULTS PAGE

**********************************************/
/*----------------------------------------*/
/*  01. SEARCH RESULTS MAIN PAGE START
/*----------------------------------------*/
.search-results-page {
  padding-top: 150px;
  background: #f5f5f7;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .search-results-page {
    padding-top: 130px;
  }
}
.search-results-page .results-count {
  font-size: 20px;
  font-weight: 500;
}
.search-results-page .results-header {
  margin-top: 60px;
  margin-bottom: 34px;
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .search-results-page .results-header {
    margin-top: 30px;
    margin-bottom: 20px;
  }
}
.search-results-page .single-content {
  min-height: 224px !important;
}
.search-results-page .single-content h5 {
  font-size: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 900px), only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .search-results-page .single-content h5 {
    font-size: 16px;
  }
}
.search-results-page .row-gap {
  row-gap: 24px !important;
}
.search-results-page .top-meta span {
  color: #6E6E73;
}
.search-results-page .bottom-content span {
  opacity: 0.8;
}
.search-results-page .ri-search-line {
  position: absolute;
  top: 20px;
  left: 24px;
  font-size: 20px;
  color: #6E6E73;
}
.search-results-page .search-input-wrapper {
  position: relative;
  width: 100%;
}
.search-results-page .search-input-wrapper .search-field {
  width: 100%;
  padding: 16px 60px 16px 16px;
  box-sizing: border-box;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  border: none;
  background: #FFFFFF;
  border-radius: 8px;
  outline: none;
}
.search-results-page .search-input-wrapper .clear-search {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  transition: color 0.2s ease;
}
.search-results-page .search-input-wrapper .clear-search:hover {
  color: #000;
}

/*----------------------------------------*/
/*  02. SEARCH RESULTS INFO START
/*----------------------------------------*/
#results-info {
  font-weight: 500;
  color: #6E6E73;
  margin-bottom: 15px;
}

/*----------------------------------------*/
/*  03. SEARCH RESULTS COMPONENTS START
/*----------------------------------------*/
.search-results .subscribe-illiyeen {
  background: #f5f5f7;
  margin-top: 0;
}

/*----------------------------------------*/
/*  04. NO SEARCH RESULTS PAGE START
/*----------------------------------------*/
.no-search-results {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
  padding: 100px 0;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 576px) and (max-width: 767.98px), (max-width: 576px) {
  .no-search-results {
    min-height: 70vh;
    padding: 80px 0 20px 0;
  }
}
.no-search-results img {
  width: 100%;
  max-width: 248px;
  height: auto;
  margin-bottom: 32px;
}
.no-search-results .container p {
  color: #474747;
  margin: 16px 0 48px 0;
}
.no-search-results .container h4 {
  font-weight: 500;
  font-size: 32px !important;
}
.no-search-results .container .btn-medium {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500;
}/*# sourceMappingURL=main.css.map */