@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/metropolis.min.css");
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

/* =========================================================
   PAGE WRAPPER
========================================================= */

#blog-ty-new {
  width: 100%;
}

/* =========================================================
   MAIN RIGHT WRAPPER
========================================================= */

#blog-p-right-new {
  position: relative;
  width: 100%;
}

/* =========================================================
   HERO SECTION — RIGHT HALF IMAGE + LEFT GRADIENT
========================================================= */

#blog-p-top-new {
  position: relative;
  width: 100%;
  height: 520px;
  /* responsive height */
  overflow: hidden;
  margin-top: 80px;
}


/* =========================================================
   RIGHT HALF IMAGE (STARTS FROM CENTER)
========================================================= */

#blog-p-top-new img {
  position: absolute;

  left: 0;
  /* ⭐ start from center line */
  right: 0;
  top: 0;
  bottom: 0;

  width: auto;
  /* fill remaining space */
  height: 100%;

  min-width: 100%;
  /* ensure right half is filled */

  object-fit: cover;
  object-position: center;

  display: block;
  z-index: 0;
}


/* =========================================================
   LEFT GRADIENT OVERLAY
========================================================= */

#blog-p-top-new::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0;

  width: 50%;
  /* exactly left half */
  height: 100%;

  background: linear-gradient(90deg,
      #E4E8E9 55%,
      rgba(228, 232, 233, 0.75) 75%,
      rgba(228, 232, 233, 0) 100%);

  z-index: 1;
}


/* =========================================================
   HERO TEXT (LEFT SIDE)
========================================================= */

#hero-text-new {
  position: absolute;

  left: 76px;
  top: 50%;
  transform: translateY(-50%);

  width: 45%;
  z-index: 2;
}


/* =========================================================
   HERO TITLE
========================================================= */

#heading-new {
  margin: 0;
  font-family: "Figtree", sans-serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 110%;
  color: #056663;
}


/* =========================================================
   TWO COLUMN LAYOUT
========================================================= */

#blog-two-col-new {
  display: flex;
  align-items: flex-start;
  gap: 0px;
  padding: 80px 76px 80px 76px;
}

/* =========================================================
   LEFT META COLUMN
========================================================= */

#blog-meta-left-new {
  width: 30%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* CATEGORY TAG */

#blog-category-new #bcu-new {
  display: inline-block;
  font-family: "Figtree", sans-serif;
  background: #e7f6f3;
  color: #056663;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 600;
}

/* META BLOCKS */

#blog-author-new,
#blog-date-new {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* LABEL */

.meta-label {
  font-family: "Figtree", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #1F1F1FCC;
  line-height: 130%;
}

/* VALUE */

.meta-value {
  font-family: "Figtree", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #1f1f1f;
  line-height: 100%;
}

/* =========================================================
   RIGHT ARTICLE CONTENT
========================================================= */

#blog-whole-info-new {
  width: 100%;
  /* max-width: 760px; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
  margin-top: -20px !important;
}

/* PARAGRAPHS */

#blog-whole-info-new p {
  font-family: "Figtree", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
  color: #1F1F1FCC;
  margin-top: 0px;
  margin-bottom: 0px;
}

/* HEADINGS */

#blog-whole-info-new h2 strong {
  font-family: "Figtree", sans-serif;
  font-size: 32px;
  font-weight: 600 !important;
  line-height: 140%;
  color: #1F1F1F;
  /* margin-top: 20px;
  margin-bottom: 20px; */
}

#blog-whole-info-new h3 strong {
  font-family: "Figtree", sans-serif;
  font-size: 32px;
  font-weight: 600 !important;
  line-height: 140%;
  color: #1F1F1F;
  /* margin-top: 20px;
  margin-bottom: 20px; */
}

#blog-whole-info-new strong {
  font-weight: 600 !important;
  color: #1F1F1F;
  font-size: 22px;
  line-height: 140%;
}

#blog-whole-info-new hr {
  display: none !important;
}


