/*
Theme Name: graceful pixel blog (never update)
Theme URI: https://optimathemes.com/graceful-pixel-blog-theme/
Author: Ajeet
Description: Important: Never Update This Theme, update will change site layout & style |  graceful pixel blog theme is a clean, modern, and elegant free WordPress theme crafted for bloggers, creators, and content-focused websites. Perfect for niches like fashion, lifestyle, travel, tech, health, beauty, and online magazines, it features a visually appealing layout with a highlighted featured post section, organized content blocks, and a stylish sidebar for better content discovery. Designed with simplicity and readability in mind, graceful pixel blog theme offers a fully responsive and Retina-ready layout, ensuring your website looks stunning on all devices. The intuitive navigation, minimal typography, and balanced spacing create a smooth and engaging user experience. The theme is lightweight, SEO-optimized, and easy to customize, making it suitable for both beginners and experienced users. It also supports WooCommerce integration for creating an online store and includes RTL support for broader accessibility. Whether you're building a personal blog or a professional content platform, graceful pixel blog theme provides a polished, performance-focused foundation to showcase your content beautifully.
Template: graceful
Version: 1.0.2
Requires at least: 5.3
Tested up to: 6.9
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: graceful-pixel-blog
Tags: blog, one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, footer-widgets, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, e-commerce
*/

/*
Customization of this theme starts here
*/

/* style.css */

/*--------------------------------------------------------------
Header Sections
--------------------------------------------------------------*/
:root {
   --orange: #fa4612;
}
body {
   background-color: #ffffff;
}

a:hover {
   text-decoration: none;
}

#site-menu {
   text-align: left;
}

.entry-header {
   height: 150px;
   border-bottom: none;
}

.blog .post-title {
   font-size: 28px;
   line-height: 38px;
}

.blog article .post-meta {
   margin-bottom: 10px;
}

.blog .post-page-content {
   padding-top: 10px;
}
.post-page-content {
   text-align: left;
}

.post-page-content h2 {
    font-size: 2rem;
}

#main-navigation {
   background-color: #fff;
   text-align: center;
}

.site-menu-wrapper {
   margin: 0 auto;
}

#top-navigation {
   background-color: #e8400c;
   color: #ffffff;
   border-bottom: 1px solid #dddddd;
}

aside .graceful-widget h2,
.graceful-widget .widget-title {
   background: transparent;
   border: none;
   font-weight: 700;
   font-size: 1.25rem;
   color: #111111;
   text-align: left;
   text-transform: none;
   letter-spacing: 0;
   padding: 0 0 12px;
   margin-bottom: 16px;
   position: relative;
   display: block;
   overflow: visible;
   width: 100%;
}

aside .graceful-widget h2::after,
.graceful-widget .widget-title::after {
   content: "";
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: linear-gradient(to right, #e8400c 50px, #e8e8e8 50px);
   border: none;
}

aside .graceful-widget h2::after {
   border-top: none;
}

#graceful-post-slider .owl-stage-outer:after {
   background-color: #f2f2f2;
}

#graceful-post-slider .owl-nav {
   background-color: #f2f2f2;
}

.post-title {
   word-wrap: break-word;
}

.graceful-slider-title {
   width: 460px;
   word-wrap: break-word;
}

@media screen and (max-width: 480px) {
   .graceful-slider-title {
      width: 300px;
   }
}

.site-images {
   min-height: 245px;
   background: #f2f2f2;
}

#site-footer {
   position: relative;
   background: #03125f;
   color: #d7d7d7;
}

#site-footer .graceful-widget .widget-title {
   font-family: var(--popp);
   border: none;
   font-weight: 500;
   background: transparent;
   color: #fff;
   font-size: 1.5rem;
   letter-spacing: 0;
   line-height: 1.4;
   margin-bottom: 16px; 
   overflow: visible;
   padding: 0 0 0;
   position: relative;
   text-align: left;
   text-transform: none;
   display: block;
   width: 100%;
}

#site-footer .graceful-widget .widget-title::after {
   content: none;
   display: none;
}

#site-footer a {
   color: #fff;
}

#site-footer a:hover {
    color: var(--orange);
}

.footer-widgets {
   border-bottom: 1px solid #a19376;
}
.footer-widgets > .graceful-widget :is(p, li, a) {
   font-size: 13px;
   text-decoration: none !important;
}
.footer-widgets > .graceful-widget li.menu-item {
   position: relative;
   line-height: 25px;
   margin-bottom: 11px;
}
.footer-widgets > .graceful-widget li.menu-item::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 30px;
   height: 1px;
   background-color: var(--orange);
   transition: all 0.5s;
}
.footer-widgets > .graceful-widget li.menu-item:hover:after {
   width: 100%;
}
.footer-widgets > .graceful-widget .social-link {
   gap: 0.5rem;
}
.footer-widgets > .graceful-widget .social-link li {
   position: relative;
   padding-right: 3px;
   display: inline-block;
   border: none;
   margin-top: 18px;
   line-height: 0;
}
.footer-widgets > .graceful-widget .social-link li i {
   width: 30px;
   height: 30px;
   line-height: 30px;
   background-color: #0f9ddc;
   border-radius: 4px;
   text-align: center;
   color: #ffffff;
   transition: all 0.5s;
}
.footer-widgets > .graceful-widget .social-link li i:hover {
   color: var(--orange);
}

