| Server IP : 103.191.208.88 / Your IP : 216.73.216.44 Web Server : Microsoft-IIS/10.0 System : Windows NT COSMIC 10.0 build 20348 (Windows Server 2022) AMD64 User : IWPD_1831(willswel_) ( 0) PHP Version : 8.2.31 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : D:/Inetpub/vhosts/willswell.com/httpdocs/wp-content/themes/news-25/assets/css/ |
Upload File : |
/*
* ------------------------------------------------------------------
*
* 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%;
left: 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-right: 5px;
border-left: 1px solid #dddddd3d;
padding-left: 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-right: 10px;
font-weight: 500;
flex-shrink: 0;
color: var(--sp-white);
}
.header .above-header .widget-date-time .live-time::before {
content: '';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 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;
left: -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-left: 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;
left: 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) !important;
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-left: 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: 8px;
}
.breaking-news-slider.owl-carousel .owl-nav button.owl-next {
right: unset;
left: 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 15px 8px 40px;
font-weight: 700;
width: fit-content;
font-style: italic;
color: var(--sp-white);
clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 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);
}
[dir="rtl"] .heading-default .title-container {
background-color: var(--sp-primary);
}
.heading-default .title-container h5 {
padding: 10px 12px;
font-weight: 700;
font-style: italic;
margin: 0;
}
.heading-default .title-container h5:nth-child(1) {
padding-left: 25px;
width: 100%;
background-color: var(--sp-primary);
clip-path: polygon(20px 0, 100% 0, 100% 100%, 0% 100%);
}
[dir="rtl"] .heading-default .title-container h5:nth-child(1) {
padding-right: 25px;
background-color: var(--sp-secondary);
clip-path: polygon(0px 0, 100% 0, 1000% 100%, 20px 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;
right: 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;
}
.pagination-container .pagination .nav-links .page-numbers .fa-arrow-left,
.pagination-container .pagination .nav-links .page-numbers .fa-arrow-right {
transform: rotate(180deg);
}
.gridlist-toggle {
display: flex;
gap: 10px;
margin-left: 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: left;
}
.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-left: 1px solid color-mix(in srgb, var(--sp-primary) 100%, #ffffff 20%);
}
.border-box>div:first-child {
border-right: 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;
left: 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(65deg, transparent 50%, var(--sp-secondary) 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-left: 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-right: -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);
}
body.rtl .about-panel .avatar-group .btn {
transform: rotate(180deg);
}
.client-feedback .clients-satisfied {
position: relative;
margin-left: 20px;
}
.client-feedback .clients-satisfied::after {
position: absolute;
left: -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;
left: -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;
right: 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-right: -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-left: 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;
left: 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-left: 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);
}
.information-item .information-content .btn i {
transform: rotate(180deg);
}
/* 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: right;
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;
right: 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 {
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-left: 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-right: 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;
right: 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;
right: 110px;
top: 50px;
padding-right: 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;
right: 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-right: 2.5rem;
z-index: 0;
}
.blog-section.blog-single-page ol.comment-list li#comment-13 {
margin-right: -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;
}
.footer-copyright .widget_nav_menu .menu-item {
display: inline-block;
padding: 0 10px;
}
.footer-copyright .widget_nav_menu .menu-item a {
text-decoration: underline;
}
.footer-copyright .widget_nav_menu .menu-item a:hover, .footer-copyright .widget_nav_menu .menu-item a:focus {
text-decoration: dotted underline;
}
.footer-copyright .widget_nav_menu .menu-item::before {
display: none;
}
section.related.products h2 {
margin-bottom: 30px;
}
/*****------------------- RTL ------------------------*****/
#cursor,
.owl-carousel,
.heading-default .custom-owl-nav {
direction: ltr;
}
.tns-visually-hidden {
display: none;
}
.post-items,
.post-card,
.post-list,
.timeline-item,
.information-item,
.contactform .wpcf7,
.post-card .post-thumbnail,
.breaking-news-slider .item,
.above-social-slider .above-item {
direction: rtl;
}
body.rtl .menu-right>ul>li {
margin-right: 15px;
margin-left: 0;
}
body.rtl .widget-contact .contact-area,
body.rtl .navbar-area .menubar .dropdown-menu {
text-align: right;
}
body.rtl .menu-link-item .dropdown-item::before, body.rtl .menubar .dropdown-menu li>a::before{
margin-right: 10px;
right: 0;
margin-left: 0;
}
.menubar .menu-wrap>li.dropdown>a:before {
left: 5px;
right: unset;
}
.menubar ul.menu-wrap>li.dropdown>a {
padding: 0 10px;
padding-left: 24px;
}
.footer .menu-wrap .dropdown-menu li:hover>a,
.footer .menu-wrap .dropdown-menu li:focus-within>a,
.footer-copyright .widget_nav_menu .sub-menu li:hover>a,
.footer-copyright .widget_nav_menu .sub-menu li:focus-within>a,
.header .widget_nav_menu .sub-menu li:hover>a,
.header .widget_nav_menu .sub-menu li:focus-within>a,
.menubar .dropdown-menu li:hover>a,
.menubar .dropdown-menu li:focus-within>a {
padding-right: 20px;
}
.nav-area .navbar-area .main-menu-right {
margin-left: unset;
margin-right: auto;
}
.nav-area .navbar-area .main-menu-right .menu-right-list li .header-search-toggle {
border-right: 1px solid var(--sp-border-dark);
border-left: unset;
}
.nav-area .navbar-area .main-menu-right .menu-right-list li>.view-icon-wrap,
.nav-area .navbar-area .main-menu-right .menu-right-list li>button {
border-left: 1px solid var(--sp-border-dark);
}
.menubar ul.menu-wrap>li:not(:last-child)>a::after {
left: -10px;
right: unset;
}
body.rtl .wp-block-search__button{
margin-left: 0;
}
body.rtl .wp-block-categories-list li.cat-item a {
padding-left: 0;
padding-right: 15px;
}
body.rtl .wp-block-categories-list li.cat-item a::before {
right: 0;
}
body.rtl .menu-link-item .dropdown-item:focus-within,
body.rtl .menu-link-item .dropdown-item:hover {
padding: 12px 15px;
padding-right: 20px !important;
}
body.rtl .menu-thumbnail-item .dropdown-item>img {
float: right;
}
body.rtl .menu-single-item .link-item-description,
body.rtl .thumbnail-item-title {
padding-left: 0;
padding-right: 90px;
}
body.rtl .toggle-lines.open .meat {
display: none;
}
body.rtl .footer .menu-wrap .dropdown-menu .dropdown>a:after,
body.rtl .footer-copyright .widget_nav_menu .sub-menu .menu-item-has-children>a:after,
body.rtl .header .widget_nav_menu .sub-menu .menu-item-has-children>a:after,
body.rtl .menubar .dropdown-menu .dropdown>a:after {
content: "\f104";
left: 15px;
right: unset;
}
body.rtl .menubar .nav li .dropdown-menu li .dropdown-menu,
body.rtl .menubar .nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
right: 100%;
left: unset;
}
body.rtl .menubar .nav li .dropdown-menu li .dropdown-menu li .dropdown-menu,
body.rtl .menubar .nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu,
body.rtl .menubar .nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
right: 0%;
}
body.rtl .menubar .nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu,
body.rtl .menubar .nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
right: -100%;
}
body.rtl .menubar .nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
right: -100%;
}
body.rtl .sale-ribbon, body.rtl.woocommerce span.onsale{
right: 15px;
left: unset;
}
.comment-respond .comment-form .comment-form-rating {
margin-left: unset;
margin-right: auto;
}
body.rtl table,
body.rtl .product .product-single {
text-align: right;
}
@media (min-width: 992px) and (max-width: 1124px) {
body.rtl .funfact-item:not(:last-child)::after {
left: -35px;
right: unset;
}
}
@media (max-width: 1199px) {
body.rtl .menubar ul.menu-wrap>li:not(:last-child)>a::after {
left: -3px;
right: unset;
}
}
@media only screen and (max-width: 991px) {
body.rtl .navbar-area .menubar .dropdown-menu li .dropdown-menu {
margin-right: 5px;
margin-left: 0;
}
body.rtl .header .above-header .widget-temperature-air {
margin-right: 10px;
margin-left: 0;
}
body.rtl .menubar {
right: -100%;
left: unset;
}
body.rtl .menubar.show {
left: unset;
right: 0;
}
.menubar .menu-wrap>li.dropdown .mobile-toggler>button.fa-chevron-right:before {
content: "\f104";
}
body.rtl .funfact-item:not(:last-child)::after {
left: -35px;
right: unset;
}
body.rtl .navbar-area .menubar .dropdown-menu .dropdown>a:after,
body.rtl .navbar-area .menubar .dropdown-menu .dropdown.open>a:after,
body.rtl .menubar .menu-wrap>li.dropdown.open>a:before,
body.rtl .menubar .menu-wrap>li.dropdown>a:before {
content: unset;
}
}
@media only screen and (max-width: 767px) {
body.rtl .funfact-item:not(:last-child)::after {
left: 50%;
right: unset;
}
}
@media (max-width: 575px) {
body.rtl .blog-section.blog-single-page .comments-area .comment-body {
padding: 10px;
padding-right: 90px;
}
body.rtl .blog-section.blog-single-page .comments-area .comment-meta .comment-author img {
right: 10px;
}
body.rtl .blog-section.blog-single-page .comments-area .comment-body .comment-metadata a time{
right: 90px;
}
}
@media only screen and (max-width: 425px) {
body.rtl .header .above-header .widget-date-time .date .month,
body.rtl .header .above-header .widget-date-time .date .year{
padding-left: 4px;
}
body.rtl .header .above-header .widget-temperature-air>ul>li:not(:last-child)::after{
left: -9px;
}
}