/* LISTS */

#blog-whole-info-new ul,
#blog-whole-info-new ol {
  padding-left: 40px;
  margin-bottom: 0px;
  padding-top: 15px;
}

#blog-whole-info-new li {
  font-family: "Figtree", sans-serif;
  font-size: 20px !important;
  font-weight: 400;
  line-height: 140%;
  color: #1F1F1FCC;
  margin-bottom: 10px;
}

/* CONTENT IMAGES */

#blog-whole-info-new img {
  width: 100% !important;
  max-width: 100% !important;
  /* height: auto !important; */
  max-height: 535px !important;
  display: block !important;
  margin-top: 60px !important;
  margin-bottom: 40px !important;
  border-radius: 4px !important;
  object-fit: cover !important;
}

/* LINKS */

#blog-whole-info-new a {
  color: #056663;
  font-size: 20px;
  font-weight: 600;
  line-height: 140%;
}

/* =========================================================
   CONTENT IMAGES — FULL WIDTH LIKE TEXT
========================================================= */

/* Reset WordPress wrappers WITHOUT adding margins */

#blog-whole-info-new figure,
#blog-whole-info-new .wp-block-image {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Actual images */

/* Remove WordPress alignment + float styles */

#blog-whole-info-new .aligncenter,
#blog-whole-info-new .alignleft,
#blog-whole-info-new .alignright,
#blog-whole-info-new .wp-block-image.aligncenter,
#blog-whole-info-new .wp-block-image.alignleft,
#blog-whole-info-new .wp-block-image.alignright {
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  text-align: left !important;
}

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

#share-blog-section-new {
  border-top: 2px solid #ebebeb;
  padding: 34px 76px;
  display: flex;
  flex-direction: column;
  gap: 34px;
  margin-top: 34px;
}

#share-blog-heading-new {
  font-size: 26px;
  font-weight: 500;
}

#share-blog-icons-new {
  display: flex;
  gap: 44px;
}

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

#about-author-new {
  padding: 10px 76px;
  display: flex;
  gap: 24px;
  flex-direction: column;
}

#author-heading-new {
  font-size: 26px;
  font-weight: 500;
}

#author-info-new {
  display: flex;
  align-items: flex-start;
}

#author-image-new {
  width: 125px;
  height: 125px;
}

#author-image-new img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

#author-infor-new {
  display: flex;
  flex-direction: column;
  margin-left: 16px;
  gap: 16px;
}

#author-name-new {
  font-size: 26px;
  font-weight: 500;
}

#author-prof-new {
  max-width: 500px;
  font-size: 16px;
  line-height: 26px;
}

/* =========================================================
   MOBILE (≤ 768px)
========================================================= */

@media (max-width: 768px) {

  #blog-whole-info-new h2 strong {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 150%;
  }

  #blog-whole-info-new h3 strong {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 150%;
  }

  #blog-whole-info-new p {
    font-size: 18px !important;

  }

  #blog-whole-info-new a {
    margin-bottom: 10px !important;

  }

  #blog-whole-info-new h2,
  #blog-whole-info-new h3 {
    font-size: 18px !important;
    margin-bottom: 10px !important
  }

  #blog-whole-info-new strong {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1F1F1F;
    line-height: 140%;

  }

  #blog-whole-info-new li {
    font-size: 18px !important;
    margin-bottom: 10px !important;
    font-family: "Figtree", sans-serif;
    font-weight: 400;
    line-height: 150%;
    color: #1F1F1FCC;
  }

  #blog-p-top-new {
    aspect-ratio: 16 / 9;
    /* slightly taller mobile hero */
  }

  #hero-text-new {
    left: 20px;
    max-width: 90%;
  }

  #heading-new {
    font-size: 26px;
  }

  #blog-two-col-new {
    flex-direction: column;
    padding: 20px;
    gap: 40px;
  }

  #blog-meta-left-new,
  #blog-whole-info-new {
    width: 100%;
    max-width: 100%;
    gap: 0px;
  }

  #blog-meta-left-new {
    gap: 20px;
  }

  #share-blog-section-new,
  #about-author-new {
    padding: 20px;
  }

  #author-image-new {
    width: 70px;
    height: 70px;
  }

  #author-name-new {
    font-size: 18px;
  }

  #author-prof-new {
    font-size: 14px;
  }
}

