/*
Theme Name: 	   NewsBlogy
Text Domain: 	   newsblogy
Template: 			newsmunch
Version:            1.0.2
Tested up to:       6.8
Requires at least:  4.7
Requires PHP:       7.0
Author:             DesertThemes
Author URI:         https://desertthemes.com/
Theme URI:          https://desertthemes.com/themes/newsblogy-free/
Description:        NewsBlogy is a fast, clean, Best Responsive News Magazine WordPress theme. NewsBlogy is suitable for dynamic news, newspapers, magazine, publishers, blogs, editors, online and gaming magazines, newsportals,personal blogs, newspaper, publishing or review siteand any creative website. With its modern and clean design, NewsBlogy offers a visually appealing layout that is easy to navigate, making it ideal for delivering content to your readers. This theme comes equipped with a range of customizable options, custom widgets, and color schemes, allowing you to tailor your website to your specific needs and branding. It also supports various post formats, making it easy to present a variety of content types, from articles and videos to images and galleries. NewsBlogy is optimized for speed and SEO, ensuring that your website loads quickly and ranks well in search engine results. Its responsive design ensures that your content looks great on all devices, whether it's a desktop computer, tablet, or smartphone. NewsBlogy demos https://preview.desertthemes.com/newsmunch/
Tags:               blog, e-commerce, entertainment, grid-layout, one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-logo, custom-menu, featured-images, featured-image-header, flexible-header, post-formats, rtl-language-support, translation-ready, theme-options, threaded-comments, footer-widgets
License: GPLv3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

:root {
    --dt-main-rgb: 27, 132, 21;
    --dt-black-color: #0a1233;
    --dt-title-family: "Josefin Sans", sans-serif;
    --dt-base-family: "Josefin Sans", sans-serif;
}

body {
    font-optical-sizing: auto;
}

.header--five .site--logo a:focus {
    outline: 1px dotted #fff;
    outline-offset: 3px;
}

.header--five .dt_navbar-nav .dt_home-icon a:focus {
    outline: 1px dotted;
    outline-offset: -4px;
}

.header--five .dt_navbar-wrapper.is--sticky.on .dt_navbar-inner {
    display: none;
}

.header--five .dt_navbar-menu .dt_navbar-subscribe-item .dt-subscribe,
.header--five .dt_navbar-menu .dt_navbar-login-item .dt-user-login,
.header--five .dt_navbar-menu .dt_navbar-cart-item .dt_navbar-cart-icon,
.header--five .dt_navbar-menu .dt_navbar-search-item button.dt_navbar-search-toggle {
    background: transparent;
    width: 2.4rem;
    height: 2.4rem;
    line-height: normal;
    padding: 0;
    box-shadow: none;
}

.header--five .dt_navbar-menu .dt_navbar-sidebar-item .dt_navbar-sidebar-toggle,
.header--five .dt_navbar-sidebar-toggle:hover .dt_navbar-sidebar-toggle-inner,
.header--five .dt_navbar-sidebar-toggle:focus .dt_navbar-sidebar-toggle-inner,
.header--five .dt_navbar-nav .dt_home-icon a,
.header--five .dt_navbar-nav .dt_navbar-mainmenu>.menu-item-has-children>a:after,
.header--five .dt_navbar-nav .dt_navbar-mainmenu>li>a,
.header--five .dt_navbar-nav .dt_navbar-mainmenu>li.active>a,
.header--five .dt_navbar-nav .dt_navbar-mainmenu>li.focus>a,
.header--five .dt_navbar-nav .dt_navbar-mainmenu>li:hover>a,
.header--five .dt_navbar-nav .dt_navbar-mainmenu>li:not(:hover, .focus, .active)>a {
    color: #fff;
}

.header--five .dt_navbar-nav .dt_home-icon a::before,
.menu_active-three .header--five .dt_navbar-nav .dt_navbar-mainmenu>li>a::before {
    top: -4px;
}

.menu_active-three .header--five .dt_navbar-nav .dt_navbar-mainmenu>li.active>a,
.menu_active-three .header--five .dt_navbar-nav .dt_navbar-mainmenu>li:hover>a,
.menu_active-three .header--five .dt_navbar-nav .dt_navbar-mainmenu>li.focus>a,
.header--five .dt_navbar-nav .dt_home-icon a {
    background-color: #fff;
    color: var(--dt-main-color);
}

.header--five.menu_active-one .dt_navbar-nav .dt_navbar-mainmenu>li>a::before {
    background-color: #fff;
}

@media (min-width: 62em) {
    .header--five sup.menu-badge {
        top: -1px;
    }
}

.header--five .dt_navbar-menus {
    background-color: var(--dt-main-color);
}

.header--five .dt_navbar-wrapper .dt_navbar-menu {
    justify-content: space-between;
}

.header--five .dt_navbar-wrapper .dt_navbar-inner .dt-row.dt-py-5{
    padding: 4.5rem 0;
}


.header--five .dt_navbar-wrapper .dt_navbar-inner .dt-row .dt-col-md:first-child .dt_navbar-right > ul {
    padding-left: 0;
    padding-right: 1.2rem;
    justify-content: start;
}

.header--five .dt_navbar-wrapper .dt_navbar-inner .site--logo {
    text-align: center;
}

.header--five.menu_active-two .dt_navbar-nav .dt_navbar-mainmenu>li>a::before {
    background: #fff;
}

.menu_active-three:not(.header--five) .dt_navbar-menus {
    padding: 0;
    border-bottom: 4px solid var(--dt-main-color);
}

.header--five.menu_active-default .dt_navbar-nav .dt_home-icon a,
.header--five.menu_active-one .dt_navbar-nav .dt_home-icon a,
.header--five.menu_active-two .dt_navbar-nav .dt_home-icon a,
.header--five.menu_active-three .dt_navbar-nav .dt_navbar-mainmenu>li.active>a,
.header--five.menu_active-three .dt_navbar-nav .dt_navbar-mainmenu>li:hover>a,
.header--five.menu_active-three .dt_navbar-nav .dt_navbar-mainmenu>li.focus>a,
.header--five.menu_active-three .dt_navbar-nav .dt_home-icon a {
    background-color: rgba(0, 0, 0, .1);
}
.dt-posts.dt-g-4 .dt-col-md-12 .post.post-list {
    padding: 20px 0 20px 20px;
}

@media only screen and (max-width: 767px) {
    .dt-posts.dt-g-4 .dt-col-md-12 .post.post-list {
        padding: 0;
    }
}

.dt-current-date span i {
    color: #fff;
}

.dt_sidebar .wp-block-image.is-style-rounded img {
    padding: 2px;
    box-shadow: 0 2px 8px 1px rgba(36, 36, 36, 0.3);
}

/* Animations */

