:root {
    --sidebar-width: 140px;
    --trending-width: 300px;
    --primary-color: #eb8f00;
    --primary-color-shade: #eb8f00;
    --light-primary-shade-sidebar: #ffe1eb;
    --dark-primary-shade-sidebar: #003927;
    --dark-primary-shade-darker-sidebar: #003927;
    --text-black: #090b0e;
    --text-muted: #6c757d;
    --text-white: #ffff;
    --header-height: 70px;
    --live-wire-progess-bar-color: var(--primary-color);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;

    /* font-family: 'Funnel Display','sans-serif' !important; */

    scrollbar-width: thin;
    scrollbar-color: var(--dark-primary-shade-sidebar) var(--text-white);
}

.modal-open[style] {
    padding-right: 0px !important;
}

.modal-open {
    padding-right: 0px !important;
}

.fl-wrapper {
    z-index: 99999 !important;
}

.fl-flasher {
    z-index: 99999 !important;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: var(--primary-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 15px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color);
}

.h1,
h1 {
    font-size: 2.3rem !important;
}

.h4,
h4 {
    font-size: 1.2rem !important;
}

.h5,
h5 {
    font-size: 1.1rem !important;
}

.custom-border {
    border: 1.5px solid var(--primary-color) !important;
}

/*========================================
=            Base / Mobile First         =
========================================*/

/* Mobile Navigation (always visible on small screens) */
.mobile-nav {
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--dark-primary-shade-sidebar);
    padding: 10px;
    width: 100%;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1039;
}

.mobile-nav .nav-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 13px;
}

.mobile-nav .nav-link:hover,
.mobile-nav .nav-link.active {
    color: var(--primary-color);
}

/* Search Form — Mobile Default */
.asearch-form.csearch-form {
    display: block !important;
    position: absolute !important;
    left: 50px !important;
    top: 80px !important;
    transition: ease-in-out 0.13s !important;
}

.asearch-form #search-inputd {
    padding: 17px 15px 17px 20px;
    font-size: medium;
    width: 250px;
}

.asearch-form .search-icon {
    padding-right: 20px;
    font-weight: bold;
    color: #090b0e;
}

/* Image Overrides — Mobile */
.fimg,
.lpimg,
.lppimg,
.mpimg {
    height: 250px;
    object-fit: cover;
}

.loop-list-style-1 .post-thumb img {
    width: 101px;
    height: 98px;
}

/*========================================
=       Tablet & Small Desktops         =
========================================*/

@media (min-width: 481px) and (max-width: 768px) {
    /* Inherit mobile rules; override if needed */
    /* For example, slightly larger images: */
    .fimg {
        height: 400px;
    }
    .lpimg {
        height: 350px;
    }
    .lppimg {
        height: 500px;
    }
    .mpimg {
        height: 250px; /* same as mobile */
    }

  
}

@media (min-width: 768px) {
    .col-lg-10.col-md-9.main-header-navigation {
        padding-right: 36px !important;
        padding-left: auto !important;
    }
}

/*========================================
=           Desktop & Upwards           =
========================================*/

@media (min-width: 769px) {
    /* Hide mobile nav on larger screens */
    .mobile-nav {
        display: none;
    }

    /* Reset or hide mobile search form if you have a desktop search elsewhere */
    .asearch-form.csearch-form {
        display: none;
    }

    /* Desktop-specific image sizing (optional) */
    /* Remove !important and rely on specificity here */
    .fimg,
    .lpimg,
    .lppimg,
    .mpimg {
        height: auto;
        object-fit: initial;
    }
}