/*
* ------------------------------------------------------------------
*
* Project: News25 - HTML Template
* Version: 1.0
* Created : 01/05/2025
* Template URI: http://nayrathemes.com/demo/html/news
* Author Name: NayraThemes
* Author URI: http://nayrathemes.com/
* Description: Breaking News, HTML Template
* Develope By: NayraThemes;
*
*
* -------------------------------------------------------------------
*
============================================
*   [Table of contents]
* ==========================================
    Theme Default Css
    01.	Common CSS
    02. Preloader
    03. Above Header
    04. Breaking News Section
    05. Latest News Section
    06. Entertenment News Section
    07. Tranding News Section
    08. Business News Section
    09. Post Slider Section
    10. Sports Slider Section
    11. Latest Fashion Section
    12. Astrology News Section
    13. Editors Section
    14. Web Store Section
    15. Blog Section
    16. Footer Section
    17. Breadcrumb Section
    18. Author Section
    19. About Section
    20. Team Section
    21. Funfact Section
    22. Company History Section
    23. Skills Bar Section
    24. Achievement Section
    25. Company Awards Section
    26. Client Section
    27. 404 Section
    28. FAQs Section
    29. Information Section
    30. Map Section
    31. Contact Form Section
    32. Blog Single Section

========================================== */

/*------ Theme Default Css
	=======================================*/

/* Color Switcher */
/* @import url('../style-configurator/style-configurator.css'); */

/* Google Fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */


/*===== 01. Common CSS =====*/
:root {
    --dark-1: #ffffff;
    --dark-2: #F5F5F5;
}

.dark-mode:root {
    --dark-1: #222222;
    --dark-2: #000000;
    --sp-primary: #005db8;
    --sp-border-dark: #393939;
    --sp-shadow: 0 0 10px rgb(255 255 255 / 15%);
}

body {
    background: var(--dark-2);
    color: var(--sp-secondary-dark);
    overflow-x: hidden;
	word-break: break-all;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    line-height: 1.2;
    word-break: break-word;
}
h6 {
    font-size: 18px;
}

body.fixed,
body.docker-popup-active {
    overflow: hidden;
}

a {
    text-decoration: none;
    color: var(--sp-primary);
}

a:focus,
a:hover {
    color: var(--sp-secondary);
}

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

p {
    text-decoration: none;
    font-weight: 300;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-py-default {
    padding: 15px 0;
}

.st-py-default2 {
    padding: 30px 0;
}

.st-py-default3 {
    padding: 70px 0;
}

.white-bg {
    background: var(--dark-1);
}

ins {
    text-decoration: none;
}

.color-primary {
    color: var(--sp-primary);
}

.color-secondary {
    color: var(--sp-secondary);
}

/** Text ellipsis **/
.ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-item:active {
    background-color: transparent;
}

/** Scrollbar **/

.menubar::-webkit-scrollbar {
    width: 2px;
}

.menubar::-webkit-scrollbar-thumb {
    background-color: var(--sp-secondary);
}

.menubar::-webkit-scrollbar {
    display: none;
}

/*===== 02. Preloader =====*/

.preloader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999999;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in oklab, var(--sp-primary) 45%, #fff 0%);
    backdrop-filter: blur(4px);
}

.globe-loader {
    position: relative;
    font-size: 90px;
    color: var(--sp-secondary);
    line-height: 75px;
}

.globe-loader>i {
    display: block;
    position: absolute;
    font-size: 25px;
    height: 50%;
    top: 0;
    left: 50%;
    color: var(--sp-white);
    transform: translateX(-50%) rotate(0deg);
    transform-origin: center bottom;
    animation: loader-spin 3s infinite ease-in-out;
}

.globe-loader>i::before {
    position: relative;
    top: -1.25em;
}

@keyframes loader-spin {
    from {
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(1turn);
    }
}

.preloader__close-btn {
    border: none;
    background: none;
    margin-top: 55px;
    padding: 0;
    color: var(--sp-white);
}

button.preloader__close-btn:focus,
button.preloader__close-btn:hover {
    text-decoration: none;
    outline: unset;
    color: var(--sp-white);
    background: none;
}

.preloader__close-btn .outer {
    position: relative;
    margin: auto;
    width: 40px;
}

.preloader__close-btn .inner {
    width: inherit;
    text-align: center;
}

.preloader__close-btn .text {
    font-size: .8em;
    line-height: 2.5em;
    text-transform: uppercase;
    color: inherit;
    transition: all .3s ease-in;
    opacity: 0;
    cursor: pointer;
}

.preloader__close-btn .inner:before,
.preloader__close-btn .inner:after {
    position: absolute;
    content: '';
    height: 1px;
    width: 100%;
    background: var(--sp-white);
    left: 0;
    transition: all .3s ease-in;
}

.preloader__close-btn .inner:before {
    top: 50%;
    transform: rotate(45deg);
}

.preloader__close-btn .inner:after {
    bottom: 50%;
    transform: rotate(-45deg);
}

.preloader__close-btn .outer:hover .text {
    opacity: 1;
}

.preloader__close-btn .outer:hover .inner:before,
.preloader__close-btn .outer:hover .inner:after {
    transform: rotate(0);
}

.preloader__close-btn .outer:hover .inner:before {
    top: 0;
}

.preloader__close-btn .outer:hover .inner:after {
    bottom: 0;
}

.img-fluid {
	object-fit: cover;
}

/*===== // =====*/

.tile {
    width: 100%;
    display: none;
}
/*===== Cart =====*/

.cart-wrapper {
    position: relative;
}

.menu-right-list .view-wrapper a {
	display: flex !important;
	justify-content: center;
	align-items: center;
}

.menu-right-list li.cart-wrapper:hover .shopping-cart,
.menu-right-list li.cart-wrapper:focus-within .shopping-cart {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}

.shopping-cart {
    text-align: left;
}

.shopping-cart {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 999;
    width: 320px;
    line-height: 50px;
    padding: 20px;
    color: var(--sp-primary);
    background: var(--dark-1);
    border-radius: 0 3px 3px;
    border: 0;
    border-top: 2px solid var(--sp-secondary);
    opacity: 0;
    visibility: hidden;
    -webkit-box-shadow: 0 15px 30px -5px rgb(0 0 0 / 7%);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 7%);
    -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
}

.shopping-cart .cart-header>i {
    font-size: 20px;
}

.shopping-cart .cart-header {
    display: flex;
    border-bottom: 1px solid var(--sp-border-dark);
    padding-bottom: 15px;
    color: var(--sp-primary);
    line-height: 1;
    justify-content: space-between;
}

.shopping-cart .main-button {
    text-decoration: none;
    border: none;
    width: 100%;
    color: var(--sp-white) !important;
    font-weight: 500;
    display: block;
    font-size: 16px;
    background: var(--sp-primary);
    border: 1px solid rgba(255 255 255 / 20%);
    padding: 8px;
}

.shopping-cart .cart-header .cart-total {
    color: var(--sp-primary);
    font-size: 16px;
}

.shopping-cart .cart-header .cart-total .woocommerce-Price-amount {
    color: var(--sp-primary);
}

div.shopping-cart ul.cart-items {
    padding: 0;
    margin: 0;
    padding-top: 10px;
    list-style: none;
    max-height: 188px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    box-sizing: unset;
    border-bottom: 1px solid var(--sp-border-dark);
    margin-bottom: 8px;
}

div.shopping-cart ul.cart-items li {
    display: inline-block;
    width: 100%;
    margin: 0 10px 10px 0;
    padding: 0;
    font-size: 15px;
    position: relative;
    border-bottom: 1px solid;
    padding-bottom: 8px;
}

div.shopping-cart ul.cart-items li:last-child {
    border: none;
}

div.shopping-cart ul.cart-items li a {
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--sp-secondary);
    transition: 1s;
    display: block;
}

div.shopping-cart ul.cart-items li a:hover,
div.shopping-cart ul.cart-items li a:focus-within {
    color: var(--sp-primary);
    text-decoration: dotted underline;
}

div.shopping-cart ul a.remove {
    float: right;
    margin-top: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 100%;
    color: var(--sp-secondary) !important;
    box-shadow: 0 0 10px rgb(0 0 0 / 15%);
    border: 1px solid rgba(255 255 255 / 20%);
    text-decoration: none;
}

.shopping-cart .cart-items .item-img {
    float: left;
    margin-right: 12px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    line-height: 4.1;
    border-width: 1px;
    border-style: solid;
    border-color: var(--sp-primary);
}

.shopping-cart .cart-items .item-img img {
    width: 90%;
    border-radius: 50%;
    display: inline-block;
    float: none;
    margin: auto;
}

.shopping-cart .cart-items .item-name {
    font-size: 14px;
    font-weight: 600;
    display: block;
    padding-top: 15px;
    line-height: 1;
    text-align: left;
    color: var(--sp-primary);
}

.shopping-cart .cart-items .item-name:hover,
.shopping-cart .cart-items .item-name:focus-within {
    color: var(--sp-secondary);
}

.shopping-cart .cart-badge {
    color: var(--sp-white);
    font-size: 10px;
    margin: 0;
    width: 16px;
    height: 16px;
    line-height: 1.6;
    text-align: center;
    vertical-align: super;
    border-radius: 100px;
    display: inline-block;
    background-color: var(--sp-secondary);
    margin-left: -10px;
}

.shopping-cart .cart-items .quantity {
    font-size: 12px;
    font-weight: 400;
    color: var(--sp-secondary);
    line-height: 3;
    float: left;
}

.shopping-cart .cart-items .quantity span bdi {
    color: var(--sp-primary);
    font-weight: 400;
}

.shopping-cart .cart-items .amount {
    font-size: 12px;
    font-weight: 600;
    margin-right: 0;
    color: #222;
}

.woocommerce-cart .wc-block-cart__submit-button, .wc-block-components-totals-coupon__button, .wc-block-components-checkout-place-order-button {
	background: var(--sp-primary);
	color: #ffffff;
	border-radius: 3px;
	border: none;
}

.wc-block-components-totals-coupon__button .wc-block-components-button__text {
	opacity: 1 !important;
}

.wc-block-cart-items__header th {
	color: var(--sp-primary);
}

/*===== // =====*/


/*===== 03. Above Header =====*/

.header .above-header .header-dark {
    background-color: var(--sp-primary);
}

.header .above-header .header-light {
    background-color: var(--dark-2);
}

.header .widget-title {
    display: none;
}

.header .above-header .widget-date-time .date {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 38px;
    font-weight: 600;
    color: var(--sp-white);
}

.header .above-header .widget-date-time .date .month,
.header .above-header .widget-date-time .date .year {
    font-size: 15px;
    line-height: 17px;
    display: block;
    margin-left: 5px;
    border-right: 1px solid #dddddd3d;
    padding-right: 10px;
}

.header .above-header .widget-date-time .live-time {
    position: relative;
    padding: 2px 4px;
    background: var(--sp-secondary);
    border-radius: 3px;
    font-size: 14px;
    margin-left: 10px;
    font-weight: 500;
    flex-shrink: 0;
    color: var(--sp-white);
}

.header .above-header .widget-date-time .live-time::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 10px solid var(--sp-secondary);
}

.header .above-header .widget-temperature-air {
    padding: 10px 20px;
    margin: 0 10px;
    font-weight: 500;
    line-height: 37px;
    background: color-mix(in srgb, var(--sp-primary) 100%, #000000 20%);
}

.header .widget-temperature-air>ul {
    display: flex;
    align-items: center;
    gap: 25px;
}

.header .above-header .widget-temperature-air>ul>li>i {
    color: var(--sp-secondary);
}

.header .above-header .widget-temperature-air>ul>li {
    position: relative;
}

.header .above-header .widget-temperature-air>ul>li:not(:last-child)::after {
    position: absolute;
    right: -24px;
    margin: 0 10px;
    content: "";
    width: 1px;
    height: 20px;
    background: var(--sp-border-dark);
    top: 50%;
    transform: translateY(-50%);
    opacity: 50%;
}

.header .widget .menu-language-container .menu li {
    padding-top: 0;
    line-height: 3;
    padding-bottom: 0;
    width: 100%;
}

.header .widget .menu-language-container .menu li .sub-menu {
    width: 200px;
    top: 45px;
}

.header .above-header .widget-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header .widget .menu-language-container .menu>li>a,
.header .btn.mode,
.header .btn.share {
    color: var(--sp-white);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    padding: 0;
    border: 1px solid;
    flex-shrink: 0;
    border-color: inherit;
    transition: var(--sp-transition);
}
.header .widget .menu-language-container .menu>li>a {
	border: none;
}
.header .widget .menu-language-container .menu>li>a {
	overflow: hidden;
}
.header .widget .menu-language-container .menu>li>a:hover,
.header .btn.mode:hover,
.header .btn.share:hover,
.header .widget .menu-language-container .menu>li>a:focus,
.header .btn.mode:focus,
.header .btn.share:focus {
    background-color: var(--sp-secondary);
    border-color: var(--sp-secondary);
    color: var(--sp-white);
}

.header .above-header .widget-right .btn.advetise {
    font-weight: 600;
    padding: 4px 5px;
    font-size: 15px;
    color: var(--sp-primary);
    background-color: var(--sp-white);
    transition: var(--sp-transition);
}

.header .above-header .widget-right .btn.advetise:hover,
.header .above-header .widget-right .btn.advetise:focus {
    color: var(--sp-white);
    background-color: var(--sp-secondary);
}

.header .navigator-wrapper .navigation-middle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 35px 0;
    gap: 10px;
}

.header.header-one>.nav-area {
    border-top: 1px solid var(--sp-border-dark);
    border-bottom: 1px solid var(--sp-border-dark);
}