.background-wrapper .squares,
.background-wrapper .circles,
.background-wrapper .triangles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.background-wrapper .squares .square,
.background-wrapper .circles .circle,
.background-wrapper .triangles .triangle {
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0.1;
    animation: animate 8s linear infinite;
    background: #4021891c;
    bottom: -100px;
}

.background-wrapper .triangles .triangle {
    border-bottom-color: #2eb5982e;
    border-left-color: transparent;
    border-right-color: transparent;
    background: transparent;
}

.background-wrapper .circles .circle {
    border-radius: 100px;
}

.background-wrapper .triangles .triangle {
    width: 0;
    height: 0;
    border-bottom-width: 42px;
    border-bottom-style: solid;
    border-left-width: 25px;
    border-left-style: solid;
    border-right-width: 25px;
    border-right-style: solid;
    border-radius: 0;
}

.background-wrapper .squares .square:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.background-wrapper .circles .circle:nth-child(1) {
    left: 10%;
    width: 22px;
    height: 20px;
    animation-delay: 0s;
}

.background-wrapper .triangles .triangle:nth-child(1) {
    left: 45%;
    border-right-width: 10px;
    border-left-width: 10px;
    border-bottom-width: 22px;
    animation-delay: 0s;
}

.background-wrapper .squares .square:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.background-wrapper .circles .circle:nth-child(2) {
    left: 45%;
    width: 84px;
    height: 80px;
    animation-delay: 12s;
}