/* =========================================================
   TABLET (768px — 992px)
========================================================= */

@media (min-width: 768px) and (max-width: 992px) {

  #blog-p-top-new {
    aspect-ratio: 16 / 8;
  }

  #blog-two-col-new {
    flex-direction: column;
    padding: 40px;
  }

  #blog-meta-left-new,
  #blog-whole-info-new {
    width: 100%;
    max-width: 100%;
  }
}




@media (max-width: 768px) {

  /* ===== HERO CONTAINER ===== */

  #blog-p-top-new {
    height: 520px;
    margin-top: 0;
  }

  /* ===== IMAGE — FULL WIDTH ===== */

  #blog-p-top-new img {
    left: 0;
    right: 0;
    top: 96px;
    bottom: 0;

    width: 100%;
    height: 100%;

    min-width: 0;
    object-fit: cover;
    object-position: 83% center;
  }

  /* =====================================================
     TOP GRADIENT — WHITE → TRANSPARENT
     (Matches Careers mobile top fade)
  ===================================================== */

  #blog-p-top-new::before {
    content: "";
    position: absolute;

    left: 0;
    top: -1%;

    width: 100%;
    height: 320px;
    /* ⭐ EXACT Careers value */

    background: linear-gradient(180deg,
        #FFFFFF 35.48%,
        rgba(255, 255, 255, 0.25) 68.22%,
        rgba(255, 255, 255, 0) 100%);

    z-index: 1;
  }

  /* =====================================================
     BOTTOM GRADIENT — TRANSPARENT → WHITE
     (Matches Careers mobile bottom fade)
  ===================================================== */

  #blog-p-top-new::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    /* ⭐ push slightly down */

    width: 100%;
    height: 126px;
    /* ⭐ slightly larger */

    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 36%,
        #FFFFFF 100%);

    z-index: 1;
  }

  /* ===== HERO TEXT — CENTERED ===== */

  #hero-text-new {
    left: 50%;
    top: 15%;
    transform: translate(-50%, -50%);

    width: 90%;
    text-align: center;
    z-index: 2;
    /* above gradients */
  }

  #heading-new {
    font-size: 26px;
    line-height: 110%;
  }


  #blog-category-new #bcu-new {
    display: inline-block;
    font-family: "Figtree", sans-serif;
    background: #e7f6f3;
    color: #056663;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 120%;
  }

  .meta-label {
    font-family: "Figtree", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #8F8F8F;
    line-height: 130%;
  }

  .meta-value {
    font-family: "Figtree", sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #1f1f1f;
    line-height: 120%;
  }

  #blog-whole-info-new p {
    font-family: "Figtree", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 140%;
    color: #8F8F8F;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  #blog-whole-info-new h2,
  #blog-whole-info-new h3 {
    font-family: "Figtree", sans-serif;
    font-size: 22px;
    font-weight: 600 !important;
    line-height: 140%;
    color: #1F1F1F;
    margin-top: 20px;
    margin-bottom: 20px;
  }


  #blog-whole-info-new hr {
    display: none !important;
  }



  #blog-whole-info-new ul,
  #blog-whole-info-new ol {
    padding-left: 20px;
    margin-bottom: 0px;
  }

  #blog-whole-info-new img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-top: 60px !important;
    margin-bottom: 40px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
  }


  #blog-whole-info-new a {
    color: #056663;
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
  }

}

#blog-whole-info-new p br {
  display: none !important;
}


/* FAQ questions only — after FAQ heading */
/* #blog-whole-info-new h2 + h3,
#blog-whole-info-new h2 ~ h3 {
  font-size: 20px !important;
  font-weight: 600;
  line-height: 140%;
} */