.single .post-date {
   color: #111111 !important;
   font-family: "Lato", sans-serif;
   font-size: 13px;
}

.single .post-title-author {
   color: #111111 !important;
   display: inline-block;
   font-family: "Lato", sans-serif;
   font-size: 13px;
   font-weight: normal;
}

@media screen and (max-width: 480px) {
   .content-column > li {
      width: 100%;
   }
}

/*--------------------------------------------------------------
Trending Ticker Bar
--------------------------------------------------------------*/

#trending-ticker-bar {
   width: 100%;
   background: #ffffff;
   border-bottom: 1px solid #e8e8e8;
   overflow: hidden;
   z-index: 1100;
   position: relative;
}

.trending-ticker-inner {
   display: flex;
   align-items: center;
   height: 44px;
   max-width: 100%;
}

/* Label badge */
.trending-ticker-label {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   gap: 6px;
   background: #e8400c;
   color: #ffffff;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   padding: 0 16px;
   height: 100%;
   white-space: nowrap;
   z-index: 2;
}

.trending-ticker-icon {
   font-size: 13px;
   line-height: 1;
}

/* Scrolling track wrapper — clips overflow */
.trending-ticker-track-wrap {
   flex: 1;
   overflow: hidden;
   position: relative;
   height: 100%;
   /* Fade edges */
   -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
   mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

/* The moving track */
.trending-ticker-track {
   display: flex;
   align-items: center;
   height: 100%;
   white-space: nowrap;
   animation: ticker-scroll 15s linear infinite;
   will-change: transform;
}

.trending-ticker-track:hover {
   animation-play-state: paused;
}

@keyframes ticker-scroll {
   0% {
      transform: translateX(0);
   }
   100% {
      transform: translateX(-50%);
   }
}

/* Individual post item */
.trending-ticker-item {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 0 30px 0 0;
   text-decoration: none;
   color: inherit;
   flex-shrink: 0;
}

.trending-ticker-item:hover .trending-ticker-title {
   color: #e8400c;
}

/* Thumbnail */
.trending-ticker-thumb {
   width: 30px !important;
   height: 30px !important;
   border-radius: 50%;
   object-fit: cover;
   flex-shrink: 0;
   border: 2px solid #e8e8e8;
}

.trending-ticker-no-thumb {
   display: inline-block;
   background-color: #e0e0e0;
}

/* Date */
.trending-ticker-date {
   font-size: 12px;
   color: #999999;
   white-space: nowrap;
   flex-shrink: 0;
}

/* Title */
.trending-ticker-title {
   font-size: 13px;
   font-weight: 600;
   color: #222222;
   white-space: nowrap;
   transition: color 0.2s ease;
}

/* Separator dot between items */
.trending-ticker-item::after {
   content: "";
   display: inline-block;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: #dddddd;
   margin-left: 25px;
   flex-shrink: 0;
}

.trending-ticker-item:last-child::after {
   display: none;
}

@media (max-width: 480px) {
   .trending-ticker-label {
      padding: 0 12px;
      font-size: 10px;
   }
   .trending-ticker-title {
      font-size: 12px;
   }
   .trending-ticker-date {
      display: none;
   }
}

/*--------------------------------------------------------------
Top Navigation
--------------------------------------------------------------*/

#top-navigation {
   text-align: center;
   box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid #e4e4e4;
}

#top-menu {
   display: inline-block;
}

#top-menu li {
   position: relative;
}

#top-menu li.menu-item-has-children > a:after {
   font-family: FontAwesome;
   content: "\f107";
   margin-left: 6px;
   font-size: 12px;
}

#top-menu ul li.menu-item-has-children > a:after {
   font-family: FontAwesome;
   content: "\f105";
   font-size: 14px;
   float: right;
}

#top-menu > li {
   display: inline-block;
   list-style: none;
}

#top-menu li a {
   display: block;
   position: relative;
   padding: 0 5px;
   margin-left: 5px;
   color: #ffffff;
}

#top-menu a:focus {
   outline: 3px dotted #000000 !important;
}

#top-menu li a:first-child {
   margin-left: 0;
}

#top-menu > li > a {
   display: block;
   text-decoration: none;
}

#top-menu > li:first-child > a {
   padding-left: 0px;
}

#top-menu > li:last-child > a {
   padding-right: 0px;
}

#top-menu ul ul {
   top: -1px;
   left: 100%;
}

#top-menu .sub-menu {
   position: absolute;
   left: -999em;
   z-index: 1101;
   width: 170px;
   text-align: left;
   border: 1px solid #e4e4e4;
   border-width: 1px;
   opacity: 0;
}

#top-menu .menu-item:hover > ul,
#top-menu .menu-item:focus-within > ul {
   left: 0;
   opacity: 1;
}