.header.header-one>.nav-area,
.header.header-one>.navigator-wrapper {
    background-color: var(--dark-1);
}

.header .adv-area img {
	max-width: 100%;
}

/*** Header Two ***/

.header.header-two .sticky-menu,
.header.header-two .menubar,
.header.header-two>.nav-area {
    background-color: var(--sp-secondary);
}

.header.header-two .menu-link-item h3,
.header.header-two>.navigator-wrapper {
    background-color: var(--sp-primary);
}

.header.header-two .menubar .menu-wrap>li:hover>a,
.header.header-two .menubar .menu-wrap .menu-item.active a,
.header.header-two .menubar .menu-wrap .menu-item.dropdown.open>a,
.header.header-two .nav-area .navigation-content a,
.header.header-two .nav-area .navigation-content button {
    color: var(--sp-white);
}

.header.header-two .nav-area .navigation-content .main-menu-left a.btn {
    color: var(--sp-secondary);
    background-color: var(--sp-white);
}

.header.header-two .main-menu-right .menu-right-list li>button span,
.header.header-two .menubar .menu-wrap>li>a>.badge {
    color: var(--sp-secondary);
    background-color: var(--sp-white);
}

.header.header-two .navbar-area .menubar .dropdown-menu {
    background: var(--sp-secondary);
}

.header.header-two .menu-link-item .dropdown-item::before,
.header.header-two .menubar .dropdown-menu li>a::before {
    background: var(--sp-white);
}

.header.header-two .menubar ul.menu-wrap>li:not(:last-child)>a::after {
    background: #ffffff66;
}

.header.header-two .nav-area .navbar-area .main-menu-right .menu-right-list li>.view-icon-wrap,
.header.header-two .nav-area .navbar-area .main-menu-right .menu-right-list li>button {
    border-right: 1px solid #ffffff66;
}

.header.header-two .nav-area .navbar-area .main-menu-right .menu-right-list li .header-search-toggle {
    border-left: 1px solid #ffffff66;
}

.header.header-two .menubar .dropdown-menu .dropdown:hover>a:after,
.header.header-two .menubar .dropdown-menu .dropdown.focus>a:after {
    -webkit-text-fill-color: var(--sp-white);
}