/* FAQ answers */
/* #blog-whole-info-new h2 ~ h3 + p {
  font-size: 18px !important;
  line-height: 150%;
  color: #8F8F8F;
} */




/* =========================================================
   WORDPRESS TABLE — FORCE TEXT WRAP (NO OVERFLOW)
========================================================= */


/* Wrapper — keep table inside content width */

#blog-whole-info-new figure.wp-block-table {
  width: 100%;
  max-width: 100%;
  margin: 40px 0;
  overflow-x: auto;
  /* safety for extreme cases */
  -webkit-overflow-scrolling: touch;
}


/* Table */

#blog-whole-info-new table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 40px;
  margin-bottom: 40px;
}


/* Cells */

#blog-whole-info-new th,
#blog-whole-info-new td {

  padding: 16px 18px;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
  color: #1F1F1FCC;
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 0;
}


/* Optional zebra rows */

#blog-whole-info-new tr:nth-child(even) td {
  background: #fafafa;
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  #blog-whole-info-new table {
    font-size: 16px;
  }

  #blog-whole-info-new th,
  #blog-whole-info-new td {
    padding: 12px 14px;
  }

}



/* blog-16march-changes */
.wp-block-heading {
  display: flex;
  width: 100%;
  font-family: "Figtree", sans-serif;
  font-size: 56px;
  font-weight: 600;
  color: #056663
}

blockquote {
  border-left: 5px solid #056663;
  /* example green */
  padding-left: 40px;
  margin-top: 20px
}

@media (max-width: 768px) {
  .wp-block-heading {
    font-size: 26px;
    /* smaller heading */
    font-weight: 600;
    line-height: 110%;
  }

  blockquote {
    border-left: 3px solid #056663;
    /* thinner line */
    padding-left: 20px;
  }
}

a:focus {
  outline: none;
}

a:active {
  outline: none;
}

/* Target the correct structure */
#blog-whole-info-new h5.wp-block-heading {
  text-align: center;
}

#blog-whole-info-new h5.wp-block-heading a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  background: #E7F6F3;
  color: #056663;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
}

/* Optional verified icon */
#blog-whole-info-new h5.wp-block-heading a::before {
  content: "✔ ";
  font-weight: bold;
}


@media (max-width: 768px) {

  /* Target the correct structure */
  #blog-whole-info-new h5.wp-block-heading {
    text-align: left;

  }

  #blog-whole-info-new h5.wp-block-heading a {
    display: inline-block;
    border-radius: 8px;
    background: #E7F6F3;
    color: #056663;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
  }

  /* Optional verified icon */
  #blog-whole-info-new h5.wp-block-heading a::before {
    content: "✔ ";
    font-weight: bold;
  }



}



#blog-whole-info-new h5.wp-block-heading {
  font-family: "Figtree", sans-serif;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 140%;
  color: #1F1F1F;
  margin-top: 20px;
  margin-bottom: 20px;
}



/* =========================================================
   BLOG PRODUCT PAGE REDESIGN
========================================================= */
#blog-p-right-new {
  display: flex !important;
  flex-direction: column !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 80px 40px !important;
}

#blog-p-right-new #blog-p-top-new,
#blog-p-right-new #blog-two-col-new,
#blog-p-right-new #blog-meta-left-new {
  display: contents !important;
}

#blog-p-right-new #blog-p-top-new::before,
#blog-p-right-new #blog-p-top-new::after {
  display: none !important;
}

#blog-p-right-new #blog-p-top-new img {
  display: block !important;
  order: 6 !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-height: 500px !important;
  object-fit: cover !important;
  margin-top: 30px !important;
  margin-bottom: 30px !important;
  border-radius: 4px !important;
}

/* #blog-p-right-new #blog-category-new {
  order: 1 !important;
  margin-bottom: 12px !important;
  margin-top: 12px !important;
} */