#top-menu .menu-item:hover ul ul,
#top-menu .menu-item:focus-within ul ul {
   left: 100%;
}

#top-menu .sub-menu a {
   border-bottom-style: solid;
   border-bottom-width: 1px;
}

#top-menu .sub-menu > li:last-of-type > a {
   border: none;
}

#top-menu .sub-menu li:first-child > .sub-menu {
   margin-top: -1px;
}

#top-menu .sub-menu > li > a {
   display: block;
   width: 100%;
   padding: 8px 15px;
   margin: 0;
}

#top-menu li a {
   font-size: 11px;
   line-height: 40px;
   letter-spacing: 1px;
   font-weight: 600;
   text-transform: uppercase;
}
#top-menu .sub-menu > li > a {
   font-size: 11px;
   line-height: 24px;
   letter-spacing: 0.5px;
}

#top-menu li a {
   font-size: 11px;
   line-height: 40px;
   letter-spacing: 1px;
   font-weight: 600;
}
#top-menu .sub-menu > li > a {
   font-size: 11px;
   line-height: 22px;
   letter-spacing: 0.5px;
}

#top-menu li a,
#main-menu li a {
   text-transform: uppercase;
}

#top-navigation > div {
   padding-left: 30px;
   padding-right: 30px;
}

.post-categories {
   background: #f2f2f2;
   border: 1px solid #dfd6c5;
}

.graceful-small-image-box {
   background-color: #f2f2f2;
   border-radius: 10px;
}

.wp-block-search__button {
   background: #e8400c;
   border: 1px solid #dddddd;
}

#main-navigation #searchform #s {
   border: 1px solid #bdb29b;
}

#main-navigation #searchform #searchsubmit,
.close-graceful-search {
   background: #f2f2f2;
   border: 1px solid #dddddd;
}

#graceful-post-slider {
   padding-bottom: 40px;
   margin-top: 40px;
}

.widget_categories > ul > li {
   border-bottom: 1px solid #f2f2f2;
}

aside .wp-block-latest-posts.wp-block-latest-posts__list li {
   border-bottom: 1px solid #f2f2f2;
}

.wp-block-search__label {
   display: none;
}

/*--------------------------------------------------------------
Featured Boxes Sections
--------------------------------------------------------------*/

#featured-boxes {
   border-bottom: 1px solid #eee;
   background: #fff;
   margin-top: 40px;
}

#featured-boxes .wrapped-content {
   font-size: 0;
   text-align: center;
}

#featured-boxes .featured-box {
   position: relative;
   float: left;
}

#featured-boxes .featured-box img {
   border-radius: 14px;
}

#featured-boxes a {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

#featured-boxes .graceful-wrap-outer {
   padding: 12px;
}

#featured-boxes h4 {
   display: inline-block;
   padding: 11px 20px;
   font-family: "Lato", sans-serif;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   background-color: rgba(0, 0, 0, 0.5);
   color: #ffffff !important;
}

#featured-boxes .featured-box {
   width: calc((100% - 50px) / 3);
   width: -webkit-calc((100% - 70px) /3);
   margin-right: 34px;
}

#featured-boxes .featured-box:last-child {
   margin-right: 0;
}

@media screen and (max-width: 768px) {
   .featured-box {
      display: block;
   }
   .main-navigation-search {
      right: 20px;
      top: 14px !important;
   }
    .single .post-page-content {
        padding: 20px 0px;
    }
}

@media screen and (max-width: 480px) {
   #featured-boxes .featured-box {
      width: 100%;
      margin-bottom: 34px;
   }

   #featured-boxes {
      padding: 20px !important;
   }
}

/* Media Query Min 768px
   ========================================================================== */
@media screen and (min-width: 768px) {
   .blog .post-page-content p {
      padding: 0 24px;
   }
   #main-navigation .wrapped-content {  
      padding-left: 0;
   }
   .main-navigation-search {
      right: 0;
   }
   #main-navigation .navigation-socials {
      right: 35px;
   }
}

/*--------------------------------------------------------------
Posts Ticker
--------------------------------------------------------------*/

.graceful-latest {
   margin-bottom: 40px;
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
}

/* Wrapper — gives padding so the card has breathing room */
.graceful-latest-posts-ticker {
   background: transparent;
   padding: 0;
   position: relative;
}

.graceful-latest-posts-ticker .item {
   padding: 10px;
}

/* Hero card — full-bleed background image */
.lpt-card {
   position: relative;
   width: 100%;
   height: 460px;
   border-radius: 14px;
   overflow: hidden;
   background-color: #1a1a2e;
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
}

/* Dark gradient overlay — strong at bottom, fades to transparent at top */
.lpt-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.75) 75%, rgba(0, 0, 0, 0.88) 100%);
   border-radius: 14px;
   z-index: 1;
}

/* Bottom content block */
.lpt-content {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 28px 30px 30px;
   z-index: 2;
}

/* Category badge */
.lpt-category {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(0, 0, 0, 0.45);
   color: #ffffff;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   padding: 5px 12px 5px 8px;
   border-radius: 4px;
   margin-bottom: 12px;
}