.header.header-two .above-header .widget-temperature-air {
    background-color: color-mix(in srgb, var(--sp-primary) 100%, #ffffff 20%);
}

.header.header-two .menubar .menu-wrap .menu-item.dropdown>.mobile-toggler button:hover,
.header.header-two .menubar .menu-wrap .menu-item.dropdown>.mobile-toggler button:focus,
.header.header-two .menubar .menu-wrap .menu-item.dropdown.open>.mobile-toggler button {
    color: var(--sp-secondary);
    background-color: var(--sp-white);
}

.header.header-two .toggle-lines>span {
    background: var(--sp-white);
}

.header.header-two .nav-area .navigation-content .search-box button,
.header.header-three .nav-area .navigation-content .search-box button,
.header.header-four .nav-area .navigation-content .search-box button,
.header.header-five .nav-area .navigation-content .search-box button {
    color: var(--sp-secondary);
}

.header.header-two .nav-area .navigation-content .search-box button:hover,
.header.header-two .nav-area .navigation-content .search-box button:focus,
.header.header-three .nav-area .navigation-content .search-box button:hover,
.header.header-three .nav-area .navigation-content .search-box button:focus,
.header.header-four .nav-area .navigation-content .search-box button:hover,
.header.header-four .nav-area .navigation-content .search-box button:focus,
.header.header-five .nav-area .navigation-content .search-box button:hover,
.header.header-five .nav-area .navigation-content .search-box button:focus {
    color: var(--sp-white);
}

.header.header-two .widget .menu-language-container .menu>li>a,
.header.header-three .widget .menu-language-container .menu>li>a {
    color: var(--sp-white);
}

.header.header-two .widget .menu-language-container .menu li .sub-menu,
.header.header-three .widget .menu-language-container .menu li .sub-menu {
    padding: 0;
}

.header.header-two .menu-language-container .menu .sub-menu li a,
.header.header-three .menu-language-container .menu .sub-menu li a {
    color: var(--sp-primary);
}

/*** Header Three ***/

.header.header-three>.navigator-wrapper {
    background-color: var(--dark-1);
    border-top: 1px solid var(--sp-border-dark);
    border-bottom: 1px solid var(--sp-border-dark);
}

.header.header-three>.nav-area,
.header.header-three .sticky-menu,
.header.header-three .menubar,
.header.header-three .navbar-area .menubar .dropdown-menu {
    background-color: var(--sp-primary);
}


.header.header-three .menubar .menu-wrap .menu-item a,
.header.header-three .nav-area .navigation-content button {
    color: var(--sp-white);
}

.header.header-three .menubar .menu-wrap .menu-item.active a,
.header.header-three .menubar .menu-wrap .menu-item a:hover,
.header.header-three .menubar .menu-wrap .menu-item a:focus,
.header.header-three .nav-area .navigation-content button:hover,
.header.header-three .nav-area .navigation-content button:focus {
    color: var(--sp-secondary);
}

.header.header-three .toggle-lines>span {
    background-color: var(--sp-white);
}

.header.header-three .has-mega-menu .sticker-new::after {
    background: #085eb3;
}

.header.header-three .menubar ul.menu-wrap>li:not(:last-child)>a::after {
    background: #ffffff66;
}

.header.header-three .nav-area .navbar-area .main-menu-right .menu-right-list li .header-search-toggle {
    border-left: 1px solid #ffffff66;
}

.header.header-three .nav-area .navbar-area .main-menu-right .menu-right-list li>.view-icon-wrap,
.header.header-three .nav-area .navbar-area .main-menu-right .menu-right-list li>button {
    border-right: 1px solid #ffffff66;
    color: var(--sp-white);
}

.header.header-three .nav-area .navigation-content .mobile-toggler button {
    color: var(--sp-primary);
    background-color: var(--sp-white);
}

/*** Header Four ***/

.header.header-four .above-header {
    border-top: 1px solid var(--sp-border-dark);
    border-bottom: 1px solid var(--sp-border-dark);
}

.header.header-four .widget.widget-date-time {
    background-color: var(--sp-secondary);
    padding: 0 15px;
}

.header.header-four .above-header .widget-date-time .time {
    color: var(--sp-secondary);
    background-color: var(--sp-white);
}

.header.header-four .above-header .widget-date-time .time::before {
    border-right: 10px solid var(--sp-white);
}

.header.header-four .above-header .widget-temperature-air {
    padding: 10px 4px;
    margin: 0;
    background: transparent;
    color: var(--sp-primary);
}

.header.header-four .widget .menu-language-container .menu>li>a,
.header.header-four .btn.mode,
.header.header-four .btn.share {
    color: var(--sp-white);
    border: 1px solid;
    background-color: var(--sp-primary);
}

.header.header-four .widget .menu-language-container .menu>li>a:hover,
.header.header-four .widget .menu-language-container .menu>li>a:focus,
.header.header-four .btn.mode:hover,
.header.header-four .btn.mode:focus,
.header.header-four .btn.share:hover,
.header.header-four .btn.share:focus {
    background-color: var(--sp-secondary);
}

.header.header-four .above-header .widget-right .btn.advetise {
    color: var(--sp-white);
    border-radius: 25px;
    background-color: var(--sp-secondary);
}

.header.header-four .above-header .widget-right .btn.advetise:hover,
.header.header-four .above-header .widget-right .btn.advetise:focus {
    background-color: var(--sp-primary);
}

.header.header-four>.navigator-wrapper {
    background-color: var(--dark-1);
}

.header.header-four .navigator-wrapper .navigation-middle-row {
    padding: 24px 0;
}

.header.header-four>.nav-area,
.header.header-four .sticky-menu,
.header.header-four .menubar,
.header.header-four .navbar-area .menubar .dropdown-menu {
    background-color: var(--sp-primary);
}

.header.header-four .menubar .menu-wrap .menu-item a,
.header.header-four .nav-area .navigation-content button {
    color: var(--sp-white);
}

.header.header-four .menubar .menu-wrap .menu-item.active a,
.header.header-four .menubar .menu-wrap .menu-item a:hover,
.header.header-four .menubar .menu-wrap .menu-item a:focus,
.header.header-four .nav-area .navigation-content button:hover,
.header.header-four .nav-area .navigation-content button:focus {
    color: var(--sp-secondary);
}

.header.header-four .toggle-lines>span {
    background-color: var(--sp-white);
}

.header.header-four .has-mega-menu .sticker-new::after {
    background: #085eb3;
}

.header.header-four .menubar ul.menu-wrap>li:not(:last-child)>a::after {
    background: #ffffff66;
}

.header.header-four .nav-area .navbar-area .main-menu-right .menu-right-list li .header-search-toggle {
    border-left: 1px solid #ffffff66;
}

.header.header-four .nav-area .navbar-area .main-menu-right .menu-right-list li>.view-icon-wrap,
.header.header-four .nav-area .navbar-area .main-menu-right .menu-right-list li>button {
    border-right: 1px solid #ffffff66;
    color: var(--sp-white);
}

.header.header-four .nav-area .navigation-content .mobile-toggler button {
    color: var(--sp-primary);
    background-color: var(--sp-white);
}

.header.header-four .nav-area .navigation-content .main-menu-left a.btn {
    height: 51px;
    padding: 11px 8px;
    border-radius: 0;
}

.header.header-four .menubar ul.menu-wrap>li:not(:last-child)>a::after {
    height: 100%;
}

.header.header-four .above-header .widget-temperature-air>ul>li:not(:last-child)::after {
    background: var(--sp-primary);
}

/*** Header Five ***/

.header.header-five>.navigator-wrapper {
    background-color: var(--dark-1);
}

.header.header-five .navigator-wrapper .navigation-middle-row {
    display: block;
    padding: 10px;
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
}

.header.header-five>.nav-area,
.header.header-five .sticky-menu,
.header.header-five .menubar,
.header.header-five .navbar-area .menubar .dropdown-menu {
    background-color: var(--sp-primary);
}

.header.header-five .menubar .menu-wrap .menu-item a,
.header.header-five .nav-area .navigation-content button {
    color: var(--sp-white);
}

.header.header-five .menubar .menu-wrap .menu-item.active a,
.header.header-five .menubar .menu-wrap .menu-item a:hover,
.header.header-five .menubar .menu-wrap .menu-item a:focus,
.header.header-five .nav-area .navigation-content button:hover,
.header.header-five .nav-area .navigation-content button:focus {
    color: var(--sp-secondary);
}

.header.header-five .toggle-lines>span {
    background-color: var(--sp-white);
}

.header.header-five .has-mega-menu .sticker-new::after {
    background: #085eb3;
}

.header.header-five .menubar ul.menu-wrap>li:not(:last-child)>a::after {
    background: #ffffff66;
}

.header.header-five .nav-area .navbar-area .main-menu-right .menu-right-list li .header-search-toggle {
    border-left: 1px solid #ffffff66;
}

.header.header-five .nav-area .navbar-area .main-menu-right .menu-right-list li>.view-icon-wrap,
.header.header-five .nav-area .navbar-area .main-menu-right .menu-right-list li>button {
    border-right: 1px solid #ffffff66;
    color: var(--sp-white);
}

.header.header-five .nav-area .navigation-content .mobile-toggler button {
    color: var(--sp-primary);
    background-color: var(--sp-white);
}

.header.header-five .nav-area .navigation-content .main-menu-left a.btn {
    width: 44px;
    height: 44px;
    border-radius: var(--sp-radius);
}

/*** Search Popup ***/

.mfp-bg {
    background-color: color-mix(in oklab, var(--sp-primary) 45%, #fff 0%);
    backdrop-filter: blur(4px);
}

.header-search-popup {
    background-color: color-mix(in oklab, var(--sp-primary) 45%, #fff 0%);
    backdrop-filter: blur(4px);
    position: fixed;
    left: 0;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: 1s;
    clip-path: circle(0%);
}

.header-search-active.header-search-popup {
    display: block;
    visibility: visible;
    opacity: 1;
}

.header-search-active.header-search-popup {
    visibility: visible;
    opacity: 1;
    clip-path: circle(100%);
}

.header-search-popup .search-box {
    width: 100%;
    max-width: 100px;
    margin: auto;
    position: relative;
    top: 50%;
    -moz-transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -o-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
    opacity: 0;
    transform: scaleX(0);
    transition: .6s;
    transition-delay: .8s;
    transform-origin: center;
}

.header-search-active.header-search-popup .search-box {
    max-width: 100%;
    height: auto;
    opacity: 1;
    width: 100%;
    transform: scaleX(1);
}

.header-search-popup .search-form {
    display: flex;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.header-search-popup form .search-form-control {
    max-height: 60px;
    padding: 15px;
    padding-right: 50px;
    font-size: 15px;
    margin: 0 10px;
    border-radius: 0;
    box-shadow: var(--sp-shadow);
    border: 1px solid;
    border-radius: 50px;
    border-color: var(--sp-border-dark);
    background: var(--dark-2);
    color: var(--sp-primary);
}

.header-search-popup form .search-form-control {
    width: -webkit-fill-available;
}

.header-search-popup form input.search-form-control::placeholder {
    color: var(--sp-primary);
}

.header-search-popup .search-form button.search-submit {
    position: absolute;
    top: 0;
    right: 14px;
    bottom: 0;
    margin: auto 0;
    font-size: 16px;
    text-align: center;
    max-width: 50px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    background-color: var(--sp-secondary);
    color: var(--sp-white);
	border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-style.header-search-close {
    position: absolute;
    width: 45px;
    height: 45px;
    border: none;
    background: var(--sp-white);
    color: var(--sp-secondary);
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
}

.header-search-popup .header-search-close {
    border-radius: 50%;
    border: 1px solid var(--sp-border-dark);
}

.close-style:before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.close-style:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close-style:before,
.close-style:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 20px;
    height: 2px;
    background: var(--sp-secondary);
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
}

.close-style:hover:before,
.close-style:hover:after,
.close-style:focus:before,
.close-style:focus:after {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.header-search-popup .breaking-news-section .container-wrapper {
    border: none;
    background: var(--sp-primary);
}

.header-search-popup .breaking-news-section .breaking-news-slider .item a {
    color: var(--sp-white);
    font-weight: 400;
}

.header-search-popup .breaking-news-section .news-title {
    font-size: 16px;
}

/*===== // =====*/

/*===== 04. Breaking News Section =====*/


.breaking-news-section.breaking-news-home-one {
    padding: 5px 0;
}

.breaking-news-section.breaking-news-home-two,
.breaking-news-section.breaking-news-home-three {
    background: var(--dark-1);
}

.breaking-news-section .container-wrapper {
    display: flex;
    align-items: center;
    background: var(--dark-1);
    justify-content: space-between;
    border: 1px solid var(--sp-border-dark);
    border-radius: 40px;
    overflow: hidden;
}

.breaking-news-section .news-title {
    position: relative;
    overflow: hidden;
    padding: 10px 15px;
    font-weight: 600;
    font-size: 18px;
    background: var(--sp-secondary);
}

.breaking-news-section .news-title h6 {
    font-weight: 700;
}

.breaking-news-section .news-title::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.5),
            transparent);
    animation: shineLight 3s ease-in-out infinite;
}

@keyframes shineLight {
    0% {
        left: -100%;
        transition-property: left;
    }

    100% {
        left: 100%;
        transition-property: left;
    }
}

.custom-owl-nav button {
    width: 30px;
    height: 30px;
    line-height: 32px;
    padding: 0;
    border: none;
    font-size: 65%;
    text-align: center;
    border-radius: 50%;
    color: var(--sp-white);
    background-color: var(--sp-primary);
    transition: var(--sp-transition);
}

.custom-owl-nav button:hover,
.custom-owl-nav button:focus {
    background-color: var(--sp-secondary);
}

.breaking-news-slider {
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    padding: 5px 10px;
    padding-right: 80px;
}

.breaking-news-slider .item {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 500;
    color: var(--sp-primary);
}

.breaking-news-slider .item.tag {
    font-size: 14px;
    padding: 0 5px;
    border-radius: 10px;
    background-color: #ffffff5c;
}

.breaking-news-slider .item.tag a:focus,
.breaking-news-slider .item.tag a:hover {
    color: var(--sp-secondary);
}

.breaking-news-slider .item i {
    color: var(--sp-secondary);
}

.breadcrumb-section .breaking-news-slider .item a {
    color: var(--sp-white);
}

.breaking-news-slider .item img {
    width: 30px;
    border: 1px solid;
    border-radius: 50%;
}


.breaking-news-slider.owl-carousel .owl-nav button.owl-prev,
.breaking-news-slider.owl-carousel .owl-nav button.owl-next {
    width: 30px;
    height: 30px;
    line-height: 32px;
}

.breaking-news-slider.owl-carousel .owl-nav button.owl-prev {
    left: unset;
    right: 42px;
}

.breaking-news-home-one .breaking-news-slider.owl-carousel .owl-nav button,
.breaking-news-home-two .breaking-news-slider.owl-carousel .owl-nav button,
.breaking-news-home-three .breaking-news-slider.owl-carousel .owl-nav button,
.breaking-news-home-four .breaking-news-slider.owl-carousel .owl-nav button,
.breaking-news-home-five .breaking-news-slider.owl-carousel .owl-nav button {
    color: var(--sp-white);
    background-color: var(--sp-primary);
}

.breaking-news-section.breaking-news-home-two .container-wrapper,
.breaking-news-section.breaking-news-home-three .container-wrapper,
.breaking-news-section.breaking-news-home-five .container-wrapper {
    border-radius: var(--sp-radius);
}

.breaking-news-home-two .breaking-news-slider.owl-carousel .owl-nav button,
.breaking-news-home-three .breaking-news-slider.owl-carousel .owl-nav button,
.breaking-news-home-five .breaking-news-slider.owl-carousel .owl-nav button {
    width: 30px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: var(--sp-radius);
}

/*===== // =====*/

/*===== 05. Latest News Section =====*/

.news-slider .news-item {
    overflow: hidden;
    border-top-left-radius: var(--sp-radius);
    border-top-right-radius: var(--sp-radius);
}

.news-slider .news-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latest-news-section .news-slider .post-card .post-meta {
    padding-top: 6px;
}

.latest-news-section .breaking-news-video>div {
    width: 100%;
    border-radius: var(--sp-radius);
    object-fit: cover;
}

.latest-news-section .video-box-footer {
    background: var(--sp-primary) url(../images/home/latest-news/pattern.png) no-repeat center center;
    background-size: 100% 100%;
    border-radius: var(--sp-radius);
    margin-top: 20px;
}

.latest-news-section .video-box-footer p {
    margin: 0;
    padding: 8px;
	margin-left: 40px;
}

.latest-news-section .video-box-footer p a{
    color: var(--sp-white);
	font-weight: 600;
}

.latest-news-section .video-box-footer h6 {
    background: var(--sp-secondary);
    padding: 8px 40px 8px 15px;
    font-weight: 700;
    width: fit-content;
    font-style: italic;
    color: var(--sp-white);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}

.latest-news-section .popular-trending-sidebar {
    overflow: hidden;
    border: 1px solid var(--sp-border-dark);
    border-radius: var(--sp-radius);
    background: var(--dark-1);
}

.latest-news-section .popular-trending-sidebar .news-top-btn button {
    border: 0;
    font-weight: 600;
    padding: 10px;
    color: var(--sp-white);
    background-color: var(--sp-primary);
    transition: var(--sp-transition);
}

.latest-news-section .popular-trending-sidebar .news-top-btn button.active {
    background-color: var(--sp-secondary);
}


/* Popular Trending List*/
.post-list {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sp-primary);
}

a.img-block {
    display: block;
}

.post-list .post-thumbnail {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
	margin: 0;
}

.post-list .post-thumbnail .count-badge {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    color: var(--sp-white);
    background-color: var(--sp-secondary);
    border-radius: 50%;
}

.post-list .post-thumbnail .play-time {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 12px;
    padding: 0 5px;
    color: var(--sp-white);
    background-color: var(--sp-secondary);
    border-top-right-radius: var(--sp-radius);
}

.post-list .post-thumbnail .play-time::before {
    content: "\f04b";
    font-family: 'FontAwesome';
    margin-right: 3px;
}

.post-list .category {
    gap: 4px;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.post-list .category a {
    font-size: 10px;
    padding: 0 4px;
    border-radius: 2px;
    text-transform: uppercase;
    color: var(--sp-white);
    background-color: var(--sp-secondary);
}

.post-list .category a:hover {
    color: var(--sp-white);
}

.post-list .category a:nth-child(2) {
    /* background-color: var(--sp-primary); */
}

.post-list h5 {
    font-size: 14px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.post-list .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.post-list .post-meta a {
    font-size: 12px;
    font-weight: 600;
}

.post-list .post-meta i {
    color: var(--sp-secondary);
}

.latest-news-section .post-list {
    padding: 10px 0;
    border-bottom: 1px solid var(--sp-border-dark);
}

.latest-news-section .post-list .post-thumbnail {
    border-radius: var(--sp-radius);
}

.latest-news-section .post-list:last-child {
    border-bottom: none;
}

/*===== // =====*/

/* Wave Effect */
.wave-effect {
    position: relative;
}

.wave-effect::before,
.wave-effect::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.wave-effect::before {
    animation: wave1 2s infinite;
}

.wave-effect::after {
    animation: wave2 2s infinite;
}

@keyframes wave1 {
    0% {
        box-shadow: 0 0 0 0 var(--sp-secondary);
    }

    100% {
        box-shadow: 0 0 0 0.3em var(--sp-secondary);
        opacity: 0;
    }
}

@keyframes wave2 {
    0% {
        box-shadow: 0 0 0 0 var(--sp-secondary);
    }

    100% {
        box-shadow: 0 0 0 0.6em var(--sp-secondary);
        opacity: 0;
    }
}

/* Post Card */
.post-card {
    position: relative;
    overflow: hidden;
}

.post-card .post-thumbnail img {
    width: 100%;
    opacity: 1;
    transition: all 1.5s ease-out;
}

.post-card:focus-within .post-thumbnail img,
.post-card:hover .post-thumbnail img {
    transform: scale3d(1.1, 1.1, 1);
}

.post-card .inner-content {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 8px;
}

.post-card .post-title a {
    color: var(--sp-white);
    margin-bottom: 2px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-card .post-title a:focus,
.post-card .post-title a:hover {
    color: var(--sp-secondary);
}

/* News Category*/
.news-category {
    gap: 4px;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.news-category a {
    font-size: 14px;
    font-weight: 500;
    color: var(--sp-secondary);
}

.news-category a:nth-child(2) {
    color: color-mix(in hsl longer hue, var(--sp-primary) 90%, var(--sp-secondary) 90%);
}

.news-category ul {
    gap: 4px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--sp-secondary);
}

.news-category ul li:nth-child(2) {
    color: color-mix(in hsl longer hue, var(--sp-primary) 90%, var(--sp-secondary) 90%);
}

.news-share a {
    color: var(--sp-white);
}
.news-share a:focus,
.news-share a:hover{
    color: var(--sp-secondary);
} 

/* News Meta */
.post-card .post-meta {
    font-size: 13px;
    font-weight: 500;
    padding-top: 10px;
    border-top: 1px solid var(--sp-border-light);
}

.post-card .post-meta ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sepa {
	display: inline-block;
    width: 1px;
    height: 18px;
    vertical-align: middle;
    background: #ffffff40;
}

.post-card .post-meta ul li {
    /* margin-right: 5px; */
    /* padding-right: 5px; */
    /* border-right: 1px solid var(--sp-border-light); */
}

.post-card .post-meta ul li:nth-last-child(-n+2) {
    border: none;
}

.post-card .post-meta ul li:last-child {
    border: none;
    margin-right: 0;
    padding-right: 0;
    /* margin-left: auto; */
}

.post-card .post-meta ul i {
    color: var(--sp-secondary);
}

.latest-news-section .post-card .post-meta.top-border {
    padding-top: 5px;
}

/* Overlay Area*/
.overlay-area .post-content {
    background: linear-gradient(to top, rgb(0 0 0 / 90%), #00000000);
    height: 60%;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

.overlay-area .post-content .inner-content {
    bottom: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}


/* OWL Nav */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 65%;
    border-radius: 50%;
    color: var(--sp-secondary);
    box-shadow: var(--sp-shadow);
    background: var(--sp-white);
}

.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover,
.owl-carousel .owl-nav button.owl-prev:focus,
.owl-carousel .owl-nav button.owl-next:focus {
    color: var(--sp-white);
    background: var(--sp-secondary);
}

.owl-carousel .owl-nav button.owl-prev {
    left: 10px;
}

.owl-carousel .owl-nav button.owl-next {
    right: 8px;
}

/**** Heading Default *****/
.heading-default {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    justify-content: space-between;
    border-bottom: 1px solid var(--sp-secondary);
}

.heading-default .title-container {
    display: grid;
    flex-shrink: 0;
    align-items: center;
    grid-template-columns: auto auto;
    overflow: hidden;
    min-width: 250px;
    border-top-left-radius: var(--sp-radius);
    border-top-right-radius: var(--sp-radius);
    border: 1px solid var(--sp-secondary);
    border-bottom: none;
    background-color: var(--sp-secondary);
}

.heading-default .title-container h5 {
    padding: 10px 12px;
    font-weight: 700;
    font-style: italic;
	margin: 0;
}

.heading-default .title-container h5:nth-child(2) {
    padding-left: 25px;
    width: 100%;
    background-color: var(--sp-primary);
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 0% 100%);
}

.heading-default .custom-owl-nav {
    flex-shrink: 0;
}

/**** filter Items *****/

.filter-container {
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
}

.filter-container .tab-filter-slider {
    font-weight: 600;
    padding: 8px 70px;
}

.filter-container .tab-filter-slider .owl-item {
    text-align: center;
}

.filter-container .tab-filter-slider a:focus,
.filter-container .tab-filter-slider a:hover,
.filter-container .tab-filter-slider a.active {
    color: var(--sp-secondary);
}

.filter-container .owl-carousel .owl-nav button.owl-prev,
.filter-container .owl-carousel .owl-nav button.owl-next {
    width: 30px;
    height: 30px;
    font-size: 65%;
    color: var(--sp-white);
    background-color: var(--sp-primary);
    transition: var(--sp-transition);
}

.filter-container .owl-carousel .owl-nav button.owl-prev {
    left: unset;
    right: 35px;
}

.filter-container .owl-carousel .owl-nav button.owl-next {
    right: 0;
}

.filter-container .owl-carousel .owl-nav button.owl-prev:hover,
.filter-container .owl-carousel .owl-nav button.owl-next:hover,
.filter-container .owl-carousel .owl-nav button.owl-prev:focus,
.filter-container .owl-carousel .owl-nav button.owl-next:focus {
    background-color: var(--sp-secondary);
}

.owl-carousel .owl-nav .disabled {
    cursor: not-allowed;
    opacity: 0.5;
    /* pointer-events: none; */
}

.previously-missed-slider .post-card {
    border-radius: var(--sp-radius);
}

.previously-missed-slider .post-card .post-meta {
    font-size: 12px;
    margin-bottom: 5px;
}

/*===== // =====*/

/*===== 06. Entertenment News Section =====*/

.entertenment-news-section .post-list {
    padding: 10px;
    margin-bottom: 18px;
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    background-color: var(--dark-1);
}

.entertenment-news-section .post-list:last-child {
    margin-bottom: 0;
}

.entertenment-news-section .news-slider .post-card .inner-content {
    padding: 10px 18px;
}

.entertenment-news-section .news-slider .news-item {
    border-radius: var(--sp-radius);
}

.entertenment-news-section .rigth-entertenment-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.entertenment-news-section .rigth-entertenment-container .post-card {
    border-radius: var(--sp-radius);
}

/*===== // =====*/

/*===== 07. Tranding News Section =====*/

.tranding-news-section .post-card .inner-content {
    padding: 10px 20px;
}

.tranding-news-section .post-card .post-meta {
    border-top: none;
}

.tranding-news-section .post-card .news-category {
    margin-bottom: 0;
}

.tranding-news-section .post-card .post-meta ul li:nth-last-child(-n+2) {
    border-right: 1px solid var(--sp-border-light);
}

.tranding-news-section .post-card .post-meta ul li:last-child {
    margin-left: unset;
    border: none;
}

.tranding-news-wrapper {
    padding: 18px 10px 18px 18px;
    box-shadow: var(--sp-shadow);
    background-color: var(--dark-1);
}

.tranding-news-wrapper .tranding-news-right {
    overflow-y: auto;
    /* height: 510px; */
	height: auto;
    padding-right: 15px;
    transition: var(--sp-transition);
}

.tranding-news-right::-webkit-scrollbar-track {
    background: var(--dark-2);
    border-radius: 15px;
}

.tranding-news-right::-webkit-scrollbar-thumb {
    background: var(--sp-secondary);
}

.tranding-news-right::-webkit-scrollbar-thumb:hover {
    background: var(--sp-primary);
}

.tranding-news-section .post-list {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 2px;
    box-shadow: 0 0 5px var(--sp-shadow);
    background-color: var(--dark-2);
}

.tranding-news-section .post-list:last-child {
    margin-bottom: 0;
}

.ads-section>a {
    display: block;
    overflow: hidden;
    border-radius: var(--sp-radius);
}

.tranding-news-section .post-card .play-btn {
    width: 70px;
    height: 70px;
    font-size: 130%;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    z-index: 1;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 80%;
    color: var(--sp-white);
    transform: translate(-50%, -50%);
    background-color: var(--sp-secondary);
}

a.play-btn:hover {
    color: var(--sp-white);
    background-color: var(--sp-primary);
}

a.play-btn:focus {
    color: var(--sp-white);
}

.play-btn.play {
    opacity: 0;
}

.autoPlayVideo:focus-within .play-btn.play,
.autoPlayVideo:hover .play-btn.play {
    opacity: 1;
}

.play-btn.play i::before {
    content: '\f04c';
}

.overlay-area:has(.plyrMasterVideo) .post-content,
.overlay-area:has(.autoPlayVideo) .post-content {
    height: 30%;
}

#player .ytp-chrome-top-buttons {
    display: none !important;
}

.plyr--video,
.plyrMasterVideo {
    /* height: 100%; */
}

.post-card .plyr__poster {
    background-size: cover;
}

.plyr video {
    object-fit: cover;
}

/*===== 08. Business News Section =====*/


.business-news-section .post-card .play-btn {
    width: 70px;
    height: 70px;
    font-size: 130%;
}

.business-news-section .post-list {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    background-color: var(--dark-1);
}

.business-news-section .post-list:last-child {
    margin-bottom: 0;
}

.business-news-section .post-card {
    border-radius: var(--sp-radius);
}

.business-news-section .post-card .inner-content {
    padding: 10px 20px;
}

.business-news-section .post-card .post-meta {
    border-top: none;
}

.business-news-section .post-card .news-category {
    margin-bottom: 0;
}

.business-news-section .post-card .post-meta ul li:nth-last-child(-n+2) {
    border-right: 1px solid var(--sp-border-light);
}

.business-news-section .post-card .post-meta ul li:last-child {
    margin-left: unset;
    border: none;
}

/*===== // =====*/

/*===== 09. Post Slider Section =====*/

.post-slider-section .post-list .post-thumbnail {
    overflow: unset;
}

.post-slider-section .post-list .post-thumbnail .img-block img {
    border-radius: 50%;
}

.post-card,
.post-card .post-thumbnail {
    /* height: 100%; */
	margin: 0;
}

.autoPlayVideo {
    width: 100%;
    height: 100%;
}

/*===== // =====*/

/*===== 10. Sports Slider Section =====*/

.sports-news-section .post-card {
    border-radius: var(--sp-radius);
}

.sports-news-section .post-card .post-title a {
    margin-bottom: 5px;
}

.latest-fashion-section .post-card .inner-content,
.sports-news-section .post-card .inner-content {
    padding: 8px 15px;
}

.sports-news-section .post-list {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    background-color: var(--dark-1);
}

.sports-news-section .post-list:last-child {
    margin-bottom: 0;
}

/*===== // =====*/

/*===== 11. Latest Fashion Section =====*/

.latest-fashion-section .post-card {
    border-radius: var(--sp-radius);
}

.latest-fashion-section .latest-fashion-container .post-card {
    margin-bottom: 24px;
}

.latest-fashion-section .latest-fashion-container .post-card:last-child {
    margin-bottom: 0;
}

/*===== // =====*/

/*===== 12. Astrology News Section =====*/

.zodiac-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 30px;
    padding: 15px 0 25px;
    justify-items: center;
}

.zodiac-item {
    cursor: pointer;
    display: block;
    margin: 15px 0;
}

.zodiac-item.active .zodiac-img,
.zodiac-item:focus .zodiac-img,
.zodiac-item:hover .zodiac-img {
    background: var(--sp-secondary);
    box-shadow: 0 0 0 3px var(--dark-2), 0 0 0 8px var(--sp-secondary);
}

.zodiac-item.active .zodiac-label,
.zodiac-item:focus .zodiac-label,
.zodiac-item:hover .zodiac-label {
    color: var(--sp-secondary);
}

.zodiac-item .zodiac-img {
    background: var(--sp-primary);
    width: 50px;
    height: 50px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    box-shadow: 0 0 0 3px var(--dark-2), 0 0 0 8px var(--sp-primary);
    transition: all .3s ease;
}

.zodiac-item .zodiac-img img {
    width: 25px;
    height: 25px;
	border-radius: 50%;
    /* filter: brightness(0) invert(1); */
}

.zodiac-item .zodiac-label {
    margin-top: 15px;
    font-weight: 700;
    text-align: center;
    color: var(--sp-primary);
}

.post-astrology {
    opacity: 0;
    overflow: hidden;
    background: var(--dark-1);
    box-shadow: var(--sp-shadow);
    border-radius: var(--sp-radius);
    transform: translateY(25px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: none;
}

.post-astrology.show {
    opacity: 1;
    transform: translateY(0);
}

.post-astrology .post-content {
    padding: 20px;
}

.post-astrology .post-thumbnail {
    overflow: hidden;
}

.post-astrology .post-thumbnail img {
    width: 100%;
    opacity: 1;
    transition: all 1.5s ease-out;
}

.post-astrology:focus-within .post-thumbnail img,
.post-astrology:hover .post-thumbnail img {
    transform: scale3d(1.1, 1.1, 1);
}

.post-astrology .post-title {
    font-weight: 700;
}

.post-astrology .desc {
    font-weight: 500;
    color: var(--sp-primary);
}

.post-astrology .post-title a {
    color: var(--sp-primary);
    margin-bottom: 2px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-astrology .post-title a:hover,
.post-astrology .post-title a:focus {
    color: var(--sp-secondary);
}

.post-astrology .category a {
    font-size: 12px;
    padding: 0 5px;
    border-radius: 2px;
    text-transform: uppercase;
    color: var(--sp-white);
    background-color: var(--sp-secondary);
}

.horoscope-api-result {
	color: initial;
    padding: 30px;
    border-radius: 10px;
    margin-top: 30px;
    box-shadow: inset 0 0 15px 1px #d9d9d9;
}
.horoscope-api-result h4 {
	margin-bottom: 15px;
}

/*===== // =====*/

/*===== 13. Editors Section =====*/

.editors-section .post-card {
    border-radius: var(--sp-radius);
}

.editors-section .post-card .inner-content {
    padding: 8px 15px;
}

/*===== // =====*/

/*===== 14. Web Store Section =====*/

.web-item {
    padding: 5px;
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    background-color: var(--dark-1);
}

.web-item .web-store-img {
    position: relative;
    overflow: hidden;
    border-radius: var(--sp-radius);
}

.web-item .web-store-img img {
    width: 100%;
    object-fit: cover;
}

.web-item .inner-content {
    padding: 10px 6px;
    text-align: center;
}

.web-item .inner-content .title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 2px;
}

.web-item .inner-content .time {
    font-size: 14px;
    color: var(--sp-secondary);
}

.web-item .web-store-img.overlay-area::after {
    content: '';
    position: absolute;
    height: 60%;
    width: 100%;
    left: 0;
    bottom: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 100%), #00000000);
}

/*===== // =====*/

/*===== 15. Blog Section =====*/

figure {
	margin: 0;
}

.posts {
    display: grid;
    padding: 0;
    border: none;
    row-gap: 25px;
    column-gap: 25px;
    grid-template-columns: repeat(3, 1fr);
}

.post-author img {
	height: auto;
}

.posts.grid3 {
    grid-template-columns: repeat(3, 1fr);
}

.posts.grid2 {
    grid-template-columns: 1fr 1fr;
}

.posts.list {
    grid-template-columns: 1fr;
}

.post-items {
    position: relative;
    overflow: hidden;
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    background-color: var(--dark-1);
}

.posts.list .post-items {
    display: grid;
    grid-template-columns: 38% auto;
}

.post-items.no-img {
    margin-top: auto;
}

.posts.list .post-items.no-img {
    display: flex;
    flex-direction: row;
}

.post-heading {
    padding: 16px 20px;
    border-radius: var(--sp-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid var(--sp-secondary);
    background: linear-gradient(115deg, var(--sp-secondary) 50%, var(--sp-primary) 50%);
}

.post-heading h6 {
    font-weight: 700;
}


.post-items .featured-image {
    position: relative;
    overflow: hidden;
    /* height: 100%; */
}

.post-items .featured-image>a {
    /* height: 100%; */
    display: block;
}

.post-items .featured-image>a>img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: all 1.5s ease-out;
	/* max-width: 200px; */
}

.post-items:focus-within .featured-image>a>img,
.post-items:hover .featured-image>a>img {
    transform: scale3d(1.1, 1.1, 1);
}

.post-items .post-content {
    padding: 15px 10px;
    color: var(--sp-primary);
    background-image: url(../images/blog/pattern.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

.posts.list .post-items .post-content {
    padding: 25px 20px;
}

.post-items .post-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.post-items .post-title a {
    -webkit-line-clamp: 2;
}

.post-items p.text {
    -webkit-line-clamp: 3;
}

.post-items .btn.more-link {
    padding: 10px 20px;
    font-weight: 600;
    color: var(--sp-white);
    background-color: var(--sp-primary);
}

.post-items .btn.more-link:focus,
.post-items .btn.more-link:hover {
    background-color: var(--sp-secondary);
}

.post-items .post-meta {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.1;
    gap: 6px;
    display: flex;
    flex-wrap: wrap;
}

.post-items .post-meta i {
    color: var(--sp-secondary);
}

.post-items .post-meta .post-tags a {
    color: var(--sp-white);
    background: var(--sp-secondary);
    padding: 1px 4px;
    font-size: 10px;
    font-weight: 400;
    border-radius: 2px;
    text-transform: uppercase;
}

.post-items .post-meta .post-tags a:nth-child(2) {
    background: var(--sp-primary);
}

.post-items .post-meta .post-tags a>i {
    color: var(--sp-white);
}

.post-items .featured-image .author-date {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.posts.list .post-items .featured-image .author-date {
    flex-direction: column;
    height: 100%;
    width: unset;
}

.post-items.no-img .author-date {
    position: unset;
}

.author-date:has(.post-date):has(.post-author)::before  {
    content: '';
    position: absolute;
    width: 85%;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    background-color: var(--sp-primary);
}

.author-date:has(.post-date):has(.post-author)::after {
    content: '';
    position: absolute;
    width: 15%;
    height: 2px;
    top: 50%;
    left: 50%;
    z-index: 0;
    background-color: var(--sp-secondary);
    animation: slideLineLeftToRight 5s infinite ease-in-out;
}

@keyframes slideLineLeftToRight {
    0% {
        transform: translateX(-200%) translateY(-50%);
    }

    50% {
        transform: translateX(100%) translateY(-50%);
    }

    100% {
        transform: translateX(-200%) translateY(-50%);
    }
}

@keyframes slideLineTopToBottom {
    0% {
        transform: translateX(-50%) translateY(-200%);
    }

    50% {
        transform: translateX(-50%) translateY(100%);
    }

    100% {
        transform: translateX(-50%) translateY(-200%);
    }
}

.posts.list .author-date::after {
    width: 2px;
    height: 15%;
    animation: slideLineTopToBottom 5s infinite ease-in-out;
}

.posts.list .author-date::before {
    width: 2px;
    height: calc(100% - 20px);
}

.post-items .author-date .post-author {
    display: block;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: var(--sp-radius);
    object-fit: contain;
    z-index: 1;
}

.post-items .author-date .post-date {
    z-index: 1;
}

.post-items .author-date .post-date>a {
    color: var(--sp-white);
    background-color: var(--sp-secondary);
    border-radius: var(--sp-radius);
    width: 60px;
    height: fit-content;
    text-align: center;
    display: block;
    overflow: hidden;
}

.post-items .author-date .post-date .meta-info span {
    display: block;
    line-height: 1.3;
    font-weight: 600;
    font-size: 15px;
}

.post-items .author-date .post-date .meta-info span.blog-date {
    font-size: 30px;
    font-weight: 700;
    padding-top: 8px;
    line-height: 0.8;
}

.post-items .author-date .post-date .meta-info span.year {
    padding-bottom: 2px;
    background-color: var(--sp-primary);
}

/*==== Pagination ====*/

.pagination-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 6px;
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border-dark);
}

.pagination {
    display: inline-flex;
}

.pagination-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}

.pagination .nav-links {
    display: inline-flex;
    gap: 6px;
}

.pagination .nav-links .page-numbers {
    display: block;
    width: 45px;
    height: 45px;
    font-weight: 700;
    line-height: 44px;
    border-radius: 50%;
    text-align: center;
    border: 1px solid var(--sp-border-dark);
}

.pagination .nav-links .page-numbers:focus,
.pagination .nav-links .page-numbers.active,
.pagination .nav-links .page-numbers:hover {
    color: var(--sp-white);
    background-color: var(--sp-secondary);
}

.pagination-container .pagination .nav-links .page-numbers {
    width: 30px;
    height: 30px;
    font-weight: 700;
    line-height: 30px;
}

.gridlist-toggle {
    display: flex;
    gap: 10px;
    margin-right: 5px;
}

.gridlist-toggle>a {
    width: 35px;
    height: 35px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    color: var(--sp-primary);
    border: 1px solid;
}

.gridlist-toggle>a.active,
.gridlist-toggle>a:focus,
.gridlist-toggle>a:hover {
    color: var(--sp-secondary);
}

.pagination-result-count {
    color: color-mix(in oklab, var(--sp-border-light) 100%, #ffffff 50%);
    font-size: 14px;
}

.page-selector select {
    color: color-mix(in oklab, var(--sp-border-light) 100%, #ffffff 50%);
    padding: 8px 10px;
}
.pagination-toolbar select {
    background-color: transparent;
    border: 1px solid var(--sp-border-dark);  
	font-size: 86%;
}
/*===== // =====*/

/*===== 16. Footer Section =====*/

.footer-section {
    position: relative;
    overflow: hidden;
    background-color: var(--sp-primary);
}

.footer-section>div {
    position: relative;
    z-index: 1;
}

.footer-section a {
    color: var(--sp-white);
}

.footer-section .wp-block-categories-list li.cat-item {
    border-bottom: 0;
}

.footer-section a:hover,
.footer-section a:focus {
    color: var(--sp-secondary);
}

.footer-section .bubbles-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.footer-top .breaking-news-section .container-wrapper {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--sp-primary) 100%, #ffffff 20%);
}

.footer-top .breaking-news-slider .item {
    color: var(--sp-white);
}

.footer-top .custom-owl-nav button {
    color: var(--sp-primary);
    background: var(--sp-white);
}

.footer-top .custom-owl-nav button:hover,
.footer-top .custom-owl-nav button:focus {
    color: var(--sp-white);
    background: var(--sp-secondary);
}

.footer-post,
.footer-above {
    border-top: 1px solid color-mix(in srgb, var(--sp-primary) 100%, #ffffff 20%);
    border-bottom: 1px solid color-mix(in srgb, var(--sp-primary) 100%, #ffffff 20%);
}

.footer-post .post-list {
    padding: 4px;
    border-radius: var(--sp-radius);
    border: 1px solid color-mix(in srgb, var(--sp-primary) 100%, #ffffff 20%);
}

.footer-post .post-slider-section .post-list .post-thumbnail .img-block img {
    border-radius: var(--sp-radius);
    width: 80px;
}

.footer-copyright .copyright-text {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 500;
}

.footer-copyright .row>div:has(.widget-left) {
    text-align: left;
}

.footer-copyright .row>div:has(.widget-right) {
    text-align: right;
}

.footer-section .footer-copyright .copyright-text a {
    color: var(--sp-secondary);
    font-weight: 600;
    border-bottom: 1px solid;
    transition: var(--sp-transition);
}

.brand ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    float: right;
}

.brand ul li {
    display: inline-block;
    margin-left: 30px;
}

.brand ul li>a {
    font-size: 18px;
    font-weight: 500;
}

.brand ul li>a.active,
.brand ul li>a:focus,
.brand ul li>a:hover {
    color: var(--sp-secondary);
    border-bottom: 1px solid;
}

.footer-above {
    padding: 40px 0;
}

.footer-above .above-item a {
    font-size: 18px;
    font-weight: 600;
    color: var(--sp-white);
}

.footer-above .above-item .icon {
    width: 40px;
    height: 40px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.widget-social-icons .fa-facebook,
.bg-facebook {
    background-color: #0148a2;
}

.widget-social-icons .fa-twitter,
.bg-twitter {
    background-color: #000000;
}

.widget-social-icons .fa-instagram,
.bg-instagram {
    background-color: #e52b6a;
}

.widget-social-icons .fa-pinterest-p,
.bg-pinterest {
    background-color: #d20001;
}

.widget-social-icons .fa-youtube-play,
.bg-youtube {
    background-color: #ff0103;
}

.widget-social-icons .fa-envelope,
.bg-envelope {
    background-color: #0085fe;
}

.bg-vimeo {
    background-color: #1ab7ea;
}

.bg-skype {
    background-color: #224b79;
}

.bg-linkedin {
    background-color: #0274b3;
}

.bg-quora {
    background-color: #b92b27;
}

.bg-medium {
    background-color: #01ab6c;
}

.bg-reddit {
    background-color: #ff4500;
}

.border-box {
    display: flex;
    justify-content: space-between;
}

.border-box>div {
    padding: 20px;
    width: 70%;
    border-top: 1px solid color-mix(in srgb, var(--sp-primary) 100%, #ffffff 20%);
    border-right: 1px solid color-mix(in srgb, var(--sp-primary) 100%, #ffffff 20%);
}

.border-box>div:first-child {
    border-left: 1px solid color-mix(in srgb, var(--sp-primary) 100%, #ffffff 20%);
}

.border-box .live-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.live-text {
    font-size: 35px;
    font-weight: bold;
    line-height: 1;
}

.live-text span {
    display: block;
    font-size: 25px;
}

.live-indicator {
    width: 60px;
    height: 60px;
    background-color: var(--sp-secondary);
    border-radius: 50%;
    position: relative;
}

.live-indicator::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.live-indicator::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    border: 2px solid #ffffff63;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: bubblePulseCenter 1.5s infinite ease-in-out;
}


@keyframes bubblePulseCenter {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.5);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes bubblePulseY {
    0% {
        transform: translateY(-50%) scale(1);
    }

    50% {
        transform: translateY(-50%) scale(1.4);
    }

    100% {
        transform: translateY(-50%) scale(1);
    }
}

.mfp-iframe-holder .mfp-close {
    background: transparent;
    width: 30px;
}


/****** plyr *****/
.plyr__controls .plyr__controls__item.plyr__progress__container {
    width: 95%;
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
}

.plyr__controls .plyr__controls__item:first-child {
    margin-right: unset;
}

.plyr__controls .plyr__controls__item:nth-child(3) {
    margin-right: auto;
}

.plyr--video .plyr__control:focus,
.plyr--video .plyr__control:focus-visible,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
    background: transparent;
}

.plyr--full-ui input[type=range] {
    color: var(--sp-secondary);
}

.plyr__volume input[type=range] {
    color: var(--sp-white);
}

.plyr--full-ui.plyr--video .plyr__control--overlaid {
    background: #ffffff79;
    opacity: 1;
}

.btn-check:focus+.btn,
.btn:focus {
    outline: 1px dotted;
    box-shadow: none;
}

.plyrMasterVideo.btn66 .plyr--full-ui.plyr--video .plyr__control--overlaid {
    width: 65px;
    height: 65px;
    background: var(--sp-secondary);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plyrMasterVideo.btn66 .plyr--full-ui.plyr--video .plyr__control--overlaid::before,
.plyrMasterVideo.btn66 .plyr--full-ui.plyr--video .plyr__control--overlaid::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.plyrMasterVideo.btn66 .plyr--full-ui.plyr--video .plyr__control--overlaid::before {
    animation: wave1 2s infinite;
}

.plyrMasterVideo.btn66 .plyr--full-ui.plyr--video .plyr__control--overlaid::after {
    animation: wave2 2s infinite;
}

.footer_content_wrap {
    position: relative;
}

.footer_content_wrap:not(:has(.custom-logo-link))>span {
    position: absolute;
    top: 10px;
    right: 15px;
    color: var(--sp-white);
    cursor: pointer;
    z-index: 2;
}

.footer_content_wrap:not(:has(.custom-logo-link))>span .fa-minus-circle {
    color: var(--sp-secondary);
}

/*===== // =====*/

/*===== 17. Breadcrumb Section =====*/

.breadcrumb-section {
    background-size: cover;
    background-repeat: no-repeat;
}

.breadcrumb-section .breadcrumb-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-radius: var(--sp-radius);
    border: 1px solid color-mix(in srgb, var(--sp-primary) 100%, #606060 60%);
    background: linear-gradient(115deg, var(--sp-secondary) 50%, transparent 50%);
}

.breadcrumb-heading h4 {
    font-weight: 600;
}

.breadcrumb-list {
    display: flex;
	flex-wrap: wrap;
    gap: 2px;
    align-items: center;
	justify-content: end;
}

.breadcrumb-list li {
    display: inline-flex;
    align-items: center;
    word-break: break-word;
    font-weight: 600;
    font-size: 18px;
	text-align: right;
}

.breadcrumb-list li a, .breadcrumb-list li a i {
    color: var(--sp-white);
}

.breadcrumb-list li a:hover,
.breadcrumb-list li a:focus {
    color: var(--sp-secondary);
}

.breadcrumb-list li i {
    width: 35px;
    height: 35px;
    font-size: 20px;
    text-align: center;
    line-height: 35px;
    margin-right: 10px;
    border-radius: 50%;
    background-color: var(--sp-secondary);
}

.breadcrumb-section .breaking-news-section .container-wrapper {
    background-color: color-mix(in srgb, var(--sp-primary) 100%, #000000 20%);
    border: 1px solid color-mix(in srgb, var(--sp-primary) 100%, #ffffff 12%);
    border: 1px solid color-mix(in srgb, var(--sp-primary) 100%, #ffffff 12%);
}

.breadcrumb-section .breaking-news-slider .item {
    color: var(--sp-white);
}

.breadcrumb-section .breaking-news-section {
    padding-bottom: 10px;
}

/*===== // =====*/

/*===== 18. Author Section =====*/

.author-section {
    padding: 50px 0;
    color: var(--sp-primary);
    background-position: bottom;
    background-repeat: no-repeat;
    background-color: var(--dark-1);
    background-image: url(../images/blog/author/pattern.png);
}

html.dark-mode .author-section {
    background-image: url(../images/blog/author/pattern-dark.png);
}

.blog-post.author-details .media {
    display: flex;
    gap: 20px;
}

.blog-post.author-details .media .auth-mata img {
    border: 2px solid var(--sp-primary);
    border-radius: 50%;
}

.blog-post.author-details .media-body h2 {
    display: inline-block;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--sp-secondary);
}

.blog-post.author-details .media-body h4 {
    margin-bottom: 10px;
}

.blog-post.author-details .media-body h4>a {
    border-radius: 25px;
    font-size: 18px;
    font-weight: 600;
    padding: 5px 15px;
    color: var(--sp-white);
    background-color: var(--sp-primary);
}

.author-details .widget_social_widget li a  {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    margin-right: 4px;
    border-radius: 50%;
    color: var(--sp-white);
    background-color: var(--sp-primary);
}

.author-details .widget_social_widget li a i {
    width: 32px;
    height: 32px;
    line-height: 32px;
    background-color: transparent;
}

.blog-single-page .author-details .widget_social_widget li a i,
.author-section .author-details .widget_social_widget li a i {
    font-size: inherit;
}

.author-details .widget_social_widget li a:hover,
.author-details .widget_social_widget li a:focus {
    background-color: var(--sp-secondary);
}

.author-details .widget_social_widget li {
    position: relative;
    display: inline-flex;
    margin-bottom: 4px;
    overflow: visible;
    list-style: none;
}

/*===== // =====*/

/*===== 19. About Section =====*/


.about-section {
    color: var(--sp-primary);
}

.about-section .plyrMasterVideo {
    overflow: hidden;
    border-radius: 10px;
}

.about-panel .heading-default {
    color: var(--sp-white);
    margin-bottom: 0.8rem;
    border-bottom: 0
}

.about-panel .heading-default .title-container {
    min-width: 175px;
    border-bottom: 1px solid var(--sp-secondary);
}

.about-panel .heading-default .title-container h5 {
    font-style: normal;
}

.about-panel h2 {
    font-weight: 700;
    margin-bottom: 8px;
}

.about-details {
    list-style: none;
    display: grid;
    font-weight: 500;
    gap: 10px;
    padding: 10px 0;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--sp-border-dark);
    border-bottom: 1px solid var(--sp-border-dark);
}

.about-details li>i {
    color: var(--sp-secondary);
}

.client-feedback {
    display: flex;
    gap: 10px;
    padding: 4px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--sp-border-dark);
}

.client-feedback .score {
    font-size: 45px;
    font-weight: 600;
    color: var(--sp-secondary);
}

.client-feedback .rating {
    line-height: 1.3;
    font-size: 15px;
}

.client-feedback .rating .stars {
    color: #ffc001;
}

.real-customers .avatar-group {
    display: flex;
}

.real-customers .label {
    font-weight: 500;
    line-height: 1.1;
}

.real-customers .avatar-group img {
    width: 50px;
    border: 1px solid;
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.real-customers .avatar-group img:focus-within,
.real-customers .avatar-group img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.about-panel .avatar-group .btn,
.real-customers .avatar-group img:not(:first-child) {
    margin-left: -20px;
}

.about-panel .avatar-group .btn {
    border-radius: 50px;
    padding: 12px 17px;
    color: var(--sp-white);
    background-color: var(--sp-secondary);
    border: 1px solid var(--sp-white);
}

.client-feedback .clients-satisfied {
    position: relative;
    margin-right: 20px;
}

.client-feedback .clients-satisfied::after {
    position: absolute;
    right: -15px;
    content: "";
    width: 1px;
    height: 45px;
    top: 50%;
    background: var(--sp-border-dark);
    transform: translateY(-50%);
}

/*===== // =====*/

/*===== 20. Team Section =====*/

.team-item {
    position: relative;
    overflow: hidden;
    text-align: center;
    background-color: var(--dark-1);
    border: 1px solid var(--sp-border-dark);
    border-radius: 10px;
}

.team-item .team-image {
    position: relative;
    overflow: hidden;
    padding-top: 20px;
    padding-bottom: 10px;
    background-color: var(--sp-primary);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    background-image: url(../images/about/team/shape1.png);
    transition: background 0.5s, transform 0.3s;
}

.team-item.active .team-image,
.team-item:focus-within .team-image,
.team-item:hover .team-image {
    color: var(--sp-white);
    background-color: var(--sp-secondary);
}

.team-item .team-image img {
    width: 140px;
    margin: auto;
    margin-bottom: 15px;
    border-radius: 50%;
}

.team-item .st-name a {
    font-weight: 600;
    color: var(--sp-white);
}

.team-item .st-position {
    font-weight: 500;
    color: var(--sp-secondary);
    transition: var(--sp-transition);
}

.team-item.active .st-position,
.team-item:focus-within .st-position,
.team-item:hover .st-position {
    color: var(--sp-white);
}

.team-item .team-content {
    padding: 15px 10px;
    color: var(--sp-primary);
}

.team-item .team-content .st-desc {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 12px;
}

.team-item .team-social {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 0;
}

.team-social li a {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sp-white);
    background: var(--sp-primary);
    transition: background 0.4s, transform 0.3s;
}

.team-social li a:focus,
.team-social li a:hover {
    background: var(--sp-secondary);
}

/*===== // =====*/

/*===== 21. Funfact Section =====*/

.funfact-section {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.funfact-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.9;
    background-color: var(--sp-primary);
}

.funfact-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.funfact-item {
    position: relative;
    text-align: center;
    min-width: 150px;
    padding: 15px 0;
}

.funfact-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: -65px;
    height: 100%;
    width: 1px;
    background-color: #dddddd4f;
}

.funfact-item h2 {
    font-size: 50px;
    font-weight: bold;
}

.funfact-item p {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0;
}

/*===== // =====*/

/*===== 22. Company History Section =====*/

.timeline-item {
    padding: 8px;
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
    margin: 5px;
    margin-right: 18px;
    color: var(--sp-primary);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    background-color: var(--dark-1);
}

.timeline-item::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -70px;
    width: 55px;
    height: 32px;
    transform: translateY(-50%);
    background-image: url(../images/about/timeline/patter1.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.timeline-item::after {
    content: '';
    position: absolute;
    top: 20px;
    right: -20px;
    width: 20px;
    height: 20px;
    background-color: var(--dark-1);
    box-shadow: var(--sp-shadow);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.timeline-item .timeline-image {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    flex-shrink: 0;
}

.timeline-item .timeline-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.4;
    z-index: 0;
    background-color: var(--sp-primary);
}

.timeline-item .timeline-image .year {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 45px;
    height: 45px;
    font-weight: 500;
    font-size: 15px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    color: var(--sp-white);
    background-color: var(--sp-secondary);
}

.timeline-item .st-title {
    margin-bottom: 10px;
}

.timeline-item .st-title a {
    font-weight: 700;
    color: var(--sp-secondary);
}

.timeline-item .st-desc {
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 0;
}

/*===== // =====*/

/*===== 23. Skills Bar Section =====*/

.skills-bar-section {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.skills-bar-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--sp-primary);
    opacity: 0.8;
    z-index: 1;
}

.skills-bar-section>* {
    position: relative;
    z-index: 2;
}

.skill-box .label {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 16px;
}

.skill-box {
    margin-bottom: 40px;
}

.skill-box:last-child {
    margin-bottom: 0;
}

/* Progress Bar */
.progress-bar {
    position: relative;
    display: block;
    width: 100%;
    height: 8px;
    z-index: 0;
    margin: auto;
    padding: 10px 0;
    overflow: unset;
    background-color: transparent;
}

.progress-bar:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto 0;
    width: 100%;
    border-radius: 10px;
    background: #fff;
    opacity: 0.3;
    z-index: -1;
    height: auto;
    transition: 0.4s linear;
    transition-property: width, background-color;
}

.progress-fill {
    position: absolute;
    width: 0;
    bottom: 0;
    top: 0;
    left: 0;
}

.progress-fill:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto 0;
    width: 100%;
    border-radius: 10px;
    background: var(--sp-secondary);
    z-index: 0;
    height: auto;
    background: repeating-linear-gradient(60deg, var(--sp-secondary), var(--sp-secondary) 8px, #f84233 8px, #f84233 12px);
}

.progress-bar .progressText {
    width: 20px;
    height: 20px;
    background: var(--sp-white);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    font-weight: bold;
    color: var(--sp-secondary);
    z-index: 1;
    line-height: 22px;
    text-align: center;
    margin-left: -12px;
}

/*===== // =====*/

/*===== 24. Achievement Section =====*/

.achievement-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.achievement-item .card-img-overlay {
    z-index: 2;
}

.achievement-item .card-img-overlay h5 {
    text-align: center;
    font-weight: 700;
}

.achievement-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000;
    opacity: 0.5;
    z-index: 1;
    transition: all 0.5s;
}

.achievement-item.active::before {
    background-color: var(--sp-secondary);
}

.achievement-item>img {
    width: 100%;
    object-fit: cover;
    height: 100%;
    transition: all 1.8s ease;
}

.achievement-item.active>img,
.achievement-item:focus-within>img {
    transform: scale(1.1);
}

/*===== // =====*/

/*===== 25. Company Awards Section =====*/

.award-section {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('../images/about/awards/patter.png');
}

html.dark-mode .award-section {
    background-image: url('../images/about/awards/patter-dark.png');
}

.award-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin: 5px;
    color: var(--sp-primary);
    border-bottom: 5px solid var(--sp-primary);
    background-color: var(--dark-1);
    background-repeat: no-repeat;
    background-position: top;
    background-size: initial;
    background-image: url(../images/about/awards/shape.png);
    box-shadow: var(--sp-shadow);
    transition: var(--sp-transition);
}

.award-item:focus-within,
.award-item.active {
    border-bottom: 5px solid var(--sp-secondary);
}

.award-item .award-image {
    max-width: 150px;
    margin: 30px auto 2px;
}

.award-content {
    padding: 12px;
    text-align: center;
}

.award-content .st-title {
    margin-bottom: 8px;
}

.award-content .st-title a {
    font-weight: 600;
    color: var(--sp-secondary);
}

.award-content .st-desc {
    font-size: 15px;
    font-weight: 500;
}

/*===== // =====*/

/*===== 26. Client Section =====*/

.client-logo-table {
    display: flex;
    flex-wrap: wrap;
}

.client-logo-table .client-item {
    flex: 0 0 auto;
    width: 20%;
    border: 1px solid var(--sp-border-dark);
}

.client-logo-table .client-item a {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}

/*===== 27. 404 Section  =====*/

.section404 {
    position: relative;
    overflow: hidden;
    color: var(--sp-primary);
    margin: 70px 0px;
    padding: 30px 0;
    background-image: url('../images/bg-404.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.card404 h1 {
    font-size: 350px;
    line-height: 250px;
    margin-bottom: 25px;
    font-weight: 600;
    color: var(--sp-secondary);
}

/* .card404 h1 i { */
    /* animation: rotate 20s infinite linear; */
/* } */

.card404 h4 {
    font-size: 25px;
    font-weight: 700;
    margin-top: 70px;
    margin-bottom: 25px;
}

.card404 p {
    margin-bottom: 24px;
    font-size: 30px;
    font-weight: 600;
}

.section404 .card404-btn .btn {
    font-weight: 600;
    font-size: 18px;
    padding: 10px 20px;
    color: var(--sp-white);
    background-color: var(--sp-secondary);
}

.section404 .card404-btn .btn:focus,
.section404 .card404-btn .btn:hover {
    background-color: var(--sp-primary);
}

.section404 .globe {
    position: relative;
    display: inline-block;
    transform: scale(1.4);
    margin-bottom: 25px;
    width: 200px;
    height: 200px;
}

.section404 .globe-worldmap,
.section404 .globe-worldmap-front,
.section404 .globe-worldmap-back,
.section404 .globe-inner-shadow {
    position: absolute;
    display: block;
    margin: 0;
}

.section404 .globe-inner-shadow {
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    box-shadow: inset 0 0 15px 5px rgba(0, 0, 0, 0.15);
}

.section404 .globe-worldmap {
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    overflow: hidden;
    border-radius: 50%;
}

.section404 .globe-worldmap-front,
.section404 .globe-worldmap-back {
    left: 0;
    top: 0;
    overflow: visible;
}


@keyframes textureSpin {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-47.5%);
    }
}

@keyframes textureSpinreverse {
    from {
        transform: translateX(-47.5%);
    }

    to {
        transform: translateX(0);
    }
}

/*===== // =====*/

.hidden-item {
    display: none;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-icon {
    animation: spin 1s linear infinite;
}

/*===== 28. FAQs Section  =====*/

.faq-section {
    color: var(--sp-primary);
}

.faq-section .heading-default {
    border-bottom: 0;
    color: var(--sp-white);
}

.faq-section .heading-default .title-container h5 {
    font-style: normal;
    text-align: center;
}

.faq-section h1 {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 45px;
}

.faq-contact {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.contactinfo {
    display: flex;
    align-items: center;
    background: var(--dark-1);
    padding: 18px 12px;
    border-radius: var(--sp-radius);
    transition: var(--sp-transition);
    box-shadow: var(--sp-shadow);
}

.contactinfo-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin-right: 10px;
    font-size: 20px;
    border: 2px solid var(--sp-primary);
    color: var(--sp-primary);
    box-shadow: var(--sp-shadow);
    transition: var(--sp-transition);
}

.contactinfo:focus-within .contactinfo-icon,
.contactinfo:hover .contactinfo-icon {
    border: 2px solid var(--sp-secondary);
    color: var(--sp-secondary);
}

.contactinfo h5 {
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    gap: 4px;
}

.contactinfo h5 a {
    font-weight: 500;
    font-size: 15px;
    color: var(--sp-secondary);
}

.st-accordion .accordion-item {
    margin-bottom: 20px;
    border: none;
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    transition: var(--sp-transition);
}

.st-accordion .accordion-button {
    color: var(--sp-primary);
    background: var(--dark-1);
    box-shadow: none;
    padding: 15px 20px;
    border-radius: var(--sp-radius);
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    white-space: normal;
    transition: var(--sp-transition);
}

.st-accordion .accordion-button:focus {
    outline: 1px dotted;
}

.st-accordion .accordion-item:has(.accordion-collapse.show),
.st-accordion .accordion-item:has(.accordion-collapse.show) .accordion-button {
    background-color: var(--sp-primary);
    color: var(--sp-white);
}

.st-accordion .accordion-button::after {
    content: '+';
    position: absolute;
    width: 32px;
    height: 32px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: var(--sp-radius);
    background-color: var(--sp-secondary);
    color: var(--sp-white);
    text-align: center;
    line-height: 32px;
    font-size: 24px;
    background-image: none;
    transition: var(--sp-transition);
}

.st-accordion .accordion-button:not(.collapsed)::after {
    content: '−';
}

.st-accordion .accordion-item .accordion-body {
    padding-top: 0;
    font-size: 14px;
}

.border-corner {
    border: 2px solid var(--sp-primary);
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.border-corner:focus-within,
.border-corner:hover {
    border: 2px solid var(--sp-secondary);
}

.border-corner:before,
.border-corner:after {
    content: '';
    background: var(--dark-1);
    position: absolute;
    z-index: -2;
    transition: transform .2s ease-in-out;
}

.border-corner:before {
    top: -2px;
    right: 1em;
    bottom: -2px;
    left: 1em;
}

.border-corner:after {
    top: 1em;
    right: -2px;
    bottom: 1em;
    left: -2px;
}

.border-corner:hover:before,
.border-corner:focus-within:before {
    transform: scaleX(0);
}

.border-corner:hover:after,
.border-corner:focus-within:after {
    transform: scaleY(0);
}

/*===== // =====*/

/*===== 29. Information Section  =====*/

.information-section {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
}

.information-item {
    padding: 15px;
    margin: 5px;
    color: var(--sp-primary);
    border-radius: var(--sp-radius);
    background-color: var(--dark-1);
    box-shadow: var(--sp-shadow);
}

.information-item .information-icon {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.information-item .information-icon>i {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    margin-right: 10px;
    font-size: 24px;
    border: 2px solid var(--sp-primary);
    color: var(--sp-primary);
    box-shadow: var(--sp-shadow);
    transition: var(--sp-transition);
}

.information-item:focus-within .information-icon>i,
.information-item:hover .information-icon>i {
    border: 2px solid var(--sp-secondary);
    color: var(--sp-secondary);
}

.information-icon>h5 {
    font-weight: 700;
	flex: 1;
}

.information-icon>p {
    font-weight: 500;
}

.information-item:focus-within .information-icon>h5,
.information-item:hover .information-icon>h5 {
    color: var(--sp-secondary);
}

.information-item .information-content::after {
    position: relative;
}

.information-item .information-content::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-position: bottom right;
    background-repeat: no-repeat;
    background-image: url(../images/contact/pattern.png);
	z-index: -1;
}

.information-item .information-content .btn {
    padding: 0;
    font-weight: 700;
    gap: 8px;
    display: inline-flex;
    align-items: center;
    color: var(--sp-secondary);
}

/* Office Information  */
.office-information-item {
    margin: 3px;
    position: relative;
    overflow: hidden;
    color: var(--sp-white);
    text-align: center;
    background-color: var(--sp-primary);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    transition: var(--sp-transition);
}

.office-information-item:focus-within,
.office-information-item:hover {
    background-color: var(--sp-secondary);
}

.owl-carousel .owl-item .office-information-item .img-wrap img {
    width: fit-content;
    margin: auto;
    border-radius: 50%;
    border: 4px solid var(--sp-white);
}

.office-information-item:focus-within .img-wrap .flag-img,
.office-information-item:hover .img-wrap .flag-img {
    border: 4px solid var(--sp-primary) !important;
}

.office-information-item .img-wrap {
    position: relative;
    padding-top: 30px;
    padding-bottom: 40px;
}

.office-information-item .img-wrap .flag-img {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 65px !important;
    transform: translateX(-50%);
    transition: all 0.5s;
}

.office-information-item .title-box .title {
    margin-bottom: 5px;
}

.office-information-item .info-text p {
    margin-bottom: 5px;
}

.office-information-item .info-number a {
    color: var(--sp-white);
    width: 100%;
    display: block;
    padding: 10px 0;
    background-color: var(--sp-secondary);
    transition: var(--sp-transition);
}

.office-information-item:focus-within .info-number a,
.office-information-item:hover .info-number a {
    color: var(--sp-secondary);
    background-color: var(--sp-white);
}

.office-information-item .bg-image {
    position: absolute;
    inset: 0;
	z-index: -1;
}

/*===== // =====*/

/*===== 30. Map Section =====*/

.contactmapinfo {
    background-color: var(--sp-primary);
}

.contactmapinfo .location-area {
    border: none;
    padding: 15px 0;
    position: relative;
}

.contactmapinfo .location-area::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    z-index: 1;
    width: 30px;
    height: 20px;
    background: var(--sp-primary);
    clip-path: polygon(100% 0, 0 0, 48% 100%);
    transform: translateY(-20px) translateX(-50%);
    opacity: 0;
    transition: var(--sp-transition);
}

.contactmapinfo .location-area.active::after {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
}

.contactmapinfo .location-area img {
    margin: auto;
    width: 80px;
    border-radius: 50%;
    border: 4px solid var(--sp-white);
    transition: var(--sp-transition);
}

.contactmapinfo .location-area.active img {
    border: 4px solid var(--sp-secondary);
}

.map iframe {
    width: 100%;
    height: 100%;
    min-height: 350px;
    -webkit-filter: grayscale(90%);
    filter: grayscale(50%);
}

.custom-tab {
    display: none;
    visibility: hidden;
    opacity: 0;
    /* height: 60vh; */
}

.custom-tab.active {
    display: block;
    visibility: visible;
    opacity: 1;
    animation: 0.5s slide-up ease-in-out forwards;
}

.custom-tab .map-address-card {
    padding: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    color: var(--sp-primary);
    transform: translate(-50%, -50%) scale(0);
    text-align: left;
    background-color: var(--dark-1);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    opacity: 0;
    transition: all 2s linear;
}

.custom-tab .map-address-card::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 20px;
    z-index: 1;
    width: 15px;
    height: 10px;
    background: var(--dark-1);
    clip-path: polygon(100% 0, 0 0, 48% 100%);
    transition: var(--sp-transition);
}

.custom-tab.active .map-address-card {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.map-address-card h5 {
    font-weight: 700;
    margin-bottom: 5px;
}

.map-address-card P {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
}


@keyframes slide-up {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-out {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

/*===== // =====*/

/*===== 31. Contact Form Section  =====*/

.contactform {
    box-shadow: var(--sp-shadow);
    background-color: var(--dark-1);
    border-radius: var(--sp-radius);
}

.contact-form-heading {
    text-align: left;
    font-size: 20px;
    display: block;
    font-weight: 700;
    padding: 12px 20px;
    margin-bottom: 0;
    font-style: italic;
    color: var(--sp-white);
    position: relative;
    border-radius: var(--sp-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid var(--sp-secondary);
    background: linear-gradient(115deg, var(--sp-secondary) 50%, var(--sp-primary) 50%);
}

.contactform form {
    padding: 35px 25px;
}

.contactform .contact-inner {
    padding: 10px 15px;
    color: var(--sp-primary);
}

.contactform .contact-inner .widget {
    padding: 10px 0;
    border-bottom: 1px dashed var(--sp-border-dark);
}

.contactform .contact-inner .widget:last-child {
    border-bottom: 0;
}

.contactform .widget-contact .contact-icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    color: var(--sp-white);
    box-shadow: var(--sp-shadow);
    border: 5px solid var(--dark-1);
    background-color: var(--sp-primary);
}

.contactform .widget-contact:hover .contact-icon,
.contactform .widget-contact:focus-within .contact-icon {
    background-color: var(--sp-secondary);
}

.contactform .widget-contact .contact-area .icon-content h4 {
    font-size: 20px;
    font-weight: 700;
}

.contactform .widget-contact .contact-area .icon-content a {
    color: var(--sp-secondary);
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.contact-footer {
    border-top: 1px dashed var(--sp-border-dark);
    padding: 15px;
}

.contactform form textarea,
.contactform form input {
    color: var(--sp-primary);
    border: 1px solid var(--sp-border-dark);
    border-radius: var(--sp-radius);
    background-color: var(--dark-2);
}

.contactform form textarea::placeholder,
.contactform form input::placeholder {
    color: var(--sp-primary);
}

.btn.btn-primary {
    border: none;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 18px;
    background-color: var(--sp-secondary);
}

.btn.btn-primary:focus,
.btn.btn-primary:hover {
    background-color: var(--sp-primary);
}

.contact-us-box {
    padding: 50px 25px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 8px 10px #8e8e8ec2;
    border-radius: var(--sp-radius);
    background-color: var(--sp-primary);
    background-repeat: no-repeat;
    background-image: url(../images/contact/cta-pattern.png);
}

.contact-us-box .contact-text {
    font-size: 25px;
    font-weight: bold;
    margin-right: 20px;
}

.contact-us-box .widget .contact-icon {
    color: var(--sp-secondary);
    font-size: 24px;
}

.contact-us-box .widget .contact-info {
    color: var(--sp-white);
    font-size: 20px;
}

.contact-us-box .btn.btn-primary:hover {
    background-color: var(--sp-secondary);
}

/*===== // =====*/

/*===== 32. Blog Single Section  =====*/

.post-content .quote-box {
    background-color: var(--dark-2);
    padding: 20px 15px;
    margin: 25px 0;
    position: relative;
    border: 1px solid var(--sp-border-dark);
    border-radius: var(--sp-radius);
    border-left: 4px solid var(--sp-primary);
}

.post-content .quote-box::after {
    content: "\f10e";
    font-size: 35px;
    color: var(--sp-border-dark);
    position: absolute;
    bottom: 0.5rem;
    right: 1.5rem;
    font-family: 'FontAwesome';
}

.post-content .quote-author {
    font-weight: bold;
    font-size: 18px;
    color: var(--sp-secondary);
    margin-top: 1rem;
}

.post-content .quote-box p {
    font-size: 18px;
    font-weight: 600;
    font-style: italic;
}

.blog-section.blog-single-page .widget-single-page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    padding-bottom: 13px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin-bottom: 25px;
    border-color: var(--sp-border-dark);
}

.blog-section.blog-single-page .widget-single-page .sinlge-page-tag,
.blog-section.blog-single-page .widget-single-page .widget_social_widget {
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog-section.blog-single-page .widget-single-page .widget_social_widget ul li a {
    font-size: 18px;
    width: 32px;
    height: 35px;
    color: var(--sp-primary);
}

.blog-section.blog-single-page .blog-post.author-details {
    position: relative;
    overflow: hidden;
    padding: 15px;
    color: var(--sp-primary);
    box-shadow: 0px 0px 8px rgb(0 0 0 / 10%);
    border-radius: var(--sp-radius);
    background-color: var(--dark-1);
}

.blog-section.blog-single-page .blog-post.author-details .media-body h2 {
    font-size: 25px;
    color: var(--sp-primary);
    margin-bottom: 0;
}

.blog-section.blog-single-page .blog-post.author-details .media-body h4>a {
    padding: 0;
    color: var(--sp-secondary);
    background-color: transparent;
}

.blog-section.blog-single-page .author-details .widget_social_widget li a {
    width: 38px;
    height: 38px;
    line-height: 38px;
}

/* comment */

.blog-section.blog-single-page .comments-area .comments-title h3 {
    font-size: 25px;
    font-weight: 700;
    color: var(--sp-primary);
}

.blog-section.blog-single-page .comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-section.blog-single-page ol.comment-list li {
    list-style: none;
}

.blog-section.blog-single-page .comments-area .comment-body {
    position: relative;
    min-height: 120px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    border-radius: 3px;
    z-index: 0;
    margin-bottom: 5px;
    margin: 20px 0;
    padding: 20px;
    padding-left: 110px;
    color: var(--sp-primary);
    border: 1px solid var(--sp-border-dark);
    background: var(--dark-1);
}

.blog-section.blog-single-page .comments-area .comment-meta .comment-author img {
    position: absolute;
    z-index: 0;
    left: 16px;
    border-radius: 50%;
    width: 85px;
    height: 85px;
    border: 1px solid var(--sp-border-dark);
}

.blog-section.blog-single-page .comments-area .comment-meta .comment-author {
    margin-bottom: 25px;
}

.blog-section.blog-single-page .comments-area .comment-meta .comment-author .fn a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    transition: 1s;
    color: var(--sp-primary);
}

.blog-section.blog-single-page .comments-area .comment-body .comment-metadata a.comment-reply-link {
    position: relative;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    padding-left: 20px;
    transition: 1s;
    color: var(--sp-secondary);
}

.blog-section.blog-single-page .comments-area .comment-body .comment-metadata a time {
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    position: absolute;
    left: 110px;
    top: 50px;
    padding-left: 20px;
    transition: 0.65s;
    color: var(--sp-secondary);
}

.blog-section.blog-single-page .comments-area .comment-body .comment-metadata a.comment-reply-link:before,
.blog-section.blog-single-page .comments-area .comment-body .comment-metadata a time:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0;
    left: 0;
    color: var(--sp-secondary);
}

.blog-section.blog-single-page .comments-area .comment-body .comment-metadata a.comment-reply-link:before {
    content: "\f112";
    color: var(--sp-secondary);
}

.blog-section.blog-single-page .comments-area .comment-body .comment-metadata a time:before {
    content: "\f133";
}

.blog-section.blog-single-page .comment-list .children {
    position: relative;
    padding: 0;
    margin: 0;
    margin-left: 2.5rem;
    z-index: 0;
}

.blog-section.blog-single-page ol.comment-list li#comment-13 {
    margin-left: -70px;
}

#respond.comment-respond {
    padding: 30px 25px;
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border-dark);
    background-color: var(--dark-2);
}

#respond.comment-respond .comment-reply-title {
    margin-bottom: 6px;
    font-size: 26px;
    font-weight: 700;
    color: var(--sp-primary);
}

.comment-form {
    display: flex;
    flex-wrap: wrap;
    color: var(--sp-primary);
    justify-content: flex-start;
    align-items: center;
}

.comment-form>p:nth-child(1n+1):not(.comment-form-email):not(.comment-form-comment):not(.comment-form-cookies-consent):not(.form-submit):not(.comment-form-url) {
    margin-right: 30px;
}

.comment-form>p:not(.comment-notes):not(.comment-form-comment):not(.comment-form-cookies-consent):not(.form-submit) {
    flex: 45.5%;
}

.comment-form>p label {
    display: none;
}

.comment-form>p input {
    outline: none;
    font-size: 15px;
    font-weight: 400;
    color: gray;
    margin-bottom: 10px;
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border-dark);
    background-color: var(--dark-1);
}