.background-wrapper .triangles .triangle:nth-child(2) {
    left: 25%;
    border-right-width: 15px;
    border-left-width: 15px;
    border-bottom-width: 28px;
    animation-delay: 12s;
}

.background-wrapper .squares .square:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.background-wrapper .circles .circle:nth-child(3) {
    left: 90%;
    width: 53px;
    height: 50px;
    animation-delay: 4s;
}

.background-wrapper .triangles .triangle:nth-child(3) {
    left: 80%;
    border-right-width: 15px;
    border-left-width: 15px;
    border-bottom-width: 28px;
    animation-delay: 4s;
}

.background-wrapper .squares .square:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.background-wrapper .circles .circle:nth-child(4) {
    left: 60%;
    width: 53px;
    height: 50px;
    animation-delay: 18s;
}

.background-wrapper .triangles .triangle:nth-child(4) {
    left: 30%;
    border-right-width: 20px;
    border-left-width: 20px;
    border-bottom-width: 38px;
    animation-delay: 18s;
}

.background-wrapper .squares .square:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.background-wrapper .circles .circle:nth-child(5) {
    left: 90%;
    width: 43px;
    height: 40px;
    animation-delay: 1s;
}

.background-wrapper .triangles .triangle:nth-child(5) {
    left: 70%;
    border-right-width: 25px;
    border-left-width: 25px;
    border-bottom-width: 42px;
    animation-delay: 1s;
}

.background-wrapper .squares .square:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.background-wrapper .squares .square:nth-child(7) {
    left: 35%;
    width: 100px;
    height: 100px;
    animation-delay: 7s;
}