.lpt-category-dot {
   display: inline-block;
   width: 10px;
   height: 10px;
   background-color: #e8400c;
   border-radius: 2px;
   flex-shrink: 0;
}

/* Post title */
.lpt-title {
   margin: 0 0 16px;
   padding: 0;
   font-size: 28px;
   font-weight: 700;
   line-height: 1.3;
   color: #ffffff;
}

.lpt-title a {
   color: #ffffff !important;
   text-decoration: none;
   transition: opacity 0.2s ease;
}

.lpt-title a:hover {
   opacity: 0.85;
}

/* Author / date meta row */
.lpt-meta {
   display: flex;
   align-items: center;
   gap: 10px;
   color: #e8e8e8;
   font-size: 14px;
}

.lpt-avatar {
   width: 36px !important;
   height: 36px !important;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid rgba(255, 255, 255, 0.6);
   flex-shrink: 0;
}

.lpt-author {
   font-weight: 500;
   color: #ffffff;
}

.lpt-divider {
   color: rgba(255, 255, 255, 0.5);
   font-weight: 300;
}

.lpt-date {
   color: #e0e0e0;
}

/* ── Nav buttons — top-right, square with rounded corners ── */
.graceful-latest-posts-ticker .owl-nav {
   position: absolute;
   top: 20px;
   right: 20px;
   display: flex !important;
   gap: 8px;
   z-index: 10;
   margin: 0;
   pointer-events: none;
}

.graceful-latest-posts-ticker .owl-nav button {
   pointer-events: all;
   width: 40px !important;
   height: 40px !important;
   background: rgba(255, 255, 255, 0.92) !important;
   border: none !important;
   border-radius: 8px !important;
   display: flex !important;
   align-items: center;
   justify-content: center;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
   transition: background 0.2s ease;
   margin: 0 !important;
   padding: 0 !important;
}

.graceful-latest-posts-ticker .owl-nav button:hover {
   background: #ffffff !important;
}

.graceful-latest-posts-ticker .owl-nav button span {
   color: #333333 !important;
   font-size: 30px !important;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: -5px;
}

/* ── Dots — vertical, left side ── */
.graceful-latest-posts-ticker .owl-dots {
   position: absolute;
   top: 50%;
   left: 20px;
   transform: translateY(-50%);
   display: flex !important;
   flex-direction: column;
   gap: 8px;
   z-index: 10;
   margin: 0 !important;
}

.graceful-latest-posts-ticker .owl-dots .owl-dot {
   display: block !important;
   margin: 0 !important;
}

.graceful-latest-posts-ticker .owl-dots .owl-dot span {
   display: block !important;
   width: 6px !important;
   height: 6px !important;
   border-radius: 50% !important;
   background: rgba(255, 255, 255, 0.45) !important;
   margin: 0 !important;
   transition:
      background 0.2s ease,
      transform 0.2s ease;
}

.graceful-latest-posts-ticker .owl-dots .owl-dot.active span {
   background: #ffffff !important;
   transform: scale(1.4);
}

/* Responsive */
@media (max-width: 768px) {
   .lpt-card {
      height: 380px;
   }
   .lpt-title {
      font-size: 22px;
   }
   .lpt-content {
      padding: 20px;
   }
}

@media (max-width: 480px) {
   .lpt-card {
      height: 320px;
   }
   .lpt-title {
      font-size: 18px;
      line-height: 1.3;
   }
   .lpt-meta {
      font-size: 12px;
   }
   .graceful-latest-posts-ticker .owl-nav {
      top: 12px;
      right: 12px;
   }
   .graceful-latest-posts-ticker .owl-nav button {
      width: 34px !important;
      height: 34px !important;
   }
}

/*--------------------------------------------------------------
Slider Customization
--------------------------------------------------------------*/

#graceful-post-slider .owl-nav {
   align-items: unset;
   background-color: unset;
   height: unset;
   justify-content: unset;
   margin: unset;
   max-width: unset;
   text-align: unset;
   width: unset;
}
#graceful-post-slider .owl-nav button {
   display: unset;
}
#graceful-post-slider .owl-nav button:focus {
   box-shadow: unset;
   outline: unset;
}
#graceful-post-slider .owl-nav [class*="owl-"]:hover {
   background: unset;
}
#graceful-post-slider .owl-dots {
   display: unset;
}

#graceful-post-slider .owl-stage-outer {
   border-radius: 14px;
}