.comment-respond textarea#comment::placeholder,
.comment-form>p input::placeholder {
    color: gray;
}

.comment-form-cookies-consent,
.form-submit,
.comment-form-comment {
    max-width: 100%;
    flex-basis: 100%;
}

.comment-respond textarea#comment {
    height: 150px;
    overflow: auto;
    width: 100%;
    font-size: 15px;
    font-weight: 400;
    resize: vertical;
    padding: 15px;
    margin-top: 15px;
    margin-bottom: 20px;
    color: gray;
    outline: none;
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border-dark);
    background: var(--dark-1);
}

.comment-form>p.comment-form-cookies-consent input {
    margin: 0;
}

.comment-form-cookies-consent {
    display: flex;
    align-items: center;
}

.comment-form>p.comment-form-cookies-consent label {
    display: block;
    margin-left: 8px;
    font-size: 14px;
}

.comment-respond input#comment-submit {
    border-radius: 5px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 25px;
    margin-top: 10px;
    margin-bottom: 0;
    color: var(--sp-white);
    background-color: var(--sp-secondary);
    transition: var(--sp-transition);
}

.comment-respond input#comment-submit:focus,
.comment-respond input#comment-submit:hover {
    color: var(--sp-secondary);
    background-color: var(--sp-primary);
}