#blog-p-right-new #blog-category-new {
  order: 1 !important;
  margin-bottom: 20px !important;
  margin-top: 24px !important;
  display: inline-block !important;
  width: fit-content !important;
  max-width: fit-content !important;
  color: #056663 !important;
}

#blog-p-right-new #blog-category-new #bcu-new {
  display: inline-block !important;
  font-family: "Figtree", sans-serif !important;
  background: transparent !important;
  color: #056663 !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 120%;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  cursor: pointer !important;
}

#blog-p-right-new #blog-category-new #bcu-new::before {
  content: "←" !important;
  display: inline !important;
}

#blog-p-right-new #hero-text-new {
  order: 2 !important;
  position: static !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  margin-bottom: 30px !important;
  display: block !important;
}

#blog-p-right-new #heading-new {
  font-size: 42px !important;
  line-height: 1.2 !important;
  color: #056663 !important;
  margin-bottom: 0px !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

#blog-p-right-new #blog-author-new {
  display: block !important;
  order: 5 !important;
}

#blog-p-right-new #blog-date-new {
  display: block !important;
  order: 4 !important;
}

#blog-p-right-new #blog-date-new {
  margin-bottom: 0px !important;
}

#blog-p-right-new #blog-author-new {
  margin-bottom: 10px !important;
}

#blog-p-right-new #blog-date-new .meta-label,
#blog-p-right-new #blog-author-new .meta-label {
  display: none !important;
}

#blog-p-right-new #blog-date-new .meta-value,
#blog-p-right-new #blog-author-new .meta-value {
  font-family: "Figtree", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 140% !important;
  color: #1F1F1FCC !important;
}

#blog-p-right-new #blog-author-new .meta-value::before {
  content: "By " !important;
}

#blog-p-right-new #blog-author-new a {
  text-decoration: none !important;
  color: inherit !important;
}

#blog-p-right-new #blog-whole-info-new {
  display: contents !important;
}

#blog-p-right-new #blog-whole-info-new>* {
  order: 7 !important;
  width: 100% !important;
}



#blog-p-right-new #blog-whole-info-new p {
  color: #555555 !important;
  font-size: 20px !important;
  margin-bottom: 20px !important;
}

#blog-p-right-new #blog-whole-info-new img {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
  max-height: none !important;
}

@media (max-width: 768px) {
  #blog-p-right-new {
    padding: 20px 20px 40px 20px !important;
  }

  #blog-p-right-new #heading-new {
    font-size: 28px !important;
    text-align: left;
    margin-bottom: 0px !important;
  }
}

/* =========================================================
   CUSTOM AUTHOR BOX (For WordPress Editor)
   Usage: Add a "Media & Text" block or a "Group" block 
   and give it the Additional CSS Class: custom-author-box
========================================================= */
#blog-p-right-new #blog-whole-info-new .custom-author-box {
  display: flex !important;
  flex-direction: row !important;
  gap: 30px !important;
  background-color: #E3F5F3 !important;
  padding: 30px !important;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
  border-radius: 4px !important;
  align-items: center !important;
}

#blog-p-right-new #blog-whole-info-new .custom-author-box>figure,
#blog-p-right-new #blog-whole-info-new .custom-author-box>img,
#blog-p-right-new #blog-whole-info-new .custom-author-box>div:first-child {
  flex: 0 0 120px !important;
  max-width: 120px !important;
  margin: 0 !important;
}

#blog-p-right-new #blog-whole-info-new .custom-author-box img {
  border-radius: 0 !important;
  /* Ensure square image */
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#blog-p-right-new #blog-whole-info-new .custom-author-box>div:not(:first-child),
#blog-p-right-new #blog-whole-info-new .custom-author-box>p,
#blog-p-right-new #blog-whole-info-new .custom-author-box .wp-block-media-text__content {
  flex: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#blog-p-right-new #blog-whole-info-new .custom-author-box p {
  font-size: 20px !important;
  line-height: 160% !important;
  font-weight: 400 !important;
  color: #555555 !important;
  margin-bottom: 10px !important;
}