#graceful-post-slider .owl-stage-outer:after {
   background-color: unset;
   bottom: unset;
   content: unset;
   display: unset;
   height: unset;
   left: unset;
   position: unset;
   transform: unset;
   width: unset;
   z-index: unset;
}
#graceful-post-slider .owl-next {
   border-radius: unset;
   margin-left: unset;
   margin-top: unset;
   padding-left: unset;
   position: unset;
}
#graceful-post-slider .owl-next span {
   color: unset;
   font-size: unset;
}
#graceful-post-slider .owl-next::after {
   background: unset;
   border-radius: unset;
   content: unset;
   height: unset;
   position: unset;
   right: unset;
   top: unset;
   width: unset;
}
#graceful-post-slider .owl-prev {
   border-radius: unset;
   margin-right: unset;
   margin-top: unset;
   padding-right: unset;
   position: unset;
}
#graceful-post-slider .owl-prev span {
   color: unset;
   font-size: unset;
}
#graceful-post-slider .owl-prev::after {
   background: unset;
   border-radius: unset;
   content: unset;
   height: unset;
   position: unset;
   right: unset;
   top: unset;
   width: unset;
}

#graceful-post-slider {
   padding: 0 4px !important;
}

#graceful-post-slider .slide-item {
   height: 480px;
}

#graceful-post-slider {
   padding-bottom: 15px;
}
#graceful-post-slider .slider-item:first-child {
   display: block;
}
#graceful-post-slider .slide-item {
   background-size: cover;
   background-position: center;
}

#graceful-post-slider .owl-nav {
   position: absolute;
   top: 44%;
   left: 0;
   width: 100%;
   display: block;
   justify-content: space-between;
   transform: translateY(-50%);
   pointer-events: none;
}

#graceful-post-slider .owl-nav button {
   background: rgba(255, 255, 255, 0.6);
   border: none;
   font-size: 60px !important;
   pointer-events: all;
   color: #777 !important;
   cursor: pointer;
   padding: 6px 8px 15px 10px !important;
}

#graceful-post-slider .owl-nav button:hover {
   color: #000 !important;
}

#graceful-post-slider .owl-nav [class*="owl-"]:hover {
   background: rgba(255, 255, 255, 0.7);
}

#graceful-post-slider .owl-nav .owl-prev {
   position: absolute;
   left: 10px;
   border-radius: 5px;
}

#graceful-post-slider .owl-nav .owl-next {
   position: absolute;
   right: 10px;
   border-radius: 5px;
}

#graceful-post-slider .owl-dots {
   margin-top: -32px;
   position: relative;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
   background: #fbfbfb;
}

#graceful-post-slider .graceful-wrap-inner {
   vertical-align: bottom;
}
#graceful-post-slider.wrapped-content img {
   width: 100%;
}
#graceful-post-slider.wrapped-content .slider-item-bg {
   height: 540px;
}
.slider-item {
   display: none;
   position: relative;
}
.slider-item-bg {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   height: 450px;
}
.graceful-slider-info {
   display: inline-block;
   max-width: 840px;
   padding: 40px;
}
.slider-categories {
   font-size: 13px;
   font-weight: bold;
   letter-spacing: 3px;
   margin-bottom: 16px;
   text-transform: uppercase;
}
.graceful-slider-title {
   font-size: 36px;
   letter-spacing: 1px;
   line-height: 44px;
   margin-bottom: 25px;
}
.graceful-slider-read-more a {
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.8);
   cursor: pointer;
   display: inline-block;
   font-size: 13px;
   font-weight: bold;
   letter-spacing: 2px;
   line-height: 30px;
   margin-bottom: 30px;
   padding: 0 25px;
   text-transform: uppercase;
}

#graceful-post-slider .owl-dots {
   display: block !important;
   padding: 0 !important;
}

@media screen and (max-width: 480px) {
   #graceful-post-slider .owl-nav {
      display: none;
   }
   .graceful-slider-info {
      padding: 10px;
   }
   .graceful-slider-title {
      font-size: 24px;
      letter-spacing: 1px;
      line-height: 31px;
      margin-bottom: 25px;
   }
   #graceful-post-slider .slide-item {
      height: 240px;
   }
}

@media screen and (max-width: 1200px) {
   #graceful-post-slider.wrapped-content {
      padding-bottom: 12px;
      padding-left: 20px !important;
      padding-right: 20px !important;
   }
}

/* Shine Effect on post images */
.site-images a {
   position: relative;
   display: block;
}
.site-images a::before {
   position: absolute;
   top: 0;
   left: -75%;
   z-index: 2;
   display: block;
   content: "";
   width: 50%;
   height: 100%;
   background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
   background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
   -webkit-transform: skewX(-25deg);
   transform: skewX(-25deg);
}
.site-images a:hover::before {
   -webkit-animation: shine 0.75s;
   animation: shine 0.75s;
}
@-webkit-keyframes shine {
   100% {
      left: 125%;
   }
}
@keyframes shine {
   100% {
      left: 125%;
   }
}

/*--------------------------------------------------------------
Home Blog List Layout Customization
--------------------------------------------------------------*/

.blog .content-column li,
.archive .content-column li {
   margin-bottom: 36px;
   padding-bottom: 36px;
   border-bottom: 1px solid #eeeeee;
   list-style: none;
}

.blog .content-column li:last-child,
.archive .content-column li:last-child {
   border-bottom: none;
}

/* Card — flat, no shadow, auto height */
.blog .content-column article,
.archive .content-column article {
   display: flex;
   align-items: flex-start;
   gap: 28px;
   background: #ffffff;
   box-shadow: none;
   height: auto;
   overflow: visible;
}