.comment-respond .comment-form .comment-form-rating {
    margin-left: auto;
}

/*** scrollup ****/
.scrollup.style-1 {
    position: fixed;
    right: 20px;
    z-index: 111;
    top: 50%;
    padding: 0;
    border: none;
    color: var(--sp-secondary);
    background-color: transparent;
    transform: translateY(-50%);
    /* mix-blend-mode: difference; */
    transition: all 1.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-50%) translateY(200px);
}

.scrollup.style-1.is-active {
    transform: translateY(-50%) translateY(0);
    visibility: visible;
    opacity: 1;
}


.scrollup .scroll-line {
    width: 2px;
    height: 60px;
    position: relative;
    background-color: var(--sp-scrollbar-thumb);
    color: inherit;
    display: block;
}

.scrollup .scroll-point {
    display: inline-block;
    width: 2px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--sp-secondary);
}

.scrollup .scroll-text {
    /* transform: rotate(180deg); */
    writing-mode: vertical-lr;
    margin-bottom: 5px;
    color: var(--sp-secondary);
    font-size: 12px;
    text-transform: uppercase;
}

.scrollup::before,
.scrollup::after {
    content: "";
    position: absolute;
    top: 0;
    width: 8px;
    height: 8px;
    border-bottom: 1.5px solid var(--sp-secondary);
    border-right: 1.5px solid var(--sp-secondary);
    transform: rotate(225deg);
    animation: scrollupAnimate 2s infinite;
}

