:root 		{
  /* Primary */
  --color-primary: #e50914;

  /* Neutrals */
  --color-black: #000000;
  --color-heading: #333333;
  --color-text: #bacce1;
  --color-white: #ffffff;
  --color-gray: gray;
  --color-light-bg: #f8f9fa;
  --color-border: #eaeaea;

  /* Accents */
  --color-accent-blue: #1e90ff;
  --color-accent-purple: #9b51e0;
  --color-accent-orange: #f2994a;
  --color-accent-teal: #2dcece;
  --color-accent-pink: #ff6baa;

}

.banner-section                     {height: 400px;position: relative;background-position: center center;background-repeat: no-repeat;background-size: cover;}
.banner-section .container          {top: 70%;left: 50%;transform: translate(-50%, -50%);position: absolute;}
.banner-section .heading-style-2    {color: var(--color-white);position: relative;z-index: 1;margin-bottom: 12px;text-transform: none;}
.banner-section.banner-image-overlay{position: relative;}
.banner-section.banner-image-overlay::before{content: "";position: absolute;top: 0;left: 0;background: radial-gradient(51.06% 51.06% at 50% 48.94%, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.31) 100%);width: 100%;height: 100%;}
.breadcrumb{}
.breadcrumb-item a{color: var(--color-white);transition: all ease-in-out 0.25s;}
.breadcrumb-item a:hover{text-decoration: underline;}
.breadcrumb-item.active{color: var(--color-primary);font-weight: 600;}
.breadcrumb-item+.breadcrumb-item::before{color: var(--color-white);}
/* button */

/******* Blog List page CSS - start ******/
.section-blog-listing {padding: 100px 0;}

.section-blog-listing .col-12 {margin: 0 0 24px;}


/******* Blog List page CSS - end ******/

/******* Blog Details CSS - start ******/
.back-to-blog {font-size: 14px;line-height: 16px;letter-spacing: 1.4px;text-transform: uppercase;display: inline-flex;align-items: center;gap: 10px;font-weight: 600;border-bottom: 1px solid var(--color-white);}
.back-to-blog img {height: 22px;width: 22px}
.back-to-blog:hover img {filter: brightness(0) saturate(100%) invert(10%) sepia(82%) saturate(6365%) hue-rotate(353deg) brightness(102%) contrast(101%);}
.back-to-blog-white {color: var(--color-white);}
.back-to-blog-white:hover {color: var(--color-primary);border-color: var(--color-primary);}
.back-to-blog-black {color: var(--color-black);}
.back-to-blog-black:hover {color: var(--color-black);border-color: var(--color-black);}
.back-to-blog-black img {}


.banner-section .back-to-blog {margin-bottom: 12px;}
.banner-section h6.heading-style-6 {max-width: 946px;margin-inline: auto;font-size: 40px;line-height: 58px;letter-spacing: 0;text-transform: none;font-weight: 600;color: var(--color-white);}
.section-blog-detail {padding: 80px 0}
.section-blog-detail figure {height: 422px;width: 100%;margin-bottom: 40px;position: relative;z-index: 1;display: block;}
.section-blog-detail figure::before {height: 100%;bottom: -15px;width: 89%;position: absolute;content: "";left: 50%;transform: translateX(-50%);background-color: var(--color-primary);z-index: -1;}
.section-blog-detail figure img {width: 100%;height: 100%;object-fit: cover;object-position: center center;}
.section-blog-detail h1,
.section-blog-detail h2,
.section-blog-detail h3,
.section-blog-detail h4,
.section-blog-detail h5,
.section-blog-detail h6 {text-align: left;margin: 32px 0 12px;font-style: normal;font-weight: 600;font-size: 16px;line-height: 24px;letter-spacing: 0px;color: var(--color-black);}
.section-blog-detail p {margin: 8px 0 ;text-align: left;font-size: 16px;line-height: 24px;font-weight: 400;letter-spacing: 0.15px;font-style: normal;color: var(--color-black) !important;}
.section-blog-detail ul {padding: 0;margin: 0;}
.section-blog-detail li {padding: 0px 0px 0px 32px;text-align: left;margin: 0;position: relative;list-style: none;font-size: 16px;line-height: 24px;font-weight: 400;letter-spacing: 0.15px;font-style: normal;color: var(--color-heading);}
.section-blog-detail li:not(:last-child) {margin-bottom: 8px;}
.section-blog-detail li::before {width: 6px;height: 6px;position: absolute;content: "";top: 50%;transform: translateY(-50%);left: 8px;background:var(--color-black);border-radius: 50%;}
.section-blog-detail a {font-size: 16px;line-height: 24px;color: var(--color-primary);font-weight: 600;transition: all ease-in-out 0.25s;}
.section-blog-detail a:hover{text-decoration: underline;}
.section-blog-detail .back-to-blog {margin: 28px 0 0;}
.section-blog-detail .button-primary {margin: 28px 0 0;}
.newsinner-social-icons{margin-top: 20px;}
/******* Blog Details CSS - end ******/

/* ===================================== media quiery  ===================================== */
@media screen and (max-width: 1199px) {
    .section-blog-listing .card .card-text {padding: 18px;}
    .section-blog-listing .card .card-text .blog-date {margin-bottom: 9px;}
    .section-blog-listing .card .card-text .heading-style-5 {margin-bottom: 5px;}
    .section-blog-listing .card .card-text p {margin-bottom: 20px;}
    /* details page */
    .banner-section h6.heading-style-6 {font-size: 30px;line-height: 44px;}
    
    .section-blog-listing{padding: 80px 0;}
}

@media screen and (max-width: 767px) {
    /* details page */
    .banner-section h6.heading-style-6 {font-size: 25px;line-height: 36px;}
    .section-blog-detail h1,
    .section-blog-detail h2,
    .section-blog-detail h3,
    .section-blog-detail h4,
    .section-blog-detail h5,
    .section-blog-detail h6 {margin: 24px 0 12px;font-size: 21px;line-height: 24px;}
    .section-blog-detail li {font-size: 17px;line-height: 25px;padding: 0px 0px 0px 28px;}
    .section-blog-detail p {font-size: 17px;line-height: 25px;}
    .section-blog-detail figure {height: 350px !important;}
    .section-blog-detail {padding: 60px 0}
    .section-blog-listing{padding: 40px 0;}
    
}

@media screen and (max-width: 575px) {

    /* details page */
    .banner-section h6.heading-style-6 {font-size: 20px;line-height: 32px;}
    .section-blog-detail li {font-size: 16px;line-height: 24px;}
    .section-blog-detail p {font-size: 16px;line-height: 24px;}
    .section-blog-detail {padding: 40px 0}
    .section-blog-listing{padding: 20px 0;}

}