/* Image column — fixed width, rounded corners */
.blog .post-image-col,
.archive .post-image-col {
   flex: 0 0 300px;
   width: 300px;
}

.blog .post-image-col .site-images,
.archive .post-image-col .site-images {
   height: 220px;
   min-height: unset;
   border-radius: 10px;
   overflow: visible;
   background: #f2f2f2;
}

.blog .site-images a,
.archive .site-images a {
   display: block;
   height: 100%;
   border-radius: 10px;
   overflow: hidden;
}

.blog .site-images a img,
.archive .site-images a img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   border-radius: 10px;
}

.blog .site-images .no-thumbnail,
.archive .site-images .no-thumbnail {
   width: 100%;
   height: 100%;
   background-color: #e8e8e8;
   border-radius: 10px;
}

/* Content column */
.blog .post-content-col,
.archive .post-content-col {
   flex: 1;
   padding: 4px 0 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

/* Category badge */
.bl-category-badge {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: #444444;
   margin-bottom: 4px;
}

.bl-category-dot {
   display: inline-block;
   width: 10px;
   height: 10px;
   background-color: #e8400c;
   border-radius: 2px;
   flex-shrink: 0;
}

/* Post title */
.blog .post-title,
.archive .post-title {
   font-size: 22px;
   font-weight: 700;
   line-height: 1.35;
   margin: 0;
   word-wrap: break-word;
}

.blog .post-title a,
.archive .post-title a {
   color: #111111;
   text-decoration: none;
   transition: color 0.2s ease;
}

.blog .post-title a:hover,
.archive .post-title a:hover {
   color: #e8400c;
}

/* Meta row: By Author • Date */
.bl-meta {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: #777777;
   flex-wrap: wrap;
}

.bl-category-badge a {
   color: #444444;
   text-decoration: none;
   transition: color 0.2s ease;
}

.bl-category-badge a:hover {
   color: #e8400c;
}

.bl-author a {
   color: #555555;
   text-decoration: none;
   font-weight: 600;
   transition: color 0.2s ease;
}

.bl-author a:hover {
   color: #e8400c;
}

.bl-meta-dot {
   color: #aaaaaa;
   font-size: 10px;
}

.bl-date {
   color: #777777;
}

/* Excerpt */
.blog .post-page-content,
.archive .post-page-content {
   padding-top: 0;
   margin-top: 0;
}

.blog .post-page-content p,
.archive .post-page-content p {
   padding: 0;
   margin: 0;
   font-size: 15px;
   color: #555555;
   line-height: 1.6;
}

/* Hide post-footer / read more button */
.blog .post-footer,
.archive .post-footer {
   display: none;
}

/* Read More link */
.bl-read-more {
   margin-top: 12px;
}

.bl-read-more a {
   display: inline;
   background: none;
   border: none;
   border-radius: 0;
   padding: 0;
   color: #e8400c;
   font-size: 13px;
   font-weight: 600;
   text-decoration: none;
   transition: color 0.2s ease;
}

.bl-read-more a:hover {
   color: #a07a3a;
   text-decoration: underline;
}

/* Post header reset */
.blog .post-header,
.archive .post-header {
   text-align: unset;
}

/* Responsive — tablet */
@media (max-width: 768px) {
   .blog .content-column article,
   .archive .content-column article {
      flex-direction: column;
      gap: 16px;
   }

   .blog .post-image-col,
   .archive .post-image-col {
      flex: none;
      width: 100%;
   }

   .blog .post-image-col .site-images,
   .archive .post-image-col .site-images {
      height: 240px;
   }

   .blog .post-title,
   .archive .post-title {
      font-size: 20px;
   }
}

/* Responsive — mobile */
@media (max-width: 480px) {
   .blog .post-image-col .site-images,
   .archive .post-image-col .site-images {
      height: 200px;
   }

   .blog .post-title,
   .archive .post-title {
      font-size: 18px;
   }

   .bl-meta {
      font-size: 12px;
   }
}

.navigation-search-button {
   border-radius: 20px;
   cursor: pointer;
   font-size: 14px;
   line-height: 24px;
   position: relative;
}

.main-navigation-search {
   top: 7px;
}

.navigation-search-button i {
   color: #ffffff !important;
}

.continue-read a {
   background: #ffffff;
   border: 1px solid #e8400c;
   color: #e8400c !important;
   text-decoration: none;
}

#main-navigation #searchform #searchsubmit,
.close-graceful-search {
   background: #f2f2f2;
   border: 1px solid #e8400c;
}

.graceful-latest-articles {
   margin-bottom: 30px;
   margin-top: 70px;
   padding: 0 0 12px;
   text-align: left;
   font-size: 1.25rem;
   font-weight: 700;
   color: #111111;
   border: none;
   display: block;
   position: relative;
}

.graceful-latest-articles::after {
   content: "";
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: linear-gradient(to right, #e8400c 50px, #e8e8e8 50px);
}

.main-content.wrapped-content {
   padding-left: 0px !important;
   padding-right: 0px !important;
}

@media screen and (max-width: 1180px) {
   .main-content.wrapped-content {
      padding-left: 20px !important;
      padding-right: 20px !important;
   }
}

.content-post .post-footer {
   padding: 3px 0 !important;
}

.graceful-pixel-category-title {
   margin-bottom: 30px;
   margin-top: 1px;
   padding: 0 0 12px;
   text-align: left;
   font-size: 18px;
   font-weight: 700;
   color: #111111;
   border: none;
   display: block;
   position: relative;
   width: 100%;
}

.graceful-pixel-category-title::after {
   content: "";
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: linear-gradient(to right, #e8400c 50px, #e8e8e8 50px);
}

/*--------------------------------------------------------------
Single Post Hero Header
--------------------------------------------------------------*/

/* Hero block */
.sph-hero {
   position: relative;
   width: 100%;
   min-height: 430px;
   border-radius: 12px;
   overflow: hidden;
   background-color: #2a2a2a;
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
   box-shadow: 0 0 0 1px #e0e0e0;
   margin-bottom: 36px;
   display: flex;
   align-items: flex-end;
}

#primary a {
    color: #0600d6;
}

/* Gradient overlay — only when image present */
.sph-has-image .sph-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.72) 75%, rgba(0, 0, 0, 0.88) 100%);
   z-index: 1;
}