.scrollup::after {
    animation-delay: -0.4s;
}

@keyframes scrollupAnimate {
    0% {
        opacity: 0;
        transform: rotate(225deg) translate(0px, 0px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(225deg) translate(10px, 10px);
    }
}

/* Widget Ticker */
.widget-container-ticker {
    padding: 5px;
    border-radius: 25px;
    background-color: var(--dark-1);
    box-shadow: var(--sp-shadow);
}

.widget-container-ticker.home-one {
    margin-top: 10px;
    margin-bottom: 5px;
    padding: 7px;
}

.widget-container-ticker.home-two,
.widget-container-ticker.home-three,
.widget-container-ticker.home-four,
.widget-container-ticker.home-five {
    border-radius: 0;
    padding: 8px 0;
}

.breadcrumb-section .widget-container-ticker {
    margin-top: 10px;
}

.widget-container-ticker.home-two .custom-ticker .ticker-link,
.widget-container-ticker.home-three .custom-ticker .ticker-link,
.widget-container-ticker.home-four .custom-ticker .ticker-link,
.widget-container-ticker.home-five .custom-ticker .ticker-link {
    font-weight: 500;
}

.custom-ticker {
    position: relative;
    overflow: hidden;
    width: 100%;
}

@keyframes ticker {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

.custom-ticker .ticker-link {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 2px !important;
    border: 0 none !important;
    transition: var(--sp-transition);
}

.custom-ticker .ticker-link:hover {
    color: var(--sp-secondary);
}

.custom-ticker .ticker-link .coin-img {
    margin-right: 5px;
    height: 25px;
    width: 25px;
}

.custom-ticker .ticker-link .ticker-down {
    color: red;
}

.custom-ticker .ticker-link .ticker-up {
    color: green;
}

/* html.dark-mode .contactform,
html.dark-mode .sidebar .widget,
html.dark-mode .post-items,
html.dark-mode .sidebar .widget-search .search-form input,
html.dark-mode .st-accordion .accordion-item,
html.dark-mode .previously-missed-slider .post-card,
html.dark-mode .blog-section.blog-single-page .blog-post.author-details {
    border: 1px solid var(--sp-border-dark);
} */

html.dark-mode .page-selector select {
    border: 1px solid var(--sp-border-dark);
    background-color: var(--dark-1);
}

html.dark-mode .faq-contact .border-corner:before,
html.dark-mode .faq-contact .border-corner:after,
html.dark-mode .faq-contact .contactinfo {
    background: var(--dark-2);
}



/* Direction */

.direction-container {
    padding: 0 15px 20px;
}
.rtl-to-ltr {
    position: relative;
    overflow: hidden;
    padding: 4px;
    width: 100%;
    height: 40px;
    display: block;
    background: #dfe0ed;
}
.rtl-to-ltr .knob{
    position: relative;
}
.rtl-to-ltr .knob:before, .rtl-to-ltr .knob:after, .rtl-to-ltr .knob span {
    position: absolute;
    top: 4px;
    border-radius: 2px;
}

.rtl-to-ltr .knob:before, .rtl-to-ltr .knob:after {
    width: 50%;
    color: #4e4e4e;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.rtl-to-ltr .knob:before {
    content: "LTR";
    left: 4px;
}

.rtl-to-ltr .knob:after {
    content: "RTL";
    right: 4px;
}

.rtl-to-ltr .knob span {
    right: 4px;
    width: 50%;
    height: 32px;
    top: 0;
    right: 0;
    background-color: #03a9f4;
    transform: rotateY(0);
    transform-origin: 0% 50%;
    transition: 0.6s ease all;
    z-index: 1;
}

.rtl-to-ltr.active .knob span {
    transform: rotateY(-180deg);
    background-color: #f44336;
}

.mix {
    display: none;
    opacity: 0;
}
.mix.show {
    display: block;
    animation: zoomInSt 0.6s ease forwards;
}
.mix.zooming-out {
    animation: zoomOutSt 0.3s ease forwards;
}

@keyframes zoomInSt {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomOutSt {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.5);
        opacity: 0;
    }
}

.post-section.blog-page p {
	color: var(--sp-primary);
}

.widget_none p {
	margin: 0;
}

body.date {
	display: initial !important;
}

#av-primary-content {
	color: initial;
}