#blog-p-right-new #blog-whole-info-new .custom-author-box strong {
  font-size: 18px !important;
}

@media (max-width: 768px) {
  #blog-p-right-new #blog-whole-info-new .custom-author-box {
    flex-direction: column !important;
    padding: 20px !important;
    gap: 20px !important;
  }

  #blog-p-right-new #blog-whole-info-new .custom-author-box>figure,
  #blog-p-right-new #blog-whole-info-new .custom-author-box>img,
  #blog-p-right-new #blog-whole-info-new .custom-author-box>div:first-child {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   REVIEWED BY SECTION
   Usage: Add a "Paragraph" or "Group" block in WP and 
   give it the Additional CSS Class: top-reviewed-dr
========================================================= */
#blog-p-right-new #blog-whole-info-new .top-reviewed-dr {
  display: block !important;
  order: 5 !important;
  background-color: #D9D9D9 !important;
  padding: 5px 10px !important;
  border-radius: 0 !important;
  border-left: 4px solid #056663 !important;
  font-family: "Figtree", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #1F1F1FCC !important;
  line-height: 140% !important;
  margin-top: 20px !important;
}

#blog-p-right-new #blog-whole-info-new .top-reviewed-dr p {
  font-family: "Figtree", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #1F1F1F !important;
  line-height: 160% !important;
  margin: 0 !important;
}

#blog-p-right-new #blog-whole-info-new .top-reviewed-dr a {
  color: #cc6666 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  font-size: 20px !important;
}

@media (max-width: 768px) {
  #blog-p-right-new #blog-whole-info-new .top-reviewed-dr {
    padding: 5px 10px !important;
    font-size: 18px !important;
    line-height: 140% !important;
    margin-top: 40px !important;
  }

  #blog-p-right-new #blog-whole-info-new .top-reviewed-dr p {
    font-size: 18px !important;
    line-height: 180% !important;
  }

  #blog-p-right-new #blog-whole-info-new .top-reviewed-dr a {
    font-size: 18px !important;
  }

  #blog-p-right-new #blog-date-new .meta-value,
  #blog-p-right-new #blog-author-new .meta-value {
    font-family: "Figtree", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 180% !important;
    color: #1F1F1FCC !important;
  }

  #blog-p-right-new #blog-whole-info-new p {
    color: #1F1F1FCC !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 150% !important;
    margin-bottom: 20px !important;
  }

  #blog-whole-info-new h5.wp-block-heading {
    font-family: "Figtree", sans-serif;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 150%;
    color: #1F1F1F;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  #blog-p-right-new #blog-whole-info-new .custom-author-box p {
    font-size: 18px !important;
    line-height: 160% !important;
    font-weight: 400 !important;
    color: #1F1F1F !important;
    margin-bottom: 10px !important;
  }

  #blog-p-right-new #blog-whole-info-new .custom-author-box img {
    border-radius: 0 !important;
    /* Ensure square image */
    margin: 0 auto !important;
    width: 150px !important;
    height: 150px !important;
    object-fit: cover !important;
  }

  #blog-p-right-new #blog-date-new {
    margin-bottom: 0px !important;
  }

  #blog-p-right-new #blog-category-new {
    order: 1 !important;
    margin-bottom: 20px !important;
    margin-top: 0px !important;
    display: inline-block !important;
    width: fit-content !important;
    max-width: fit-content !important;
    color: #056663 !important;
  }

  #blog-p-right-new #blog-category-new #bcu-new {
  display: inline-block !important;
  font-family: "Figtree", sans-serif !important;
  background: transparent !important;
  color: #056663 !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 120%;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  cursor: pointer !important;
  }

  #blog-p-right-new #blog-author-new {
  margin-top: -5px !important;
}

#blog-p-right-new #hero-text-new {
  order: 2 !important;
  position: static !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  display: block !important;
}

}