/* Content sits above overlay */
.sph-content {
   position: relative;
   z-index: 2;
   width: 100%;
   padding: 1rem 2rem 1.5rem;
}

/* Category badges */
.sph-categories {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 14px;
}

.sph-cat-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(0, 0, 0, 0.45);
   color: #ffffff !important;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   text-decoration: none;
   padding: 5px 12px 5px 8px;
   border-radius: 20px;
   transition: background 0.2s ease;
}

.sph-cat-badge:hover {
   background: rgba(0, 0, 0, 0.65);
   color: #ffffff !important;
}

.sph-cat-dot {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: #e8400c;
   flex-shrink: 0;
}

/* Post title */
.sph-hero .sph-title {
   font-size: 2rem;
   font-weight: 700;
   line-height: 2rem;
   color: #ffffff !important;
   margin: 0 0 18px;
   padding: 0;
   word-wrap: break-word;
}

/* Meta row */
.sph-meta {
   display: flex;
   align-items: center;
   gap: 14px;
}

.sph-avatar {
   width: 44px !important;
   height: 44px !important;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid rgba(255, 255, 255, 0.6);
   flex-shrink: 0;
}

.sph-meta-text {
   display: flex;
   flex-direction: column;
   gap: 3px;
}

.sph-author {
   font-size: 14px;
   font-weight: 600;
   color: #ffffff;
   line-height: 1.2;
}

.sph-meta-row {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.8);
   flex-wrap: wrap;
}

.sph-sep {
   color: rgba(255, 255, 255, 0.45);
}

.sph-date,
.sph-read-time {
   color: rgba(255, 255, 255, 0.85);
}

.sph-comments {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   color: rgba(255, 255, 255, 0.85);
}

.sph-comment-icon {
   display: inline-block;
   vertical-align: middle;
   margin-top: -1px;
}

/* No-image fallback — dark grey, no overlay needed */
.sph-no-image .sph-content {
   padding-top: 60px; /* extra top padding since no image above */
}

/* Responsive */
@media (max-width: 768px) {
   .sph-hero {
      min-height: 380px;
      border-radius: 8px;
   }
   .sph-title {
      font-size: 24px;
   }
   .sph-content {
      padding: 1.5rem 1rem 1.5rem;
   }
}

@media (max-width: 480px) {
   .sph-hero {
      min-height: 360px;
      margin-bottom: 1.75rem;
   }
   .sph-title {
      font-size: 20px;
   }
   .sph-meta-row {
      font-size: 12px;
   }
   .sph-avatar {
      width: 36px !important;
      height: 36px !important;
   }
}

/*--------------------------------------------------------------
Additional Customizations
--------------------------------------------------------------*/

/* Remove featured boxes border */
#featured-boxes {
   border-bottom: none;
}

/* Media widget image rounded corners */
#media_image-3 img {
   border-radius: 10px;
}