.title-container, .post-meta, .post-heading {
	color: #ffffff;
}

/* Shop Page */
.woocommerce-page .product-img {
	position: relative;	
}
.woocommerce-page .product-action {
	position: absolute;
    /* bottom: 25px; */
    font-size: 90%;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    text-align: center;
    width: 100%;
	visibility: hidden;
	opacity: 0;
	transition: all 0.5s;
}

.woocommerce-page .product-action a, .woocommerce-page .product-action a:hover, .woocommerce-page .product-action a:focus, .woocommerce-message a.button.wc-forward, .woocommerce div.product form.cart .button {
	background: var(--sp-primary);
	color: #ffffff;
	border-radius: 3px;
	border: none;
}

.woocommerce-page .products li:hover .product-action, .woocommerce-page .products li:focus-within .product-action {
	visibility: visible;
	opacity: 1;
}

.woocommerce-page .product-action a:last-of-type {
	padding: 5px 8px;
    border: 1px solid;
    font-weight: 700;
}

.woocommerce-page .products li {
	box-shadow: 0 0 10px 0px color-mix(in srgb, var(--sp-secondary) 10%, transparent);
}

.woocommerce-page .products .product-content {
	padding: 10px 30px;
}

.woocommerce-page .products .product-content .price, .woocommerce-page .price {
	color: var(--sp-secondary) !important;
}