.background-wrapper .squares .square:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.background-wrapper .squares .square:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.background-wrapper .squares .square:nth-child(10) {
    left: 85%;
    width: 100px;
    height: 100px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:hover, 
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:focus {
    color: #fff;
}

.wp-block-page-list {
    list-style: none;
    padding: 0;
}

.wc-block-grid__products .wc-block-components-product-button__button {
    border-radius: 0;
    text-decoration: none;
}

.wp-block-page-list a {
    color: var(--dt-secondary-color);
    text-decoration: none;
    font-weight: 600;
}

.wc-block-components-product-title a.wc-block-components-product-name:hover, 
.wc-block-components-product-title a.wc-block-components-product-name:focus {
    color: var(--dt-main-color);
}

body.overlay--enabled {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

/* Dark Mode for Mobile Only */
/* GLOBAL DARK MODE */
html.dark-mode,
html.dark-mode body {
  background-color: #121212 !important;
  color: #ffffff !important;
}

/* Ensure text inside common elements is white in dark mode */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode p,
html.dark-mode li,
html.dark-mode span,
html.dark-mode a {
  color: #f0f0f0 !important;
}

/* Cards / post boxes / containers */
html.dark-mode .post,
html.dark-mode .dt-posts,
html.dark-mode .widget,
html.dark-mode .dt-container-md,
html.dark-mode .dt_row,
html.dark-mode .dt-col-md,
html.dark-mode .site,
html.dark-mode .dt_footer {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

/* Menu & Sidebar backgrounds */
html.dark-mode .dt_mobilenav-mainmenu-inner,
html.dark-mode .dt_sidebar,
html.dark-mode .dt_mobilenav,
html.dark-mode .dt_mobilenav-main {
  background-color: #1b1b1b !important;
}

/* Buttons, Search Box, Inputs */
html.dark-mode input[type="text"],
html.dark-mode input[type="search"],
html.dark-mode textarea,
html.dark-mode select {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #555 !important;
}

/* Override links if needed */
html.dark-mode a {
  color: #ffffff !important;
}

html.dark-mode a:hover {
  color: #006400 !important;
}

/* Footer social icons color override */
html.dark-mode .footer-social-icons i {
  color: #000000 !important;
}


/* When dark mode is active */
.dark-mode {
  background-color: #111 !important;
  color: #fff !important;
}



/* Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  transition: .4s;
  cursor: pointer;
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px; width: 20px;
  left: 2px; bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: .4s;
}
input:checked + .slider {
  background-color: #006400;
}
input:checked + .slider:before {
  transform: translateX(26px);
}


/* Icons inside toggle */
.slider i {
  position: absolute;
  top: 4px;
  font-size: 14px;
  color: black;
}
.slider .moon-icon {
  left: 6px;
}
.slider .sun-icon {
  right: 6px;
  display: none;
}
input:checked + .slider .moon-icon {
  display: none;
}
input:checked + .slider .sun-icon {
  display: block;
}




/* Make both logos same size */
.site-logo {
  max-height: 60px;
  height: auto;
  transition: opacity 0.3s ease;
}

.logo-dark {
  display: none;
}
.logo-light {
  display: inline-block;
}

html.dark-mode .logo-light {
  display: none !important;
}
html.dark-mode .logo-dark {
  display: inline-block !important;
}

/* By default, show light logo */
.logo-wrapper .dark-logo {
  display: none;
}

/* In dark mode, switch to dark logo */
html.dark-mode .logo-wrapper .light-logo {
  display: none;
}
html.dark-mode .logo-wrapper .dark-logo {
  display: inline;
}

/* Common styles */
.site-logo {
  max-height: 60px;
  height: auto;
}


html.dark-mode .logo-light-mode,
html.dark-mode .icon-light {
  display: none !important;
}

html.dark-mode .logo-dark-mode,
html.dark-mode .icon-dark {
  display: inline-block !important;
}

.logo-dark-mode,
.icon-dark {
  display: none;
}

/* 1) turn the whole drawer into a vertical flex column */
.dt_mobilenav-mainmenu-inner{
    display:flex;          /* lays children in a column */
    flex-direction:column; /* top → bottom order         */
    height:100%;           /* let it occupy full drawer  */
}

/* 2) push the custom block to the very end */
.dt_mobilenav-mainmenu-inner .mobile-menu-logo-social{
    margin-top:auto;       /* eats up remaining space    */
    margin-bottom:20px;    /* nice breathing room        */
}









/* ✅ Apply only for mobile view */
@media only screen and (max-width: 768px) {
  .dt_mobilenav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
  }

  .dt_mobilenav-dropdown-toggle button {
    background: none;
    border: none;
    font-size: 14px;
    color: #333;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }

  /* Dark mode arrow color fix */
  html.dark-mode .dt_mobilenav-dropdown-toggle button {
    color: #fff;
  }

  .menu-item-has-children.open > .dt_mobilenav-dropdown-toggle button::before {
    content: "\f107"; /* fa-angle-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }

  .menu-item-has-children:not(.open) > .dt_mobilenav-dropdown-toggle button::before {
    content: "\f105"; /* fa-angle-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }
}



/*this is for next post*/
html.dark-mode .nextprev-post .post-title {
  color: #000000 !important; /* black text */
}

html.dark-mode .nextprev-post {
  background-color: #ffffff !important; /* white background */
}


/* Fix for blockquote background in dark mode on mobile */
body[class*="wp-theme-"] blockquote.wp-block-quote {
  background-color: #ffffff !important;
  color: #111 !important;
  border-left: 5px solid #3cb371; /* optional green accent */
  padding: 1em;
  border-radius: 10px;
}

/* Text inside quote */
body[class*="wp-theme-"] blockquote.wp-block-quote em,
body[class*="wp-theme-"] blockquote.wp-block-quote strong {
 /* color: #006400 !important; */
}


@media only screen and (max-width: 768px) {
  body[class*="wp-theme-"] blockquote.wp-block-quote {
    background-color: #ffffff !important;
    color: #000 !important;
  }
}

/* ✅ Remove all unwanted backgrounds in tag section */
.categories,
.categories .widget,
.categories .wp-block-tag-cloud,
html.dark-mode .categories,
html.dark-mode .categories .widget,
html.dark-mode .categories .wp-block-tag-cloud {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ✅ Fix text color for dark mode */
html.dark-mode .categories .wp-block-tag-cloud a {
  color: #000000 !important;
}

/* ✅ Fix text color for light mode */
html:not(.dark-mode) .categories .wp-block-tag-cloud a {
  color: #000 !important;
}

/* ✅ Smooth toggle */
.categories .wp-block-tag-cloud a {
  transition: color 0.3s ease, background-color 0.3s ease;
}


/* ✅ Light mode: h5 should be black */
html:not(.dark-mode) .categories h5 {
  color: #000 !important;
}

/* ✅ Dark mode: h5 should be white */
html.dark-mode .categories h5 {
  color: #000000 !important;
}

/* ✅ Smooth transition if needed */
.categories h5 {
  transition: color 0.3s ease;
}








@media only screen and (max-width: 768px) {
  .dt_mobilenav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
  }

  .dt_mobilenav-dropdown-toggle button {
    background: none;
    border: none;
    font-size: 14px;
    color: #333; /* Light mode default */
    padding: 0;
    margin: 0;
    cursor: pointer;
  }

  /* ✅ Dark mode override for icon color */
  html.dark-mode .dt_mobilenav-dropdown-toggle button {
    color: #fff !important; /* Arrow turns white in dark mode */
  }

  .menu-item-has-children.open > .dt_mobilenav-dropdown-toggle button::before {
    content: "\f107"; /* fa-angle-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }

  .menu-item-has-children:not(.open) > .dt_mobilenav-dropdown-toggle button::before {
    content: "\f105"; /* fa-angle-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }
}



.global-tagline {
  text-align: center;
  font-size: 9px;
  font-weight: 1000;
  margin-top: 5px;
  font-family: 'Poppins', sans-serif;
}

/* Light Mode Text */
body:not(.dark-mode) .global-tagline {
  color: #111;
}

/* Dark Mode Text */
body.dark-mode .global-tagline {
  color: #fff;
}

/* Responsive Control */
.desktop-tagline {
  display: none;
}

.mobile-tagline {
  display: block;
}

/* Show desktop tagline on larger screens */
@media screen and (min-width: 992px) {
  .desktop-tagline {
    display: block;
  }
  .mobile-tagline {
    display: none;
  }
}




/* ✅ Custom Dark Mode Color for Home Icon */
html.dark-mode .dt_home-icon i.fas.fa-home {
  color: #007a27 !important; /* Replace with your dark green shade */
}
html.dark-mode .dt_home-icon i.fas.fa-home:hover {
  color: #007a27 !important;
}


/* ------------------------------------------------------------------------------------------------------------------------------------*/
/* ✅ STYLE FOR HOT NEWS AND TODAY POST 
.custom-card.hotnews-card,
.custom-card.todaypost-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s ease;
}

.custom-card .thumb img {
  width: 100%;
  height: auto;
  border-radius: 12px 12px 0 0;
  object-fit: cover;
}

.custom-card .details {
  padding: 16px;
  color: #000;
}

.custom-card.hotnews-card .details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: 16px;
}

.custom-card.hotnews-card .details .post-title {
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 700;
  line-height: 1.6;
  color: #000;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-card.hotnews-card .meta {
  font-size: 10px;
  color: #555;
  margin-top: auto;
}


.custom-card .meta {
  font-size: 10px;
  color: #555;
}

/* ✅ Fix slick track height 
.post-carousel-banner .slick-track {
  display: flex !important;
}
.post-carousel-banner .custom-card.hotnews-card {
  flex: 1 1 auto;
  height: auto;
}

/* Fix unwanted top margin/padding from first hot news card 
.post-carousel-banner .slick-slide > div {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure all hot news cards align properly 
.post-carousel-banner .post {
  margin: 4px !important;
  padding: 0 !important;
}*/









.custom-card.hotnews-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin: 10px;
  height: 100%; /* Make all cards stretch */
}

.custom-card.hotnews-card .thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  display: block;
}

.custom-card.hotnews-card .details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.custom-card.hotnews-card .details .post-title {
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 700;
  color: #000;
  line-height: 1.4;
  margin: 0;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-card.hotnews-card .meta {
  font-size: 10px;
  color: #777;
  margin-top: auto;
  padding-top: 6px;
}
.custom-card.hotnews-card .details .post-title {
  margin-top: 10px;
}
.post-carousel-banner .slick-track {
  display: flex !important;
  align-items: stretch; /* 🆕 force equal height */
}

.post-carousel-banner .slick-slide {
  height: auto !important;
  display: flex !important;
}

.post-carousel-banner .custom-card.hotnews-card {
  flex: 1 1 auto;
  height: 100%;
}

.custom-card.hotnews-card {
  height: auto;
  min-height: 340px;
  max-height: 360px; /* Adjust as per your layout */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.post-carousel-banner .slick-track {
  display: flex !important;
  align-items: stretch; /* Force equal height */
}
.post-carousel-banner .post {
  display: flex;
  flex-direction: column;
  height: 100%;
}


.post-carousel-banner .slick-slide > div {
  display: flex;
  height: auto;
}
.custom-card.hotnews-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  min-height: 340px;
  max-height: 360px;
}


.custom-card .details .post-title {
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 700;
  line-height: 1.4;
  color: #111;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  min-height: calc(1.4em * 2); /* ensures 2-line space */
}


/* Fix layout stretch */
.custom-card.hotnews-card .details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  padding: 12px 16px;
}

/* Ensure image is consistent */
.custom-card.hotnews-card .thumb img {
  width: 100%;
  height: auto;
  border-radius: 12px 12px 0 0;
  object-fit: cover;
}

.post-carousel-banner .custom-card.hotnews-card {
  height: 100%;
}


























/* ------------------------------------------------------------------------------------------------------------------------------------*/
/*.todaypost-card {
    height: 240px !important;  
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.todaypost-card .thumb img {
    height: 140px !important;  
    object-fit: cover;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.todaypost-card h6.post-title {
  font-size: 14px !important;
  line-height: 1.4;
  font-weight: 600;
  color: #111; 
}
*/


.todaypost-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  overflow: hidden;
  background-color: #fff;
}

.todaypost-card .thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.todaypost-card h6.post-title {
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.4;
  font-weight: 600;
  color: #111;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.todaypost-card .details {
  padding: 10px;
}

.todaypost-card .meta {
  font-size: 10px;
  color: #555;
}


/* DARK MODE SIDEBAR STYLING */
.dark-mode .dt_sidebar-content,
.dark-mode .dt_sidebar-wrapper {
    background-color: #000 !important;
    color: #fff;
}

/* Change title headings inside the sidebar */
.dark-mode .dt_sidebar-content h2,
.dark-mode .dt_sidebar-content h3,
.dark-mode .dt_sidebar-content p {
    color: #fff !important;
}

/* Fix green line under headings */
.dark-mode .dt_sidebar-content .widget-title::after {
    background-color: #00c853 !important; /* or your brand green */
}

/* Social icons container */
.dark-mode .dt_sidebar-content .widget.widget_social {
    background-color: #000 !important;
}

/* Change to dark-mode logo inside sidebar */
.dark-mode .dt_sidebar-content .logo-light-mode {
    display: none !important;
}

.dark-mode .dt_sidebar-content .logo-dark-mode {
    display: block !important;
}
/* Force dark inner container background to black */
.dark-mode .dt_sidebar-wrapper,
.dark-mode .dt_sidebar-content,
.dark-mode .wp-block-group,
.dark-mode .wp-block-group__inner-container,
.dark-mode .is-layout-constrained {
    background-color: #000 !important;
    color: #fff !important;
}

html.dark-mode .some-class {
  background-color: black;
  color: white;
}
/* Dropdown background turns black in dark mode */
html.dark-mode .dropdown-menu {
    background-color: #121418 !important;
}



/* Fix white header section in dark mode */
html.dark-mode section.page-header {
    background-color: #1A1A1A !important; /* match dark layout */
    color: #fff !important; /* ensure text stays visible */
}

/* Fix breadcrumb separator slash color in dark mode */
html.dark-mode li.breadcrumb-item::before {
  color: #ffffff !important;
}


.simple-share-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
}

.simple-share-toggle {
	background: #007bff;
	color: white;
	border: none;
	padding: 6px 14px;
	border-radius: 30px;
	cursor: pointer;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: background 0.3s ease;
}

.simple-share-toggle:hover {
	background: #0056b3;
}

.simple-share-icons {
	display: flex;
	gap: 12px;
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left;
	transition: all 0.3s ease;
	pointer-events: none;
}

.simple-share-icons.show {
	opacity: 1;
	transform: scaleX(1);
	pointer-events: auto;
}

.simple-share-icons li a {
	color: white;
	font-size: 18px;
	transition: color 0.2s ease;
}

.simple-share-icons li a:hover {
	color: #1da1f2; /* Twitter blue or override with your own */
}
 {
	display: none !important;
}
.simple-share-wrapper *:focus {
	outline: none !important;
	box-shadow: none !important;
}



/* Remove any outline or glow from icon wrappers */
.simple-share-icons li a,
.simple-share-toggle {
	outline: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent !important;
	-webkit-focus-ring-color: transparent !important;
}

/* Remove focus ring from Font Awesome SVGs */
.simple-share-icons li a svg,
.simple-share-toggle svg {
	outline: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent !important;
	-webkit-focus-ring-color: transparent !important;
}

/* Remove dot or ring on active/focused icon */
.simple-share-icons li a:focus svg,
.simple-share-icons li a:active svg,
.simple-share-toggle:focus svg {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
}

/* Remove margin/padding or pseudo circles */
.simple-share-icons li,
.simple-share-icons li a,
.simple-share-icons li a * {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
	border: none !important;
}




.simple-share-icons li::before,
.simple-share-icons li a::before {
	content: none !important;
	display: none !important;
	background: none !important;
}
.simple-share-icons li a,
.simple-share-icons li {
	border: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	background: none !important;
	position: relative;
}

/* REMOVE pseudo-elements like underlines or arrows */
.simple-share-icons li::after,
.simple-share-icons li::before,
.simple-share-icons li a::after,
.simple-share-icons li a::before {
	content: none !important;
	display: none !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	height: 0 !important;
}
/* Default (light mode) = black icons */
.simple-share-icons li a {
	color: #000 !important;
}

/* In dark mode = white icons */
html.dark-mode .simple-share-icons li a {
	color: #fff !important;
}
.simple-share-wrapper {
  margin-right: 12px; /* Adjust the value as needed */
}






/* White shadow for cards in dark mode */
html.dark-mode .custom-card,
html.dark-mode .dt-post-entry,
html.dark-mode .dt-post-slider,
html.dark-mode .dt-post {
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1) !important;
}








/* === LATEST POSTS - Outer Card === */
.post-list.bg-white.shadow {
  display: flex;
  flex-direction: row;
  border-radius: 12px;
  overflow: hidden;
  align-items: stretch;
  height: auto;
}

/* === LEFT Side (Image Block) === */
.post-list.bg-white.shadow .col-sm-6:first-child {
  flex: 1;
  display: flex;
  align-items: center;           /* ✅ vertical centering */
  justify-content: center;       /* ✅ horizontal centering */
  padding: 10px;
  box-sizing: border-box;
}

/* === Image Style – Full Visibility & Centered === */
.post-list.bg-white.shadow .col-sm-6:first-child img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 12px 0 0 12px;
  margin-top: 10px; /* ✅ adjust this to shift image down */
}

/* === RIGHT Side (Text Block) === */
.post-list.bg-white.shadow .col-sm-6:last-child {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* === Clean Up Containers That Might Interfere === */
.dt-post-thumbnail,
.thumb,
.post-img {
  height: auto !important;
  overflow: visible !important;
  display: block;
}

.dt-post-thumbnail img,
.thumb img,
.post-img img {
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

/* === FORCE ROUND IMAGES IN STARTUP STORY CAROUSEL === */
.dt-widget-post-list-sm.circle img,
.post-list-sm.circle img {
  border-radius: 50% !important;
  width: 85px !important;
  height: 85px !important;
  object-fit: cover !important;
  display: block;
}















@media (max-width: 768px) {
  /* Hide dot separators between meta items */
  .post-header .meta.list-inline .list-inline-item::after {
    display: none !important;
  }

  /* Optional: Adjust spacing if needed after removing the dots */
  .post-header .meta.list-inline .list-inline-item {
    margin-right: 8px; /* or any spacing you want */
  }
}