/* Blog post title styling */
.blog .post-title {
   font-size: 28px !important;
   line-height: 36px !important;
   margin-bottom: 10px !important;

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

/* Blog listing author link */
.bl-author a {
   color: #555555 !important;
   text-decoration: none;
   font-weight: 500;
   transition: color 0.2s ease;
}

/* Latest posts ticker item padding */
.graceful-latest-posts-ticker .item {
   padding: 0px;
}

/* Single post hero author link */
.sph-author a {
   color: #ffffff !important;
   text-decoration: none;
   transition: opacity 0.2s ease;
}

.sph-author a:hover {
   opacity: 0.85;
}

/*  ==============================   Custom Header Code  ================================== */

.header-area {
   background-color: #fff;
}

.top-header {
   padding-top: 8px;
   padding-bottom: 0px;
   border-bottom: 1px solid #e5e5e5;
}

.top-header .header-left-content img {
   width: 148px;
   position: relative;
   top: -4px;
}

.top-header .header-right-content {
   float: right;
}

.top-header .header-right-content ul li {
   display: inline-block;
   color: #24416b;
   padding-left: 50px;
   position: relative;
   margin-right: 30px;
   vertical-align: middle;
}
.top-header .header-right-content ul li.inqary {
   top: 0;
   /* background-color: #16a1dd; */
   /* color: #fff; */
}
.top-header .header-right-content ul li.inqary a {
   background-color: #16a1dd;
   color: #fff;
   padding: 5px 24px;
}

.top-header .header-right-content ul li.inqary a:hover {
   background-color: #434698;
   color: #fff;
   padding: 5px 24px;
}

.top-header .header-right-content ul li i {
   color: var(--orange);
   font-size: 20px;
   position: absolute;
   top: -1px;
   left: 0;
   width: 35px;
   height: 35px;
   border: 1px solid #f3ddd0;
   line-height: 35px;
   text-align: center;
   border-radius: 50%;
}

.top-header .header-right-content ul li span {
   display: block;
   font-size: 12px;
   line-height: 1;
   color: #7a7e9a;
   font-weight: 500;
   margin-bottom: 2px;
}

.top-header .header-right-content ul li a {
   color: #24416b;
   font-size: 13px;
   font-weight: 600;
}

.top-header .header-right-content ul li:hover a {
   color: var(--orange);
}

.top-header .flag-wrap .flag-item-top {
   padding-left: 0;
}

.top-header .flag-wrap .flag-item-top .flag-bar {
   position: relative;
   display: flex;
   align-items: center;
}

.top-header .flag-wrap .flag-item-top .flag-bar img {
   width: 2.5rem;
}

.top-header .flag-wrap .flag-item-top .flag-bar span {
   position: relative;
   color: #24416b;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
   font-size: 15px;
   font-weight: 500;
   padding-left: 0.75rem;
}

.top-header .flag-wrap .flag-item-top .flag-item-bottom {
   position: absolute;
   top: 160%;
   padding: 20px !important;
   -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
   box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
   background-color: #ffffff;
   width: 250px;
   left: -140px;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   visibility: hidden;
   opacity: 0;
   z-index: 1000;
}

.top-header .flag-wrap .flag-item-top .flag-item-bottom::before {
   content: "";
   position: absolute;
   width: 0;
   height: 0;
   content: "";
   border-top: 0;
   border-right: 8px solid transparent;
   border-bottom: 8px solid #ffffff;
   border-left: 8px solid transparent;
   top: -8px;
   right: 57px;
}

.top-header .flag-wrap .flag-item-top .flag-item-bottom .flag-item {
   margin-bottom: 10px;
   padding-left: 0;
   margin-right: 0;
   display: block;
   position: unset;
}

.top-header .flag-wrap .flag-item-top .flag-item-bottom .flag-item:last-child {
   margin-bottom: 0;
}

.top-header .flag-wrap .flag-item-top .flag-item-bottom .flag-item .flag-link {
   color: #000000;
   display: block;
   font-size: 14px;
   font-weight: 500;
}

.top-header .flag-wrap .flag-item-top .flag-item-bottom .flag-item .flag-link img {
   width: 20px;
   margin-right: 5px;
}

.top-header .flag-wrap .flag-item-top .flag-item-bottom .flag-item .flag-link:hover {
   color: var(--orange);
}

.top-header .flag-wrap .flag-item-top:hover .flag-bar span {
   color: var(--orange);
}

.top-header .flag-wrap .flag-item-top:hover .flag-item-bottom {
   visibility: visible;
   opacity: 1;
   top: 95%;
}

#site-menu .sub-menu,
#site-menu .sub-menu a {
   transition: 0.3s;
}

.search-wrap button {
   font-size: 14px;
   font-weight: 500;
   background-color: var(--orange);
   color: rgb(255, 255, 255);
   border-radius: 14px;
   padding: 8px 15px;
   border: none;
}

#main-navigation .responsive-menu-btn {
   width: 3rem;
   aspect-ratio: 1/1;
   color: var(--orange);
}

.footer-credits ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
.footer-credits ul li:last-of-type {
    padding-left: 0.75rem;
}
.footer-credits ul li::marker {
  content: "•";
   color: var(--orange);
}

.for-whats-app {
   display: block;
   position: fixed;
   bottom: 2.5rem;
   width: 2.5rem;
   right: 1rem;
   z-index: 10;
   background:rgba(37, 211, 102, 0.04);
   animation: 2s pulse ease infinite;
}

@keyframes beatHeart {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulse {
    0% { border-radius: 50%;  }
    70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0.1);
    }
    
    100% {
        border-radius: 50%;
        box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
    }
}

.comments-area {
    margin-top: 1.5rem;
    padding: 1.5rem 1.5rem 0.5rem;
    background: #f6f6f6;
    border-radius: 12px;
}
.comments-area form button[type="submit"] { border-radius: 50px; }