.woocommerce-page .products .product-content .price del, .woocommerce-page .price del{
	color: gray !important;
}

.sale-ribbon, .woocommerce span.onsale {
	 position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--sp-secondary);
    padding: 0px 5px;
    border-radius: 3px;
    color: #ffffff;
}

/* == Rating == */
.product-content .star-rating {
    float: right;
    overflow: hidden;
    position: relative;
    height: 1.5em;
    line-height: 1;
    font-size: 1em;
    width: 100%;
    font-family: star;
}
.woocommerce .products .star-rating {
    display: inline-block;
	width: 72.17px;
    margin: 0 0 -4px;
    float: none;
}
.woocommerce ul.products li.product .star-rating {
    font-size: .857em;
}

.product-content .star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;
}
.star-rating span {
    color: var(--sp-secondary);
}

/* == == */

.woocommerce .quantity .qty {
    width: 3.631em;
    text-align: center;
    border: 1px solid;
    padding: 5px;
    border-radius: 3px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: 1px solid var(--sp-secondary);
    background-color:  color-mix(in srgb, var(--sp-primary) 20%, #ffff 100%);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a, .woocommerce table.shop_attributes tr:nth-child(even) td, .woocommerce table.shop_attributes tr:nth-child(even) th {
    color: var(--sp-primary);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover, .woocommerce div.product .woocommerce-tabs ul.tabs li a:focus {
    color: var(--sp-secondary);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    border-bottom: 1px solid var(--sp-secondary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after, .woocommerce div.product .woocommerce-tabs ul.tabs li::before {
	visibility: hidden;
}

.woocommerce table.shop_attributes td {
    padding-left: 15px;
}

.woocommerce #review_form #respond .form-submit input {
	background: var(--sp-primary);
	color: #ffffff;
	border-radius: 3px;
	border: none;
}

/* == My Account == */
.woocommerce-MyAccount-navigation ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    color: var(--sp-white);
    margin-bottom: 8px;
    font-weight: 600;
    padding: 12px 15px;
    border-radius: var(--sp-radius);
    background: var(--sp-primary);
    transition: var(--sp-transition);
}

.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--sp-white);
    background: var(--sp-secondary);
}

.woocommerce-account .woocommerce-MyAccount-content {
    padding: 15px;
    height: fit-content;
    min-height: 200px;
    border-radius: var(--sp-radius);
    background: var(--dark-2);
    border: 1px solid var(--sp-border-dark);
}

.woocommerce-account .woocommerce-MyAccount-content a {
    color: var(--sp-secondary);
    text-decoration: underline;
}
.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-login{
    color: var(--sp-white);
    padding: 5px 10px;
    font-weight: 600;
    border-radius: var(--sp-radius);
    background: var(--sp-secondary);
    -webkit-text-fill-color: unset;
}

.woocommerce-account .woocommerce-MyAccount-content table {
    border-top: 2px solid var(--sp-primary2);
    border-radius: var(--sp-radius);
}

.woocommerce-account .woocommerce-MyAccount-content table th {
    padding: 10px 15px;
    background: var(--sp-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.woocommerce-account .woocommerce-MyAccount-content table td {
    padding: 8px 15px;
    color: var(--sp-black);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a {
    font-weight: 600;
    border-bottom: none;
}

.woocommerce-info {
	border-top-color: var(--sp-primary);
	
}
.woocommerce-info a.wc-forward {
	
    padding: 8px 10px;
    color: var(--sp-white);
    border-radius: 3px;
    background: var(--sp-primary);
    -webkit-text-fill-color: unset;
	float: none;
}
.woocommerce-info a.wc-forward:hover, .woocommerce-info a.wc-forward:focus {
	background: var(--sp-secondary);
	color: var(--sp-white);
}

.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
    font-family: 'FontAwesome';
    content: "\f085";
    display: inline-block;
    position: absolute;
    color: var(--sp-primary2);
    left: 1em;
}

.woocommerce-account .addresses .title .edit {
	float: none;
}

.woocommerce-account .addresses .woocommerce-Address-title {
    margin-top: 15px;
    margin-bottom: 10px;
}

.woocommerce-account .addresses .woocommerce-Address-title h2 {
    font-weight: 600;
    font-size: 25px;
    margin-bottom: 18px;
}

.woocommerce-account .addresses .woocommerce-Address-title .edit {
    font-weight: 500;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
    width: 49%;
    overflow: visible;
}

.woocommerce form .form-row-first,
.woocommerce-page form .form-row-first {
    float: left;
}

.woocommerce form .form-row-last,
.woocommerce-page form .form-row-last {
    float: right;
}

.woocommerce form .form-row {
    padding: 3px;
    margin: 0 0 6px;
}

.woocommerce form .form-row .required {
    color: var(--sp-secondary2);
}

.woocommerce .woocommerce-MyAccount-content form fieldset {
    min-width: 0;
    padding: 0;
    border: 0;
    margin: 25px 0;
}

.woocommerce .woocommerce-MyAccount-content form fieldset>legend {
    color: var(--sp-primary);
    font-weight: 600;
    font-size: 18px;
}

.woocommerce .woocommerce-MyAccount-content button.button {
    font-weight: 600;
    font-size: large;
    /* padding: 5px 15px; */
    border: none;
    border-radius: var(--sp-radius);
    color: var(--sp-white);
    background: var(--sp-secondary);
}

.woocommerce .woocommerce-MyAccount-content button.button:hover,
.woocommerce .woocommerce-MyAccount-content button.button:focus {
    background: var(--sp-primary);
}

.form-control:focus {
    box-shadow: 0 0 3px 0px var(--sp-primary2);
}

.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
	background: transparent;
}

form input:focus,  
form input:focus,  
form textarea:focus-within,  
form textarea:focus-within {
    outline: 1px solid;
    outline-color: var(--sp-primary);
}

.woocommerce em, .woocommerce cite, .woocommerce q {
    font-style: italic;
    font-weight: 500;
    font-size: small;
}

/* == Woocommerce Pagination == */


.woocommerce-pagination {
    width: max-content;
    margin: auto;
}
.woocommerce nav.woocommerce-pagination {
    text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
    position: relative;
    list-style: none;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
	border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
	border-right: none;
}

.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{
    font-weight: 700;
    border-radius: 0;
    border: 1px solid;
    text-decoration: none;
    padding: 5px;
    display: block;
    font-size: 16px;
    position: relative;
    color: var(--sp-primary);
    line-height: 1.6;
    z-index: 1;
    width: 35px;
    height: 35px;
    border-radius: 50%;
}
.woocommerce-pagination>ul .page-numbers.current, .woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current{
    background: var(--sp-secondary) !important;
	color: #ffffff !important;
}